@hitachivantara/uikit-react-core 5.41.1 → 5.42.1

package/dist/esm/ListContainer/ListContainer.mjs

@@ -0,0 +1,61 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import React__default, { forwardRef, useRef, useContext, useMemo } from "react";
+import { useForkRef } from "../hooks/useForkRef.mjs";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useClasses } from "./ListContainer.styles.mjs";
+import { staticClasses } from "./ListContainer.styles.mjs";
+import HvListContext from "./ListContext/ListContext.mjs";
+const HvListContainer = forwardRef((props, ref) => {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    interactive = false,
+    condensed,
+    disableGutters,
+    children,
+    ...others
+  } = useDefaultProps("HvListContainer", props);
+  const { classes, cx } = useClasses(classesProp);
+  const containerRef = useRef(null);
+  const { topContainerRef, nesting = -1 } = useContext(HvListContext);
+  const listContext = useMemo(
+    () => ({
+      topContainerRef: topContainerRef || containerRef,
+      condensed,
+      disableGutters,
+      interactive,
+      nesting: nesting + 1
+    }),
+    [condensed, disableGutters, interactive, nesting, topContainerRef]
+  );
+  const renderChildren = () => {
+    if (!interactive) {
+      return children;
+    }
+    const anySelected = React__default.Children.toArray(children).map((child) => child.props.selected && !child.props.disabled).reduce((result, selected) => result || selected, false);
+    return React__default.Children.map(children, (child, i) => {
+      const tabIndex = child.props.tabIndex || !anySelected && i === 0 || child.props.selected && !child.props.disabled ? 0 : -1;
+      return React__default.cloneElement(child, {
+        tabIndex,
+        interactive
+      });
+    });
+  };
+  const handleRef = useForkRef(ref, containerRef);
+  return /* @__PURE__ */ jsx(HvListContext.Provider, { value: listContext, children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref: handleRef,
+      id,
+      className: cx(classes.root, className),
+      ...others,
+      children: renderChildren()
+    }
+  ) });
+});
+export {
+  HvListContainer,
+  staticClasses as listContainerClasses
+};
+//# sourceMappingURL=ListContainer.mjs.map

