taxonium-component/dist/Grid-C1WwTq0M.js

React component for exploring large phylogenetic trees in the browser

import { p as w, c as J } from "./index-CoM8QAjP.js";
import e from "prop-types";
import { bK as M, bL as Q, bm as X, H as Z, A as ee, b8 as ne, G as re, E as oe, aB as te } from "./JBrowsePanel-BNE3gNW1.js";
import * as h from "react";
import { jsx as se } from "react/jsx-runtime";
import { g as ie, s as ce } from "./getThemeProps-0-NQjaiI.js";
function ae({
  props: n,
  name: r,
  defaultTheme: o,
  themeId: t
}) {
  let s = M(o);
  return t && (s = s[t] || s), ie({
    theme: s,
    name: r,
    props: n
  });
}
const fe = (n, r) => n.filter((o) => r.includes(o)), T = (n, r, o) => {
  const t = n.keys[0];
  Array.isArray(r) ? r.forEach((s, i) => {
    o((c, y) => {
      i <= n.keys.length - 1 && (i === 0 ? Object.assign(c, y) : c[n.up(n.keys[i])] = y);
    }, s);
  }) : r && typeof r == "object" ? (Object.keys(r).length > n.keys.length ? n.keys : fe(n.keys, Object.keys(r))).forEach((i) => {
    if (n.keys.includes(i)) {
      const c = r[i];
      c !== void 0 && o((y, d) => {
        t === i ? Object.assign(y, d) : y[n.up(i)] = d;
      }, c);
    }
  }) : (typeof r == "number" || typeof r == "string") && o((s, i) => {
    Object.assign(s, i);
  }, r);
};
function S(n) {
  return `--Grid-${n}Spacing`;
}
function $(n) {
  return `--Grid-parent-${n}Spacing`;
}
const P = "--Grid-columns", O = "--Grid-parent-columns", ue = ({
  theme: n,
  ownerState: r
}) => {
  const o = {};
  return T(n.breakpoints, r.size, (t, s) => {
    let i = {};
    s === "grow" && (i = {
      flexBasis: 0,
      flexGrow: 1,
      maxWidth: "100%"
    }), s === "auto" && (i = {
      flexBasis: "auto",
      flexGrow: 0,
      flexShrink: 0,
      maxWidth: "none",
      width: "auto"
    }), typeof s == "number" && (i = {
      flexGrow: 0,
      flexBasis: "auto",
      width: `calc(100% * ${s} / var(${O}) - (var(${O}) - ${s}) * (var(${$("column")}) / var(${O})))`
    }), t(o, i);
  }), o;
}, pe = ({
  theme: n,
  ownerState: r
}) => {
  const o = {};
  return T(n.breakpoints, r.offset, (t, s) => {
    let i = {};
    s === "auto" && (i = {
      marginLeft: "auto"
    }), typeof s == "number" && (i = {
      marginLeft: s === 0 ? "0px" : `calc(100% * ${s} / var(${O}) + var(${$("column")}) * ${s} / var(${O}))`
    }), t(o, i);
  }), o;
}, le = ({
  theme: n,
  ownerState: r
}) => {
  if (!r.container)
    return {};
  const o = {
    [P]: 12
  };
  return T(n.breakpoints, r.columns, (t, s) => {
    const i = s ?? 12;
    t(o, {
      [P]: i,
      "> *": {
        [O]: i
      }
    });
  }), o;
}, me = ({
  theme: n,
  ownerState: r
}) => {
  if (!r.container)
    return {};
  const o = {};
  return T(n.breakpoints, r.rowSpacing, (t, s) => {
    var c;
    const i = typeof s == "string" ? s : (c = n.spacing) == null ? void 0 : c.call(n, s);
    t(o, {
      [S("row")]: i,
      "> *": {
        [$("row")]: i
      }
    });
  }), o;
}, ye = ({
  theme: n,
  ownerState: r
}) => {
  if (!r.container)
    return {};
  const o = {};
  return T(n.breakpoints, r.columnSpacing, (t, s) => {
    var c;
    const i = typeof s == "string" ? s : (c = n.spacing) == null ? void 0 : c.call(n, s);
    t(o, {
      [S("column")]: i,
      "> *": {
        [$("column")]: i
      }
    });
  }), o;
}, de = ({
  theme: n,
  ownerState: r
}) => {
  if (!r.container)
    return {};
  const o = {};
  return T(n.breakpoints, r.direction, (t, s) => {
    t(o, {
      flexDirection: s
    });
  }), o;
}, ge = ({
  ownerState: n
}) => ({
  minWidth: 0,
  boxSizing: "border-box",
  ...n.container && {
    display: "flex",
    flexWrap: "wrap",
    ...n.wrap && n.wrap !== "wrap" && {
      flexWrap: n.wrap
    },
    gap: `var(${S("row")}) var(${S("column")})`
  }
}), be = (n) => {
  const r = [];
  return Object.entries(n).forEach(([o, t]) => {
    t !== !1 && t !== void 0 && r.push(`grid-${o}-${String(t)}`);
  }), r;
}, Oe = (n, r = "xs") => {
  function o(t) {
    return t === void 0 ? !1 : typeof t == "string" && !Number.isNaN(Number(t)) || typeof t == "number" && t > 0;
  }
  if (o(n))
    return [`spacing-${r}-${String(n)}`];
  if (typeof n == "object" && !Array.isArray(n)) {
    const t = [];
    return Object.entries(n).forEach(([s, i]) => {
      o(i) && t.push(`spacing-${s}-${String(i)}`);
    }), t;
  }
  return [];
}, Te = (n) => n === void 0 ? [] : typeof n == "object" ? Object.entries(n).map(([r, o]) => `direction-${r}-${o}`) : [`direction-xs-${String(n)}`], we = (n) => ["item", "zeroMinWidth"].includes(n) ? `The \`${n}\` prop has been removed and is no longer necessary. You can safely remove it.` : `The \`${n}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`, z = [];
function he(n, r) {
  const o = [];
  n.item !== void 0 && (delete n.item, o.push("item")), n.zeroMinWidth !== void 0 && (delete n.zeroMinWidth, o.push("zeroMinWidth")), r.keys.forEach((t) => {
    n[t] !== void 0 && (o.push(t), delete n[t]);
  }), w.env.NODE_ENV !== "production" && o.forEach((t) => {
    z.includes(t) || (z.push(t), console.warn(`MUI Grid: ${we(t)}
`));
  });
}
const Se = ne(), $e = ce("div", {
  name: "MuiGrid",
  slot: "Root"
});
function Ge(n) {
  return ae({
    props: n,
    name: "MuiGrid",
    defaultTheme: Se
  });
}
function je(n = {}) {
  const {
    // This will allow adding custom styled fn (for example for custom sx style function)
    createStyledComponent: r = $e,
    useThemeProps: o = Ge,
    useTheme: t = M,
    componentName: s = "MuiGrid"
  } = n, i = (p, a) => {
    const {
      container: m,
      direction: f,
      spacing: l,
      wrap: u,
      size: G
    } = p, j = {
      root: ["root", m && "container", u !== "wrap" && `wrap-xs-${String(u)}`, ...Te(f), ...be(G), ...m ? Oe(l, a.breakpoints.keys[0]) : []]
    };
    return Z(j, (x) => ee(s, x), {});
  };
  function c(p, a, m = () => !0) {
    const f = {};
    return p === null || (Array.isArray(p) ? p.forEach((l, u) => {
      l !== null && m(l) && a.keys[u] && (f[a.keys[u]] = l);
    }) : typeof p == "object" ? Object.keys(p).forEach((l) => {
      const u = p[l];
      u != null && m(u) && (f[l] = u);
    }) : f[a.keys[0]] = p), f;
  }
  const y = r(le, ye, me, ue, de, ge, pe), d = /* @__PURE__ */ h.forwardRef(function(a, m) {
    const f = t(), l = o(a), u = Q(l);
    he(u, f.breakpoints);
    const {
      className: G,
      children: j,
      columns: x = 12,
      container: N = !1,
      component: v = "div",
      direction: D = "row",
      wrap: R = "wrap",
      size: _ = {},
      offset: A = {},
      spacing: E = 0,
      rowSpacing: B = E,
      columnSpacing: L = E,
      unstable_level: b = 0,
      ...V
    } = u, q = c(_, f.breakpoints, (g) => g !== !1), K = c(A, f.breakpoints), U = a.columns ?? (b ? void 0 : x), F = a.spacing ?? (b ? void 0 : E), H = a.rowSpacing ?? a.spacing ?? (b ? void 0 : B), Y = a.columnSpacing ?? a.spacing ?? (b ? void 0 : L), k = {
      ...u,
      level: b,
      columns: U,
      container: N,
      direction: D,
      wrap: R,
      spacing: F,
      rowSpacing: H,
      columnSpacing: Y,
      size: q,
      offset: K
    }, I = i(k, f);
    return /* @__PURE__ */ se(y, {
      ref: m,
      as: v,
      ownerState: k,
      className: J(I.root, G),
      ...V,
      children: h.Children.map(j, (g) => {
        var C;
        return /* @__PURE__ */ h.isValidElement(g) && X(g, ["Grid"]) && N && g.props.container ? /* @__PURE__ */ h.cloneElement(g, {
          unstable_level: ((C = g.props) == null ? void 0 : C.unstable_level) ?? b + 1
        }) : g;
      })
    });
  });
  return w.env.NODE_ENV !== "production" && (d.propTypes = {
    children: e.node,
    className: e.string,
    columns: e.oneOfType([e.arrayOf(e.number), e.number, e.object]),
    columnSpacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
    component: e.elementType,
    container: e.bool,
    direction: e.oneOfType([e.oneOf(["column-reverse", "column", "row-reverse", "row"]), e.arrayOf(e.oneOf(["column-reverse", "column", "row-reverse", "row"])), e.object]),
    offset: e.oneOfType([e.string, e.number, e.arrayOf(e.oneOfType([e.string, e.number])), e.object]),
    rowSpacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
    size: e.oneOfType([e.string, e.bool, e.number, e.arrayOf(e.oneOfType([e.string, e.bool, e.number])), e.object]),
    spacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
    sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
    wrap: e.oneOf(["nowrap", "wrap-reverse", "wrap"])
  }), d.muiName = "Grid", d;
}
function xe(n, r) {
  if (w.env.NODE_ENV === "production")
    return () => () => null;
  const o = r ? {
    ...r.propTypes
  } : null;
  return (s) => (i, c, y, d, p, ...a) => {
    const m = p || c, f = o == null ? void 0 : o[m];
    if (f) {
      const l = f(i, c, y, d, p, ...a);
      if (l)
        return l;
    }
    return typeof i[c] < "u" && !i[s] ? new Error(`The prop \`${m}\` of \`${n}\` can only be used together with the \`${s}\` prop.`) : null;
  };
}
const W = je({
  createStyledComponent: re("div", {
    name: "MuiGrid",
    slot: "Root",
    overridesResolver: (n, r) => {
      const {
        ownerState: o
      } = n;
      return [r.root, o.container && r.container];
    }
  }),
  componentName: "MuiGrid",
  useThemeProps: (n) => oe({
    props: n,
    name: "MuiGrid"
  }),
  useTheme: te
});
w.env.NODE_ENV !== "production" && (W.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * The content of the component.
   */
  children: e.node,
  /**
   * 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]),
  /**
   * 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]),
  /**
   * Defines the offset value for the type `item` components.
   */
  offset: e.oneOfType([e.string, e.number, e.arrayOf(e.oneOfType([e.string, e.number])), e.object]),
  /**
   * 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]),
  /**
   * Defines the size of the the type `item` components.
   */
  size: e.oneOfType([e.string, e.bool, e.number, e.arrayOf(e.oneOfType([e.string, e.bool, e.number])), e.object]),
  /**
   * 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]),
  /**
   * @ignore
   */
  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
  /**
   * @internal
   * The level of the grid starts from `0` and increases when the grid nests
   * inside another grid. Nesting is defined as a container Grid being a direct
   * child of a container Grid.
   *
   * ```js
   * <Grid container> // level 0
   *   <Grid container> // level 1
   *     <Grid container> // level 2
   * ```
   *
   * Only consecutive grid is considered nesting. A grid container will start at
   * `0` if there are non-Grid container element above it.
   *
   * ```js
   * <Grid container> // level 0
   *   <div>
   *     <Grid container> // level 0
   * ```
   *
   * ```js
   * <Grid container> // level 0
   *   <Grid>
   *     <Grid container> // level 0
   * ```
   */
  unstable_level: e.number,
  /**
   * Defines the `flex-wrap` style property.
   * It's applied for all screen sizes.
   * @default 'wrap'
   */
  wrap: e.oneOf(["nowrap", "wrap-reverse", "wrap"])
});
if (w.env.NODE_ENV !== "production") {
  const n = W, r = xe("Grid", n);
  n.propTypes = {
    // eslint-disable-next-line react/forbid-foreign-prop-types
    ...n.propTypes,
    direction: r("container"),
    spacing: r("container"),
    wrap: r("container")
  };
}
export {
  W as G,
  ae as u
};
//# sourceMappingURL=Grid-C1WwTq0M.js.map