@soyfri/shared-library 2.0.0-beta.16 → 2.0.0-beta.18

package/storybook-static/assets/Table.stories-CTn2Ktmn.js

@@ -0,0 +1,1260 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{r as T,R as pa}from"./iframe-BAJnc_4n.js";import{c as le}from"./createSvgIcon-D_Gca4vA.js";import{K as ua,a as ga}from"./KeyboardArrowRight-WO_attK2.js";import{T as ha}from"./TableContainer-CzLNaEU-.js";import{T as xa,a as ya,b as ea,c as Te,d as fa}from"./TableRow-CS88-1HF.js";import{g as $e,a as Ue,s as ie,b as te,d as Me,r as na,u as Ye,c as xe,m as Oe,h as he,e as ba,i as va,j as Ca}from"./DefaultPropsProvider-BGoQxtDa.js";import{u as Sa,S as Ta}from"./Select-DJh2biEb.js";import{u as re}from"./useSlot-b6pXgp5_.js";import{u as la}from"./useControlled-DsVh1a5j.js";import{B as Ea}from"./ButtonBase-qyaMEhe4.js";import{c as Ze}from"./createSimplePaletteValueFilter-bm0fmN_7.js";import{m as ja}from"./mergeSlotProps-B0UBKBMe.js";import{T as s}from"./Typography-BgntX2Ep.js";import{B as w}from"./Box-BnhEcfFm.js";import{M as wa}from"./MenuItem-iU6tAqJI.js";import{I as Ee}from"./IconButton-9OYSTH58.js";import{B as ge}from"./Button-DBpqmVB_.js";import{S as Ia}from"./Snackbar-BtVeKTw6.js";import{A as ka}from"./Alert-3zvTPc0p.js";import{A as We}from"./Avatar-NbFfkZws.js";import{C as $}from"./Chip-C3vKPpzR.js";import{a as Pa}from"./useSlotProps-C0uMfuBt.js";import{u as ia}from"./useId-b4fZxjOL.js";import{u as za}from"./useForkRef-0ANIrxcF.js";import{v as Ba}from"./visuallyHidden-Dan1xhjv.js";import{i as Le}from"./isFocusVisible-B8k4qzLc.js";import{u as Ra}from"./useTheme-BmOJK7ra.js";import"./preload-helper-PPVm8Dsz.js";import"./Menu-ClzfjLc3.js";import"./Paper-SwQBhqI7.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./Grow-8y4FglGK.js";import"./getReactElementRef-BQ3ANZdy.js";import"./useTimeout-DNjRaOWc.js";import"./index-CY7j4a7o.js";import"./index-BF3FAXTk.js";import"./Modal-3okp9H2i.js";import"./Portal-Cj8XF9Lf.js";import"./Fade-Ll96CvH8.js";import"./emotion-react.browser.esm--g-C9cX9.js";import"./extendSxProp-CEpa30hT.js";import"./listItemTextClasses-CC_rwJam.js";import"./CircularProgress-DC7ZNWwl.js";import"./Close-Cy8nELYU.js";function Da(o){return $e("PrivateSwitchBase",o)}Ue("PrivateSwitchBase",["root","checked","disabled","input","edgeStart","edgeEnd"]);const Fa=o=>{const{classes:a,checked:t,disabled:r,edge:l}=o,p={root:["root",t&&"checked",r&&"disabled",l&&`edge${te(l)}`],input:["input"]};return Me(p,Da,a)},Aa=ie(Ea,{name:"MuiSwitchBase"})({padding:9,borderRadius:"50%",variants:[{props:{edge:"start",size:"small"},style:{marginLeft:-3}},{props:({edge:o,ownerState:a})=>o==="start"&&a.size!=="small",style:{marginLeft:-12}},{props:{edge:"end",size:"small"},style:{marginRight:-3}},{props:({edge:o,ownerState:a})=>o==="end"&&a.size!=="small",style:{marginRight:-12}}]}),Va=ie("input",{name:"MuiSwitchBase",shouldForwardProp:na})({cursor:"inherit",position:"absolute",opacity:0,width:"100%",height:"100%",top:0,left:0,margin:0,padding:0,zIndex:1}),Na=T.forwardRef(function(a,t){const{autoFocus:r,checked:l,checkedIcon:p,defaultChecked:n,disabled:u,disableFocusRipple:f=!1,edge:h=!1,icon:x,id:y,inputProps:E,inputRef:j,name:v,onBlur:R,onChange:D,onFocus:z,readOnly:A,required:S=!1,tabIndex:g,type:P,value:J,slots:se={},slotProps:H={},...ee}=a,[M,ae]=la({controlled:l,default:!!n,name:"SwitchBase",state:"checked"}),V=Sa(),oe=C=>{z&&z(C),V&&V.onFocus&&V.onFocus(C)},_=C=>{R&&R(C),V&&V.onBlur&&V.onBlur(C)},ce=C=>{if(C.nativeEvent.defaultPrevented)return;const F=C.target.checked;ae(F),D&&D(C,F)};let B=u;V&&typeof B>"u"&&(B=V.disabled);const k=P==="checkbox"||P==="radio",N={...a,checked:M,disabled:B,disableFocusRipple:f,edge:h},O=Fa(N),X={slots:se,slotProps:{input:E,...H}},[de,me]=re("root",{ref:t,elementType:Aa,className:O.root,shouldForwardComponentProp:!0,externalForwardedProps:{...X,component:"span",...ee},getSlotProps:C=>({...C,onFocus:F=>{C.onFocus?.(F),oe(F)},onBlur:F=>{C.onBlur?.(F),_(F)}}),ownerState:N,additionalProps:{centerRipple:!0,focusRipple:!f,disabled:B,role:void 0,tabIndex:null}}),[ye,fe]=re("input",{ref:j,elementType:Va,className:O.input,externalForwardedProps:X,getSlotProps:C=>({...C,onChange:F=>{C.onChange?.(F),ce(F)}}),ownerState:N,additionalProps:{autoFocus:r,checked:l,defaultChecked:n,disabled:B,id:k?y:void 0,name:v,readOnly:A,required:S,tabIndex:g,type:P,...P==="checkbox"&&J===void 0?{}:{value:J}}});return e.jsxs(de,{...me,children:[e.jsx(ye,{...fe}),M?p:x]})}),La=le(e.jsx("path",{d:"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"})),$a=le(e.jsx("path",{d:"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"})),Ua=le(e.jsx("path",{d:"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"}));function Ma(o){return $e("MuiCheckbox",o)}const Ke=Ue("MuiCheckbox",["root","checked","disabled","indeterminate","colorPrimary","colorSecondary","sizeSmall","sizeMedium"]),Oa=o=>{const{classes:a,indeterminate:t,color:r,size:l}=o,p={root:["root",t&&"indeterminate",`color${te(r)}`,`size${te(l)}`]},n=Me(p,Ma,a);return{...a,...n}},Wa=ie(Na,{shouldForwardProp:o=>na(o)||o==="classes",name:"MuiCheckbox",slot:"Root",overridesResolver:(o,a)=>{const{ownerState:t}=o;return[a.root,t.indeterminate&&a.indeterminate,a[`size${te(t.size)}`],t.color!=="default"&&a[`color${te(t.color)}`]]}})(Oe(({theme:o})=>({color:(o.vars||o).palette.text.secondary,variants:[{props:{color:"default",disableRipple:!1},style:{"&:hover":{backgroundColor:o.alpha((o.vars||o).palette.action.active,(o.vars||o).palette.action.hoverOpacity)}}},...Object.entries(o.palette).filter(Ze()).map(([a])=>({props:{color:a,disableRipple:!1},style:{"&:hover":{backgroundColor:o.alpha((o.vars||o).palette[a].main,(o.vars||o).palette.action.hoverOpacity)}}})),...Object.entries(o.palette).filter(Ze()).map(([a])=>({props:{color:a},style:{[`&.${Ke.checked}, &.${Ke.indeterminate}`]:{color:(o.vars||o).palette[a].main},[`&.${Ke.disabled}`]:{color:(o.vars||o).palette.action.disabled}}})),{props:{disableRipple:!1},style:{"&:hover":{"@media (hover: none)":{backgroundColor:"transparent"}}}}]}))),qa=e.jsx($a,{}),Ha=e.jsx(La,{}),_a=e.jsx(Ua,{}),aa=T.forwardRef(function(a,t){const r=Ye({props:a,name:"MuiCheckbox"}),{checkedIcon:l=qa,color:p="primary",icon:n=Ha,indeterminate:u=!1,indeterminateIcon:f=_a,inputProps:h,size:x="medium",disableRipple:y=!1,className:E,slots:j={},slotProps:v={},...R}=r,D=u?f:n,z=u?f:l,A={...r,disableRipple:y,color:p,indeterminate:u,size:x},S=Oa(A),g=v.input??h,[P,J]=re("root",{ref:t,elementType:Wa,className:xe(S.root,E),shouldForwardComponentProp:!0,externalForwardedProps:{slots:j,slotProps:v,...R},ownerState:A,additionalProps:{type:"checkbox",icon:T.cloneElement(D,{fontSize:D.props.fontSize??x}),checkedIcon:T.cloneElement(z,{fontSize:z.props.fontSize??x}),disableRipple:y,slots:j,slotProps:{input:ja(typeof g=="function"?g(A):g,{"data-indeterminate":u})}}});return e.jsx(P,{...J,classes:S})});function Xa(o){return $e("MuiLink",o)}const Ga=Ue("MuiLink",["root","underlineNone","underlineHover","underlineAlways","button","focusVisible"]),Ka=({theme:o,ownerState:a})=>{const t=a.color;if("colorSpace"in o&&o.colorSpace){const p=he(o,`palette.${t}.main`)||he(o,`palette.${t}`)||a.color;return o.alpha(p,.4)}const r=he(o,`palette.${t}.main`,!1)||he(o,`palette.${t}`,!1)||a.color,l=he(o,`palette.${t}.mainChannel`)||he(o,`palette.${t}Channel`);return"vars"in o&&l?`rgba(${l} / 0.4)`:ba(r,.4)},oa={primary:!0,secondary:!0,error:!0,info:!0,success:!0,warning:!0,textPrimary:!0,textSecondary:!0,textDisabled:!0},Ja=o=>{const{classes:a,component:t,focusVisible:r,underline:l}=o,p={root:["root",`underline${te(l)}`,t==="button"&&"button",r&&"focusVisible"]};return Me(p,Xa,a)},Za=ie(s,{name:"MuiLink",slot:"Root",overridesResolver:(o,a)=>{const{ownerState:t}=o;return[a.root,a[`underline${te(t.underline)}`],t.component==="button"&&a.button]}})(Oe(({theme:o})=>({variants:[{props:{underline:"none"},style:{textDecoration:"none"}},{props:{underline:"hover"},style:{textDecoration:"none","&:hover":{textDecoration:"underline"}}},{props:{underline:"always"},style:{textDecoration:"underline","&:hover":{textDecorationColor:"inherit"}}},{props:({underline:a,ownerState:t})=>a==="always"&&t.color!=="inherit",style:{textDecorationColor:"var(--Link-underlineColor)"}},{props:({underline:a,ownerState:t})=>a==="always"&&t.color==="inherit",style:o.colorSpace?{textDecorationColor:o.alpha("currentColor",.4)}:null},...Object.entries(o.palette).filter(Ze()).map(([a])=>({props:{underline:"always",color:a},style:{"--Link-underlineColor":o.alpha((o.vars||o).palette[a].main,.4)}})),{props:{underline:"always",color:"textPrimary"},style:{"--Link-underlineColor":o.alpha((o.vars||o).palette.text.primary,.4)}},{props:{underline:"always",color:"textSecondary"},style:{"--Link-underlineColor":o.alpha((o.vars||o).palette.text.secondary,.4)}},{props:{underline:"always",color:"textDisabled"},style:{"--Link-underlineColor":(o.vars||o).palette.text.disabled}},{props:{component:"button"},style:{position:"relative",WebkitTapHighlightColor:"transparent",backgroundColor:"transparent",outline:0,border:0,margin:0,borderRadius:0,padding:0,cursor:"pointer",userSelect:"none",verticalAlign:"middle",MozAppearance:"none",WebkitAppearance:"none","&::-moz-focus-inner":{borderStyle:"none"},[`&.${Ga.focusVisible}`]:{outline:"auto"}}}]}))),Ya=T.forwardRef(function(a,t){const r=Ye({props:a,name:"MuiLink"}),l=Ra(),{className:p,color:n="primary",component:u="a",onBlur:f,onFocus:h,TypographyClasses:x,underline:y="always",variant:E="inherit",sx:j,...v}=r,[R,D]=T.useState(!1),z=P=>{Le(P.target)||D(!1),f&&f(P)},A=P=>{Le(P.target)&&D(!0),h&&h(P)},S={...r,color:n,component:u,focusVisible:R,underline:y,variant:E},g=Ja(S);return e.jsx(Za,{color:n,className:xe(g.root,p),classes:x,component:u,onBlur:z,onFocus:A,ref:t,ownerState:S,variant:E,...v,sx:[...oa[n]===void 0?[{color:n}]:[],...Array.isArray(j)?j:[j]],style:{...v.style,...y==="always"&&n!=="inherit"&&!oa[n]&&{"--Link-underlineColor":Ka({theme:l,ownerState:S})}}})}),Qa=le(e.jsx("path",{d:"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"})),eo=le(e.jsx("path",{d:"M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"}));function ao(o){return $e("MuiRating",o)}const Ce=Ue("MuiRating",["root","sizeSmall","sizeMedium","sizeLarge","readOnly","disabled","focusVisible","visuallyHidden","pristine","label","labelEmptyValueActive","icon","iconEmpty","iconFilled","iconHover","iconFocus","iconActive","decimal"]);function oo(o){const a=o.toString().split(".")[1];return a?a.length:0}function Je(o,a){if(o==null)return o;const t=Math.round(o/a)*a;return Number(t.toFixed(oo(a)))}const to=o=>{const{classes:a,size:t,readOnly:r,disabled:l,emptyValueFocused:p,focusVisible:n}=o,u={root:["root",`size${te(t)}`,l&&"disabled",n&&"focusVisible",r&&"readOnly"],label:["label","pristine"],labelEmptyValue:[p&&"labelEmptyValueActive"],icon:["icon"],iconEmpty:["iconEmpty"],iconFilled:["iconFilled"],iconHover:["iconHover"],iconFocus:["iconFocus"],iconActive:["iconActive"],decimal:["decimal"],visuallyHidden:["visuallyHidden"]};return Me(u,ao,a)},ro=ie("span",{name:"MuiRating",slot:"Root",overridesResolver:(o,a)=>{const{ownerState:t}=o;return[{[`& .${Ce.visuallyHidden}`]:a.visuallyHidden},a.root,a[`size${te(t.size)}`],t.readOnly&&a.readOnly]}})(Oe(({theme:o})=>({display:"inline-flex",position:"relative",fontSize:o.typography.pxToRem(24),color:"#faaf00",cursor:"pointer",textAlign:"left",width:"min-content",WebkitTapHighlightColor:"transparent",[`&.${Ce.disabled}`]:{opacity:(o.vars||o).palette.action.disabledOpacity,pointerEvents:"none"},[`&.${Ce.focusVisible} .${Ce.iconActive}`]:{outline:"1px solid #999"},[`& .${Ce.visuallyHidden}`]:Ba,variants:[{props:{size:"small"},style:{fontSize:o.typography.pxToRem(18)}},{props:{size:"large"},style:{fontSize:o.typography.pxToRem(30)}},{props:({ownerState:a})=>a.readOnly,style:{pointerEvents:"none"}}]}))),sa=ie("label",{name:"MuiRating",slot:"Label",overridesResolver:({ownerState:o},a)=>[a.label,o.emptyValueFocused&&a.labelEmptyValueActive]})({cursor:"inherit",variants:[{props:({ownerState:o})=>o.emptyValueFocused,style:{top:0,bottom:0,position:"absolute",outline:"1px solid #999",width:"100%"}}]}),no=ie("span",{name:"MuiRating",slot:"Icon",overridesResolver:(o,a)=>{const{ownerState:t}=o;return[a.icon,t.iconEmpty&&a.iconEmpty,t.iconFilled&&a.iconFilled,t.iconHover&&a.iconHover,t.iconFocus&&a.iconFocus,t.iconActive&&a.iconActive]}})(Oe(({theme:o})=>({display:"flex",transition:o.transitions.create("transform",{duration:o.transitions.duration.shortest}),pointerEvents:"none",variants:[{props:({ownerState:a})=>a.iconActive,style:{transform:"scale(1.2)"}},{props:({ownerState:a})=>a.iconEmpty,style:{color:(o.vars||o).palette.action.disabled}}]}))),lo=ie("span",{name:"MuiRating",slot:"Decimal",shouldForwardProp:o=>va(o)&&o!=="iconActive",overridesResolver:(o,a)=>{const{iconActive:t}=o;return[a.decimal,t&&a.iconActive]}})({position:"relative",variants:[{props:({iconActive:o})=>o,style:{transform:"scale(1.2)"}}]});function io(o){const{value:a,...t}=o;return e.jsx("span",{...t})}function ta(o){const{classes:a,disabled:t,emptyIcon:r,focus:l,getLabelText:p,highlightSelectedOnly:n,hover:u,icon:f,IconContainerComponent:h,isActive:x,itemValue:y,labelProps:E,name:j,onBlur:v,onChange:R,onClick:D,onFocus:z,readOnly:A,ownerState:S,ratingValue:g,ratingValueRounded:P,slots:J={},slotProps:se={}}=o,H=n?y===g:y<=g,ee=y<=u,M=y<=l,ae=y===P,V=`${j}-${ia()}`,oe={slots:J,slotProps:se},[_,ce]=re("icon",{elementType:no,className:xe(a.icon,H?a.iconFilled:a.iconEmpty,ee&&a.iconHover,M&&a.iconFocus,x&&a.iconActive),externalForwardedProps:oe,ownerState:{...S,iconEmpty:!H,iconFilled:H,iconHover:ee,iconFocus:M,iconActive:x},additionalProps:{value:y},internalForwardedProps:{as:h}}),[B,k]=re("label",{elementType:sa,externalForwardedProps:oe,ownerState:{...S,emptyValueFocused:void 0},additionalProps:{style:E?.style,htmlFor:V}}),N=e.jsx(_,{...ce,children:r&&!H?r:f});return A?e.jsx("span",{...E,children:N}):e.jsxs(T.Fragment,{children:[e.jsxs(B,{...k,children:[N,e.jsx("span",{className:a.visuallyHidden,children:p(y)})]}),e.jsx("input",{className:a.visuallyHidden,onFocus:z,onBlur:v,onChange:R,onClick:D,disabled:t,value:y,id:V,type:"radio",name:j,checked:ae})]})}const so=e.jsx(Qa,{fontSize:"inherit"}),co=e.jsx(eo,{fontSize:"inherit"});function mo(o){return`${o||"0"} Star${o!==1?"s":""}`}const Qe=T.forwardRef(function(a,t){const r=Ye({name:"MuiRating",props:a}),{component:l="span",className:p,defaultValue:n=null,disabled:u=!1,emptyIcon:f=co,emptyLabelText:h="Empty",getLabelText:x=mo,highlightSelectedOnly:y=!1,icon:E=so,IconContainerComponent:j=io,max:v=5,name:R,onChange:D,onChangeActive:z,onMouseLeave:A,onMouseMove:S,precision:g=1,readOnly:P=!1,size:J="medium",value:se,slots:H={},slotProps:ee={},...M}=r,ae=ia(R),[V,oe]=la({controlled:se,default:n,name:"Rating"}),_=Je(V,g),ce=Pa(),[{hover:B,focus:k},N]=T.useState({hover:-1,focus:-1});let O=_;B!==-1&&(O=B),k!==-1&&(O=k);const[X,de]=T.useState(!1),me=T.useRef(),ye=za(me,t),fe=m=>{S&&S(m);const c=me.current,{right:b,left:L,width:W}=c.getBoundingClientRect();let K;ce?K=(b-m.clientX)/W:K=(m.clientX-L)/W;let q=Je(v*K+g/2,g);q=Ca(q,g,v),N(Q=>Q.hover===q&&Q.focus===q?Q:{hover:q,focus:q}),de(!1),z&&B!==q&&z(m,q)},C=m=>{A&&A(m);const c=-1;N({hover:c,focus:c}),z&&B!==c&&z(m,c)},F=m=>{let c=m.target.value===""?null:parseFloat(m.target.value);B!==-1&&(c=B),oe(c),D&&D(m,c)},G=m=>{m.clientX===0&&m.clientY===0||(N({hover:-1,focus:-1}),oe(null),D&&parseFloat(m.target.value)===_&&D(m,null))},Z=m=>{Le(m.target)&&de(!0);const c=parseFloat(m.target.value);N(b=>({hover:b.hover,focus:c}))},pe=m=>{if(B!==-1)return;Le(m.target)||de(!1);const c=-1;N(b=>({hover:b.hover,focus:c}))},[qe,He]=T.useState(!1),ue={...r,component:l,defaultValue:n,disabled:u,emptyIcon:f,emptyLabelText:h,emptyValueFocused:qe,focusVisible:X,getLabelText:x,icon:E,IconContainerComponent:j,max:v,precision:g,readOnly:P,size:J},Y=to(ue),be={slots:H,slotProps:ee},[Se,ve]=re("root",{ref:ye,className:xe(Y.root,p),elementType:ro,externalForwardedProps:{...be,...M,component:l},getSlotProps:m=>({...m,onMouseMove:c=>{fe(c),m.onMouseMove?.(c)},onMouseLeave:c=>{C(c),m.onMouseLeave?.(c)}}),ownerState:ue,additionalProps:{role:P?"img":null,"aria-label":P?x(O):null}}),[_e,Xe]=re("label",{className:xe(Y.label,Y.labelEmptyValue),elementType:sa,externalForwardedProps:be,ownerState:ue}),[d,I]=re("decimal",{className:Y.decimal,elementType:lo,externalForwardedProps:be,ownerState:ue});return e.jsxs(Se,{...ve,children:[Array.from(new Array(v)).map((m,c)=>{const b=c+1,L={classes:Y,disabled:u,emptyIcon:f,focus:k,getLabelText:x,highlightSelectedOnly:y,hover:B,icon:E,IconContainerComponent:j,name:ae,onBlur:pe,onChange:F,onClick:G,onFocus:Z,ratingValue:O,ratingValueRounded:_,readOnly:P,ownerState:ue,slots:H,slotProps:ee},W=b===Math.ceil(O)&&(B!==-1||k!==-1);if(g<1){const K=Array.from(new Array(1/g));return T.createElement(d,{...I,key:b,className:xe(I.className,W&&Y.iconActive),iconActive:W},K.map((q,Q)=>{const Ge=Je(b-1+(Q+1)*g,g);return e.jsx(ta,{...L,isActive:!1,itemValue:Ge,labelProps:{style:K.length-1===Q?{}:{width:Ge===O?`${(Q+1)*g*100}%`:"0%",overflow:"hidden",position:"absolute"}}},Ge)}))}return e.jsx(ta,{...L,isActive:W,itemValue:b},b)}),!P&&!u&&e.jsxs(_e,{...Xe,children:[e.jsx("input",{className:Y.visuallyHidden,value:"",id:`${ae}-empty`,type:"radio",name:ae,checked:_==null,onFocus:()=>He(!0),onBlur:()=>He(!1),onChange:F}),e.jsx("span",{className:Y.visuallyHidden,children:h})]})]})}),ra=le(e.jsx("path",{d:"M19 9h-4V3H9v6H5l7 7zm-8 2V5h2v6h1.17L12 13.17 9.83 11zm-6 7h14v2H5z"})),po=le(e.jsx("path",{d:"M18.41 16.59 13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"})),uo=le(e.jsx("path",{d:"M5.59 7.41 10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"})),go=o=>{const{data:a,columns:t,fileName:r,exportColumns:l,setSnackbarOpen:p,setSnackbarMessage:n,setSnackbarSeverity:u}=o;if(!a||a.length===0){n("No hay datos para exportar a CSV."),u("warning"),p(!0);return}n("Exportando datos a CSV..."),u("info"),p(!0);try{const f=l?t.filter(v=>l.includes(v.props.name)):t,h=f.map(v=>`"${v.props.name.replace(/"/g,'""')}"`).join(","),x=a.map(v=>f.map(D=>{const z=D.props.field;let A;Array.isArray(z)?A=v[z[0]]:A=v[z];let S=String(A||"");return(S.includes(",")||S.includes('"')||S.includes(`
+`))&&(S=`"${S.replace(/"/g,'""')}"`),S}).join(",")),y=[h,...x].join(`
+`),E=new Blob([y],{type:"text/csv;charset=utf-8;"}),j=document.createElement("a");if(j.download!==void 0){const v=URL.createObjectURL(E);j.setAttribute("href",v),j.setAttribute("download",r+".csv"),j.style.visibility="hidden",document.body.appendChild(j),j.click(),document.body.removeChild(j),URL.revokeObjectURL(v),n("¡Exportación a CSV completada!"),u("success")}else n("Tu navegador no soporta la descarga directa para CSV. Por favor, copia el contenido manualmente."),u("error")}catch(f){console.error("Error al exportar los datos a CSV:",f),n("Error al exportar los datos a CSV."),u("error")}finally{p(!0)}},ho=o=>{const{data:a,columns:t,fileName:r,exportColumns:l,setSnackbarOpen:p,setSnackbarMessage:n,setSnackbarSeverity:u}=o;if(!a||a.length===0){n("No hay datos para exportar a Excel."),u("warning"),p(!0);return}n("Exportando datos a Excel (XLSX)..."),u("info"),p(!0);try{const f=l?t.filter(E=>l.includes(E.props.name)):t;let h=`
+      <html xmlns:o="urn:schemas-microsoft-com:office:office"
+      xmlns:x="urn:schemas-microsoft-com:office:excel"
+      xmlns="http://www.w3.org/TR/REC-html40">
+      <head>
+          <meta charset="utf-8" />
+          <!--[if gte mso 9]><xml>
+          <x:ExcelWorkbook>
+              <x:ExcelWorksheets>
+                  <x:ExcelWorksheet>
+                      <x:Name>Hoja1</x:Name>
+                      <x:WorksheetOptions>
+                          <x:DisplayGridlines/>
+                      </x:WorksheetOptions>
+                  </x:ExcelWorksheet>
+              </x:ExcelWorksheets>
+          </x:ExcelWorkbook>
+          </xml><![endif]-->
+      </head>
+      <body>
+          <table>
+              <thead>
+                  <tr>
+                      ${f.map(E=>`<th>${E.props.name}</th>`).join("")}
+                  </tr>
+              </thead>
+              <tbody>
+                  ${a.map(E=>`
+                      <tr>
+                          ${f.map(j=>{const v=j.props.field;let R;return Array.isArray(v)?R=E[v[0]]:R=E[v],`<td>${String(R||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}</td>`}).join("")}
+                      </tr>
+                  `).join("")}
+              </tbody>
+          </table>
+      </body>
+      </html>
+    `;const x=new Blob([h],{type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8;"}),y=document.createElement("a");if(y.download!==void 0){const E=URL.createObjectURL(x);y.setAttribute("href",E),y.setAttribute("download",r+".xlsx"),y.style.visibility="hidden",document.body.appendChild(y),y.click(),document.body.removeChild(y),URL.revokeObjectURL(E),n("¡Exportación a Excel (XLSX) completada!"),u("success")}else n("Tu navegador no soporta la descarga directa para Excel (XLSX). Por favor, copia el contenido manualmente."),u("error")}catch(f){console.error("Error al exportar los datos a Excel (XLSX):",f),n("Error al exportar los datos a Excel (XLSX)."),u("error")}finally{p(!0)}},xo=""+new URL("EmptyTable-B-RKtgVs.png",import.meta.url).href,yo=pa.forwardRef(function(a,t){return e.jsx(ka,{elevation:6,ref:t,variant:"filled",...a})});function U({data:o,children:a,currentPage:t,pageSize:r,totalPages:l,previousPage:p,nextPage:n,pageSizeSelectorValue:u=10,onPageChange:f,onPageSizeChange:h,visiblePageNumbers:x=5,enableCSVExport:y=!1,csvExportFileName:E="data.csv",csvExportButtonText:j="Exportar CSV",csvExportColumns:v,enableExcelExport:R=!1,excelExportFileName:D="data.xlsx",excelExportButtonText:z="Exportar Excel",excelExportColumns:A,enableRowSelection:S=!1,rowIdentifier:g,onSelectionChange:P,showPageSizeSelector:J=!0,emptyTitle:se="No hay datos disponibles",emptyMessage:H,emptyImageSrc:ee=e.jsx(w,{mb:2,children:e.jsx("img",{src:xo,alt:"No data",style:{maxWidth:"150px",opacity:.6}})})}){const M=T.Children.toArray(a).filter(d=>T.isValidElement(d)&&d.type.displayName==="Column"),[ae,V]=T.useState(!1),[oe,_]=T.useState(""),[ce,B]=T.useState("info"),[k,N]=T.useState([]);T.useEffect(()=>{N([])},[o,t,r]),T.useEffect(()=>{P?.(k)},[k,P]);const O=(d,I)=>{I!=="clickaway"&&V(!1)},X=typeof f=="function"&&typeof t=="number",[de,me]=T.useState(1),[ye,fe]=T.useState(u),C=X?t:de,F=X?r:ye,G=X?o:o.slice((C-1)*F,C*F),Z=X?l:Math.ceil(o.length/F),pe=d=>{d<1||d>Z||(X?f?.(d):me(d))},qe=d=>{X?(h?.(d),f?.(1)):(fe(d),me(1))},ue=(()=>{const d=[],I=Z,m=C,c=Math.floor(x/2);let b=Math.max(1,m-c),L=Math.min(I,m+c);L-b+1<x&&(b===1?L=Math.min(I,b+x-1):L===I&&(b=Math.max(1,I-x+1)));for(let W=b;W<=L;W++)d.push(W);return d})(),Y=d=>{if(!g){console.warn("`rowIdentifier` prop is required for row selection.");return}if(d.target.checked){const I=[...k];G.forEach(m=>{const c=m[g];I.some(b=>b[g]===c)||I.push(m)}),N(I)}else{const I=k.filter(m=>!G.some(c=>c[g]===m[g]));N(I)}},be=(d,I)=>{if(!g){console.warn("`rowIdentifier` prop is required for row selection.");return}const m=I[g],c=k.findIndex(L=>L[g]===m);let b=[];c===-1?b=b.concat(k,I):c===0?b=b.concat(k.slice(1)):c===k.length-1?b=b.concat(k.slice(0,-1)):c>0&&(b=b.concat(k.slice(0,c),k.slice(c+1))),N(b)},Se=d=>g?k.some(I=>I[g]===d[g]):!1,ve=G.filter(Se).length,_e=G.length>0&&ve===G.length,Xe=ve>0&&ve<G.length;return e.jsxs(ha,{children:[e.jsxs(xa,{sx:{minWidth:650},"aria-label":"custom table",style:G.length===0?{display:"none"}:{},children:[e.jsx(ya,{sx:{backgroundColor:"#fff"},children:e.jsxs(ea,{children:[S&&e.jsxs(Te,{padding:"checkbox",sx:{width:"50px"},children:[" ",e.jsx(aa,{color:"primary",indeterminate:Xe,checked:_e,onChange:Y,inputProps:{"aria-label":"select all desserts"}})]}),M.map((d,I)=>e.jsx(Te,{sx:{fontSize:"12px",color:m=>m.palette.text.secondary,width:d.props.width||"auto",whiteSpace:"nowrap"},children:e.jsx(s,{sx:{fontSize:"12px"},children:d.props.name})},I))]})}),e.jsx(fa,{sx:{borderRadius:"10px",overflow:"hidden"},children:G.map((d,I)=>{const m=S&&Se(d);return e.jsxs(ea,{sx:{backgroundColor:"#F8F8F8","&:last-child td, &:last-child th":{border:0},"&:hover":{backgroundColor:c=>"#FFF"}},selected:m,children:[S&&e.jsxs(Te,{padding:"checkbox",sx:{width:"50px"},children:[" ",e.jsx(aa,{color:"primary",checked:m,onClick:c=>be(c,d),inputProps:{"aria-labelledby":`table-checkbox-${I}`}})]}),M.map((c,b)=>{const{field:L,children:W}=c.props;let K;return Array.isArray(L)?L.length===0?K={...d}:K=L.reduce((q,Q)=>(q[Q]=d[Q],q),{}):K={[L]:d[L]},e.jsx(Te,{sx:{fontSize:"14px",width:c.props.width||"auto",whiteSpace:"nowrap",padding:"12px 16px",borderBottom:"none"},children:W(K)},b)})]},I)})})]}),G.length===0&&e.jsxs(w,{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",p:4,children:[ee,e.jsx(s,{variant:"body2",color:"#878E9A",fontSize:"18px",fontWeight:"600",children:se||"No hay datos disponibles para mostrar."}),e.jsx(s,{variant:"body2",color:"#878E9A",fontSize:"14px",mt:1,children:H||"Intente ajustar sus filtros o agregar nuevos datos."})]}),(Z>0||y||R||S&&k.length>0)&&e.jsxs(w,{display:"flex",justifyContent:"space-between",alignItems:"center",p:2,children:[Z>0&&J&&e.jsx(Ta,{size:"small",value:F,onChange:d=>qe(Number(d.target.value)),children:[1,2,3,5,10,20,50,100].map(d=>e.jsxs(wa,{value:d,children:["Mostrar ",d]},d))}),Z>0&&e.jsxs(w,{display:"flex",alignItems:"center",gap:.5,sx:{flexGrow:1,justifyContent:"center"},children:[e.jsx(Ee,{onClick:()=>pe(1),disabled:C<=1,size:"small",color:"primary",children:e.jsx(po,{fontSize:"small"})}),e.jsx(Ee,{onClick:()=>pe(C-1),disabled:C<=1,size:"small",color:"primary",children:e.jsx(ua,{fontSize:"small"})}),ue.map(d=>e.jsx(ge,{onClick:()=>pe(d),variant:C===d?"contained":"text",size:"small",sx:{minWidth:"32px",height:"32px"},children:d},d)),e.jsx(Ee,{onClick:()=>pe(C+1),disabled:C>=Z,size:"small",color:"primary",children:e.jsx(ga,{fontSize:"small"})}),e.jsx(Ee,{onClick:()=>pe(Z),disabled:C>=Z,size:"small",color:"primary",children:e.jsx(uo,{fontSize:"small"})})]}),S&&k.length>0&&e.jsxs(s,{variant:"subtitle2",sx:{mr:2},children:[k.length," seleccionados"]}),(y||R)&&e.jsxs(w,{display:"flex",alignItems:"center",gap:1,children:[y&&e.jsx(ge,{variant:"text",color:"primary",onClick:()=>go({data:o,columns:M,fileName:E,exportColumns:v,setSnackbarOpen:V,setSnackbarMessage:_,setSnackbarSeverity:B}),size:"small",startIcon:e.jsx(ra,{}),children:j}),R&&e.jsx(ge,{variant:"text",color:"primary",onClick:()=>ho({data:o,columns:M,fileName:D,exportColumns:A,setSnackbarOpen:V,setSnackbarMessage:_,setSnackbarSeverity:B}),size:"small",startIcon:e.jsx(ra,{}),children:z})]})]}),e.jsx(Ia,{open:ae,autoHideDuration:3e3,onClose:O,anchorOrigin:{vertical:"bottom",horizontal:"center"},children:e.jsx(yo,{onClose:O,severity:ce,sx:{width:"100%"},children:oe})})]})}U.__docgenInfo={description:"",methods:[],displayName:"Table",props:{data:{required:!0,tsType:{name:"Array",elements:[{name:"T"}],raw:"T[]"},description:""},children:{required:!0,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},currentPage:{required:!1,tsType:{name:"number"},description:""},pageSize:{required:!1,tsType:{name:"number"},description:""},totalPages:{required:!1,tsType:{name:"number"},description:""},previousPage:{required:!1,tsType:{name:"number"},description:""},nextPage:{required:!1,tsType:{name:"number"},description:""},pageSizeSelectorValue:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"10",computed:!1}},onPageChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(newPage: number) => void",signature:{arguments:[{type:{name:"number"},name:"newPage"}],return:{name:"void"}}},description:""},onPageSizeChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(newSize: number) => void",signature:{arguments:[{type:{name:"number"},name:"newSize"}],return:{name:"void"}}},description:""},visiblePageNumbers:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"5",computed:!1}},enableCSVExport:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},csvExportFileName:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'data.csv'",computed:!1}},csvExportButtonText:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'Exportar CSV'",computed:!1}},csvExportColumns:{required:!1,tsType:{name:"Array",elements:[{name:"string"}],raw:"string[]"},description:""},enableExcelExport:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},excelExportFileName:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'data.xlsx'",computed:!1}},excelExportButtonText:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'Exportar Excel'",computed:!1}},excelExportColumns:{required:!1,tsType:{name:"Array",elements:[{name:"string"}],raw:"string[]"},description:""},enableRowSelection:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},rowIdentifier:{required:!1,tsType:{name:"T"},description:""},onSelectionChange:{required:!1,tsType:{name:"signature",type:"function",raw:"(selectedItems: T[]) => void",signature:{arguments:[{type:{name:"Array",elements:[{name:"T"}],raw:"T[]"},name:"selectedItems"}],return:{name:"void"}}},description:""},showPageSizeSelector:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},emptyTitle:{required:!1,tsType:{name:"string"},description:"",defaultValue:{value:"'No hay datos disponibles'",computed:!1}},emptyMessage:{required:!1,tsType:{name:"string"},description:""},emptyImageSrc:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:"",defaultValue:{value:`<Box mb={2}>
+  <img src={EmptyImage} alt="No data" style={{ maxWidth: '150px', opacity: 0.6 }} />
+</Box>`,computed:!1}}}};function i(o){return null}i.displayName="Column";const ne=[{id:1,nombre:"Juan Pérez",email:"juan@example.com",avatar:"https://placehold.co/50x50/F0F8FF/333333?text=JP",edad:25,activo:!0,rol:"admin",fechaRegistro:"2023-01-15",puntuacion:4.5},{id:2,nombre:"Ana García",email:"ana@example.com",avatar:"https://placehold.co/50x50/FFF0F5/333333?text=AG",edad:30,activo:!1,rol:"usuario",fechaRegistro:"2023-02-20",puntuacion:3.8},{id:3,nombre:"Carlos López",email:"carlos@example.com",avatar:"https://placehold.co/50x50/F5FFFA/333333?text=CL",edad:28,activo:!0,rol:"moderador",fechaRegistro:"2023-03-10",puntuacion:4.2},{id:4,nombre:"María Rodríguez",email:"maria@example.com",avatar:"https://placehold.co/50x50/F8F8FF/333333?text=MR",edad:35,activo:!0,rol:"usuario",fechaRegistro:"2023-04-05",puntuacion:4.9},{id:5,nombre:"Luis Martínez",email:"luis@example.com",avatar:"https://placehold.co/50x50/E6E6FA/333333?text=LM",edad:22,activo:!1,rol:"usuario",fechaRegistro:"2023-05-12",puntuacion:3.2}],ca=[{id:1,nombre:"iPhone 15",precio:999,categoria:"Electrónicos",stock:15,imagen:"https://placehold.co/60x60/ADD8E6/000000?text=I15",enOferta:!0,rating:4.8},{id:2,nombre:"Samsung Galaxy S24",precio:899,categoria:"Electrónicos",stock:8,imagen:"https://placehold.co/60x60/90EE90/000000?text=S24",enOferta:!1,rating:4.6},{id:3,nombre:"MacBook Pro",precio:1999,categoria:"Computadoras",stock:3,imagen:"https://placehold.co/60x60/DDA0DD/000000?text=MBP",enOferta:!0,rating:4.9},{id:4,nombre:"Dell XPS 13",precio:1299,categoria:"Computadoras",stock:0,imagen:"https://placehold.co/60x60/FFB6C1/000000?text=DX13",enOferta:!1,rating:4.4}],da=[{id:1,nombre:"Roberto",apellido:"Silva",departamento:"Desarrollo",salario:75e3,fechaIngreso:"2022-01-15",activo:!0,avatar:"https://placehold.co/50x50/B0E0E6/000000?text=RS"},{id:2,nombre:"Sofía",apellido:"Herrera",departamento:"Diseño",salario:65e3,fechaIngreso:"2022-03-20",activo:!0,avatar:"https://placehold.co/50x50/F5DEB3/000000?text=SH"},{id:3,nombre:"Diego",apellido:"Morales",departamento:"Marketing",salario:55e3,fechaIngreso:"2021-11-10",activo:!1,avatar:"https://placehold.co/50x50/D8BFD8/000000?text=DM"}],fo=`
+        <Table data={data} visiblePageNumbers={5} pageSizeSelectorValue={1} pageSize={1}>
+      <Column name="Nombre" field="nombre">
+        {({ nombre }) => <Typography variant="body2">{nombre}</Typography>}
+      </Column>
+      <Column name="Email" field="email">
+        {({ email }) => <Typography variant="body2" color="text.secondary">{email}</Typography>}
+      </Column>
+      <Column name="Edad" field="edad">
+        {({ edad }) => <Typography variant="body2">{edad} años</Typography>}
+      </Column>
+    </Table>
+`,bo=`
+          <Table data={data}>
+            <Column name="Usuario" field={['avatar', 'nombre']}>
+              {({ avatar, nombre }) => (
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                  <Avatar src={avatar} alt={nombre} sx={{ width: 40, height: 40 }} />
+                  <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
+                </Box>
+              )}
+            </Column>
+            <Column name="Estado" field="activo">
+              {({ activo }) => (
+                <Chip
+                  label={activo ? 'Activo' : 'Inactivo'}
+                  color={activo ? 'success' : 'default'}
+                  size="small"
+                />
+              )}
+            </Column>
+            <Column name="Rol" field="rol">
+              {({ rol }) => (
+                <Chip
+                  label={rol!.charAt(0).toUpperCase() + rol!.slice(1)}
+                  color={rol === 'admin' ? 'primary' : rol === 'moderador' ? 'secondary' : 'default'}
+                  variant="outlined"
+                  size="small"
+                />
+              )}
+            </Column>
+            <Column name="Puntuación" field="puntuacion">
+              {({ puntuacion }) => (
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <Rating value={puntuacion} max={5} precision={0.1} size="small" readOnly />
+                  <Typography variant="caption" color="text.secondary">
+                    {puntuacion}
+                  </Typography>
+                </Box>
+              )}
+            </Column>
+          </Table>
+        `,vo=`
+          const [currentPage, setCurrentPage] = useState(1);
+          const [pageSize, setPageSize] = useState(2);
+          const totalItems = usuarios.length;
+          const totalPages = Math.ceil(totalItems / pageSize);
+
+          const startIndex = (currentPage - 1) * pageSize;
+          const currentData = usuarios.slice(startIndex, startIndex + pageSize);
+
+          const previousPageNum = currentPage > 1 ? currentPage - 1 : 1;
+          const nextPageNum = currentPage < totalPages ? currentPage + 1 : totalPages;
+
+          return (
+            <Table
+              data={currentData} // Pasa solo los datos de la página actual
+              currentPage={currentPage}
+              pageSize={pageSize}
+              totalPages={totalPages}
+              previousPage={previousPageNum}
+              nextPage={nextPageNum}
+              onPageChange={setCurrentPage}
+              onPageSizeChange={setPageSize}
+            >
+              <Column name="Nombre" field="nombre">
+                {({ nombre }) => <Typography variant="body2" fontWeight="medium">{nombre}</Typography>}
+              </Column>
+              <Column name="Email" field="email">
+                {({ email }) => <Typography variant="body2" color="text.secondary">{email}</Typography>}
+              </Column>
+              <Column name="Estado" field="activo">
+                {({ activo }) => (
+                  <Chip
+                    label={activo ? 'Activo' : 'Inactivo'}
+                    color={activo ? 'success' : 'default'}
+                    size="small"
+                  />
+                )}
+              </Column>
+              <Column name="Fecha de Registro" field="fechaRegistro">
+                {({ fechaRegistro }) => (
+                  <Typography variant="body2">
+                    {new Date(fechaRegistro!).toLocaleDateString('es-ES')}
+                  </Typography>
+                )}
+              </Column>
+            </Table>
+          );
+        `,Co=`
+          <Table data={data} pageSizeSelectorValue={pageSizeSelectorValue}>
+          <Column name="Producto" field={['imagen', 'nombre']}>
+            {({ imagen, nombre }) => (
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                <Box
+                  component="img"
+                  src={imagen}
+                  alt={nombre}
+                  sx={{ width: 50, height: 50, borderRadius: 1, objectFit: 'cover' }}
+                />
+                <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
+              </Box>
+            )}
+          </Column>
+          <Column name="Precio" field={['precio', 'enOferta']}>
+            {({ precio, enOferta }) => (
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Typography
+                  variant="body2"
+                  color={enOferta ? 'error.main' : 'text.primary'}
+                  fontWeight={enOferta ? 'bold' : 'normal'}
+                >
+                  \${precio!.toLocaleString()}
+                </Typography>
+                {enOferta && (
+                  <Chip label="OFERTA" color="error" size="small" />
+                )}
+              </Box>
+            )}
+          </Column>
+          <Column name="Stock" field="stock">
+            {({ stock }) => (
+              <Chip
+                label={stock! > 0 ? \`\${stock} unidades\` : 'Sin stock'}
+                color={stock! > 5 ? 'success' : stock! > 0 ? 'warning' : 'error'}
+                size="small"
+              />
+            )}
+          </Column>
+          <Column name="Categoría" field="categoria">
+            {({ categoria }) => (
+              <Typography variant="body2">{categoria}</Typography>
+            )}
+          </Column>
+          <Column name="Rating" field="rating">
+            {({ rating }) => (
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Rating value={rating} max={5} precision={0.1} size="small" readOnly />
+                <Typography variant="caption">({rating})</Typography>
+              </Box>
+            )}
+          </Column>
+        </Table>
+        `,So=`
+          <Table data={data} pageSizeSelectorValue={pageSizeSelectorValue}>
+            <Column name="Empleado" field={['avatar', 'nombre', 'apellido']}>
+              {({ avatar, nombre, apellido }) => (
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                  <Avatar src={avatar} sx={{ width: 40, height: 40 }}>
+                    {avatar ? '' : \`\${nombre!.charAt(0)}\${apellido!.charAt(0)}\`}
+                  </Avatar>
+                  <Typography variant="body2" fontWeight="medium">
+                    {nombre} {apellido}
+                  </Typography>
+                </Box>
+              )}
+            </Column>
+            <Column name="Departamento" field="departamento">
+              {({ departamento }) => (
+                <Chip
+                  label={departamento}
+                  color="info"
+                  variant="filled"
+                  size="small"
+                />
+              )}
+            </Column>
+            <Column name="Salario" field="salario">
+              {({ salario }) => (
+                <Typography variant="body2" fontWeight="bold" color="success.dark">
+                  \${salario!.toLocaleString('es-ES')}
+                </Typography>
+              )}
+            </Column>
+            <Column name="Estado" field={['activo', 'fechaIngreso']}>
+              {({ activo, fechaIngreso }) => (
+                <Box>
+                  <Chip
+                    label={activo ? 'Contratado' : 'Inactivo'}
+                    color={activo ? 'success' : 'error'}
+                    size="small"
+                  />
+                  <Typography variant="caption" display="block" color="text.secondary" sx={{ mt: 0.5 }}>
+                    Desde: {new Date(fechaIngreso!).toLocaleDateString('es-ES')}
+                  </Typography>
+                </Box>
+              )}
+            </Column>
+          </Table>
+        `,To=`
+          <Table data={data}>
+            <Column name="Nombre" field="nombre">
+              {({ nombre }) => <Typography variant="body2">{nombre}</Typography>}
+            </Column>
+            <Column name="Email" field="email">
+              {({ email }) => <Typography variant="body2">{email}</Typography>}
+            </Column>
+            <Column name="Estado" field="activo">
+              {({ activo }) => <Chip label={activo ? 'Activo' : 'Inactivo'} size="small" />}
+            </Column>
+          </Table>
+        `,Eo=`
+          <Table data={data}>
+            <Column name="Usuario" field={['avatar', 'nombre', 'email']}>
+              {({ avatar, nombre, email }) => (
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                  <Avatar src={avatar} alt={nombre} />
+                  <Box>
+                    <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
+                    <Typography variant="caption" color="text.secondary">{email}</Typography>
+                  </Box>
+                </Box>
+              )}
+            </Column>
+            <Column<Usuario> name="Información" field={[]}>
+              {(user) => (
+                <>
+                  <Typography variant="body2">{user.edad} años</Typography>
+                  <Box sx={{ display: 'flex', gap: 1, mt: 0.5 }}>
+                    <Chip label={user.rol} size="small" color="primary" variant="outlined" />
+                    <Chip
+                      label={user.activo ? 'Activo' : 'Inactivo'}
+                      size="small"
+                      color={user.activo ? 'success' : 'default'}
+                    />
+                  </Box>
+                </>
+              )}
+            </Column>
+          </Table>
+        `,jo=`
+          <Table data={data}>
+            <Column name="Producto" field={['imagen', 'nombre']}>
+              {({ imagen, nombre }) => (
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                  <Box
+                    component="img"
+                    src={imagen}
+                    alt={nombre}
+                    sx={{ width: 50, height: 50, borderRadius: 1, objectFit: 'cover' }}
+                  />
+                  <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
+                </Box>
+              )}
+            </Column>
+            <Column name="Precio" field={['precio', 'enOferta']}>
+              {({ precio, enOferta }) => (
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <Typography
+                    variant="body2"
+                    color={enOferta ? 'error.main' : 'text.primary'}
+                    fontWeight={enOferta ? 'bold' : 'normal'}
+                  >
+                    \${precio!.toLocaleString()}
+                  </Typography>
+                  {enOferta && (
+                    <Chip label="OFERTA" color="error" size="small" />
+                  )}
+                </Box>
+              )}
+            </Column>
+            <Column name="Stock" field="stock">
+              {({ stock }) => (
+                <Chip
+                  label={stock! > 0 ? \`\${stock} unidades\` : 'Sin stock'}
+                  color={stock!> 5 ? 'success' : stock! > 0 ? 'warning' : 'error'}
+                  size="small"
+                  sx={{ backgroundColor: stock === 0 ? 'rgba(255, 0, 0, 0.1)' : undefined }}
+                />
+              )}
+            </Column>
+            <Column name="Rating" field="rating">
+              {({ rating }) => (
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                  <Rating value={rating} max={5} precision={0.1} size="small" readOnly />
+                  <Typography variant="caption">({rating})</Typography>
+                </Box>
+              )}
+            </Column>
+          </Table>
+        `,wo=`
+<Table data={data}>
+<Column name="Empleado" field={['nombre', 'apellido', 'avatar']}>
+  {({ nombre, apellido, avatar }) => (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+      <Avatar src={avatar} sx={{ width: 40, height: 40 }}>
+        {avatar ? '' : \`\${nombre!.charAt(0)}\${apellido!.charAt(0)}\`}
+      </Avatar>
+      <Typography variant="body2" fontWeight="medium">
+        {nombre} {apellido}
+      </Typography>
+    </Box>
+  )}
+</Column>
+<Column name="Departamento" field="departamento">
+  {({ departamento }) => (
+    <Chip
+      label={departamento}
+      color="info"
+      variant="filled"
+      size="small"
+    />
+  )}
+</Column>
+<Column name="Salario" field="salario">
+  {({ salario }) => (
+    <Typography variant="body2" fontWeight="bold" color="success.dark">
+      \${salario!.toLocaleString('es-ES')}
+    </Typography>
+  )}
+</Column>
+<Column name="Estado de Contratación" field={['activo', 'fechaIngreso']}>
+  {({ activo, fechaIngreso }) => (
+    <Box>
+      <Chip
+        label={activo ? 'Contratado' : 'Inactivo'}
+        color={activo ? 'success' : 'error'}
+        size="small"
+      />
+      <Typography variant="caption" display="block" color="text.secondary" sx={{ mt: 0.5 }}>
+        Desde: {new Date(fechaIngreso!).toLocaleDateString('es-ES')}
+      </Typography>
+    </Box>
+  )}
+</Column>
+</Table>
+`,Io=`
+          <Table data={data}>
+            <Column name="Nombre" field="nombre">
+              {({ nombre }) => <Typography variant="body2">{nombre}</Typography>}
+            </Column>
+            <Column name="Email" field="email">
+              {({ email }) => <Typography variant="body2" color="text.secondary">{email}</Typography>}
+            </Column>
+            <Column name="Acciones" field="id"> 
+              {({ id }) => (
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="small"
+                  onClick={() => alert('ID del usuario: '+id )} // Log al hacer clic
+                >
+                  Ver Detalles ({id})
+                </Button>
+              )}
+            </Column>
+          </Table>
+        `,ko=`
+          <Table<Usuario>
+      data={usuarios}
+      enableExport={enableExport}
+      exportFileName={exportFileName}
+      exportButtonText={exportButtonText}
+      exportColumns={exportColumns}
+    >
+      <Column<Usuario> name="ID" field="id">
+        {(row) => <Typography>{row.id}</Typography>}
+      </Column>
+      <Column<Usuario> name="Nombre" field="nombre">
+        {(row) => <Typography>{row.nombre}</Typography>}
+      </Column>
+      <Column<Usuario> name="Email" field="email">
+        {({ email }) => <Link href={\`mailto:\${email}\`}>{email}</Link>}
+      </Column>
+      <Column<Usuario> name="Edad" field="edad">
+        {(row) => <Typography>{row.edad}</Typography>}
+      </Column>
+      <Column<Usuario> name="Rol" field="rol">
+        {({ rol }) => <Chip label={rol} size="small" />}
+      </Column>
+      <Column<Usuario> name="Acciones" field="id">
+        {({ id }) => (
+          <Button variant="outlined" size="small" onClick={() => alert(\`Ver detalles de usuario \${id}\`)}>
+            Ver
+          </Button>
+        )}
+      </Column>
+    </Table>
+        `,Po=`
+
+  const [selectedItems, setSelectedItems] = useState<UserData[]>([]);
+
+    const handleSelectionChange = (items: UserData[]) => {
+      setSelectedItems(items);
+      args.onSelectionChange?.(items);
+    };
+
+    const handleBulkDelete = () => {
+      if (selectedItems.length > 0) {
+        alert(\`Eliminando \${selectedItems.length} usuarios: \${selectedItems.map(item => item.nombre).join(', ')}\`);
+        setSelectedItems([]);
+      } else {
+        alert('No hay elementos seleccionados para eliminar.');
+      }
+    };
+
+    const handleBulkUpdateCity = () => {
+      if (selectedItems.length > 0) {
+        const newCity = prompt('Ingresa la nueva ciudad para los seleccionados:');
+        if (newCity) {
+          alert(\`Actualizando ciudad de \${selectedItems.length} usuarios a \${newCity}\`);
+          setSelectedItems([]);
+        }
+      } else {
+        alert('No hay elementos seleccionados para actualizar.');
+      }
+    };
+
+    return (
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Tabla con Selección de Filas
+        </Typography>
+        {selectedItems.length > 0 && (
+          <Box sx={{ mb: 2, display: 'flex', gap: 1 }}>
+            <Button variant="contained" color="error" onClick={handleBulkDelete}>
+              Eliminar ({selectedItems.length})
+            </Button>
+            <Button variant="contained" color="primary" onClick={handleBulkUpdateCity}>
+              Actualizar Ciudad ({selectedItems.length})
+            </Button>
+            <Typography variant="body2" sx={{ alignSelf: 'center', ml: 2 }}>
+              Elementos seleccionados: {selectedItems.length}
+            </Typography>
+          </Box>
+        )}
+        <Table<UserData>
+          {...args}
+          data={sampleData} // Usamos sampleData para esta historia
+          enableRowSelection={true}
+          rowIdentifier="id" // Es crucial que coincida con una clave única en tus datos
+          onSelectionChange={handleSelectionChange}
+          pageSizeSelectorValue={5}
+        >
+          <Column<UserData>
+            name="ID"
+            field="id"
+            children={(row) => <Typography>{row.id}</Typography>}
+          />
+          <Column<UserData>
+            name="Nombre"
+            field="name"
+            children={(row) => <Typography>{row.name}</Typography>}
+          />
+          <Column<UserData>
+            name="Email"
+            field="email"
+            children={(row) => <Typography>{row.email}</Typography>}
+          />
+          <Column<UserData>
+            name="Ciudad"
+            field="city"
+            children={(row) => <Typography>{row.city}</Typography>}
+          />
+        </Table>
+      </Box>
+    );
+
+`,zo=`
+  const [selectedItems, setSelectedItems] = useState<UserData[]>([]);
+
+    const handleSelectionChange = (items: UserData[]) => {
+      setSelectedItems(items);
+      args.onSelectionChange?.(items);
+    };
+
+    return (
+      <Box>
+        <Typography variant="h6" gutterBottom>
+          Tabla con Exportación y Selección de Filas
+        </Typography>
+        {selectedItems.length > 0 && (
+          <Box sx={{ mb: 2 }}>
+            <Typography variant="body2">
+              Elementos seleccionados: {selectedItems.length}
+            </Typography>
+          </Box>
+        )}
+        <Table<UserData>
+          {...args}
+          data={sampleData} // Usamos sampleData para esta historia
+          enableRowSelection={true}
+          rowIdentifier="id"
+          onSelectionChange={handleSelectionChange}
+          pageSizeSelectorValue={5}
+          enableCSVExport={true}
+          csvExportFileName="users_data_with_selection"
+          enableExcelExport={true}
+          excelExportFileName="users_data_with_selection"
+        >
+          <Column<UserData>
+            name="ID"
+            field="id"
+            children={(row) => <Typography>{row.id}</Typography>}
+          />
+          <Column<UserData>
+            name="Nombre"
+            field="name"
+            children={(row) => <Typography>{row.name}</Typography>}
+          />
+          <Column<UserData>
+            name="Email"
+            field="email"
+            children={(row) => <Typography>{row.email}</Typography>}
+          />
+          <Column<UserData>
+            name="Ciudad"
+            field="city"
+            children={(row) => <Typography>{row.city}</Typography>}
+          />
+        </Table>
+      </Box>
+    );
+`,ma=[{id:1,name:"Alice Smith",age:28,city:"New York",email:"alice@example.com"},{id:2,name:"Bob Johnson",age:34,city:"London",email:"bob@example.com"},{id:3,name:"Charlie Brown",age:22,city:"Paris",email:"charlie@example.com"},{id:4,name:"Diana Prince",age:40,city:"Themyscira",email:"diana@example.com"},{id:5,name:"Eve Adams",age:19,city:"Berlin",email:"eve@example.com"},{id:6,name:"Frank White",age:55,city:"Tokyo",email:"frank@example.com"},{id:7,name:"Grace Lee",age:31,city:"Seoul",email:"grace@example.com"},{id:8,name:"Henry Ford",age:60,city:"Detroit",email:"henry@example.com"},{id:9,name:"Ivy Green",age:25,city:"Rome",email:"ivy@example.com"},{id:10,name:"Jack Black",age:45,city:"Los Angeles",email:"jack@example.com"},{id:11,name:"Karen Millen",age:33,city:"Madrid",email:"karen@example.com"},{id:12,name:"Leo Messi",age:37,city:"Miami",email:"leo@example.com"}],Et={title:"Components/Table",component:U,parameters:{layout:"padded",docs:{description:{component:"Componente de tabla flexible y tipado que permite definir columnas de forma declarativa con paginación interna o externa."}}},tags:["autodocs"],argTypes:{data:{control:"object",description:"Array de objetos de datos a mostrar en la tabla. Las columnas heredarán el tipo definido del arreglo de datos."},children:{control:!1,description:"Componentes `Column` que definen la estructura de las columnas. Las columnas definen requieren las propiedades: `name` que es el nombre que se verá en la columna y `field` que son los atributos a los cuales se podran acceder desde el scope interno de la columna. Si el atributo `field` tiene un arreglo vacio, se utilizará el objeto completo (todos los campos del objeto)."},currentPage:{control:"number",description:"Número de página actual (para paginación controlada).",if:{arg:"onPageChange",exists:!0}},pageSize:{control:"number",description:"Número de elementos por página (para paginación controlada).",if:{arg:"onPageChange",exists:!0}},totalPages:{control:"number",description:"Número total de páginas (para paginación controlada).",if:{arg:"onPageChange",exists:!0}},previousPage:{control:"number",description:"Página anterior (para paginación controlada).",if:{arg:"onPageChange",exists:!0}},nextPage:{control:"number",description:"Página siguiente (para paginación controlada).",if:{arg:"onPageChange",exists:!0}},pageSizeSelectorValue:{control:"number",description:"Valor por defecto para el selector de tamaño de página cuando la paginación es interna."},onPageChange:{action:"page changed",description:"Callback para manejar el cambio de página (activa paginación controlada)."},onPageSizeChange:{action:"page size changed",description:"Callback para manejar el cambio de tamaño de página (activa paginación controlada).",if:{arg:"onPageChange",exists:!0}},enableCSVExport:{control:"boolean",description:"Habilita o deshabilita la funcionalidad de exportación a CSV.",defaultValue:!1},csvExportFileName:{control:"text",description:"Nombre del archivo CSV al exportar.",defaultValue:"data.csv",if:{arg:"enableCSVExport",eq:!0}},enableExcelExport:{control:"boolean",description:"Habilita o deshabilita la funcionalidad de exportación a Excel.",defaultValue:!1},excelExportFileName:{control:"text",description:"Nombre del archivo Excel al exportar.",defaultValue:"data.xlsx",if:{arg:"enableExcelExport",eq:!0}},csvExportButtonText:{control:"text",description:"Texto del botón de exportar.",defaultValue:"Exportar CSV",if:{arg:"enableCSVExport",eq:!0}},excelExportButtonText:{control:"text",description:"Texto del botón de exportar.",defaultValue:"Exportar Excel",if:{arg:"enableExcelExport",eq:!0}},csvExportColumns:{control:"text",description:"Array de nombres de columnas a exportar. Si no se especifica, se exportan todas.",if:{arg:"enableCSVExport",eq:!0}},enableRowSelection:{control:"boolean",description:"Habilita o deshabilita la selección de filas con checkboxes.",defaultValue:!1},rowIdentifier:{control:"text",description:'La clave única en el objeto de datos utilizada como identificador para las filas seleccionables (ej. "id").',if:{arg:"enableRowSelection",eq:!0}},onSelectionChange:{action:"selectionChanged",description:"Callback que se dispara cuando cambia la selección de filas. Devuelve un array con los objetos seleccionados.",if:{arg:"enableRowSelection",eq:!0}}}},je={args:{data:ne},render:({data:o})=>e.jsxs(U,{data:o,pageSizeSelectorValue:1,pageSize:1,children:[e.jsx(i,{name:"Nombre",field:"nombre",children:({nombre:a})=>e.jsx(s,{children:a})}),e.jsx(i,{name:"Email",field:"email",children:({email:a})=>e.jsx(s,{color:"text.secondary",children:a})}),e.jsx(i,{width:"10%",name:"Edad",field:"edad",children:({edad:a})=>e.jsxs(s,{children:[a," años"]})})]}),parameters:{docs:{description:{story:"Tabla básica con datos simples y columnas de texto. La paginación es interna por defecto."},source:{code:fo.trim()}}}},we={args:{data:ne.slice(0,4)},render:({data:o})=>e.jsxs(U,{data:o,children:[e.jsx(i,{name:"Usuario",field:["avatar","nombre"],children:({avatar:a,nombre:t})=>e.jsxs(w,{sx:{display:"flex",alignItems:"center",gap:2},children:[e.jsx(We,{src:a,alt:t,sx:{width:40,height:40}}),e.jsx(s,{variant:"body2",fontWeight:"medium",children:t})]})}),e.jsx(i,{name:"Estado",field:"activo",children:({activo:a})=>e.jsx($,{label:a?"Activo":"Inactivo",color:a?"success":"default",size:"small"})}),e.jsx(i,{name:"Rol",field:"rol",children:({rol:a})=>e.jsx($,{label:a.charAt(0).toUpperCase()+a.slice(1),color:a==="admin"?"primary":a==="moderador"?"secondary":"default",variant:"outlined",size:"small"})}),e.jsx(i,{name:"Puntuación",field:"puntuacion",children:({puntuacion:a})=>e.jsxs(w,{sx:{display:"flex",alignItems:"center",gap:1},children:[e.jsx(Qe,{value:a,max:5,precision:.1,size:"small",readOnly:!0}),e.jsx(s,{variant:"caption",color:"text.secondary",children:a})]})})]}),parameters:{docs:{description:{story:"Tabla con componentes complejos como avatars, chips y ratings. La paginación es interna por defecto."},source:{code:bo.trim()}}}},Ie={render:()=>{const[o,a]=T.useState(1),[t,r]=T.useState(2),l=ne.length,p=Math.ceil(l/t),n=(o-1)*t,u=ne.slice(n,n+t),f=o>1?o-1:1,h=o<p?o+1:p;return e.jsxs(U,{data:u,currentPage:o,pageSize:t,totalPages:p,previousPage:f,nextPage:h,onPageChange:a,onPageSizeChange:r,children:[e.jsx(i,{name:"Nombre",field:"nombre",children:({nombre:x})=>e.jsx(s,{variant:"body2",fontWeight:"medium",children:x})}),e.jsx(i,{name:"Email",field:"email",children:({email:x})=>e.jsx(s,{variant:"body2",color:"text.secondary",children:x})}),e.jsx(i,{name:"Estado",field:"activo",children:({activo:x})=>e.jsx($,{label:x?"Activo":"Inactivo",color:x?"success":"default",size:"small"})}),e.jsx(i,{name:"Fecha de Registro",field:"fechaRegistro",children:({fechaRegistro:x})=>e.jsx(s,{variant:"body2",children:new Date(x).toLocaleDateString("es-ES")})})]})},parameters:{docs:{description:{story:"Tabla con paginación controlada externamente. El componente `Table` no gestiona el estado de la paginación, solo la UI."},source:{code:vo.trim()}}}},ke={args:{data:ca,pageSizeSelectorValue:1},render:({data:o,pageSizeSelectorValue:a})=>e.jsxs(U,{data:o,pageSizeSelectorValue:a,children:[e.jsx(i,{name:"Producto",field:["imagen","nombre"],children:({imagen:t,nombre:r})=>e.jsxs(w,{sx:{display:"flex",alignItems:"center",gap:2},children:[e.jsx(w,{component:"img",src:t,alt:r,sx:{width:50,height:50,borderRadius:1,objectFit:"cover"}}),e.jsx(s,{variant:"body2",fontWeight:"medium",children:r})]})}),e.jsx(i,{name:"Precio",field:["precio","enOferta"],children:({precio:t,enOferta:r})=>e.jsxs(w,{sx:{display:"flex",alignItems:"center",gap:1},children:[e.jsxs(s,{variant:"body2",color:r?"error.main":"text.primary",fontWeight:r?"bold":"normal",children:["$",t.toLocaleString()]}),r&&e.jsx($,{label:"OFERTA",color:"error",size:"small"})]})}),e.jsx(i,{name:"Stock",field:"stock",children:({stock:t})=>e.jsx($,{label:t>0?`${t} unidades`:"Sin stock",color:t>5?"success":t>0?"warning":"error",size:"small"})}),e.jsx(i,{name:"Categoría",field:"categoria",children:({categoria:t})=>e.jsx(s,{variant:"body2",children:t})}),e.jsx(i,{name:"Rating",field:"rating",children:({rating:t})=>e.jsxs(w,{sx:{display:"flex",alignItems:"center",gap:1},children:[e.jsx(Qe,{value:t,max:5,precision:.1,size:"small",readOnly:!0}),e.jsxs(s,{variant:"caption",children:["(",t,")"]})]})})]}),parameters:{docs:{description:{story:"Tabla de productos con imágenes, precios, stock y calificaciones. Paginación interna."},source:{code:Co.trim()}}}},Pe={args:{data:da,pageSizeSelectorValue:1},render:({data:o,pageSizeSelectorValue:a})=>e.jsxs(U,{data:o,pageSizeSelectorValue:a,children:[e.jsx(i,{name:"Empleado",field:["avatar","nombre","apellido"],children:({avatar:t,nombre:r,apellido:l})=>e.jsxs(w,{sx:{display:"flex",alignItems:"center",gap:2},children:[e.jsx(We,{src:t,sx:{width:40,height:40},children:t?"":`${r.charAt(0)}${l.charAt(0)}`}),e.jsxs(s,{variant:"body2",fontWeight:"medium",children:[r," ",l]})]})}),e.jsx(i,{name:"Departamento",field:"departamento",children:({departamento:t})=>e.jsx($,{label:t,color:"info",variant:"filled",size:"small"})}),e.jsx(i,{name:"Salario",field:"salario",children:({salario:t})=>e.jsxs(s,{variant:"body2",fontWeight:"bold",color:"success.dark",children:["$",t.toLocaleString("es-ES")]})}),e.jsx(i,{name:"Estado",field:["activo","fechaIngreso"],children:({activo:t,fechaIngreso:r})=>e.jsxs(w,{children:[e.jsx($,{label:t?"Contratado":"Inactivo",color:t?"success":"error",size:"small"}),e.jsxs(s,{variant:"caption",display:"block",color:"text.secondary",sx:{mt:.5},children:["Desde: ",new Date(r).toLocaleDateString("es-ES")]})]})})]}),parameters:{docs:{description:{story:"Tabla de empleados con múltiples campos combinados en una sola columna. Paginación interna."},source:{code:So.trim()}}}},ze={args:{data:[]},render:({data:o})=>e.jsxs(U,{data:o,emptyTitle:"No se encontraron registros",emptyMessage:"Intente ajustar sus filtros o agregar nuevos datos.",children:[e.jsx(i,{name:"Nombre",field:"nombre",children:({nombre:a})=>e.jsx(s,{variant:"body2",children:a})}),e.jsx(i,{name:"Email",field:"email",children:({email:a})=>e.jsx(s,{variant:"body2",children:a})}),e.jsx(i,{name:"Estado",field:"activo",children:({activo:a})=>e.jsx($,{label:a?"Activo":"Inactivo",size:"small"})})]}),parameters:{docs:{description:{story:"Tabla sin datos para mostrar el estado vacío y el mensaje correspondiente."},source:{code:To.trim()}}}},Be={args:{data:[ne[0]]},render:({data:o})=>e.jsxs(U,{data:o,children:[e.jsx(i,{name:"Usuario",field:["avatar","nombre","email"],children:({avatar:a,nombre:t,email:r})=>e.jsxs(w,{sx:{display:"flex",alignItems:"center",gap:2},children:[e.jsx(We,{src:a,alt:t}),e.jsxs(w,{children:[e.jsx(s,{variant:"body2",fontWeight:"medium",children:t}),e.jsx(s,{variant:"caption",color:"text.secondary",children:r})]})]})}),e.jsx(i,{name:"Información",field:[],children:a=>e.jsxs(e.Fragment,{children:[e.jsxs(s,{variant:"body2",children:[a.edad," años"]}),e.jsxs(w,{sx:{display:"flex",gap:1,mt:.5},children:[e.jsx($,{label:a.rol,size:"small",color:"primary",variant:"outlined"}),e.jsx($,{label:a.activo?"Activo":"Inactivo",size:"small",color:a.activo?"success":"default"})]})]})})]}),parameters:{docs:{description:{story:"Tabla con una sola fila de datos."},source:{code:Eo.trim()}}}},Re={args:{data:ca},render:({data:o})=>e.jsxs(U,{data:o,children:[e.jsx(i,{name:"Producto",field:["imagen","nombre"],children:({imagen:a,nombre:t})=>e.jsxs(w,{sx:{display:"flex",alignItems:"center",gap:2},children:[e.jsx(w,{component:"img",src:a,alt:t,sx:{width:50,height:50,borderRadius:1,objectFit:"cover"}}),e.jsx(s,{variant:"body2",fontWeight:"medium",children:t})]})}),e.jsx(i,{name:"Precio",field:["precio","enOferta"],children:({precio:a,enOferta:t})=>e.jsxs(w,{sx:{display:"flex",alignItems:"center",gap:1},children:[e.jsxs(s,{variant:"body2",color:t?"error.main":"text.primary",fontWeight:t?"bold":"normal",children:["$",a.toLocaleString()]}),t&&e.jsx($,{label:"OFERTA",color:"error",size:"small"})]})}),e.jsx(i,{name:"Stock",field:"stock",children:({stock:a})=>e.jsx($,{label:a>0?`${a} unidades`:"Sin stock",color:a>5?"success":a>0?"warning":"error",size:"small",sx:{backgroundColor:a===0?"rgba(255, 0, 0, 0.1)":void 0}})}),e.jsx(i,{name:"Rating",field:"rating",children:({rating:a})=>e.jsxs(w,{sx:{display:"flex",alignItems:"center",gap:1},children:[e.jsx(Qe,{value:a,max:5,precision:.1,size:"small",readOnly:!0}),e.jsxs(s,{variant:"caption",children:["(",a,")"]})]})})]}),parameters:{docs:{description:{story:"Muestra la tabla de productos resaltando visualmente los productos sin stock. Paginación interna."},source:{code:jo.trim()}}}},De={args:{data:da},render:({data:o})=>e.jsxs(U,{data:o,children:[e.jsx(i,{name:"Empleado",field:["nombre","apellido","avatar"],children:({nombre:a,apellido:t,avatar:r})=>e.jsxs(w,{sx:{display:"flex",alignItems:"center",gap:2},children:[e.jsx(We,{src:r,sx:{width:40,height:40},children:r?"":`${a.charAt(0)}${t.charAt(0)}`}),e.jsxs(s,{variant:"body2",fontWeight:"medium",children:[a," ",t]})]})}),e.jsx(i,{name:"Departamento",field:"departamento",children:({departamento:a})=>e.jsx($,{label:a,color:"info",variant:"filled",size:"small"})}),e.jsx(i,{name:"Salario",field:"salario",children:({salario:a})=>e.jsxs(s,{variant:"body2",fontWeight:"bold",color:"success.dark",children:["$",a.toLocaleString("es-ES")]})}),e.jsx(i,{name:"Estado de Contratación",field:["activo","fechaIngreso"],children:({activo:a,fechaIngreso:t})=>e.jsxs(w,{children:[e.jsx($,{label:a?"Contratado":"Inactivo",color:a?"success":"error",size:"small"}),e.jsxs(s,{variant:"caption",display:"block",color:"text.secondary",sx:{mt:.5},children:["Desde: ",new Date(t).toLocaleDateString("es-ES")]})]})})]}),parameters:{docs:{description:{story:"Muestra una tabla de empleados con un resumen detallado de su estado de contratación y fecha de ingreso. Paginación interna."},source:{code:wo.trim()}}}},Fe={args:{data:ne.slice(0,3)},render:({data:o})=>e.jsxs(U,{data:o,children:[e.jsx(i,{name:"Nombre",field:"nombre",children:({nombre:a})=>e.jsx(s,{variant:"body2",children:a})}),e.jsx(i,{name:"Email",field:"email",children:({email:a})=>e.jsx(s,{variant:"body2",color:"text.secondary",children:a})}),e.jsx(i,{name:"Acciones",field:"id",children:({id:a})=>e.jsxs(ge,{variant:"contained",color:"primary",size:"small",onClick:()=>alert("ID del usuario: "+a),children:["Ver Detalles (",a,")"]})})]}),parameters:{docs:{description:{story:"Ejemplo de tabla con una columna de acciones que, al hacer clic en un botón, registra el ID del elemento en la consola."},source:{code:Io.trim()}}}},Ae={args:{data:ne,enableCSVExport:!0,enableExcelExport:!0,csvExportFileName:"usuarios_data",csvExportButtonText:".csv",excelExportFileName:"usuarios_data",excelExportButtonText:".xlsx",csvExportColumns:["ID","Nombre","Email","Edad"],excelExportColumns:["ID","Nombre","Email","Edad"]},render:({data:o,enableCSVExport:a,enableExcelExport:t,csvExportFileName:r,csvExportButtonText:l,excelExportFileName:p,excelExportButtonText:n,csvExportColumns:u,excelExportColumns:f})=>e.jsxs(U,{data:ne,enableCSVExport:a,enableExcelExport:t,csvExportFileName:r,csvExportButtonText:l,excelExportFileName:p,excelExportButtonText:n,csvExportColumns:u,excelExportColumns:f,children:[e.jsx(i,{name:"ID",field:"id",children:h=>e.jsx(s,{children:h.id})}),e.jsx(i,{name:"Nombre",field:"nombre",children:h=>e.jsx(s,{children:h.nombre})}),e.jsx(i,{name:"Email",field:"email",children:({email:h})=>e.jsx(Ya,{href:`mailto:${h}`,children:h})}),e.jsx(i,{name:"Edad",field:"edad",children:h=>e.jsx(s,{children:h.edad})}),e.jsx(i,{name:"Rol",field:"rol",children:({rol:h})=>e.jsx($,{label:h,size:"small"})}),e.jsx(i,{name:"Acciones",field:"id",children:({id:h})=>e.jsx(ge,{variant:"outlined",size:"small",onClick:()=>alert(`Ver detalles de usuario ${h}`),children:"Ver"})})]}),parameters:{docs:{description:{story:"Tabla con la funcionalidad de exportar sus datos a un archivo CSV. Puedes especificar qué columnas incluir en la exportación y el nombre del archivo."},source:{code:ko.trim()}}}},Ve={render:o=>{const[a,t]=T.useState([]),r=n=>{t(n),o.onSelectionChange?.(n)},l=()=>{a.length>0?(alert(`Eliminando ${a.length} usuarios: ${a.map(n=>n.name).join(", ")}`),t([])):alert("No hay elementos seleccionados para eliminar.")},p=()=>{if(a.length>0){const n=prompt("Ingresa la nueva ciudad para los seleccionados:");n&&(alert(`Actualizando ciudad de ${a.length} usuarios a ${n}`),t([]))}else alert("No hay elementos seleccionados para actualizar.")};return e.jsxs(w,{children:[e.jsx(s,{variant:"h6",gutterBottom:!0,children:"Tabla con Selección de Filas"}),a.length>0&&e.jsxs(w,{sx:{mb:2,display:"flex",gap:1},children:[e.jsxs(ge,{variant:"contained",color:"error",onClick:l,children:["Eliminar (",a.length,")"]}),e.jsxs(ge,{variant:"contained",color:"primary",onClick:p,children:["Actualizar Ciudad (",a.length,")"]}),e.jsxs(s,{variant:"body2",sx:{alignSelf:"center",ml:2},children:["Elementos seleccionados: ",a.length]})]}),e.jsxs(U,{...o,data:ma,enableRowSelection:!0,rowIdentifier:"id",onSelectionChange:r,pageSizeSelectorValue:5,children:[e.jsx(i,{name:"ID",field:"id",children:n=>e.jsx(s,{children:n.id})}),e.jsx(i,{name:"Nombre",field:"name",children:n=>e.jsx(s,{children:n.name})}),e.jsx(i,{name:"Email",field:"email",children:n=>e.jsx(s,{children:n.email})}),e.jsx(i,{name:"Ciudad",field:"city",children:n=>e.jsx(s,{children:n.city})})]})]})},args:{},parameters:{docs:{description:{story:"Tabla con la funcionalidad de selección de filas. Puedes seleccionar una o muchas filas y realizar acciones en masa."},source:{code:Po.trim()}}}},Ne={render:o=>{const[a,t]=T.useState([]),r=l=>{t(l),o.onSelectionChange?.(l)};return e.jsxs(w,{children:[e.jsx(s,{variant:"h6",gutterBottom:!0,children:"Tabla con Exportación y Selección de Filas"}),a.length>0&&e.jsx(w,{sx:{mb:2},children:e.jsxs(s,{variant:"body2",children:["Elementos seleccionados: ",a.length]})}),e.jsxs(U,{...o,data:ma,enableRowSelection:!0,rowIdentifier:"id",onSelectionChange:r,pageSizeSelectorValue:5,enableCSVExport:!0,csvExportFileName:"users_data_with_selection",enableExcelExport:!0,excelExportFileName:"users_data_with_selection",children:[e.jsx(i,{name:"ID",field:"id",children:l=>e.jsx(s,{children:l.id})}),e.jsx(i,{name:"Nombre",field:"name",children:l=>e.jsx(s,{children:l.name})}),e.jsx(i,{name:"Email",field:"email",children:l=>e.jsx(s,{children:l.email})}),e.jsx(i,{name:"Ciudad",field:"city",children:l=>e.jsx(s,{children:l.city})})]})]})},args:{},parameters:{docs:{description:{story:"Tabla con la funcionalidad de exportar sus datos a un archivo CSV y Excel. Puedes especificar qué columnas incluir en la exportación y el nombre del archivo."},source:{code:zo.trim()}}}};je.parameters={...je.parameters,docs:{...je.parameters?.docs,source:{originalSource:`{
+  args: {
+    data: usuarios
+  },
+  render: ({
+    data
+  }) => <Table data={data} pageSizeSelectorValue={1} pageSize={1}>
+      <Column name="Nombre" field="nombre">
+        {({
+        nombre
+      }) => <Typography>{nombre}</Typography>}
+      </Column>
+      <Column name="Email" field="email">
+        {({
+        email
+      }) => <Typography color="text.secondary">{email}</Typography>}
+      </Column>
+      <Column width='10%' name="Edad" field="edad">
+        {({
+        edad
+      }) => <Typography>{edad} años</Typography>}
+      </Column>
+    </Table>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla básica con datos simples y columnas de texto. La paginación es interna por defecto.'
+      },
+      source: {
+        code: BasicTableCode.trim()
+      }
+    }
+  }
+}`,...je.parameters?.docs?.source}}};we.parameters={...we.parameters,docs:{...we.parameters?.docs,source:{originalSource:`{
+  args: {
+    data: usuarios.slice(0, 4)
+  },
+  render: ({
+    data
+  }) => <Table data={data}>
+      <Column name="Usuario" field={['avatar', 'nombre']}>
+        {({
+        avatar,
+        nombre
+      }) => <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2
+      }}>
+            <Avatar src={avatar} alt={nombre} sx={{
+          width: 40,
+          height: 40
+        }} />
+            <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
+          </Box>}
+      </Column>
+      <Column name="Estado" field="activo">
+        {({
+        activo
+      }) => <Chip label={activo ? 'Activo' : 'Inactivo'} color={activo ? 'success' : 'default'} size="small" />}
+      </Column>
+      <Column name="Rol" field="rol">
+        {({
+        rol
+      }) => <Chip label={rol!.charAt(0).toUpperCase() + rol!.slice(1)} color={rol === 'admin' ? 'primary' : rol === 'moderador' ? 'secondary' : 'default'} variant="outlined" size="small" />}
+      </Column>
+      <Column name="Puntuación" field="puntuacion">
+        {({
+        puntuacion
+      }) => <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1
+      }}>
+            <Rating value={puntuacion} max={5} precision={0.1} size="small" readOnly />
+            <Typography variant="caption" color="text.secondary">
+              {puntuacion}
+            </Typography>
+          </Box>}
+      </Column>
+    </Table>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla con componentes complejos como avatars, chips y ratings. La paginación es interna por defecto.'
+      },
+      source: {
+        code: ComplexComponentsCode.trim()
+      }
+    }
+  }
+}`,...we.parameters?.docs?.source}}};Ie.parameters={...Ie.parameters,docs:{...Ie.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageSize, setPageSize] = useState(2);
+    const totalItems = usuarios.length;
+    const totalPages = Math.ceil(totalItems / pageSize);
+    const startIndex = (currentPage - 1) * pageSize;
+    const currentData = usuarios.slice(startIndex, startIndex + pageSize);
+    const previousPageNum = currentPage > 1 ? currentPage - 1 : 1;
+    const nextPageNum = currentPage < totalPages ? currentPage + 1 : totalPages;
+    return <Table data={currentData} currentPage={currentPage} pageSize={pageSize} totalPages={totalPages} previousPage={previousPageNum} nextPage={nextPageNum} onPageChange={setCurrentPage} onPageSizeChange={setPageSize}>
+        <Column name="Nombre" field="nombre">
+          {({
+          nombre
+        }) => <Typography variant="body2" fontWeight="medium">{nombre}</Typography>}
+        </Column>
+        <Column name="Email" field="email">
+          {({
+          email
+        }) => <Typography variant="body2" color="text.secondary">{email}</Typography>}
+        </Column>
+        <Column name="Estado" field="activo">
+          {({
+          activo
+        }) => <Chip label={activo ? 'Activo' : 'Inactivo'} color={activo ? 'success' : 'default'} size="small" />}
+        </Column>
+        <Column name="Fecha de Registro" field="fechaRegistro">
+          {({
+          fechaRegistro
+        }) => <Typography variant="body2">
+              {new Date(fechaRegistro!).toLocaleDateString('es-ES')}
+            </Typography>}
+        </Column>
+      </Table>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla con paginación controlada externamente. El componente \`Table\` no gestiona el estado de la paginación, solo la UI.'
+      },
+      source: {
+        code: WithExternalPaginationControlCode.trim()
+      }
+    }
+  }
+}`,...Ie.parameters?.docs?.source}}};ke.parameters={...ke.parameters,docs:{...ke.parameters?.docs,source:{originalSource:`{
+  args: {
+    data: productos,
+    pageSizeSelectorValue: 1
+  },
+  render: ({
+    data,
+    pageSizeSelectorValue
+  }) => <Table data={data} pageSizeSelectorValue={pageSizeSelectorValue}>
+      <Column name="Producto" field={['imagen', 'nombre']}>
+        {({
+        imagen,
+        nombre
+      }) => <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2
+      }}>
+            <Box component="img" src={imagen} alt={nombre} sx={{
+          width: 50,
+          height: 50,
+          borderRadius: 1,
+          objectFit: 'cover'
+        }} />
+            <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
+          </Box>}
+      </Column>
+      <Column name="Precio" field={['precio', 'enOferta']}>
+        {({
+        precio,
+        enOferta
+      }) => <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1
+      }}>
+            <Typography variant="body2" color={enOferta ? 'error.main' : 'text.primary'} fontWeight={enOferta ? 'bold' : 'normal'}>
+              \${precio!.toLocaleString()}
+            </Typography>
+            {enOferta && <Chip label="OFERTA" color="error" size="small" />}
+          </Box>}
+      </Column>
+      <Column name="Stock" field="stock">
+        {({
+        stock
+      }) => <Chip label={stock! > 0 ? \`\${stock} unidades\` : 'Sin stock'} color={stock! > 5 ? 'success' : stock! > 0 ? 'warning' : 'error'} size="small" />}
+      </Column>
+      <Column name="Categoría" field="categoria">
+        {({
+        categoria
+      }) => <Typography variant="body2">{categoria}</Typography>}
+      </Column>
+      <Column name="Rating" field="rating">
+        {({
+        rating
+      }) => <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1
+      }}>
+            <Rating value={rating} max={5} precision={0.1} size="small" readOnly />
+            <Typography variant="caption">({rating})</Typography>
+          </Box>}
+      </Column>
+    </Table>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla de productos con imágenes, precios, stock y calificaciones. Paginación interna.'
+      },
+      source: {
+        code: ProductTableCode.trim()
+      }
+    }
+  }
+}`,...ke.parameters?.docs?.source}}};Pe.parameters={...Pe.parameters,docs:{...Pe.parameters?.docs,source:{originalSource:`{
+  args: {
+    data: empleados,
+    pageSizeSelectorValue: 1
+  },
+  render: ({
+    data,
+    pageSizeSelectorValue
+  }) => <Table data={data} pageSizeSelectorValue={pageSizeSelectorValue}>
+      <Column name="Empleado" field={['avatar', 'nombre', 'apellido']}>
+        {({
+        avatar,
+        nombre,
+        apellido
+      }) => <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2
+      }}>
+            <Avatar src={avatar} sx={{
+          width: 40,
+          height: 40
+        }}>
+              {avatar ? '' : \`\${nombre!.charAt(0)}\${apellido!.charAt(0)}\`}
+            </Avatar>
+            <Typography variant="body2" fontWeight="medium">
+              {nombre} {apellido}
+            </Typography>
+          </Box>}
+      </Column>
+      <Column name="Departamento" field="departamento">
+        {({
+        departamento
+      }) => <Chip label={departamento} color="info" variant="filled" size="small" />}
+      </Column>
+      <Column name="Salario" field="salario">
+        {({
+        salario
+      }) => <Typography variant="body2" fontWeight="bold" color="success.dark">
+            \${salario!.toLocaleString('es-ES')}
+          </Typography>}
+      </Column>
+      <Column name="Estado" field={['activo', 'fechaIngreso']}>
+        {({
+        activo,
+        fechaIngreso
+      }) => <Box>
+            <Chip label={activo ? 'Contratado' : 'Inactivo'} color={activo ? 'success' : 'error'} size="small" />
+            <Typography variant="caption" display="block" color="text.secondary" sx={{
+          mt: 0.5
+        }}>
+              Desde: {new Date(fechaIngreso!).toLocaleDateString('es-ES')}
+            </Typography>
+          </Box>}
+      </Column>
+    </Table>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla de empleados con múltiples campos combinados en una sola columna. Paginación interna.'
+      },
+      source: {
+        code: EmployeeTableCode.trim()
+      }
+    }
+  }
+}`,...Pe.parameters?.docs?.source}}};ze.parameters={...ze.parameters,docs:{...ze.parameters?.docs,source:{originalSource:`{
+  args: {
+    data: []
+  },
+  render: ({
+    data
+  }) => <Table data={data} emptyTitle="No se encontraron registros" emptyMessage="Intente ajustar sus filtros o agregar nuevos datos."
+  // emptyImageSrc={<img src="path/to/empty/image.png" alt="No data" />}
+  >
+      <Column name="Nombre" field="nombre">
+        {({
+        nombre
+      }) => <Typography variant="body2">{nombre}</Typography>}
+      </Column>
+      <Column name="Email" field="email">
+        {({
+        email
+      }) => <Typography variant="body2">{email}</Typography>}
+      </Column>
+      <Column name="Estado" field="activo">
+        {({
+        activo
+      }) => <Chip label={activo ? 'Activo' : 'Inactivo'} size="small" />}
+      </Column>
+    </Table>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla sin datos para mostrar el estado vacío y el mensaje correspondiente.'
+      },
+      source: {
+        code: EmptyTableCode.trim()
+      }
+    }
+  }
+}`,...ze.parameters?.docs?.source}}};Be.parameters={...Be.parameters,docs:{...Be.parameters?.docs,source:{originalSource:`{
+  args: {
+    data: [usuarios[0]]
+  },
+  render: ({
+    data
+  }) => <Table data={data}>
+      <Column name="Usuario" field={['avatar', 'nombre', 'email']}>
+        {({
+        avatar,
+        nombre,
+        email
+      }) => <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2
+      }}>
+            <Avatar src={avatar} alt={nombre} />
+            <Box>
+              <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
+              <Typography variant="caption" color="text.secondary">{email}</Typography>
+            </Box>
+          </Box>}
+      </Column>
+      <Column<Usuario> name="Información" field={[]}>
+        {user => <>
+            <Typography variant="body2">{user.edad} años</Typography>
+            <Box sx={{
+          display: 'flex',
+          gap: 1,
+          mt: 0.5
+        }}>
+              <Chip label={user.rol} size="small" color="primary" variant="outlined" />
+              <Chip label={user.activo ? 'Activo' : 'Inactivo'} size="small" color={user.activo ? 'success' : 'default'} />
+            </Box>
+          </>}
+      </Column>
+    </Table>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla con una sola fila de datos.'
+      },
+      source: {
+        code: SingleRowCode.trim()
+      }
+    }
+  }
+}`,...Be.parameters?.docs?.source}}};Re.parameters={...Re.parameters,docs:{...Re.parameters?.docs,source:{originalSource:`{
+  args: {
+    data: productos
+  },
+  render: ({
+    data
+  }) => <Table data={data}>
+      <Column name="Producto" field={['imagen', 'nombre']}>
+        {({
+        imagen,
+        nombre
+      }) => <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2
+      }}>
+            <Box component="img" src={imagen} alt={nombre} sx={{
+          width: 50,
+          height: 50,
+          borderRadius: 1,
+          objectFit: 'cover'
+        }} />
+            <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
+          </Box>}
+      </Column>
+      <Column name="Precio" field={['precio', 'enOferta']}>
+        {({
+        precio,
+        enOferta
+      }) => <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1
+      }}>
+            <Typography variant="body2" color={enOferta ? 'error.main' : 'text.primary'} fontWeight={enOferta ? 'bold' : 'normal'}>
+              \${precio!.toLocaleString()}
+            </Typography>
+            {enOferta && <Chip label="OFERTA" color="error" size="small" />}
+          </Box>}
+      </Column>
+      <Column name="Stock" field="stock">
+        {({
+        stock
+      }) => <Chip label={stock! > 0 ? \`\${stock} unidades\` : 'Sin stock'} color={stock! > 5 ? 'success' : stock! > 0 ? 'warning' : 'error'} size="small" sx={{
+        backgroundColor: stock === 0 ? 'rgba(255, 0, 0, 0.1)' : undefined
+      }} />}
+      </Column>
+      <Column name="Rating" field="rating">
+        {({
+        rating
+      }) => <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1
+      }}>
+            <Rating value={rating} max={5} precision={0.1} size="small" readOnly />
+            <Typography variant="caption">({rating})</Typography>
+          </Box>}
+      </Column>
+    </Table>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Muestra la tabla de productos resaltando visualmente los productos sin stock. Paginación interna.'
+      },
+      source: {
+        code: ProductTableWithZeroStockHighlightedCode.trim()
+      }
+    }
+  }
+}`,...Re.parameters?.docs?.source}}};De.parameters={...De.parameters,docs:{...De.parameters?.docs,source:{originalSource:`{
+  args: {
+    data: empleados
+  },
+  render: ({
+    data
+  }) => <Table data={data}>
+      <Column name="Empleado" field={['nombre', 'apellido', 'avatar']}>
+        {({
+        nombre,
+        apellido,
+        avatar
+      }) => <Box sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2
+      }}>
+            <Avatar src={avatar} sx={{
+          width: 40,
+          height: 40
+        }}>
+              {avatar ? '' : \`\${nombre!.charAt(0)}\${apellido!.charAt(0)}\`}
+            </Avatar>
+            <Typography variant="body2" fontWeight="medium">
+              {nombre} {apellido}
+            </Typography>
+          </Box>}
+      </Column>
+      <Column name="Departamento" field="departamento">
+        {({
+        departamento
+      }) => <Chip label={departamento} color="info" variant="filled" size="small" />}
+      </Column>
+      <Column name="Salario" field="salario">
+        {({
+        salario
+      }) => <Typography variant="body2" fontWeight="bold" color="success.dark">
+            \${salario!.toLocaleString('es-ES')}
+          </Typography>}
+      </Column>
+      <Column name="Estado de Contratación" field={['activo', 'fechaIngreso']}>
+        {({
+        activo,
+        fechaIngreso
+      }) => <Box>
+            <Chip label={activo ? 'Contratado' : 'Inactivo'} color={activo ? 'success' : 'error'} size="small" />
+            <Typography variant="caption" display="block" color="text.secondary" sx={{
+          mt: 0.5
+        }}>
+              Desde: {new Date(fechaIngreso!).toLocaleDateString('es-ES')}
+            </Typography>
+          </Box>}
+      </Column>
+    </Table>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Muestra una tabla de empleados con un resumen detallado de su estado de contratación y fecha de ingreso. Paginación interna.'
+      },
+      source: {
+        code: EmployeeDetailedStatusCode.trim()
+      }
+    }
+  }
+}`,...De.parameters?.docs?.source}}};Fe.parameters={...Fe.parameters,docs:{...Fe.parameters?.docs,source:{originalSource:`{
+  args: {
+    data: usuarios.slice(0, 3)
+  },
+  render: ({
+    data
+  }) => <Table data={data}>
+      <Column name="Nombre" field="nombre">
+        {({
+        nombre
+      }) => <Typography variant="body2">{nombre}</Typography>}
+      </Column>
+      <Column name="Email" field="email">
+        {({
+        email
+      }) => <Typography variant="body2" color="text.secondary">{email}</Typography>}
+      </Column>
+      <Column name="Acciones" field="id">
+        {({
+        id
+      }) => <Button variant="contained" color="primary" size="small" onClick={() => alert('ID del usuario: ' + id)}>
+            Ver Detalles ({id})
+          </Button>}
+      </Column>
+    </Table>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Ejemplo de tabla con una columna de acciones que, al hacer clic en un botón, registra el ID del elemento en la consola.'
+      },
+      source: {
+        code: ActionsColumnCode.trim()
+      }
+    }
+  }
+}`,...Fe.parameters?.docs?.source}}};Ae.parameters={...Ae.parameters,docs:{...Ae.parameters?.docs,source:{originalSource:`{
+  args: {
+    data: usuarios,
+    enableCSVExport: true,
+    enableExcelExport: true,
+    csvExportFileName: 'usuarios_data',
+    csvExportButtonText: '.csv',
+    excelExportFileName: 'usuarios_data',
+    excelExportButtonText: '.xlsx',
+    csvExportColumns: ['ID', 'Nombre', 'Email', 'Edad'],
+    excelExportColumns: ['ID', 'Nombre', 'Email', 'Edad']
+  },
+  render: ({
+    data,
+    enableCSVExport,
+    enableExcelExport,
+    csvExportFileName,
+    csvExportButtonText,
+    excelExportFileName,
+    excelExportButtonText,
+    csvExportColumns,
+    excelExportColumns
+  }) => <Table<Usuario> data={usuarios} enableCSVExport={enableCSVExport} enableExcelExport={enableExcelExport} csvExportFileName={csvExportFileName} csvExportButtonText={csvExportButtonText} excelExportFileName={excelExportFileName} excelExportButtonText={excelExportButtonText} csvExportColumns={csvExportColumns} excelExportColumns={excelExportColumns}>
+      <Column<Usuario> name="ID" field="id">
+        {row => <Typography>{row.id}</Typography>}
+      </Column>
+      <Column<Usuario> name="Nombre" field="nombre">
+        {row => <Typography>{row.nombre}</Typography>}
+      </Column>
+      <Column<Usuario> name="Email" field="email">
+        {({
+        email
+      }) => <Link href={\`mailto:\${email}\`}>{email}</Link>}
+      </Column>
+      <Column<Usuario> name="Edad" field="edad">
+        {row => <Typography>{row.edad}</Typography>}
+      </Column>
+      <Column<Usuario> name="Rol" field="rol">
+        {({
+        rol
+      }) => <Chip label={rol} size="small" />}
+      </Column>
+      <Column<Usuario> name="Acciones" field="id">
+        {({
+        id
+      }) => <Button variant="outlined" size="small" onClick={() => alert(\`Ver detalles de usuario \${id}\`)}>
+            Ver
+          </Button>}
+      </Column>
+    </Table>,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla con la funcionalidad de exportar sus datos a un archivo CSV. Puedes especificar qué columnas incluir en la exportación y el nombre del archivo.'
+      },
+      source: {
+        code: TableWithExportCode.trim()
+      }
+    }
+  }
+}`,...Ae.parameters?.docs?.source}}};Ve.parameters={...Ve.parameters,docs:{...Ve.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [selectedItems, setSelectedItems] = useState<UserData[]>([]);
+    const handleSelectionChange = (items: UserData[]) => {
+      setSelectedItems(items);
+      args.onSelectionChange?.(items);
+    };
+    const handleBulkDelete = () => {
+      if (selectedItems.length > 0) {
+        alert(\`Eliminando \${selectedItems.length} usuarios: \${selectedItems.map(item => item.name).join(', ')}\`);
+        setSelectedItems([]);
+      } else {
+        alert('No hay elementos seleccionados para eliminar.');
+      }
+    };
+    const handleBulkUpdateCity = () => {
+      if (selectedItems.length > 0) {
+        const newCity = prompt('Ingresa la nueva ciudad para los seleccionados:');
+        if (newCity) {
+          alert(\`Actualizando ciudad de \${selectedItems.length} usuarios a \${newCity}\`);
+          setSelectedItems([]);
+        }
+      } else {
+        alert('No hay elementos seleccionados para actualizar.');
+      }
+    };
+    return <Box>
+        <Typography variant="h6" gutterBottom>
+          Tabla con Selección de Filas
+        </Typography>
+        {selectedItems.length > 0 && <Box sx={{
+        mb: 2,
+        display: 'flex',
+        gap: 1
+      }}>
+            <Button variant="contained" color="error" onClick={handleBulkDelete}>
+              Eliminar ({selectedItems.length})
+            </Button>
+            <Button variant="contained" color="primary" onClick={handleBulkUpdateCity}>
+              Actualizar Ciudad ({selectedItems.length})
+            </Button>
+            <Typography variant="body2" sx={{
+          alignSelf: 'center',
+          ml: 2
+        }}>
+              Elementos seleccionados: {selectedItems.length}
+            </Typography>
+          </Box>}
+        <Table<UserData> {...args} data={sampleData} // Usamos sampleData para esta historia
+      enableRowSelection={true} rowIdentifier="id" // Es crucial que coincida con una clave única en tus datos
+      onSelectionChange={handleSelectionChange} pageSizeSelectorValue={5}>
+          <Column<UserData> name="ID" field="id" children={row => <Typography>{row.id}</Typography>} />
+          <Column<UserData> name="Nombre" field="name" children={row => <Typography>{row.name}</Typography>} />
+          <Column<UserData> name="Email" field="email" children={row => <Typography>{row.email}</Typography>} />
+          <Column<UserData> name="Ciudad" field="city" children={row => <Typography>{row.city}</Typography>} />
+        </Table>
+      </Box>;
+  },
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla con la funcionalidad de selección de filas. Puedes seleccionar una o muchas filas y realizar acciones en masa.'
+      },
+      source: {
+        code: WithRowSelectionCode.trim()
+      }
+    }
+  }
+}`,...Ve.parameters?.docs?.source}}};Ne.parameters={...Ne.parameters,docs:{...Ne.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [selectedItems, setSelectedItems] = useState<UserData[]>([]);
+    const handleSelectionChange = (items: UserData[]) => {
+      setSelectedItems(items);
+      args.onSelectionChange?.(items);
+    };
+    return <Box>
+        <Typography variant="h6" gutterBottom>
+          Tabla con Exportación y Selección de Filas
+        </Typography>
+        {selectedItems.length > 0 && <Box sx={{
+        mb: 2
+      }}>
+            <Typography variant="body2">
+              Elementos seleccionados: {selectedItems.length}
+            </Typography>
+          </Box>}
+        <Table<UserData> {...args} data={sampleData} // Usamos sampleData para esta historia
+      enableRowSelection={true} rowIdentifier="id" onSelectionChange={handleSelectionChange} pageSizeSelectorValue={5} enableCSVExport={true} csvExportFileName="users_data_with_selection" enableExcelExport={true} excelExportFileName="users_data_with_selection">
+          <Column<UserData> name="ID" field="id" children={row => <Typography>{row.id}</Typography>} />
+          <Column<UserData> name="Nombre" field="name" children={row => <Typography>{row.name}</Typography>} />
+          <Column<UserData> name="Email" field="email" children={row => <Typography>{row.email}</Typography>} />
+          <Column<UserData> name="Ciudad" field="city" children={row => <Typography>{row.city}</Typography>} />
+        </Table>
+      </Box>;
+  },
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Tabla con la funcionalidad de exportar sus datos a un archivo CSV y Excel. Puedes especificar qué columnas incluir en la exportación y el nombre del archivo.'
+      },
+      source: {
+        code: WithExportAndSelectionCode.trim()
+      }
+    }
+  }
+}`,...Ne.parameters?.docs?.source}}};const jt=["BasicTable","ComplexComponents","WithExternalPaginationControl","ProductTable","EmployeeTable","EmptyTable","SingleRow","ProductTableWithZeroStockHighlighted","EmployeeDetailedStatus","ActionsColumn","TableWithExport","WithRowSelection","WithExportAndSelection"];export{Fe as ActionsColumn,je as BasicTable,we as ComplexComponents,De as EmployeeDetailedStatus,Pe as EmployeeTable,ze as EmptyTable,ke as ProductTable,Re as ProductTableWithZeroStockHighlighted,Be as SingleRow,Ae as TableWithExport,Ne as WithExportAndSelection,Ie as WithExternalPaginationControl,Ve as WithRowSelection,jt as __namedExportsOrder,Et as default};