@julseb-lib/react 0.0.24 → 0.0.27

package/dist/index.cjs.js

@@ -1163,7 +1163,7 @@ React keys must be passed directly to JSX without using spread:
             ${a?`#${a}`:`.${H}`} {
             --avatar-size: ${f}px;
             }
-        `),t.jsxs(K4,{"data-testid":h&&l?`${l}.Avatar`:l,ref:h?void 0:C,as:h?"span":e,id:a,className:O(h&&c?"Avatar":c,x),$backgroundColor:d,$border:r,$borderRadius:i,$size:f,$contentColor:o,...g,children:[p&&t.jsx(K2,{"data-testid":l&&`${l}.Image`,className:c&&"Image",src:typeof p=="object"?p.src:p,alt:typeof p=="object"?p.alt:"Avatar",width:"100%",height:"100%",fit:"cover"}),z&&z,n&&t.jsx(c2,{"data-testid":l&&`${l}.Icon`,className:c&&"Icon",icon:n,size:b,color:o,baseUrl:k})]})}),Ve=v.forwardRef(({"data-testid":l,as:e,size:c=32,border:a,borderRadius:h="circle",badge:d,img:r,letter:i,icon:f,iconSize:o=r2(c),backgroundColor:p="primary",contentColor:z=p==="white"?"primary":p==="black"?"white":"background",className:n,containerStyle:b,...k},g)=>{var $,R;const C=typeof d=="object",x=C&&d.size?d.size:8,H={"data-testid":l,as:e,className:n,hasBadge:!!d,backgroundColor:p,border:a,borderRadius:h,size:c,contentColor:z,img:r,letter:i,icon:f,iconSize:o,ref:g,...k};return d?t.jsxs(W4,{"data-testid":l,ref:g,as:e,className:n,style:b,$backgroundColor:p,$border:a,$borderRadius:h,$size:c,$contentColor:z,children:[t.jsx(e1,{...H}),t.jsx(X4,{"data-testid":l&&`${l}.Badge`,className:O({Badge:n},`Position${y.capitalize(C&&d.position?d.position:"top")}`),size:x,number:C&&d.content?d.content:void 0,backgroundColor:C&&d.backgroundColor?d.backgroundColor:void 0,contentColor:C&&d.contentColor?d.contentColor:void 0,padding:C&&d.padding?d.padding:void 0,$width:x,$paddingLeftRight:C&&typeof d.padding=="object"&&(($=d.padding)!=null&&$.leftRight)?(R=d.padding)==null?void 0:R.leftRight:"0px",$outline:C&&d.outline?d.outline:void 0})]}):t.jsx(e1,{...H})}),q4=s.button`
+        `),t.jsxs(K4,{"data-testid":h&&l?`${l}.Avatar`:l,ref:h?void 0:C,as:h?"span":e,id:a,className:O(h&&c?"Avatar":c,x),$backgroundColor:d,$border:r,$borderRadius:i,$size:f,$contentColor:o,...g,children:[p&&t.jsx(K2,{"data-testid":l&&`${l}.Image`,className:c&&"Image",src:typeof p=="object"?p.src:p,alt:typeof p=="object"?p.alt:"Avatar",width:"100%",height:"100%",fit:"cover",fallback:typeof p=="object"?p.fallback:void 0}),z&&z,n&&t.jsx(c2,{"data-testid":l&&`${l}.Icon`,className:c&&"Icon",icon:n,size:b,color:o,baseUrl:k})]})}),Ve=v.forwardRef(({"data-testid":l,as:e,size:c=32,border:a,borderRadius:h="circle",badge:d,img:r,letter:i,icon:f,iconSize:o=r2(c),backgroundColor:p="primary",contentColor:z=p==="white"?"primary":p==="black"?"white":"background",className:n,containerStyle:b,...k},g)=>{var $,R;const C=typeof d=="object",x=C&&d.size?d.size:8,H={"data-testid":l,as:e,className:n,hasBadge:!!d,backgroundColor:p,border:a,borderRadius:h,size:c,contentColor:z,img:r,letter:i,icon:f,iconSize:o,ref:g,...k};return d?t.jsxs(W4,{"data-testid":l,ref:g,as:e,className:n,style:b,$backgroundColor:p,$border:a,$borderRadius:h,$size:c,$contentColor:z,children:[t.jsx(e1,{...H}),t.jsx(X4,{"data-testid":l&&`${l}.Badge`,className:O({Badge:n},`Position${y.capitalize(C&&d.position?d.position:"top")}`),size:x,number:C&&d.content?d.content:void 0,backgroundColor:C&&d.backgroundColor?d.backgroundColor:void 0,contentColor:C&&d.contentColor?d.contentColor:void 0,padding:C&&d.padding?d.padding:void 0,$width:x,$paddingLeftRight:C&&typeof d.padding=="object"&&(($=d.padding)!=null&&$.leftRight)?(R=d.padding)==null?void 0:R.leftRight:"0px",$outline:C&&d.outline?d.outline:void 0})]}):t.jsx(e1,{...H})}),q4=s.button`
     border: none;
     background-color: transparent;
     position: relative;
@@ -1779,7 +1779,7 @@ React keys must be passed directly to JSX without using spread:
     opacity: ${({$disabled:l})=>l&&.5};
 `,j7=s.input`
     display: none;
