"use client";
import { jsx } from "../packages/jsx/src/jsx-runtime.js";
import { forwardRef } from "react";
import { mapResponsiveStyleLengthValue } from "../theme/utils.js";
import { classNames } from "../utils/classNames.js";
const CONTAINER_MAX_WIDTH_DEFAULT = 1288;
const CONTAINER_PADDING_MOBILE = 16;
const CONTAINER_PADDING_DESKTOP = 32;
const Container = forwardRef(
  ({ as: Element = "div", maxWidth: maxWidthProp, padding: paddingProp, className, children, ...props }, ref) => {
    const maxWidth = mapResponsiveStyleLengthValue(
      maxWidthProp === null ? "100vw" : maxWidthProp,
      `${CONTAINER_MAX_WIDTH_DEFAULT}px`
    );
    const padding = mapResponsiveStyleLengthValue(paddingProp === null ? 0 : paddingProp, [
      `${CONTAINER_PADDING_MOBILE}px`,
      null,
      `${CONTAINER_PADDING_DESKTOP}px`
    ]);
    return /* @__PURE__ */ jsx(
      Element,
      {
        ref,
        className: classNames(["gds-container", className]),
        sx: {
          "--gds-container-max-width": maxWidth,
          "--gds-container-padding": padding,
          /**
           * Set `--gds-container-max-width-parent` and `--gds-container-padding-parent` on child elements so that nested containers can use them
           * to calculate their negative margins. As far as I know, this technique cannot be replicated in "static CSS" (including with Tailwind)
           * until something like `inherit()` is supported: https://github.com/w3c/csswg-drafts/issues/2864
           */
          "& > *": {
            "--gds-container-max-width-parent": maxWidth,
            "--gds-container-padding-parent": padding
          },
          mx: "auto",
          width: "calc(var(--gds-container-max-width) + 2 * var(--gds-container-padding))",
          maxWidth: "100vw",
          px: "var(--gds-container-padding)",
          ".gds-container &": {
            mx: "calc(-1 * ((min(var(--gds-container-max-width) + 2 * var(--gds-container-padding), 100vw) - min(min(var(--gds-container-max-width-parent), 100%) + 2 * var(--gds-container-padding-parent), 100vw)) + 2 * var(--gds-container-padding-parent)) / 2)"
          }
        },
        ...props,
        children
      }
    );
  }
);
Container.displayName = "Container";
export {
  CONTAINER_MAX_WIDTH_DEFAULT,
  CONTAINER_PADDING_DESKTOP,
  CONTAINER_PADDING_MOBILE,
  Container
};
