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

React component library

"use strict";const X=require("react/jsx-runtime"),i=require("react"),n=require("./index-BPVoEhTF.cjs"),g=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),q=require("./utils-NZLCh-J5.cjs"),$=g.newStyled.div`
  ${s=>s.width>0?"":"flex: 1;"}
  min-width: ${s=>100/s.columns}%;
  width: ${s=>s.width}%;
  padding: ${s=>s.rowGap}px ${s=>s.columnGap}px;
  overflow-wrap: break-word;
`,y=i.forwardRef((s,x)=>{const{XS:t,S:c,M:o,L:a,XL:m,col:S,columns:e,spacing:l,rowSpacing:p,columnSpacing:u,children:G}=s,d=q.useScreenSize(),[T,k]=i.useState(0),[L,w]=i.useState(0),[P,f]=i.useState(0);i.useEffect(()=>{b()},[e,t,c,o,a,m,S]),i.useEffect(()=>{b(),h()},[d]),i.useEffect(()=>{h()},[l,p,u]);const b=()=>{let r=S?100/(e/S):0;switch(d){case"XS":r=t?100/(e/t):r;break;case"S":r=c?100/(e/c):t?100/(e/t):r;break;case"M":r=o?100/(e/o):c?100/(e/c):t?100/(e/t):r;break;case"L":r=a?100/(e/a):o?100/(e/o):c?100/(e/c):t?100/(e/t):r;break;case"XL":r=m?100/(e/m):a?100/(e/a):o?100/(e/o):c?100/(e/c):t?100/(e/t):r;break}k(r)},h=()=>{l?(w(l),f(l)):(p&&(isNaN(p)?w(p[d]??0):w(p)),u&&(isNaN(u)?f(u[d]??0):f(u)))};return X.jsx($,{ref:x,columns:e,width:T,rowGap:L,columnGap:P,children:G})});y.propTypes={XS:n.PropTypes.number,S:n.PropTypes.number,M:n.PropTypes.number,L:n.PropTypes.number,XL:n.PropTypes.number,col:n.PropTypes.number};module.exports=y;