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

Design system of Frontify

import { jsx as A } from "react/jsx-runtime";
import { GetGapClassName as e, GAP_DIRECTIONS as t } from "../../utilities/dimensions.es.js";
import { merge as N } from "../../utilities/merge.es.js";
import { Box as P } from "../Box/Box.es.js";
const C = {
  row: "tw-flex-row",
  column: "tw-flex-col",
  "row-reverse": "tw-flex-row-reverse",
  "column-reverse": "tw-flex-col-reverse"
}, F = {
  nowrap: "tw-flex-nowrap",
  wrap: "tw-flex-wrap",
  "wrap-reverse": "tw-flex-wrap-reverse"
}, I = {
  start: "tw-justify-start",
  end: "tw-justify-end",
  center: "tw-justify-center",
  between: "tw-justify-between",
  around: "tw-justify-around",
  evenly: "tw-justify-evenly"
}, _ = {
  start: "tw-items-start",
  end: "tw-items-end",
  center: "tw-items-center",
  baseline: "tw-items-baseline",
  stretch: "tw-items-stretch"
}, B = {
  start: "tw-content-start",
  end: "tw-content-end",
  center: "tw-content-center",
  normal: "tw-content-normal",
  between: "tw-content-between",
  around: "tw-content-around",
  evenly: "tw-content-evenly",
  baseline: "tw-content-baseline",
  stretch: "tw-content-stretch"
}, D = ({
  direction: n = "row",
  wrap: r = "nowrap",
  justify: s = "center",
  alignItems: o = "center",
  alignContent: w = "center",
  "data-test-id": a = "fondue-flex",
  children: c,
  bg: i,
  color: l,
  as: p = "div",
  margin: m,
  marginX: f,
  marginY: d,
  padding: u,
  paddingX: x,
  paddingY: y,
  minWidth: v,
  maxWidth: b,
  maxHeight: g,
  minHeight: j,
  spacing: G = 4,
  spacingX: M,
  spacingY: h
}) => /* @__PURE__ */ A(
  P,
  {
    "data-test-id": a,
    className: N([
      "tw-flex",
      e(t.GAP, G),
      e(t.GAP_X, M),
      e(t.GAP_Y, h),
      C[n],
      F[r],
      I[s],
      _[o],
      B[w],
      i,
      l
    ]),
    style: {
      maxWidth: b,
      minWidth: v,
      maxHeight: g,
      minHeight: j
    },
    margin: m,
    marginX: f,
    marginY: d,
    padding: u,
    paddingX: x,
    paddingY: y,
    as: p,
    children: c
  }
);
D.displayName = "FondueFlex";
export {
  D as Flex
};
//# sourceMappingURL=Flex.es.js.map