package/dist/esm/ListContainer/ListContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListContainer.mjs","sources":["../../../src/ListContainer/ListContainer.tsx"],"sourcesContent":["import React, { useRef, useContext, useMemo, forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { useForkRef } from \"../hooks/useForkRef\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ListContainer.styles\";\nimport HvListContext from \"./ListContext\";\n\nexport { staticClasses as listContainerClasses };\n\nexport type HvListContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListContainerProps extends HvBaseProps<HTMLUListElement> {\n  /**\n   * If the list items should be focusable and react to mouse over events.\n   * Defaults to true if the list is selectable, false otherwise.\n   */\n  interactive?: boolean;\n  /** If `true` compact the vertical spacing between list items. */\n  condensed?: boolean;\n  /** If `true`, the list items' left and right padding is removed. */\n  disableGutters?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListContainerClasses;\n}\n\n/**\n * A <b>list</b> is any enumeration of a set of items.\n * The simple list is for continuous <b>vertical indexes of text or icons+text</b>. The content of these lists must be simple: ideally simples fields.\n * This pattern is ideal for <b>selections</b>. It should be used inside a HvPanel.\n */\nexport const HvListContainer = forwardRef<\n  HTMLUListElement,\n  HvListContainerProps\n>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    interactive = false,\n    condensed,\n    disableGutters,\n    children,\n    ...others\n  } = useDefaultProps(\"HvListContainer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const containerRef = useRef(null);\n\n  const { topContainerRef, nesting = -1 } = useContext(HvListContext);\n\n  const listContext = useMemo(\n    () => ({\n      topContainerRef: topContainerRef || containerRef,\n      condensed,\n      disableGutters,\n      interactive,\n      nesting: nesting + 1,\n    }),\n    [condensed, disableGutters, interactive, nesting, topContainerRef]\n  );\n\n  const renderChildren = () => {\n    if (!interactive) {\n      return children;\n    }\n\n    const anySelected = React.Children.toArray(children)\n      .map((child: any) => child.props.selected && !child.props.disabled)\n      .reduce((result, selected) => result || selected, false);\n\n    return React.Children.map(children, (child: any, i) => {\n      const tabIndex =\n        child.props.tabIndex ||\n        (!anySelected && i === 0) ||\n        (child.props.selected && !child.props.disabled)\n          ? 0\n          : -1;\n\n      return React.cloneElement(child, {\n        tabIndex,\n        interactive,\n      });\n    });\n  };\n\n  const handleRef = useForkRef(ref, containerRef);\n\n  return (\n    <HvListContext.Provider value={listContext}>\n      <ul\n        ref={handleRef}\n        id={id}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {renderChildren()}\n      </ul>\n    </HvListContext.Provider>\n  );\n});\n"],"names":["React"],"mappings":";;;;;;;AAiCO,MAAM,kBAAkB,WAG7B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAE5C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,OAAO,IAAI;AAEhC,QAAM,EAAE,iBAAiB,UAAU,GAAG,IAAI,WAAW,aAAa;AAElE,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,MACL,iBAAiB,mBAAmB;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,UAAU;AAAA,IAAA;AAAA,IAErB,CAAC,WAAW,gBAAgB,aAAa,SAAS,eAAe;AAAA,EAAA;AAGnE,QAAM,iBAAiB,MAAM;AAC3B,QAAI,CAAC,aAAa;AACT,aAAA;AAAA,IACT;AAEM,UAAA,cAAcA,eAAM,SAAS,QAAQ,QAAQ,EAChD,IAAI,CAAC,UAAe,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM,QAAQ,EACjE,OAAO,CAAC,QAAQ,aAAa,UAAU,UAAU,KAAK;AAEzD,WAAOA,eAAM,SAAS,IAAI,UAAU,CAAC,OAAY,MAAM;AACrD,YAAM,WACJ,MAAM,MAAM,YACX,CAAC,eAAe,MAAM,KACtB,MAAM,MAAM,YAAY,CAAC,MAAM,MAAM,WAClC,IACA;AAEC,aAAAA,eAAM,aAAa,OAAO;AAAA,QAC/B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA;AAGG,QAAA,YAAY,WAAW,KAAK,YAAY;AAE9C,SACG,oBAAA,cAAc,UAAd,EAAuB,OAAO,aAC7B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACpC,GAAG;AAAA,MAEH,UAAe,eAAA;AAAA,IAAA;AAAA,EAEpB,EAAA,CAAA;AAEJ,CAAC;"}

package/dist/esm/ListContainer/ListContainer.styles.mjs

@@ -0,0 +1,9 @@
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvListContainer", {
+  root: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=ListContainer.styles.mjs.map

package/dist/esm/ListContainer/ListContainer.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListContainer.styles.mjs","sources":["../../../src/ListContainer/ListContainer.styles.tsx"],"sourcesContent":["import { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListContainer\", {\n  root: {},\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM,CAAC;AACT,CAAC;"}

package/dist/esm/ListContainer/ListContext/ListContext.mjs

@@ -0,0 +1,8 @@
+import React__default from "react";
+const ListContext = React__default.createContext({});
+ListContext.displayName = "ListContext";
+const HvListContext = ListContext;
+export {
+  HvListContext as default
+};
+//# sourceMappingURL=ListContext.mjs.map

package/dist/esm/ListContainer/ListContext/ListContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListContext.mjs","sources":["../../../../src/ListContainer/ListContext/ListContext.ts"],"sourcesContent":["import React from \"react\";\n\nconst ListContext = React.createContext<{\n  interactive?: boolean;\n  nesting?: number;\n  condensed?: boolean;\n  disableGutters?: boolean;\n  topContainerRef?: React.MutableRefObject<HTMLUListElement | null>;\n}>({});\n\nListContext.displayName = \"ListContext\";\n\nexport default ListContext;\n"],"names":["React"],"mappings":";AAEA,MAAM,cAAcA,eAAM,cAMvB,CAAA,CAAE;AAEL,YAAY,cAAc;AAE1B,MAAA,gBAAe;"}