-`;S([C7,A7,R7,L7,j7]);const tc=({"data-testid":l,className:e,validation:c,iconSizes:a,icons:h,iconBaseUrl:d})=>t.jsx(A7,{"data-testid":l&&`${l}.EmptyContainer`,className:e&&"EmptyContainer",$validationStatus:c==null?void 0:c.status,children:t.jsx(c2,{"data-testid":l&&`${l}.EmptyContainer.Icon`,className:e&&"IconEmpty",icon:(h==null?void 0:h.empty)??t.jsx(i4,{"data-testid":l&&`${l}.EmptyContainer.Icon`,className:e&&"IconEmpty",size:(a==null?void 0:a.empty)??48}),size:(a==null?void 0:a.empty)??48,baseUrl:d})}),hc=({"data-testid":l,className:e,validation:c,iconSizes:a,icons:h,iconBaseUrl:d,isVisible:r,disabled:i=!1})=>t.jsx(R7,{"data-testid":l&&`${l}.HoverContainer`,className:O({HoverContainer:e},{Visible:r}),$validationStatus:c==null?void 0:c.status,$disabled:i,children:t.jsx(c2,{"data-testid":l&&`${l}.EmptyContainer.Icon`,className:e&&"IconEmpty",icon:(h==null?void 0:h.hover)??t.jsx(Dl,{"data-testid":l&&`${l}.HoverContainer.Icon`,className:e&&"IconHover",size:(a==null?void 0:a.hover)??32}),size:(a==null?void 0:a.hover)??32,baseUrl:d})}),dc=v.forwardRef(({"data-testid":l,className:e,id:c,label:a,labelComment:h,helper:d,helperBottom:r,validation:i,value:f,icons:o,iconSizes:p,iconBaseUrl:z,size:n,width:b=64,height:k=64,borderRadius:g="m",disabled:C,containerStyle:x,...H},$)=>{const R=!!(a||h||d||r||i),[A,_]=v.useState(!1),V=v.useCallback(()=>{_(!0)},[]),E=v.useCallback(()=>{_(!1)},[]);return t.jsx(y2,{"data-testid":l,className:e,id:c,label:a,labelComment:h,helper:d,helperBottom:r,validation:i,counter:void 0,maxLength:void 0,value:void 0,iconBaseUrl:z,style:x,hasListOpen:void 0,children:t.jsxs(C7,{"data-testid":R&&l?`${l}.InputLabel`:l,className:R&&e?"InputLabel":e,htmlFor:c,$width:n??b,$height:n??k,$borderRadius:g,$disabled:C,$validationStatus:i==null?void 0:i.status,onMouseEnter:V,onMouseLeave:E,children:[f===""?t.jsx(tc,{"data-testid":l,className:e,validation:i,icons:o,iconSizes:p,iconBaseUrl:z}):t.jsx(L7,{"data-testid":l&&`${l}.Image`,className:e&&"Image",src:f,alt:"Image input",$disabled:C}),t.jsx(hc,{"data-testid":l,className:e,validation:i,icons:o,iconSizes:p,isVisible:A,disabled:C,iconBaseUrl:z}),t.jsx(j7,{"data-testid":l&&`${l}.Input`,className:e&&"Input",ref:$,id:c,disabled:C,type:"file",...H})]})})}),_7=s.span`
+`;S([C7,A7,R7,L7,j7]);const tc=({"data-testid":l,className:e,validation:c,iconSizes:a,icons:h,iconBaseUrl:d})=>t.jsx(A7,{"data-testid":l&&`${l}.EmptyContainer`,className:e&&"EmptyContainer",$validationStatus:c==null?void 0:c.status,children:t.jsx(c2,{"data-testid":l&&`${l}.EmptyContainer.Icon`,className:e&&"IconEmpty",icon:(h==null?void 0:h.empty)??t.jsx(i4,{"data-testid":l&&`${l}.EmptyContainer.Icon`,className:e&&"IconEmpty",size:(a==null?void 0:a.empty)??48}),size:(a==null?void 0:a.empty)??48,baseUrl:d})}),hc=({"data-testid":l,className:e,validation:c,iconSizes:a,icons:h,iconBaseUrl:d,isVisible:r,disabled:i=!1})=>t.jsx(R7,{"data-testid":l&&`${l}.HoverContainer`,className:O({HoverContainer:e},{Visible:r}),$validationStatus:c==null?void 0:c.status,$disabled:i,children:t.jsx(c2,{"data-testid":l&&`${l}.EmptyContainer.Icon`,className:e&&"IconEmpty",icon:(h==null?void 0:h.hover)??t.jsx(Dl,{"data-testid":l&&`${l}.HoverContainer.Icon`,className:e&&"IconHover",size:(a==null?void 0:a.hover)??32}),size:(a==null?void 0:a.hover)??32,baseUrl:d})}),dc=v.forwardRef(({"data-testid":l,className:e,id:c,label:a,labelComment:h,helper:d,helperBottom:r,validation:i,value:f,icons:o,iconSizes:p,iconBaseUrl:z,size:n,width:b=64,height:k=64,borderRadius:g="m",disabled:C,containerStyle:x,...H},$)=>{const R=!!(a||h||d||r||i),[A,_]=v.useState(!1),V=v.useCallback(()=>{_(!0)},[]),E=v.useCallback(()=>{_(!1)},[]);return t.jsx(y2,{"data-testid":l,className:e,id:c,label:a,labelComment:h,helper:d,helperBottom:r,validation:i,counter:void 0,maxLength:void 0,value:void 0,iconBaseUrl:z,style:x,hasListOpen:void 0,children:t.jsxs(C7,{"data-testid":R&&l?`${l}.InputLabel`:l,className:R&&e?"InputLabel":e,htmlFor:c,$width:n??b,$height:n??k,$borderRadius:g,$disabled:C,$validationStatus:i==null?void 0:i.status,onMouseEnter:V,onMouseLeave:E,children:[f===""||!f?t.jsx(tc,{"data-testid":l,className:e,validation:i,icons:o,iconSizes:p,iconBaseUrl:z}):t.jsx(L7,{"data-testid":l&&`${l}.Image`,className:e&&"Image",src:f,alt:"Image input",$disabled:C}),t.jsx(hc,{"data-testid":l,className:e,validation:i,icons:o,iconSizes:p,isVisible:A,disabled:C,iconBaseUrl:z}),t.jsx(j7,{"data-testid":l&&`${l}.Input`,className:e&&"Input",ref:$,id:c,disabled:C,type:"file",...H})]})})}),_7=s.span`
     height: calc(${W.BODY} * ${f2.BODY});
     ${m.Flexbox({$alignItems:"center",$justifyContent:"center"})}
     color: ${({theme:l,$disabled:e,$validationStatus:c})=>e?l.GRAY_500:c===!1?l.DANGER_500:l.PRIMARY_500}
