@hitachivantara/uikit-react-core 5.103.0 → 5.104.0

package/dist/cjs/packages/core/src/BaseDropdown/BaseDropdown.cjs

@@ -0,0 +1,287 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const reactPopper = require("react-popper");
+const utils = require("@mui/material/utils");
+const core = require("@popperjs/core");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const useControlled = require("../hooks/useControlled.cjs");
+const useUniqueId = require("../hooks/useUniqueId.cjs");
+const icons = require("../icons.cjs");
+const focusableElementFinder = require("../utils/focusableElementFinder.cjs");
+const keyboardUtils = require("../utils/keyboardUtils.cjs");
+const setId = require("../utils/setId.cjs");
+const BaseDropdown_styles = require("./BaseDropdown.styles.cjs");
+const BaseDropdownPanel = require("./BaseDropdownPanel.cjs");
+const context = require("./context.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const BaseDropdown = a.forwardRef(function BaseDropdown2(props, ref) {
+  const {
+    id: idProp,
+    className,
+    classes: classesProp,
+    children,
+    role,
+    placeholder,
+    component,
+    headerComponent: HeaderComponentProp,
+    adornment,
+    expanded,
+    dropdownHeaderProps,
+    defaultExpanded,
+    disabled,
+    readOnly,
+    required,
+    disablePortal,
+    "aria-expanded": ariaExpandedProp,
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp,
+    dropdownHeaderRef: dropdownHeaderRefProp,
+    onToggle,
+    onClickOutside,
+    ...others
+  } = props;
+  const { classes, cx } = BaseDropdown_styles.useClasses(classesProp);
+  const {
+    popperPlacement,
+    popperElement,
+    referenceElement,
+    setReferenceElement
+  } = context.useBaseDropdownContext();
+  const [isOpen, setIsOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
+  const headerRef = utils.useForkRef(
+    setReferenceElement,
+    dropdownHeaderRefProp,
+    dropdownHeaderProps?.ref
+  );
+  const customHeaderRef = utils.useForkRef(ref, headerRef);
+  const ariaRole = role || (component == null ? "combobox" : void 0);
+  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
+  const id = useUniqueId.useUniqueId(idProp);
+  const containerId = setId.setId(id, "children-container");
+  const headerControlArias = {
+    "aria-required": required ?? void 0,
+    "aria-readonly": readOnly ?? void 0,
+    "aria-disabled": disabled ?? void 0,
+    "aria-expanded": ariaExpanded,
+    "aria-owns": isOpen ? containerId : void 0,
+    "aria-controls": isOpen ? containerId : void 0
+  };
+  const headerAriaLabels = {
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp
+  };
+  const handleToggle = a.useCallback(
+    (event) => {
+      if (event && !keyboardUtils.isKey(event, "Tab")) {
+        event.preventDefault();
+      }
+      const notControlKey = !!event?.code && !keyboardUtils.isOneOfKeys(event, ["Tab", "Enter", "Esc", "ArrowDown", "Space"]);
+      const ignoredCombinations = keyboardUtils.isKey(event, "Esc") && !isOpen || keyboardUtils.isKey(event, "ArrowDown") && isOpen || keyboardUtils.isKey(event, "Tab") && !isOpen;
+      if (disabled || notControlKey || ignoredCombinations) return;
+      const newOpen = !isOpen;
+      setIsOpen(() => {
+        if (!newOpen) {
+          referenceElement?.focus({ preventScroll: true });
+        }
+        return newOpen;
+      });
+      onToggle?.(event, newOpen);
+    },
+    [isOpen, disabled, setIsOpen, onToggle, referenceElement]
+  );
+  const defaultHeaderElement = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id: setId.setId(id, "header"),
+      "data-popper-placement": popperPlacement,
+      className: cx(classes.header, {
+        [classes.headerOpen]: isOpen,
+        [classes.headerOpenUp]: isOpen && popperPlacement?.includes("top"),
+        [classes.headerOpenDown]: isOpen && popperPlacement?.includes("bottom"),
+        [classes.headerReadOnly]: readOnly,
+        [classes.headerDisabled]: disabled
+      }),
+      role: ariaRole === "combobox" ? "textbox" : void 0,
+      ...headerAriaLabels,
+      style: disabled || readOnly ? { pointerEvents: "none" } : void 0,
+      tabIndex: disabled ? -1 : 0,
+      ref: headerRef,
+      ...dropdownHeaderProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cx(classes.selection, {
+              [classes.selectionDisabled]: disabled
+            }),
+            children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { noWrap: true, className: classes.placeholder, children: placeholder }) : placeholder
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsxRuntime.jsx(
+          icons.HvIcon,
+          {
+            name: "CaretDown",
+            size: "xs",
+            rotate: isOpen,
+            className: classes.arrow
+          }
+        ) })
+      ]
+    }
+  );
+  const headerElement = component && a.isValidElement(component) ? a.cloneElement(component, {
+    ref: headerRef,
+    ...headerControlArias
+  }) : defaultHeaderElement;
+  const handleContainerKeyDown = (event) => {
+    if (keyboardUtils.isKey(event, "Esc")) {
+      handleToggle(event);
+    }
+    if (keyboardUtils.isKey(event, "Tab") && !event.shiftKey) {
+      const focusList = focusableElementFinder.getFirstAndLastFocus(popperElement);
+      if (document.activeElement === focusList?.last) {
+        event.preventDefault();
+        focusList?.first?.focus();
+      }
+    }
+  };
+  const handleOutside = (event) => {
+    const isButtonClick = referenceElement?.contains(event.target);
+    if (!isButtonClick) {
+      onClickOutside?.(event);
+      setIsOpen(false);
+      onToggle?.(event, false);
+    }
+  };
+  const hasCustomHeader = !!HeaderComponentProp;
+  const HeaderComponent = HeaderComponentProp || "div";
+  const RootComponent = HeaderComponentProp ? a.Fragment : "div";
+  return /* @__PURE__ */ jsxRuntime.jsxs(RootComponent, { ...!hasCustomHeader && { className: classes.root }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      HeaderComponent,
+      {
+        ref: hasCustomHeader ? customHeaderRef : ref,
+        id,
+        disabled: hasCustomHeader && disabled,
+        className: cx(className, {
+          [classes.anchor]: !hasCustomHeader,
+          [classes.rootDisabled]: disabled
+        }),
+        ...!readOnly && {
+          onKeyDown: handleToggle,
+          onClick: handleToggle
+        },
+        ...(ariaRole || hasCustomHeader) && {
+          role: hasCustomHeader ? void 0 : ariaRole,
+          ...headerAriaLabels,
+          ...headerControlArias
+        },
+        tabIndex: hasCustomHeader ? void 0 : -1,
+        ...others,
+        children: headerElement
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      BaseDropdownPanel.BaseDropdownPanel,
+      {
+        classes,
+        containerId,
+        onClickAway: handleOutside,
+        disablePortal,
+        onContainerKeyDown: handleContainerKeyDown,
+        children
+      }
+    )
+  ] });
+});
+const HvBaseDropdown = a.forwardRef(
+  function HvBaseDropdown2(props, ref) {
+    const {
+      popperProps = {},
+      variableWidth,
+      placement: placementProp = "right",
+      onContainerCreation,
+      ...others
+    } = uikitReactUtils.useDefaultProps("HvBaseDropdown", props);
+    const placement = `bottom-${placementProp === "right" ? "start" : "end"}`;
+    const { modifiers: popperPropsModifiers, ...otherPopperProps } = popperProps;
+    const [referenceElement, setReferenceElement] = a.useState(null);
+    const [popperElement, setPopperElement] = a.useState(
+      null
+    );
+    const onFirstUpdate = a.useCallback(() => {
+      onContainerCreation?.(popperElement);
+    }, [onContainerCreation, popperElement]);
+    const modifiers = a.useMemo(
+      () => [
+        {
+          name: "variableWidth",
+          enabled: !variableWidth,
+          phase: "beforeWrite",
+          requires: ["computeStyles"],
+          fn: ({ state }) => {
+            state.styles.popper.width = `${state.rects.reference.width}px`;
+          },
+          effect: ({ state }) => {
+            state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;
+          }
+        },
+        {
+          name: "maxSize",
+          enabled: true,
+          phase: "main",
+          requiresIfExists: ["offset", "preventOverflow", "flip"],
+          fn: ({ state, name, options }) => {
+            const overflow = core.detectOverflow(state, options);
+            const x = state.modifiersData.preventOverflow?.x || 0;
+            const y = state.modifiersData.preventOverflow?.y || 0;
+            const popperWidth = state.rects.popper.width;
+            const popperHeight = state.rects.popper.height;
+            const basePlacement = state.placement.split("-")[0];
+            const widthProp = basePlacement === "left" ? "left" : "right";
+            const heightProp = basePlacement === "top" ? "top" : "bottom";
+            state.modifiersData[name] = {
+              width: popperWidth - overflow[widthProp] - x,
+              height: popperHeight - overflow[heightProp] - y
+            };
+          }
+        },
+        {
+          name: "applyMaxSize",
+          enabled: true,
+          phase: "beforeWrite",
+          requires: ["maxSize"],
+          fn: ({ state }) => {
+            const { width, height } = state.modifiersData.maxSize;
+            state.styles.popper.maxWidth = `${width}px`;
+            state.styles.popper.maxHeight = `${height}px`;
+          }
+        },
+        ...popperPropsModifiers || []
+      ],
+      [popperPropsModifiers, variableWidth]
+    );
+    const popper = reactPopper.usePopper(referenceElement, popperElement, {
+      placement,
+      modifiers,
+      onFirstUpdate,
+      ...otherPopperProps
+    });
+    const value = a.useMemo(
+      () => ({
+        popperPlacement: popper?.attributes.popper?.["data-popper-placement"] ?? "bottom",
+        popper,
+        popperElement,
+        setPopperElement,
+        referenceElement,
+        setReferenceElement
+      }),
+      [popper, popperElement, referenceElement]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(context.BaseDropdownContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown, { ref, ...others }) });
+  }
+);
+exports.baseDropdownClasses = BaseDropdown_styles.staticClasses;
+exports.HvBaseDropdown = HvBaseDropdown;