package/dist/esm/ListContainer/ListItem/ListItem.mjs

@@ -0,0 +1,156 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import React__default, { forwardRef, useContext, useCallback, useMemo } from "react";
+import { useDefaultProps } from "../../hooks/useDefaultProps.mjs";
+import { useClasses } from "./ListItem.styles.mjs";
+import { staticClasses } from "./ListItem.styles.mjs";
+import HvListContext from "../ListContext/ListContext.mjs";
+import { HvFocus } from "../../Focus/Focus.mjs";
+const applyClassNameAndStateToElement = (element, selected, disabled, onClick, className) => {
+  if (element != null) {
+    return React__default.cloneElement(element, {
+      className,
+      checked: !!selected,
+      disabled,
+      onChange: (evt) => onClick?.(evt)
+    });
+  }
+  return null;
+};
+const applyClassNameToElement = (element, className) => {
+  if (element != null) {
+    return React__default.cloneElement(element, {
+      className
+    });
+  }
+  return null;
+};
+const HvListItem = forwardRef((props, ref) => {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    role,
+    value,
+    selected,
+    disabled,
+    interactive: interactiveProp,
+    condensed: condensedProp,
+    disableGutters: disableGuttersProp,
+    startAdornment,
+    endAdornment,
+    onClick,
+    children,
+    tabIndex,
+    ...others
+  } = useDefaultProps("HvListItem", props);
+  const { classes, cx } = useClasses(classesProp);
+  const {
+    topContainerRef,
+    condensed: condensedContext,
+    disableGutters: disableGuttersContext,
+    interactive: interactiveContext
+  } = useContext(HvListContext);
+  const condensed = condensedProp != null ? condensedProp : condensedContext;
+  const disableGutters = disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;
+  const interactive = interactiveProp != null ? interactiveProp : interactiveContext;
+  const handleOnClick = useCallback(
+    (evt) => {
+      if (!disabled) {
+        onClick?.(evt);
+      }
+    },
+    [disabled, onClick]
+  );
+  const clonedStartAdornment = useMemo(
+    () => applyClassNameAndStateToElement(
+      startAdornment,
+      selected,
+      disabled,
+      handleOnClick,
+      cx(
+        classes.startAdornment,
+        { [classes.disabled]: disabled },
+        React__default.isValidElement(startAdornment) ? startAdornment.props.className : void 0
+      )
+    ),
+    [
+      cx,
+      classes?.startAdornment,
+      classes?.disabled,
+      disabled,
+      handleOnClick,
+      selected,
+      startAdornment
+    ]
+  );
+  const clonedEndAdornment = useMemo(
+    () => applyClassNameToElement(
+      endAdornment,
+      cx(
+        classes.endAdornment,
+        { [classes.disabled]: disabled },
+        React__default.isValidElement(endAdornment) ? endAdornment.props.className : void 0
+      )
+    ),
+    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]
+  );
+  const roleOptionAriaProps = role === "option" || role === "menuitem" ? {
+    "aria-disabled": disabled || void 0,
+    "aria-selected": selected
+  } : {};
+  const listItem = (
+    // For later: this should only have an onClick event if interactive and has the appropriate role.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    /* @__PURE__ */ jsxs(
+      "li",
+      {
+        id,
+        ref,
+        role,
+        value,
+        className: cx(
+          classes.root,
+          {
+            [classes.gutters]: !disableGutters,
+            [classes.condensed]: condensed,
+            [classes.interactive]: interactive,
+            [classes.selected]: !!selected,
+            [classes.disabled]: !!disabled,
+            [classes.withStartAdornment]: startAdornment != null,
+            [classes.withEndAdornment]: endAdornment != null
+          },
+          className
+        ),
+        onClick: handleOnClick,
+        onKeyDown: () => {
+        },
+        ...roleOptionAriaProps,
+        ...others,
+        children: [
+          clonedStartAdornment,
+          children,
+          clonedEndAdornment
+        ]
+      }
+    )
+  );
+  return interactive ? /* @__PURE__ */ jsx(
+    HvFocus,
+    {
+      rootRef: topContainerRef,
+      selected,
+      disabledClass: disabled || void 0,
+      strategy: role === "option" ? "listbox" : "menu",
+      classes: { focus: classes.focus },
+      configuration: {
+        tabIndex
+      },
+      children: listItem
+    }
+  ) : listItem;
+});
+export {
+  HvListItem,
+  staticClasses as listItemClasses
+};
+//# sourceMappingURL=ListItem.mjs.map