@@ -2674,7 +2674,7 @@ React keys must be passed directly to JSX without using spread:
                         }
                     }
                 `;default:return null}}}
-`;S([C5]);const Y2=v.forwardRef(({"data-testid":l,as:e,className:c,isActive:a,children:h,accentColor:d,readOnly:r,...i},f)=>t.jsx(C5,{"data-testid":l,as:e,ref:f,className:O(c,{Active:a}),type:"button",$accentColor:d,$readOnly:r,...i,children:h})),ld=v.forwardRef(({"data-testid":l,as:e,children:c,className:a,accentColor:h="primary",queries:d,totalPages:r,pageLimit:i=5,icons:f,iconSizes:o,iconBaseUrl:p,justifyContent:z="center",gap:n,...b},k)=>{const[g]=p2.useSearchParams(),C=Number(g.get("page"))||1,[x,H]=v.useState(C),{handlePrev:$,handleNext:R,handlePage:A}=s3({currentPage:x,setCurrentPage:H,queries:d}),V=v.useCallback(()=>{const G=Math.floor((C-1)/i)*i;return new Array(i).fill(r).map((l2,F)=>G+F+1).filter(l2=>l2<=(r||0))},[C,i,r])(),E=R0(600),B=n||E?"xxs":"xs";return t.jsx(m2,{"data-testid":l,ref:k,as:e,justifyContent:z,gap:B,className:a,...b,children:r?t.jsxs(t.Fragment,{children:[t.jsx(Y2,{"data-testid":l&&`${l}.PaginationButton.Previous`,className:a&&"ButtonPrevious",onClick:$,isActive:!1,disabled:x===1,accentColor:h,children:t.jsx(c2,{"data-testid":l&&`${l}.PaginationButton.Previous.Icon`,className:a&&"IconPrevious",size:r2((o==null?void 0:o.previous)||32),icon:(f==null?void 0:f.previous)||t.jsx(j0,{"data-testid":l&&`${l}.PaginationButton.Previous.Icon`,className:a&&"IconPrevious",size:r2((o==null?void 0:o.previous)||32)}),baseUrl:p})}),V[0]!==1&&t.jsxs(t.Fragment,{children:[t.jsx(Y2,{"data-testid":l&&`${l}.PaginationButton.Number${x===1?".Active":""}`,className:a&&O("Number",{Active:x===1}),isActive:x===1,onClick:()=>A(1),accentColor:h,children:"1"}),t.jsx(Y2,{"data-testid":l&&`${l}.PaginationButton.More`,className:a&&"More",accentColor:h,readOnly:!0,children:"..."})]}),V.map(G=>t.jsx(Y2,{"data-testid":l&&`${l}.PaginationButton.Number${x===G?".Active":""}`,className:a&&O("Number",{Active:x===G}),isActive:G===x,onClick:()=>A(G),accentColor:h,children:G},G)),V[V.length-1]!==r&&t.jsxs(t.Fragment,{children:[t.jsx(Y2,{"data-testid":l&&`${l}.PaginationButton.More`,className:a&&"More",accentColor:h,readOnly:!0,children:"..."}),t.jsx(Y2,{"data-testid":l&&`${l}.PaginationButton.Number${x===r?".Active":""}`,className:a&&"Number",isActive:x===r,onClick:()=>A(r),accentColor:h,children:r})]}),t.jsx(Y2,{"data-testid":l&&`${l}.PaginationButton.Next`,className:a&&"ButtonNext",onClick:R,isActive:!1,disabled:x===r,accentColor:h,children:t.jsx(c2,{"data-testid":l&&`${l}.PaginationButton.Next.Icon`,className:a&&"IconNext",size:r2((o==null?void 0:o.next)||32),icon:(f==null?void 0:f.next)||t.jsx(b0,{"data-testid":l&&`${l}.PaginationButton.Next.Icon`,className:a&&"IconNext",size:r2((o==null?void 0:o.next)||32)}),baseUrl:p})})]}):c})}),$5=s.span`
+`;S([C5]);const Y2=v.forwardRef(({"data-testid":l,as:e,className:c,isActive:a,children:h,accentColor:d,readOnly:r,...i},f)=>t.jsx(C5,{"data-testid":l,as:e,ref:f,className:O(c,{Active:a}),type:"button",$accentColor:d,$readOnly:r,...i,children:h})),ld=v.forwardRef(({"data-testid":l,as:e,children:c,className:a,accentColor:h="primary",queries:d,totalPages:r,pageLimit:i=5,icons:f,iconSizes:o,iconBaseUrl:p,justifyContent:z="center",gap:n,...b},k)=>{const[g]=p2.useSearchParams(),C=Number(g.get("page"))||1,[x,H]=v.useState(C),{handlePrev:$,handleNext:R,handlePage:A}=s3({currentPage:x,setCurrentPage:H,queries:d}),V=v.useCallback(()=>{const G=Math.floor((C-1)/i)*i;return new Array(i).fill(r).map((l2,F)=>G+F+1).filter(l2=>l2<=(r||0))},[C,i,r])(),E=R0(600),B=n||E?"xxs":"xs";return r&&r<=1?null:t.jsx(m2,{"data-testid":l,ref:k,as:e,justifyContent:z,gap:B,className:a,...b,children:r?t.jsxs(t.Fragment,{children:[t.jsx(Y2,{"data-testid":l&&`${l}.PaginationButton.Previous`,className:a&&"ButtonPrevious",onClick:$,isActive:!1,disabled:x===1,accentColor:h,children:t.jsx(c2,{"data-testid":l&&`${l}.PaginationButton.Previous.Icon`,className:a&&"IconPrevious",size:r2((o==null?void 0:o.previous)||32),icon:(f==null?void 0:f.previous)||t.jsx(j0,{"data-testid":l&&`${l}.PaginationButton.Previous.Icon`,className:a&&"IconPrevious",size:r2((o==null?void 0:o.previous)||32)}),baseUrl:p})}),V[0]!==1&&t.jsxs(t.Fragment,{children:[t.jsx(Y2,{"data-testid":l&&`${l}.PaginationButton.Number${x===1?".Active":""}`,className:a&&O("Number",{Active:x===1}),isActive:x===1,onClick:()=>A(1),accentColor:h,children:"1"}),t.jsx(Y2,{"data-testid":l&&`${l}.PaginationButton.More`,className:a&&"More",accentColor:h,readOnly:!0,children:"..."})]}),V.map(G=>t.jsx(Y2,{"data-testid":l&&`${l}.PaginationButton.Number${x===G?".Active":""}`,className:a&&O("Number",{Active:x===G}),isActive:G===x,onClick:()=>A(G),accentColor:h,children:G},G)),V[V.length-1]!==r&&t.jsxs(t.Fragment,{children:[t.jsx(Y2,{"data-testid":l&&`${l}.PaginationButton.More`,className:a&&"More",accentColor:h,readOnly:!0,children:"..."}),t.jsx(Y2,{"data-testid":l&&`${l}.PaginationButton.Number${x===r?".Active":""}`,className:a&&"Number",isActive:x===r,onClick:()=>A(r),accentColor:h,children:r})]}),t.jsx(Y2,{"data-testid":l&&`${l}.PaginationButton.Next`,className:a&&"ButtonNext",onClick:R,isActive:!1,disabled:x===r,accentColor:h,children:t.jsx(c2,{"data-testid":l&&`${l}.PaginationButton.Next.Icon`,className:a&&"IconNext",size:r2((o==null?void 0:o.next)||32),icon:(f==null?void 0:f.next)||t.jsx(b0,{"data-testid":l&&`${l}.PaginationButton.Next.Icon`,className:a&&"IconNext",size:r2((o==null?void 0:o.next)||32)}),baseUrl:p})})]}):c})}),$5=s.span`
     ${m.Flexbox({$alignItems:"center",$justifyContent:"flex-start",$gap:"xs"})}
 `,R5=s(x3)`
     width: 48px;

package/dist/index.es.js

@@ -9047,7 +9047,8 @@ const p1 = C(
               alt: typeof o == "object" ? o.alt : "Avatar",
               width: "100%",
               height: "100%",
-              fit: "cover"
+              fit: "cover",
+              fallback: typeof o == "object" ? o.fallback : void 0
             }
           ),
           p && p,
@@ -12286,7 +12287,7 @@ const ce = ({
             onMouseEnter: E,
             onMouseLeave: N,
             children: [
-              r === "" ? /* @__PURE__ */ t.jsx(
+              r === "" || !r ? /* @__PURE__ */ t.jsx(
                 ce,
                 {
                   "data-testid": l,
@@ -16179,7 +16180,7 @@ const t0 = C(
       const O = Math.floor((H - 1) / i) * i;
       return new Array(i).fill(f).map((t2, Z) => O + Z + 1).filter((t2) => t2 <= (f || 0));
     }, [H, i, f])(), N = w3(600), Y = z || N ? "xxs" : "xs";
-    return /* @__PURE__ */ t.jsx(
+    return f && f <= 1 ? null : /* @__PURE__ */ t.jsx(
       g2,
       {
         "data-testid": l,

package/dist/index.umd.js

@@ -1163,7 +1163,7 @@ React keys must be passed directly to JSX without using spread:
             ${t?`#${t}`:`.${y}`} {
             --avatar-size: ${r}px;
             }
