taxonium-component/dist/Container-CcXKrUXg.js

React component for exploring large phylogenetic trees in the browser

import { d as x, c as W } from "./index-dFotuATn.js";
import e from "prop-types";
import { aC as m, I as v, aD as y, A as O, H as k, G } from "./JBrowsePanel-uJIA-L6s.js";
import * as R from "react";
import { jsx as j } from "react/jsx-runtime";
import { s as N } from "./getThemeProps-D6FTZoZe.js";
import { u as $ } from "./useThemeProps-CA5tYvzL.js";
const P = y(), S = N("div", {
  name: "MuiContainer",
  slot: "Root",
  overridesResolver: (a, t) => {
    const {
      ownerState: n
    } = a;
    return [t.root, t[`maxWidth${m(String(n.maxWidth))}`], n.fixed && t.fixed, n.disableGutters && t.disableGutters];
  }
}), M = (a) => $({
  props: a,
  name: "MuiContainer",
  defaultTheme: P
}), D = (a, t) => {
  const n = (i) => O(t, i), {
    classes: l,
    fixed: u,
    disableGutters: d,
    maxWidth: o
  } = a, s = {
    root: ["root", o && `maxWidth${m(String(o))}`, u && "fixed", d && "disableGutters"]
  };
  return v(s, n, l);
};
function E(a = {}) {
  const {
    // This will allow adding custom styled fn (for example for custom sx style function)
    createStyledComponent: t = S,
    useThemeProps: n = M,
    componentName: l = "MuiContainer"
  } = a, u = t(({
    theme: o,
    ownerState: s
  }) => ({
    width: "100%",
    marginLeft: "auto",
    boxSizing: "border-box",
    marginRight: "auto",
    ...!s.disableGutters && {
      paddingLeft: o.spacing(2),
      paddingRight: o.spacing(2),
      // @ts-ignore module augmentation fails if custom breakpoints are used
      [o.breakpoints.up("sm")]: {
        paddingLeft: o.spacing(3),
        paddingRight: o.spacing(3)
      }
    }
  }), ({
    theme: o,
    ownerState: s
  }) => s.fixed && Object.keys(o.breakpoints.values).reduce((i, p) => {
    const c = p, r = o.breakpoints.values[c];
    return r !== 0 && (i[o.breakpoints.up(c)] = {
      maxWidth: `${r}${o.breakpoints.unit}`
    }), i;
  }, {}), ({
    theme: o,
    ownerState: s
  }) => ({
    // @ts-ignore module augmentation fails if custom breakpoints are used
    ...s.maxWidth === "xs" && {
      // @ts-ignore module augmentation fails if custom breakpoints are used
      [o.breakpoints.up("xs")]: {
        // @ts-ignore module augmentation fails if custom breakpoints are used
        maxWidth: Math.max(o.breakpoints.values.xs, 444)
      }
    },
    ...s.maxWidth && // @ts-ignore module augmentation fails if custom breakpoints are used
    s.maxWidth !== "xs" && {
      // @ts-ignore module augmentation fails if custom breakpoints are used
      [o.breakpoints.up(s.maxWidth)]: {
        // @ts-ignore module augmentation fails if custom breakpoints are used
        maxWidth: `${o.breakpoints.values[s.maxWidth]}${o.breakpoints.unit}`
      }
    }
  })), d = /* @__PURE__ */ R.forwardRef(function(s, i) {
    const p = n(s), {
      className: c,
      component: r = "div",
      disableGutters: b = !1,
      fixed: g = !1,
      maxWidth: C = "lg",
      classes: U,
      ...h
    } = p, f = {
      ...p,
      component: r,
      disableGutters: b,
      fixed: g,
      maxWidth: C
    }, T = D(f, l);
    return (
      // @ts-ignore theme is injected by the styled util
      /* @__PURE__ */ j(u, {
        as: r,
        ownerState: f,
        className: W(T.root, c),
        ref: i,
        ...h
      })
    );
  });
  return x.process.env.NODE_ENV !== "production" && (d.propTypes = {
    children: e.node,
    classes: e.object,
    className: e.string,
    component: e.elementType,
    disableGutters: e.bool,
    fixed: e.bool,
    maxWidth: e.oneOfType([e.oneOf(["xs", "sm", "md", "lg", "xl", !1]), e.string]),
    sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
  }), d;
}
const L = E({
  createStyledComponent: k("div", {
    name: "MuiContainer",
    slot: "Root",
    overridesResolver: (a, t) => {
      const {
        ownerState: n
      } = a;
      return [t.root, t[`maxWidth${m(String(n.maxWidth))}`], n.fixed && t.fixed, n.disableGutters && t.disableGutters];
    }
  }),
  useThemeProps: (a) => G({
    props: a,
    name: "MuiContainer"
  })
});
x.process.env.NODE_ENV !== "production" && (L.propTypes = {
  // ┌────────────────────────────── Warning ──────────────────────────────┐
  // │ These PropTypes are generated from the TypeScript type definitions. │
  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
  // └─────────────────────────────────────────────────────────────────────┘
  /**
   * @ignore
   */
  children: e.node,
  /**
   * Override or extend the styles applied to the component.
   */
  classes: e.object,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: e.elementType,
  /**
   * If `true`, the left and right padding is removed.
   * @default false
   */
  disableGutters: e.bool,
  /**
   * Set the max-width to match the min-width of the current breakpoint.
   * This is useful if you'd prefer to design for a fixed set of sizes
   * instead of trying to accommodate a fully fluid viewport.
   * It's fluid by default.
   * @default false
   */
  fixed: e.bool,
  /**
   * Determine the max-width of the container.
   * The container width grows with the size of the screen.
   * Set to `false` to disable `maxWidth`.
   * @default 'lg'
   */
  maxWidth: e.oneOfType([e.oneOf(["xs", "sm", "md", "lg", "xl", !1]), 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])
});
export {
  L as C
};
//# sourceMappingURL=Container-CcXKrUXg.js.map