package/dist/esm/ListContainer/ListItem/ListItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.mjs","sources":["../../../../src/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvFocus } from \"../../Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<any, HvListItemProps>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <li\n      id={id}\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: !!selected,\n          [classes.disabled]: !!disabled,\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      onClick={handleOnClick}\n      onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["React"],"mappings":"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"}

package/dist/esm/ListContainer/ListItem/ListItem.styles.mjs

@@ -0,0 +1,82 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../../utils/focusUtils.mjs";
+import { createClasses } from "../../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvListItem", {
+  root: {
+    ...theme.typography.body,
+    padding: 0,
+    display: "block",
+    height: "32px",
+    lineHeight: "32px",
+    listStyleType: "none",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    position: "relative",
+    "&:not(:last-child)": {
+      marginBottom: "8px"
+    },
+    "&$condensed": {
+      marginBottom: 0
+    },
+    "&.HvIsFocused": {
+      ...outlineStyles,
+      backgroundColor: theme.colors.atmo3,
+      zIndex: 2
+    }
+  },
+  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },
+  startAdornment: {},
+  endAdornment: {},
+  gutters: {
+    padding: `0 ${theme.space.xs}`,
+    "&$withStartAdornment": {
+      paddingLeft: 0
+    },
+    "&$withEndAdornment": {
+      paddingRight: 0
+    }
+  },
+  condensed: {},
+  interactive: {
+    cursor: "pointer",
+    "&:not($disabled):not($selected):hover": {
+      backgroundColor: theme.colors.containerBackgroundHover
+    },
+    "&$disabled": {
+      cursor: "not-allowed"
+    }
+  },
+  selected: { backgroundColor: theme.colors.containerBackgroundHover },
+  disabled: {
+    color: theme.colors.secondary_60,
+    backgroundColor: theme.colors.atmo3
+  },
+  withStartAdornment: {
+    "& > div": {
+      float: "left"
+    },
+    "& svg": {
+      boxShadow: "none !important",
+      outline: "none !important"
+    },
+    "$disabled > svg *.color0": {
+      fill: theme.colors.secondary_60
+    }
+  },
+  withEndAdornment: {
+    "& > div": { float: "right" },
+    "& svg": {
+      boxShadow: "none !important",
+      outline: "none !important"
+    },
+    "$disabled > svg *.color0": {
+      fill: theme.colors.secondary_60
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=ListItem.styles.mjs.map

package/dist/esm/ListContainer/ListItem/ListItem.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.styles.mjs","sources":["../../../../src/ListContainer/ListItem/ListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../../utils/focusUtils\";\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvListItem\", {\n  root: {\n    ...theme.typography.body,\n    padding: 0,\n    display: \"block\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    listStyleType: \"none\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n    position: \"relative\",\n\n    \"&:not(:last-child)\": {\n      marginBottom: \"8px\",\n    },\n\n    \"&$condensed\": {\n      marginBottom: 0,\n    },\n\n    \"&.HvIsFocused\": {\n      ...outlineStyles,\n      backgroundColor: theme.colors.atmo3,\n      zIndex: 2,\n    },\n  },\n  focus: { backgroundColor: theme.colors.atmo3, zIndex: 2 },\n  startAdornment: {},\n  endAdornment: {},\n  gutters: {\n    padding: `0 ${theme.space.xs}`,\n\n    \"&$withStartAdornment\": {\n      paddingLeft: 0,\n    },\n    \"&$withEndAdornment\": {\n      paddingRight: 0,\n    },\n  },\n  condensed: {},\n  interactive: {\n    cursor: \"pointer\",\n    \"&:not($disabled):not($selected):hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n    \"&$disabled\": {\n      cursor: \"not-allowed\",\n    },\n  },\n  selected: { backgroundColor: theme.colors.containerBackgroundHover },\n  disabled: {\n    color: theme.colors.secondary_60,\n    backgroundColor: theme.colors.atmo3,\n  },\n  withStartAdornment: {\n    \"& > div\": {\n      float: \"left\",\n    },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n  withEndAdornment: {\n    \"& > div\": { float: \"right\" },\n\n    \"& svg\": {\n      boxShadow: \"none !important\",\n      outline: \"none !important\",\n    },\n    \"$disabled > svg *.color0\": {\n      fill: theme.colors.secondary_60,\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA,EACvE,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,IAEV,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,IAEA,eAAe;AAAA,MACb,cAAc;AAAA,IAChB;AAAA,IAEA,iBAAiB;AAAA,MACf,GAAG;AAAA,MACH,iBAAiB,MAAM,OAAO;AAAA,MAC9B,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,OAAO,EAAE,iBAAiB,MAAM,OAAO,OAAO,QAAQ,EAAE;AAAA,EACxD,gBAAgB,CAAC;AAAA,EACjB,cAAc,CAAC;AAAA,EACf,SAAS;AAAA,IACP,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAE5B,wBAAwB;AAAA,MACtB,aAAa;AAAA,IACf;AAAA,IACA,sBAAsB;AAAA,MACpB,cAAc;AAAA,IAChB;AAAA,EACF;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,yCAAyC;AAAA,MACvC,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,UAAU,EAAE,iBAAiB,MAAM,OAAO,yBAAyB;AAAA,EACnE,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,oBAAoB;AAAA,IAClB,WAAW;AAAA,MACT,OAAO;AAAA,IACT;AAAA,IAEA,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1B,MAAM,MAAM,OAAO;AAAA,IACrB;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,WAAW,EAAE,OAAO,QAAQ;AAAA,IAE5B,SAAS;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,4BAA4B;AAAA,MAC1B,MAAM,MAAM,OAAO;AAAA,IACrB;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Loading/Loading.mjs

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { getColor } from "@hitachivantara/uikit-styles";
+import range from "lodash/range";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useClasses } from "./Loading.styles.mjs";
+import { staticClasses } from "./Loading.styles.mjs";
+import { HvTypography } from "../Typography/Typography.mjs";
+const HvLoading = (props) => {
+  const {
+    color,
+    hidden,
+    small,
+    label,
+    classes: classesProp,
+    className,
+    ...others
+  } = useDefaultProps("HvLoading", props);
+  const { classes, cx } = useClasses(classesProp);
+  const size = small ? "small" : "regular";
+  const colorVariant = color ? "Color" : "";
+  const variant = `${size}${colorVariant}`;
+  const inline = {
+    backgroundColor: getColor(color, small ? "secondary" : "brand")
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      hidden: !!hidden,
+      className: cx(
+        classes.root,
+        {
+          [classes.hidden]: hidden
+        },
+        className
+      ),
+      ...others,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: classes.barContainer, children: range(0, 3).map((e) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: inline,
+            className: cx(classes.loadingBar, classes[variant])
+          },
+          e
+        )) }),
+        label && /* @__PURE__ */ jsx(HvTypography, { variant: "caption1", className: classes.label, children: label })
+      ]
+    }
+  );
+};
+export {
+  HvLoading,
+  staticClasses as loadingClasses
+};
+//# sourceMappingURL=Loading.mjs.map