-        `),a.jsxs(n4,{"data-testid":h&&l?`${l}.Avatar`:l,ref:h?void 0:A,as:h?"span":c,id:t,className:O(h&&e?"Avatar":e,H),$backgroundColor:d,$border:f,$borderRadius:i,$size:r,$contentColor:o,...g,children:[z&&a.jsx(Z2,{"data-testid":l&&`${l}.Image`,className:e&&"Image",src:typeof z=="object"?z.src:z,alt:typeof z=="object"?z.alt:"Avatar",width:"100%",height:"100%",fit:"cover"}),p&&p,n&&a.jsx(a2,{"data-testid":l&&`${l}.Icon`,className:e&&"Icon",icon:n,size:b,color:o,baseUrl:k})]})}),ic=v.forwardRef(({"data-testid":l,as:c,size:e=32,border:t,borderRadius:h="circle",badge:d,img:f,letter:i,icon:r,iconSize:o=r2(e),backgroundColor:z="primary",contentColor:p=z==="white"?"primary":z==="black"?"white":"background",className:n,containerStyle:b,...k},g)=>{var R,L;const A=typeof d=="object",H=A&&d.size?d.size:8,y={"data-testid":l,as:c,className:n,hasBadge:!!d,backgroundColor:z,border:t,borderRadius:h,size:e,contentColor:p,img:f,letter:i,icon:r,iconSize:o,ref:g,...k};return d?a.jsxs(v4,{"data-testid":l,ref:g,as:c,className:n,style:b,$backgroundColor:z,$border:t,$borderRadius:h,$size:e,$contentColor:p,children:[a.jsx(g4,{...y}),a.jsx(M4,{"data-testid":l&&`${l}.Badge`,className:O({Badge:n},`Position${C.capitalize(A&&d.position?d.position:"top")}`),size:H,number:A&&d.content?d.content:void 0,backgroundColor:A&&d.backgroundColor?d.backgroundColor:void 0,contentColor:A&&d.contentColor?d.contentColor:void 0,padding:A&&d.padding?d.padding:void 0,$width:H,$paddingLeftRight:A&&typeof d.padding=="object"&&((R=d.padding)!=null&&R.leftRight)?(L=d.padding)==null?void 0:L.leftRight:"0px",$outline:A&&d.outline?d.outline:void 0})]}):a.jsx(g4,{...y})}),k4=m.button`
+        `),a.jsxs(n4,{"data-testid":h&&l?`${l}.Avatar`:l,ref:h?void 0:A,as:h?"span":c,id:t,className:O(h&&e?"Avatar":e,H),$backgroundColor:d,$border:f,$borderRadius:i,$size:r,$contentColor:o,...g,children:[z&&a.jsx(Z2,{"data-testid":l&&`${l}.Image`,className:e&&"Image",src:typeof z=="object"?z.src:z,alt:typeof z=="object"?z.alt:"Avatar",width:"100%",height:"100%",fit:"cover",fallback:typeof z=="object"?z.fallback:void 0}),p&&p,n&&a.jsx(a2,{"data-testid":l&&`${l}.Icon`,className:e&&"Icon",icon:n,size:b,color:o,baseUrl:k})]})}),ic=v.forwardRef(({"data-testid":l,as:c,size:e=32,border:t,borderRadius:h="circle",badge:d,img:f,letter:i,icon:r,iconSize:o=r2(e),backgroundColor:z="primary",contentColor:p=z==="white"?"primary":z==="black"?"white":"background",className:n,containerStyle:b,...k},g)=>{var R,L;const A=typeof d=="object",H=A&&d.size?d.size:8,y={"data-testid":l,as:c,className:n,hasBadge:!!d,backgroundColor:z,border:t,borderRadius:h,size:e,contentColor:p,img:f,letter:i,icon:r,iconSize:o,ref:g,...k};return d?a.jsxs(v4,{"data-testid":l,ref:g,as:c,className:n,style:b,$backgroundColor:z,$border:t,$borderRadius:h,$size:e,$contentColor:p,children:[a.jsx(g4,{...y}),a.jsx(M4,{"data-testid":l&&`${l}.Badge`,className:O({Badge:n},`Position${C.capitalize(A&&d.position?d.position:"top")}`),size:H,number:A&&d.content?d.content:void 0,backgroundColor:A&&d.backgroundColor?d.backgroundColor:void 0,contentColor:A&&d.contentColor?d.contentColor:void 0,padding:A&&d.padding?d.padding:void 0,$width:H,$paddingLeftRight:A&&typeof d.padding=="object"&&((R=d.padding)!=null&&R.leftRight)?(L=d.padding)==null?void 0:L.leftRight:"0px",$outline:A&&d.outline?d.outline:void 0})]}):a.jsx(g4,{...y})}),k4=m.button`
     border: none;
     background-color: transparent;
     position: relative;