package/dist/cjs/packages/core/src/BaseDropdown/context.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const a = require("react");
+const BaseDropdownContext = a.createContext({
+  referenceElement: null,
+  popperElement: null
+});
+BaseDropdownContext.displayName = "BaseDropdownContext";
+const useBaseDropdownContext = () => a.useContext(BaseDropdownContext);
+exports.BaseDropdownContext = BaseDropdownContext;
+exports.useBaseDropdownContext = useBaseDropdownContext;

package/dist/cjs/packages/core/src/BaseInput/BaseInput.cjs

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const MuiInputBase = require("@mui/material/InputBase");
+const utils$1 = require("@mui/material/utils");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const BaseInput_styles = require("./BaseInput.styles.cjs");
+const context = require("../FormElement/context.cjs");
+const utils = require("../FormElement/utils.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const MuiInputBase__default = /* @__PURE__ */ _interopDefault(MuiInputBase);
+const HvBaseInput = a.forwardRef(function HvBaseInput2(props, ref) {
+  const {
+    classes: classesProp,
+    className = "",
+    id,
+    name,
+    value,
+    defaultValue,
+    required,
+    readOnly,
+    disabled,
+    onChange,
+    type = "text",
+    placeholder,
+    multiline,
+    resizable,
+    invalid: invalidProp,
+    inputRef,
+    inputProps = {},
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvBaseInput", props);
+  const { classes, cx } = BaseInput_styles.useClasses(classesProp);
+  const formElementContext = a.useContext(context.HvFormElementContext);
+  const formElementProps = utils.buildFormElementPropsFromContext(
+    name,
+    disabled,
+    readOnly,
+    required,
+    formElementContext
+  );
+  const forkedRef = utils$1.useForkRef(ref, inputRef);
+  const invalid = invalidProp || formElementProps.status === "invalid";
+  const formElementDescriptorsContext = a.useContext(
+    context.HvFormElementDescriptorsContext
+  );
+  const ariaProps = utils.buildAriaPropsFromContext(
+    inputProps,
+    formElementDescriptorsContext,
+    invalid,
+    id
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MuiInputBase__default.default,
+    {
+      id,
+      name: formElementProps.name,
+      value,
+      defaultValue,
+      placeholder,
+      readOnly: !!formElementProps.readOnly,
+      disabled: formElementProps.disabled,
+      onChange: (event) => onChange?.(event, event.target.value),
+      className: cx(classes.root, classes.inputRoot, className, {
+        [classes.inputRootMultiline]: multiline,
+        [classes.multiline]: multiline,
+        [classes.inputRootInvalid]: invalid,
+        [classes.invalid]: invalid,
+        [classes.inputRootReadOnly]: formElementProps.readOnly,
+        [classes.readOnly]: formElementProps.readOnly,
+        [classes.inputRootDisabled]: formElementProps.disabled,
+        [classes.disabled]: formElementProps.disabled
+      }),
+      classes: {
+        focused: cx(classes.focused, classes.inputRootFocused),
+        input: cx(classes.input, {
+          [classes.inputResizable]: !formElementProps.disabled && resizable,
+          [classes.inputDisabled]: formElementProps.disabled,
+          [classes.inputReadOnly]: formElementProps.readOnly
+        })
+      },
+      inputProps: {
+        // Avoid the required attribute at the root node
+        required: formElementProps.required,
+        ...inputProps,
+        ...ariaProps
+      },
+      inputRef: forkedRef,
+      multiline,
+      ...multiline ? { rows: 10 } : { type },
+      ...others
+    }
+  );
+});
+exports.baseInputClasses = BaseInput_styles.staticClasses;
+exports.HvBaseInput = HvBaseInput;

package/dist/cjs/packages/core/src/BaseRadio/BaseRadio.cjs

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const MuiRadio = require("@mui/material/Radio");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const BaseRadio_styles = require("./BaseRadio.styles.cjs");
+const RadioIcon = require("./RadioIcon.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const MuiRadio__default = /* @__PURE__ */ _interopDefault(MuiRadio);
+const HvBaseRadio = a.forwardRef(
+  function HvBaseRadio2(props, ref) {
+    const {
+      classes: classesProp,
+      className,
+      value = "on",
+      required,
+      readOnly,
+      disabled,
+      checked,
+      defaultChecked,
+      onChange,
+      semantic,
+      inputProps,
+      color,
+      onFocusVisible,
+      onBlur,
+      ...others
+    } = uikitReactUtils.useDefaultProps("HvBaseRadio", props);
+    const { classes, cx } = BaseRadio_styles.useClasses(classesProp);
+    const [focusVisible, setFocusVisible] = a.useState(false);
+    const onFocusVisibleCallback = a.useCallback(
+      (evt) => {
+        setFocusVisible(true);
+        onFocusVisible?.(evt);
+      },
+      [onFocusVisible]
+    );
+    const onBlurCallback = a.useCallback(
+      (evt) => {
+        setFocusVisible(false);
+        onBlur?.(evt);
+      },
+      [onBlur]
+    );
+    const onLocalChange = a.useCallback(
+      (evt) => {
+        if (readOnly) {
+          return;
+        }
+        onChange?.(evt, evt.target.checked, value);
+      },
+      [onChange, readOnly, value]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MuiRadio__default.default,
+      {
+        ref,
+        className: cx(
+          classes.root,
+          {
+            [classes.focusVisible]: focusVisible,
+            [classes.checked]: checked,
+            [classes.semantic]: semantic,
+            [classes.disabled]: disabled
+          },
+          className
+        ),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon.HvRadioIcon, { disabled }),
+        checkedIcon: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon.HvRadioIcon, { checked: true, disabled, color }),
+        color: "default",
+        disabled,
+        required,
+        readOnly,
+        onChange: onLocalChange,
+        value,
+        checked,
+        defaultChecked,
+        inputProps,
+        onFocusVisible: onFocusVisibleCallback,
+        onBlur: onBlurCallback,
+        ...others
+      }
+    );
+  }
+);
+exports.baseRadioClasses = BaseRadio_styles.staticClasses;
+exports.HvBaseRadio = HvBaseRadio;

package/dist/cjs/packages/core/src/BaseSwitch/BaseSwitch.cjs

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const MuiSwitch = require("@mui/material/Switch");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const BaseSwitch_styles = require("./BaseSwitch.styles.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const MuiSwitch__default = /* @__PURE__ */ _interopDefault(MuiSwitch);
+const HvBaseSwitch = a.forwardRef(
+  function HvBaseSwitch2(props, ref) {
+    const {
+      classes: classesProp,
+      className,
+      id,
+      name,
+      value = "on",
+      required = false,
+      readOnly = false,
+      disabled = false,
+      checked,
+      defaultChecked,
+      onChange,
+      inputProps,
+      onFocusVisible,
+      onBlur,
+      size = "sm",
+      color,
+      ...others
+    } = uikitReactUtils.useDefaultProps("HvBaseSwitch", props);
+    const { classes, cx, css } = BaseSwitch_styles.useClasses(classesProp);
+    const [focusVisible, setFocusVisible] = a.useState(false);
+    const onFocusVisibleCallback = a.useCallback(
+      (evt) => {
+        setFocusVisible(true);
+        onFocusVisible?.(evt);
+      },
+      [onFocusVisible]
+    );
+    const onBlurCallback = a.useCallback(
+      (evt) => {
+        setFocusVisible(false);
+        onBlur?.(evt);
+      },
+      [onBlur]
+    );
+    const onLocalChange = a.useCallback(
+      (evt) => {
+        if (readOnly) {
+          return;
+        }
+        onChange?.(evt, evt.target.checked, value);
+      },
+      [onChange, readOnly, value]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      MuiSwitch__default.default,
+      {
+        ref,
+        id,
+        name,
+        className: cx(
+          classes.root,
+          {
+            [classes.focusVisible]: focusVisible,
+            [classes.readOnly]: readOnly,
+            [classes.disabled]: disabled
+          },
+          className
+        ),
+        disabled,
+        required,
+        readOnly,
+        onChange: onLocalChange,
+        value,
+        checked,
+        defaultChecked,
+        classes: {
+          root: classes.switch,
+          switchBase: cx(classes.switchBase),
+          checked: classes.checked,
+          track: cx(
+            classes.track,
+            color ? css({
+              backgroundColor: `${uikitStyles.getColor(color, "transparent")}!important`,
+              border: "none"
+            }) : void 0
+          ),
+          thumb: cx(
+            classes.thumb,
+            color ? css({
+              border: "none"
+            }) : void 0
+          ),
+          disabled: classes.disabled
+        },
+        inputProps,
+        onFocusVisible: onFocusVisibleCallback,
+        onBlur: onBlurCallback,
+        "data-size": size,
+        ...others
+      }
+    );
+  }
+);
+exports.baseSwitchClasses = BaseSwitch_styles.staticClasses;
+exports.HvBaseSwitch = HvBaseSwitch;

package/dist/cjs/packages/core/src/BreadCrumb/BreadCrumb.cjs

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const a = require("react");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const BreadCrumb_styles = require("./BreadCrumb.styles.cjs");
+const utils = require("./utils.cjs");
+const PathElement = require("./PathElement/PathElement.cjs");
+const Page = require("./Page/Page.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const HvBreadCrumb = a.forwardRef(function HvBreadCrumb2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    id,
+    listRoute = [],
+    maxVisible,
+    url,
+    onClick,
+    component,
+    dropDownMenuProps,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvBreadCrumb", props);
+  const { classes, cx } = BreadCrumb_styles.useClasses(classesProp);
+  const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;
+  let listPath = listRoute.slice();
+  if (url != null) {
+    const baseUrl = url.match(/^.*\/\/[^/]+/) ?? "";
+    const pathNames = url.replace(/^.*\/\/[^/]+/, "").split("/").filter(Boolean);
+    listPath = pathNames.map((elem, index) => ({
+      label: decodeURI(elem),
+      path: `${baseUrl}/${pathNames.slice(0, index + 1).join("/")}`
+    }));
+  }
+  const breadcrumbPath = maxVisibleElem && listPath.length > maxVisibleElem ? utils.pathWithSubMenu(
+    id,
+    listPath,
+    maxVisibleElem,
+    onClick,
+    dropDownMenuProps
+  ) : listPath;
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, id, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: classes.orderedList, children: listPath.map((elem, index) => {
+    const key = `key_${index}`;
+    const isLast = index === breadcrumbPath.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      PathElement.HvPathElement,
+      {
+        classes: {
+          centerContainer: classes.centerContainer,
+          separatorContainer: classes.separatorContainer
+        },
+        last: isLast,
+        children: a.isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.currentPage, variant: "body", children: utils.removeExtension(elem.label) }) || /* @__PURE__ */ jsxRuntime.jsx(
+          Page.HvBreadCrumbPage,
+          {
+            elem,
+            classes: {
+              a: classes.a,
+              link: classes.link
+            },
+            component,
+            onClick
+          }
+        )
+      },
+      key
+    );
+  }) }) });
+});
+exports.breadCrumbClasses = BreadCrumb_styles.staticClasses;
+exports.HvBreadCrumb = HvBreadCrumb;