package/dist/esm/Loading/Loading.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.mjs","sources":["../../../src/Loading/Loading.tsx"],"sourcesContent":["import { HvColorAny, getColor } from \"@hitachivantara/uikit-styles\";\n\nimport range from \"lodash/range\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvTypography } from \"../Typography\";\n\nimport { staticClasses, useClasses } from \"./Loading.styles\";\n\nexport { staticClasses as loadingClasses };\n\nexport type HvLoadingClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingProps extends HvBaseProps {\n  /** Indicates if the component should be render in a small size. */\n  small?: boolean;\n  /** The label to be displayed.  */\n  label?: string | React.ReactNode;\n  /** Whether the loading animation is hidden. */\n  hidden?: boolean;\n  /** Color applied to the bars. */\n  color?: HvColorAny;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLoadingClasses;\n}\n\n/**\n * Loading provides feedback about a process that is taking place in the application.\n */\nexport const HvLoading = (props: HvLoadingProps) => {\n  const {\n    color,\n    hidden,\n    small,\n    label,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvLoading\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const size = small ? \"small\" : \"regular\";\n  const colorVariant = color ? \"Color\" : \"\";\n  const variant = `${size}${colorVariant}` as const;\n\n  const inline = {\n    backgroundColor: getColor(color, small ? \"secondary\" : \"brand\"),\n  };\n  return (\n    <div\n      hidden={!!hidden}\n      className={cx(\n        classes.root,\n        {\n          [classes.hidden]: hidden,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.barContainer}>\n        {range(0, 3).map((e) => (\n          <div\n            key={e}\n            style={inline}\n            className={cx(classes.loadingBar, classes[variant])}\n          />\n        ))}\n      </div>\n      {label && (\n        <HvTypography variant=\"caption1\" className={classes.label}>\n          {label}\n        </HvTypography>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA+Ba,MAAA,YAAY,CAAC,UAA0B;AAC5C,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEtC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,OAAO,QAAQ,UAAU;AACzB,QAAA,eAAe,QAAQ,UAAU;AACvC,QAAM,UAAU,GAAG,IAAI,GAAG,YAAY;AAEtC,QAAM,SAAS;AAAA,IACb,iBAAiB,SAAS,OAAO,QAAQ,cAAc,OAAO;AAAA,EAAA;AAG9D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,QAAQ,CAAC,CAAC;AAAA,MACV,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,MAAM,GAAG;AAAA,QACpB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,cACrB,UAAA,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,MAChB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO;AAAA,YACP,WAAW,GAAG,QAAQ,YAAY,QAAQ,OAAO,CAAC;AAAA,UAAA;AAAA,UAF7C;AAAA,QAIR,CAAA,GACH;AAAA,QACC,6BACE,cAAa,EAAA,SAAQ,YAAW,WAAW,QAAQ,OACjD,UACH,MAAA,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/esm/Loading/Loading.styles.mjs

