import K from "./index-objectWithoutPropertiesLoose.js";
import g from "./index-extends.js";
import * as W from "react";
import e from "./index-_virtual16.js";
import { clsx as _ } from "./index-clsx.js";
import R from "./index-styled.js";
import D from "./index-useTheme.js";
import j from "./index-GridContext.js";
import x, { getGridUtilityClass as L } from "./index-gridClasses.js";
import { jsx as z } from "react/jsx-runtime";
import { useDefaultProps as F } from "./index-DefaultPropsProvider.js";
import q from "./index-extendSxProp.js";
import U from "./index-composeClasses.js";
import { resolveBreakpointValues as v, handleBreakpoints as S } from "./index-breakpoints2.js";
import Z from "./index-requirePropFactory2.js";
const A = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
function b(o) {
  const r = parseFloat(o);
  return `${r}${String(o).replace(String(r), "") || "px"}`;
}
function H({
  theme: o,
  ownerState: r
}) {
  let i;
  return o.breakpoints.keys.reduce((t, n) => {
    let s = {};
    if (r[n] && (i = r[n]), !i)
      return t;
    if (i === !0)
      s = {
        flexBasis: 0,
        flexGrow: 1,
        maxWidth: "100%"
      };
    else if (i === "auto")
      s = {
        flexBasis: "auto",
        flexGrow: 0,
        flexShrink: 0,
        maxWidth: "none",
        width: "auto"
      };
    else {
      const c = v({
        values: r.columns,
        breakpoints: o.breakpoints.values
      }), u = typeof c == "object" ? c[n] : c;
      if (u == null)
        return t;
      const l = `${Math.round(i / u * 1e8) / 1e6}%`;
      let p = {};
      if (r.container && r.item && r.columnSpacing !== 0) {
        const a = o.spacing(r.columnSpacing);
        if (a !== "0px") {
          const f = `calc(${l} + ${b(a)})`;
          p = {
            flexBasis: f,
            maxWidth: f
          };
        }
      }
      s = g({
        flexBasis: l,
        flexGrow: 0,
        maxWidth: l
      }, p);
    }
    return o.breakpoints.values[n] === 0 ? Object.assign(t, s) : t[o.breakpoints.up(n)] = s, t;
  }, {});
}
function I({
  theme: o,
  ownerState: r
}) {
  const i = v({
    values: r.direction,
    breakpoints: o.breakpoints.values
  });
  return S({
    theme: o
  }, i, (t) => {
    const n = {
      flexDirection: t
    };
    return t.indexOf("column") === 0 && (n[`& > .${x.item}`] = {
      maxWidth: "none"
    }), n;
  });
}
function B({
  breakpoints: o,
  values: r
}) {
  let i = "";
  Object.keys(r).forEach((n) => {
    i === "" && r[n] !== 0 && (i = n);
  });
  const t = Object.keys(o).sort((n, s) => o[n] - o[s]);
  return t.slice(0, t.indexOf(i));
}
function J({
  theme: o,
  ownerState: r
}) {
  const {
    container: i,
    rowSpacing: t
  } = r;
  let n = {};
  if (i && t !== 0) {
    const s = v({
      values: t,
      breakpoints: o.breakpoints.values
    });
    let c;
    typeof s == "object" && (c = B({
      breakpoints: o.breakpoints.values,
      values: s
    })), n = S({
      theme: o
    }, s, (u, l) => {
      var p;
      const a = o.spacing(u);
      return a !== "0px" ? {
        marginTop: `-${b(a)}`,
        [`& > .${x.item}`]: {
          paddingTop: b(a)
        }
      } : (p = c) != null && p.includes(l) ? {} : {
        marginTop: 0,
        [`& > .${x.item}`]: {
          paddingTop: 0
        }
      };
    });
  }
  return n;
}
function Q({
  theme: o,
  ownerState: r
}) {
  const {
    container: i,
    columnSpacing: t
  } = r;
  let n = {};
  if (i && t !== 0) {
    const s = v({
      values: t,
      breakpoints: o.breakpoints.values
    });
    let c;
    typeof s == "object" && (c = B({
      breakpoints: o.breakpoints.values,
      values: s
    })), n = S({
      theme: o
    }, s, (u, l) => {
      var p;
      const a = o.spacing(u);
      return a !== "0px" ? {
        width: `calc(100% + ${b(a)})`,
        marginLeft: `-${b(a)}`,
        [`& > .${x.item}`]: {
          paddingLeft: b(a)
        }
      } : (p = c) != null && p.includes(l) ? {} : {
        width: "100%",
        marginLeft: 0,
        [`& > .${x.item}`]: {
          paddingLeft: 0
        }
      };
    });
  }
  return n;
}
function X(o, r, i = {}) {
  if (!o || o <= 0)
    return [];
  if (typeof o == "string" && !Number.isNaN(Number(o)) || typeof o == "number")
    return [i[`spacing-xs-${String(o)}`]];
  const t = [];
  return r.forEach((n) => {
    const s = o[n];
    Number(s) > 0 && t.push(i[`spacing-${n}-${String(s)}`]);
  }), t;
}
const Y = R("div", {
  name: "MuiGrid",
  slot: "Root",
  overridesResolver: (o, r) => {
    const {
      ownerState: i
    } = o, {
      container: t,
      direction: n,
      item: s,
      spacing: c,
      wrap: u,
      zeroMinWidth: l,
      breakpoints: p
    } = i;
    let a = [];
    t && (a = X(c, p, r));
    const f = [];
    return p.forEach((m) => {
      const d = i[m];
      d && f.push(r[`grid-${m}-${String(d)}`]);
    }), [r.root, t && r.container, s && r.item, l && r.zeroMinWidth, ...a, n !== "row" && r[`direction-xs-${String(n)}`], u !== "wrap" && r[`wrap-xs-${String(u)}`], ...f];
  }
})(({
  ownerState: o
}) => g({
  boxSizing: "border-box"
}, o.container && {
  display: "flex",
  flexWrap: "wrap",
  width: "100%"
}, o.item && {
  margin: 0
  // For instance, it's useful when used with a `figure` element.
}, o.zeroMinWidth && {
  minWidth: 0
}, o.wrap !== "wrap" && {
  flexWrap: o.wrap
}), I, J, Q, H);
function ee(o, r) {
  if (!o || o <= 0)
    return [];
  if (typeof o == "string" && !Number.isNaN(Number(o)) || typeof o == "number")
    return [`spacing-xs-${String(o)}`];
  const i = [];
  return r.forEach((t) => {
    const n = o[t];
    if (Number(n) > 0) {
      const s = `spacing-${t}-${String(n)}`;
      i.push(s);
    }
  }), i;
}
const oe = (o) => {
  const {
    classes: r,
    container: i,
    direction: t,
    item: n,
    spacing: s,
    wrap: c,
    zeroMinWidth: u,
    breakpoints: l
  } = o;
  let p = [];
  i && (p = ee(s, l));
  const a = [];
  l.forEach((m) => {
    const d = o[m];
    d && a.push(`grid-${m}-${String(d)}`);
  });
  const f = {
    root: ["root", i && "container", n && "item", u && "zeroMinWidth", ...p, t !== "row" && `direction-xs-${String(t)}`, c !== "wrap" && `wrap-xs-${String(c)}`, ...a]
  };
  return U(f, L, r);
}, O = /* @__PURE__ */ W.forwardRef(function(r, i) {
  const t = F({
    props: r,
    name: "MuiGrid"
  }), {
    breakpoints: n
  } = D(), s = q(t), {
    className: c,
    columns: u,
    columnSpacing: l,
    component: p = "div",
    container: a = !1,
    direction: f = "row",
    item: m = !1,
    rowSpacing: d,
    spacing: w = 0,
    wrap: G = "wrap",
    zeroMinWidth: V = !1
  } = s, h = K(s, A), M = d || w, C = l || w, P = W.useContext(j), $ = a ? u || 12 : P, T = {}, k = g({}, h);
  n.keys.forEach((y) => {
    h[y] != null && (T[y] = h[y], delete k[y]);
  });
  const N = g({}, s, {
    columns: $,
    container: a,
    direction: f,
    item: m,
    rowSpacing: M,
    columnSpacing: C,
    wrap: G,
    zeroMinWidth: V,
    spacing: w
  }, T, {
    breakpoints: n.keys
  }), E = oe(N);
  return /* @__PURE__ */ z(j.Provider, {
    value: $,
    children: /* @__PURE__ */ z(Y, g({
      ownerState: N,
      className: _(E.root, c),
      as: p,
      ref: i
    }, k))
  });
});
process.env.NODE_ENV !== "production" && (O.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The content of the component.
   */
  children: e.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * @ignore
   */
  className: e.string,
  /**
   * The number of columns.
   * @default 12
   */
  columns: e.oneOfType([e.arrayOf(e.number), e.number, e.object]),
  /**
   * Defines the horizontal space between the type `item` components.
   * It overrides the value of the `spacing` prop.
   */
  columnSpacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: e.elementType,
  /**
   * If `true`, the component will have the flex *container* behavior.
   * You should be wrapping *items* with a *container*.
   * @default false
   */
  container: e.bool,
  /**
   * Defines the `flex-direction` style property.
   * It is applied for all screen sizes.
   * @default 'row'
   */
  direction: e.oneOfType([e.oneOf(["column-reverse", "column", "row-reverse", "row"]), e.arrayOf(e.oneOf(["column-reverse", "column", "row-reverse", "row"])), e.object]),
  /**
   * If `true`, the component will have the flex *item* behavior.
   * You should be wrapping *items* with a *container*.
   * @default false
   */
  item: e.bool,
  /**
   * If a number, it sets the number of columns the grid item uses.
   * It can't be greater than the total number of columns of the container (12 by default).
   * If 'auto', the grid item's width matches its content.
   * If false, the prop is ignored.
   * If true, the grid item's width grows to use the space available in the grid container.
   * The value is applied for the `lg` breakpoint and wider screens if not overridden.
   * @default false
   */
  lg: e.oneOfType([e.oneOf(["auto"]), e.number, e.bool]),
  /**
   * If a number, it sets the number of columns the grid item uses.
   * It can't be greater than the total number of columns of the container (12 by default).
   * If 'auto', the grid item's width matches its content.
   * If false, the prop is ignored.
   * If true, the grid item's width grows to use the space available in the grid container.
   * The value is applied for the `md` breakpoint and wider screens if not overridden.
   * @default false
   */
  md: e.oneOfType([e.oneOf(["auto"]), e.number, e.bool]),
  /**
   * Defines the vertical space between the type `item` components.
   * It overrides the value of the `spacing` prop.
   */
  rowSpacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
  /**
   * If a number, it sets the number of columns the grid item uses.
   * It can't be greater than the total number of columns of the container (12 by default).
   * If 'auto', the grid item's width matches its content.
   * If false, the prop is ignored.
   * If true, the grid item's width grows to use the space available in the grid container.
   * The value is applied for the `sm` breakpoint and wider screens if not overridden.
   * @default false
   */
  sm: e.oneOfType([e.oneOf(["auto"]), e.number, e.bool]),
  /**
   * Defines the space between the type `item` components.
   * It can only be used on a type `container` component.
   * @default 0
   */
  spacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
  /**
   * The system prop that allows defining system overrides as well as additional CSS styles.
   */
  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
  /**
   * Defines the `flex-wrap` style property.
   * It's applied for all screen sizes.
   * @default 'wrap'
   */
  wrap: e.oneOf(["nowrap", "wrap-reverse", "wrap"]),
  /**
   * If a number, it sets the number of columns the grid item uses.
   * It can't be greater than the total number of columns of the container (12 by default).
   * If 'auto', the grid item's width matches its content.
   * If false, the prop is ignored.
   * If true, the grid item's width grows to use the space available in the grid container.
   * The value is applied for the `xl` breakpoint and wider screens if not overridden.
   * @default false
   */
  xl: e.oneOfType([e.oneOf(["auto"]), e.number, e.bool]),
  /**
   * If a number, it sets the number of columns the grid item uses.
   * It can't be greater than the total number of columns of the container (12 by default).
   * If 'auto', the grid item's width matches its content.
   * If false, the prop is ignored.
   * If true, the grid item's width grows to use the space available in the grid container.
   * The value is applied for all the screen sizes with the lowest priority.
   * @default false
   */
  xs: e.oneOfType([e.oneOf(["auto"]), e.number, e.bool]),
  /**
   * If `true`, it sets `min-width: 0` on the item.
   * Refer to the limitations section of the documentation to better understand the use case.
   * @default false
   */
  zeroMinWidth: e.bool
});
if (process.env.NODE_ENV !== "production") {
  const o = Z("Grid", O);
  O.propTypes = g({}, O.propTypes, {
    direction: o("container"),
    lg: o("item"),
    md: o("item"),
    sm: o("item"),
    spacing: o("container"),
    wrap: o("container"),
    xs: o("item"),
    zeroMinWidth: o("item")
  });
}
export {
  O as default,
  Q as generateColumnGap,
  I as generateDirection,
  H as generateGrid,
  J as generateRowGap,
  ee as resolveSpacingClasses,
  X as resolveSpacingStyles
};
