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

React component library

"use strict";const q=require("react/jsx-runtime"),r=require("react"),L=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),N=require("./utils-BK6B_Y9X.cjs"),R=L.styled.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;
`,X=r.forwardRef((t,x)=>{const{XS:s,S:i,M:a,L:o,XL:w,col:f,columns:e,spacing:l,rowSpacing:n,columnSpacing:u,children:G}=t,d=N.useScreenSize(),[b,k]=r.useState(0),[g,p]=r.useState(0),[$,S]=r.useState(0);r.useEffect(()=>{m()},[e,s,i,a,o,w,f]),r.useEffect(()=>{m(),h()},[d]),r.useEffect(()=>{h()},[l,n,u]);const m=()=>{let c=f?100/(e/f):0;switch(d){case"XS":c=s?100/(e/s):c;break;case"S":c=i?100/(e/i):s?100/(e/s):c;break;case"M":c=a?100/(e/a):i?100/(e/i):s?100/(e/s):c;break;case"L":c=o?100/(e/o):a?100/(e/a):i?100/(e/i):s?100/(e/s):c;break;case"XL":c=w?100/(e/w):o?100/(e/o):a?100/(e/a):i?100/(e/i):s?100/(e/s):c;break}k(c)},h=()=>{l?(p(l),S(l)):(n&&(isNaN(n)?p(n[d]??0):p(n)),u&&(isNaN(u)?S(u[d]??0):S(u)))};return q.jsx(R,{ref:x,columns:e,width:b,rowGap:g,columnGap:$,children:G})});module.exports=X;