@soyfri/shared-library 2.0.0-beta.2 → 2.0.0-beta.21

package/storybook-static/assets/DateTimePicker.stories-B6gdzKq5.js

@@ -0,0 +1,555 @@
+import{j as s}from"./jsx-runtime-D_zvdyIk.js";import{r as m,R as Et}from"./iframe-BAJnc_4n.js";import{U as ct,V as me,B as _t,u as se,W as zt,X as dt,Y as Ut,h as Se,Z as qe,A as Ge,_ as ut,$ as pt,a0 as ye,f as lt,i as qt,a1 as xt,a2 as ke,a3 as Pe,P as Gt,a4 as Jt,g as Kt,a5 as Qt,s as bt,a6 as gt,v as Xe,t as kt,a7 as Pt,a8 as Je,a9 as Dt,C as Xt,E as Zt,F as ea,G as ta,aa,H as oa,ab as ia,ac as sa,ad as ra,ae as na,af as ca,ag as Be,N as St,ah as it,O as t,Q as Mt,ai as la,aj as Tt,ak as ma,al as da,D as ua,S as pa,T as Da,d as K}from"./PickersModalDialog-Tjnr_cu5.js";import{b as Ta,F as Re,C as ha}from"./formField.sx-DMCmZIAa.js";import{r as fa}from"./resolvePreset-CN2aOJJr.js";import{u as ya}from"./useTheme-BmOJK7ra.js";import{_ as D,a as Me,g as Ce,s as G,c as Te,d as ve,f as Ze,e as Ke}from"./DefaultPropsProvider-BGoQxtDa.js";import{_ as de,u as Qe,a as Ct}from"./useTimeout-DNjRaOWc.js";import{u as xa}from"./index-CIeucmOB.js";import{u as ue}from"./useThemeProps-U4yXiZ_5.js";import{T as ht,a as ba,t as ga}from"./Tabs-DLpDOu_n.js";import{P as ce,p as ka,a as Pa}from"./PickersToolbarButton-Tt185-si.js";import{P as vt,r as xe,u as Sa,a as Ma}from"./useMobilePicker-DK-c8xbD.js";import{D as wt}from"./Divider-BbCj9wT4.js";import{u as Ca,a as va}from"./useSlotProps-C0uMfuBt.js";import{u as Yt}from"./useForkRef-0ANIrxcF.js";import{M as jt}from"./MenuItem-iU6tAqJI.js";import{a as Ht}from"./Menu-ClzfjLc3.js";import{r as Ft}from"./useSlot-b6pXgp5_.js";import{B as Q}from"./Box-BnhEcfFm.js";import{T as q}from"./Typography-BgntX2Ep.js";import"./preload-helper-PPVm8Dsz.js";import"./Fade-Ll96CvH8.js";import"./getReactElementRef-BQ3ANZdy.js";import"./index-CY7j4a7o.js";import"./index-BF3FAXTk.js";import"./Grow-8y4FglGK.js";import"./Modal-3okp9H2i.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./Portal-Cj8XF9Lf.js";import"./Paper-SwQBhqI7.js";import"./Popper-CnCTYXxy.js";import"./useControlled-DsVh1a5j.js";import"./useId-b4fZxjOL.js";import"./Button-DBpqmVB_.js";import"./createSimplePaletteValueFilter-bm0fmN_7.js";import"./ButtonBase-qyaMEhe4.js";import"./emotion-react.browser.esm--g-C9cX9.js";import"./isFocusVisible-B8k4qzLc.js";import"./CircularProgress-DC7ZNWwl.js";import"./DialogContent-BeCDKgax.js";import"./ListItem-D3O0103N.js";import"./isMuiElement-CTZSFcY5.js";import"./Chip-C3vKPpzR.js";import"./createSvgIcon-D_Gca4vA.js";import"./TextField-22T-xHBm.js";import"./Select-DJh2biEb.js";import"./debounce-Be36O1Ab.js";import"./visuallyHidden-Dan1xhjv.js";import"./IconButton-9OYSTH58.js";import"./extendSxProp-CEpa30hT.js";import"./useThemeProps-DYtxXiUU.js";import"./listItemTextClasses-CC_rwJam.js";import"./mergeSlotProps-B0UBKBMe.js";const Bt=({adapter:e,value:o,timezone:r,props:a})=>{if(o===null)return null;const{minTime:i,maxTime:c,minutesStep:n,shouldDisableTime:l,disableIgnoringDatePartForTimeValidation:y=!1,disablePast:p,disableFuture:u}=a,x=e.date(void 0,r),T=ct(y,e);switch(!0){case!e.isValid(o):return"invalidDate";case!!(i&&T(i,o)):return"minTime";case!!(c&&T(o,c)):return"maxTime";case!!(u&&e.isAfter(o,x)):return"disableFuture";case!!(p&&e.isBefore(o,x)):return"disablePast";case!!(l&&l(o,"hours")):return"shouldDisableTime-hours";case!!(l&&l(o,"minutes")):return"shouldDisableTime-minutes";case!!(l&&l(o,"seconds")):return"shouldDisableTime-seconds";case!!(n&&e.getMinutes(o)%n!==0):return"minutesStep";default:return null}};Bt.valueManager=me;const et=({adapter:e,value:o,timezone:r,props:a})=>{const i=_t({adapter:e,value:o,timezone:r,props:a});return i!==null?i:Bt({adapter:e,value:o,timezone:r,props:a})};et.valueManager=me;function wa(e={}){const{enableAccessibleFieldDOMStructure:o=!0}=e;return m.useMemo(()=>({valueType:"date-time",validator:et,internal_valueManager:me,internal_fieldValueManager:Ut,internal_enableAccessibleFieldDOMStructure:o,internal_useApplyDefaultValuesToFieldInternalProps:ja,internal_useOpenPickerButtonAriaLabel:Ya}),[o])}function Ya(e){const o=se(),r=Se();return m.useMemo(()=>{const a=o.isValid(e)?o.format(e,"fullDate"):null;return r.openDatePickerDialogue(a)},[e,r,o])}function ja(e){const o=se(),r=Rt(e),a=m.useMemo(()=>e.ampm??o.is12HourCycleInCurrentLocale(),[e.ampm,o]);return m.useMemo(()=>D({},e,r,{format:e.format??(a?o.formats.keyboardDateTime12h:o.formats.keyboardDateTime24h)}),[e,r,a,o])}function Rt(e){const o=se(),r=zt();return m.useMemo(()=>({disablePast:e.disablePast??!1,disableFuture:e.disableFuture??!1,disableIgnoringDatePartForTimeValidation:!!e.minDateTime||!!e.maxDateTime||!!e.disableFuture||!!e.disablePast,minDate:dt(o,e.minDateTime??e.minDate,r.minDate),maxDate:dt(o,e.maxDateTime??e.maxDate,r.maxDate),minTime:e.minDateTime??e.minTime,maxTime:e.maxDateTime??e.maxTime}),[e.minDateTime,e.maxDateTime,e.minTime,e.maxTime,e.minDate,e.maxDate,e.disableFuture,e.disablePast,o,r])}const Ha=["views","format"],Vt=(e,o,r)=>{let{views:a,format:i}=o,c=de(o,Ha);if(i)return i;const n=[],l=[];if(a.forEach(u=>{qe(u)?l.push(u):Ge(u)&&n.push(u)}),l.length===0)return ut(e,D({views:n},c),!1);if(n.length===0)return pt(e,D({views:l},c));const y=pt(e,D({views:l},c));return`${ut(e,D({views:n},c),!1)} ${y}`},Fa=(e,o,r)=>r?o.filter(a=>!ye(a)||a==="hours"):e?[...o,"meridiem"]:o,Ba=(e,o)=>1440/((e.hours??1)*(e.minutes??5))<=o;function Ra({thresholdToRenderTimeInASingleColumn:e,ampm:o,timeSteps:r,views:a}){const i=e??24,c=D({hours:1,minutes:5,seconds:5},r),n=Ba(c,i);return{thresholdToRenderTimeInASingleColumn:i,timeSteps:c,shouldRenderTimeInASingleColumn:n,views:Fa(o,a,n)}}function Va(e){return Ce("MuiDateTimePickerToolbar",e)}const ot=Me("MuiDateTimePickerToolbar",["root","dateContainer","timeContainer","timeDigitsContainer","separator","timeLabelReverse","ampmSelection","ampmLandscape","ampmLabel"]),Ia=["ampm","ampmInClock","toolbarFormat","toolbarPlaceholder","toolbarTitle","className","classes"],Oa=(e,o)=>{const{pickerOrientation:r,toolbarDirection:a}=o;return ve({root:["root"],dateContainer:["dateContainer"],timeContainer:["timeContainer",a==="rtl"&&"timeLabelReverse"],timeDigitsContainer:["timeDigitsContainer",a==="rtl"&&"timeLabelReverse"],separator:["separator"],ampmSelection:["ampmSelection",r==="landscape"&&"ampmLandscape"],ampmLabel:["ampmLabel"]},Va,e)},Na=G(Gt,{name:"MuiDateTimePickerToolbar",slot:"Root",shouldForwardProp:e=>Ze(e)&&e!=="toolbarVariant"})(({theme:e})=>({paddingLeft:16,paddingRight:16,justifyContent:"space-around",position:"relative",variants:[{props:{toolbarVariant:"desktop"},style:{borderBottom:`1px solid ${(e.vars||e).palette.divider}`,[`& .${Jt.content} .${ka.root}[data-selected]`]:{color:(e.vars||e).palette.primary.main,fontWeight:e.typography.fontWeightBold}}},{props:{toolbarVariant:"desktop",pickerOrientation:"landscape"},style:{borderRight:`1px solid ${(e.vars||e).palette.divider}`}},{props:{toolbarVariant:"desktop",pickerOrientation:"portrait"},style:{paddingLeft:24,paddingRight:0}}]})),Aa=G("div",{name:"MuiDateTimePickerToolbar",slot:"DateContainer"})({display:"flex",flexDirection:"column",alignItems:"flex-start"}),La=G("div",{name:"MuiDateTimePickerToolbar",slot:"TimeContainer",shouldForwardProp:e=>Ze(e)&&e!=="toolbarVariant"})({display:"flex",flexDirection:"row",variants:[{props:{toolbarDirection:"rtl"},style:{flexDirection:"row-reverse"}},{props:{toolbarVariant:"desktop",pickerOrientation:"portrait"},style:{gap:9,marginRight:4,alignSelf:"flex-end"}},{props:({pickerOrientation:e,toolbarVariant:o})=>e==="landscape"&&o!=="desktop",style:{flexDirection:"column"}},{props:({pickerOrientation:e,toolbarVariant:o,toolbarDirection:r})=>e==="landscape"&&o!=="desktop"&&r==="rtl",style:{flexDirection:"column-reverse"}}]}),$a=G("div",{name:"MuiDateTimePickerToolbar",slot:"TimeDigitsContainer",shouldForwardProp:e=>Ze(e)&&e!=="toolbarVariant"})({display:"flex",variants:[{props:{toolbarDirection:"rtl"},style:{flexDirection:"row-reverse"}},{props:{toolbarVariant:"desktop"},style:{gap:1.5}}]}),ft=G(Pa,{name:"MuiDateTimePickerToolbar",slot:"Separator",shouldForwardProp:e=>Ze(e)&&e!=="toolbarVariant"})({margin:"0 4px 0 2px",cursor:"default",variants:[{props:{toolbarVariant:"desktop"},style:{margin:0}}]}),Wa=G("div",{name:"MuiDateTimePickerToolbar",slot:"AmPmSelection",overridesResolver:(e,o)=>[{[`.${ot.ampmLabel}`]:o.ampmLabel},{[`&.${ot.ampmLandscape}`]:o.ampmLandscape},o.ampmSelection]})({display:"flex",flexDirection:"column",marginRight:"auto",marginLeft:12,[`& .${ot.ampmLabel}`]:{fontSize:17},variants:[{props:{pickerOrientation:"landscape"},style:{margin:"4px 0 auto",flexDirection:"row",justifyContent:"space-around",width:"100%"}}]}),Ea=m.createContext(null);function _a(e){const o=ue({props:e,name:"MuiDateTimePickerToolbar"}),{ampm:r,ampmInClock:a,toolbarFormat:i,toolbarPlaceholder:c="––",toolbarTitle:n,className:l,classes:y}=o,p=de(o,Ia),{value:u,setValue:x,disabled:T,readOnly:b,variant:w,orientation:k,view:V,setView:A,views:H}=lt(),W=Se(),v=qt(),Y=Oa(y,v),j=se(),S=m.useContext(Ea),B=S?S.value:u,f=S?S.setValue:x,M=S?S.view:V,C=S?S.setView:A,{meridiemMode:F,handleMeridiemChange:I}=xt(B,r,oe=>f(oe,{changeImportance:"set"})),L=S?.forceDesktopVariant?"desktop":w,O=L==="desktop",X=!!(r&&!a),re=n??W.dateTimePickerToolbarTitle,pe=m.useMemo(()=>j.isValid(B)?i?j.formatByString(B,i):j.format(B,"shortDate"):c,[B,i,c,j]),$=(oe,ie)=>j.isValid(B)?j.format(B,oe):ie;return s.jsxs(Na,D({className:Te(Y.root,l),toolbarTitle:re,toolbarVariant:L},p,{ownerState:v,children:[s.jsxs(Aa,{className:Y.dateContainer,ownerState:v,children:[H.includes("year")&&s.jsx(ce,{tabIndex:-1,variant:"subtitle1",onClick:()=>C("year"),selected:M==="year",value:$("year","–")}),H.includes("day")&&s.jsx(ce,{tabIndex:-1,variant:O?"h5":"h4",onClick:()=>C("day"),selected:M==="day",value:pe})]}),s.jsxs(La,{className:Y.timeContainer,ownerState:v,toolbarVariant:L,children:[s.jsxs($a,{className:Y.timeDigitsContainer,ownerState:v,toolbarVariant:L,children:[H.includes("hours")&&s.jsxs(m.Fragment,{children:[s.jsx(ce,{variant:O?"h5":"h3",width:O&&k==="portrait"?ke:void 0,onClick:()=>C("hours"),selected:M==="hours",value:$(r?"hours12h":"hours24h","--")}),s.jsx(ft,{variant:O?"h5":"h3",value:":",className:Y.separator,ownerState:v,toolbarVariant:L}),s.jsx(ce,{variant:O?"h5":"h3",width:O&&k==="portrait"?ke:void 0,onClick:()=>C("minutes"),selected:M==="minutes"||!H.includes("minutes")&&M==="hours",value:$("minutes","--"),disabled:!H.includes("minutes")})]}),H.includes("seconds")&&s.jsxs(m.Fragment,{children:[s.jsx(ft,{variant:O?"h5":"h3",value:":",className:Y.separator,ownerState:v,toolbarVariant:L}),s.jsx(ce,{variant:O?"h5":"h3",width:O&&k==="portrait"?ke:void 0,onClick:()=>C("seconds"),selected:M==="seconds",value:$("seconds","--")})]})]}),X&&!O&&s.jsxs(Wa,{className:Y.ampmSelection,ownerState:v,children:[s.jsx(ce,{variant:"subtitle2",selected:F==="am",typographyClassName:Y.ampmLabel,value:Pe(j,"am"),onClick:b?void 0:()=>I("am"),disabled:T}),s.jsx(ce,{variant:"subtitle2",selected:F==="pm",typographyClassName:Y.ampmLabel,value:Pe(j,"pm"),onClick:b?void 0:()=>I("pm"),disabled:T})]}),r&&O&&s.jsx(ce,{variant:"h5",onClick:()=>C("meridiem"),selected:M==="meridiem",value:B&&F?Pe(j,F):"--",width:ke})]})]}))}const It=({value:e,referenceDate:o,adapter:r,props:a,timezone:i})=>{const c=m.useMemo(()=>me.getInitialReferenceValue({value:e,adapter:r,props:a,referenceDate:o,granularity:Qt.day,timezone:i,getTodayDate:()=>Kt(r,i,"date")}),[o,i]);return e??c};function za(e){return Ce("MuiDigitalClock",e)}const st=Me("MuiDigitalClock",["root","list","item"]),Ua=["ampm","timeStep","autoFocus","slots","slotProps","value","defaultValue","referenceDate","disableIgnoringDatePartForTimeValidation","maxTime","minTime","disableFuture","disablePast","minutesStep","shouldDisableTime","onChange","view","openTo","onViewChange","focusedView","onFocusedViewChange","className","classes","disabled","readOnly","views","skipDisabled","timezone"],qa=e=>ve({root:["root"],list:["list"],item:["item"]},za,e),Ga=G(vt,{name:"MuiDigitalClock",slot:"Root"})({overflowY:"auto",width:"100%",scrollbarWidth:"thin","@media (prefers-reduced-motion: no-preference)":{scrollBehavior:"auto"},maxHeight:Pt,variants:[{props:{hasDigitalClockAlreadyBeenRendered:!0},style:{"@media (prefers-reduced-motion: no-preference)":{scrollBehavior:"smooth"}}}]}),Ja=G(Ht,{name:"MuiDigitalClock",slot:"List"})({padding:0}),Ka=G(jt,{name:"MuiDigitalClock",slot:"Item",shouldForwardProp:e=>e!=="itemValue"&&e!=="formattedValue"})(({theme:e})=>({padding:"8px 16px",margin:"2px 4px","&:first-of-type":{marginTop:4},"&:hover":{backgroundColor:e.vars?`rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.hoverOpacity})`:Ke(e.palette.primary.main,e.palette.action.hoverOpacity)},"&.Mui-selected":{backgroundColor:(e.vars||e).palette.primary.main,color:(e.vars||e).palette.primary.contrastText,"&:focus-visible, &:hover":{backgroundColor:(e.vars||e).palette.primary.dark}},"&.Mui-focusVisible":{backgroundColor:e.vars?`rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.focusOpacity})`:Ke(e.palette.primary.main,e.palette.action.focusOpacity)}})),Qa=m.forwardRef(function(o,r){const a=se(),i=m.useRef(null),c=Yt(r,i),n=m.useRef(null),l=ue({props:o,name:"MuiDigitalClock"}),{ampm:y=a.is12HourCycleInCurrentLocale(),timeStep:p=30,autoFocus:u,slots:x,slotProps:T,value:b,defaultValue:w,referenceDate:k,disableIgnoringDatePartForTimeValidation:V=!1,maxTime:A,minTime:H,disableFuture:W,disablePast:v,minutesStep:Y=1,shouldDisableTime:j,onChange:S,view:B,openTo:f,onViewChange:M,focusedView:C,onFocusedViewChange:F,className:I,classes:L,disabled:O,readOnly:X,views:re=["hours"],skipDisabled:pe=!1,timezone:$}=l,oe=de(l,Ua),{value:ie,handleValueChange:U,timezone:E}=bt({name:"DigitalClock",timezone:$,value:b,defaultValue:w,referenceDate:k,onChange:S,valueManager:me}),J=Se(),P=gt(E),{ownerState:ne}=Xe(),_=D({},ne,{hasDigitalClockAlreadyBeenRendered:!!i.current}),De=qa(L),te=x?.digitalClockItem??Ka,tt=Ca({elementType:te,externalSlotProps:T?.digitalClockItem,ownerState:_,className:De.item}),he=It({value:ie,referenceDate:k,adapter:a,props:l,timezone:E}),ae=Qe(g=>U(g,"finish","hours")),{setValueAndGoToNextView:we}=kt({view:B,views:re,openTo:f,onViewChange:M,onChange:ae,focusedView:C,onFocusedViewChange:F}),fe=Qe(g=>{we(g,"finish")});Ct(()=>{if(i.current===null)return;const g=i.current.querySelector('[role="listbox"] [role="option"][tabindex="0"], [role="listbox"] [role="option"][aria-selected="true"]');if(!g)return;const h=g.offsetTop;(u||C)&&g.focus(),i.current.scrollTop=h-4});const Ye=m.useCallback(g=>{const h=ct(V,a),d=()=>!(H&&h(H,g)||A&&h(g,A)||W&&h(g,P)||v&&h(P,g)),R=()=>a.getMinutes(g)%Y!==0?!1:j?!j(g,"hours"):!0;return!d()||!R()},[V,a,H,A,W,P,v,Y,j]),je=m.useMemo(()=>{const g=[];let d=a.startOfDay(he);for(;a.isSameDay(he,d);)g.push(d),d=a.addMinutes(d,p);return g},[he,p,a]),be=je.findIndex(g=>a.isEqual(g,he)),at=g=>{switch(g.key){case"PageUp":{const h=Je(n.current)-5,d=n.current.children,R=Math.max(0,h),Z=d[R];Z&&Z.focus(),g.preventDefault();break}case"PageDown":{const h=Je(n.current)+5,d=n.current.children,R=Math.min(d.length-1,h),Z=d[R];Z&&Z.focus(),g.preventDefault();break}}};return s.jsx(Ga,D({ref:c,className:Te(De.root,I),ownerState:_},oe,{children:s.jsx(Ja,{ref:n,role:"listbox","aria-label":J.timePickerToolbarTitle,className:De.list,onKeyDown:at,children:je.map((g,h)=>{const d=Ye(g);if(pe&&d)return null;const R=a.isEqual(g,ie),Z=a.format(g,y?"fullTime12h":"fullTime24h"),ge=be===h||be===-1&&h===0?0:-1;return s.jsx(te,D({onClick:()=>!X&&fe(g),selected:R,disabled:O||d,disableRipple:X,role:"option","aria-disabled":X,"aria-selected":R,tabIndex:ge,itemValue:g,formattedValue:Z},tt,{children:Z}),`${g.valueOf()}-${Z}`)})})}))});function Xa(e){return Ce("MuiMultiSectionDigitalClock",e)}const rt=Me("MuiMultiSectionDigitalClock",["root"]);function Za(e){return Ce("MuiMultiSectionDigitalClockSection",e)}const nt=Me("MuiMultiSectionDigitalClockSection",["root","item"]),eo=["autoFocus","onChange","className","classes","disabled","readOnly","items","active","slots","slotProps","skipDisabled"],to=e=>ve({root:["root"],item:["item"]},Za,e),ao=G(Ht,{name:"MuiMultiSectionDigitalClockSection",slot:"Root"})(({theme:e})=>({maxHeight:Pt,width:56,padding:0,overflow:"hidden",scrollbarWidth:"thin","@media (prefers-reduced-motion: no-preference)":{scrollBehavior:"auto"},"@media (pointer: fine)":{"&:hover":{overflowY:"auto"}},"@media (pointer: none), (pointer: coarse)":{overflowY:"auto"},"&:not(:first-of-type)":{borderLeft:`1px solid ${(e.vars||e).palette.divider}`},variants:[{props:{hasDigitalClockAlreadyBeenRendered:!0},style:{"@media (prefers-reduced-motion: no-preference)":{scrollBehavior:"smooth"}}}]})),oo=G(jt,{name:"MuiMultiSectionDigitalClockSection",slot:"Item"})(({theme:e})=>({padding:8,margin:"2px 4px",width:ke,justifyContent:"center","&:first-of-type":{marginTop:4},"&:hover":{backgroundColor:e.vars?`rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.hoverOpacity})`:Ke(e.palette.primary.main,e.palette.action.hoverOpacity)},"&.Mui-selected":{backgroundColor:(e.vars||e).palette.primary.main,color:(e.vars||e).palette.primary.contrastText,"&:focus-visible, &:hover":{backgroundColor:(e.vars||e).palette.primary.dark}},"&.Mui-focusVisible":{backgroundColor:e.vars?`rgba(${e.vars.palette.primary.mainChannel} / ${e.vars.palette.action.focusOpacity})`:Ke(e.palette.primary.main,e.palette.action.focusOpacity)}})),io=m.forwardRef(function(o,r){const a=m.useRef(null),i=Yt(r,a),c=m.useRef(null),n=ue({props:o,name:"MuiMultiSectionDigitalClockSection"}),{autoFocus:l,onChange:y,className:p,classes:u,disabled:x,readOnly:T,items:b,active:w,slots:k,slotProps:V,skipDisabled:A}=n,H=de(n,eo),{ownerState:W}=Xe(),v=D({},W,{hasDigitalClockAlreadyBeenRendered:!!a.current}),Y=to(u),j=k?.digitalClockSectionItem??oo;Ct(()=>{if(a.current===null)return;const f=a.current.querySelector('[role="option"][tabindex="0"], [role="option"][aria-selected="true"]');if(w&&l&&f&&f.focus(),!f||c.current===f)return;c.current=f;const M=f.offsetTop,C=f.offsetHeight,F=a.current.clientHeight,I=a.current.scrollHeight,L=M-F/2+C/2,O=I-F,X=Math.min(L,O);a.current.scrollTop=Math.max(0,X)});const S=b.findIndex(f=>f.isFocused(f.value)),B=f=>{switch(f.key){case"PageUp":{const M=Je(a.current)-5,C=a.current.children,F=Math.max(0,M),I=C[F];I&&I.focus(),f.preventDefault();break}case"PageDown":{const M=Je(a.current)+5,C=a.current.children,F=Math.min(C.length-1,M),I=C[F];I&&I.focus(),f.preventDefault();break}}};return s.jsx(ao,D({ref:i,className:Te(Y.root,p),ownerState:v,autoFocusItem:l&&w,role:"listbox",onKeyDown:B},H,{children:b.map((f,M)=>{const C=f.isDisabled?.(f.value),F=x||C;if(A&&F)return null;const I=f.isSelected(f.value),L=S===M||S===-1&&M===0?0:-1;return s.jsx(j,D({onClick:()=>!T&&y(f.value),selected:I,disabled:F,disableRipple:T,role:"option","aria-disabled":T||F||void 0,"aria-label":f.ariaLabel,"aria-selected":I,tabIndex:L,className:Y.item},V?.digitalClockSectionItem,{children:f.label}),f.label)})}))}),so=({now:e,value:o,adapter:r,ampm:a,isDisabled:i,resolveAriaLabel:c,timeStep:n,valueOrReferenceDate:l})=>{const y=o?r.getHours(o):null,p=[],u=(b,w)=>{const k=w??y;return k===null?!1:a?b===12?k===12||k===0:k===b||k-12===b:k===b},x=b=>u(b,r.getHours(l)),T=a?11:23;for(let b=0;b<=T;b+=n){let w=r.format(r.setHours(e,b),a?"hours12h":"hours24h");const k=c(parseInt(w,10).toString());w=r.formatNumber(w),p.push({value:b,label:w,isSelected:u,isDisabled:i,isFocused:x,ariaLabel:k})}return p},yt=({value:e,adapter:o,isDisabled:r,timeStep:a,resolveLabel:i,resolveAriaLabel:c,hasValue:n=!0})=>{const l=p=>e===null?!1:n&&e===p,y=p=>e===p;return[...Array.from({length:Math.ceil(60/a)},(p,u)=>{const x=a*u;return{value:x,label:o.formatNumber(i(x)),isDisabled:r,isSelected:l,isFocused:y,ariaLabel:c(x.toString())}})]},ro=["ampm","timeSteps","autoFocus","slots","slotProps","value","defaultValue","referenceDate","disableIgnoringDatePartForTimeValidation","maxTime","minTime","disableFuture","disablePast","minutesStep","shouldDisableTime","onChange","view","views","openTo","onViewChange","focusedView","onFocusedViewChange","className","classes","disabled","readOnly","skipDisabled","timezone"],no=e=>ve({root:["root"]},Xa,e),co=G(vt,{name:"MuiMultiSectionDigitalClock",slot:"Root"})(({theme:e})=>({flexDirection:"row",width:"100%",borderBottom:`1px solid ${(e.vars||e).palette.divider}`})),lo=m.forwardRef(function(o,r){const a=se(),i=va(),c=ue({props:o,name:"MuiMultiSectionDigitalClock"}),{ampm:n=a.is12HourCycleInCurrentLocale(),timeSteps:l,autoFocus:y,slots:p,slotProps:u,value:x,defaultValue:T,referenceDate:b,disableIgnoringDatePartForTimeValidation:w=!1,maxTime:k,minTime:V,disableFuture:A,disablePast:H,minutesStep:W=1,shouldDisableTime:v,onChange:Y,view:j,views:S=["hours","minutes"],openTo:B,onViewChange:f,focusedView:M,onFocusedViewChange:C,className:F,classes:I,disabled:L,readOnly:O,skipDisabled:X=!1,timezone:re}=c,pe=de(c,ro),{value:$,handleValueChange:oe,timezone:ie}=bt({name:"MultiSectionDigitalClock",timezone:re,value:x,defaultValue:T,referenceDate:b,onChange:Y,valueManager:me}),U=Se(),E=gt(ie),J=m.useMemo(()=>D({hours:1,minutes:5,seconds:5},l),[l]),P=It({value:$,referenceDate:b,adapter:a,props:c,timezone:ie}),ne=Qe((h,d,R)=>oe(h,d,R)),_=m.useMemo(()=>!n||!S.includes("hours")||S.includes("meridiem")?S:[...S,"meridiem"],[n,S]),{view:De,setValueAndGoToNextView:te,focusedView:tt}=kt({view:j,views:_,openTo:B,onViewChange:f,onChange:ne,focusedView:M,onFocusedViewChange:C}),he=Qe(h=>{te(h,"finish","meridiem")}),{meridiemMode:ae,handleMeridiemChange:we}=xt(P,n,he,"finish"),fe=m.useCallback((h,d)=>{const R=ct(w,a),Z=d==="hours"||d==="minutes"&&_.includes("seconds"),He=({start:N,end:ee})=>!(V&&R(V,ee)||k&&R(N,k)||A&&R(N,E)||H&&R(E,Z?ee:N)),ge=(N,ee=1)=>{if(N%ee!==0)return!1;if(v)switch(d){case"hours":return!v(a.setHours(P,N),"hours");case"minutes":return!v(a.setMinutes(P,N),"minutes");case"seconds":return!v(a.setSeconds(P,N),"seconds");default:return!1}return!0};switch(d){case"hours":{const N=Dt(h,ae,n),ee=a.setHours(P,N);if(a.getHours(ee)!==N)return!0;const Fe=a.setSeconds(a.setMinutes(ee,0),0),Wt=a.setSeconds(a.setMinutes(ee,59),59);return!He({start:Fe,end:Wt})||!ge(N)}case"minutes":{const N=a.setMinutes(P,h),ee=a.setSeconds(N,0),Fe=a.setSeconds(N,59);return!He({start:ee,end:Fe})||!ge(h,W)}case"seconds":{const N=a.setSeconds(P,h);return!He({start:N,end:N})||!ge(h)}default:throw new Error("not supported")}},[n,P,w,k,ae,V,W,v,a,A,H,E,_]),Ye=m.useCallback(h=>{switch(h){case"hours":return{onChange:d=>{const R=Dt(d,ae,n);te(a.setHours(P,R),"finish","hours")},items:so({now:E,value:$,ampm:n,adapter:a,isDisabled:d=>fe(d,"hours"),timeStep:J.hours,resolveAriaLabel:U.hoursClockNumberText,valueOrReferenceDate:P})};case"minutes":return{onChange:d=>{te(a.setMinutes(P,d),"finish","minutes")},items:yt({value:a.getMinutes(P),adapter:a,isDisabled:d=>fe(d,"minutes"),resolveLabel:d=>a.format(a.setMinutes(E,d),"minutes"),timeStep:J.minutes,hasValue:!!$,resolveAriaLabel:U.minutesClockNumberText})};case"seconds":return{onChange:d=>{te(a.setSeconds(P,d),"finish","seconds")},items:yt({value:a.getSeconds(P),adapter:a,isDisabled:d=>fe(d,"seconds"),resolveLabel:d=>a.format(a.setSeconds(E,d),"seconds"),timeStep:J.seconds,hasValue:!!$,resolveAriaLabel:U.secondsClockNumberText})};case"meridiem":{const d=Pe(a,"am"),R=Pe(a,"pm");return{onChange:we,items:[{value:"am",label:d,isSelected:()=>!!$&&ae==="am",isFocused:()=>!!P&&ae==="am",ariaLabel:d},{value:"pm",label:R,isSelected:()=>!!$&&ae==="pm",isFocused:()=>!!P&&ae==="pm",ariaLabel:R}]}}default:throw new Error(`Unknown view: ${h} found.`)}},[E,$,n,a,J.hours,J.minutes,J.seconds,U.hoursClockNumberText,U.minutesClockNumberText,U.secondsClockNumberText,ae,te,P,fe,we]),je=m.useMemo(()=>{if(!i)return _;const h=_.filter(d=>d!=="meridiem");return h.reverse(),_.includes("meridiem")&&h.push("meridiem"),h},[i,_]),be=m.useMemo(()=>_.reduce((h,d)=>D({},h,{[d]:Ye(d)}),{}),[_,Ye]),{ownerState:at}=Xe(),g=no(I);return s.jsx(co,D({ref:r,className:Te(g.root,F),ownerState:at,role:"group"},pe,{children:je.map(h=>s.jsx(io,{items:be[h].items,onChange:be[h].onChange,active:De===h,autoFocus:y||tt===h,disabled:L,readOnly:O,slots:p,slotProps:u,skipDisabled:X,"aria-label":U.selectViewText(h)},h))}))}),Ot=({view:e,onViewChange:o,focusedView:r,onFocusedViewChange:a,views:i,value:c,defaultValue:n,referenceDate:l,onChange:y,className:p,classes:u,disableFuture:x,disablePast:T,minTime:b,maxTime:w,shouldDisableTime:k,minutesStep:V,ampm:A,slots:H,slotProps:W,readOnly:v,disabled:Y,sx:j,autoFocus:S,disableIgnoringDatePartForTimeValidation:B,timeSteps:f,skipDisabled:M,timezone:C})=>s.jsx(Qa,{view:e,onViewChange:o,focusedView:r&&qe(r)?r:null,onFocusedViewChange:a,views:i.filter(qe),value:c,defaultValue:n,referenceDate:l,onChange:y,className:p,classes:u,disableFuture:x,disablePast:T,minTime:b,maxTime:w,shouldDisableTime:k,minutesStep:V,ampm:A,slots:H,slotProps:W,readOnly:v,disabled:Y,sx:j,autoFocus:S,disableIgnoringDatePartForTimeValidation:B,timeStep:f?.minutes,skipDisabled:M,timezone:C}),le=({view:e,onViewChange:o,focusedView:r,onFocusedViewChange:a,views:i,value:c,defaultValue:n,referenceDate:l,onChange:y,className:p,classes:u,disableFuture:x,disablePast:T,minTime:b,maxTime:w,shouldDisableTime:k,minutesStep:V,ampm:A,slots:H,slotProps:W,readOnly:v,disabled:Y,sx:j,autoFocus:S,disableIgnoringDatePartForTimeValidation:B,timeSteps:f,skipDisabled:M,timezone:C})=>s.jsx(lo,{view:e,onViewChange:o,focusedView:r&&ye(r)?r:null,onFocusedViewChange:a,views:i.filter(qe),value:c,defaultValue:n,referenceDate:l,onChange:y,className:p,classes:u,disableFuture:x,disablePast:T,minTime:b,maxTime:w,shouldDisableTime:k,minutesStep:V,ampm:A,slots:H,slotProps:W,readOnly:v,disabled:Y,sx:j,autoFocus:S,disableIgnoringDatePartForTimeValidation:B,timeSteps:f,skipDisabled:M,timezone:C}),mo=`
+import React, { useState } from 'react';
+import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const BasicDateTimePickerExample = () => {
+  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());
+  return (
+    <Box sx={{ width: 300 }}>
+      <DateTimePicker
+        label="Seleccionar Fecha y Hora"
+        selectedDateTime={selectedDateTime}
+        onDateTimeChange={setSelectedDateTime}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`,mt=`
+import React, { useState } from 'react';
+import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateTimePickerWithMinMaxExample = () => {
+  const [selectedDateTime, setSelectedDateTime] = useState(dayjs('2023-06-15T10:00'));
+  const minDateTime = dayjs('2023-06-01T09:00');
+  const maxDateTime = dayjs('2023-06-30T17:00');
+  return (
+    <Box sx={{ width: 300 }}>
+      <DateTimePicker
+        label="Fecha y Hora en Junio"
+        selectedDateTime={selectedDateTime}
+        onDateTimeChange={setSelectedDateTime}
+        minDateTime={minDateTime}
+        maxDateTime={maxDateTime}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+      </Typography>
+      <Typography variant="caption" color="text.secondary">
+        (Rango: \${minDateTime.format('YYYY-MM-DD HH:mm')} a \${maxDateTime.format('YYYY-MM-DD HH:mm')})
+      </Typography>
+    </Box>
+  );
+};
+`,uo=`
+import React, { useState } => from 'react';
+import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateTimePickerDisabledExample = () => {
+  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());
+  return (
+    <Box sx={{ width: 300 }}>
+      <DateTimePicker
+        label="Fecha y Hora (Deshabilitado)"
+        selectedDateTime={selectedDateTime}
+        onDateTimeChange={setSelectedDateTime}
+        disabled
+      />
+      <Typography sx={{ mt: 2 }}>
+        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`,po=`
+import React, { useState } from 'react';
+import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateTimePickerReadOnlyExample = () => {
+  const [selectedDateTime, setSelectedDateTime] = useState(dayjs('2024-07-24T14:30'));
+  return (
+    <Box sx={{ width: 300 }}>
+      <DateTimePicker
+        label="Fecha y Hora (Solo Lectura)"
+        selectedDateTime={selectedDateTime}
+        onDateTimeChange={() => {}} // No permite cambios
+        readOnly
+      />
+      <Typography sx={{ mt: 2 }}>
+        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`,Do=`
+import React, { useState } from 'react';
+import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateTimePickerWithInitialNullExample = () => {
+  const [selectedDateTime, setSelectedDateTime] = useState(null);
+  return (
+    <Box sx={{ width: 300 }}>
+      <DateTimePicker
+        label="Fecha y Hora (Sin Selección Inicial)"
+        selectedDateTime={selectedDateTime}
+        onDateTimeChange={setSelectedDateTime}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`,To=`
+import React, { useState } from 'react';
+import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateTimePickerSmallSizeExample = () => {
+  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());
+  return (
+    <Box sx={{ width: 250 }}>
+      <DateTimePicker
+        label="Fecha y Hora (Pequeño)"
+        selectedDateTime={selectedDateTime}
+        onDateTimeChange={setSelectedDateTime}
+        slotProps={{ textField: { size: 'small' } }}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`,ho=`
+import React, { useState } => from 'react';
+import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateTimePickerWithButtonsExample = () => {
+  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());
+  return (
+    <Box sx={{ width: 300 }}>
+      <DateTimePicker
+        label="Fecha y Hora (Con Botones por Defecto)"
+        selectedDateTime={selectedDateTime}
+        onDateTimeChange={setSelectedDateTime}
+        slotProps={{
+          actionBar: {
+            actions: ['clear', 'cancel', 'accept'],
+          },
+        }}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`,fo=`
+import React, { useState } from 'react';
+import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateTimePickerWithCustomButtonTextExample = () => {
+  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());
+  return (
+    <Box sx={{ width: 300 }}>
+      <DateTimePicker
+        label="Fecha y Hora (Botones Personalizados)"
+        selectedDateTime={selectedDateTime}
+        onDateTimeChange={setSelectedDateTime}
+        clearButtonText="Limpiar Todo"
+        cancelButtonText="Descartar"
+        acceptButtonText="Confirmar Selección"
+        slotProps={{
+          actionBar: {
+            actions: ['clear', 'cancel', 'accept'],
+          },
+        }}
+      />
+      <Typography sx={{ mt: 2 }}>
+        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`,yo=`
+import React, { useState } from 'react';
+import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
+import { Dayjs } from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateTimePickerEmptyWithMaskExample = () => {
+  const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(null);
+  return (
+    <Box sx={{ width: 300 }}>
+      <DateTimePicker
+        label="Fecha y Hora"
+        selectedDateTime={selectedDateTime}
+        onDateTimeChange={setSelectedDateTime}
+        inputFormat="DD/MM/YY HH:mm"
+      />
+      <Typography sx={{ mt: 2 }} variant="caption" color="text.secondary">
+        Al estar vacío, el campo muestra la máscara del formato (DD/MM/AA HH:MM).
+      </Typography>
+    </Box>
+  );
+};
+`,xo=`
+import React, { useState } from 'react';
+import { DateTimePicker } from './DateTimePicker'; // Ajusta la ruta si es necesario
+import dayjs from 'dayjs';
+import { Box, Typography } from '@mui/material';
+
+export const DateTimePickerWithCustomInputFormatExample = () => {
+  const [selectedDateTime, setSelectedDateTime] = useState(dayjs());
+  return (
+    <Box sx={{ width: 300 }}>
+      <DateTimePicker
+        label="Fecha y Hora (Formato dd/MM/YYYY)"
+        selectedDateTime={selectedDateTime}
+        onDateTimeChange={setSelectedDateTime}
+        inputFormat="DD/MM/YYYY HH:mm" // Formato de fecha personalizado
+      />
+      <Typography sx={{ mt: 2 }}>
+        Seleccionado: \${selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+      </Typography>
+    </Box>
+  );
+};
+`,bo=e=>{const o=wa(e);return Xt({manager:o,props:e})},go=["slots","slotProps"],Nt=m.forwardRef(function(o,r){const a=ue({props:o,name:"MuiDateTimeField"}),{slots:i,slotProps:c}=a,n=de(a,go),l=Zt({slotProps:c,ref:r,externalForwardedProps:n}),y=bo(l);return s.jsx(ea,{slots:i,slotProps:c,inputRef:n.inputRef,children:s.jsx(ta,{fieldResponse:y,defaultOpenPickerIcon:aa})})});function ko(e){return Ce("MuiDateTimePickerTabs",e)}Me("MuiDateTimePickerTabs",["root"]);const Po=e=>Ge(e)?"date":"time",So=e=>e==="date"?"day":"hours",Mo=e=>ve({root:["root"]},ko,e),Co=G(ba,{name:"MuiDateTimePickerTabs",slot:"Root"})(({theme:e})=>({boxShadow:`0 -1px 0 0 inset ${(e.vars||e).palette.divider}`,"&:last-child":{boxShadow:`0 1px 0 0 inset ${(e.vars||e).palette.divider}`,[`& .${ga.indicator}`]:{bottom:"auto",top:0}}})),vo=function(o){const r=ue({props:o,name:"MuiDateTimePickerTabs"}),{dateIcon:a=s.jsx(oa,{}),timeIcon:i=s.jsx(ia,{}),hidden:c=typeof window>"u"||window.innerHeight<667,className:n,classes:l,sx:y}=r,p=Se(),{ownerState:u}=Xe(),{view:x,setView:T}=lt(),b=Mo(l),w=(k,V)=>{T(So(V))};return c?null:s.jsxs(Co,{ownerState:u,variant:"fullWidth",value:Po(x),onChange:w,className:Te(n,b.root),sx:y,children:[s.jsx(ht,{value:"date","aria-label":p.dateTableLabel,icon:s.jsx(m.Fragment,{children:a})}),s.jsx(ht,{value:"time","aria-label":p.timeTableLabel,icon:s.jsx(m.Fragment,{children:i})})]})};function At(e,o){const r=se(),a=ue({props:e,name:o}),i=Rt(a),c=a.ampm??r.is12HourCycleInCurrentLocale(),n=m.useMemo(()=>a.localeText?.toolbarTitle==null?a.localeText:D({},a.localeText,{dateTimePickerToolbarTitle:a.localeText.toolbarTitle}),[a.localeText]),{openTo:l,views:y}=sa({views:a.views,openTo:a.openTo,defaultViews:["year","day","hours","minutes"],defaultOpenTo:"day"}),{shouldRenderTimeInASingleColumn:p,thresholdToRenderTimeInASingleColumn:u,views:x,timeSteps:T}=Ra({thresholdToRenderTimeInASingleColumn:a.thresholdToRenderTimeInASingleColumn,ampm:c,timeSteps:a.timeSteps,views:y});return D({},a,i,{timeSteps:T,openTo:l,shouldRenderTimeInASingleColumn:p,thresholdToRenderTimeInASingleColumn:u,views:x,ampm:c,localeText:n,orientation:a.orientation??"portrait",slots:D({toolbar:_a,tabs:vo},a.slots),slotProps:D({},a.slotProps,{toolbar:D({ampm:c},a.slotProps?.toolbar)})})}const wo=m.forwardRef(function(o,r){const{toolbar:a,tabs:i,content:c,actionBar:n,shortcuts:l,ownerState:y}=ra(o),{orientation:p}=lt(),{sx:u,className:x,classes:T}=o,b=n&&(n.props.actions?.length??0)>0;return s.jsxs(na,{ref:r,className:Te(Be.root,T?.root,x),sx:[{[`& .${Be.tabs}`]:{gridRow:4,gridColumn:"1 / 4"},[`& .${Be.actionBar}`]:{gridRow:5}},...Array.isArray(u)?u:[u]],ownerState:y,children:[p==="landscape"?l:a,p==="landscape"?a:l,s.jsxs(ca,{className:Te(Be.contentWrapper,T?.contentWrapper),ownerState:y,sx:{display:"grid"},children:[c,i,b&&s.jsx(wt,{sx:{gridRow:3,gridColumn:"1 / 4"}})]}),n]})}),Yo=["openTo","focusedView","timeViewsCount"],jo=function(o){const{viewRenderers:r,popperView:a,rendererProps:i}=o,{openTo:c,focusedView:n,timeViewsCount:l}=i,y=de(i,Yo),p=D({},y,{autoFocus:!1,focusedView:null,sx:[{[`&.${rt.root}`]:{borderBottom:0},[`&.${rt.root}, .${nt.root}, &.${st.root}`]:{maxHeight:it}}]}),u=ye(a),x=u?"day":a,T=u?a:"hours";return s.jsxs(m.Fragment,{children:[r[x]?.(D({},i,{view:u?"day":a,focusedView:n&&Ge(n)?n:null,views:i.views.filter(Ge),sx:[{gridColumn:1},...p.sx]})),l>0&&s.jsxs(m.Fragment,{children:[s.jsx(wt,{orientation:"vertical",sx:{gridColumn:2}}),r[T]?.(D({},p,{view:u?a:"hours",focusedView:n&&ye(n)?n:null,openTo:ye(c)?c:"hours",views:i.views.filter(ye),sx:[{gridColumn:3},...p.sx]}))]})]})},Lt=m.forwardRef(function(o,r){const a=se(),i=At(o,"MuiDesktopDateTimePicker"),c=i.shouldRenderTimeInASingleColumn?Ot:le,n=D({day:xe,month:xe,year:xe,hours:c,minutes:c,seconds:c,meridiem:c},i.viewRenderers),l=i.ampmInClock??!0,p=n.hours?.name===le.name?i.views:i.views.filter(T=>T!=="meridiem"),u=D({},i,{viewRenderers:n,format:Vt(a,i),views:p,yearsPerRow:i.yearsPerRow??4,ampmInClock:l,slots:D({field:Nt,layout:wo},i.slots),slotProps:D({},i.slotProps,{field:T=>D({},Ft(i.slotProps?.field,T),St(i)),toolbar:D({hidden:!0,ampmInClock:l},i.slotProps?.toolbar),tabs:D({hidden:!0},i.slotProps?.tabs)})}),{renderPicker:x}=Sa({ref:r,props:u,valueManager:me,valueType:"date-time",validator:et,rendererInterceptor:jo,steps:null});return x()});Lt.propTypes={ampm:t.bool,ampmInClock:t.bool,autoFocus:t.bool,className:t.string,closeOnSelect:t.bool,dayOfWeekFormatter:t.func,defaultValue:t.object,disabled:t.bool,disableFuture:t.bool,disableHighlightToday:t.bool,disableIgnoringDatePartForTimeValidation:t.bool,disableOpenPicker:t.bool,disablePast:t.bool,displayWeekNumber:t.bool,enableAccessibleFieldDOMStructure:t.any,fixedWeekNumber:t.number,format:t.string,formatDensity:t.oneOf(["dense","spacious"]),inputRef:Mt,label:t.node,loading:t.bool,localeText:t.object,maxDate:t.object,maxDateTime:t.object,maxTime:t.object,minDate:t.object,minDateTime:t.object,minTime:t.object,minutesStep:t.number,monthsPerRow:t.oneOf([3,4]),name:t.string,onAccept:t.func,onChange:t.func,onClose:t.func,onError:t.func,onMonthChange:t.func,onOpen:t.func,onSelectedSectionsChange:t.func,onViewChange:t.func,onYearChange:t.func,open:t.bool,openTo:t.oneOf(["day","hours","meridiem","minutes","month","seconds","year"]),orientation:t.oneOf(["landscape","portrait"]),readOnly:t.bool,reduceAnimations:t.bool,referenceDate:t.object,renderLoading:t.func,selectedSections:t.oneOfType([t.oneOf(["all","day","empty","hours","meridiem","minutes","month","seconds","weekDay","year"]),t.number]),shouldDisableDate:t.func,shouldDisableMonth:t.func,shouldDisableTime:t.func,shouldDisableYear:t.func,showDaysOutsideCurrentMonth:t.bool,skipDisabled:t.bool,slotProps:t.object,slots:t.object,sx:t.oneOfType([t.arrayOf(t.oneOfType([t.func,t.object,t.bool])),t.func,t.object]),thresholdToRenderTimeInASingleColumn:t.number,timeSteps:t.shape({hours:t.number,minutes:t.number,seconds:t.number}),timezone:t.string,value:t.object,view:t.oneOf(["day","hours","meridiem","minutes","month","seconds","year"]),viewRenderers:t.shape({day:t.func,hours:t.func,meridiem:t.func,minutes:t.func,month:t.func,seconds:t.func,year:t.func}),views:t.arrayOf(t.oneOf(["day","hours","minutes","month","seconds","year"]).isRequired),yearsOrder:t.oneOf(["asc","desc"]),yearsPerRow:t.oneOf([3,4])};const Ho=[{views:ma},{views:da}],$t=m.forwardRef(function(o,r){const a=se(),i=At(o,"MuiMobileDateTimePicker"),c=i.shouldRenderTimeInASingleColumn?Ot:le,n=D({day:xe,month:xe,year:xe,hours:c,minutes:c,seconds:c,meridiem:c},i.viewRenderers),l=i.ampmInClock??!1,p=n.hours?.name===le.name?i.views:i.views.filter(T=>T!=="meridiem"),u=D({},i,{viewRenderers:n,format:Vt(a,i),views:p,ampmInClock:l,slots:D({field:Nt},i.slots),slotProps:D({},i.slotProps,{field:T=>D({},Ft(i.slotProps?.field,T),St(i)),toolbar:D({hidden:!1,ampmInClock:l},i.slotProps?.toolbar),tabs:D({hidden:!1},i.slotProps?.tabs),layout:D({},i.slotProps?.layout,{sx:la([{[`& .${rt.root}`]:{width:Tt},[`& .${nt.root}`]:{flex:1,maxHeight:it-1,[`.${nt.item}`]:{width:"auto"}},[`& .${st.root}`]:{width:Tt,maxHeight:it,flex:1,[`.${st.item}`]:{justifyContent:"center"}}}],i.slotProps?.layout?.sx)})})}),{renderPicker:x}=Ma({ref:r,props:u,valueManager:me,valueType:"date-time",validator:et,steps:Ho});return x()});$t.propTypes={ampm:t.bool,ampmInClock:t.bool,autoFocus:t.bool,className:t.string,closeOnSelect:t.bool,dayOfWeekFormatter:t.func,defaultValue:t.object,disabled:t.bool,disableFuture:t.bool,disableHighlightToday:t.bool,disableIgnoringDatePartForTimeValidation:t.bool,disableOpenPicker:t.bool,disablePast:t.bool,displayWeekNumber:t.bool,enableAccessibleFieldDOMStructure:t.any,fixedWeekNumber:t.number,format:t.string,formatDensity:t.oneOf(["dense","spacious"]),inputRef:Mt,label:t.node,loading:t.bool,localeText:t.object,maxDate:t.object,maxDateTime:t.object,maxTime:t.object,minDate:t.object,minDateTime:t.object,minTime:t.object,minutesStep:t.number,monthsPerRow:t.oneOf([3,4]),name:t.string,onAccept:t.func,onChange:t.func,onClose:t.func,onError:t.func,onMonthChange:t.func,onOpen:t.func,onSelectedSectionsChange:t.func,onViewChange:t.func,onYearChange:t.func,open:t.bool,openTo:t.oneOf(["day","hours","meridiem","minutes","month","seconds","year"]),orientation:t.oneOf(["landscape","portrait"]),readOnly:t.bool,reduceAnimations:t.bool,referenceDate:t.object,renderLoading:t.func,selectedSections:t.oneOfType([t.oneOf(["all","day","empty","hours","meridiem","minutes","month","seconds","weekDay","year"]),t.number]),shouldDisableDate:t.func,shouldDisableMonth:t.func,shouldDisableTime:t.func,shouldDisableYear:t.func,showDaysOutsideCurrentMonth:t.bool,skipDisabled:t.bool,slotProps:t.object,slots:t.object,sx:t.oneOfType([t.arrayOf(t.oneOfType([t.func,t.object,t.bool])),t.func,t.object]),thresholdToRenderTimeInASingleColumn:t.number,timeSteps:t.shape({hours:t.number,minutes:t.number,seconds:t.number}),timezone:t.string,value:t.object,view:t.oneOf(["day","hours","meridiem","minutes","month","seconds","year"]),viewRenderers:t.shape({day:t.func,hours:t.func,meridiem:t.func,minutes:t.func,month:t.func,seconds:t.func,year:t.func}),views:t.arrayOf(t.oneOf(["day","hours","minutes","month","seconds","year"]).isRequired),yearsOrder:t.oneOf(["asc","desc"]),yearsPerRow:t.oneOf([3,4])};const Fo=["desktopModeMediaQuery"],Bo=m.forwardRef(function(o,r){const a=ue({props:o,name:"MuiDateTimePicker"}),{desktopModeMediaQuery:i=ua}=a,c=de(a,Fo);return xa(i,{defaultMatches:!0})?s.jsx(Lt,D({ref:r},c)):s.jsx($t,D({ref:r},c))}),Ro=(e,o)=>Ta({borderRadius:e,labelPosition:o,includePickersApi:!0,extraOutsideSx:{"& .MuiInputBase-input":{paddingTop:Re,paddingBottom:Re},"& .MuiPickersInputBase-sectionsContainer":{paddingTop:Re,paddingBottom:Re}}}),Vo=e=>{switch(e){case"minDate":case"maxDate":case"invalidDate":return"Formato de fecha/hora inválido";case"disableFuture":return"No se permiten fechas/horas futuras";case"disablePast":return"No se permiten fechas/horas pasadas";default:return""}},Io=(e,o,r)=>{const a={};return e&&(a.clearButtonLabel=e),o&&(a.cancelButtonLabel=o),r&&(a.okButtonLabel=r),a},z=e=>{const{label:o,minDateTime:r,maxDateTime:a,disabled:i,readOnly:c,inputFormat:n,borderRadius:l=10,labelPosition:y="outside",size:p="small",helperText:u,error:x,sx:T,className:b,preset:w,adapterLocale:k,clearButtonText:V,cancelButtonText:A,acceptButtonText:H,minutesStep:W,minTime:v,customClass:Y,viewRenderers:j,timeSteps:S,ampm:B=!1,textFieldProps:f,slotProps:M,...C}=e,[F,I]=Et.useState(null),L=m.useMemo(()=>Vo(F),[F]),O=m.useMemo(()=>Io(V,A,H),[V,A,H]),X=ya(),re=fa("DateTimePicker",w,X),pe=[Ro(l,y),...re?[re]:[],...Array.isArray(T)?T:[T]],$=(U,E,J,P,ne,_)=>{const De=ne||!!L||!!x,te=_||L||u;return s.jsx(pa,{dateAdapter:Da,...k?{adapterLocale:k}:{},children:s.jsx(Bo,{className:Y||b,label:o,value:U,onChange:E,onError:I,minDateTime:r,maxDateTime:a,minutesStep:W,disabled:i,readOnly:c,minTime:v,format:n??"DD/MM/YYYY HH:mm",viewRenderers:j,timeSteps:S,ampm:B,sx:pe,slotProps:{...M,textField:{fullWidth:!0,size:p,variant:"outlined",onBlur:J,inputRef:P,error:!!De,helperText:te,...M?.textField,...f}},localeText:O,...C})})};if("control"in e&&e.control){const{name:U,control:E,validation:J}=e;return s.jsx(ha,{name:U,control:E,rules:J,render:({field:P,fieldState:{error:ne}})=>$(P.value??null,P.onChange,P.onBlur,P.ref,!!ne,ne?.message)})}const{selectedDateTime:oe,onDateTimeChange:ie}=e;return $(oe,ie)};z.__docgenInfo={description:"",methods:[],displayName:"DateTimePicker"};const Ni={title:"Components/DateTimePicker",component:z,tags:["autodocs"],parameters:{layout:"centered",docs:{description:{component:"Un componente `DateTimePicker` personalizado de Material UI que permite seleccionar tanto la fecha como la hora."}}},argTypes:{label:{control:"text",description:"Etiqueta para el selector de fecha y hora."},selectedDateTime:{control:"object",description:"La fecha y hora actualmente seleccionada.",type:{name:"object",required:!1,value:{}}},onDateTimeChange:{action:"dateTimeChanged",description:"Callback que se dispara cuando la fecha y hora cambian."},minDateTime:{control:"object",description:"La fecha y hora mínima permitida."},maxDateTime:{control:"object",description:"La fecha y hora máxima permitida."},disabled:{control:"boolean",description:"Si es verdadero, el selector estará deshabilitado."},readOnly:{control:"boolean",description:"Si es verdadero, el selector estará en modo de solo lectura."},inputFormat:{control:"text",description:'Formato de la fecha y hora en el campo de entrada (ej. "DD/MM/YYYY HH:mm").'},slotProps:{control:"object",description:"Propiedades pasadas a los slots internos del DateTimePicker (e.g., `textField`, `actionBar`)."},clearButtonText:{control:"text",description:'Texto personalizado para el botón "Limpiar".',if:{arg:"slotProps.actionBar.actions",eq:"clear"}},cancelButtonText:{control:"text",description:'Texto personalizado para el botón "Cancelar".',if:{arg:"slotProps.actionBar.actions",eq:"cancel"}},acceptButtonText:{control:"text",description:'Texto personalizado para el botón "Aceptar".',if:{arg:"slotProps.actionBar.actions",eq:"accept"}}}},Ve={render:()=>{const[e,o]=m.useState(K());return s.jsxs(Q,{sx:{width:300},children:[s.jsx(z,{label:"Seleccionar Fecha y Hora",selectedDateTime:e,onDateTimeChange:o}),s.jsxs(q,{sx:{mt:2},children:["Seleccionado: ",e?e.format("YYYY-MM-DD HH:mm"):"Ninguna"]})]})},parameters:{docs:{description:{story:"Un `DateTimePicker` básico con selección de fecha y hora actual."},source:{code:mo.trim()}}}},Ie={render:()=>{const[e,o]=m.useState(K("2023-06-15T10:00")),r=K("2023-06-01T09:00"),a=K("2023-06-30T17:00");return s.jsxs(Q,{sx:{width:300},children:[s.jsx(z,{label:"Fecha y Hora en Junio (Rango)",selectedDateTime:e,onDateTimeChange:o,minDateTime:r,maxDateTime:a}),s.jsxs(q,{sx:{mt:2},children:["Seleccionado: ",e?e.format("YYYY-MM-DD HH:mm"):"Ninguna"]}),s.jsxs(q,{variant:"caption",color:"text.secondary",children:["(Rango: $",r.format("YYYY-MM-DD HH:mm")," a $",a.format("YYYY-MM-DD HH:mm"),")"]})]})},parameters:{docs:{description:{story:"Muestra un `DateTimePicker` con límites de fecha y hora mínimos y máximos."},source:{code:mt.trim()}}}},Oe={render:()=>{const[e,o]=m.useState(K());return s.jsxs(Q,{sx:{width:300},children:[s.jsx(z,{label:"Fecha y Hora (Deshabilitado)",selectedDateTime:e,onDateTimeChange:o,disabled:!0}),s.jsxs(q,{sx:{mt:2},children:["Seleccionado: ",e?e.format("YYYY-MM-DD HH:mm"):"Ninguna"]})]})},parameters:{docs:{description:{story:"Demuestra un `DateTimePicker` en estado deshabilitado."},source:{code:uo.trim()}}}},Ne={render:()=>{const[e,o]=m.useState(K("2024-07-24T14:30"));return s.jsxs(Q,{sx:{width:300},children:[s.jsx(z,{label:"Fecha y Hora (Solo Lectura)",selectedDateTime:e,onDateTimeChange:()=>{},readOnly:!0}),s.jsxs(q,{sx:{mt:2},children:["Seleccionado: ",e?e.format("YYYY-MM-DD HH:mm"):"Ninguna"]})]})},parameters:{docs:{description:{story:"Muestra el `DateTimePicker` en modo de solo lectura."},source:{code:po.trim()}}}},Ae={render:()=>{const[e,o]=m.useState(null);return s.jsxs(Q,{sx:{width:300},children:[s.jsx(z,{label:"Fecha y Hora (Sin Selección Inicial)",selectedDateTime:e,onDateTimeChange:o}),s.jsxs(q,{sx:{mt:2},children:["Seleccionado: ",e?e.format("YYYY-MM-DD HH:mm"):"Ninguna"]})]})},parameters:{docs:{description:{story:"Muestra un `DateTimePicker` sin fecha y hora seleccionadas inicialmente."},source:{code:Do.trim()}}}},Le={render:()=>{const[e,o]=m.useState(null);return s.jsxs(Q,{sx:{width:300},children:[s.jsx(z,{label:"Fecha y Hora",selectedDateTime:e,onDateTimeChange:o,inputFormat:"DD/MM/YY HH:mm"}),s.jsx(q,{sx:{mt:2},variant:"caption",color:"text.secondary",children:"Al estar vacío, el campo muestra la máscara del formato (DD/MM/AA HH:MM)."})]})},parameters:{docs:{description:{story:"DateTimePicker vacío. Al no haber valor seleccionado, cada sección del campo muestra su placeholder según el `inputFormat` (por ejemplo `DD/MM/AA HH:MM`), funcionando como máscara visual."},source:{code:yo.trim()}}}},$e={render:()=>{const[e,o]=m.useState(K());return s.jsxs(Q,{sx:{width:250},children:[s.jsx(z,{label:"Fecha y Hora (Pequeño)",selectedDateTime:e,onDateTimeChange:o,slotProps:{textField:{size:"small"}}}),s.jsxs(q,{sx:{mt:2},children:["Seleccionado: ",e?e.format("YYYY-MM-DD HH:mm"):"Ninguna"]})]})},parameters:{docs:{description:{story:"Demuestra cómo aplicar un tamaño más pequeño al `DateTimePicker`."},source:{code:To.trim()}}}},We={render:()=>{const[e,o]=m.useState(K());return s.jsxs(Q,{sx:{width:300},children:[s.jsx(z,{label:"Fecha y Hora (Con Botones por Defecto)",selectedDateTime:e,onDateTimeChange:o,slotProps:{actionBar:{actions:["clear","cancel","accept"]}}}),s.jsxs(q,{sx:{mt:2},children:["Seleccionado: ",e?e.format("YYYY-MM-DD HH:mm"):"Ninguna"]})]})},parameters:{docs:{description:{story:"Muestra el `DateTimePicker` con botones de acción ('Limpiar', 'Cancelar', 'Aceptar') en el pie del selector."},source:{code:ho.trim()}}}},Ee={render:()=>{const[e,o]=m.useState(K());return s.jsxs(Q,{sx:{width:300},children:[s.jsx(z,{label:"Fecha y Hora (Botones Personalizados)",selectedDateTime:e,onDateTimeChange:o,clearButtonText:"Limpiar Todo",cancelButtonText:"Descartar",acceptButtonText:"Confirmar Selección",slotProps:{actionBar:{actions:["clear","cancel","accept"]}}}),s.jsxs(q,{sx:{mt:2},children:["Seleccionado: ",e?e.format("YYYY-MM-DD HH:mm"):"Ninguna"]})]})},parameters:{docs:{description:{story:"Demuestra cómo personalizar el texto de los botones de acción ('Limpiar', 'Cancelar', 'Aceptar') en el `DateTimePicker`."},source:{code:fo.trim()}}}},_e={render:()=>{const[e,o]=m.useState(K());return s.jsxs(Q,{sx:{width:300},children:[s.jsx(z,{label:"Fecha y Hora (Formato dd/MM/YYYY HH:mm)",selectedDateTime:e,onDateTimeChange:o,inputFormat:"DD/MM/YYYY HH:mm"}),s.jsxs(q,{sx:{mt:2},children:["Seleccionado: ",e?e.format("YYYY-MM-DD HH:mm"):"Ninguna"]})]})},parameters:{docs:{description:{story:"Muestra el `DateTimePicker` con un formato de fecha y hora personalizado en el campo de entrada, por ejemplo `DD/MM/YYYY HH:mm`."},source:{code:xo.trim()}}}},ze={render:()=>{const[e,o]=m.useState(K("2023-06-15T10:00"));return s.jsxs(Q,{sx:{width:300},children:[s.jsx(z,{label:"Fecha y Hora en Junio (Rango)",selectedDateTime:e,onDateTimeChange:o,viewRenderers:{hours:le,minutes:le},minutesStep:1,timeSteps:{minutes:1}}),s.jsxs(q,{sx:{mt:2},children:["Seleccionado: ",e?e.format("YYYY-MM-DD HH:mm"):"Ninguna"]})]})},parameters:{docs:{description:{story:"Muestra un `DateTimePicker` con todos los minutos habiles."},source:{code:mt.trim()}}}},Ue={render:()=>{const[e,o]=m.useState(K("2023-06-15T10:00"));return s.jsxs(Q,{sx:{width:300},children:[s.jsx(z,{label:"Fecha y Hora en Junio (Rango)",selectedDateTime:e,onDateTimeChange:o,viewRenderers:{hours:le,minutes:le},minutesStep:1,timeSteps:{minutes:1},ampm:!0}),s.jsxs(q,{sx:{mt:2},children:["Seleccionado: ",e?e.format("YYYY-MM-DD HH:mm"):"Ninguna"]})]})},parameters:{docs:{description:{story:"Muestra un `DateTimePicker` con formato de 24 horas."},source:{code:mt.trim()}}}};Ve.parameters={...Ve.parameters,docs:{...Ve.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs());
+    return <Box sx={{
+      width: 300
+    }}>
+          <DateTimePicker label="Seleccionar Fecha y Hora" selectedDateTime={selectedDateTime} onDateTimeChange={setSelectedDateTime} />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Un \`DateTimePicker\` básico con selección de fecha y hora actual."
+      },
+      source: {
+        code: BasicDateTimePickerDefinition.trim()
+      }
+    }
+  }
+}`,...Ve.parameters?.docs?.source}}};Ie.parameters={...Ie.parameters,docs:{...Ie.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs('2023-06-15T10:00'));
+    const minDateTime = dayjs('2023-06-01T09:00');
+    const maxDateTime = dayjs('2023-06-30T17:00');
+    return <Box sx={{
+      width: 300
+    }}>
+          <DateTimePicker label="Fecha y Hora en Junio (Rango)" selectedDateTime={selectedDateTime} onDateTimeChange={setSelectedDateTime} minDateTime={minDateTime} maxDateTime={maxDateTime} />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+          <Typography variant="caption" color="text.secondary">
+            (Rango: \${minDateTime.format('YYYY-MM-DD HH:mm')} a \${maxDateTime.format('YYYY-MM-DD HH:mm')})
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Muestra un \`DateTimePicker\` con límites de fecha y hora mínimos y máximos."
+      },
+      source: {
+        code: DateTimePickerWithMinMaxDefinition.trim()
+      }
+    }
+  }
+}`,...Ie.parameters?.docs?.source}}};Oe.parameters={...Oe.parameters,docs:{...Oe.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs());
+    return <Box sx={{
+      width: 300
+    }}>
+          <DateTimePicker label="Fecha y Hora (Deshabilitado)" selectedDateTime={selectedDateTime} onDateTimeChange={setSelectedDateTime} disabled />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Demuestra un \`DateTimePicker\` en estado deshabilitado."
+      },
+      source: {
+        code: DateTimePickerDisabledDefinition.trim()
+      }
+    }
+  }
+}`,...Oe.parameters?.docs?.source}}};Ne.parameters={...Ne.parameters,docs:{...Ne.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs('2024-07-24T14:30'));
+    return <Box sx={{
+      width: 300
+    }}>
+          <DateTimePicker label="Fecha y Hora (Solo Lectura)" selectedDateTime={selectedDateTime} onDateTimeChange={() => {}} // No permite cambios
+      readOnly />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Muestra el \`DateTimePicker\` en modo de solo lectura."
+      },
+      source: {
+        code: DateTimePickerReadOnlyDefinition.trim()
+      }
+    }
+  }
+}`,...Ne.parameters?.docs?.source}}};Ae.parameters={...Ae.parameters,docs:{...Ae.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(null);
+    return <Box sx={{
+      width: 300
+    }}>
+          <DateTimePicker label="Fecha y Hora (Sin Selección Inicial)" selectedDateTime={selectedDateTime} onDateTimeChange={setSelectedDateTime} />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Muestra un \`DateTimePicker\` sin fecha y hora seleccionadas inicialmente."
+      },
+      source: {
+        code: DateTimePickerWithInitialNullDefinition.trim()
+      }
+    }
+  }
+}`,...Ae.parameters?.docs?.source}}};Le.parameters={...Le.parameters,docs:{...Le.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(null);
+    return <Box sx={{
+      width: 300
+    }}>
+          <DateTimePicker label="Fecha y Hora" selectedDateTime={selectedDateTime} onDateTimeChange={setSelectedDateTime} inputFormat="DD/MM/YY HH:mm" />
+          <Typography sx={{
+        mt: 2
+      }} variant="caption" color="text.secondary">
+            Al estar vacío, el campo muestra la máscara del formato (DD/MM/AA HH:MM).
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "DateTimePicker vacío. Al no haber valor seleccionado, cada sección del campo muestra su placeholder según el \`inputFormat\` (por ejemplo \`DD/MM/AA HH:MM\`), funcionando como máscara visual."
+      },
+      source: {
+        code: DateTimePickerEmptyWithMaskDefinition.trim()
+      }
+    }
+  }
+}`,...Le.parameters?.docs?.source}}};$e.parameters={...$e.parameters,docs:{...$e.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs());
+    return <Box sx={{
+      width: 250
+    }}>
+          <DateTimePicker label="Fecha y Hora (Pequeño)" selectedDateTime={selectedDateTime} onDateTimeChange={setSelectedDateTime} slotProps={{
+        textField: {
+          size: 'small'
+        }
+      }} />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Demuestra cómo aplicar un tamaño más pequeño al \`DateTimePicker\`."
+      },
+      source: {
+        code: DateTimePickerSmallSizeDefinition.trim()
+      }
+    }
+  }
+}`,...$e.parameters?.docs?.source}}};We.parameters={...We.parameters,docs:{...We.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs());
+    return <Box sx={{
+      width: 300
+    }}>
+          <DateTimePicker label="Fecha y Hora (Con Botones por Defecto)" selectedDateTime={selectedDateTime} onDateTimeChange={setSelectedDateTime} slotProps={{
+        actionBar: {
+          actions: ['clear', 'cancel', 'accept']
+        }
+      }} />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Muestra el \`DateTimePicker\` con botones de acción ('Limpiar', 'Cancelar', 'Aceptar') en el pie del selector."
+      },
+      source: {
+        code: DateTimePickerWithButtonsDefinition.trim()
+      }
+    }
+  }
+}`,...We.parameters?.docs?.source}}};Ee.parameters={...Ee.parameters,docs:{...Ee.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs());
+    return <Box sx={{
+      width: 300
+    }}>
+          <DateTimePicker label="Fecha y Hora (Botones Personalizados)" selectedDateTime={selectedDateTime} onDateTimeChange={setSelectedDateTime} clearButtonText="Limpiar Todo" cancelButtonText="Descartar" acceptButtonText="Confirmar Selección" slotProps={{
+        actionBar: {
+          actions: ['clear', 'cancel', 'accept']
+        }
+      }} />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Demuestra cómo personalizar el texto de los botones de acción ('Limpiar', 'Cancelar', 'Aceptar') en el \`DateTimePicker\`."
+      },
+      source: {
+        code: DateTimePickerWithCustomButtonTextDefinition.trim()
+      }
+    }
+  }
+}`,...Ee.parameters?.docs?.source}}};_e.parameters={..._e.parameters,docs:{..._e.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs());
+    return <Box sx={{
+      width: 300
+    }}>
+          <DateTimePicker label="Fecha y Hora (Formato dd/MM/YYYY HH:mm)" selectedDateTime={selectedDateTime} onDateTimeChange={setSelectedDateTime} inputFormat="DD/MM/YYYY HH:mm" // Custom date format
+      />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Muestra el \`DateTimePicker\` con un formato de fecha y hora personalizado en el campo de entrada, por ejemplo \`DD/MM/YYYY HH:mm\`."
+      },
+      source: {
+        code: DateTimePickerWithCustomInputFormatDefinition.trim()
+      }
+    }
+  }
+}`,..._e.parameters?.docs?.source}}};ze.parameters={...ze.parameters,docs:{...ze.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs('2023-06-15T10:00'));
+    return <Box sx={{
+      width: 300
+    }}>
+          <DateTimePicker label="Fecha y Hora en Junio (Rango)" selectedDateTime={selectedDateTime} onDateTimeChange={setSelectedDateTime} viewRenderers={{
+        hours: renderMultiSectionDigitalClockTimeView,
+        minutes: renderMultiSectionDigitalClockTimeView
+      }} minutesStep={1} timeSteps={{
+        minutes: 1
+      }} // <-- clave en varias versiones 
+      />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Muestra un \`DateTimePicker\` con todos los minutos habiles."
+      },
+      source: {
+        code: DateTimePickerWithMinMaxDefinition.trim()
+      }
+    }
+  }
+}`,...ze.parameters?.docs?.source}}};Ue.parameters={...Ue.parameters,docs:{...Ue.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [selectedDateTime, setSelectedDateTime] = useState<Dayjs | null>(dayjs('2023-06-15T10:00'));
+    return <Box sx={{
+      width: 300
+    }}>
+          <DateTimePicker label="Fecha y Hora en Junio (Rango)" selectedDateTime={selectedDateTime} onDateTimeChange={setSelectedDateTime} viewRenderers={{
+        hours: renderMultiSectionDigitalClockTimeView,
+        minutes: renderMultiSectionDigitalClockTimeView
+      }} minutesStep={1} timeSteps={{
+        minutes: 1
+      }} // <-- clave en varias versiones 
+      ampm={true} />
+          <Typography sx={{
+        mt: 2
+      }}>
+            Seleccionado: {selectedDateTime ? selectedDateTime.format('YYYY-MM-DD HH:mm') : 'Ninguna'}
+          </Typography>
+        </Box>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Muestra un \`DateTimePicker\` con formato de 24 horas."
+      },
+      source: {
+        code: DateTimePickerWithMinMaxDefinition.trim()
+      }
+    }
+  }
+}`,...Ue.parameters?.docs?.source}}};const Ai=["BasicDateTimePicker","DateTimePickerWithMinMax","DateTimePickerDisabled","DateTimePickerReadOnly","DateTimePickerWithInitialNull","DateTimePickerEmptyWithMask","DateTimePickerSmallSize","DateTimePickerWithButtons","DateTimePickerWithCustomButtonText","DateTimePickerWithCustomInputFormat","DateTimePickerWithAllMinutes","DateTimePicker24h"];export{Ve as BasicDateTimePicker,Ue as DateTimePicker24h,Oe as DateTimePickerDisabled,Le as DateTimePickerEmptyWithMask,Ne as DateTimePickerReadOnly,$e as DateTimePickerSmallSize,ze as DateTimePickerWithAllMinutes,We as DateTimePickerWithButtons,Ee as DateTimePickerWithCustomButtonText,_e as DateTimePickerWithCustomInputFormat,Ae as DateTimePickerWithInitialNull,Ie as DateTimePickerWithMinMax,Ai as __namedExportsOrder,Ni as default};