import "../../Elevation.css";
import { jsx } from "react/jsx-runtime";
import { createContext, useContext, useMemo } from "react";
import { useTheme } from "../Theme/UI.js";
import "../Theme/themeUtils.js";
import "../Theme/themes.js";
const elevationBase = "Elevation_elevationBase_0cfd1";
const hover = "Elevation_hover_0cfd1";
const border = "Elevation_border_0cfd1";
const css = {
  "elevation-0": "Elevation_elevation-0_0cfd1",
  "elevation-1": "Elevation_elevation-1_0cfd1",
  "elevation-2": "Elevation_elevation-2_0cfd1",
  "elevation-3": "Elevation_elevation-3_0cfd1",
  "elevation-4": "Elevation_elevation-4_0cfd1",
  elevationBase,
  hover,
  border
};
const ElevationWrapper = ({
  border: border2 = false,
  children,
  className,
  elevationOverride,
  hover: hover2 = false,
  ...props
}) => {
  const {
    themeSettings: { className: themeClass }
  } = useTheme();
  const { elevationClass, nextElevation } = useElevation({
    elevationOverride
  });
  const classes = [themeClass, className, css.elevationBase, elevationClass];
  if (hover2)
    classes.push(css.hover);
  if (border2)
    classes.push(css.border);
  return /* @__PURE__ */ jsx("div", { className: classes.join(" "), ...props, children: /* @__PURE__ */ jsx(ElevationContext.Provider, { value: nextElevation, children }) });
};
const ElevationContext = createContext(1);
const useElevation = ({ elevationOverride } = {}) => {
  let currentElevation = useContext(ElevationContext);
  if (elevationOverride !== void 0)
    currentElevation = elevationOverride;
  return useMemo(
    () => ({
      currentElevation,
      elevationClass: css[`elevation-${currentElevation}`],
      nextElevation: Math.min(currentElevation + 1, 4)
    }),
    [currentElevation]
  );
};
export {
  ElevationContext,
  ElevationWrapper,
  useElevation
};