@@ -0,0 +1,105 @@
+import { keyframes } from "@emotion/react";
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+const interval = 0.11;
+const bars = {
+  "&:nth-of-type(1)": {
+    animationDelay: "0"
+  },
+  "&:nth-of-type(2)": {
+    animationDelay: `${interval * 2}s`
+  },
+  "&:nth-of-type(3)": {
+    animationDelay: `${interval * 4}s`
+  }
+};
+const small = {
+  width: "2px",
+  height: "18px",
+  margin: "0px 2px",
+  ...bars
+};
+const regular = {
+  width: "4px",
+  height: "30px",
+  margin: "0 3px",
+  ...bars
+};
+const regularAnimation = keyframes`
+  0% { 
+    transform: scale(1);
+    background-color: ${theme.colors.brand};
+  }
+  50% { 
+    transform: scale(1, 0.6); 
+    background-color: ${theme.colors.secondary};
+  }
+`;
+const regularColorAnimation = keyframes`
+  0% { 
+    transform: scale(1);
+  }
+  50% { 
+    transform: scale(1, 0.6); 
+  }
+`;
+const smallAnimation = keyframes`
+  0% { 
+    transform: scale(1);
+  }
+  50% { 
+    transform: scale(1, 0.223); 
+  }
+  100%: {},
+`;
+const smallColorAnimation = keyframes`
+  0% { 
+    transform: scale(1);
+  }
+  50% { 
+    transform: scale(1, 0.223); 
+  }
+`;
+const { staticClasses, useClasses } = createClasses("HvLoading", {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  barContainer: { display: "flex" },
+  loadingBar: {
+    display: "inline-block",
+    "@keyframes loading-small": {
+      "0%": {
+        transform: "scale(1)"
+      },
+      "50%": {
+        transform: "scale(1,0.223)"
+      },
+      "100%": {}
+    }
+  },
+  label: { marginTop: "15px" },
+  overlay: {},
+  blur: {},
+  hidden: { display: "none" },
+  small: { animation: `${smallAnimation} 1s ease-in-out infinite`, ...small },
+  regular: {
+    animation: `${regularAnimation} 1s ease-in-out infinite`,
+    ...regular
+  },
+  smallColor: {
+    animation: `${smallColorAnimation} 1s ease-in-out infinite`,
+    ...small
+  },
+  regularColor: {
+    animation: `${regularColorAnimation} 1s ease-in-out infinite`,
+    ...regular
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Loading.styles.mjs.map

package/dist/esm/Loading/Loading.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.styles.mjs","sources":["../../../src/Loading/Loading.styles.tsx"],"sourcesContent":["import { keyframes } from \"@emotion/react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nconst interval = 0.11;\n\nconst bars = {\n  \"&:nth-of-type(1)\": {\n    animationDelay: \"0\",\n  },\n  \"&:nth-of-type(2)\": {\n    animationDelay: `${interval * 2}s`,\n  },\n  \"&:nth-of-type(3)\": {\n    animationDelay: `${interval * 4}s`,\n  },\n};\n\nconst small = {\n  width: \"2px\",\n  height: \"18px\",\n  margin: \"0px 2px\",\n  ...bars,\n};\n\nconst regular = {\n  width: \"4px\",\n  height: \"30px\",\n  margin: \"0 3px\",\n  ...bars,\n};\n\nconst regularAnimation = keyframes`\n  0% { \n    transform: scale(1);\n    background-color: ${theme.colors.brand};\n  }\n  50% { \n    transform: scale(1, 0.6); \n    background-color: ${theme.colors.secondary};\n  }\n`;\n\nconst regularColorAnimation = keyframes`\n  0% { \n    transform: scale(1);\n  }\n  50% { \n    transform: scale(1, 0.6); \n  }\n`;\n\nconst smallAnimation = keyframes`\n  0% { \n    transform: scale(1);\n  }\n  50% { \n    transform: scale(1, 0.223); \n  }\n  100%: {},\n`;\n\nconst smallColorAnimation = keyframes`\n  0% { \n    transform: scale(1);\n  }\n  50% { \n    transform: scale(1, 0.223); \n  }\n`;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLoading\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  barContainer: { display: \"flex\" },\n  loadingBar: {\n    display: \"inline-block\",\n\n    \"@keyframes loading-small\": {\n      \"0%\": {\n        transform: \"scale(1)\",\n      },\n      \"50%\": {\n        transform: \"scale(1,0.223)\",\n      },\n      \"100%\": {},\n    },\n  },\n  label: { marginTop: \"15px\" },\n  overlay: {},\n  blur: {},\n  hidden: { display: \"none\" },\n  small: { animation: `${smallAnimation} 1s ease-in-out infinite`, ...small },\n  regular: {\n    animation: `${regularAnimation} 1s ease-in-out infinite`,\n    ...regular,\n  },\n  smallColor: {\n    animation: `${smallColorAnimation} 1s ease-in-out infinite`,\n    ...small,\n  },\n  regularColor: {\n    animation: `${regularColorAnimation} 1s ease-in-out infinite`,\n    ...regular,\n  },\n});\n"],"names":[],"mappings":";;;AAMA,MAAM,WAAW;AAEjB,MAAM,OAAO;AAAA,EACX,oBAAoB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,oBAAoB;AAAA,IAClB,gBAAgB,GAAG,WAAW,CAAC;AAAA,EACjC;AAAA,EACA,oBAAoB;AAAA,IAClB,gBAAgB,GAAG,WAAW,CAAC;AAAA,EACjC;AACF;AAEA,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,GAAG;AACL;AAEA,MAAM,UAAU;AAAA,EACd,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,GAAG;AACL;AAEA,MAAM,mBAAmB;AAAA;AAAA;AAAA,wBAGD,MAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,wBAIlB,MAAM,OAAO,SAAS;AAAA;AAAA;AAI9C,MAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS9B,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvB,MAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASrB,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,cAAc,EAAE,SAAS,OAAO;AAAA,EAChC,YAAY;AAAA,IACV,SAAS;AAAA,IAET,4BAA4B;AAAA,MAC1B,MAAM;AAAA,QACJ,WAAW;AAAA,MACb;AAAA,MACA,OAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,MACA,QAAQ,CAAC;AAAA,IACX;AAAA,EACF;AAAA,EACA,OAAO,EAAE,WAAW,OAAO;AAAA,EAC3B,SAAS,CAAC;AAAA,EACV,MAAM,CAAC;AAAA,EACP,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC1B,OAAO,EAAE,WAAW,GAAG,cAAc,4BAA4B,GAAG,MAAM;AAAA,EAC1E,SAAS;AAAA,IACP,WAAW,GAAG,gBAAgB;AAAA,IAC9B,GAAG;AAAA,EACL;AAAA,EACA,YAAY;AAAA,IACV,WAAW,GAAG,mBAAmB;AAAA,IACjC,GAAG;AAAA,EACL;AAAA,EACA,cAAc;AAAA,IACZ,WAAW,GAAG,qBAAqB;AAAA,IACnC,GAAG;AAAA,EACL;AACF,CAAC;"}

package/dist/esm/Login/Login.mjs

@@ -0,0 +1,32 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useDefaultProps } from "../hooks/useDefaultProps.mjs";
+import { useClasses } from "./Login.styles.mjs";
+import { staticClasses } from "./Login.styles.mjs";
+const HvLogin = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    children,
+    background,
+    ...others
+  } = useDefaultProps("HvLogin", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      className: cx(classes.root, className),
+      style: {
+        backgroundImage: background && `url(${background})`
+      },
+      ...others,
+      children: /* @__PURE__ */ jsx("div", { className: classes.formContainer, children })
+    }
+  );
+};
+export {
+  HvLogin,
+  staticClasses as loginClasses
+};
+//# sourceMappingURL=Login.mjs.map

