@frontify/fondue/dist/components/Stack/Stack.es.js

Design system of Frontify

import { jsxs as p, Fragment as x, jsx as y } from "react/jsx-runtime";
import { Children as C } from "react";
import { GetGapClassName as t, GAP_DIRECTIONS as e } from "../../utilities/dimensions.es.js";
import { merge as N } from "../../utilities/merge.es.js";
import { Box as j } from "../Box/Box.es.js";
const v = {
  row: "tw-flex-row",
  column: "tw-flex-col",
  "row-reverse": "tw-flex-row-reverse",
  "column-reverse": "tw-flex-col-reverse"
}, h = {
  start: "tw-justify-start",
  end: "tw-justify-end",
  center: "tw-justify-center",
  between: "tw-justify-between",
  around: "tw-justify-around",
  evenly: "tw-justify-evenly"
}, b = {
  start: "tw-items-start",
  end: "tw-items-end",
  center: "tw-items-center",
  baseline: "tw-items-baseline",
  stretch: "tw-items-stretch"
}, E = "fondue-stack", K = ({
  children: r,
  "data-test-id": s = E,
  direction: n = "column",
  spacing: o,
  spacingX: a,
  spacingY: i,
  divider: m,
  padding: c,
  paddingX: w,
  paddingY: l,
  margin: d,
  marginX: f,
  marginY: u,
  justify: A = "start",
  alignItems: _ = "start",
  bg: I,
  color: G,
  as: P = "div"
}) => {
  const S = C.map(r, (T) => /* @__PURE__ */ p(x, { children: [
    T,
    m
  ] }));
  return /* @__PURE__ */ y(
    j,
    {
      "data-test-id": s,
      className: N([
        "tw-flex",
        h[A],
        b[_],
        v[n],
        t(e.GAP, o),
        t(e.GAP_X, a),
        t(e.GAP_Y, i),
        I,
        G
      ]),
      margin: d,
      marginX: f,
      marginY: u,
      padding: c,
      paddingX: w,
      paddingY: l,
      as: P,
      children: S
    }
  );
};
K.displayName = "FondueStack";
export {
  v as STACK_DIRECTION_MAPPING,
  E as STACK_TEST_ID,
  K as Stack
};
//# sourceMappingURL=Stack.es.js.map