@@ -1779,7 +1779,7 @@ React keys must be passed directly to JSX without using spread:
     opacity: ${({$disabled:l})=>l&&.5};
 `,l7=m.input`
     display: none;
-`;I([K4,J4,Q4,q4,l7]);const Rc=({"data-testid":l,className:c,validation:e,iconSizes:t,icons:h,iconBaseUrl:d})=>a.jsx(J4,{"data-testid":l&&`${l}.EmptyContainer`,className:c&&"EmptyContainer",$validationStatus:e==null?void 0:e.status,children:a.jsx(a2,{"data-testid":l&&`${l}.EmptyContainer.Icon`,className:c&&"IconEmpty",icon:(h==null?void 0:h.empty)??a.jsx(H1,{"data-testid":l&&`${l}.EmptyContainer.Icon`,className:c&&"IconEmpty",size:(t==null?void 0:t.empty)??48}),size:(t==null?void 0:t.empty)??48,baseUrl:d})}),Lc=({"data-testid":l,className:c,validation:e,iconSizes:t,icons:h,iconBaseUrl:d,isVisible:f,disabled:i=!1})=>a.jsx(Q4,{"data-testid":l&&`${l}.HoverContainer`,className:O({HoverContainer:c},{Visible:f}),$validationStatus:e==null?void 0:e.status,$disabled:i,children:a.jsx(a2,{"data-testid":l&&`${l}.EmptyContainer.Icon`,className:c&&"IconEmpty",icon:(h==null?void 0:h.hover)??a.jsx(fl,{"data-testid":l&&`${l}.HoverContainer.Icon`,className:c&&"IconHover",size:(t==null?void 0:t.hover)??32}),size:(t==null?void 0:t.hover)??32,baseUrl:d})}),$c=v.forwardRef(({"data-testid":l,className:c,id:e,label:t,labelComment:h,helper:d,helperBottom:f,validation:i,value:r,icons:o,iconSizes:z,iconBaseUrl:p,size:n,width:b=64,height:k=64,borderRadius:g="m",disabled:A,containerStyle:H,...y},R)=>{const L=!!(t||h||d||f||i),[$,_]=v.useState(!1),D=v.useCallback(()=>{_(!0)},[]),V=v.useCallback(()=>{_(!1)},[]);return a.jsx(C2,{"data-testid":l,className:c,id:e,label:t,labelComment:h,helper:d,helperBottom:f,validation:i,counter:void 0,maxLength:void 0,value:void 0,iconBaseUrl:p,style:H,hasListOpen:void 0,children:a.jsxs(K4,{"data-testid":L&&l?`${l}.InputLabel`:l,className:L&&c?"InputLabel":c,htmlFor:e,$width:n??b,$height:n??k,$borderRadius:g,$disabled:A,$validationStatus:i==null?void 0:i.status,onMouseEnter:D,onMouseLeave:V,children:[r===""?a.jsx(Rc,{"data-testid":l,className:c,validation:i,icons:o,iconSizes:z,iconBaseUrl:p}):a.jsx(q4,{"data-testid":l&&`${l}.Image`,className:c&&"Image",src:r,alt:"Image input",$disabled:A}),a.jsx(Lc,{"data-testid":l,className:c,validation:i,icons:o,iconSizes:z,isVisible:$,disabled:A,iconBaseUrl:p}),a.jsx(l7,{"data-testid":l&&`${l}.Input`,className:c&&"Input",ref:R,id:e,disabled:A,type:"file",...y})]})})}),c7=m.span`
+`;I([K4,J4,Q4,q4,l7]);const Rc=({"data-testid":l,className:c,validation:e,iconSizes:t,icons:h,iconBaseUrl:d})=>a.jsx(J4,{"data-testid":l&&`${l}.EmptyContainer`,className:c&&"EmptyContainer",$validationStatus:e==null?void 0:e.status,children:a.jsx(a2,{"data-testid":l&&`${l}.EmptyContainer.Icon`,className:c&&"IconEmpty",icon:(h==null?void 0:h.empty)??a.jsx(H1,{"data-testid":l&&`${l}.EmptyContainer.Icon`,className:c&&"IconEmpty",size:(t==null?void 0:t.empty)??48}),size:(t==null?void 0:t.empty)??48,baseUrl:d})}),Lc=({"data-testid":l,className:c,validation:e,iconSizes:t,icons:h,iconBaseUrl:d,isVisible:f,disabled:i=!1})=>a.jsx(Q4,{"data-testid":l&&`${l}.HoverContainer`,className:O({HoverContainer:c},{Visible:f}),$validationStatus:e==null?void 0:e.status,$disabled:i,children:a.jsx(a2,{"data-testid":l&&`${l}.EmptyContainer.Icon`,className:c&&"IconEmpty",icon:(h==null?void 0:h.hover)??a.jsx(fl,{"data-testid":l&&`${l}.HoverContainer.Icon`,className:c&&"IconHover",size:(t==null?void 0:t.hover)??32}),size:(t==null?void 0:t.hover)??32,baseUrl:d})}),$c=v.forwardRef(({"data-testid":l,className:c,id:e,label:t,labelComment:h,helper:d,helperBottom:f,validation:i,value:r,icons:o,iconSizes:z,iconBaseUrl:p,size:n,width:b=64,height:k=64,borderRadius:g="m",disabled:A,containerStyle:H,...y},R)=>{const L=!!(t||h||d||f||i),[$,_]=v.useState(!1),D=v.useCallback(()=>{_(!0)},[]),V=v.useCallback(()=>{_(!1)},[]);return a.jsx(C2,{"data-testid":l,className:c,id:e,label:t,labelComment:h,helper:d,helperBottom:f,validation:i,counter:void 0,maxLength:void 0,value:void 0,iconBaseUrl:p,style:H,hasListOpen:void 0,children:a.jsxs(K4,{"data-testid":L&&l?`${l}.InputLabel`:l,className:L&&c?"InputLabel":c,htmlFor:e,$width:n??b,$height:n??k,$borderRadius:g,$disabled:A,$validationStatus:i==null?void 0:i.status,onMouseEnter:D,onMouseLeave:V,children:[r===""||!r?a.jsx(Rc,{"data-testid":l,className:c,validation:i,icons:o,iconSizes:z,iconBaseUrl:p}):a.jsx(q4,{"data-testid":l&&`${l}.Image`,className:c&&"Image",src:r,alt:"Image input",$disabled:A}),a.jsx(Lc,{"data-testid":l,className:c,validation:i,icons:o,iconSizes:z,isVisible:$,disabled:A,iconBaseUrl:p}),a.jsx(l7,{"data-testid":l&&`${l}.Input`,className:c&&"Input",ref:R,id:e,disabled:A,type:"file",...y})]})})}),c7=m.span`
     height: calc(${K.BODY} * ${m2.BODY});
     ${s.Flexbox({$alignItems:"center",$justifyContent:"center"})}
     color: ${({theme:l,$disabled:c,$validationStatus:e})=>c?l.GRAY_500:e===!1?l.DANGER_500:l.PRIMARY_500}
