@lanaco/lnc-react-ui/dist/FlexBox.js

React component library

import { jsx as p } from "react/jsx-runtime";
import { forwardRef as f } from "react";
import { s as m } from "./emotion-styled.browser.esm-DfbrHHed.js";
const w = {
  Row: "row",
  RowReverse: "row-reverse",
  Column: "column",
  ColumnReverse: "column-reverse"
}, d = {
  NoWrap: "nowrap",
  Wrap: "wrap",
  WrapReverse: "wrap-reverse"
}, u = {
  Start: "flex-start",
  Center: "center",
  End: "flex-end",
  SpaceAround: "space-around",
  SpaceBetween: "space-between",
  SpaceEvenly: "space-evenly"
}, x = {
  Start: "flex-start",
  Center: "center",
  Stretch: "stretch",
  End: "flex-end",
  Baseline: "baseline"
}, g = m.div`
  display: flex;
  flex-direction: ${(e) => w[e.direction]};
  flex-wrap: ${(e) => d[e.wrap]};
  justify-content: ${(e) => u[e.justifyContent]};
  align-items: ${(e) => x[e.alignItems]};
  column-gap: ${(e) => e.columnGap ? e.columnGap : e.gap};
  row-gap: ${(e) => e.rowGap ? e.rowGap : e.gap};
`, R = f((e, r) => {
  const {
    className: t = "",
    children: n,
    direction: a = "Row",
    wrap: o = "NoWrap",
    justifyContent: s = "Start",
    alignItems: c = "Stretch",
    gap: l = "0",
    ...i
  } = e;
  return /* @__PURE__ */ p(
    g,
    {
      className: "lnc-flexbox-container " + (t || ""),
      ref: r,
      wrap: o,
      gap: l,
      alignItems: c,
      direction: a,
      justifyContent: s,
      ...i,
      children: n
    }
  );
});
export {
  R as default
};