import { jsx as _jsx } from "react/jsx-runtime";
import { ZINDEX_LAYERS } from "./constants";
/**
 * Hook to get z-index value for a layer name.
 *
 * @example
 * ```tsx
 * const modalZIndex = useZName('modal'); // 2000
 * const ageGateZIndex = useZName('high-priority'); // 9000
 * ```
 */
export function useZName(layer) {
    return ZINDEX_LAYERS[layer];
}
/**
 * Component that wraps children in a div with the specified z-index layer.
 *
 * @example
 * ```tsx
 * <ZName name="modal" style={{ background: 'white' }}>
 *   <ModalContent />
 * </ZName>
 * ```
 */
export const ZName = ({ name, children, style, zIndex: customZIndex, }) => {
    const zIndex = customZIndex ?? ZINDEX_LAYERS[name];
    return (_jsx("div", { style: {
            position: "relative",
            zIndex,
            ...style,
        }, children: children }));
};
// Re-export constants for convenience
export { ZINDEX_LAYERS };
export default ZName;
//# sourceMappingURL=react.js.map