@@ -2674,7 +2674,7 @@ React keys must be passed directly to JSX without using spread:
                         }
                     }
                 `;default:return null}}}
-`;I([c5]);const W2=v.forwardRef(({"data-testid":l,as:c,className:e,isActive:t,children:h,accentColor:d,readOnly:f,...i},r)=>a.jsx(c5,{"data-testid":l,as:c,ref:r,className:O(e,{Active:t}),type:"button",$accentColor:d,$readOnly:f,...i,children:h})),qc=v.forwardRef(({"data-testid":l,as:c,children:e,className:t,accentColor:h="primary",queries:d,totalPages:f,pageLimit:i=5,icons:r,iconSizes:o,iconBaseUrl:z,justifyContent:p="center",gap:n,...b},k)=>{const[g]=z2.useSearchParams(),A=Number(g.get("page"))||1,[H,y]=v.useState(A),{handlePrev:R,handleNext:L,handlePage:$}=F0({currentPage:H,setCurrentPage:y,queries:d}),D=v.useCallback(()=>{const B=Math.floor((A-1)/i)*i;return new Array(i).fill(f).map((c2,U)=>B+U+1).filter(c2=>c2<=(f||0))},[A,i,f])(),V=u0(600),Y=n||V?"xxs":"xs";return a.jsx(s2,{"data-testid":l,ref:k,as:c,justifyContent:p,gap:Y,className:t,...b,children:f?a.jsxs(a.Fragment,{children:[a.jsx(W2,{"data-testid":l&&`${l}.PaginationButton.Previous`,className:t&&"ButtonPrevious",onClick:R,isActive:!1,disabled:H===1,accentColor:h,children:a.jsx(a2,{"data-testid":l&&`${l}.PaginationButton.Previous.Icon`,className:t&&"IconPrevious",size:r2((o==null?void 0:o.previous)||32),icon:(r==null?void 0:r.previous)||a.jsx(C0,{"data-testid":l&&`${l}.PaginationButton.Previous.Icon`,className:t&&"IconPrevious",size:r2((o==null?void 0:o.previous)||32)}),baseUrl:z})}),D[0]!==1&&a.jsxs(a.Fragment,{children:[a.jsx(W2,{"data-testid":l&&`${l}.PaginationButton.Number${H===1?".Active":""}`,className:t&&O("Number",{Active:H===1}),isActive:H===1,onClick:()=>$(1),accentColor:h,children:"1"}),a.jsx(W2,{"data-testid":l&&`${l}.PaginationButton.More`,className:t&&"More",accentColor:h,readOnly:!0,children:"..."})]}),D.map(B=>a.jsx(W2,{"data-testid":l&&`${l}.PaginationButton.Number${H===B?".Active":""}`,className:t&&O("Number",{Active:H===B}),isActive:B===H,onClick:()=>$(B),accentColor:h,children:B},B)),D[D.length-1]!==f&&a.jsxs(a.Fragment,{children:[a.jsx(W2,{"data-testid":l&&`${l}.PaginationButton.More`,className:t&&"More",accentColor:h,readOnly:!0,children:"..."}),a.jsx(W2,{"data-testid":l&&`${l}.PaginationButton.Number${H===f?".Active":""}`,className:t&&"Number",isActive:H===f,onClick:()=>$(f),accentColor:h,children:f})]}),a.jsx(W2,{"data-testid":l&&`${l}.PaginationButton.Next`,className:t&&"ButtonNext",onClick:L,isActive:!1,disabled:H===f,accentColor:h,children:a.jsx(a2,{"data-testid":l&&`${l}.PaginationButton.Next.Icon`,className:t&&"IconNext",size:r2((o==null?void 0:o.next)||32),icon:(r==null?void 0:r.next)||a.jsx(g0,{"data-testid":l&&`${l}.PaginationButton.Next.Icon`,className:t&&"IconNext",size:r2((o==null?void 0:o.next)||32)}),baseUrl:z})})]}):e})}),e5=m.span`
+`;I([c5]);const W2=v.forwardRef(({"data-testid":l,as:c,className:e,isActive:t,children:h,accentColor:d,readOnly:f,...i},r)=>a.jsx(c5,{"data-testid":l,as:c,ref:r,className:O(e,{Active:t}),type:"button",$accentColor:d,$readOnly:f,...i,children:h})),qc=v.forwardRef(({"data-testid":l,as:c,children:e,className:t,accentColor:h="primary",queries:d,totalPages:f,pageLimit:i=5,icons:r,iconSizes:o,iconBaseUrl:z,justifyContent:p="center",gap:n,...b},k)=>{const[g]=z2.useSearchParams(),A=Number(g.get("page"))||1,[H,y]=v.useState(A),{handlePrev:R,handleNext:L,handlePage:$}=F0({currentPage:H,setCurrentPage:y,queries:d}),D=v.useCallback(()=>{const B=Math.floor((A-1)/i)*i;return new Array(i).fill(f).map((c2,U)=>B+U+1).filter(c2=>c2<=(f||0))},[A,i,f])(),V=u0(600),Y=n||V?"xxs":"xs";return f&&f<=1?null:a.jsx(s2,{"data-testid":l,ref:k,as:c,justifyContent:p,gap:Y,className:t,...b,children:f?a.jsxs(a.Fragment,{children:[a.jsx(W2,{"data-testid":l&&`${l}.PaginationButton.Previous`,className:t&&"ButtonPrevious",onClick:R,isActive:!1,disabled:H===1,accentColor:h,children:a.jsx(a2,{"data-testid":l&&`${l}.PaginationButton.Previous.Icon`,className:t&&"IconPrevious",size:r2((o==null?void 0:o.previous)||32),icon:(r==null?void 0:r.previous)||a.jsx(C0,{"data-testid":l&&`${l}.PaginationButton.Previous.Icon`,className:t&&"IconPrevious",size:r2((o==null?void 0:o.previous)||32)}),baseUrl:z})}),D[0]!==1&&a.jsxs(a.Fragment,{children:[a.jsx(W2,{"data-testid":l&&`${l}.PaginationButton.Number${H===1?".Active":""}`,className:t&&O("Number",{Active:H===1}),isActive:H===1,onClick:()=>$(1),accentColor:h,children:"1"}),a.jsx(W2,{"data-testid":l&&`${l}.PaginationButton.More`,className:t&&"More",accentColor:h,readOnly:!0,children:"..."})]}),D.map(B=>a.jsx(W2,{"data-testid":l&&`${l}.PaginationButton.Number${H===B?".Active":""}`,className:t&&O("Number",{Active:H===B}),isActive:B===H,onClick:()=>$(B),accentColor:h,children:B},B)),D[D.length-1]!==f&&a.jsxs(a.Fragment,{children:[a.jsx(W2,{"data-testid":l&&`${l}.PaginationButton.More`,className:t&&"More",accentColor:h,readOnly:!0,children:"..."}),a.jsx(W2,{"data-testid":l&&`${l}.PaginationButton.Number${H===f?".Active":""}`,className:t&&"Number",isActive:H===f,onClick:()=>$(f),accentColor:h,children:f})]}),a.jsx(W2,{"data-testid":l&&`${l}.PaginationButton.Next`,className:t&&"ButtonNext",onClick:L,isActive:!1,disabled:H===f,accentColor:h,children:a.jsx(a2,{"data-testid":l&&`${l}.PaginationButton.Next.Icon`,className:t&&"IconNext",size:r2((o==null?void 0:o.next)||32),icon:(r==null?void 0:r.next)||a.jsx(g0,{"data-testid":l&&`${l}.PaginationButton.Next.Icon`,className:t&&"IconNext",size:r2((o==null?void 0:o.next)||32)}),baseUrl:z})})]}):e})}),e5=m.span`
     ${s.Flexbox({$alignItems:"center",$justifyContent:"flex-start",$gap:"xs"})}
 `,a5=m(m3)`
     width: 48px;

package/dist/lib/components/Avatar/AvatarFunction.tsx

@@ -89,6 +89,9 @@ export const AvatarFunction = forwardRef<
                         width="100%"
                         height="100%"
                         fit="cover"
+                        fallback={
+                            typeof img === "object" ? img.fallback : undefined
+                        }
                     />
                 )}
 

package/dist/lib/components/Avatar/types.ts

@@ -18,7 +18,7 @@ interface ILibAvatarBase extends LibComponentBase<HTMLSpanElement> {
 }
 
 interface AvatarWithImage extends ILibAvatarBase {
-    img: string | { src: string; alt: string }
+    img: string | { src: string; alt: string; fallback?: string | JSX.Element }
     letter?: never
     icon?: never
     iconSize?: never

package/dist/lib/components/Image/types.ts

@@ -15,7 +15,7 @@ interface ILibImageBase
     borderRadius?: ILibRadius
     fit?: CssObjectFit
     aspectRatio?: string
-    fallback?: JSX.Element
+    fallback?: JSX.Element | string
     children?: never
 }
 

package/dist/lib/components/InputImage/InputImage.tsx

@@ -105,7 +105,7 @@ export const InputImage = forwardRef<HTMLInputElement, ILibInputImage>(
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}
                 >
-                    {value === "" ? (
+                    {value === "" || !value ? (
                         <EmptyContainer
                             data-testid={testid}
                             className={className}

package/dist/lib/components/Pagination/Pagination.tsx

@@ -81,6 +81,8 @@ export const Pagination = forwardRef<HTMLDivElement, ILibPagination>(
         const isMobile = useMaxWidth(600)
         const defaultGap = gap || isMobile ? "xxs" : "xs"
 
+        if (totalPages && totalPages <= 1) return null
+
         return (
             <Flexbox
                 data-testid={testid}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@julseb-lib/react",
-    "version": "0.0.24",
+    "version": "0.0.27",
     "type": "module",
     "license": "MIT",
     "scripts": {