@cgi-learning-hub/ui/dist/Stack-pMJEpL7k.js

@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features

import { P as e } from "./index-B9vkf41S.js";
import { s as C, u as S } from "./DefaultPropsProvider-BrmlvPWg.js";
import * as m from "react";
import { H as D, L as g, M as f, N, O as R, P as E, Q as F, R as b } from "./generateUtilityClasses-B_xKAflz.js";
import { jsx as M } from "react/jsx-runtime";
import { s as B, c as w, g as G } from "./composeClasses-BskurlZX.js";
import { e as U } from "./extendSxProp-DGsHTtAe.js";
import { u as $ } from "./useThemeProps-CAonvyKa.js";
const A = F(), L = B("div", {
  name: "MuiStack",
  slot: "Root"
});
function _(o) {
  return $({
    props: o,
    name: "MuiStack",
    defaultTheme: A
  });
}
function H(o, t) {
  const c = m.Children.toArray(o).filter(Boolean);
  return c.reduce((a, i, s) => (a.push(i), s < c.length - 1 && a.push(/* @__PURE__ */ m.cloneElement(t, {
    key: `separator-${s}`
  })), a), []);
}
const I = (o) => ({
  row: "Left",
  "row-reverse": "Right",
  column: "Top",
  "column-reverse": "Bottom"
})[o], Q = ({
  ownerState: o,
  theme: t
}) => {
  let c = {
    display: "flex",
    flexDirection: "column",
    ...g({
      theme: t
    }, f({
      values: o.direction,
      breakpoints: t.breakpoints.values
    }), (a) => ({
      flexDirection: a
    }))
  };
  if (o.spacing) {
    const a = N(t), i = Object.keys(t.breakpoints.values).reduce((r, n) => ((typeof o.spacing == "object" && o.spacing[n] != null || typeof o.direction == "object" && o.direction[n] != null) && (r[n] = !0), r), {}), s = f({
      values: o.direction,
      base: i
    }), l = f({
      values: o.spacing,
      base: i
    });
    typeof s == "object" && Object.keys(s).forEach((r, n, u) => {
      if (!s[r]) {
        const p = n > 0 ? s[u[n - 1]] : "column";
        s[r] = p;
      }
    }), c = R(c, g({
      theme: t
    }, l, (r, n) => o.useFlexGap ? {
      gap: b(a, r)
    } : {
      // The useFlexGap={false} implement relies on each child to give up control of the margin.
      // We need to reset the margin to avoid double spacing.
      "& > :not(style):not(style)": {
        margin: 0
      },
      "& > :not(style) ~ :not(style)": {
        [`margin${I(n ? s[n] : o.direction)}`]: b(a, r)
      }
    }));
  }
  return c = E(t.breakpoints, c), c;
};
function q(o = {}) {
  const {
    // This will allow adding custom styled fn (for example for custom sx style function)
    createStyledComponent: t = L,
    useThemeProps: c = _,
    componentName: a = "MuiStack"
  } = o, i = () => w({
    root: ["root"]
  }, (r) => G(a, r), {}), s = t(Q), l = /* @__PURE__ */ m.forwardRef(function(r, n) {
    const u = c(r), y = U(u), {
      component: p = "div",
      direction: T = "column",
      spacing: h = 0,
      divider: v,
      children: O,
      className: j,
      useFlexGap: k = !1,
      ...P
    } = y, x = {
      direction: T,
      spacing: h,
      useFlexGap: k
    }, V = i();
    return /* @__PURE__ */ M(s, {
      as: p,
      ownerState: x,
      ref: n,
      className: D(V.root, j),
      ...P,
      children: v ? H(O, v) : O
    });
  });
  return process.env.NODE_ENV !== "production" && (l.propTypes = {
    children: e.node,
    direction: e.oneOfType([e.oneOf(["column-reverse", "column", "row-reverse", "row"]), e.arrayOf(e.oneOf(["column-reverse", "column", "row-reverse", "row"])), e.object]),
    divider: e.node,
    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])
  }), l;
}
const z = q({
  createStyledComponent: C("div", {
    name: "MuiStack",
    slot: "Root"
  }),
  useThemeProps: (o) => S({
    props: o,
    name: "MuiStack"
  })
});
process.env.NODE_ENV !== "production" && (z.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,
  /**
   * The component used for the root node.
   * Either a string to use a HTML element or a component.
   */
  component: e.elementType,
  /**
   * Defines the `flex-direction` style property.
   * It is applied for all screen sizes.
   * @default 'column'
   */
  direction: e.oneOfType([e.oneOf(["column-reverse", "column", "row-reverse", "row"]), e.arrayOf(e.oneOf(["column-reverse", "column", "row-reverse", "row"])), e.object]),
  /**
   * Add an element between each child.
   */
  divider: e.node,
  /**
   * Defines the space between immediate children.
   * @default 0
   */
  spacing: e.oneOfType([e.arrayOf(e.oneOfType([e.number, e.string])), e.number, e.object, e.string]),
  /**
   * The system prop, which 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]),
  /**
   * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
   *
   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
   * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
   *
   * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.
   * @default false
   */
  useFlexGap: e.bool
});
export {
  z as S
};