package/dist/esm/Login/Login.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Login.mjs","sources":["../../../src/Login/Login.tsx"],"sourcesContent":["import { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvBaseProps } from \"../types/generic\";\n\nimport { staticClasses, useClasses } from \"./Login.styles\";\n\nexport { staticClasses as loginClasses };\n\nexport type HvLoginClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoginProps extends HvBaseProps {\n  /**\n   *  The path for the background image.\n   */\n  background?: string;\n  /**\n   * Class names to be applied.\n   */\n  classes?: HvLoginClasses;\n}\n\n/**\n * Container layout for the login form.\n */\nexport const HvLogin = (props: HvLoginProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    children,\n    background,\n    ...others\n  } = useDefaultProps(\"HvLogin\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      id={id}\n      className={cx(classes.root, className)}\n      style={{\n        backgroundImage: background && `url(${background})`,\n      }}\n      {...others}\n    >\n      <div className={classes.formContainer}>{children}</div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAwBa,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,OAAO;AAAA,QACL,iBAAiB,cAAc,OAAO,UAAU;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,eAAgB,UAAS;AAAA,IAAA;AAAA,EAAA;AAGvD;"}

package/dist/esm/Login/Login.styles.mjs

@@ -0,0 +1,24 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.mjs";
+const { staticClasses, useClasses } = createClasses("HvLogin", {
+  root: {
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "bottom",
+    backgroundSize: "cover",
+    width: "100%",
+    height: "100%",
+    padding: 0,
+    margin: "-1px 0 0 0"
+  },
+  formContainer: {
+    background: theme.colors.atmo2,
+    marginLeft: "auto",
+    maxWidth: 500,
+    height: "100%"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Login.styles.mjs.map

package/dist/esm/Login/Login.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Login.styles.mjs","sources":["../../../src/Login/Login.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLogin\", {\n  root: {\n    backgroundRepeat: \"no-repeat\",\n    backgroundPosition: \"bottom\",\n    backgroundSize: \"cover\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: 0,\n    margin: \"-1px 0 0 0\",\n  },\n  formContainer: {\n    background: theme.colors.atmo2,\n    marginLeft: \"auto\",\n    maxWidth: 500,\n    height: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,eAAe;AAAA,IACb,YAAY,MAAM,OAAO;AAAA,IACzB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AACF,CAAC;"}