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

React component library

import { jsx as N } from "react/jsx-runtime";
import { forwardRef as X, useState as u, useEffect as S } from "react";
import { s as I } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { a as W } from "./utils-BUdHa0nB.js";
const j = I.div`
  ${(t) => t.width > 0 ? "" : "flex: 1;"}
  min-width: ${(t) => 100 / t.columns}%;
  width: ${(t) => t.width}%;
  padding: ${(t) => t.rowGap}px ${(t) => t.columnGap}px;
  overflow-wrap: break-word;
`, M = X((t, x) => {
  const {
    XS: s,
    S: i,
    M: o,
    L: c,
    XL: m,
    col: p,
    columns: e,
    spacing: d,
    rowSpacing: r,
    columnSpacing: n,
    children: b
  } = t, l = W(), [k, g] = u(0), [$, f] = u(0), [L, w] = u(0);
  S(() => {
    h();
  }, [e, s, i, o, c, m, p]), S(() => {
    h(), G();
  }, [l]), S(() => {
    G();
  }, [d, r, n]);
  const h = () => {
    let a = p ? 100 / (e / p) : 0;
    switch (l) {
      case "XS":
        a = s ? 100 / (e / s) : a;
        break;
      case "S":
        a = i ? 100 / (e / i) : s ? 100 / (e / s) : a;
        break;
      case "M":
        a = o ? 100 / (e / o) : i ? 100 / (e / i) : s ? 100 / (e / s) : a;
        break;
      case "L":
        a = c ? 100 / (e / c) : o ? 100 / (e / o) : i ? 100 / (e / i) : s ? 100 / (e / s) : a;
        break;
      case "XL":
        a = m ? 100 / (e / m) : c ? 100 / (e / c) : o ? 100 / (e / o) : i ? 100 / (e / i) : s ? 100 / (e / s) : a;
        break;
    }
    g(a);
  }, G = () => {
    d ? (f(d), w(d)) : (r && (isNaN(r) ? f(r[l] ?? 0) : f(r)), n && (isNaN(n) ? w(n[l] ?? 0) : w(n)));
  };
  return /* @__PURE__ */ N(
    j,
    {
      ref: x,
      columns: e,
      width: k,
      rowGap: $,
      columnGap: L,
      children: b
    }
  );
});
export {
  M as default
};