{"version":3,"sources":["jsdelivr-header.js","/gh/Terrehaght/js-jetpack-compose@main/js-jetpack-compose/material-views.js"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,ACHA,MAAM,kBAAoB,MACtB,MAAM,GACF,EAAE,YACF,GACA,OAAO,gBAAgB,OAAS,CAAC,EAC/B,EAAiB,IAAI,IAKrB,EAAe,CAAC,EAAI,KACtB,GAAI,EAAe,IAAI,GAAK,OAC5B,MAAM,EAAQ,SAAS,cAAc,SACrC,EAAM,GAAK,sBAAsB,IACjC,EAAM,YAAc,EACpB,SAAS,KAAK,YAAY,GAC1B,EAAe,IAAI,IAIvB,EAAa,oBAAqB,mxcA6kBlC,IAAI,EAAY,EAChB,MAAM,EAAc,GAAW,GAAG,OAAY,IAExC,EAAY,CAAC,EAAK,IAIb,QAHG,SAAS,EAAI,MAAM,EAAG,GAAI,QAC1B,SAAS,EAAI,MAAM,EAAG,GAAI,QAC1B,SAAS,EAAI,MAAM,EAAG,GAAI,QACH,KAG/B,EAAgB,GAIX,MAHG,SAAS,EAAI,MAAM,EAAG,GAAI,IAAM,KAGvB,MAFT,SAAS,EAAI,MAAM,EAAG,GAAI,IAAM,KAEX,MADrB,SAAS,EAAI,MAAM,EAAG,GAAI,IAAM,KA43B9C,MACI,GAAI,SAAS,eAAe,yBAA0B,OACtD,MAAM,EAAQ,SAAS,cAAc,SACrC,EAAM,GAAK,wBACX,EAAM,YAAc,y9DAoDpB,SAAS,KAAK,YAAY,EAC7B,EAzDD,GA4XA,EAAa,mBAAoB,qvQAmWrC,MA6nCU,EAAa,CAAC,EAAU,KAE1B,GADA,EAAQ,UAAY,GACf,EAEL,GAAI,EAAS,SAAS,QAClB,EAAQ,UAAY,MACjB,CAEH,MAAM,EAAI,SAAS,cAAc,KACjC,EAAE,UAAY,EACd,EAAQ,YAAY,EACxB,GAIE,EAAU,GAAsB,mBAAP,EAAoB,EAAG,GAAuB,iBAAR,EAAmB,GAAG,MAAU,EAgnCxE,MACzB,GAAI,SAAS,eAAe,+BAAgC,OAE5D,MAAM,EAAQ,SAAS,cAAc,SACrC,EAAM,GAAK,8BACX,EAAM,YAAc,4jOAsRpB,SAAS,KAAK,YAAY,IAI9B,GA+YA,MAAO,CACH,SA//IU,CAAC,EAAQ,CAAC,KACxB,MAAM,KACF,EAAO,GAAE,OACT,GAAS,EAAK,SACd,EAAW,GAAE,UACb,EAAS,UACT,EAAY,SAAQ,QACpB,EAAO,QACP,EAAO,OACP,EAAM,OACN,EAAM,UACN,EAAS,MACT,EAAK,OACL,EAAM,SACN,EAAQ,UACR,GAAY,EAAK,GACjB,EAAE,UACF,EAAS,WACT,GAAa,EAAK,eAClB,EAAiB,EAAC,YAClB,EAAc,WAAU,YACxB,EAAc,WAAU,aACxB,EAAe,QAAO,aACtB,EAAe,6BAA4B,SAC3C,EAAW,KAAI,WACf,EAAa,KAAI,QACjB,EAAU,KAAI,KAEd,EAAO,KAAI,SACX,EAAW,KAAI,UACf,EAAY,KAAI,YAChB,EAAc,QAAO,YACrB,EAAc,EAAC,WAEf,EAAa,KAAI,aACjB,EAAe,EAAC,OAChB,EAAS,KAAI,UACb,EAAY,GACZ,EAEE,EAAY,SAAS,cAAc,OACnC,EAAW,SAAS,cAAc,OAClC,EAAS,EAAK,GAAG,SAAY,YAAY,KAAK,SAAS,SAAS,IAAI,OAAO,EAAG,KAG9E,EAAU,GAAsB,mBAAP,EAAoB,EAAG,GAAuB,iBAAR,EAAmB,GAAG,MAAU,EAErG,IAAI,GAAa,EACb,EAAa,KACb,EAAiB,KACjB,EAAc,KAGlB,MAAM,EAAa,CACf,SAAU,EAAO,GACjB,MAAO,GAAa,uBACpB,WAA0B,SAAd,EAAuB,OAAS,SAC5C,UAAyB,WAAd,EAAyB,SAAW,SAC/C,UAAW,aACX,WAAY,MACZ,OAAQ,IACR,UAAW,cA+Cf,GA3CA,EAAU,MAAM,QAAU,OAC1B,EAAU,MAAM,UAAY,aAC5B,EAAU,aAAa,OAAQ,UAG3B,IAAY,EAAU,MAAM,WAAa,GACzC,IAAc,EAAU,MAAM,aAAe,EAAO,IACpD,IAAQ,EAAU,MAAM,OAAS,GACjC,EAAY,IACZ,EAAU,MAAM,UAAY,KAAiB,EAAZ,OAA+B,EAAZ,kBAA8B,GAAkB,IAAZ,OAIxF,GAAyB,QAAhB,GAAyC,WAAhB,GAGlC,EAAU,MAAM,cAAgB,MAEhC,EAAU,MAAM,WAAa,UAJ7B,EAAU,MAAM,cAAgB,SAQpB,WAAZ,GACA,EAAU,MAAM,WAAa,SAC7B,EAAU,MAAM,eAAiB,UACd,QAAZ,GAAiC,UAAZ,EAC5B,EAAU,MAAM,eAAiB,WACd,UAAZ,GAAmC,SAAZ,IAC9B,EAAU,MAAM,eAAiB,cAGjC,IAAS,EAAU,MAAM,QAAU,EAAO,IAC1C,IAAQ,EAAU,MAAM,OAAS,EAAO,IACxC,IAAQ,EAAU,MAAM,KAAO,GAC/B,IAAW,EAAU,MAAM,UAAY,GAE7B,iBAAV,EAA0B,EAAU,MAAM,MAAQ,OACnC,iBAAV,EAA0B,EAAU,MAAM,MAAQ,cAClD,IAAO,EAAU,MAAM,MAAQ,EAAO,IAChC,iBAAX,EAA2B,EAAU,MAAM,OAAS,OAC/C,IAAQ,EAAU,MAAM,OAAS,EAAO,IAG7C,EAAM,CACN,EAAc,SAAS,cAAc,KAErC,MAAM,EAAY,EAAK,SAAS,MAAQ,EAAO,MAAM,IACrD,EAAY,UAAY,EACxB,EAAY,MAAM,SAAW,EAAO,GAAY,GAChD,EAAY,MAAM,MAAQ,GAAa,GAAa,uBACpD,EAAY,MAAM,WAAa,IAC/B,EAAY,MAAM,QAAU,OAC5B,EAAY,MAAM,WAAa,SAC/B,EAAY,MAAM,eAAiB,SAEnC,EAAY,MAAM,WAAa,IAGX,UAAhB,EACA,EAAY,MAAM,YAAc,EAAO,GAChB,QAAhB,EACP,EAAY,MAAM,WAAa,EAAO,GACf,QAAhB,EACP,EAAY,MAAM,aAAe,EAAO,GACjB,WAAhB,IACP,EAAY,MAAM,UAAY,EAAO,GAE7C,CAGA,MAAM,EAAiB,SAAS,cAAc,OAC9C,EAAe,MAAM,QAAU,OAC/B,EAAe,MAAM,cAAgB,SACrC,EAAe,MAAM,KAAO,IAC5B,EAAe,MAAM,SAAW,IAEhC,EAAe,MAAM,WAAY,GAAyB,UAAhB,GAA2C,QAAhB,EAAoC,UAAX,SAG9F,OAAO,OAAO,EAAS,MAAO,GAC9B,EAAS,MAAM,MAAQ,OACvB,EAAS,GAAK,EAEV,EAAQ,EAAS,UAAY,EAC5B,EAAS,YAAc,EAEZ,WAAZ,EAAsB,EAAS,MAAM,UAAY,SAChC,QAAZ,GAAiC,UAAZ,IAAqB,EAAS,MAAM,UAAY,SAE1E,GAEA,EAAS,iBAAiB,QAAS,GAGvC,MAAM,EAAsB,KACxB,EAAS,MAAM,QAAU,cACzB,EAAS,MAAM,gBAAkB,EAAe,WAChD,EAAS,MAAM,gBAAkB,WACjC,EAAS,MAAM,SAAW,SACtB,GAAY,EAAW,aAAa,gBAAiB,UAWvD,EAAkB,KACpB,GAAK,GAAe,GACU,IAA1B,EAAS,eAER,EAAY,CACb,MAAM,EAAc,EAAS,aAAgB,EAAS,aAAe,EACrE,EAAW,MAAM,QAAU,EAAc,eAAiB,MAC9D,GAIJ,GAAI,EAAY,CACZ,IACA,EAAe,YAAY,GAE3B,EAAa,SAAS,cAAc,UACpC,EAAW,YAAc,EACzB,EAAW,aAAa,gBAAiB,GACzC,EAAW,aAAa,gBAAiB,SAEzC,MAAM,EAAW,CACb,MAAU,CAAE,UAAW,aAAc,UAAW,QAChD,KAAU,CAAE,UAAW,aAAc,UAAW,QAChD,OAAU,CAAE,UAAW,SAAe,UAAW,UACjD,IAAU,CAAE,UAAW,WAAe,UAAW,SACjD,MAAU,CAAE,UAAW,WAAe,UAAW,UAE/C,EAAW,EAAS,IAAiB,EAAgB,MAE3D,EAAW,MAAM,WAAe,OAChC,EAAW,MAAM,OAAe,OAChC,EAAW,MAAM,MAAe,EAChC,EAAW,MAAM,SAAe,EAAO,GACvC,EAAW,MAAM,WAAe,MAChC,EAAW,MAAM,QAAe,QAChC,EAAW,MAAM,UAAe,MAChC,EAAW,MAAM,QAAe,OAChC,EAAW,MAAM,UAAe,EAAS,UACzC,EAAW,MAAM,UAAe,EAAS,UACzC,EAAW,MAAM,WAAe,UAChC,EAAW,MAAM,OAAe,UAEhC,EAAW,iBAAiB,aAAc,IAAM,EAAW,MAAM,eAAiB,aAClF,EAAW,iBAAiB,aAAc,IAAM,EAAW,MAAM,eAAiB,QAElF,EAAW,iBAAiB,QAAU,IAClC,EAAE,iBACF,EAAE,kBACF,GAAc,EAEV,GAzDR,EAAS,MAAM,QAAU,QACzB,EAAS,MAAM,gBAAkB,QACjC,EAAS,MAAM,gBAAkB,QACjC,EAAS,MAAM,SAAW,UACtB,GAAY,EAAW,aAAa,gBAAiB,QAuDjD,EAAW,YAAc,EACrB,GAAU,MAEd,IACA,EAAW,YAAc,EACrB,GAAY,OAIxB,EAAe,YAAY,GAEvB,mBAAoB,QACpB,EAAiB,IAAI,eAAe,KAChC,OAAO,sBAAsB,KAEjC,EAAe,QAAQ,GACvB,EAAe,QAAQ,IAEvB,WAAW,EAAiB,IAGpC,MACQ,IACA,EAAS,MAAM,QAAU,cACzB,EAAS,MAAM,gBAAkB,EAAS,WAC1C,EAAS,MAAM,gBAAkB,WACjC,EAAS,MAAM,SAAW,UAE1B,IAAc,IACd,EAAS,MAAM,SAAW,SAC1B,EAAS,MAAM,aAAe,WAC9B,EAAS,MAAM,WAAa,SAC5B,EAAS,MAAM,QAAU,SAE7B,EAAe,YAAY,GAmB/B,OAfI,EACoB,QAAhB,GAAyC,WAAhB,GACzB,EAAU,YAAY,GACtB,EAAU,YAAY,KAEtB,EAAU,YAAY,GACtB,EAAU,YAAY,IAG1B,EAAU,YAAY,GAGtB,IAAI,EAAU,GAAK,GACnB,IAAW,EAAU,UAAY,GAE9B,CACH,WAAY,IAAM,EAElB,QAAU,IACF,EAAQ,EAAS,UAAY,EAC5B,EAAS,YAAc,EAExB,IACA,GAAa,EACb,IACI,IACA,EAAW,YAAc,EACzB,sBAAsB,MAKlC,aAAe,IACX,EAAS,MAAM,MAAQ,GAG3B,QAAU,IACN,GAAI,GAAe,EAAS,CACxB,MAAM,EAAY,EAAQ,SAAS,MAAQ,EAAU,MAAM,IAC3D,EAAY,UAAY,CAC5B,GAGJ,aAAe,IACP,IACA,EAAY,MAAM,MAAQ,IAIlC,cAAgB,IACZ,EAAU,MAAM,WAAa,GAGjC,QAAS,IAAM,EAAS,YAExB,OAAQ,KACA,IAAe,GAAc,GAA2C,SAA7B,EAAW,MAAM,SAC5D,EAAW,SAInB,SAAU,KACF,GAAc,GAAc,GAC5B,EAAW,SAInB,WAAY,IAAM,EAElB,QAAS,KACD,IACA,EAAe,aACf,EAAiB,MAErB,EAAU,YA6qId,OA5jEW,CAAC,EAAQ,CAAC,KACrB,MAAM,KACF,EAAO,SAAQ,QAAE,EAAO,WAAE,EAAU,UAAE,EAAS,QAC3C,EAAU,GAAE,OAAE,EAAM,OAAE,EAAM,UAAE,EAAS,MAAE,EAAK,OAAE,EAAM,SACtD,GAAW,EAAK,GAAE,EAAE,UAAE,EAAS,QAAE,EAAU,SAAQ,KAAE,GACzD,EAEE,EAAS,SAAS,cAAc,UACtC,EAAO,SAAW,EAElB,MA6BM,EAAa,CACf,QAAS,EAAG,GACZ,aAAc,OACd,OAAQ,EAAW,cAAgB,UACnC,SAAU,OACV,WAAY,MACZ,WAAY,UACZ,WAAY,WACZ,UAAW,aACX,QAAS,cACT,WAAY,SACZ,eAAgB,SAChB,IAAK,MACL,QAAS,EAAW,GAAM,KA1CR,CAClB,OAAQ,CACJ,WAAY,oBACZ,MAAO,uBACP,OAAQ,QAEZ,SAAU,CACN,WAAY,cACZ,MAAO,oBACP,OAAQ,+BAEZ,KAAM,CACF,WAAY,cACZ,MAAO,oBACP,OAAQ,QAEZ,MAAO,CACH,WAAY,gCACZ,MAAO,mCACP,OAAQ,QAEZ,SAAU,CACN,WAAY,kCACZ,MAAO,oBACP,OAAQ,OACR,UAAW,+BAkBE,IAgBrB,GAbI,IAAY,EAAW,WAAa,GACpC,IAAW,EAAW,MAAQ,GAC9B,IAAQ,EAAW,OAAS,EAAG,IAC/B,IAAQ,EAAW,KAAO,GAC1B,IAAW,EAAW,UAAY,GACxB,iBAAV,EAA0B,EAAW,MAAQ,OACxC,IAAO,EAAW,MAAQ,EAAG,IAClC,IAAQ,EAAW,OAAS,EAAG,IAEnC,EAAY,EAAQ,GAChB,IAAI,EAAO,GAAK,GAChB,IAAW,EAAO,UAAY,GAE9B,EAAM,CACN,MAAM,EAAS,SAAS,cAAc,KACtC,EAAO,UAAY,EACnB,EAAO,YAAY,EACvB,CACA,MAAM,EAAW,SAAS,cAAc,QAMxC,OALA,EAAS,YAAc,EACvB,EAAO,YAAY,IAEd,GAAY,GAAS,EAAO,iBAAiB,QAAS,GAEpD,CACH,WAAY,IAAM,EAClB,QAAU,IACN,EAAS,YAAc,GAE3B,WAAa,IACT,EAAO,UAAY,EACnB,EAAO,MAAM,QAAU,EAAU,IAAM,MACvC,EAAO,MAAM,OAAS,EAAU,UAAY,iBAq+DpD,KA79DS,CAAC,EAAQ,CAAC,EAAG,EAAW,MACjC,MAAM,UACF,EAAY,EAAC,QACT,EAAU,GAAE,OACZ,EAAS,EAAC,aACV,EAAe,GAAE,MACjB,EAAK,OACL,EAAM,QACN,EAAO,GACP,EAAE,UACF,EAAS,QACT,EAAU,WAAU,YAEpB,EAAc,EAAC,YACf,EAAc,oBAAmB,gBAEjC,EAAe,UAEf,GAAY,EAAK,eACjB,EAAc,SAEd,EAAW,UAAS,WAEpB,EAAa,gBAAe,OAE5B,GAAS,EAAI,SAEb,GAAW,EAAK,aAEhB,EAAe,aAAY,eAC3B,EAAiB,aAAY,IAC7B,EAAM,GACV,EAEE,EAAO,SAAS,cAAc,OAE9B,EAAgB,CAClB,SAAU,CACN,WAAY,GAAmB,kCAC/B,UAAW,KAAK,OAA2B,EAAZ,uBAEnC,OAAQ,CACJ,WAAY,GAAmB,sCAC/B,UAAW,QAEf,SAAU,CACN,WAAY,GAAmB,oBAC/B,OAAQ,sCACR,UAAW,SAIb,EAAS,CACX,aAAc,EAAG,GACjB,QAAS,EAAG,GACZ,OAAQ,EAAG,GACX,UAAW,aACX,QAAS,OACT,cAAe,SACf,WAAY,EACZ,eAAgB,EAChB,IAAK,EAAG,GACR,SAAU,EACV,WAAY,EACZ,SAAU,cACP,EAAc,IAuBrB,GAnBI,EAAc,IACd,EAAO,OAAS,GAAG,EAAG,YAAsB,IAE5C,EAAO,aAAe,EAAG,IAIf,iBAAV,EAA0B,EAAO,MAAQ,OACpC,IAAO,EAAO,MAAQ,EAAG,IACnB,iBAAX,EAA2B,EAAO,OAAS,OACtC,IAAQ,EAAO,OAAS,EAAG,IAGhC,IACA,EAAO,QAAU,OACjB,EAAO,cAAgB,QAIvB,IAAY,EAAU,CAKtB,GAJA,EAAO,OAAS,UAChB,EAAK,iBAAiB,QAAS,GAG3B,EAAW,CACX,MAAM,EAAY,GAAkB,EAAY,EAChD,EAAK,iBAAiB,aAAc,KAChC,EAAK,MAAM,UAAY,KAAK,OAA2B,EAAZ,uBAC3C,EAAK,MAAM,UAAY,qBAE3B,EAAK,iBAAiB,aAAc,KAChC,EAAK,MAAM,UAAY,EAAO,UAC9B,EAAK,MAAM,UAAY,iBAE/B,CAGA,GAAI,IACA,EAAK,MAAM,SAAW,SACtB,EAAK,iBAAiB,QAAU,IAC5B,MAAM,EAAW,SAAS,cAAc,QAClC,EAAO,EAAK,wBACZ,EAAO,KAAK,IAAI,EAAK,MAAO,EAAK,QACjC,EAAI,EAAE,QAAU,EAAK,KAAO,EAAO,EACnC,EAAI,EAAE,QAAU,EAAK,IAAM,EAAO,EAExC,EAAS,MAAM,MAAQ,EAAS,MAAM,OAAS,GAAG,MAClD,EAAS,MAAM,KAAO,GAAG,MACzB,EAAS,MAAM,IAAM,GAAG,MACxB,EAAS,MAAM,SAAW,WAC1B,EAAS,MAAM,aAAe,MAC9B,EAAS,MAAM,WAAa,wBAC5B,EAAS,MAAM,UAAY,WAC3B,EAAS,MAAM,UAAY,uBAC3B,EAAS,MAAM,cAAgB,OAE/B,EAAK,YAAY,GACjB,WAAW,IAAM,EAAS,SAAU,QAInC,SAAS,eAAe,qBAAqB,CAC9C,MAAM,EAAQ,SAAS,cAAc,SACrC,EAAM,GAAK,mBACX,EAAM,YAAc,uKAQpB,SAAS,KAAK,YAAY,EAC9B,CAER,CAcA,OAZA,EAAY,EAAM,GACd,IAAI,EAAK,GAAK,GACd,IAAW,EAAK,UAAY,GAEhC,EAAS,QAAQ,IACT,GAAqC,mBAArB,EAAM,WACtB,EAAK,YAAY,EAAM,cAChB,aAAiB,aACxB,EAAK,YAAY,KAIlB,CACH,WAAY,IAAM,EAElB,aAAc,CAAC,EAAO,KAClB,EAAK,MAAM,OAAS,GAAG,EAAG,YAAgB,KAE9C,aAAe,IACX,EAAK,MAAM,aAAe,EAAG,IAEjC,gBAAkB,IACd,EAAK,MAAM,UAAY,KAAK,OAAiB,EAAP,yBAszD9C,KAtvBS,CAAC,EAAQ,CAAC,KACnB,MAAM,KACF,EAAI,KACJ,EAAO,GAAE,MACT,EAAK,OACL,EAAM,QACN,GACA,EACE,EAAO,SAAS,cAAc,KACpC,EAAK,UAAY,EAEjB,MAAM,EAAS,CACX,SAAU,EAAG,GACb,MAAO,GAAS,uBAChB,QAAS,cACT,WAAY,SACZ,eAAgB,UASpB,OAPI,IAAQ,EAAO,OAAS,EAAG,IAC3B,IACA,EAAO,OAAS,UAChB,EAAK,iBAAiB,QAAS,IAGnC,EAAY,EAAM,GACX,CACH,WAAY,IAAM,IA6tBtB,QAttBY,CAAC,EAAQ,CAAC,KACtB,MAAM,YACF,EAAc,aAAY,UAAE,EAAY,EAAC,MAAE,EAAK,OAAE,GAClD,EACE,EAAU,SAAS,cAAc,OAEjC,EAAS,CACX,gBAAiB,GAAS,4BAC1B,OAAQ,EAAS,EAAG,GAAU,KAYlC,MAToB,eAAhB,GACA,EAAO,OAAS,EAAG,GACnB,EAAO,MAAQ,SAEf,EAAO,MAAQ,EAAG,GAClB,EAAO,OAAS,QAGpB,EAAY,EAAS,GACd,CACH,WAAY,IAAM,IAksBtB,OA1CW,CAAC,EAAQ,CAAC,KACrB,MAAM,KACF,EAAO,GAAE,KAAE,EAAI,KAAE,EAAI,WAAE,EAAU,MAAE,EAAK,OAAE,GAC1C,EACE,EAAS,SAAS,cAAc,OAEhC,EAAS,CACX,MAAO,EAAG,GACV,OAAQ,EAAG,GACX,aAAc,MACd,WAAY,GAAc,8BAC1B,MAAO,GAAS,iCAChB,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,SAAU,EAAU,IAAP,GACb,WAAY,MACZ,WAAY,GAMhB,GAJI,IAAQ,EAAO,OAAS,EAAG,IAE/B,EAAY,EAAQ,GAEhB,EAAM,CACN,MAAM,EAAS,SAAS,cAAc,KACtC,EAAO,UAAY,EACnB,EAAO,YAAY,EACvB,MAAW,IACP,EAAO,YAAc,EAAK,OAAO,GAAG,eAGxC,MAAO,CACH,WAAY,IAAM,IAWtB,eA91EmB,CAAC,EAAQ,CAAC,KAC7B,MAAM,KACF,EAAO,SAAQ,QACX,EAAO,QACP,EAAU,SAAQ,KAClB,EAAO,SAAQ,YACf,EAAW,aACX,EAAY,SACZ,GAAW,EAAK,SAChB,GAAW,EAAK,UAChB,GAAY,EAAK,MACjB,EAAK,UACL,EAAS,YACT,EAAW,YACX,EAAW,KACX,EAAO,SAAQ,GACf,EAAE,UACF,EAAS,OACT,EAAM,OACN,EAAM,UACN,GACJ,EAEJ,IAAI,GAAY,EACZ,EAAkB,KAEtB,MAAM,EAAS,SAAS,cAAc,UACtC,EAAO,KAAO,EACd,EAAO,SAAW,EAGlB,MAAM,EAAU,CAAC,eAAgB,GACpB,WAAT,GAAmB,EAAQ,KAAK,GAChC,GAAU,EAAQ,KAAK,aACvB,GAAW,EAAQ,KAAK,aACxB,GAAU,EAAQ,KAAK,YACvB,GAAW,EAAQ,KAAK,GAE5B,EAAO,UAAY,EAAQ,KAAK,KAGhC,MAAM,EAAS,CAAC,EACZ,IAAQ,EAAO,OAAS,EAAG,IAC3B,IAAQ,EAAO,KAAO,GACtB,IAAW,EAAO,UAAY,GAClC,EAAY,EAAQ,GAEhB,IAAI,EAAO,GAAK,GA4BpB,GARI,GAjBqB,CAAC,IACtB,EAAO,QAAQ,MAAQ,EACvB,EAAO,MAAM,YAAY,oBAAqB,GAE9C,MAAM,EAAY,EAAa,GAAe,GAAM,UAAY,UAChE,EAAO,MAAM,YAAY,mBAAoB,GAC7C,EAAO,MAAM,YAAY,wBAAyB,EAAU,EAAa,MAGzD,WAAZ,GACA,EAAO,MAAM,WAAa,EAC1B,EAAO,MAAM,MAAQ,GACF,aAAZ,GAAsC,SAAZ,IACjC,EAAO,MAAM,MAAQ,IAIlB,CAAiB,GAGxB,IACA,EAAO,MAAM,MAAQ,GAIrB,GAAe,EAAa,CAC5B,MAAM,EAAS,GAAe,eACxB,EAAS,EAAc,GAAG,MAAkB,MAClD,EAAO,MAAM,OAAS,GAAG,WAAgB,GAC7C,CAGA,MAAM,EAAe,KAGjB,GAFA,EAAO,UAAY,GAEf,EAAU,CACV,MAAM,EAAO,GAAe,EACxB,IACA,EAAO,UAAY,aAAa,UAExC,KAAO,CACH,GAAI,EAAa,CACb,MAAM,EAAS,SAAS,cAAc,KACtC,EAAO,UAAY,EACnB,EAAO,YAAY,EACvB,CAEA,GAAI,EAAM,CACN,MAAM,EAAS,SAAS,cAAc,QACtC,EAAO,YAAc,EACrB,EAAO,YAAY,EACvB,CAEA,GAAI,EAAc,CACd,MAAM,EAAS,SAAS,cAAc,KACtC,EAAO,UAAY,EACnB,EAAO,YAAY,EACvB,CACJ,GAYJ,OATA,KAGK,GAAY,GACb,EAAO,iBAAiB,QAAU,IACzB,GAAW,EAAQ,KAIzB,CACH,WAAY,IAAM,EAClB,QAAU,IACN,IAAK,EAAW,CACZ,MAAM,EAAW,EAAO,cAAc,QAClC,IAAU,EAAS,YAAc,EACzC,GAEJ,QAAS,CAAC,EAAS,KACV,GAAW,KAEpB,WAAY,CAAC,EAAS,EAAc,MAChC,EAAY,EAER,GACA,EAAkB,EAAO,UACzB,EAAO,UAAU,IAAI,WACrB,EAAO,UAAY,sHAGvB,EAAc,SAAS,WAAuB,uCAI1C,EAAO,UAAU,OAAO,WACpB,IACA,EAAO,UAAY,EACnB,EAAkB,QAI9B,UAAW,IAAM,EACjB,YAAc,IACV,EAAO,SAAW,EAClB,EAAO,UAAU,OAAO,WAAY,IAExC,WAAa,IACT,EAAO,UAAU,OAAO,SAAU,WAAY,OAAQ,WAAY,SAClE,EAAO,UAAU,IAAI,IAEzB,MAAO,IAAM,EAAO,UA+rExB,eAvrEmB,CAAC,EAAQ,CAAC,KAC7B,MAAM,QACF,GAAU,EAAK,SACX,GAAW,EAAK,MAChB,EAAQ,GAAE,cACV,EAAgB,QAAO,SACvB,GAAW,EAAI,MACf,EAAK,SACL,EAAQ,GACR,EAAE,UACF,EAAS,KACT,EAAI,OACJ,EAAM,OACN,EAAM,UACN,GACJ,EAEE,EAAW,GAAM,EAAW,mBAG5B,EAAY,SAAS,cAAc,SACzC,EAAU,QAAU,EAEpB,MAAM,EAAU,CAAC,6BACb,GAAU,EAAQ,KAAK,YACvB,GAAW,EAAQ,KAAK,GAC5B,EAAU,UAAY,EAAQ,KAAK,KAGnC,MAAM,EAAS,CAAC,EAahB,IAAI,EAZA,IAAQ,EAAO,OAAS,EAAG,IAC3B,IAAQ,EAAO,KAAO,GACtB,IAAW,EAAO,UAAY,GAClC,EAAY,EAAW,GAGnB,IACA,EAAU,QAAQ,MAAQ,EAC1B,EAAU,MAAM,YAAY,oBAAqB,IAKjD,GAA2B,SAAlB,IACT,EAAU,SAAS,cAAc,QACjC,EAAQ,UAAY,wBACpB,EAAQ,YAAc,EACtB,EAAU,YAAY,IAI1B,MAAM,EAAW,SAAS,cAAc,OACxC,EAAS,UAAY,kBAGrB,MAAM,EAAQ,SAAS,cAAc,SACrC,EAAM,KAAO,WACb,EAAM,UAAY,wBAClB,EAAM,GAAK,EACP,IAAM,EAAM,KAAO,GACvB,EAAM,QAAU,EAChB,EAAM,SAAW,EAGjB,MAAM,EAAQ,SAAS,cAAc,OACrC,EAAM,UAAY,wBAGlB,MAAM,EAAQ,SAAS,cAAc,OA0BrC,OAzBA,EAAM,UAAY,wBACd,IACA,EAAM,UAAY,+BAGtB,EAAS,YAAY,GACrB,EAAS,YAAY,GACrB,EAAS,YAAY,GACrB,EAAU,YAAY,GAGlB,GAA2B,UAAlB,IACT,EAAU,SAAS,cAAc,QACjC,EAAQ,UAAY,wBACpB,EAAQ,YAAc,EACtB,EAAU,YAAY,IAItB,GACA,EAAM,iBAAiB,SAAU,KAC7B,EAAS,EAAM,WAIhB,CACH,WAAY,IAAM,EAClB,WAAY,IAAM,EAAM,QACxB,WAAa,IACT,EAAM,QAAU,GAEpB,OAAQ,KACJ,EAAM,SAAW,EAAM,QACnB,GAAU,EAAS,EAAM,UAEjC,YAAc,IACV,EAAM,SAAW,EACjB,EAAU,UAAU,OAAO,WAAY,IAE3C,SAAW,IACH,IAAS,EAAQ,YAAc,MA2kE3C,cAplHkB,CAAC,EAAQ,CAAC,KAC5B,MAAM,GACF,EAAE,KACF,EAAO,GAAE,MACT,EAAQ,QAAO,KACf,EAAO,OAAM,MACb,EAAQ,GAAE,YACV,EAAc,GAAE,WAChB,EAAa,GAAE,UACf,EAAY,GAAE,UACd,EAAY,KAAI,YAChB,GAAc,EAAK,SACnB,GAAW,EAAK,SAChB,GAAW,EAAK,YAChB,EAAc,KAAI,aAClB,EAAe,KAAI,eACnB,GAAiB,EAAI,MACrB,EAAQ,KAAI,aACZ,EAAe,MAAK,QACpB,EAAU,KAAI,UACd,EAAY,KAAI,KAChB,EAAO,EAAC,QACR,EAAU,KAAI,SACd,EAAW,KAAI,QACf,EAAU,KAAI,OACd,EAAS,KAAI,OACb,EAAM,OACN,EAAM,UACN,EAAS,MACT,EAAK,UACL,GACA,EAEE,EAAU,GAAM,EAAW,kBACjC,IAAI,GAAoB,EAGxB,MAAM,EAAY,SAAS,cAAc,OACnC,EAAmB,CAAC,4BACtB,GAAU,EAAiB,KAAK,2BAChC,GAAW,EAAiB,KAAK,GACrC,EAAU,UAAY,EAAiB,KAAK,KAG5C,MAAM,EAAkB,CAAC,EACrB,IAAQ,EAAgB,OAAS,EAAG,IACpC,IAAQ,EAAgB,KAAO,GAC/B,IAAW,EAAgB,UAAY,GAC7B,iBAAV,EAA0B,EAAgB,MAAQ,OAC7C,IAAO,EAAgB,MAAQ,EAAG,IAC3C,EAAY,EAAW,GAGvB,MAAM,EAAU,SAAS,cAAc,OAevC,IAAI,EAdJ,EAAQ,UAAY,yBAEhB,GACA,EAAQ,UAAU,IAAI,2BAItB,IACA,EAAQ,QAAQ,MAAQ,EACxB,EAAQ,MAAM,YAAY,0BAA2B,GACrD,EAAQ,MAAM,YAAY,gCAAiC,EAAU,EAAO,OAK5E,IACA,EAAQ,UAAU,IAAI,8BACtB,EAAgB,SAAS,cAAc,QACvC,EAAc,UAAY,8BAC1B,EAAc,UAAY,aAAa,UACvC,EAAQ,YAAY,IAIxB,MAAM,EAAsB,aAAT,EACb,EAAQ,SAAS,cAAc,EAAa,WAAa,SAC/D,EAAM,UAAY,uBAClB,EAAM,GAAK,EACP,IAAM,EAAM,KAAO,GAElB,EAGD,EAAM,KAAO,EAFb,EAAM,KAAgB,aAAT,EAAsB,WAAa,EAKpD,EAAM,MAAQ,EACd,EAAM,YAAc,GAAe,EACnC,EAAM,SAAW,EACjB,EAAM,aAAe,EACjB,IAAW,EAAM,UAAY,GAC7B,IAAS,EAAM,QAAU,GACzB,IAAW,EAAM,UAAY,GAC7B,IAAU,EAAM,UAAW,GAE/B,EAAQ,YAAY,GAGpB,MAAM,EAAU,SAAS,cAAc,SAOvC,IAAI,EANJ,EAAQ,UAAY,uBACpB,EAAQ,aAAa,MAAO,GAC5B,EAAQ,YAAc,EACtB,EAAQ,YAAY,GAwBpB,IAAI,EAAW,EAAc,GApBP,GAA0B,aAAT,GAAuB,KAE1D,EAAQ,UAAU,IAAI,+BACtB,EAAiB,SAAS,cAAc,QACxC,EAAe,UAAY,+BAEd,aAAT,GAAuB,GACvB,EAAe,UAAY,6BAC3B,EAAe,aAAa,OAAQ,UACpC,EAAe,aAAa,aAAc,+BACnC,IACP,EAAe,UAAY,aAAa,WAG5C,EAAQ,YAAY,IAGxB,EAAU,YAAY,IAIlB,GAAc,GAAa,KAC3B,EAAY,SAAS,cAAc,OACnC,EAAU,UAAY,wBAEtB,EAAe,SAAS,cAAc,QACtC,EAAa,UAAY,6BACzB,EAAa,YAAc,GAAa,EACxC,EAAU,YAAY,GAElB,GAAe,IACf,EAAY,SAAS,cAAc,QACnC,EAAU,UAAY,yBACtB,EAAU,YAAc,GAAG,EAAM,UAAU,IAC3C,EAAU,YAAY,IAG1B,EAAU,YAAY,KAItB,GAAS,IACT,EAAQ,UAAU,IAAI,0BAI1B,MAAM,EAAgB,KACd,GAAa,IACb,EAAU,YAAc,GAAG,EAAM,MAAM,UAAU,MAiDzD,OApCA,EAAM,iBAAiB,QAAS,KAC5B,EAAQ,UAAU,IAAI,yBAA0B,0BAC5C,GAAS,EAAQ,EAAM,SAG/B,EAAM,iBAAiB,OAAQ,KAC3B,EAAQ,UAAU,OAAO,0BAEpB,EAAM,OAAU,GACjB,EAAQ,UAAU,OAAO,0BAEzB,GAAQ,EAAO,EAAM,SAG7B,EAAM,iBAAiB,QAAS,KAC5B,IACI,GAAS,EAAQ,EAAM,SAG/B,EAAM,iBAAiB,SAAU,KACzB,GAAU,EAAS,EAAM,SAGjC,EAAQ,iBAAiB,QAAU,IAC1B,GAAY,EAAE,SAAW,GAC1B,EAAM,UAIV,GAA2B,aAAT,GAAuB,GACzC,EAAe,iBAAiB,QAAU,IACtC,EAAE,kBAtCN,GAAqB,EACrB,EAAM,KAAO,EAAoB,OAAS,WAC7B,EAAe,cAAc,KACrC,UAAY,EAAoB,aAAe,eAwCjD,CACH,WAAY,IAAM,EAClB,SAAU,IAAM,EAChB,SAAU,IAAM,EAAM,MACtB,SAAW,IACP,EAAM,MAAQ,EACV,GAAY,EACZ,EAAQ,UAAU,IAAI,0BAEtB,EAAQ,UAAU,OAAO,0BAE7B,KAEJ,SAAW,IACP,EAAQ,UAAU,OAAO,0BACzB,EAAQ,UAAU,IAAI,wBAClB,IACA,EAAa,YAAc,GAAW,GAAa,UAG3D,WAAa,IACT,EAAQ,UAAU,OAAO,wBACzB,EAAQ,UAAU,IAAI,0BAClB,IACA,EAAa,YAAc,GAAW,YAG9C,WAAY,KACR,EAAQ,UAAU,OAAO,uBAAwB,0BAC7C,IACA,EAAa,YAAc,GAAc,KAGjD,YAAc,IACV,EAAM,SAAW,EACjB,EAAQ,UAAU,OAAO,0BAA2B,IAExD,MAAO,IAAM,EAAM,QACnB,KAAM,IAAM,EAAM,OAClB,MAAO,KACH,EAAM,MAAQ,GACd,MAAM,EAAkB,CAAC,uBAAwB,0BAE5C,GAAY,EAAgB,KAAK,0BACtC,EAAQ,UAAU,UAAU,GACxB,IACA,EAAa,YAAc,GAAc,IAE7C,KAEJ,SAAU,KACN,MAAM,EAAQ,EAAM,gBASpB,OARK,EAMD,EAAQ,UAAU,OAAO,yBALzB,EAAQ,UAAU,IAAI,wBAClB,IACA,EAAa,YAAc,EAAM,oBAKlC,KA00Gf,gBAp7FgB,CAAC,EAAQ,CAAC,KAC9B,MAAM,GACF,EAAE,KACF,EAAO,GAAE,MACT,EAAQ,SAAQ,QAChB,EAAU,GAAE,MACZ,EAAQ,KAAI,YACZ,EAAc,GAAE,WAChB,EAAa,GAAE,UACf,EAAY,GAAE,SACd,GAAW,EAAK,SAChB,GAAW,EAAK,WAChB,GAAa,EAAK,kBAClB,EAAoB,YAAW,YAC/B,EAAc,KAAI,MAClB,EAAQ,KAAI,UACZ,EAAY,uBAAsB,YAClC,EAAc,aAAY,cAC1B,GAAgB,EAAI,SACpB,GAAW,EAAK,WAChB,EAAa,KAAI,SACjB,EAAW,KAAI,SACf,EAAW,KAAI,OACf,EAAS,KAAI,QACb,EAAU,KAAI,OACd,EAAM,OACN,EAAM,UACN,EAAS,MACT,EAAK,UACL,GACA,EAEE,EAAY,GAAM,EAAW,oBACnC,IAAI,GAAS,EACT,EAAgB,EAChB,EAAkB,IAAI,GACtB,GAAY,EACZ,EAAgB,KAGpB,MAAM,EAAY,SAAS,cAAc,OACnC,EAAmB,CAAC,8BACtB,GAAU,EAAiB,KAAK,6BAChC,GAAW,EAAiB,KAAK,GACrC,EAAU,UAAY,EAAiB,KAAK,KAG5C,MAAM,EAAkB,CAAC,EACrB,IAAQ,EAAgB,OAAS,EAAG,IACpC,IAAQ,EAAgB,KAAO,GAC/B,IAAW,EAAgB,UAAY,GAC7B,iBAAV,EAA0B,EAAgB,MAAQ,OAC7C,IAAO,EAAgB,MAAQ,EAAG,IAC3C,EAAY,EAAW,GAGvB,MAAM,EAAe,SAAS,cAAc,UAC5C,EAAa,MAAM,QAAU,OAC7B,EAAa,GAAK,EACd,IAAM,EAAa,KAAO,GAC1B,IAAU,EAAa,UAAW,GAClC,IAAU,EAAa,UAAW,GACtC,EAAU,YAAY,GAGtB,MAAM,EAAQ,SAAS,cAAc,OAC/B,EAAe,CAAC,0BAClB,GAAU,EAAa,KAAK,6BAC5B,GAAa,EAAa,KAAK,6BACnC,EAAM,UAAY,EAAa,KAAK,KAGhC,IACA,EAAM,QAAQ,MAAQ,EACtB,EAAM,MAAM,YAAY,4BAA6B,GACrD,EAAM,MAAM,YAAY,kCAAmC,EAAU,EAAO,OAIhF,MAAM,EAAU,SAAS,cAAc,OAIvC,IAAI,EAHJ,EAAQ,UAAY,2BAIhB,IACA,EAAgB,SAAS,cAAc,QACvC,EAAc,UAAY,wBAC1B,EAAc,UAAY,aAAa,UACvC,EAAQ,YAAY,IAIxB,MAAM,EAAc,SAAS,cAAc,OAC3C,EAAY,UAAY,gCAExB,MAAM,EAAe,SAAS,cAAc,OAC5C,EAAa,UAAY,iCAEzB,MAAM,EAAkB,SAAS,cAAc,OAC/C,EAAgB,UAAY,+BAC5B,EAAgB,YAAc,GAAe,EAE7C,EAAY,YAAY,GACxB,EAAY,YAAY,GACxB,EAAQ,YAAY,GAEpB,EAAM,YAAY,GAGlB,MAAM,EAAU,SAAS,cAAc,SACvC,EAAQ,UAAY,yBACpB,EAAQ,YAAc,EACtB,EAAM,YAAY,GAGlB,MAAM,EAAQ,SAAS,cAAc,OACrC,EAAM,UAAY,yBAClB,EAAM,UAAY,qCAClB,EAAM,YAAY,GAElB,EAAU,YAAY,GAGtB,MAAM,EAAW,SAAS,cAAc,OAOxC,IAAI,EACJ,GAPA,EAAS,MAAM,WAAa,QAC5B,EAAS,UAAY,4BACrB,EAAS,MAAM,SAAW,QAC1B,EAAS,MAAM,OAAS,SAIpB,EAAY,CACZ,MAAM,EAAgB,SAAS,cAAc,OAC7C,EAAc,UAAY,kCAE1B,EAAc,SAAS,cAAc,SACrC,EAAY,KAAO,OACnB,EAAY,UAAY,0BACxB,EAAY,YAAc,EAE1B,EAAc,YAAY,GAC1B,EAAS,YAAY,EACzB,CAGA,MAAM,GAAmB,SAAS,cAAc,OAUhD,IAAI,GAAW,GATf,GAAiB,UAAY,2BAC7B,EAAS,YAAY,IAKrB,SAAS,KAAK,YAAY,IAItB,GAAc,KACd,GAAY,SAAS,cAAc,OACnC,GAAU,UAAY,0BAEtB,GAAe,SAAS,cAAc,QACtC,GAAa,UAAY,+BACzB,GAAa,YAAc,GAAa,EACxC,GAAU,YAAY,IAEtB,EAAU,YAAY,KAI1B,MAAM,GAAmB,KACrB,MAAM,EAAY,EAAM,wBAClB,EAAiB,EAAS,cAAgB,IAC1C,EAAiB,OAAO,YACxB,EAAgB,OAAO,WAKvB,GAJU,OAAO,QACP,OAAO,QAGJ,EAAiB,EAAU,QACxC,EAAa,EAAU,IAM7B,IAAI,EAAK,EAHgB,EAAa,GAAkB,EAAa,GAOjE,EAAM,EAAU,IAAM,EACtB,EAAS,UAAU,IAAI,oCACvB,EAAS,UAAU,OAAO,wCAG1B,EAAM,EAAU,OAChB,EAAS,UAAU,IAAI,sCACvB,EAAS,UAAU,OAAO,qCAI9B,EAAO,EAAU,KACjB,MAAM,EAAgB,EAAU,MAG5B,EAAO,EAAgB,IACvB,EAAO,EAAgB,EAAgB,IAEvC,EAAO,KACP,EAAO,IAIP,EAAM,KACN,EAAM,IAEN,EAAM,EAAiB,IACvB,EAAM,EAAiB,EAAiB,IAI5C,EAAS,MAAM,IAAM,GAAG,MACxB,EAAS,MAAM,KAAO,GAAG,MACzB,EAAS,MAAM,MAAQ,GAAG,MAC1B,EAAS,MAAM,UAAY,GAAG,KAAK,IAAI,EAAgB,EAAiB,EAAM,SAI5E,GAAa,KACA,SAAS,gBAAgB,UAAU,SAAS,SACvD,OAAO,WAAW,gCAAgC,SAGlD,EAAU,UAAU,IAAI,+BACxB,EAAU,UAAU,OAAO,kCAE3B,EAAU,UAAU,IAAI,gCACxB,EAAU,UAAU,OAAO,iCAK7B,GAAgB,IAAI,iBAAiB,IAAM,MACjD,GAAc,QAAQ,SAAS,gBAAiB,CAC5C,YAAY,EACZ,gBAAiB,CAAC,WAItB,MAAM,GAAqB,OAAO,WAAW,gCAC7C,GAAmB,iBAAiB,SAAU,IAG9C,MAAM,GAAoB,IACf,EAAQ,KAAK,GAAO,EAAI,QAAU,GAGvC,GAAwB,KAC1B,MAAM,EAAW,KAEb,GACA,EAAM,UAAU,IAAI,4BAChB,IAAO,EAAQ,MAAM,MAAQ,GAE7B,GAAiB,EAAS,OAC1B,EAAc,UAAY,aAAa,EAAS,cAGpD,EAAa,YAAc,EAAS,MACpC,EAAa,MAAM,QAAU,QAC7B,EAAgB,MAAM,QAAU,OAEhC,EAAa,MAAQ,EAAS,QAE9B,EAAM,UAAU,OAAO,4BACnB,IAAO,EAAQ,MAAM,MAAQ,IAE7B,GAAiB,IACjB,EAAc,UAAY,aAAa,WAG3C,EAAa,MAAM,QAAU,OAC7B,EAAgB,MAAM,QAAU,QAEhC,EAAa,MAAQ,KAIvB,GAAgB,CAAC,EAAO,KAG1B,GAFA,GAAiB,UAAY,GAEzB,EAAW,CACX,MAAM,EAAY,SAAS,cAAc,OAOzC,OANA,EAAU,UAAY,2BACtB,EAAU,UAAY,yEAEtB,oBAEA,GAAiB,YAAY,EAEjC,CAEA,GAAoB,IAAhB,EAAK,OAAc,CACnB,MAAM,EAAU,SAAS,cAAc,OAIvC,OAHA,EAAQ,UAAY,yBACpB,EAAQ,YAAc,OACtB,GAAiB,YAAY,EAEjC,CAEA,EAAK,QAAQ,IACT,MAAM,EAAW,SAAS,cAAc,OAClC,EAAgB,CAAC,2BAMvB,GALI,EAAO,QAAU,GAAe,EAAc,KAAK,6BACnD,EAAO,UAAU,EAAc,KAAK,6BACxC,EAAS,UAAY,EAAc,KAAK,KACxC,EAAS,QAAQ,MAAQ,EAAO,MAE5B,EAAO,KAAM,CACb,MAAM,EAAS,SAAS,cAAc,QACtC,EAAO,UAAY,+BACnB,EAAO,UAAY,aAAa,EAAO,aACvC,EAAS,YAAY,EACzB,CAEA,MAAM,EAAS,SAAS,cAAc,QAKtC,GAJA,EAAO,UAAY,+BACnB,EAAO,YAAc,EAAO,MAC5B,EAAS,YAAY,GAEjB,EAAe,CACf,MAAM,EAAU,SAAS,cAAc,QACvC,EAAQ,UAAY,gCACpB,EAAQ,UAAY,8BACpB,EAAS,YAAY,EACzB,CAEK,EAAO,UACR,EAAS,iBAAiB,QAAS,IAAM,GAAa,EAAO,QAGjE,GAAiB,YAAY,KAG7B,GAAY,GACZ,GAAiB,iBAAiB,SAAU,KAI9C,GAAe,KACjB,GAAI,EAAW,OAEf,MAAM,UACF,EAAS,aACT,EAAY,aACZ,GACA,GACA,EAAY,GAAgB,EAAe,IACvC,IACA,IAAW,GACX,EAAW,IAAM,IAAW,MAKlC,GAAgB,IAKlB,GAJA,EAAgB,EAChB,KACA,KAEI,EAAU,CACV,MAAM,EAAW,KACjB,EAAS,EAAK,EAClB,GAGE,GAAe,KACb,GAAY,IAEhB,GAAS,EACT,EAAM,UAAU,IAAI,4BACpB,EAAS,UAAU,IAAI,yBACnB,IAAO,EAAQ,MAAM,MAAQ,GAGjC,WAAW,KACP,MACD,IAEC,GAAc,GACd,WAAW,IAAM,EAAY,QAAS,KAGtC,GAAQ,MAGV,GAAgB,KACb,IAEL,GAAS,EACT,EAAM,UAAU,OAAO,4BACvB,EAAS,UAAU,OAAO,yBAEtB,IAAO,EAAQ,MAAM,MAAQ,EAAgB,EAAQ,IAErD,GAAc,IACd,EAAY,MAAQ,GACpB,EAAkB,IAAI,GACtB,MAGA,GAAS,MAGX,GAAiB,KACf,EAAQ,KACP,MAGH,GAAc,IAChB,EAAY,EACZ,MAwBJ,EAAM,iBAAiB,QAAS,IAE5B,IACA,EAAY,iBAAiB,QAAU,GAxBtB,CAAC,IAClB,GAAI,EACA,aAAa,GACb,EAAgB,WAAW,KACvB,IAAW,GACX,EAAS,EAAQ,IACb,EAAkB,EAClB,IAAW,GACX,GAAc,MAEnB,SACA,CACH,MAAM,EAAa,EAAM,cACzB,EAAkB,EAAQ,OAAO,GAC7B,EAAI,MAAM,cAAc,SAAS,IAErC,IACJ,GAO6C,CAAa,EAAE,OAAO,QACnE,EAAY,iBAAiB,QAAU,GAAM,EAAE,oBAInD,SAAS,iBAAiB,QAAU,IAC3B,EAAU,SAAS,EAAE,SAAY,EAAS,SAAS,EAAE,UAAW,GACjE,OAKR,OAAO,iBAAiB,SAAU,KAC1B,GAAQ,OACb,GAEH,OAAO,iBAAiB,SAAU,KAC1B,GAAQ,OAIhB,EAAM,iBAAiB,UAAY,IAC3B,IAEU,UAAV,EAAE,KAA6B,MAAV,EAAE,KACvB,EAAE,iBACF,MACiB,WAAV,EAAE,KAAoB,GAC7B,QAKR,KACA,KACA,KAGA,EAAQ,QAAQ,IACZ,MAAM,EAAW,SAAS,cAAc,UACxC,EAAS,MAAQ,EAAI,MACrB,EAAS,YAAc,EAAI,MACvB,EAAI,WAAU,EAAS,UAAW,GACtC,EAAa,YAAY,KAW7B,MAAO,CACH,WAAY,IAAM,EAClB,SAAU,IAAM,EAChB,SAAW,IACP,EAAgB,EAChB,MAEJ,kBAAmB,IAAM,KACzB,WAAa,IACT,EAAkB,IAAI,GAEtB,EAAa,UAAY,GACzB,EAAW,QAAQ,IACf,MAAM,EAAW,SAAS,cAAc,UACxC,EAAS,MAAQ,EAAI,MACrB,EAAS,YAAc,EAAI,MACvB,EAAI,WAAU,EAAS,UAAW,GACtC,EAAa,YAAY,KAG7B,KACA,MAEJ,UAAY,IACR,EAAgB,KAAK,GAErB,MAAM,EAAW,SAAS,cAAc,UACxC,EAAS,MAAQ,EAAO,MACxB,EAAS,YAAc,EAAO,MAC1B,EAAO,WAAU,EAAS,UAAW,GACzC,EAAa,YAAY,GAEzB,MAEJ,aAAe,IACX,EAAkB,EAAgB,OAAO,GAAO,EAAI,QAAU,GAE9D,MAAM,EAAW,MAAM,KAAK,EAAa,SAAS,KAAK,GAAO,EAAI,QAAU,GACxE,GAAU,EAAS,SAEnB,IAAkB,IAClB,EAAgB,KAChB,MAEJ,MAEJ,KAAM,GACN,MAAO,GACP,OAAQ,GACR,OAAQ,IAAM,EACd,cACA,SAAW,IACP,EAAM,UAAU,IAAI,0BAChB,KACA,GAAa,YAAc,GAAW,GAAa,UAG3D,WAAY,KACR,EAAM,UAAU,OAAO,0BACnB,KACA,GAAa,YAAc,GAAc,KAGjD,YAAc,IACV,EAAa,SAAW,EACxB,EAAM,UAAU,OAAO,4BAA6B,GAChD,GAAa,MAErB,MAAO,KACH,EAAgB,KAChB,KACI,IAAa,EAAY,MAAQ,IACrC,EAAkB,IAAI,GACtB,KACA,MAEJ,SAAU,KACN,MAAM,EAAQ,EAAa,gBAO3B,OANK,IACD,EAAM,UAAU,IAAI,0BAChB,KACA,GAAa,YAAc,EAAa,oBAGzC,GAEX,QA7FY,KACZ,GAAc,aACd,GAAmB,oBAAoB,SAAU,IAE7C,EAAS,YAAY,EAAS,WAAW,YAAY,MAm8EzD,cA7qIc,CAAC,EAAQ,CAAC,KAC5B,MAAM,IACF,EAAM,GAAE,IACR,EAAM,GAAE,MACR,EAAK,OACL,EAAM,YACN,EAAW,IACX,EAAM,QAAO,SACb,EAAW,SAAQ,aACnB,EAAe,EAAC,OAChB,EAAS,KAAI,YACb,EAAc,oBAAmB,YACjC,EAAc,QAAO,UACrB,EAAY,EAAC,QACb,EAAU,OAAM,UAChB,GAAY,EAAK,YACjB,EAAc,KAAI,YAClB,EAAW,cACX,EAAa,SACb,EAAQ,QACR,GAAU,EAAK,eACf,EAAiB,GAAG,KACpB,EAAO,EAAC,UACR,GAAY,EAAK,QACjB,EAAU,EAAC,OACX,EAAS,EAAC,MACV,GAAQ,EAAK,MACb,GAAQ,EAAK,aACb,GAAe,EAAI,gBACnB,EAAkB,GAAE,YACpB,GAAc,EAAI,WAClB,EAAa,EAAC,WACd,EAAa,IAAI,iBACjB,EAAmB,sBAAqB,sBACxC,EAAwB,2BAA0B,yBAClD,EAA2B,OAAM,QACjC,EAAO,OACP,EAAM,QACN,EAAO,QACP,EAAO,OACP,EAAM,QACN,EAAO,OACP,EAAM,UACN,EAAS,GACT,EAAE,UACF,EAAS,MACT,EAAK,UACL,GACA,EAEE,EAAQ,GAAM,EAAW,kBAC/B,IAAI,GAAY,EACZ,GAAW,EACX,EAAa,EACb,GAAe,KACf,IAAa,EAGjB,MAAM,GAAY,SAAS,cAAc,OACnC,GAAmB,CAAC,4BACtB,GAAW,GAAiB,KAAK,GACrC,GAAU,UAAY,GAAiB,KAAK,KAG5C,MAAM,GAAkB,CACpB,SAAU,WACV,QAAS,eACT,SAAU,SACV,aAAc,EAAG,GACjB,UAAW,cAcf,GAVc,iBAAV,EAA0B,GAAgB,MAAQ,OACnC,iBAAV,EAA0B,GAAgB,MAAQ,OAClD,IAAO,GAAgB,MAAQ,EAAG,IAG5B,iBAAX,EAA2B,GAAgB,OAAS,OACpC,iBAAX,EAA2B,GAAgB,OAAS,OACpD,IAAQ,GAAgB,OAAS,EAAG,IAGzC,EAAa,CACb,MAAM,EAAS,CACX,OAAQ,SACR,MAAO,MACP,MAAO,SACP,MAAO,OACP,OAAU,OACV,OAAQ,UACR,MAAO,UACP,MAAO,QAGX,GAAI,EAAO,GACP,GAAgB,WAAa,EAAO,GACpC,GAAgB,OAAS,SACtB,GAAI,EAAY,SAAS,KAAM,CAClC,MAAO,EAAG,GAAK,EAAY,MAAM,KAAK,IAAI,QAC1C,GAAgB,WAAiB,EAAI,EAAK,IAAb,IAC7B,GAAgB,OAAS,GAC7B,CACJ,CAQA,GALI,IACA,GAAgB,OAAS,GAAG,EAAG,MAAW,KAAe,KAIzD,EAAY,EAAG,CACf,MAAM,EAAkB,KAAK,IAAI,EAAY,GAAI,GAC3C,EAAmB,EAAZ,EACP,EAAqB,GAAZ,EACf,GAAgB,UAAY,KAAK,OAAe,qBAAwB,GAAwB,GAAlB,yCACpD,OAAqB,EAAT,qBAA8B,IAAyB,GAAlB,IAC/E,CAEI,IAAQ,GAAgB,OAAS,EAAG,IACpC,IAAS,GAAgB,QAAU,EAAG,IACtC,IAAQ,GAAgB,KAAO,GAC/B,IAAW,GAAgB,UAAY,GACvC,IAEA,GAAgB,WAAa,6CAGjC,EAAY,GAAW,IAGvB,MAAM,GAAU,SAAS,cAAc,OACvC,GAAQ,UAAY,yBACpB,EAAY,GAAS,CACjB,SAAU,EAAc,WAAa,WACrC,IAAK,IACL,KAAM,IACN,MAAO,OACP,OAAQ,OACR,WAAY,EACZ,QAAS,IACT,WAAY,oBACZ,cAAe,SAInB,MAAM,GAAiB,SAAS,cAAc,OAmB9C,GAlBA,GAAe,UAAY,iCAC3B,EAAY,GAAgB,CACxB,SAAU,WACV,IAAK,IACL,KAAM,QACN,MAAO,OACP,OAAQ,OACR,WAAY,sEAEN,yCAEN,UAAW,gBAAgB,2BAG/B,GAAQ,YAAY,IACpB,GAAU,YAAY,KAGjB,SAAS,eAAe,oCAAqC,CAC9D,MAAM,EAAQ,SAAS,cAAc,SACrC,EAAM,GAAK,mCACX,EAAM,YAAc,0NAUpB,SAAS,KAAK,YAAY,EAC9B,CAGA,MAAM,GAAM,SAAS,cAAc,OACnC,GAAI,GAAK,EACT,GAAI,UAAY,qBACZ,IAAK,GAAI,IAAM,GACf,IAAO,GAAI,MAAQ,GACnB,GAAW,GAAI,aAAa,aAAc,GAC1C,IAAS,GAAI,QAAU,GACvB,IAAa,GAAI,YAAc,GACnC,GAAI,UAAY,EAGhB,MAAM,GAAY,CACd,MAAO,OACP,OAAQ,OACR,UAAW,EACX,eAAgB,EAChB,QAAS,QACT,QAAS,EACT,WAAY,4DAIZ,IACA,GAAU,SAAW,WACrB,GAAU,IAAM,IAChB,GAAU,KAAO,KAIrB,MAAM,GAAa,GACf,GAAQ,GAAW,KAAK,UAAU,SAClC,GAAO,GAAW,KAAK,cACvB,GAAO,GAAW,KAAK,cACvB,GAAW,OAAS,IACpB,GAAU,UAAY,GAAW,KAAK,MAI1C,MAAM,GAAU,GACZ,EAAO,GAAG,GAAQ,KAAK,QAAQ,QAC/B,GAAW,GAAQ,KAAK,mBACxB,GAAQ,OAAS,IACjB,GAAU,OAAS,GAAQ,KAAK,MAGpC,EAAY,GAAK,IACjB,GAAU,YAAY,IAGtB,MAAM,GAAkB,IAAiB,GAAiB,GAC1D,IAmBI,GAnBA,GAAY,GAEhB,GAAI,GAAiB,CAEjB,GAAI,UAAU,IAAI,0BAClB,MAAM,EAAiB,GAAQ,QAC/B,EAAe,KAAK,QAAQ,QAC5B,GAAI,MAAM,OAAS,EAAe,KAAK,KACvC,GAAI,MAAM,UAAY,GAAG,GAAW,KAAK,mBAAmB,OAC5D,GAAI,IAAM,GAAiB,EAC3B,GAAI,MAAM,QAAU,CACxB,MAAW,GACP,GAAI,IAAM,EACV,GAAI,MAAM,QAAU,GAEpB,GAAI,IAAM,GAAO,GAKjB,IACA,GAAY,SAAS,cAAc,OACnC,GAAU,UAAY,yBACtB,EAAY,GAAW,CACnB,SAAU,WACV,IAAK,IACL,KAAM,IACN,MAAO,OACP,OAAQ,OACR,WAAY,iBAAmB,EAAiB,IAChD,cAAe,OACf,OAAQ,MAEZ,GAAU,YAAY,KAI1B,MAAM,GAAwB,IAC1B,MAAM,EAAU,IAAI,MAChB,IAAa,EAAQ,YAAc,GAEvC,EAAQ,iBAAiB,OAAQ,KAC7B,GAAI,IAAM,EAGV,WAAW,KACH,KACA,GAAI,UAAU,OAAO,0BACrB,GAAI,MAAM,OAAS,GAAQ,KAAK,KAChC,GAAI,MAAM,UAAY,GAAW,KAAK,KACtC,IAAY,GAEhB,GAAI,MAAM,QAAU,EACpB,GAAQ,MAAM,QAAU,IACxB,GAAY,EACR,GAAQ,KACb,MAGP,EAAQ,iBAAiB,QAAU,IAC/B,GAAY,KAGhB,EAAQ,IAAM,GAIZ,GAAa,KACX,IACJ,GAAY,EACZ,GAAI,MAAM,QAAU,EACpB,GAAQ,MAAM,QAAU,IACpB,GAAQ,MAIV,GAAe,KACb,IAAc,GAAc,IAEhC,IAAa,EACb,IAGA,GAAQ,MAAM,QAAU,IACxB,GAAI,MAAM,QAAU,IAEhB,GAAS,EAAQ,GAErB,GAAe,WAAW,KACtB,IAAa,EAET,IAAmB,IACf,GAAiB,KACjB,GAAI,IAAM,GAAiB,GAE/B,GAAqB,KAErB,GAAI,IAAM,GACV,GAAI,IAAM,GAAO,GAAe,KAErC,KAID,GAAe,IACjB,IAAI,EAAJ,CAKA,GAHA,GAAW,EAGP,GAAY,GAAI,MAAQ,EAGxB,OAFA,GAAI,IAAM,OACV,GAAW,GAKf,GAAQ,MAAM,QAAU,IACxB,GAAI,MAAM,QAAU,IAGhB,GAAe,EAAa,GAC5B,KAGA,GAAS,EAAQ,EAAO,EApBR,GA6DxB,OArCI,IAAmB,EAEnB,GAAqB,IAGrB,GAAI,iBAAiB,OAAQ,IAC7B,GAAI,iBAAiB,QAAS,KAI9B,IACA,GAAU,iBAAiB,QAAS,GAEpC,GAAU,iBAAiB,aAAc,KAErC,GADA,GAAU,MAAM,UAAY,cACxB,EAAY,EAAG,CACf,MAAM,EAAe,EAAY,EAC3B,EAAkB,KAAK,IAAI,EAAe,GAAI,GAC9C,EAAsB,EAAf,EACP,EAAwB,GAAf,EACf,GAAU,MAAM,UAAY,KAAK,OAAkB,qBAAwB,GAAwB,GAAlB,6CAC3D,OAAqB,EAAT,qBAA8B,IAAyB,GAAlB,IAC3E,IAGJ,GAAU,iBAAiB,aAAc,KAErC,GADA,GAAU,MAAM,UAAY,WACxB,EAAY,EAAG,CACf,MAAM,EAAkB,KAAK,IAAI,EAAY,GAAI,GAC3C,EAAmB,EAAZ,EACP,EAAqB,GAAZ,EACf,GAAU,MAAM,UAAY,KAAK,OAAe,qBAAwB,GAAwB,GAAlB,6CACxD,OAAqB,EAAT,qBAA8B,IAAyB,GAAlB,IAC3E,KAID,CACH,WAAY,IAAM,GAClB,SAAU,IAAM,GAChB,WAAY,IAAM,GAClB,OAAQ,IAAM,GAAI,IAClB,OAAQ,CAAC,EAAQ,EAAmB,QAiBhC,GAhBA,GAAY,EACZ,GAAW,EACX,EAAa,EACb,IAAa,EAGT,KACA,aAAa,IACb,GAAe,MAInB,GAAQ,MAAM,QAAU,IACxB,GAAI,MAAM,QAAU,IAGhB,GAAgB,EAAkB,CAClC,IAAY,EACZ,GAAI,UAAU,IAAI,0BAClB,MAAM,EAAiB,GACnB,EAAO,GAAG,EAAe,KAAK,QAAQ,QACtC,GAAW,EAAe,KAAK,mBACnC,EAAe,KAAK,QAAQ,QAC5B,GAAI,MAAM,OAAS,EAAe,KAAK,KACvC,GAAI,MAAM,UAAY,GAAG,GAAW,KAAK,mBAAmB,OAC5D,GAAI,IAAM,EACV,GAAqB,EACzB,MACI,GAAI,IAAM,GAGlB,OAAS,IACL,GAAI,IAAM,GAEd,WAAa,IACT,GAAI,MAAM,QAAU,GAExB,QAAU,IACN,MAAM,EAAU,GACZ,EAAU,GAAG,EAAQ,KAAK,QAAQ,QAClC,GAAW,EAAQ,KAAK,mBAC5B,GAAI,MAAM,OAAS,EAAQ,KAAK,MAEpC,aAAe,IACX,MAAM,EAAU,GACZ,EAAO,GAAG,EAAQ,KAAK,QAAQ,QAC/B,GAAQ,EAAQ,KAAK,mBACzB,GAAI,MAAM,OAAS,EAAQ,KAAK,MAEpC,YAAc,IACV,MAAM,EAAa,GACnB,EAAW,KAAK,UAAU,SACtB,GAAO,EAAW,KAAK,cACvB,GAAO,EAAW,KAAK,cAC3B,GAAI,MAAM,UAAY,EAAW,KAAK,MAE1C,WAAY,CAAC,EAAM,KACX,KACA,GAAU,MAAM,QAAU,EAAQ,GAAc,EAAkB,MAG1E,UAAW,CAAC,EAAO,EAAO,EAAQ,WAC9B,GAAU,MAAM,OAAS,EAAQ,GAAG,EAAG,MAAU,KAAS,IAAU,QAExE,gBAAkB,IACd,GAAU,MAAM,aAAe,EAAG,IAEtC,aAAe,IACX,GAAI,EAAe,EAAG,CAClB,MAAM,EAAkB,KAAK,IAAI,EAAe,GAAI,GAC9C,EAAsB,EAAf,EACP,EAAwB,GAAf,EACf,GAAU,MAAM,UAAY,KAAK,OAAkB,qBAAwB,GAAwB,GAAlB,6CAC3D,OAAqB,EAAT,qBAA8B,IAAyB,GAAlB,IAC3E,MACI,GAAU,MAAM,UAAY,QAGpC,iBAAkB,CAAC,EAAW,KACtB,IACA,GAAQ,MAAM,WAAa,GAE3B,IACA,GAAe,MAAM,WAAa,sFAE5B,mDAId,YAAa,KACT,GAAQ,MAAM,QAAU,KAE5B,YAAa,KACT,GAAQ,MAAM,QAAU,KAE5B,OAAQ,KACJ,MAAM,EAAa,GAAI,IACvB,GAAY,EACZ,GAAW,EACX,EAAa,EACb,GAAQ,MAAM,QAAU,IACxB,GAAI,MAAM,QAAU,IACpB,GAAI,IAAM,GACV,GAAI,IAAM,GAEd,MAAO,KACC,GAAY,GAAe,EAAa,GACxC,MAGR,UAAW,IAAM,EACjB,SAAU,IAAM,EAChB,cAAe,IAAM,EACrB,KAAM,KACF,GAAU,MAAM,QAAU,QAE9B,KAAM,KACF,GAAU,MAAM,QAAU,gBAE9B,QAAS,KACD,IACA,aAAa,IAEjB,GAAI,oBAAoB,OAAQ,IAChC,GAAI,oBAAoB,QAAS,OA8pHrC,iBAzZqB,CAAC,EAAQ,CAAC,KAC/B,MAAM,MACF,EAAQ,GAAE,SACN,EAAW,GAAE,MACb,EAAQ,GAAE,YACV,EAAc,WAAU,QACxB,EAAU,UAAS,WACnB,EAAa,EAAC,UACd,GAAY,EAAK,YACjB,GAAc,EAAI,YAClB,EAAc,KAAI,GAClB,EAAE,UACF,EAAS,OACT,EAAM,QACN,EAAO,OACP,EAAM,UACN,EAAS,MACT,GACJ,EAEE,EAAa,GAAM,qBAAqB,KAAK,QACnD,IAAI,EAAe,IAAI,GACnB,EAAoB,EAGxB,MAAM,EAAY,SAAS,cAAc,OACnC,EAAmB,CAAC,+BACtB,GAAS,EAAiB,KAAK,GAC/B,GAAa,EAAiB,KAAK,GACnC,GAAW,EAAiB,KAAK,GACrC,EAAU,UAAY,EAAiB,KAAK,KAC5C,EAAU,GAAK,EAGf,MAAM,EAAkB,CAAC,EAUzB,IAAI,EAAU,EAAS,EATnB,IAAQ,EAAgB,OAA2B,iBAAX,EAAsB,GAAG,MAAa,GAC9E,IAAS,EAAgB,QAA6B,iBAAZ,EAAuB,GAAG,MAAc,GAClF,IAAQ,EAAgB,KAAO,GAC/B,IAAW,EAAgB,UAAY,GAC7B,iBAAV,EAA0B,EAAgB,MAAQ,OAC7C,IAAO,EAAgB,MAAyB,iBAAV,EAAqB,GAAG,MAAY,GACnF,OAAO,OAAO,EAAU,MAAO,IAI3B,GAAS,KACT,EAAW,SAAS,cAAc,OAClC,EAAS,UAAY,2BAEjB,IACA,EAAU,SAAS,cAAc,MACjC,EAAQ,UAAY,0BACpB,EAAQ,YAAc,EACtB,EAAS,YAAY,IAGrB,IACA,EAAa,SAAS,cAAc,KACpC,EAAW,UAAY,6BACvB,EAAW,YAAc,EACzB,EAAS,YAAY,IAGzB,EAAU,YAAY,IAI1B,MAAM,EAAiB,SAAS,cAAc,OAC9C,EAAe,UAAY,0BAC3B,EAAU,YAAY,GAGtB,MAAM,EAAa,CAAC,EAAM,KACtB,MACI,MAAO,EAAY,QAAQ,EAAQ,IACnC,SAAU,EAAe,GAAE,YAC3B,EAAc,GAAE,OAChB,EAAS,UAAS,KAClB,EAAO,KAAI,QACX,GAAU,EAAK,WACf,EAAa,MACb,EAGE,EAAS,SAAS,cAAc,OAChC,EAAc,CAAC,0BAGN,WAAX,GAAuB,IAAU,EACjC,EAAY,KAAK,UACC,cAAX,EACP,EAAY,KAAK,aACC,UAAX,EACP,EAAY,KAAK,SACC,YAAX,EACP,EAAY,KAAK,WACC,aAAX,GACP,EAAY,KAAK,YAGjB,GAAwB,aAAX,GACb,EAAY,KAAK,aAGrB,EAAO,UAAY,EAAY,KAAK,KACpC,EAAO,QAAQ,MAAQ,EAGvB,MAAM,EAAY,SAAS,cAAc,OACzC,EAAU,UAAY,mCAGtB,MAAM,EAAS,SAAS,cAAc,OAItC,GAHA,EAAO,UAAY,gCAGf,EAAS,CACT,MAAM,EAAU,SAAS,cAAc,OACvC,EAAQ,UAAY,4BACpB,EAAO,YAAY,EACvB,MAAO,GAAe,cAAX,GAA2B,EAI/B,GAAe,UAAX,GAAuB,EAI3B,GAAe,YAAX,GAAyB,GAI7B,GAAI,GAAc,EAAM,CAC3B,MAAM,EAAS,SAAS,cAAc,KACtC,EAAO,UAAY,GAAc,EACjC,EAAO,YAAY,EACvB,MAAO,GAAI,EAAa,CACpB,MAAM,EAAS,SAAS,cAAc,QACtC,EAAO,UAAY,gCACnB,EAAO,YAAc,EAAQ,EAC7B,EAAO,YAAY,EACvB,MAbgD,CAC5C,MAAM,EAAc,SAAS,cAAc,KAC3C,EAAY,UAAY,cACxB,EAAO,YAAY,EACvB,KAR8C,CAC1C,MAAM,EAAY,SAAS,cAAc,KACzC,EAAU,UAAY,UACtB,EAAO,YAAY,EACvB,KARkD,CAC9C,MAAM,EAAY,SAAS,cAAc,KACzC,EAAU,UAAY,cACtB,EAAO,YAAY,EACvB,CAsBA,GAHA,EAAU,YAAY,GAGlB,EAAQ,EAAa,OAAS,EAAG,CACjC,MAAM,EAAO,SAAS,cAAc,OACpC,EAAK,UAAY,8BACjB,EAAU,YAAY,EAC1B,CAEA,EAAO,YAAY,GAGnB,MAAM,EAAU,SAAS,cAAc,OACvC,EAAQ,UAAY,iCAEpB,MAAM,EAAU,SAAS,cAAc,MAKvC,GAJA,EAAQ,UAAY,+BACpB,EAAQ,YAAc,EACtB,EAAQ,YAAY,GAEhB,EAAc,CACd,MAAM,EAAa,SAAS,cAAc,KAC1C,EAAW,UAAY,kCACvB,EAAW,YAAc,EACzB,EAAQ,YAAY,EACxB,CAEA,GAAI,EAAa,CACb,MAAM,EAAS,SAAS,cAAc,KACtC,EAAO,UAAY,qCACnB,EAAO,YAAc,EACrB,EAAQ,YAAY,EACxB,CAcA,OAZA,EAAO,YAAY,GAGf,GAAwB,aAAX,GACb,EAAO,iBAAiB,QAAS,KACzB,GACA,EAAY,EAAO,GAEvB,cAAc,KAIf,GAIL,EAAc,KAChB,EAAe,UAAY,GAC3B,EAAa,QAAQ,CAAC,EAAM,KACxB,MAAM,EAAS,EAAW,EAAM,GAChC,EAAO,UAAU,IAAI,aACrB,EAAe,YAAY,MAQnC,OAHA,IAGO,CACH,WAAY,IAAM,EAGlB,QAAS,CAAC,EAAM,GAAU,KACtB,EAAa,KAAK,GAClB,MAAM,EAAS,EAAW,EAAM,EAAa,OAAS,GAClD,GAAS,EAAO,UAAU,IAAI,aAClC,EAAe,YAAY,IAG/B,WAAY,CAAC,EAAO,EAAM,GAAU,KAChC,EAAa,OAAO,EAAO,EAAG,GAC9B,KAGJ,WAAa,IACL,GAAS,GAAK,EAAQ,EAAa,SACnC,EAAa,OAAO,EAAO,GAC3B,MAIR,WAAY,CAAC,EAAO,KACZ,GAAS,GAAK,EAAQ,EAAa,SACnC,EAAa,GAAS,IACf,EAAa,MACb,GAEP,MAIR,QAAU,GACC,EAAa,GAGxB,YAAa,IACF,IAAI,GAGf,WAAY,KACR,EAAe,GACf,EAAe,UAAY,IAG/B,SAAW,IACP,EAAe,IAAI,GACnB,KAIJ,cAAe,CAAC,EAAO,KACf,GAAS,GAAK,EAAQ,EAAa,SACnC,EAAa,GAAO,OAAS,EAC7B,MAIR,eAAgB,CAAC,EAAO,KAChB,GAAS,GAAK,EAAQ,EAAa,SACnC,EAAa,GAAO,QAAU,EAC9B,MAIR,aAAe,IACP,GAAS,GAAK,EAAQ,EAAa,SACnC,EAAa,GAAO,OAAS,YAC7B,MAIR,aAAc,CAAC,EAAO,KACd,GAAS,GAAK,EAAQ,EAAa,SACnC,EAAa,GAAO,OAAS,QACzB,IACA,EAAa,GAAO,SAAW,GAEnC,MAKR,cAAgB,IACR,GAAS,GAAK,EAAQ,EAAa,SACnC,EAAoB,EACpB,MAIR,cAAe,IAAM,EAErB,SAAU,KACF,EAAoB,EAAa,OAAS,IAC1C,IACA,KAEG,GAGX,aAAc,KACN,EAAoB,IACpB,IACA,KAEG,GAIX,SAAW,IACH,EACA,EAAQ,YAAc,EACf,IACP,EAAU,SAAS,cAAc,MACjC,EAAQ,UAAY,0BACpB,EAAQ,YAAc,EACtB,EAAS,aAAa,EAAS,EAAS,cAIhD,YAAc,IACN,EACA,EAAW,YAAc,EAClB,IACP,EAAa,SAAS,cAAc,KACpC,EAAW,UAAY,6BACvB,EAAW,YAAc,EACzB,EAAS,YAAY,KAK7B,MAAO,KACH,EAAoB,EACpB,EAAe,EAAa,IAAI,IAAQ,IACjC,EACH,OAAQ,UACR,SAAS,KAEb,KAGJ,cAAe,IAAM,EAAa,OAElC,WAAY,IAAM,IAAsB,EAAa,OAAS,EAE9D,YAAa,IAA4B,IAAtB,IAyDvB,SA59Ba,CAAC,EAAQ,CAAC,KACvB,MAAM,GACF,EAAE,UACF,EAAS,OACT,EAAS,EAAC,MACV,EAAQ,GAAE,SACV,EAAQ,WACR,EAAU,KACV,EAAO,SAAQ,SACf,GAAW,EAAK,MAChB,GAAQ,EAAK,UACb,GAAY,EAAI,SAChB,EAAW,GAAE,UACb,EAAY,GAAE,IACd,EAAM,EAAC,SACP,EAAW,GAAE,MACb,EAAQ,oBAAmB,WAC3B,EAAa,kBAAiB,YAC9B,EAAc,EAAC,aACf,EAAe,EAAC,YAChB,EAAc,KACd,EAEE,EAAY,SAAS,cAAc,OACnC,EAAS,GACf,IAAI,EAAe,EAAM,MAAM,IAAI,MAAM,EAAG,GAG5C,EAAY,EAAW,CACnB,QAAS,OACT,IAAK,EAAG,GACR,WAAY,WAIhB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAQ,IAAK,CAC7B,MAAM,EAAe,SAAS,cAAc,OACtC,EAAQ,SAAS,cAAc,SAErC,EAAM,KAAgB,aAAT,EAAsB,WAAa,OAChD,EAAM,UAAY,EAClB,EAAM,SAAW,EACjB,EAAM,MAAQ,EAAa,IAAM,GACjC,EAAM,YAAc,EACpB,EAAM,UAAqB,WAAT,EAAoB,UAAY,OAErC,WAAT,IACA,EAAM,QAAU,SAIpB,EAAY,EAAc,CACtB,SAAU,WACV,MAAO,EAAG,GACV,OAAQ,EAAG,KAIf,EAAY,EAAO,CACf,MAAO,OACP,OAAQ,OACR,UAAW,SACX,SAAU,EAAG,GACb,WAAY,MACZ,OAAQ,GAAG,EAAG,YAAsB,EAAQ,EAAa,sBACzD,aAAc,EAAG,GACjB,gBAAiB,EAAW,4BAA8B,oBAC1D,MAAO,uBACP,QAAS,OACT,WAAY,WACZ,UAAW,aACX,WAAY,IAIhB,EAAM,iBAAiB,QAAS,KACvB,IACD,EAAM,MAAM,YAAc,EAAQ,EAAa,EAC/C,EAAM,MAAM,YAAc,EAAG,EAAc,GAC3C,EAAM,MAAM,UAAY,aAAa,EAAQ,EAAa,OAIlE,EAAM,iBAAiB,OAAQ,KAC3B,EAAM,MAAM,YAAc,EAAQ,EAAa,oBAC/C,EAAM,MAAM,YAAc,EAAG,GAC7B,EAAM,MAAM,UAAY,SAI5B,EAAM,iBAAiB,QAAU,IAC7B,IAAI,EAAM,EAAE,OAAO,MAGN,WAAT,IACA,EAAM,EAAI,QAAQ,UAAW,KAIjC,EAAM,EAAI,MAAM,EAAG,GACnB,EAAM,MAAQ,EACd,EAAa,GAAK,EAGd,GAAO,EAAI,EAAS,GACpB,EAAO,EAAI,GAAG,QAIlB,MAAM,EAAY,EAAa,KAAK,IAChC,GAAU,EAAS,GAEnB,EAAU,SAAW,GAAU,GAC/B,EAAW,KAKnB,EAAM,iBAAiB,UAAY,IAC/B,GAAc,cAAV,EAAE,MAAwB,EAAM,OAAS,EAAI,EAAG,CAChD,EAAO,EAAI,GAAG,QACd,EAAa,EAAI,GAAK,GACtB,EAAO,EAAI,GAAG,MAAQ,GAEtB,MAAM,EAAY,EAAa,KAAK,IAChC,GAAU,EAAS,EAC3B,CAGc,cAAV,EAAE,KAAuB,EAAI,IAC7B,EAAE,iBACF,EAAO,EAAI,GAAG,SAEJ,eAAV,EAAE,KAAwB,EAAI,EAAS,IACvC,EAAE,iBACF,EAAO,EAAI,GAAG,WAKtB,EAAM,iBAAiB,QAAU,IAC7B,EAAE,iBACF,MAAM,EAAa,EAAE,cAAc,QAAQ,QAAQ,MAAM,EAAG,GAE5D,IAAK,IAAI,EAAI,EAAG,EAAI,EAAW,QAAW,EAAI,EAAK,EAAQ,IAAK,CAC5D,IAAI,EAAO,EAAW,GACT,WAAT,IACA,EAAO,EAAK,QAAQ,UAAW,KAE/B,IACA,EAAO,EAAI,GAAG,MAAQ,EACtB,EAAa,EAAI,GAAK,EAE9B,CAGA,MAAM,EAAkB,KAAK,IAAI,EAAI,EAAW,OAAQ,EAAS,GACjE,EAAO,GAAiB,QAExB,MAAM,EAAY,EAAa,KAAK,IAChC,GAAU,EAAS,GAEnB,EAAU,SAAW,GAAU,GAC/B,EAAW,KAInB,EAAO,KAAK,GACZ,EAAa,YAAY,GACzB,EAAU,YAAY,EAC1B,CAUA,OAPI,IAAc,GACd,WAAW,IAAM,EAAO,GAAG,QAAS,GAGpC,IAAI,EAAU,GAAK,GACnB,IAAW,EAAU,UAAY,GAE9B,CACH,WAAY,IAAM,EAClB,SAAU,IAAM,EAAa,KAAK,IAClC,SAAW,IACP,MAAM,EAAQ,EAAI,MAAM,IAAI,MAAM,EAAG,GACrC,IAAK,IAAI,EAAI,EAAG,EAAI,EAAQ,IACxB,EAAO,GAAG,MAAQ,EAAM,IAAM,GAC9B,EAAa,GAAK,EAAM,IAAM,IAGtC,MAAO,KACH,IAAK,IAAI,EAAI,EAAG,EAAI,EAAQ,IACxB,EAAO,GAAG,MAAQ,GAClB,EAAa,GAAK,GAEtB,EAAO,GAAG,SAEd,MAAO,KACH,MAAM,EAAkB,EAAa,UAAU,IAAM,GACrD,GAA4B,IAArB,EAAyB,EAAkB,GAAG,SAEzD,YAAc,IACV,EAAO,QAAQ,GAAS,EAAM,SAAW,IAE7C,SAAW,IACP,MAAM,EAAc,EAAM,EAAa,oBACvC,EAAO,QAAQ,IACX,EAAM,MAAM,YAAc,OA8wBtC,oBAxlDwB,CAAC,EAAQ,CAAC,KAClC,MAAM,GACF,EAAE,UACF,EAAS,QACT,GAAU,EAAK,SACf,GAAW,EAAK,MAChB,EAAQ,GAAE,SACV,EAAQ,KACR,EAAO,GAAE,MACT,EAAQ,oBAAmB,YAC3B,EAAc,6BAA4B,WAC1C,EAAa,kBAAiB,YAE9B,EAAc,KAAI,OAClB,GAAS,EAAI,MACb,GAAQ,EAAK,KACb,EAAI,MACJ,GACA,EAEE,EAAY,SAAS,cAAc,SACnC,EAAU,SAAS,cAAc,OACjC,EAAQ,SAAS,cAAc,SAC/B,EAAa,SAAS,cAAc,OACpC,EAAa,SAAS,cAAc,OACpC,EAAY,SAAS,cAAc,QAEzC,EAAM,KAAO,QACb,EAAM,QAAU,EAChB,EAAM,SAAW,EACb,IAAM,EAAM,KAAO,GACnB,IAAO,EAAM,MAAQ,GACrB,IAAI,EAAM,GAAK,GAEnB,OAAO,OAAO,EAAM,MAAO,CACvB,SAAU,WACV,QAAS,EACT,MAAO,EACP,OAAQ,EACR,OAAQ,IAGZ,OAAO,OAAO,EAAU,MAAO,CAC3B,QAAS,cACT,WAAY,SACZ,IAAK,EAAO,IACZ,OAAQ,EAAW,cAAgB,UACnC,WAAY,OACZ,QAAS,EAAW,OAAS,IAC7B,SAAU,WACV,UAAW,EAAO,EAAO,MAG7B,OAAO,OAAO,EAAQ,MAAO,CACzB,SAAU,WACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,MAAO,EAAO,IACd,OAAQ,EAAO,IACf,aAAc,QAGlB,OAAO,OAAO,EAAW,MAAO,CAC5B,MAAO,EAAO,GACd,OAAQ,EAAO,GACf,OAAQ,aAAa,IACrB,aAAc,MACd,SAAU,WACV,WAAY,oBACZ,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,UAAW,eAIf,OAAO,OAAO,EAAW,MAAO,CAC5B,MAAO,EAAc,OAAS,EAAc,GAAP,GACrC,OAAQ,EAAc,OAAS,EAAc,GAAP,GACtC,aAAc,EAAc,IAAM,MAClC,gBAAiB,EAAc,cAAgB,EAC/C,MAAO,EACP,UAAW,WACX,WAAY,8CACZ,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,SAAU,EAAc,GAAP,KAGjB,GAAa,EAAW,EAAa,GAErC,IACA,EAAU,YAAc,EACxB,OAAO,OAAO,EAAU,MAAO,CAC3B,SAAU,OACV,MAAO,uBACP,WAAY,aAIpB,MAAM,EAAc,KAChB,MAAM,EAAY,EAAM,QAClB,EAAc,EAAQ,EAAa,EAErC,GACA,EAAW,MAAM,YAAc,EAC/B,EAAW,MAAM,UAAY,WACxB,EACA,EAAW,MAAM,MAAQ,EADZ,EAAW,MAAM,gBAAkB,IAGrD,EAAW,MAAM,YAAc,EAAQ,EAAa,EACpD,EAAW,MAAM,UAAY,aAYrC,GAPA,EAAM,iBAAiB,SAAW,IAC9B,IACI,GAAU,EAAS,EAAG,EAAM,SAKhC,EAAM,CACN,MAAM,EAAiB,IAEf,EAAE,SAAW,GAAS,EAAE,OAAO,OAAS,GACxC,KAGR,SAAS,iBAAiB,SAAU,GAGpC,EAAU,SAAW,IAAM,SAAS,oBAAoB,SAAU,EACtE,CAiCA,OA9BI,IAAW,GACX,EAAQ,iBAAiB,YAAa,KAClC,MAAM,EAAW,SAAS,cAAc,OACxC,EAAS,MAAM,QAAU,2GAEO,EAAQ,EAAa,qHAIrD,EAAQ,YAAY,GACpB,sBAAsB,IAAM,EAAS,MAAM,UAAY,YAEvD,MAAM,EAAe,KACjB,EAAS,MAAM,QAAU,IACzB,WAAW,IAAM,EAAS,SAAU,KACpC,OAAO,oBAAoB,UAAW,IAE1C,OAAO,iBAAiB,UAAW,KAI3C,EAAW,YAAY,GACvB,EAAQ,YAAY,GACpB,EAAQ,YAAY,GACpB,EAAU,YAAY,GAClB,GAAO,EAAU,YAAY,GAC7B,IAAW,EAAU,UAAY,GAErC,IAEO,CACH,WAAY,IAAM,EAClB,WAAa,IACT,EAAM,QAAU,EAChB,IAEI,GAAO,GACP,EAAM,cAAc,IAAI,MAAM,SAAU,CACpC,SAAS,MAIrB,UAAW,IAAM,EAAM,QACvB,SAAU,IAAM,EAAM,MACtB,YAAc,IACV,EAAM,SAAW,EACjB,EAAU,MAAM,QAAU,EAAM,OAAS,IACzC,EAAU,MAAM,OAAS,EAAM,cAAgB,WAEnD,QAAS,KACD,EAAU,UAAU,EAAU,WAClC,EAAU,YA25ClB,iBAzyDqB,CAAC,EAAQ,CAAC,KAC/B,MAAM,GACF,EAAE,UACF,EAAS,QACT,GAAU,EAAK,SACf,GAAW,EAAK,cAChB,GAAgB,EAAK,MACrB,EAAQ,GAAE,SACV,EAAQ,KACR,EAAO,GAAE,MACT,EAAQ,oBAAmB,QAC3B,EAAU,8BAA6B,YACvC,EAAc,6BAA4B,WAC1C,EAAa,kBAAiB,YAC9B,EAAc,cAAa,OAC3B,GAAS,EAAI,MACb,GAAQ,EAAK,KACb,EAAI,MACJ,GACA,EAEE,EAAY,SAAS,cAAc,SACnC,EAAU,SAAS,cAAc,OACjC,EAAQ,SAAS,cAAc,SAC/B,EAAc,SAAS,cAAc,OACrC,EAAgB,SAAS,cAAc,OACvC,EAAY,SAAS,cAAc,QAGzC,EAAM,KAAO,WACb,EAAM,QAAU,EAChB,EAAM,SAAW,EACb,IAAM,EAAM,KAAO,GACnB,IAAO,EAAM,MAAQ,GACrB,IAAI,EAAM,GAAK,GAGnB,OAAO,OAAO,EAAM,MAAO,CACvB,SAAU,WACV,QAAS,EACT,MAAO,EACP,OAAQ,EACR,OAAQ,IAIZ,OAAO,OAAO,EAAU,MAAO,CAC3B,QAAS,cACT,WAAY,SACZ,IAAK,EAAO,IACZ,OAAQ,EAAW,cAAgB,UACnC,WAAY,OACZ,QAAS,EAAW,OAAS,IAC7B,SAAU,WACV,UAAW,EAAO,EAAO,MAI7B,OAAO,OAAO,EAAQ,MAAO,CACzB,SAAU,WACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,MAAO,EAAO,IACd,OAAQ,EAAO,IACf,aAAc,QAIlB,OAAO,OAAO,EAAY,MAAO,CAC7B,MAAO,EAAO,GACd,OAAQ,EAAO,GACf,OAAQ,aAAa,IACrB,aAAc,EAAO,GACrB,SAAU,WACV,WAAY,2CACZ,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,UAAW,aACX,gBAAiB,gBAIrB,OAAO,OAAO,EAAc,MAAO,CAC/B,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,MAAO,EACP,SAAU,EAAc,GAAP,GACjB,QAAS,EACT,UAAW,aACX,WAAY,iDACZ,MAAO,OACP,OAAQ,SAIZ,MAGM,EAA+B,gBAAhB,GAAkC,SAAS,cAAc,0BAE1E,EALqB,8IAOzB,EAAW,EAAc,GAErB,IACA,EAAU,YAAc,EACxB,OAAO,OAAO,EAAU,MAAO,CAC3B,SAAU,OACV,WAAY,UACZ,MAAO,uBACP,WAAY,SAIpB,MAAM,EAAc,KAChB,MAAM,EAAY,EAAM,QAClB,EAAkB,EAAM,cACxB,EAAc,EAAQ,EAAa,EAErC,GAAa,GAEb,EAAY,MAAM,gBAAkB,EACpC,EAAY,MAAM,YAAc,EAEhC,EAAc,MAAM,QAAU,IAC9B,EAAc,MAAM,UAAY,WAE5B,EAEA,EAAc,UAAY,mFAE1B,EAAW,EAAc,KAI7B,EAAY,MAAM,gBAAkB,cACpC,EAAY,MAAM,YAAc,EAAQ,EAAa,EAErD,EAAc,MAAM,QAAU,IAC9B,EAAc,MAAM,UAAY,eA2CxC,OAvCA,EAAM,iBAAiB,SAAW,IAC9B,IACI,GAAU,EAAS,EAAG,EAAM,WAIhC,IAAW,GACX,EAAQ,iBAAiB,YAAa,KAClC,MAAM,EAAW,SAAS,cAAc,OACxC,EAAS,MAAM,QAAU,2GAEO,EAAQ,EAAa,qHAIrD,EAAQ,YAAY,GACpB,sBAAsB,IAAM,EAAS,MAAM,UAAY,YAEvD,MAAM,EAAe,KACjB,EAAS,MAAM,QAAU,IACzB,WAAW,IAAM,EAAS,SAAU,KACpC,OAAO,oBAAoB,UAAW,IAE1C,OAAO,iBAAiB,UAAW,KAI3C,EAAY,YAAY,GACxB,EAAQ,YAAY,GACpB,EAAQ,YAAY,GACpB,EAAU,YAAY,GAClB,GAAO,EAAU,YAAY,GAE7B,IAAW,EAAU,UAAY,GAGjC,IAAe,EAAM,eAAgB,GACzC,IAEO,CACH,WAAY,IAAM,EAClB,WAAa,IACT,EAAM,QAAU,EAChB,KAEJ,iBAAmB,IACf,EAAM,cAAgB,EACtB,KAEJ,UAAW,IAAM,EAAM,QACvB,YAAc,IACV,EAAM,SAAW,EACjB,EAAU,MAAM,QAAU,EAAM,OAAS,IACzC,EAAU,MAAM,OAAS,EAAM,cAAgB,aAmmDvD,eAp5CmB,CAAC,EAAQ,CAAC,KAC7B,MAAM,GACF,EAAE,UACF,EAAS,IACT,EAAM,EAAC,IACP,EAAM,IAAG,MACT,EAAQ,GAAE,KACV,EAAO,EAAC,SACR,GAAW,EAAK,MAChB,EAAQ,oBAAmB,WAC3B,EAAa,4BAA2B,UACxC,EAAY,GAAE,YACd,EAAc,EAAC,UACf,GAAY,EAAK,WACjB,GAAa,EAAK,UAClB,GAAY,EAAK,SACjB,EAAW,KAAI,YACf,EAAe,GAAQ,EAAI,WAAU,SACrC,EAAQ,kBACR,EAAiB,MACjB,EAAQ,GAAE,SACV,GAAW,EAAK,MAChB,EAAQ,IAAG,OACX,EAAS,QACT,EAGE,EAAU,MAAM,QAAQ,GAE9B,IAAI,EADiB,EAAU,IAAI,GAAS,EAG5C,MAAM,EAAY,SAAS,cAAc,OACnC,EAAgB,SAAS,cAAc,OACvC,EAAQ,SAAS,cAAc,OAC/B,EAAc,SAAS,cAAc,OACrC,EAAS,SAAS,cAAc,OAChC,EAAS,EAAU,SAAS,cAAc,OAAS,KACnD,EAAgB,EAAY,SAAS,cAAc,OAAS,KAC5D,EAAgB,GAAa,EAAU,SAAS,cAAc,OAAS,KACvE,EAAW,EAAa,SAAS,cAAc,QAAU,KACzD,EAAW,EAAa,SAAS,cAAc,QAAU,KAE/D,IAAI,GAAa,EACb,EAAc,KAGlB,EAAY,EAAW,CACnB,QAAS,OACT,cAAe,EAAW,MAAQ,SAClC,WAAY,EAAW,SAAW,UAClC,IAAK,EAAG,GACR,MAAO,EAAW,OAAS,EAAG,GAC9B,OAAQ,EAAW,EAAc,SAAX,EAAoB,EAAQ,GAAU,OAC5D,QAAS,EAAW,OAAS,IAC7B,cAAe,EAAW,OAAS,SAInC,IACA,EAAS,YAAc,EAAY,GACnC,EAAS,YAAc,EAAY,GACnC,EAAY,EAAU,CAClB,SAAU,OACV,MAAO,+BACP,WAAY,SAEhB,EAAY,EAAU,CAClB,SAAU,OACV,MAAO,+BACP,WAAY,UAKpB,EAAY,EAAe,CACvB,SAAU,WACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,KAAM,IACN,OAAQ,EAAW,cAAgB,UACnC,QAAS,EAAW,GAAG,EAAG,EAAY,OAAS,KAAK,EAAG,EAAY,OAIvE,EAAY,EAAO,CACf,SAAU,WACV,gBAAiB,EACjB,aAAc,EAAG,EAAc,MAC3B,EAAW,CACX,MAAO,EAAG,GACV,OAAQ,OACR,KAAM,MACN,UAAW,oBACX,CACA,OAAQ,EAAG,GACX,MAAO,OACP,IAAK,MACL,UAAW,sBAKnB,EAAY,EAAa,CACrB,SAAU,WACV,gBAAiB,EACjB,aAAc,EAAG,EAAc,GAC/B,WAAY,EAAa,OAAS,mBAC9B,EAAW,CACX,MAAO,EAAG,GACV,KAAM,MACN,UAAW,oBACX,CACA,OAAQ,EAAG,GACX,IAAK,MACL,UAAW,sBAKnB,MAAM,EAAc,CAAC,EAAc,KAC/B,EAAY,EAAc,CACtB,SAAU,WACV,MAAO,EAAG,GACV,OAAQ,EAAG,GACX,gBAAiB,EACjB,aAAc,MACd,OAAQ,kBACR,UAAW,4BACX,OAAQ,EAAW,cAAgB,OACnC,WAAY,EAAa,OAAS,gBAClC,OAAQ,OACJ,EAAW,CACX,KAAM,MACN,UAAW,yBACX,CACA,IAAK,MACL,UAAW,2BAIf,IACA,EAAoB,MAAM,QAAU,sDAE9B,wQAUZ,EAAW,iEAAmE,8EAExE,EAAa,YAAY,KAQjC,GAJA,EAAY,EAAQ,GAChB,GAAQ,EAAY,EAAQ,GAG5B,EAAW,CACX,MAAM,EAAgB,SAAS,cAAc,OAC7C,EAAY,EAAe,CACvB,SAAU,cACN,EAAW,CACX,MAAO,EAAiB,EAAd,GACV,OAAQ,OACR,KAAM,MACN,UAAW,oBACX,CACA,OAAQ,EAAiB,EAAd,GACX,MAAO,OACP,IAAK,MACL,UAAW,sBAInB,MAAM,EAAiB,GAAY,EACnC,IAAK,IAAI,EAAM,EAAK,GAAO,EAAK,GAAO,EAAgB,CACnD,MAAM,EAAO,SAAS,cAAc,OAC9B,GAAY,EAAM,IAAQ,EAAM,GAAQ,IAE9C,EAAY,EAAM,CACd,SAAU,WACV,gBAAiB,+BACb,EAAW,CACX,MAAO,EAAiB,EAAd,GACV,OAAQ,MACR,OAAQ,GAAG,KACX,KAAM,MACN,UAAW,wBACX,CACA,OAAQ,EAAiB,EAAd,GACX,MAAO,MACP,KAAM,GAAG,KACT,IAAK,MACL,UAAW,2BAInB,EAAc,YAAY,EAC9B,CACA,EAAc,YAAY,EAC9B,CAGA,EAAM,QAAQ,IACV,MAAM,EAAgB,SAAS,cAAc,OACvC,EAAY,SAAS,cAAc,QACnC,GAAY,EAAK,MAAQ,IAAQ,EAAM,GAAQ,IAErD,EAAY,EAAe,CACvB,SAAU,cACN,EAAW,CACX,OAAQ,GAAG,KACX,KAAM,MACN,UAAW,wBACX,CACA,KAAM,GAAG,KACT,IAAK,MACL,UAAW,2BAInB,EAAY,EAAW,CACnB,SAAU,WACV,SAAU,OACV,MAAO,+BACP,WAAY,YACR,EAAW,CACX,KAAM,oBACN,IAAK,MACL,UAAW,oBACX,CACA,IAAK,mBACL,KAAM,MACN,UAAW,sBAInB,EAAU,YAAc,EAAK,MAC7B,EAAc,YAAY,GAC1B,EAAc,YAAY,KAI9B,MAAM,EAAkB,IAAU,EAAM,IAAQ,EAAM,GAAQ,IACxD,EAAkB,IACpB,MAAM,EAAY,EAAU,KAAQ,EAAM,GAAO,EACjD,OAAO,KAAK,MAAM,EAAW,GAAQ,GAGnC,EAAiB,KACnB,GAAI,EAAS,CACT,MAAO,EAAM,GAAQ,EACf,EAAW,EAAe,GAC1B,EAAW,EAAe,GAE5B,GACA,EAAO,MAAM,OAAS,GAAG,KACzB,EAAO,MAAM,OAAS,GAAG,KACzB,EAAY,MAAM,OAAS,GAAG,KAC9B,EAAY,MAAM,OAAY,EAAW,EAAd,MAE3B,EAAO,MAAM,KAAO,GAAG,KACvB,EAAO,MAAM,KAAO,GAAG,KACvB,EAAY,MAAM,KAAO,GAAG,KAC5B,EAAY,MAAM,MAAW,EAAW,EAAd,KAG1B,IAAe,EAAc,YAAc,EAAY,IACvD,IAAe,EAAc,YAAc,EAAY,GAC/D,KAAO,CACH,MAAM,EAAU,EAAe,GAE3B,GACA,EAAO,MAAM,OAAS,GAAG,KACzB,EAAY,MAAM,OAAS,IAC3B,EAAY,MAAM,OAAS,GAAG,OAE9B,EAAO,MAAM,KAAO,GAAG,KACvB,EAAY,MAAM,KAAO,IACzB,EAAY,MAAM,MAAQ,GAAG,MAG7B,IAAe,EAAc,YAAc,EAAY,GAC/D,GAIE,EAAwB,IAC1B,MAAM,EAAO,EAAM,wBACnB,IAAI,EAEJ,GAAI,EAAU,CACV,MAAM,EAAU,EAAE,QAAU,EAAE,QAAQ,GAAG,QAAU,EAAE,QACrD,GAAa,EAAK,OAAS,GAAW,EAAK,OAAU,GACzD,KAAO,CAEH,IADgB,EAAE,QAAU,EAAE,QAAQ,GAAG,QAAU,EAAE,SAC9B,EAAK,MAAQ,EAAK,MAAS,GACtD,CAEA,OAAO,KAAK,IAAI,EAAG,KAAK,IAAI,IAAK,KAG/B,EAAc,IAChB,IAAK,GAAc,EAAU,OAC7B,EAAE,iBAEF,MAAM,EAAU,EAAqB,GAC/B,EAAW,EAAe,GAE5B,EACI,IAAgB,EAChB,EAAa,GAAK,KAAK,IAAI,EAAU,EAAa,IAElD,EAAa,GAAK,KAAK,IAAI,EAAU,EAAa,IAGtD,EAAe,KAAK,IAAI,EAAK,KAAK,IAAI,EAAK,IAG/C,IACI,GAAU,EAAS,EAAU,IAAI,GAAgB,IAGnD,EAAY,KACT,IACL,GAAa,EACb,EAAc,KAEV,IAAe,EAAc,MAAM,QAAU,KAC7C,IAAe,EAAc,MAAM,QAAU,KAEjD,EAAO,MAAM,OAAS,OAClB,IAAQ,EAAO,MAAM,OAAS,QAE9B,GAAmB,EAAkB,EAAU,IAAI,GAAgB,KAGrE,EAAc,CAAC,EAAG,KACpB,GAAI,EAAU,OACd,EAAE,iBACF,GAAa,EACb,EAAc,EAEd,MAAM,EAAoB,IAAU,EAAS,EAAgB,EACzD,IAAmB,EAAkB,MAAM,QAAU,KAEzD,EAAM,MAAM,OAAS,WACrB,EAAW,IAkEf,OAnCA,EAAO,iBAAiB,YAAc,GAAM,EAAY,EAAG,IAC3D,EAAO,iBAAiB,aAAe,GAAM,EAAY,EAAG,IACxD,IACA,EAAO,iBAAiB,YAAc,GAAM,EAAY,EAAG,IAC3D,EAAO,iBAAiB,aAAe,GAAM,EAAY,EAAG,KAGhE,EAAM,iBAAiB,QAlCG,IACtB,GAAI,GAAY,EAAY,OAE5B,MAAM,EAAU,EAAqB,GAC/B,EAAW,EAAe,GAEhC,GAAI,EAAS,CAET,MAAO,EAAM,GAAQ,EACP,KAAK,IAAI,EAAW,GACpB,KAAK,IAAI,EAAW,GAG9B,EAAa,GAAK,KAAK,IAAI,EAAU,GAErC,EAAa,GAAK,KAAK,IAAI,EAAU,EAE7C,MACI,EAAe,EAGnB,IACI,GAAU,EAAS,EAAU,IAAI,GAAgB,GACjD,GAAmB,EAAkB,EAAU,IAAI,GAAgB,KAa3E,SAAS,iBAAiB,YAAa,GACvC,SAAS,iBAAiB,UAAW,GACrC,SAAS,iBAAiB,YAAa,GACvC,SAAS,iBAAiB,WAAY,GAGtC,EAAc,YAAY,GAC1B,EAAc,YAAY,GAC1B,EAAc,YAAY,GACtB,GAAQ,EAAc,YAAY,GAElC,GACI,GAAU,EAAU,YAAY,GACpC,EAAU,YAAY,GAClB,GAAU,EAAU,YAAY,KAEhC,GAAU,EAAU,YAAY,GACpC,EAAU,YAAY,GAClB,GAAU,EAAU,YAAY,IAGpC,IAAI,EAAU,GAAK,GACnB,IAAW,EAAU,UAAY,GAErC,IAEO,CACH,WAAY,IAAM,EAClB,SAAU,IAAO,EAAU,IAAI,GAAgB,EAC/C,SAAW,IACP,EAAe,EAAU,IAAI,GAAO,EACpC,KAEJ,YAAc,IACV,EAAU,MAAM,QAAU,EAAM,OAAS,IACzC,EAAU,MAAM,cAAgB,EAAM,OAAS,UAw+BvD,MAAO,CACH,eACA,iBACA,aACA,YACA,gBAIX,EA7oKyB,GA+oK1B,OAAO,kBAAoB,kBA2B3B,SAAwB,GAIpB,IAAK,EAAK,kBAEN,YADA,QAAQ,KAAK,0FAIjB,MAAM,GAAE,EAAE,YAAE,GAAgB,EAAK,gBAAgB,OAAS,CAAC,GACrD,aAAE,GAAiB,EAAK,kBAAkB,MAKhD,EAAa,UAAW,ikBAwBxB,MAAM,EAAU,CAAC,EAAQ,CAAC,KACtB,MAAM,MACF,EAAe,IAAG,OAClB,EAAe,GAAE,aACjB,EAAe,EAAC,MAChB,EAAe,4BAA2B,eAC1C,EAAiB,sCAAqC,SACtD,EAAe,KAAI,MACnB,EAAe,GAAE,UACjB,EAAe,GAAG,OAClB,EAAM,OACN,EAAM,UACN,EAAS,UACT,EAAe,GAAE,GACjB,GACA,EAGE,EAAK,SAAS,cAAc,OAKlC,IAAI,EAJA,IAAI,EAAG,GAAK,GACZ,IAAW,EAAG,UAAY,GAK1B,EADA,MAAM,QAAQ,GACF,EAAa,IAAI,GAAK,EAAG,IAAI,KAAK,KAElC,EAAG,GAInB,MAAM,EAAS,CACX,aAAc,EACd,SAAc,SACd,WAAc,IACd,OAAc,EAAG,IAKjB,EAAO,MADG,iBAAV,EACe,OAEA,EAAG,GAGlB,IAAY,EAAO,OAAY,EAAG,IAClC,IAAY,EAAO,KAAY,GAC/B,IAAY,EAAO,UAAY,GAEnC,EAAY,EAAI,GAIhB,MAAM,EAAM,EAeZ,OAdA,EAAG,MAAM,WAAa,CAClB,mBACA,KAAK,QACL,KAAK,QACL,KAAK,SACL,KAAK,SACL,KAAK,SACL,KAAK,SACL,KACF,KAAK,IACP,EAAG,MAAM,eAAkB,YAC3B,EAAG,MAAM,UAAkB,yBAAyB,sBAG7C,CACH,WAAY,IAAM,EAGlB,MAAA,CAAO,GAEH,OAAO,OAAO,EAAO,GAGrB,MAAM,EAAI,EAAM,OAAS,IACnB,EAAI,EAAM,QAAU,GACpB,EAAK,EAAM,cAAgB,EAC3B,EAAI,EAAM,OAAS,4BACnB,EAAK,EAAM,gBAAkB,sCAC7B,EAAM,EAAM,UAAY,KACxB,EAAM,EAAM,OAAS,GAE3B,EAAG,MAAM,MAAuB,iBAAN,EAAuB,OAAS,EAAG,GAC7D,EAAG,MAAM,OAAiB,EAAG,GAC7B,EAAG,MAAM,aAAiB,MAAM,QAAQ,GAAM,EAAG,IAAI,GAAK,EAAG,IAAI,KAAK,KAAO,EAAG,GAChF,EAAG,MAAM,WAAiB,mBAAmB,SAAW,SAAS,UAAU,UAAW,UAAU,UAChG,EAAG,MAAM,eAAiB,YAC1B,EAAG,MAAM,kBAAoB,GAAG,KACpC,EAGA,SAAA,CAAU,GACN,EAAG,MAAM,mBAAqB,EAAS,SAAW,SACtD,IAOF,EAAgB,CASlB,IAAA,EAAK,MAAE,EAAQ,eAAc,MAAE,EAAK,eAAE,GAAmB,CAAC,GACtD,MAAM,EAAS,CAAC,EACZ,IAAgB,EAAO,MAAiB,GACxC,IAAgB,EAAO,eAAiB,GAE5C,MAAM,EAAQ,SAAS,cAAc,OAYrC,OAXA,EAAM,UAAY,gBACY,EAAM,MAAM,MAA5B,iBAAV,EAA8C,OACC,EAAG,GAGtD,EAAM,YAAY,EAAQ,IAAK,EAAQ,MAAO,eAAgB,OAAQ,IAAK,aAAc,IAAK,cAE9F,EAAM,YAAY,EAAQ,IAAK,EAAQ,MAAO,MAAgB,OAAQ,GAAK,aAAc,IAAK,cAE9F,EAAM,YAAY,EAAQ,IAAK,EAAQ,MAAO,MAAgB,OAAQ,GAAK,aAAc,IAAK,cAEvF,CAAE,WAAY,IAAM,EAC/B,EAOA,QAAA,EAAS,MAAE,EAAQ,eAAc,MAAE,EAAK,eAAE,GAAmB,CAAC,GAC1D,MAAM,EAAS,CAAC,EACZ,IAAgB,EAAO,MAAiB,GACxC,IAAgB,EAAO,eAAiB,GAE5C,MAAM,EAAM,SAAS,cAAc,OACnC,EAAI,UAAY,oBACc,EAAI,MAAM,MAA1B,iBAAV,EAA4C,OACC,EAAG,GAGpD,EAAI,YAAY,EAAQ,IAAK,EAAQ,MAAO,GAAI,OAAQ,GAAI,aAAc,KAAM,cAGhF,MAAM,EAAM,SAAS,cAAc,OAOnC,OANA,EAAI,UAAY,gBAChB,EAAI,MAAM,KAAO,IACjB,EAAI,YAAY,EAAQ,IAAK,EAAQ,MAAO,MAAO,OAAQ,GAAI,aAAc,IAAK,cAClF,EAAI,YAAY,EAAQ,IAAK,EAAQ,MAAO,MAAO,OAAQ,GAAI,aAAc,IAAK,cAClF,EAAI,YAAY,GAET,CAAE,WAAY,IAAM,EAC/B,EAKA,QAAA,EAAS,MAAE,EAAQ,OAAM,OAAE,EAAS,GAAE,MAAE,EAAK,eAAE,GAAmB,CAAC,GAC/D,MAAM,EAAS,CAAC,EAIhB,OAHI,IAAgB,EAAO,MAAiB,GACxC,IAAgB,EAAO,eAAiB,GAErC,EAAQ,IAAK,EAAQ,QAAO,SAAQ,aAAc,GAC7D,EAQA,IAAA,EAAK,QAAE,EAAU,EAAC,WAAE,EAAa,IAAG,IAAE,EAAM,GAAE,MAAE,EAAK,eAAE,GAAmB,CAAC,GACvE,MAAM,EAAS,CAAC,EACZ,IAAgB,EAAO,MAAiB,GACxC,IAAgB,EAAO,eAAiB,GAE5C,MAAM,EAAO,SAAS,cAAc,OACpC,EAAK,MAAM,QAAiB,OAC5B,EAAK,MAAM,oBAAsB,UAAU,UAC3C,EAAK,MAAM,IAAiB,EAAG,GAC/B,EAAK,MAAM,MAAiB,OAE5B,IAAK,IAAI,EAAI,EAAG,EAAI,EAAS,IACzB,EAAK,YAAY,EAAQ,IAAK,EAAQ,MAAO,eAAgB,OAAQ,EAAY,aAAc,KAAM,cAGzG,MAAO,CAAE,WAAY,IAAM,EAC/B,GAMJ,EAAK,kBAAkB,QAAiB,EACxC,EAAK,kBAAkB,cAAiB,CAE3C,CAlPD,CAkPG","file":"/gh/Terrehaght/js-jetpack-compose@main/js-jetpack-compose/material-views.js","sourceRoot":"","sourcesContent":["/**\n * Minified by jsDelivr using Terser v5.48.0.\n * Original file: /gh/Terrehaght/js-jetpack-compose@main/js-jetpack-compose/material-views.js\n *\n * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files\n */\n","// ============================================\r\n// AndroidComponents Core & Basic UI Components\r\n// ============================================\r\nconst AndroidComponents = (() => {\r\n    const {\r\n        dp,\r\n        applyStyles\r\n    } = window.AndroidLayouts?.utils || {};\r\n    const injectedStyles = new Set();\r\n\r\n    // ==========================================\r\n    // Core Utilities\r\n    // ==========================================\r\n    const injectStyles = (id, css) => {\r\n        if (injectedStyles.has(id)) return;\r\n        const style = document.createElement('style');\r\n        style.id = `android-components-${id}`;\r\n        style.textContent = css;\r\n        document.head.appendChild(style);\r\n        injectedStyles.add(id);\r\n    };\r\n\r\n    // Inject Material Switch & Button styles once\r\n    injectStyles('material-controls', `\r\n    /* Material Design CSS Variables */\r\n    :root {\r\n      --md-primary: #6750a4;\r\n      --md-primary-hover: #7c5db5;\r\n      --md-primary-container: #eaddff;\r\n      --md-on-primary: #ffffff;\r\n      --md-on-primary-container: #21005d;\r\n      --md-surface: #ffffff;\r\n      --md-surface-variant: #e7e0ec;\r\n      --md-surface-container-low: #f7f2fa;\r\n      --md-surface-container-highest: #e6e0e9;\r\n      --md-on-surface: #1c1b1f;\r\n      --md-on-surface-variant: #49454f;\r\n      --md-outline: #79747e;\r\n      --md-outline-variant: #cac4d0;\r\n      --md-error: #b3261e;\r\n      --md-success: #2e7d32;\r\n      --md-disabled-bg: #1c1b1f1f;\r\n      --md-disabled-text: #1c1b1f61;\r\n      --md-shadow: rgba(0, 0, 0, 0.15);\r\n      --md-ripple: rgba(103, 80, 164, 0.12);\r\n    }\r\n\r\n    .dark {\r\n      --md-primary: #d0bcff;\r\n      --md-primary-hover: #e0d0ff;\r\n      --md-primary-container: #4f378b;\r\n      --md-on-primary: #381e72;\r\n      --md-on-primary-container: #eaddff;\r\n      --md-surface: #1c1b1f;\r\n      --md-surface-variant: #49454f;\r\n      --md-surface-container-low: #1c1b1f;\r\n      --md-surface-container-highest: #2a292d;\r\n      --md-on-surface: #e6e1e5;\r\n      --md-on-surface-variant: #cac4d0;\r\n      --md-outline: #938f99;\r\n      --md-outline-variant: #49454f;\r\n      --md-error: #f2b8b5;\r\n      --md-success: #66bb6a;\r\n      --md-disabled-bg: #e6e1e51f;\r\n      --md-disabled-text: #e6e1e561;\r\n      --md-shadow: rgba(0, 0, 0, 0.4);\r\n      --md-ripple: rgba(208, 188, 255, 0.12);\r\n    }\r\n\r\n    /* Material Switch Styles */\r\n    .material-switch-container {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n      \r\n      user-select: none;\r\n      font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;\r\n      -webkit-tap-highlight-color: transparent;\r\n    }\r\n\r\n    .material-switch-container.disabled {\r\n      cursor: not-allowed;\r\n      opacity: 0.5;\r\n    }\r\n\r\n    .material-switch-label {\r\n      font-size: 14px;\r\n      color: var(--md-on-surface);\r\n    }\r\n\r\n    .material-switch {\r\n      position: relative;\r\n      width: 52px;\r\n      height: 32px;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .material-switch-input {\r\n      position: absolute;\r\n      opacity: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      \r\n      margin: 0;\r\n      z-index: 1;\r\n    }\r\n\r\n    .material-switch-input:disabled {\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    .material-switch-track {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      background: var(--md-surface-variant);\r\n      border: 2px solid var(--md-outline);\r\n      border-radius: 16px;\r\n      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n    }\r\n\r\n    .material-switch-input:checked ~ .material-switch-track {\r\n      background: var(--md-primary);\r\n      border-color: var(--md-primary);\r\n    }\r\n\r\n    .material-switch-thumb {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 6px;\r\n      width: 16px;\r\n      height: 16px;\r\n      background: var(--md-outline);\r\n      border-radius: 50%;\r\n      transform: translateY(-50%);\r\n      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .material-switch-thumb i {\r\n      font-size: 12px;\r\n      opacity: 0;\r\n      transform: scale(0);\r\n      transition: all 0.15s ease;\r\n      color: var(--md-on-primary);\r\n    }\r\n\r\n    .material-switch-input:checked ~ .material-switch-thumb {\r\n      left: calc(100% - 28px);\r\n      width: 24px;\r\n      height: 24px;\r\n      background: var(--md-on-primary);\r\n    }\r\n\r\n    .material-switch-input:checked ~ .material-switch-thumb i {\r\n      opacity: 1;\r\n      transform: scale(1);\r\n      color: var(--md-primary);\r\n    }\r\n\r\n    .material-switch-thumb::before {\r\n      content: '';\r\n      position: absolute;\r\n      width: 40px;\r\n      height: 40px;\r\n      border-radius: 50%;\r\n      background: var(--md-on-surface);\r\n      opacity: 0;\r\n      transition: opacity 0.15s ease;\r\n    }\r\n\r\n    .material-switch-container:hover:not(.disabled) .material-switch-thumb::before {\r\n      opacity: 0.08;\r\n    }\r\n\r\n    .material-switch-input:focus-visible ~ .material-switch-thumb::before {\r\n      opacity: 0.12;\r\n    }\r\n\r\n    /* Material Button Styles */\r\n    .material-btn {\r\n      position: relative;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 8px;\r\n      padding: 10px 24px;\r\n      border: none;\r\n      border-radius: 20px;\r\n      font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;\r\n      font-size: 14px;\r\n      font-weight: 500;\r\n      letter-spacing: 0.1px;\r\n      \r\n      overflow: hidden;\r\n      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n      -webkit-tap-highlight-color: transparent;\r\n      text-decoration: none;\r\n      white-space: nowrap;\r\n      outline: none;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .material-btn:focus-visible {\r\n      outline: 2px solid var(--md-primary);\r\n      outline-offset: 2px;\r\n    }\r\n\r\n    .material-btn::after {\r\n      content: '';\r\n      position: absolute;\r\n      inset: 0;\r\n      background: currentColor;\r\n      opacity: 0;\r\n      transition: opacity 0.2s;\r\n    }\r\n\r\n    .material-btn:hover::after {\r\n      opacity: 0.08;\r\n    }\r\n\r\n    .material-btn:active::after {\r\n      opacity: 0.12;\r\n    }\r\n\r\n    .material-btn.filled {\r\n      background: var(--md-primary);\r\n      color: var(--md-on-primary);\r\n    }\r\n\r\n    .material-btn.outlined {\r\n      background: transparent;\r\n      color: var(--md-primary);\r\n      border: 1px solid var(--md-outline);\r\n    }\r\n\r\n    .material-btn.outlined:hover {\r\n      background: var(--md-ripple);\r\n    }\r\n\r\n    .material-btn.text {\r\n      background: transparent;\r\n      color: var(--md-primary);\r\n      padding: 10px 16px;\r\n    }\r\n\r\n    .material-btn.text:hover {\r\n      background: var(--md-ripple);\r\n    }\r\n\r\n    .material-btn.elevated {\r\n      background: var(--md-surface);\r\n      color: var(--md-primary);\r\n      box-shadow: 0 1px 3px var(--md-shadow), 0 1px 2px var(--md-shadow);\r\n    }\r\n\r\n    .material-btn.elevated:hover {\r\n      box-shadow: 0 2px 6px var(--md-shadow), 0 2px 4px var(--md-shadow);\r\n    }\r\n\r\n    .material-btn.tonal {\r\n      background: var(--md-primary-container);\r\n      color: var(--md-on-primary-container);\r\n    }\r\n\r\n    .material-btn.small {\r\n      padding: 6px 16px;\r\n      font-size: 12px;\r\n      border-radius: 16px;\r\n      gap: 6px;\r\n    }\r\n\r\n    .material-btn.large {\r\n      padding: 14px 32px;\r\n      font-size: 16px;\r\n      border-radius: 24px;\r\n      gap: 10px;\r\n    }\r\n\r\n    .material-btn.icon-only {\r\n      width: 40px;\r\n      height: 40px;\r\n      padding: 0;\r\n      border-radius: 50%;\r\n    }\r\n\r\n    .material-btn.icon-only.small {\r\n      width: 32px;\r\n      height: 32px;\r\n    }\r\n\r\n    .material-btn.icon-only.large {\r\n      width: 56px;\r\n      height: 56px;\r\n    }\r\n\r\n    .material-btn.fullwidth {\r\n      width: 100%;\r\n    }\r\n\r\n    .material-btn:disabled,\r\n    .material-btn.disabled {\r\n      cursor: not-allowed;\r\n      opacity: 0.5;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .material-btn.filled:disabled {\r\n      background: var(--md-disabled-bg);\r\n      color: var(--md-disabled-text);\r\n    }\r\n\r\n    .material-btn i {\r\n      font-size: 18px;\r\n      line-height: 1;\r\n    }\r\n\r\n    .material-btn.small i {\r\n      font-size: 16px;\r\n    }\r\n\r\n    .material-btn.large i {\r\n      font-size: 22px;\r\n    }\r\n\r\n    .material-btn.icon-only i {\r\n      font-size: 20px;\r\n    }\r\n\r\n    .material-btn.icon-only.large i {\r\n      font-size: 24px;\r\n    }\r\n\r\n    .material-btn.loading {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .material-btn-loader {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n    }\r\n\r\n    .material-spinner {\r\n      width: 18px;\r\n      height: 18px;\r\n      border: 2px solid currentColor;\r\n      border-top-color: transparent;\r\n      border-radius: 50%;\r\n      animation: material-spin 0.8s linear infinite;\r\n    }\r\n\r\n    .material-btn.small .material-spinner {\r\n      width: 14px;\r\n      height: 14px;\r\n    }\r\n\r\n    .material-btn.large .material-spinner {\r\n      width: 22px;\r\n      height: 22px;\r\n    }\r\n\r\n    @keyframes material-spin {\r\n      to { transform: rotate(360deg); }\r\n    }\r\n\r\n    /* Material Input Styles */\r\n    .material-input-container {\r\n      position: relative;\r\n      width: 100%;\r\n      font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;\r\n    }\r\n\r\n    .material-input-wrapper {\r\n      position: relative;\r\n      display: flex;\r\n      align-items: center;\r\n      border: 2px solid var(--md-outline);\r\n      border-radius: 8px;\r\n      background: var(--md-surface);\r\n      transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n      cursor: text;\r\n    }\r\n\r\n    .material-input-wrapper:hover:not(.material-input-disabled):not(.material-input-focused) {\r\n      border-color: var(--md-outline-variant);\r\n    }\r\n\r\n    .material-input-wrapper.material-input-focused {\r\n      border-color: var(--md-primary);\r\n      box-shadow: 0 0 0 3px var(--md-ripple);\r\n    }\r\n\r\n    .material-input-wrapper.material-input-error {\r\n      border-color: var(--md-error);\r\n    }\r\n\r\n    .material-input-wrapper.material-input-error.material-input-focused {\r\n      box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);\r\n    }\r\n\r\n    .material-input-wrapper.material-input-success {\r\n      border-color: var(--md-success);\r\n    }\r\n\r\n    .material-input-wrapper.material-input-success.material-input-focused {\r\n      box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.12);\r\n    }\r\n\r\n    .material-input-wrapper.material-input-disabled {\r\n      background: var(--md-disabled-bg);\r\n      cursor: not-allowed;\r\n      opacity: 0.7;\r\n    }\r\n\r\n    .material-input-leading-icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: 48px;\r\n      height: 100%;\r\n      color: var(--md-on-surface-variant);\r\n      font-size: 20px;\r\n      flex-shrink: 0;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .material-input-focused .material-input-leading-icon {\r\n      color: var(--md-primary);\r\n    }\r\n\r\n    .material-input-error .material-input-leading-icon {\r\n      color: var(--md-error);\r\n    }\r\n\r\n    .material-input-success .material-input-leading-icon {\r\n      color: var(--md-success);\r\n    }\r\n\r\n    .material-input-field {\r\n      flex: 1;\r\n      width: 100%;\r\n      padding: 16px 14px;\r\n      border: none;\r\n      outline: none;\r\n      background: transparent;\r\n      font-size: 16px;\r\n      color: var(--md-on-surface);\r\n      font-family: inherit;\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .material-input-has-leading .material-input-field {\r\n      padding-left: 0;\r\n    }\r\n\r\n    .material-input-has-trailing .material-input-field {\r\n      padding-right: 0;\r\n    }\r\n\r\n    .material-input-field::placeholder {\r\n      color: transparent;\r\n    }\r\n\r\n    .material-input-field:disabled {\r\n      color: var(--md-disabled-text);\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    textarea.material-input-field {\r\n      min-height: 100px;\r\n      resize: vertical;\r\n    }\r\n\r\n    .material-input-label {\r\n      position: absolute;\r\n      left: 14px;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      font-size: 16px;\r\n      color: var(--md-on-surface-variant);\r\n      pointer-events: none;\r\n      transition: all 0.2s ease;\r\n      background: transparent;\r\n      padding: 0;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .material-input-has-leading .material-input-label {\r\n      left: 48px;\r\n    }\r\n\r\n    textarea.material-input-field ~ .material-input-label {\r\n      top: 18px;\r\n      transform: none;\r\n    }\r\n\r\n    .material-input-floated .material-input-label,\r\n    .material-input-field:focus ~ .material-input-label {\r\n      top: 0;\r\n      transform: translateY(-50%);\r\n      font-size: 12px;\r\n      background: var(--md-surface);\r\n      padding: 0 6px;\r\n      left: 10px;\r\n      color: var(--md-primary);\r\n    }\r\n\r\n    .material-input-has-leading.material-input-floated .material-input-label,\r\n    .material-input-has-leading .material-input-field:focus ~ .material-input-label {\r\n      left: 10px;\r\n    }\r\n\r\n    .material-input-error .material-input-label,\r\n    .material-input-error .material-input-field:focus ~ .material-input-label {\r\n      color: var(--md-error);\r\n    }\r\n\r\n    .material-input-success .material-input-label,\r\n    .material-input-success .material-input-field:focus ~ .material-input-label {\r\n      color: var(--md-success);\r\n    }\r\n\r\n    .material-input-disabled .material-input-label {\r\n      background: var(--md-disabled-bg);\r\n      color: var(--md-disabled-text);\r\n    }\r\n\r\n    .material-input-required .material-input-label::after {\r\n      content: ' *';\r\n      color: var(--md-error);\r\n    }\r\n\r\n    .material-input-trailing-icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: 48px;\r\n      height: 100%;\r\n      color: var(--md-on-surface-variant);\r\n      font-size: 20px;\r\n      flex-shrink: 0;\r\n      \r\n      border-radius: 0 6px 6px 0;\r\n      transition: color 0.2s;\r\n    }\r\n\r\n    .material-input-trailing-icon:hover {\r\n      color: var(--md-on-surface);\r\n    }\r\n\r\n    .material-input-focused .material-input-trailing-icon {\r\n      color: var(--md-primary);\r\n    }\r\n\r\n    .material-input-disabled .material-input-trailing-icon {\r\n      pointer-events: none;\r\n      color: var(--md-disabled-text);\r\n    }\r\n\r\n    .material-input-helper {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      padding: 6px 14px 0;\r\n      font-size: 12px;\r\n      color: var(--md-on-surface-variant);\r\n    }\r\n\r\n    .material-input-helper-text {\r\n      flex: 1;\r\n    }\r\n\r\n    .material-input-error .material-input-helper-text {\r\n      color: var(--md-error);\r\n    }\r\n\r\n    .material-input-success .material-input-helper-text {\r\n      color: var(--md-success);\r\n    }\r\n\r\n    .material-input-counter {\r\n      flex-shrink: 0;\r\n      margin-left: 12px;\r\n    }\r\n\r\n    .material-input-wrapper[data-color] {\r\n      border-color: var(--md-custom-input-color);\r\n    }\r\n\r\n    .material-input-wrapper[data-color].material-input-focused {\r\n      border-color: var(--md-custom-input-color);\r\n      box-shadow: 0 0 0 3px var(--md-custom-input-color-light);\r\n    }\r\n\r\n    .material-input-wrapper[data-color] .material-input-label,\r\n    .material-input-wrapper[data-color] .material-input-field:focus ~ .material-input-label {\r\n      color: var(--md-custom-input-color);\r\n    }\r\n\r\n    .material-input-wrapper[data-color] .material-input-leading-icon,\r\n    .material-input-wrapper[data-color].material-input-focused .material-input-trailing-icon {\r\n      color: var(--md-custom-input-color);\r\n    }\r\n  `);\r\n\r\n    // ==========================================\r\n    // Helper Functions\r\n    // ==========================================\r\n    let idCounter = 0;\r\n    const generateId = (prefix) => `${prefix}-${++idCounter}`;\r\n\r\n    const hexToRgba = (hex, alpha) => {\r\n        const r = parseInt(hex.slice(1, 3), 16);\r\n        const g = parseInt(hex.slice(3, 5), 16);\r\n        const b = parseInt(hex.slice(5, 7), 16);\r\n        return `rgba(${r}, ${g}, ${b}, ${alpha})`;\r\n    };\r\n\r\n    const getLuminance = (hex) => {\r\n        const r = parseInt(hex.slice(1, 3), 16) / 255;\r\n        const g = parseInt(hex.slice(3, 5), 16) / 255;\r\n        const b = parseInt(hex.slice(5, 7), 16) / 255;\r\n        return 0.299 * r + 0.587 * g + 0.114 * b;\r\n    };\r\n\r\n    // ==========================================\r\n    // TextView (Enhanced)\r\n    // ==========================================\r\n const TextView = (props = {}) => {\r\n    const {\r\n        text = '',\r\n        isHtml = false,\r\n        textSize = 14,\r\n        textColor,\r\n        textStyle = 'normal',\r\n        gravity,\r\n        padding,\r\n        margin,\r\n        weight,\r\n        alignSelf,\r\n        width,\r\n        height,\r\n        maxLines,\r\n        ellipsize = false,\r\n        id,\r\n        className,\r\n        expandable = false,\r\n        collapsedLines = 3,\r\n        seeMoreText = 'See more',\r\n        seeLessText = 'See less',\r\n        seeMoreAlign = 'start',\r\n        seeMoreColor = 'var(--md-primary, #007bff)',\r\n        onExpand = null,\r\n        onCollapse = null,\r\n        onClick = null,\r\n        // Icon properties\r\n        icon = null,\r\n        iconSize = null,\r\n        iconColor = null,\r\n        iconGravity = 'start',\r\n        iconSpacing = 8,\r\n        // Background properties\r\n        background = null,\r\n        borderRadius = 0,\r\n        border = null,\r\n        elevation = 0\r\n    } = props;\r\n\r\n    const container = document.createElement('div');\r\n    const textView = document.createElement('div');\r\n    const textId = id ? `${id}_text` : `textview_${Math.random().toString(36).substr(2, 9)}`;\r\n\r\n    // Helper for DP\r\n    const safeDp = (val) => typeof dp === 'function' ? dp(val) : (typeof val === 'number' ? `${val}px` : val);\r\n\r\n    let isExpanded = false;\r\n    let seeMoreBtn = null;\r\n    let resizeObserver = null;\r\n    let iconElement = null;\r\n\r\n    // --- Styles ---\r\n    const baseStyles = {\r\n        fontSize: safeDp(textSize),\r\n        color: textColor || 'var(--md-on-surface)',\r\n        fontWeight: textStyle === 'bold' ? 'bold' : 'normal',\r\n        fontStyle: textStyle === 'italic' ? 'italic' : 'normal',\r\n        boxSizing: 'border-box',\r\n        lineHeight: '1.5',\r\n        margin: '0',\r\n        wordBreak: 'break-word'\r\n    };\r\n\r\n    // --- Container Setup ---\r\n    container.style.display = 'flex';\r\n    container.style.boxSizing = 'border-box';\r\n    container.setAttribute('role', 'region');\r\n\r\n    // Background styling\r\n    if (background) container.style.background = background;\r\n    if (borderRadius) container.style.borderRadius = safeDp(borderRadius);\r\n    if (border) container.style.border = border;\r\n    if (elevation > 0) {\r\n        container.style.boxShadow = `0 ${elevation * 2}px ${elevation * 4}px rgba(0,0,0,${0.1 + elevation * 0.02})`;\r\n    }\r\n\r\n    // Apply icon gravity layout\r\n    if (icon && (iconGravity === 'top' || iconGravity === 'bottom')) {\r\n        container.style.flexDirection = 'column';\r\n    } else {\r\n        container.style.flexDirection = 'row';\r\n        // KEY FIX: Center align items vertically for horizontal layouts\r\n        container.style.alignItems = 'center';\r\n    }\r\n\r\n    // Override alignment if gravity is specified\r\n    if (gravity === 'center') {\r\n        container.style.alignItems = 'center';\r\n        container.style.justifyContent = 'center';\r\n    } else if (gravity === 'end' || gravity === 'right') {\r\n        container.style.justifyContent = 'flex-end';\r\n    } else if (gravity === 'start' || gravity === 'left') {\r\n        container.style.justifyContent = 'flex-start';\r\n    }\r\n\r\n    if (padding) container.style.padding = safeDp(padding);\r\n    if (margin) container.style.margin = safeDp(margin);\r\n    if (weight) container.style.flex = weight;\r\n    if (alignSelf) container.style.alignSelf = alignSelf;\r\n\r\n    if (width === 'match_parent') container.style.width = '100%';\r\n    else if (width === 'wrap_content') container.style.width = 'fit-content';\r\n    else if (width) container.style.width = safeDp(width);\r\n    if (height === 'match_parent') container.style.height = '100%';\r\n    else if (height) container.style.height = safeDp(height);\r\n\r\n    // --- Icon Setup ---\r\n    if (icon) {\r\n        iconElement = document.createElement('i');\r\n        // Handle both formats: 'bx bx-map' or just 'bx-map'\r\n        const iconClass = icon.includes('bx') ? icon : `bx ${icon}`;\r\n        iconElement.className = iconClass;\r\n        iconElement.style.fontSize = safeDp(iconSize || textSize);\r\n        iconElement.style.color = iconColor || textColor || 'var(--md-on-surface)';\r\n        iconElement.style.flexShrink = '0';\r\n        iconElement.style.display = 'flex';\r\n        iconElement.style.alignItems = 'center';\r\n        iconElement.style.justifyContent = 'center';\r\n        // KEY FIX: Set line-height to 1 to prevent extra spacing\r\n        iconElement.style.lineHeight = '1';\r\n\r\n        // Apply spacing based on gravity\r\n        if (iconGravity === 'start') {\r\n            iconElement.style.marginRight = safeDp(iconSpacing);\r\n        } else if (iconGravity === 'end') {\r\n            iconElement.style.marginLeft = safeDp(iconSpacing);\r\n        } else if (iconGravity === 'top') {\r\n            iconElement.style.marginBottom = safeDp(iconSpacing);\r\n        } else if (iconGravity === 'bottom') {\r\n            iconElement.style.marginTop = safeDp(iconSpacing);\r\n        }\r\n    }\r\n\r\n    // --- Content Wrapper for Expandable ---\r\n    const contentWrapper = document.createElement('div');\r\n    contentWrapper.style.display = 'flex';\r\n    contentWrapper.style.flexDirection = 'column';\r\n    contentWrapper.style.flex = '1';\r\n    contentWrapper.style.minWidth = '0';\r\n    // KEY FIX: Ensure wrapper doesn't add extra height\r\n    contentWrapper.style.alignSelf = icon && (iconGravity === 'start' || iconGravity === 'end') ? 'center' : 'stretch';\r\n\r\n    // --- TextView Setup ---\r\n    Object.assign(textView.style, baseStyles);\r\n    textView.style.width = '100%';\r\n    textView.id = textId;\r\n\r\n    if (isHtml) textView.innerHTML = text;\r\n    else textView.textContent = text;\r\n\r\n    if (gravity === 'center') textView.style.textAlign = 'center';\r\n    else if (gravity === 'end' || gravity === 'right') textView.style.textAlign = 'right';\r\n\r\n    if (onClick) {\r\n        \r\n        textView.addEventListener('click', onClick);\r\n    }\r\n\r\n    const applyCollapsedState = () => {\r\n        textView.style.display = '-webkit-box';\r\n        textView.style.webkitLineClamp = collapsedLines.toString();\r\n        textView.style.webkitBoxOrient = 'vertical';\r\n        textView.style.overflow = 'hidden';\r\n        if (seeMoreBtn) seeMoreBtn.setAttribute('aria-expanded', 'false');\r\n    };\r\n\r\n    const applyExpandedState = () => {\r\n        textView.style.display = 'block';\r\n        textView.style.webkitLineClamp = 'unset';\r\n        textView.style.webkitBoxOrient = 'unset';\r\n        textView.style.overflow = 'visible';\r\n        if (seeMoreBtn) seeMoreBtn.setAttribute('aria-expanded', 'true');\r\n    };\r\n\r\n    const checkTruncation = () => {\r\n        if (!expandable || !seeMoreBtn) return;\r\n        if (textView.clientHeight === 0) return;\r\n\r\n        if (!isExpanded) {\r\n            const hasOverflow = textView.scrollHeight > (textView.clientHeight + 1);\r\n            seeMoreBtn.style.display = hasOverflow ? 'inline-block' : 'none';\r\n        }\r\n    };\r\n\r\n    // --- Assembly ---\r\n    if (expandable) {\r\n        applyCollapsedState();\r\n        contentWrapper.appendChild(textView);\r\n\r\n        seeMoreBtn = document.createElement('button');\r\n        seeMoreBtn.textContent = seeMoreText;\r\n        seeMoreBtn.setAttribute('aria-controls', textId);\r\n        seeMoreBtn.setAttribute('aria-expanded', 'false');\r\n\r\n        const alignMap = {\r\n            'start':  { alignSelf: 'flex-start', textAlign: 'left'   },\r\n            'left':   { alignSelf: 'flex-start', textAlign: 'left'   },\r\n            'center': { alignSelf: 'center',      textAlign: 'center' },\r\n            'end':    { alignSelf: 'flex-end',    textAlign: 'right'  },\r\n            'right':  { alignSelf: 'flex-end',    textAlign: 'right'  },\r\n        };\r\n        const btnAlign = alignMap[seeMoreAlign] || alignMap['start'];\r\n\r\n        seeMoreBtn.style.background   = 'none';\r\n        seeMoreBtn.style.border       = 'none';\r\n        seeMoreBtn.style.color        = seeMoreColor;\r\n        seeMoreBtn.style.fontSize     = safeDp(textSize);\r\n        seeMoreBtn.style.fontWeight   = '500';\r\n        seeMoreBtn.style.padding      = '4px 0';\r\n        seeMoreBtn.style.marginTop    = '4px';\r\n        seeMoreBtn.style.display      = 'none';\r\n        seeMoreBtn.style.alignSelf    = btnAlign.alignSelf;\r\n        seeMoreBtn.style.textAlign    = btnAlign.textAlign;\r\n        seeMoreBtn.style.fontFamily   = 'inherit';\r\n        seeMoreBtn.style.cursor       = 'pointer';\r\n\r\n        seeMoreBtn.addEventListener('mouseenter', () => seeMoreBtn.style.textDecoration = 'underline');\r\n        seeMoreBtn.addEventListener('mouseleave', () => seeMoreBtn.style.textDecoration = 'none');\r\n\r\n        seeMoreBtn.addEventListener('click', (e) => {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n            isExpanded = !isExpanded;\r\n\r\n            if (isExpanded) {\r\n                applyExpandedState();\r\n                seeMoreBtn.textContent = seeLessText;\r\n                if (onExpand) onExpand();\r\n            } else {\r\n                applyCollapsedState();\r\n                seeMoreBtn.textContent = seeMoreText;\r\n                if (onCollapse) onCollapse();\r\n            }\r\n        });\r\n\r\n        contentWrapper.appendChild(seeMoreBtn);\r\n\r\n        if ('ResizeObserver' in window) {\r\n            resizeObserver = new ResizeObserver(() => {\r\n                window.requestAnimationFrame(checkTruncation);\r\n            });\r\n            resizeObserver.observe(textView);\r\n            resizeObserver.observe(container);\r\n        } else {\r\n            setTimeout(checkTruncation, 200);\r\n        }\r\n\r\n    } else {\r\n        if (maxLines) {\r\n            textView.style.display = '-webkit-box';\r\n            textView.style.webkitLineClamp = maxLines.toString();\r\n            textView.style.webkitBoxOrient = 'vertical';\r\n            textView.style.overflow = 'hidden';\r\n        }\r\n        if (ellipsize && !maxLines) {\r\n            textView.style.overflow = 'hidden';\r\n            textView.style.textOverflow = 'ellipsis';\r\n            textView.style.whiteSpace = 'nowrap';\r\n            textView.style.display = 'block';\r\n        }\r\n        contentWrapper.appendChild(textView);\r\n    }\r\n\r\n    // Append icon and content based on gravity\r\n    if (icon) {\r\n        if (iconGravity === 'end' || iconGravity === 'bottom') {\r\n            container.appendChild(contentWrapper);\r\n            container.appendChild(iconElement);\r\n        } else {\r\n            container.appendChild(iconElement);\r\n            container.appendChild(contentWrapper);\r\n        }\r\n    } else {\r\n        container.appendChild(contentWrapper);\r\n    }\r\n\r\n    if (id) container.id = id;\r\n    if (className) container.className = className;\r\n\r\n    return {\r\n        getElement: () => container,\r\n\r\n        setText: (newText) => {\r\n            if (isHtml) textView.innerHTML = newText;\r\n            else textView.textContent = newText;\r\n\r\n            if (expandable) {\r\n                isExpanded = false;\r\n                applyCollapsedState();\r\n                if (seeMoreBtn) {\r\n                    seeMoreBtn.textContent = seeMoreText;\r\n                    requestAnimationFrame(checkTruncation);\r\n                }\r\n            }\r\n        },\r\n\r\n        setTextColor: (color) => {\r\n            textView.style.color = color;\r\n        },\r\n\r\n        setIcon: (newIcon) => {\r\n            if (iconElement && newIcon) {\r\n                const iconClass = newIcon.includes('bx') ? newIcon : `bx ${newIcon}`;\r\n                iconElement.className = iconClass;\r\n            }\r\n        },\r\n\r\n        setIconColor: (color) => {\r\n            if (iconElement) {\r\n                iconElement.style.color = color;\r\n            }\r\n        },\r\n\r\n        setBackground: (bg) => {\r\n            container.style.background = bg;\r\n        },\r\n\r\n        getText: () => textView.textContent,\r\n\r\n        expand: () => {\r\n            if (expandable && !isExpanded && seeMoreBtn && seeMoreBtn.style.display !== 'none') {\r\n                seeMoreBtn.click();\r\n            }\r\n        },\r\n\r\n        collapse: () => {\r\n            if (expandable && isExpanded && seeMoreBtn) {\r\n                seeMoreBtn.click();\r\n            }\r\n        },\r\n\r\n        isExpanded: () => isExpanded,\r\n\r\n        destroy: () => {\r\n            if (resizeObserver) {\r\n                resizeObserver.disconnect();\r\n                resizeObserver = null;\r\n            }\r\n            container.remove();\r\n        }\r\n    };\r\n};\r\n\r\n   // ==========================================\r\n// MaterialImage Component (Enhanced with Shimmer)\r\n// ==========================================\r\n\r\nconst MaterialImage = (props = {}) => {\r\n    const {\r\n        src = '',\r\n        alt = '',\r\n        width,\r\n        height,\r\n        aspectRatio, // '16:9', '4:3', '1:1', 'square', etc.\r\n        fit = 'cover', // cover, contain, fill, none, scale-down\r\n        position = 'center', // center, top, bottom, left, right, or CSS position value\r\n        cornerRadius = 0,\r\n        border = null, // Border width in dp/px\r\n        borderColor = 'var(--md-outline)',\r\n        borderStyle = 'solid', // solid, dashed, dotted\r\n        elevation = 0, // Shadow elevation (0-24)\r\n        loading = 'lazy', // lazy, eager\r\n        draggable = false,\r\n        crossOrigin = null, // anonymous, use-credentials\r\n        placeholder, // Placeholder image URL (tiny blur-up image)\r\n        lowQualitySrc, // Low quality version for blur-up effect\r\n        fallback, // Fallback image URL on error\r\n        overlay = false, // Show dark overlay\r\n        overlayOpacity = 0.3,\r\n        blur = 0, // Blur effect in pixels\r\n        grayscale = false,\r\n        opacity = 1,\r\n        rotate = 0, // Rotation in degrees\r\n        flipX = false,\r\n        flipY = false,\r\n        enableBlurUp = true, // Enable blur-up progressive loading\r\n        blurUpIntensity = 20, // Blur intensity for blur-up effect\r\n        enableRetry = true, // Enable retry on network errors\r\n        maxRetries = 3, // Maximum retry attempts\r\n        retryDelay = 2000, // Delay between retries in ms\r\n        shimmerBaseColor = 'rgba(0, 0, 0, 0.08)', // Base shimmer color\r\n        shimmerHighlightColor = 'rgba(255, 255, 255, 1.0)', // Shimmer highlight\r\n        shimmerAnimationDuration = '1.5s', // Shimmer animation speed\r\n        onClick,\r\n        onLoad,\r\n        onError,\r\n        onRetry,\r\n        margin,\r\n        padding,\r\n        weight,\r\n        alignSelf,\r\n        id,\r\n        className,\r\n        title,\r\n        ariaLabel\r\n    } = props;\r\n\r\n    const imgId = id || generateId('material-image');\r\n    let hasLoaded = false;\r\n    let hasError = false;\r\n    let retryCount = 0;\r\n    let retryTimeout = null;\r\n    let isRetrying = false;\r\n\r\n    // Container\r\n    const container = document.createElement('div');\r\n    const containerClasses = ['material-image-container'];\r\n    if (className) containerClasses.push(className);\r\n    container.className = containerClasses.join(' ');\r\n\r\n    // Container styles\r\n    const containerStyles = {\r\n        position: 'relative',\r\n        display: 'inline-block',\r\n        overflow: 'hidden',\r\n        borderRadius: dp(cornerRadius),\r\n        boxSizing: 'border-box',\r\n    };\r\n\r\n    // Width handling\r\n    if (width === 'match_parent') containerStyles.width = '100%';\r\n    else if (width === 'wrap_content') containerStyles.width = 'auto';\r\n    else if (width) containerStyles.width = dp(width);\r\n\r\n    // Height handling\r\n    if (height === 'match_parent') containerStyles.height = '100%';\r\n    else if (height === 'wrap_content') containerStyles.height = 'auto';\r\n    else if (height) containerStyles.height = dp(height);\r\n\r\n    // Aspect ratio handling\r\n    if (aspectRatio) {\r\n        const ratios = {\r\n            '16:9': '56.25%',\r\n            '4:3': '75%',\r\n            '3:2': '66.66%',\r\n            '1:1': '100%',\r\n            'square': '100%',\r\n            '9:16': '177.77%',\r\n            '3:4': '133.33%',\r\n            '2:3': '150%'\r\n        };\r\n\r\n        if (ratios[aspectRatio]) {\r\n            containerStyles.paddingTop = ratios[aspectRatio];\r\n            containerStyles.height = '0';\r\n        } else if (aspectRatio.includes(':')) {\r\n            const [w, h] = aspectRatio.split(':').map(Number);\r\n            containerStyles.paddingTop = `${(h / w) * 100}%`;\r\n            containerStyles.height = '0';\r\n        }\r\n    }\r\n\r\n    // Border\r\n    if (border) {\r\n        containerStyles.border = `${dp(border)} ${borderStyle} ${borderColor}`;\r\n    }\r\n\r\n    // Elevation (shadow)\r\n    if (elevation > 0) {\r\n        const shadowIntensity = Math.min(elevation / 24, 1);\r\n        const blur = elevation * 2;\r\n        const spread = elevation * 0.5;\r\n        containerStyles.boxShadow = `0 ${elevation}px ${blur}px rgba(0, 0, 0, ${0.1 + shadowIntensity * 0.2}), \r\n                              0 ${spread}px ${spread * 2}px rgba(0, 0, 0, ${0.05 + shadowIntensity * 0.1})`;\r\n    }\r\n\r\n    if (margin) containerStyles.margin = dp(margin);\r\n    if (padding) containerStyles.padding = dp(padding);\r\n    if (weight) containerStyles.flex = weight;\r\n    if (alignSelf) containerStyles.alignSelf = alignSelf;\r\n    if (onClick) {\r\n        \r\n        containerStyles.transition = 'transform 0.2s ease, box-shadow 0.2s ease';\r\n    }\r\n\r\n    applyStyles(container, containerStyles);\r\n\r\n    // Shimmer element for loading/error states\r\n    const shimmer = document.createElement('div');\r\n    shimmer.className = 'material-image-shimmer';\r\n    applyStyles(shimmer, {\r\n        position: aspectRatio ? 'absolute' : 'relative',\r\n        top: '0',\r\n        left: '0',\r\n        width: '100%',\r\n        height: '100%',\r\n        background: shimmerBaseColor,\r\n        opacity: '1',\r\n        transition: 'opacity 0.3s ease',\r\n        pointerEvents: 'none',\r\n    });\r\n\r\n    // Shimmer animation effect\r\n    const shimmerOverlay = document.createElement('div');\r\n    shimmerOverlay.className = 'material-image-shimmer-overlay';\r\n    applyStyles(shimmerOverlay, {\r\n        position: 'absolute',\r\n        top: '0',\r\n        left: '-100%',\r\n        width: '100%',\r\n        height: '100%',\r\n        background: `linear-gradient(90deg, \r\n            transparent 0%, \r\n            ${shimmerHighlightColor} 50%, \r\n            transparent 100%)`,\r\n        animation: `shimmerSlide ${shimmerAnimationDuration} ease-in-out infinite`,\r\n    });\r\n\r\n    shimmer.appendChild(shimmerOverlay);\r\n    container.appendChild(shimmer);\r\n\r\n    // Add shimmer keyframe animation to document if not already present\r\n    if (!document.getElementById('material-image-shimmer-keyframes')) {\r\n        const style = document.createElement('style');\r\n        style.id = 'material-image-shimmer-keyframes';\r\n        style.textContent = `\r\n            @keyframes shimmerSlide {\r\n                0% {\r\n                    left: -100%;\r\n                }\r\n                100% {\r\n                    left: 100%;\r\n                }\r\n            }\r\n        `;\r\n        document.head.appendChild(style);\r\n    }\r\n\r\n    // Image element\r\n    const img = document.createElement('img');\r\n    img.id = imgId;\r\n    img.className = 'material-image-img';\r\n    if (alt) img.alt = alt;\r\n    if (title) img.title = title;\r\n    if (ariaLabel) img.setAttribute('aria-label', ariaLabel);\r\n    if (loading) img.loading = loading;\r\n    if (crossOrigin) img.crossOrigin = crossOrigin;\r\n    img.draggable = draggable;\r\n\r\n    // Image styles\r\n    const imgStyles = {\r\n        width: '100%',\r\n        height: '100%',\r\n        objectFit: fit,\r\n        objectPosition: position,\r\n        display: 'block',\r\n        opacity: 0, // Start hidden, fade in on load\r\n        transition: 'opacity 0.3s ease, filter 0.6s ease, transform 0.6s ease',\r\n    };\r\n\r\n    // Position absolutely if using aspect ratio\r\n    if (aspectRatio) {\r\n        imgStyles.position = 'absolute';\r\n        imgStyles.top = '0';\r\n        imgStyles.left = '0';\r\n    }\r\n\r\n    // Transforms\r\n    const transforms = [];\r\n    if (rotate) transforms.push(`rotate(${rotate}deg)`);\r\n    if (flipX) transforms.push('scaleX(-1)');\r\n    if (flipY) transforms.push('scaleY(-1)');\r\n    if (transforms.length > 0) {\r\n        imgStyles.transform = transforms.join(' ');\r\n    }\r\n\r\n    // Filters\r\n    const filters = [];\r\n    if (blur > 0) filters.push(`blur(${blur}px)`);\r\n    if (grayscale) filters.push('grayscale(100%)');\r\n    if (filters.length > 0) {\r\n        imgStyles.filter = filters.join(' ');\r\n    }\r\n\r\n    applyStyles(img, imgStyles);\r\n    container.appendChild(img);\r\n\r\n    // Blur-up progressive loading setup\r\n    const shouldUseBlurUp = enableBlurUp && (lowQualitySrc || placeholder);\r\n    let isBlurred = shouldUseBlurUp;\r\n\r\n    if (shouldUseBlurUp) {\r\n        // Start with blurred low-quality image\r\n        img.classList.add('material-image-loading');\r\n        const currentFilters = filters.slice();\r\n        currentFilters.push(`blur(${blurUpIntensity}px)`);\r\n        img.style.filter = currentFilters.join(' ');\r\n        img.style.transform = `${transforms.join(' ')} scale(1.05)`.trim();\r\n        img.src = lowQualitySrc || placeholder;\r\n        img.style.opacity = opacity;\r\n    } else if (placeholder) {\r\n        img.src = placeholder;\r\n        img.style.opacity = opacity;\r\n    } else {\r\n        img.src = src || '';\r\n    }\r\n\r\n    // Overlay element\r\n    let overlayEl;\r\n    if (overlay) {\r\n        overlayEl = document.createElement('div');\r\n        overlayEl.className = 'material-image-overlay';\r\n        applyStyles(overlayEl, {\r\n            position: 'absolute',\r\n            top: '0',\r\n            left: '0',\r\n            width: '100%',\r\n            height: '100%',\r\n            background: 'rgba(0, 0, 0, ' + overlayOpacity + ')',\r\n            pointerEvents: 'none',\r\n            zIndex: '1',\r\n        });\r\n        container.appendChild(overlayEl);\r\n    }\r\n\r\n    // Load high quality image for blur-up effect\r\n    const loadHighQualityImage = (highQualitySrc) => {\r\n        const tempImg = new Image();\r\n        if (crossOrigin) tempImg.crossOrigin = crossOrigin;\r\n\r\n        tempImg.addEventListener('load', () => {\r\n            img.src = highQualitySrc;\r\n            \r\n            // Remove blur effect with smooth transition\r\n            setTimeout(() => {\r\n                if (isBlurred) {\r\n                    img.classList.remove('material-image-loading');\r\n                    img.style.filter = filters.join(' ');\r\n                    img.style.transform = transforms.join(' ');\r\n                    isBlurred = false;\r\n                }\r\n                img.style.opacity = opacity;\r\n                shimmer.style.opacity = '0'; // Hide shimmer\r\n                hasLoaded = true;\r\n                if (onLoad) onLoad();\r\n            }, 50);\r\n        });\r\n\r\n        tempImg.addEventListener('error', (error) => {\r\n            handleError(error);\r\n        });\r\n\r\n        tempImg.src = highQualitySrc;\r\n    };\r\n\r\n    // Handle successful image load\r\n    const handleLoad = () => {\r\n        if (hasLoaded) return;\r\n        hasLoaded = true;\r\n        img.style.opacity = opacity;\r\n        shimmer.style.opacity = '0'; // Hide shimmer\r\n        if (onLoad) onLoad();\r\n    };\r\n\r\n    // Retry logic\r\n    const attemptRetry = () => {\r\n        if (isRetrying || retryCount >= maxRetries) return;\r\n        \r\n        isRetrying = true;\r\n        retryCount++;\r\n        \r\n        // Show shimmer during retry\r\n        shimmer.style.opacity = '1';\r\n        img.style.opacity = '0';\r\n        \r\n        if (onRetry) onRetry(retryCount);\r\n\r\n        retryTimeout = setTimeout(() => {\r\n            isRetrying = false;\r\n            \r\n            if (shouldUseBlurUp && src) {\r\n                if (lowQualitySrc || placeholder) {\r\n                    img.src = lowQualitySrc || placeholder;\r\n                }\r\n                loadHighQualityImage(src);\r\n            } else {\r\n                img.src = '';\r\n                img.src = src || placeholder || '';\r\n            }\r\n        }, retryDelay);\r\n    };\r\n\r\n    // Handle image error\r\n    const handleError = (error) => {\r\n        if (hasError) return;\r\n        \r\n        hasError = true;\r\n        \r\n        // Try fallback image first\r\n        if (fallback && img.src !== fallback) {\r\n            img.src = fallback;\r\n            hasError = false;\r\n            return;\r\n        }\r\n        \r\n        // Keep showing shimmer on error (no error UI)\r\n        shimmer.style.opacity = '1';\r\n        img.style.opacity = '0';\r\n        \r\n        // Auto-retry if enabled\r\n        if (enableRetry && retryCount < maxRetries) {\r\n            attemptRetry();\r\n        }\r\n        \r\n        if (onError) onError(error, retryCount);\r\n    };\r\n\r\n    // Set up image loading with blur-up effect\r\n    if (shouldUseBlurUp && src) {\r\n        // Low quality image is already loaded, now load high quality\r\n        loadHighQualityImage(src);\r\n    } else {\r\n        // Standard loading\r\n        img.addEventListener('load', handleLoad);\r\n        img.addEventListener('error', handleError);\r\n    }\r\n\r\n    // Click handler with hover effect\r\n    if (onClick) {\r\n        container.addEventListener('click', onClick);\r\n\r\n        container.addEventListener('mouseenter', () => {\r\n            container.style.transform = 'scale(1.02)';\r\n            if (elevation > 0) {\r\n                const newElevation = elevation + 4;\r\n                const shadowIntensity = Math.min(newElevation / 24, 1);\r\n                const blur = newElevation * 2;\r\n                const spread = newElevation * 0.5;\r\n                container.style.boxShadow = `0 ${newElevation}px ${blur}px rgba(0, 0, 0, ${0.1 + shadowIntensity * 0.2}), \r\n                                  0 ${spread}px ${spread * 2}px rgba(0, 0, 0, ${0.05 + shadowIntensity * 0.1})`;\r\n            }\r\n        });\r\n\r\n        container.addEventListener('mouseleave', () => {\r\n            container.style.transform = 'scale(1)';\r\n            if (elevation > 0) {\r\n                const shadowIntensity = Math.min(elevation / 24, 1);\r\n                const blur = elevation * 2;\r\n                const spread = elevation * 0.5;\r\n                container.style.boxShadow = `0 ${elevation}px ${blur}px rgba(0, 0, 0, ${0.1 + shadowIntensity * 0.2}), \r\n                                  0 ${spread}px ${spread * 2}px rgba(0, 0, 0, ${0.05 + shadowIntensity * 0.1})`;\r\n            }\r\n        });\r\n    }\r\n\r\n    return {\r\n        getElement: () => container,\r\n        getImage: () => img,\r\n        getShimmer: () => shimmer,\r\n        getSrc: () => img.src,\r\n        setSrc: (newSrc, newLowQualitySrc = null) => {\r\n            hasLoaded = false;\r\n            hasError = false;\r\n            retryCount = 0;\r\n            isRetrying = false;\r\n\r\n            // Clear any retry timeout\r\n            if (retryTimeout) {\r\n                clearTimeout(retryTimeout);\r\n                retryTimeout = null;\r\n            }\r\n\r\n            // Show shimmer and hide image\r\n            shimmer.style.opacity = '1';\r\n            img.style.opacity = '0';\r\n\r\n            // Use blur-up if available\r\n            if (enableBlurUp && newLowQualitySrc) {\r\n                isBlurred = true;\r\n                img.classList.add('material-image-loading');\r\n                const currentFilters = [];\r\n                if (blur > 0) currentFilters.push(`blur(${blur}px)`);\r\n                if (grayscale) currentFilters.push('grayscale(100%)');\r\n                currentFilters.push(`blur(${blurUpIntensity}px)`);\r\n                img.style.filter = currentFilters.join(' ');\r\n                img.style.transform = `${transforms.join(' ')} scale(1.05)`.trim();\r\n                img.src = newLowQualitySrc;\r\n                loadHighQualityImage(newSrc);\r\n            } else {\r\n                img.src = newSrc;\r\n            }\r\n        },\r\n        setAlt: (newAlt) => {\r\n            img.alt = newAlt;\r\n        },\r\n        setOpacity: (newOpacity) => {\r\n            img.style.opacity = newOpacity;\r\n        },\r\n        setBlur: (newBlur) => {\r\n            const filters = [];\r\n            if (newBlur > 0) filters.push(`blur(${newBlur}px)`);\r\n            if (grayscale) filters.push('grayscale(100%)');\r\n            img.style.filter = filters.join(' ');\r\n        },\r\n        setGrayscale: (enable) => {\r\n            const filters = [];\r\n            if (blur > 0) filters.push(`blur(${blur}px)`);\r\n            if (enable) filters.push('grayscale(100%)');\r\n            img.style.filter = filters.join(' ');\r\n        },\r\n        setRotation: (degrees) => {\r\n            const transforms = [];\r\n            transforms.push(`rotate(${degrees}deg)`);\r\n            if (flipX) transforms.push('scaleX(-1)');\r\n            if (flipY) transforms.push('scaleY(-1)');\r\n            img.style.transform = transforms.join(' ');\r\n        },\r\n        setOverlay: (show, newOpacity) => {\r\n            if (overlayEl) {\r\n                overlayEl.style.opacity = show ? (newOpacity || overlayOpacity) : '0';\r\n            }\r\n        },\r\n        setBorder: (width, color, style = 'solid') => {\r\n            container.style.border = width ? `${dp(width)} ${style} ${color}` : 'none';\r\n        },\r\n        setCornerRadius: (radius) => {\r\n            container.style.borderRadius = dp(radius);\r\n        },\r\n        setElevation: (newElevation) => {\r\n            if (newElevation > 0) {\r\n                const shadowIntensity = Math.min(newElevation / 24, 1);\r\n                const blur = newElevation * 2;\r\n                const spread = newElevation * 0.5;\r\n                container.style.boxShadow = `0 ${newElevation}px ${blur}px rgba(0, 0, 0, ${0.1 + shadowIntensity * 0.2}), \r\n                                  0 ${spread}px ${spread * 2}px rgba(0, 0, 0, ${0.05 + shadowIntensity * 0.1})`;\r\n            } else {\r\n                container.style.boxShadow = 'none';\r\n            }\r\n        },\r\n        setShimmerColors: (baseColor, highlightColor) => {\r\n            if (baseColor) {\r\n                shimmer.style.background = baseColor;\r\n            }\r\n            if (highlightColor) {\r\n                shimmerOverlay.style.background = `linear-gradient(90deg, \r\n                    transparent 0%, \r\n                    ${highlightColor} 50%, \r\n                    transparent 100%)`;\r\n            }\r\n        },\r\n        showShimmer: () => {\r\n            shimmer.style.opacity = '1';\r\n        },\r\n        hideShimmer: () => {\r\n            shimmer.style.opacity = '0';\r\n        },\r\n        reload: () => {\r\n            const currentSrc = img.src;\r\n            hasLoaded = false;\r\n            hasError = false;\r\n            retryCount = 0;\r\n            shimmer.style.opacity = '1';\r\n            img.style.opacity = '0';\r\n            img.src = '';\r\n            img.src = currentSrc;\r\n        },\r\n        retry: () => {\r\n            if (hasError && enableRetry && retryCount < maxRetries) {\r\n                attemptRetry();\r\n            }\r\n        },\r\n        hasLoaded: () => hasLoaded,\r\n        hasError: () => hasError,\r\n        getRetryCount: () => retryCount,\r\n        hide: () => {\r\n            container.style.display = 'none';\r\n        },\r\n        show: () => {\r\n            container.style.display = 'inline-block';\r\n        },\r\n        destroy: () => {\r\n            if (retryTimeout) {\r\n                clearTimeout(retryTimeout);\r\n            }\r\n            img.removeEventListener('load', handleLoad);\r\n            img.removeEventListener('error', handleError);\r\n        }\r\n    };\r\n};\r\n \r\n    \r\n// ==========================================\r\n    // MaterialInput — Self-injecting styles\r\n    // ==========================================\r\n    (() => {\r\n        if (document.getElementById('material-input-styles')) return; // already injected\r\n        const style = document.createElement('style');\r\n        style.id = 'material-input-styles';\r\n        style.textContent = `\r\n            /* --- Wrapper --- */\r\n            .material-input-wrapper {\r\n                position: relative;\r\n                overflow: visible;\r\n            }\r\n\r\n            /* --- Label default (sitting inside the field) --- */\r\n            .material-input-label {\r\n                position: absolute;\r\n                left: 12px;\r\n                top: 50%;\r\n                transform: translateY(-50%);\r\n                pointer-events: none;\r\n                transition: top 0.2s ease, font-size 0.2s ease, transform 0.2s ease, color 0.2s ease;\r\n\r\n                /* Prevent long hint text from overflowing into adjacent fields */\r\n                max-width: calc(100% - 24px);\r\n                white-space: nowrap;\r\n                overflow: hidden;\r\n                text-overflow: ellipsis;\r\n            }\r\n\r\n            /* --- Textarea label starts at the top, not vertically centred --- */\r\n            .material-input-wrapper:has(textarea) .material-input-label {\r\n                top: 16px;\r\n                transform: none;\r\n            }\r\n\r\n            /* --- Floated state — label rises above the border line --- */\r\n            .material-input-wrapper.material-input-floated .material-input-label {\r\n                top: 0;\r\n                transform: translateY(-50%);\r\n                font-size: 12px;\r\n\r\n                /* Sit on top of the border without the line cutting through the text */\r\n                background-color: var(--md-input-bg, #fff);\r\n                padding: 0 4px;\r\n\r\n                /* Still clip if the label is very long even when floated */\r\n                max-width: calc(100% - 16px);\r\n                white-space: nowrap;\r\n                overflow: hidden;\r\n                text-overflow: ellipsis;\r\n            }\r\n\r\n            /* --- Shift label right when a leading icon is present --- */\r\n            .material-input-has-leading .material-input-label {\r\n                left: 40px;\r\n                max-width: calc(100% - 52px);\r\n            }\r\n        `;\r\n        document.head.appendChild(style);\r\n    })();\r\n\r\n    // ==========================================\r\n    // MaterialInput\r\n    // ==========================================\r\n    const MaterialInput = (props = {}) => {\r\n        const {\r\n            id,\r\n            name = '',\r\n            label = 'Label',\r\n            type = 'text', // text, password, email, number, tel, url, textarea\r\n            value = '',\r\n            placeholder = '',\r\n            helperText = '',\r\n            errorText = '',\r\n            maxLength = null,\r\n            showCounter = false,\r\n            required = false,\r\n            disabled = false,\r\n            leadingIcon = null,\r\n            trailingIcon = null,\r\n            passwordToggle = true,\r\n            color = null,\r\n            autocomplete = 'off',\r\n            pattern = null,\r\n            inputMode = null,\r\n            rows = 3,\r\n            onInput = null,\r\n            onChange = null,\r\n            onFocus = null,\r\n            onBlur = null,\r\n            margin,\r\n            weight,\r\n            alignSelf,\r\n            width,\r\n            className\r\n        } = props;\r\n\r\n        const inputId = id || generateId('material-input');\r\n        let isPasswordVisible = false;\r\n\r\n        // Container\r\n        const container = document.createElement('div');\r\n        const containerClasses = ['material-input-container'];\r\n        if (required) containerClasses.push('material-input-required');\r\n        if (className) containerClasses.push(className);\r\n        container.className = containerClasses.join(' ');\r\n\r\n        // Apply container styles\r\n        const containerStyles = {};\r\n        if (margin) containerStyles.margin = dp(margin);\r\n        if (weight) containerStyles.flex = weight;\r\n        if (alignSelf) containerStyles.alignSelf = alignSelf;\r\n        if (width === 'match_parent') containerStyles.width = '100%';\r\n        else if (width) containerStyles.width = dp(width);\r\n        applyStyles(container, containerStyles);\r\n\r\n        // Wrapper\r\n        const wrapper = document.createElement('div');\r\n        wrapper.className = 'material-input-wrapper';\r\n\r\n        if (disabled) {\r\n            wrapper.classList.add('material-input-disabled');\r\n        }\r\n\r\n        // Custom color\r\n        if (color) {\r\n            wrapper.dataset.color = color;\r\n            wrapper.style.setProperty('--md-custom-input-color', color);\r\n            wrapper.style.setProperty('--md-custom-input-color-light', hexToRgba(color, 0.15));\r\n        }\r\n\r\n        // Leading Icon\r\n        let leadingIconEl;\r\n        if (leadingIcon) {\r\n            wrapper.classList.add('material-input-has-leading');\r\n            leadingIconEl = document.createElement('span');\r\n            leadingIconEl.className = 'material-input-leading-icon';\r\n            leadingIconEl.innerHTML = `<i class=\"${leadingIcon}\"></i>`;\r\n            wrapper.appendChild(leadingIconEl);\r\n        }\r\n\r\n        // Input Field\r\n        const isTextarea = type === 'textarea';\r\n        const input = document.createElement(isTextarea ? 'textarea' : 'input');\r\n        input.className = 'material-input-field';\r\n        input.id = inputId;\r\n        if (name) input.name = name;\r\n\r\n        if (!isTextarea) {\r\n            input.type = type === 'password' ? 'password' : type;\r\n        } else {\r\n            input.rows = rows;\r\n        }\r\n\r\n        input.value = value;\r\n        input.placeholder = placeholder || label;\r\n        input.disabled = disabled;\r\n        input.autocomplete = autocomplete;\r\n        if (maxLength) input.maxLength = maxLength;\r\n        if (pattern) input.pattern = pattern;\r\n        if (inputMode) input.inputMode = inputMode;\r\n        if (required) input.required = true;\r\n\r\n        wrapper.appendChild(input);\r\n\r\n        // Floating Label\r\n        const labelEl = document.createElement('label');\r\n        labelEl.className = 'material-input-label';\r\n        labelEl.setAttribute('for', inputId);\r\n        labelEl.textContent = label;\r\n        wrapper.appendChild(labelEl);\r\n\r\n        // Trailing Icon / Password Toggle\r\n        let trailingIconEl;\r\n        const needsTrailing = trailingIcon || (type === 'password' && passwordToggle);\r\n        if (needsTrailing) {\r\n            wrapper.classList.add('material-input-has-trailing');\r\n            trailingIconEl = document.createElement('span');\r\n            trailingIconEl.className = 'material-input-trailing-icon';\r\n\r\n            if (type === 'password' && passwordToggle) {\r\n                trailingIconEl.innerHTML = `<i class=\"bx bx-hide\"></i>`;\r\n                trailingIconEl.setAttribute('role', 'button');\r\n                trailingIconEl.setAttribute('aria-label', 'Toggle password visibility');\r\n            } else if (trailingIcon) {\r\n                trailingIconEl.innerHTML = `<i class=\"${trailingIcon}\"></i>`;\r\n            }\r\n\r\n            wrapper.appendChild(trailingIconEl);\r\n        }\r\n\r\n        container.appendChild(wrapper);\r\n\r\n        // Helper Text Row\r\n        let helperRow, helperTextEl, counterEl;\r\n        if (helperText || errorText || showCounter) {\r\n            helperRow = document.createElement('div');\r\n            helperRow.className = 'material-input-helper';\r\n\r\n            helperTextEl = document.createElement('span');\r\n            helperTextEl.className = 'material-input-helper-text';\r\n            helperTextEl.textContent = errorText || helperText;\r\n            helperRow.appendChild(helperTextEl);\r\n\r\n            if (showCounter && maxLength) {\r\n                counterEl = document.createElement('span');\r\n                counterEl.className = 'material-input-counter';\r\n                counterEl.textContent = `${value.length}/${maxLength}`;\r\n                helperRow.appendChild(counterEl);\r\n            }\r\n\r\n            container.appendChild(helperRow);\r\n        }\r\n\r\n        // Initial float state — textarea always floated so label never sits inside the text area\r\n        if (value || isTextarea) {\r\n            wrapper.classList.add('material-input-floated');\r\n        }\r\n\r\n        // Update counter helper\r\n        const updateCounter = () => {\r\n            if (counterEl && maxLength) {\r\n                counterEl.textContent = `${input.value.length}/${maxLength}`;\r\n            }\r\n        };\r\n\r\n        // Toggle password visibility\r\n        const togglePassword = () => {\r\n            isPasswordVisible = !isPasswordVisible;\r\n            input.type = isPasswordVisible ? 'text' : 'password';\r\n            const icon = trailingIconEl.querySelector('i');\r\n            icon.className = isPasswordVisible ? 'bx bx-show' : 'bx bx-hide';\r\n        };\r\n\r\n        // Event Listeners\r\n        input.addEventListener('focus', () => {\r\n            wrapper.classList.add('material-input-focused', 'material-input-floated');\r\n            if (onFocus) onFocus(input.value);\r\n        });\r\n\r\n        input.addEventListener('blur', () => {\r\n            wrapper.classList.remove('material-input-focused');\r\n            // Textarea label must NEVER go back inside — only unfloat regular inputs when empty\r\n            if (!input.value && !isTextarea) {\r\n                wrapper.classList.remove('material-input-floated');\r\n            }\r\n            if (onBlur) onBlur(input.value);\r\n        });\r\n\r\n        input.addEventListener('input', () => {\r\n            updateCounter();\r\n            if (onInput) onInput(input.value);\r\n        });\r\n\r\n        input.addEventListener('change', () => {\r\n            if (onChange) onChange(input.value);\r\n        });\r\n\r\n        wrapper.addEventListener('click', (e) => {\r\n            if (!disabled && e.target !== input) {\r\n                input.focus();\r\n            }\r\n        });\r\n\r\n        if (trailingIconEl && type === 'password' && passwordToggle) {\r\n            trailingIconEl.addEventListener('click', (e) => {\r\n                e.stopPropagation();\r\n                togglePassword();\r\n            });\r\n        }\r\n\r\n        return {\r\n            getElement: () => container,\r\n            getInput: () => input,\r\n            getValue: () => input.value,\r\n            setValue: (newValue) => {\r\n                input.value = newValue;\r\n                if (newValue || isTextarea) {\r\n                    wrapper.classList.add('material-input-floated');\r\n                } else {\r\n                    wrapper.classList.remove('material-input-floated');\r\n                }\r\n                updateCounter();\r\n            },\r\n            setError: (message) => {\r\n                wrapper.classList.remove('material-input-success');\r\n                wrapper.classList.add('material-input-error');\r\n                if (helperTextEl) {\r\n                    helperTextEl.textContent = message || errorText || 'Error';\r\n                }\r\n            },\r\n            setSuccess: (message) => {\r\n                wrapper.classList.remove('material-input-error');\r\n                wrapper.classList.add('material-input-success');\r\n                if (helperTextEl) {\r\n                    helperTextEl.textContent = message || 'Success';\r\n                }\r\n            },\r\n            clearState: () => {\r\n                wrapper.classList.remove('material-input-error', 'material-input-success');\r\n                if (helperTextEl) {\r\n                    helperTextEl.textContent = helperText || '';\r\n                }\r\n            },\r\n            setDisabled: (newDisabled) => {\r\n                input.disabled = newDisabled;\r\n                wrapper.classList.toggle('material-input-disabled', newDisabled);\r\n            },\r\n            focus: () => input.focus(),\r\n            blur: () => input.blur(),\r\n            reset: () => {\r\n                input.value = '';\r\n                const classesToRemove = ['material-input-error', 'material-input-success'];\r\n                // Only unfloat regular inputs on reset, textarea label stays at top\r\n                if (!isTextarea) classesToRemove.push('material-input-floated');\r\n                wrapper.classList.remove(...classesToRemove);\r\n                if (helperTextEl) {\r\n                    helperTextEl.textContent = helperText || '';\r\n                }\r\n                updateCounter();\r\n            },\r\n            validate: () => {\r\n                const valid = input.checkValidity();\r\n                if (!valid) {\r\n                    wrapper.classList.add('material-input-error');\r\n                    if (helperTextEl) {\r\n                        helperTextEl.textContent = input.validationMessage;\r\n                    }\r\n                } else {\r\n                    wrapper.classList.remove('material-input-error');\r\n                }\r\n                return valid;\r\n            }\r\n        };\r\n    };\r\n\r\n/* ==============================================\r\n   REQUIRED CSS additions / adjustments\r\n   Add these rules to your stylesheet alongside\r\n   your existing .material-input-* rules.\r\n   ================================================\r\n\r\n   FIX 1 — Long label clipping (belt-and-suspenders with the JS above)\r\n   The JS already sets overflow/ellipsis inline, but this also prevents\r\n   the label from painting outside the wrapper's stacking context:\r\n\r\n   .material-input-wrapper {\r\n       overflow: hidden;   ← ADD this if it isn't already there\r\n   }\r\n\r\n   If overflow:hidden breaks your focus ring or box-shadow, use:\r\n   .material-input-wrapper {\r\n       clip-path: inset(0 0 -8px 0);  ← lets bottom shadow/ring show\r\n   }\r\n\r\n   ------------------------------------------------\r\n   FIX 2 — Textarea label always sits at the top\r\n\r\n   Your current CSS likely positions the label with something like:\r\n       top: 50%;\r\n       transform: translateY(-50%);   ← vertically centres in a 1-line input\r\n\r\n   For textareas that doesn't work because the field is tall.\r\n   Add this override so the textarea label starts at the top edge:\r\n\r\n   .material-input-wrapper.material-input-textarea .material-input-label {\r\n       top: 14px;          ← match your normal input's top padding\r\n       transform: none;    ← no vertical centering needed\r\n   }\r\n\r\n   The floated state (label moves above the field) should remain unchanged\r\n   because the JS now keeps material-input-floated on the textarea at all\r\n   times — the label simply stays in its floated/top position permanently.\r\n   ============================================== */\r\n\r\n\r\n\r\n\r\n\r\n\r\n    // Add to the injectStyles section (after the material-input styles):\r\n\r\n    injectStyles('material-spinner', `\r\n  /* Material Spinner/Dropdown Styles */\r\n  .material-spinner-container {\r\n    position: relative;\r\n    width: 100%;\r\n    font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;\r\n  }\r\n\r\n  .material-spinner-field {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    min-height: 56px;\r\n    padding: 8px 12px 8px 16px;\r\n    border: 1px solid var(--md-outline);\r\n    border-radius: 4px;\r\n    background: var(--md-surface);\r\n    \r\n    transition: all 0.2s ease;\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: transparent;\r\n  }\r\n\r\n  .material-spinner-field:hover:not(.material-spinner-disabled) {\r\n    border-color: var(--md-on-surface);\r\n    background: var(--md-surface-container-highest);\r\n  }\r\n\r\n  .material-spinner-field.material-spinner-focused {\r\n    border-color: var(--md-primary);\r\n    border-width: 2px;\r\n    padding: 7px 11px 7px 15px;\r\n    box-shadow: 0 0 0 3px var(--md-ripple);\r\n  }\r\n\r\n  .material-spinner-field.material-spinner-error {\r\n    border-color: var(--md-error);\r\n  }\r\n\r\n  .material-spinner-field.material-spinner-disabled {\r\n    background: var(--md-disabled-bg);\r\n    cursor: not-allowed;\r\n    opacity: 0.7;\r\n  }\r\n\r\n  .material-spinner-content {\r\n    flex: 1;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    min-width: 0;\r\n  }\r\n\r\n  .material-spinner-icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 20px;\r\n    color: var(--md-on-surface-variant);\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .material-spinner-focused .material-spinner-icon {\r\n    color: var(--md-primary);\r\n  }\r\n\r\n  .material-spinner-text-wrapper {\r\n    flex: 1;\r\n    min-width: 0;\r\n  }\r\n\r\n  .material-spinner-label {\r\n    position: absolute;\r\n    left: 16px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    font-size: 16px;\r\n    color: var(--md-on-surface-variant);\r\n    pointer-events: none;\r\n    transition: all 0.2s ease;\r\n    background: transparent;\r\n    padding: 0;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .material-spinner-has-icon .material-spinner-label {\r\n    left: 52px;\r\n  }\r\n\r\n  .material-spinner-floated .material-spinner-label {\r\n    top: 0;\r\n    transform: translateY(-50%);\r\n    font-size: 12px;\r\n    background: var(--md-surface);\r\n    padding: 0 4px;\r\n    left: 12px;\r\n    color: var(--md-primary);\r\n  }\r\n\r\n  .material-spinner-has-icon.material-spinner-floated .material-spinner-label {\r\n    left: 12px;\r\n  }\r\n\r\n  .material-spinner-error .material-spinner-label {\r\n    color: var(--md-error);\r\n  }\r\n\r\n  .material-spinner-disabled .material-spinner-label {\r\n    color: var(--md-disabled-text);\r\n    background: var(--md-disabled-bg);\r\n  }\r\n\r\n  .material-spinner-selected-text {\r\n    font-size: 16px;\r\n    color: var(--md-on-surface);\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .material-spinner-placeholder {\r\n    font-size: 16px;\r\n    color: var(--md-on-surface-variant);\r\n    opacity: 0;\r\n  }\r\n\r\n  .material-spinner-floated .material-spinner-placeholder {\r\n    opacity: 1;\r\n  }\r\n\r\n  .material-spinner-arrow {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 24px;\r\n    height: 24px;\r\n    color: var(--md-on-surface-variant);\r\n    transition: transform 0.2s ease;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .material-spinner-arrow i {\r\n    font-size: 24px;\r\n  }\r\n\r\n  .material-spinner-focused .material-spinner-arrow {\r\n    color: var(--md-primary);\r\n    transform: rotate(180deg);\r\n  }\r\n\r\n  .material-spinner-error .material-spinner-arrow {\r\n    color: var(--md-error);\r\n  }\r\n\r\n  .material-spinner-dropdown {\r\n    position: absolute;\r\n    top: calc(100% + 4px);\r\n    left: 0;\r\n    right: 0;\r\n    max-height: 280px;\r\n    background: var(--md-surface-container);\r\n    border-radius: 4px;\r\n    box-shadow: 0 4px 12px var(--md-shadow), 0 0 1px var(--md-outline);\r\n    overflow: hidden;\r\n    z-index: 1000;\r\n    opacity: 0;\r\n    transform: translateY(-8px);\r\n    pointer-events: none;\r\n    transition: opacity 0.2s ease, transform 0.2s ease;\r\n  }\r\n\r\n  .material-spinner-dropdown.material-spinner-open {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n    pointer-events: auto;\r\n  }\r\n\r\n  .material-spinner-search-wrapper {\r\n    padding: 8px;\r\n    border-bottom: 1px solid var(--md-outline-variant);\r\n    background: var(--md-surface);\r\n  }\r\n\r\n  .material-spinner-search {\r\n    width: 100%;\r\n    padding: 10px 12px;\r\n    border: 1px solid var(--md-outline);\r\n    border-radius: 4px;\r\n    background: var(--md-surface);\r\n    color: var(--md-on-surface);\r\n    font-size: 14px;\r\n    font-family: inherit;\r\n    outline: none;\r\n    transition: border-color 0.2s;\r\n  }\r\n\r\n  .material-spinner-search:focus {\r\n    border-color: var(--md-primary);\r\n  }\r\n\r\n  .material-spinner-search::placeholder {\r\n    color: var(--md-on-surface-variant);\r\n  }\r\n\r\n  .material-spinner-options {\r\n    max-height: 224px;\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\r\n  }\r\n\r\n  .material-spinner-option {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    padding: 12px 16px;\r\n    \r\n    transition: background 0.15s ease;\r\n    color: var(--md-on-surface);\r\n    font-size: 14px;\r\n    user-select: none;\r\n    -webkit-tap-highlight-color: transparent;\r\n  }\r\n\r\n  .material-spinner-option:hover {\r\n    background: var(--md-surface-container-highest);\r\n  }\r\n\r\n  .material-spinner-option.material-spinner-selected {\r\n    background: var(--md-primary-container);\r\n    color: var(--md-on-primary-container);\r\n  }\r\n\r\n  .material-spinner-option.material-spinner-disabled {\r\n    opacity: 0.5;\r\n    cursor: not-allowed;\r\n    pointer-events: none;\r\n  }\r\n\r\n  .material-spinner-option-icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 20px;\r\n    flex-shrink: 0;\r\n    color: var(--md-on-surface-variant);\r\n  }\r\n\r\n  .material-spinner-selected .material-spinner-option-icon {\r\n    color: var(--md-on-primary-container);\r\n  }\r\n\r\n  .material-spinner-option-text {\r\n    flex: 1;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .material-spinner-option-check {\r\n    display: none;\r\n    font-size: 18px;\r\n    color: var(--md-primary);\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .material-spinner-selected .material-spinner-option-check {\r\n    display: flex;\r\n  }\r\n\r\n  .material-spinner-empty {\r\n    padding: 24px 16px;\r\n    text-align: center;\r\n    color: var(--md-on-surface-variant);\r\n    font-size: 14px;\r\n  }\r\n\r\n  .material-spinner-loading {\r\n    padding: 16px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    color: var(--md-on-surface-variant);\r\n    font-size: 14px;\r\n  }\r\n\r\n  .material-spinner-loading-spinner {\r\n    width: 20px;\r\n    height: 20px;\r\n    border: 2px solid var(--md-outline);\r\n    border-top-color: var(--md-primary);\r\n    border-radius: 50%;\r\n    animation: material-spin 0.8s linear infinite;\r\n  }\r\n\r\n  .material-spinner-helper {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    padding: 6px 16px 0;\r\n    font-size: 12px;\r\n    color: var(--md-on-surface-variant);\r\n  }\r\n\r\n  .material-spinner-helper-text {\r\n    flex: 1;\r\n  }\r\n\r\n  .material-spinner-error .material-spinner-helper-text {\r\n    color: var(--md-error);\r\n  }\r\n\r\n  .material-spinner-required .material-spinner-label::after {\r\n    content: ' *';\r\n    color: var(--md-error);\r\n  }\r\n\r\n  /* Custom scrollbar for dropdown */\r\n  .material-spinner-options::-webkit-scrollbar {\r\n    width: 8px;\r\n  }\r\n\r\n  .material-spinner-options::-webkit-scrollbar-track {\r\n    background: var(--md-surface-variant);\r\n  }\r\n\r\n  .material-spinner-options::-webkit-scrollbar-thumb {\r\n    background: var(--md-outline);\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .material-spinner-options::-webkit-scrollbar-thumb:hover {\r\n    background: var(--md-on-surface-variant);\r\n  }\r\n\r\n  /* Custom color support */\r\n  .material-spinner-field[data-color].material-spinner-focused {\r\n    border-color: var(--md-custom-spinner-color);\r\n    box-shadow: 0 0 0 3px var(--md-custom-spinner-color-light);\r\n  }\r\n\r\n  .material-spinner-field[data-color] .material-spinner-floated .material-spinner-label {\r\n    color: var(--md-custom-spinner-color);\r\n  }\r\n\r\n  .material-spinner-field[data-color] .material-spinner-focused .material-spinner-arrow,\r\n  .material-spinner-field[data-color] .material-spinner-focused .material-spinner-icon {\r\n    color: var(--md-custom-spinner-color);\r\n  }\r\n`);\r\n\r\n// ==========================================\r\n// MaterialSpinner\r\n// ==========================================\r\n\r\nconst MaterialSpinner = (props = {}) => {\r\n    const {\r\n        id,\r\n        name = '',\r\n        label = 'Select',\r\n        options = [],\r\n        value = null,\r\n        placeholder = '',\r\n        helperText = '',\r\n        errorText = '',\r\n        required = false,\r\n        disabled = false,\r\n        searchable = false,\r\n        searchPlaceholder = 'Search...',\r\n        leadingIcon = null,\r\n        color = null,\r\n        emptyText = 'No options available',\r\n        loadingText = 'Loading...',\r\n        showCheckmark = true,\r\n        lazyLoad = false,\r\n        onLoadMore = null,\r\n        onSearch = null,\r\n        onChange = null,\r\n        onOpen = null,\r\n        onClose = null,\r\n        margin,\r\n        weight,\r\n        alignSelf,\r\n        width,\r\n        className\r\n    } = props;\r\n\r\n    const spinnerId = id || generateId('material-spinner');\r\n    let isOpen = false;\r\n    let selectedValue = value;\r\n    let filteredOptions = [...options];\r\n    let isLoading = false;\r\n    let searchTimeout = null;\r\n\r\n    // Container\r\n    const container = document.createElement('div');\r\n    const containerClasses = ['material-spinner-container'];\r\n    if (required) containerClasses.push('material-spinner-required');\r\n    if (className) containerClasses.push(className);\r\n    container.className = containerClasses.join(' ');\r\n\r\n    // Apply container styles\r\n    const containerStyles = {};\r\n    if (margin) containerStyles.margin = dp(margin);\r\n    if (weight) containerStyles.flex = weight;\r\n    if (alignSelf) containerStyles.alignSelf = alignSelf;\r\n    if (width === 'match_parent') containerStyles.width = '100%';\r\n    else if (width) containerStyles.width = dp(width);\r\n    applyStyles(container, containerStyles);\r\n\r\n    // Hidden native select for form compatibility\r\n    const hiddenSelect = document.createElement('select');\r\n    hiddenSelect.style.display = 'none';\r\n    hiddenSelect.id = spinnerId;\r\n    if (name) hiddenSelect.name = name;\r\n    if (required) hiddenSelect.required = true;\r\n    if (disabled) hiddenSelect.disabled = true;\r\n    container.appendChild(hiddenSelect);\r\n\r\n    // Spinner Field\r\n    const field = document.createElement('div');\r\n    const fieldClasses = ['material-spinner-field'];\r\n    if (disabled) fieldClasses.push('material-spinner-disabled');\r\n    if (leadingIcon) fieldClasses.push('material-spinner-has-icon');\r\n    field.className = fieldClasses.join(' ');\r\n\r\n    // Custom color\r\n    if (color) {\r\n        field.dataset.color = color;\r\n        field.style.setProperty('--md-custom-spinner-color', color);\r\n        field.style.setProperty('--md-custom-spinner-color-light', hexToRgba(color, 0.15));\r\n    }\r\n\r\n    // Content wrapper\r\n    const content = document.createElement('div');\r\n    content.className = 'material-spinner-content';\r\n\r\n    // Leading Icon\r\n    let leadingIconEl;\r\n    if (leadingIcon) {\r\n        leadingIconEl = document.createElement('span');\r\n        leadingIconEl.className = 'material-spinner-icon';\r\n        leadingIconEl.innerHTML = `<i class=\"${leadingIcon}\"></i>`;\r\n        content.appendChild(leadingIconEl);\r\n    }\r\n\r\n    // Text wrapper\r\n    const textWrapper = document.createElement('div');\r\n    textWrapper.className = 'material-spinner-text-wrapper';\r\n\r\n    const selectedText = document.createElement('div');\r\n    selectedText.className = 'material-spinner-selected-text';\r\n\r\n    const placeholderText = document.createElement('div');\r\n    placeholderText.className = 'material-spinner-placeholder';\r\n    placeholderText.textContent = placeholder || label;\r\n\r\n    textWrapper.appendChild(selectedText);\r\n    textWrapper.appendChild(placeholderText);\r\n    content.appendChild(textWrapper);\r\n\r\n    field.appendChild(content);\r\n\r\n    // Label\r\n    const labelEl = document.createElement('label');\r\n    labelEl.className = 'material-spinner-label';\r\n    labelEl.textContent = label;\r\n    field.appendChild(labelEl);\r\n\r\n    // Arrow\r\n    const arrow = document.createElement('div');\r\n    arrow.className = 'material-spinner-arrow';\r\n    arrow.innerHTML = '<i class=\"bx bx-chevron-down\"></i>';\r\n    field.appendChild(arrow);\r\n\r\n    container.appendChild(field);\r\n\r\n    // Dropdown - NOW WITH PROPER Z-INDEX AND POSITIONING\r\n    const dropdown = document.createElement('div');\r\n    dropdown.style.background = 'white';\r\n    dropdown.className = 'material-spinner-dropdown';\r\n    dropdown.style.position = 'fixed'; // Changed from absolute to fixed for better positioning\r\n    dropdown.style.zIndex = '999999'; // High z-index to appear above other elements\r\n\r\n    // Search input\r\n    let searchInput;\r\n    if (searchable) {\r\n        const searchWrapper = document.createElement('div');\r\n        searchWrapper.className = 'material-spinner-search-wrapper';\r\n\r\n        searchInput = document.createElement('input');\r\n        searchInput.type = 'text';\r\n        searchInput.className = 'material-spinner-search';\r\n        searchInput.placeholder = searchPlaceholder;\r\n\r\n        searchWrapper.appendChild(searchInput);\r\n        dropdown.appendChild(searchWrapper);\r\n    }\r\n\r\n    // Options container\r\n    const optionsContainer = document.createElement('div');\r\n    optionsContainer.className = 'material-spinner-options';\r\n    dropdown.appendChild(optionsContainer);\r\n\r\n    // Attach dropdown to document.body instead of container.\r\n    // This escapes any ancestor CSS transform (e.g. TabLayout's translateX on the\r\n    // pages track), which would otherwise break position:fixed coordinate space.\r\n    document.body.appendChild(dropdown);\r\n\r\n    // Helper text\r\n    let helperRow, helperTextEl;\r\n    if (helperText || errorText) {\r\n        helperRow = document.createElement('div');\r\n        helperRow.className = 'material-spinner-helper';\r\n\r\n        helperTextEl = document.createElement('span');\r\n        helperTextEl.className = 'material-spinner-helper-text';\r\n        helperTextEl.textContent = errorText || helperText;\r\n        helperRow.appendChild(helperTextEl);\r\n\r\n        container.appendChild(helperRow);\r\n    }\r\n\r\n    // SMART POSITIONING FUNCTION\r\n    const positionDropdown = () => {\r\n        const fieldRect = field.getBoundingClientRect();\r\n        const dropdownHeight = dropdown.offsetHeight || 300; // Default max height\r\n        const viewportHeight = window.innerHeight;\r\n        const viewportWidth = window.innerWidth;\r\n        const scrollY = window.scrollY;\r\n        const scrollX = window.scrollX;\r\n\r\n        // Calculate available space above and below\r\n        const spaceBelow = viewportHeight - fieldRect.bottom;\r\n        const spaceAbove = fieldRect.top;\r\n\r\n        // Determine if dropdown should open upward or downward\r\n        const shouldOpenUpward = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;\r\n\r\n        // Position dropdown\r\n        let top, left;\r\n\r\n        if (shouldOpenUpward) {\r\n            // Open upward\r\n            top = fieldRect.top - dropdownHeight;\r\n            dropdown.classList.add('material-spinner-dropdown-upward');\r\n            dropdown.classList.remove('material-spinner-dropdown-downward');\r\n        } else {\r\n            // Open downward (default)\r\n            top = fieldRect.bottom;\r\n            dropdown.classList.add('material-spinner-dropdown-downward');\r\n            dropdown.classList.remove('material-spinner-dropdown-upward');\r\n        }\r\n\r\n        // Horizontal positioning\r\n        left = fieldRect.left;\r\n        const dropdownWidth = fieldRect.width;\r\n\r\n        // Ensure dropdown stays within viewport horizontally\r\n        if (left + dropdownWidth > viewportWidth) {\r\n            left = viewportWidth - dropdownWidth - 16; // 16px padding from edge\r\n        }\r\n        if (left < 16) {\r\n            left = 16;\r\n        }\r\n\r\n        // Ensure dropdown stays within viewport vertically\r\n        if (top < 16) {\r\n            top = 16;\r\n        }\r\n        if (top + dropdownHeight > viewportHeight) {\r\n            top = viewportHeight - dropdownHeight - 16;\r\n        }\r\n\r\n        // Apply positioning\r\n        dropdown.style.top = `${top}px`;\r\n        dropdown.style.left = `${left}px`;\r\n        dropdown.style.width = `${dropdownWidth}px`;\r\n        dropdown.style.maxHeight = `${Math.min(dropdownHeight, viewportHeight - top - 16)}px`;\r\n    };\r\n\r\n    // THEME DETECTION AND APPLICATION\r\n    const applyTheme = () => {\r\n        const isDark = document.documentElement.classList.contains('dark') ||\r\n            window.matchMedia('(prefers-color-scheme: dark)').matches;\r\n\r\n        if (isDark) {\r\n            container.classList.add('material-spinner-dark-theme');\r\n            container.classList.remove('material-spinner-light-theme');\r\n        } else {\r\n            container.classList.add('material-spinner-light-theme');\r\n            container.classList.remove('material-spinner-dark-theme');\r\n        }\r\n    };\r\n\r\n    // Watch for theme changes\r\n    const themeObserver = new MutationObserver(() => applyTheme());\r\n    themeObserver.observe(document.documentElement, {\r\n        attributes: true,\r\n        attributeFilter: ['class']\r\n    });\r\n\r\n    // Watch for system theme changes\r\n    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\r\n    darkModeMediaQuery.addEventListener('change', applyTheme);\r\n\r\n    // Helper functions\r\n    const getSelectedOption = () => {\r\n        return options.find(opt => opt.value === selectedValue);\r\n    };\r\n\r\n    const updateSelectedDisplay = () => {\r\n        const selected = getSelectedOption();\r\n\r\n        if (selected) {\r\n            field.classList.add('material-spinner-floated');\r\n            if (color) labelEl.style.color = color;\r\n\r\n            if (leadingIconEl && selected.icon) {\r\n                leadingIconEl.innerHTML = `<i class=\"${selected.icon}\"></i>`;\r\n            }\r\n\r\n            selectedText.textContent = selected.label;\r\n            selectedText.style.display = 'block';\r\n            placeholderText.style.display = 'none';\r\n\r\n            hiddenSelect.value = selected.value;\r\n        } else {\r\n            field.classList.remove('material-spinner-floated');\r\n            if (color) labelEl.style.color = '';\r\n\r\n            if (leadingIconEl && leadingIcon) {\r\n                leadingIconEl.innerHTML = `<i class=\"${leadingIcon}\"></i>`;\r\n            }\r\n\r\n            selectedText.style.display = 'none';\r\n            placeholderText.style.display = 'block';\r\n\r\n            hiddenSelect.value = '';\r\n        }\r\n    };\r\n\r\n    const renderOptions = (opts = filteredOptions) => {\r\n        optionsContainer.innerHTML = '';\r\n\r\n        if (isLoading) {\r\n            const loadingEl = document.createElement('div');\r\n            loadingEl.className = 'material-spinner-loading';\r\n            loadingEl.innerHTML = `\r\n    <div class=\"material-spinner-loading-spinner\"></div>\r\n    <span>${loadingText}</span>\r\n  `;\r\n            optionsContainer.appendChild(loadingEl);\r\n            return;\r\n        }\r\n\r\n        if (opts.length === 0) {\r\n            const emptyEl = document.createElement('div');\r\n            emptyEl.className = 'material-spinner-empty';\r\n            emptyEl.textContent = emptyText;\r\n            optionsContainer.appendChild(emptyEl);\r\n            return;\r\n        }\r\n\r\n        opts.forEach(option => {\r\n            const optionEl = document.createElement('div');\r\n            const optionClasses = ['material-spinner-option'];\r\n            if (option.value === selectedValue) optionClasses.push('material-spinner-selected');\r\n            if (option.disabled) optionClasses.push('material-spinner-disabled');\r\n            optionEl.className = optionClasses.join(' ');\r\n            optionEl.dataset.value = option.value;\r\n\r\n            if (option.icon) {\r\n                const iconEl = document.createElement('span');\r\n                iconEl.className = 'material-spinner-option-icon';\r\n                iconEl.innerHTML = `<i class=\"${option.icon}\"></i>`;\r\n                optionEl.appendChild(iconEl);\r\n            }\r\n\r\n            const textEl = document.createElement('span');\r\n            textEl.className = 'material-spinner-option-text';\r\n            textEl.textContent = option.label;\r\n            optionEl.appendChild(textEl);\r\n\r\n            if (showCheckmark) {\r\n                const checkEl = document.createElement('span');\r\n                checkEl.className = 'material-spinner-option-check';\r\n                checkEl.innerHTML = '<i class=\"bx bx-check\"></i>';\r\n                optionEl.appendChild(checkEl);\r\n            }\r\n\r\n            if (!option.disabled) {\r\n                optionEl.addEventListener('click', () => selectOption(option.value));\r\n            }\r\n\r\n            optionsContainer.appendChild(optionEl);\r\n        });\r\n\r\n        if (lazyLoad && onLoadMore) {\r\n            optionsContainer.addEventListener('scroll', handleScroll);\r\n        }\r\n    };\r\n\r\n    const handleScroll = () => {\r\n        if (isLoading) return;\r\n\r\n        const {\r\n            scrollTop,\r\n            scrollHeight,\r\n            clientHeight\r\n        } = optionsContainer;\r\n        if (scrollTop + clientHeight >= scrollHeight - 50) {\r\n            if (onLoadMore) {\r\n                setLoading(true);\r\n                onLoadMore(() => setLoading(false));\r\n            }\r\n        }\r\n    };\r\n\r\n    const selectOption = (val) => {\r\n        selectedValue = val;\r\n        updateSelectedDisplay();\r\n        closeDropdown();\r\n\r\n        if (onChange) {\r\n            const selected = getSelectedOption();\r\n            onChange(val, selected);\r\n        }\r\n    };\r\n\r\n    const openDropdown = () => {\r\n        if (disabled || isOpen) return;\r\n\r\n        isOpen = true;\r\n        field.classList.add('material-spinner-focused');\r\n        dropdown.classList.add('material-spinner-open');\r\n        if (color) labelEl.style.color = color;\r\n\r\n        // Position dropdown after it's visible\r\n        setTimeout(() => {\r\n            positionDropdown();\r\n        }, 10);\r\n\r\n        if (searchable && searchInput) {\r\n            setTimeout(() => searchInput.focus(), 100);\r\n        }\r\n\r\n        if (onOpen) onOpen();\r\n    };\r\n\r\n    const closeDropdown = () => {\r\n        if (!isOpen) return;\r\n\r\n        isOpen = false;\r\n        field.classList.remove('material-spinner-focused');\r\n        dropdown.classList.remove('material-spinner-open');\r\n        // Keep custom color when a value is selected (floated label), reset otherwise\r\n        if (color) labelEl.style.color = selectedValue ? color : '';\r\n\r\n        if (searchable && searchInput) {\r\n            searchInput.value = '';\r\n            filteredOptions = [...options];\r\n            renderOptions();\r\n        }\r\n\r\n        if (onClose) onClose();\r\n    };\r\n\r\n    const toggleDropdown = () => {\r\n        if (isOpen) closeDropdown();\r\n        else openDropdown();\r\n    };\r\n\r\n    const setLoading = (loading) => {\r\n        isLoading = loading;\r\n        renderOptions();\r\n    };\r\n\r\n    const handleSearch = (query) => {\r\n        if (onSearch) {\r\n            clearTimeout(searchTimeout);\r\n            searchTimeout = setTimeout(() => {\r\n                setLoading(true);\r\n                onSearch(query, (results) => {\r\n                    filteredOptions = results;\r\n                    setLoading(false);\r\n                    renderOptions(results);\r\n                });\r\n            }, 300);\r\n        } else {\r\n            const lowerQuery = query.toLowerCase();\r\n            filteredOptions = options.filter(opt =>\r\n                opt.label.toLowerCase().includes(lowerQuery)\r\n            );\r\n            renderOptions();\r\n        }\r\n    };\r\n\r\n    // Event Listeners\r\n    field.addEventListener('click', toggleDropdown);\r\n\r\n    if (searchInput) {\r\n        searchInput.addEventListener('input', (e) => handleSearch(e.target.value));\r\n        searchInput.addEventListener('click', (e) => e.stopPropagation());\r\n    }\r\n\r\n    // Close on outside click — dropdown is on document.body so check both\r\n    document.addEventListener('click', (e) => {\r\n        if (!container.contains(e.target) && !dropdown.contains(e.target) && isOpen) {\r\n            closeDropdown();\r\n        }\r\n    });\r\n\r\n    // Reposition on scroll/resize\r\n    window.addEventListener('scroll', () => {\r\n        if (isOpen) positionDropdown();\r\n    }, true);\r\n\r\n    window.addEventListener('resize', () => {\r\n        if (isOpen) positionDropdown();\r\n    });\r\n\r\n    // Keyboard navigation\r\n    field.addEventListener('keydown', (e) => {\r\n        if (disabled) return;\r\n\r\n        if (e.key === 'Enter' || e.key === ' ') {\r\n            e.preventDefault();\r\n            toggleDropdown();\r\n        } else if (e.key === 'Escape' && isOpen) {\r\n            closeDropdown();\r\n        }\r\n    });\r\n\r\n    // Initialize\r\n    applyTheme();\r\n    updateSelectedDisplay();\r\n    renderOptions();\r\n\r\n    // Populate hidden select with options\r\n    options.forEach(opt => {\r\n        const optionEl = document.createElement('option');\r\n        optionEl.value = opt.value;\r\n        optionEl.textContent = opt.label;\r\n        if (opt.disabled) optionEl.disabled = true;\r\n        hiddenSelect.appendChild(optionEl);\r\n    });\r\n\r\n    // Cleanup function\r\n    const cleanup = () => {\r\n        themeObserver.disconnect();\r\n        darkModeMediaQuery.removeEventListener('change', applyTheme);\r\n        // Remove the body-level dropdown to avoid leaking DOM nodes\r\n        if (dropdown.parentNode) dropdown.parentNode.removeChild(dropdown);\r\n    };\r\n\r\n    return {\r\n        getElement: () => container,\r\n        getValue: () => selectedValue,\r\n        setValue: (val) => {\r\n            selectedValue = val;\r\n            updateSelectedDisplay();\r\n        },\r\n        getSelectedOption: () => getSelectedOption(),\r\n        setOptions: (newOptions) => {\r\n            filteredOptions = [...newOptions];\r\n\r\n            hiddenSelect.innerHTML = '';\r\n            newOptions.forEach(opt => {\r\n                const optionEl = document.createElement('option');\r\n                optionEl.value = opt.value;\r\n                optionEl.textContent = opt.label;\r\n                if (opt.disabled) optionEl.disabled = true;\r\n                hiddenSelect.appendChild(optionEl);\r\n            });\r\n\r\n            renderOptions();\r\n            updateSelectedDisplay();\r\n        },\r\n        addOption: (option) => {\r\n            filteredOptions.push(option);\r\n\r\n            const optionEl = document.createElement('option');\r\n            optionEl.value = option.value;\r\n            optionEl.textContent = option.label;\r\n            if (option.disabled) optionEl.disabled = true;\r\n            hiddenSelect.appendChild(optionEl);\r\n\r\n            renderOptions();\r\n        },\r\n        removeOption: (val) => {\r\n            filteredOptions = filteredOptions.filter(opt => opt.value !== val);\r\n\r\n            const optionEl = Array.from(hiddenSelect.options).find(opt => opt.value === val);\r\n            if (optionEl) optionEl.remove();\r\n\r\n            if (selectedValue === val) {\r\n                selectedValue = null;\r\n                updateSelectedDisplay();\r\n            }\r\n            renderOptions();\r\n        },\r\n        open: openDropdown,\r\n        close: closeDropdown,\r\n        toggle: toggleDropdown,\r\n        isOpen: () => isOpen,\r\n        setLoading,\r\n        setError: (message) => {\r\n            field.classList.add('material-spinner-error');\r\n            if (helperTextEl) {\r\n                helperTextEl.textContent = message || errorText || 'Error';\r\n            }\r\n        },\r\n        clearError: () => {\r\n            field.classList.remove('material-spinner-error');\r\n            if (helperTextEl) {\r\n                helperTextEl.textContent = helperText || '';\r\n            }\r\n        },\r\n        setDisabled: (newDisabled) => {\r\n            hiddenSelect.disabled = newDisabled;\r\n            field.classList.toggle('material-spinner-disabled', newDisabled);\r\n            if (newDisabled) closeDropdown();\r\n        },\r\n        reset: () => {\r\n            selectedValue = null;\r\n            updateSelectedDisplay();\r\n            if (searchInput) searchInput.value = '';\r\n            filteredOptions = [...options];\r\n            renderOptions();\r\n            closeDropdown();\r\n        },\r\n        validate: () => {\r\n            const valid = hiddenSelect.checkValidity();\r\n            if (!valid) {\r\n                field.classList.add('material-spinner-error');\r\n                if (helperTextEl) {\r\n                    helperTextEl.textContent = hiddenSelect.validationMessage;\r\n                }\r\n            }\r\n            return valid;\r\n        },\r\n        destroy: cleanup\r\n    }; \r\n};\r\n\r\n\r\n// ==========================================\r\n    // MaterialButton\r\n    // ==========================================\r\n    const MaterialButton = (props = {}) => {\r\n        const {\r\n            text = 'Button',\r\n                onClick,\r\n                variant = 'filled', // filled, outlined, text, elevated, tonal\r\n                size = 'medium', // small, medium, large\r\n                leadingIcon,\r\n                trailingIcon,\r\n                iconOnly = false,\r\n                disabled = false,\r\n                fullWidth = false,\r\n                color,\r\n                textColor,\r\n                strokeColor,\r\n                strokeWidth,\r\n                type = 'button',\r\n                id,\r\n                className,\r\n                margin,\r\n                weight,\r\n                alignSelf\r\n        } = props;\r\n\r\n        let isLoading = false;\r\n        let originalContent = null;\r\n\r\n        const button = document.createElement('button');\r\n        button.type = type;\r\n        button.disabled = disabled;\r\n\r\n        // Build classes\r\n        const classes = ['material-btn', variant];\r\n        if (size !== 'medium') classes.push(size);\r\n        if (iconOnly) classes.push('icon-only');\r\n        if (fullWidth) classes.push('fullwidth');\r\n        if (disabled) classes.push('disabled');\r\n        if (className) classes.push(className);\r\n\r\n        button.className = classes.join(' ');\r\n\r\n        // Apply custom styles\r\n        const styles = {};\r\n        if (margin) styles.margin = dp(margin);\r\n        if (weight) styles.flex = weight;\r\n        if (alignSelf) styles.alignSelf = alignSelf;\r\n        applyStyles(button, styles);\r\n\r\n        if (id) button.id = id;\r\n\r\n        // Apply custom color\r\n        const applyCustomColor = (customColor) => {\r\n            button.dataset.color = customColor;\r\n            button.style.setProperty('--md-custom-color', customColor);\r\n\r\n            const textColor = getLuminance(customColor) > 0.5 ? '#1a1a1a' : '#ffffff';\r\n            button.style.setProperty('--md-custom-text', textColor);\r\n            button.style.setProperty('--md-custom-container', hexToRgba(customColor, 0.15));\r\n\r\n            // Override colors for custom color\r\n            if (variant === 'filled') {\r\n                button.style.background = customColor;\r\n                button.style.color = textColor;\r\n            } else if (variant === 'outlined' || variant === 'text') {\r\n                button.style.color = customColor;\r\n            }\r\n        };\r\n\r\n        if (color) applyCustomColor(color);\r\n\r\n        // Apply custom text color (overrides auto-calculated color from applyCustomColor)\r\n        if (textColor) {\r\n            button.style.color = textColor;\r\n        }\r\n\r\n        // Apply stroke (border) color and thickness\r\n        if (strokeColor || strokeWidth) {\r\n            const bColor = strokeColor || 'currentColor';\r\n            const bWidth = strokeWidth ? `${strokeWidth}px` : '1px';\r\n            button.style.border = `${bWidth} solid ${bColor}`;\r\n        }\r\n\r\n        // Build content\r\n        const buildContent = () => {\r\n            button.innerHTML = '';\r\n\r\n            if (iconOnly) {\r\n                const icon = leadingIcon || trailingIcon;\r\n                if (icon) {\r\n                    button.innerHTML = `<i class=\"${icon}\"></i>`;\r\n                }\r\n            } else {\r\n                if (leadingIcon) {\r\n                    const iconEl = document.createElement('i');\r\n                    iconEl.className = leadingIcon;\r\n                    button.appendChild(iconEl);\r\n                }\r\n\r\n                if (text) {\r\n                    const textEl = document.createElement('span');\r\n                    textEl.textContent = text;\r\n                    button.appendChild(textEl);\r\n                }\r\n\r\n                if (trailingIcon) {\r\n                    const iconEl = document.createElement('i');\r\n                    iconEl.className = trailingIcon;\r\n                    button.appendChild(iconEl);\r\n                }\r\n            }\r\n        };\r\n\r\n        buildContent();\r\n\r\n        // Event listeners\r\n        if (!disabled && onClick) {\r\n            button.addEventListener('click', (e) => {\r\n                if (!isLoading) onClick(e);\r\n            });\r\n        }\r\n\r\n        return {\r\n            getElement: () => button,\r\n            setText: (newText) => {\r\n                if (!isLoading) {\r\n                    const textSpan = button.querySelector('span');\r\n                    if (textSpan) textSpan.textContent = newText;\r\n                }\r\n            },\r\n            setIcon: (leading, trailing) => {\r\n                if (!isLoading) buildContent();\r\n            },\r\n            setLoading: (loading, loadingText = '') => {\r\n                isLoading = loading;\r\n\r\n                if (loading) {\r\n                    originalContent = button.innerHTML;\r\n                    button.classList.add('loading');\r\n                    button.innerHTML = `\r\n            <div class=\"material-btn-loader\">\r\n              <div class=\"material-spinner\"></div>\r\n              ${loadingText ? `<span>${loadingText}</span>` : ''}\r\n            </div>\r\n          `;\r\n                } else {\r\n                    button.classList.remove('loading');\r\n                    if (originalContent) {\r\n                        button.innerHTML = originalContent;\r\n                        originalContent = null;\r\n                    }\r\n                }\r\n            },\r\n            isLoading: () => isLoading,\r\n            setDisabled: (newDisabled) => {\r\n                button.disabled = newDisabled;\r\n                button.classList.toggle('disabled', newDisabled);\r\n            },\r\n            setVariant: (newVariant) => {\r\n                button.classList.remove('filled', 'outlined', 'text', 'elevated', 'tonal');\r\n                button.classList.add(newVariant);\r\n            },\r\n            click: () => button.click()\r\n        };\r\n    };\r\n\r\n    \r\n    // ==========================================\r\n    // MaterialSwitch\r\n    // ==========================================\r\n    const MaterialSwitch = (props = {}) => {\r\n        const {\r\n            checked = false,\r\n                disabled = false,\r\n                label = '',\r\n                labelPosition = 'right', // left, right\r\n                showIcon = true,\r\n                color,\r\n                onChange,\r\n                id,\r\n                className,\r\n                name,\r\n                margin,\r\n                weight,\r\n                alignSelf\r\n        } = props;\r\n\r\n        const switchId = id || generateId('material-switch');\r\n\r\n        // Container\r\n        const container = document.createElement('label');\r\n        container.htmlFor = switchId;\r\n\r\n        const classes = ['material-switch-container'];\r\n        if (disabled) classes.push('disabled');\r\n        if (className) classes.push(className);\r\n        container.className = classes.join(' ');\r\n\r\n        // Apply custom styles\r\n        const styles = {};\r\n        if (margin) styles.margin = dp(margin);\r\n        if (weight) styles.flex = weight;\r\n        if (alignSelf) styles.alignSelf = alignSelf;\r\n        applyStyles(container, styles);\r\n\r\n        // Custom color\r\n        if (color) {\r\n            container.dataset.color = color;\r\n            container.style.setProperty('--md-custom-color', color);\r\n        }\r\n\r\n        // Label (left)\r\n        let labelEl;\r\n        if (label && labelPosition === 'left') {\r\n            labelEl = document.createElement('span');\r\n            labelEl.className = 'material-switch-label';\r\n            labelEl.textContent = label;\r\n            container.appendChild(labelEl);\r\n        }\r\n\r\n        // Switch element\r\n        const switchEl = document.createElement('div');\r\n        switchEl.className = 'material-switch';\r\n\r\n        // Hidden input\r\n        const input = document.createElement('input');\r\n        input.type = 'checkbox';\r\n        input.className = 'material-switch-input';\r\n        input.id = switchId;\r\n        if (name) input.name = name;\r\n        input.checked = checked;\r\n        input.disabled = disabled;\r\n\r\n        // Track\r\n        const track = document.createElement('div');\r\n        track.className = 'material-switch-track';\r\n\r\n        // Thumb\r\n        const thumb = document.createElement('div');\r\n        thumb.className = 'material-switch-thumb';\r\n        if (showIcon) {\r\n            thumb.innerHTML = '<i class=\"bx bx-check\"></i>';\r\n        }\r\n\r\n        switchEl.appendChild(input);\r\n        switchEl.appendChild(track);\r\n        switchEl.appendChild(thumb);\r\n        container.appendChild(switchEl);\r\n\r\n        // Label (right)\r\n        if (label && labelPosition === 'right') {\r\n            labelEl = document.createElement('span');\r\n            labelEl.className = 'material-switch-label';\r\n            labelEl.textContent = label;\r\n            container.appendChild(labelEl);\r\n        }\r\n\r\n        // Event listeners\r\n        if (onChange) {\r\n            input.addEventListener('change', () => {\r\n                onChange(input.checked);\r\n            });\r\n        }\r\n\r\n        return {\r\n            getElement: () => container,\r\n            getChecked: () => input.checked,\r\n            setChecked: (newChecked) => {\r\n                input.checked = newChecked;\r\n            },\r\n            toggle: () => {\r\n                input.checked = !input.checked;\r\n                if (onChange) onChange(input.checked);\r\n            },\r\n            setDisabled: (newDisabled) => {\r\n                input.disabled = newDisabled;\r\n                container.classList.toggle('disabled', newDisabled);\r\n            },\r\n            setLabel: (newLabel) => {\r\n                if (labelEl) labelEl.textContent = newLabel;\r\n            }\r\n        };\r\n    };\r\n\r\n    // ==========================================\r\n    // Button (Legacy - keeping for compatibility)\r\n    // ==========================================\r\n    const Button = (props = {}) => {\r\n        const {\r\n            text = 'Button', onClick, background, textColor,\r\n                padding = 12, margin, weight, alignSelf, width, height,\r\n                disabled = false, id, className, variant = 'filled', icon\r\n        } = props;\r\n\r\n        const button = document.createElement('button');\r\n        button.disabled = disabled;\r\n\r\n        const variantStyles = {\r\n            filled: {\r\n                background: 'var(--md-primary)',\r\n                color: 'var(--md-on-primary)',\r\n                border: 'none',\r\n            },\r\n            outlined: {\r\n                background: 'transparent',\r\n                color: 'var(--md-primary)',\r\n                border: '1px solid var(--md-outline)',\r\n            },\r\n            text: {\r\n                background: 'transparent',\r\n                color: 'var(--md-primary)',\r\n                border: 'none',\r\n            },\r\n            tonal: {\r\n                background: 'var(--md-secondary-container)',\r\n                color: 'var(--md-on-secondary-container)',\r\n                border: 'none',\r\n            },\r\n            elevated: {\r\n                background: 'var(--md-surface-container-low)',\r\n                color: 'var(--md-primary)',\r\n                border: 'none',\r\n                boxShadow: '0 1px 3px rgba(0,0,0,0.12)',\r\n            }\r\n        };\r\n\r\n        const baseStyles = {\r\n            padding: dp(padding),\r\n            borderRadius: '20px',\r\n            cursor: disabled ? 'not-allowed' : 'pointer',\r\n            fontSize: '14px',\r\n            fontWeight: '500',\r\n            fontFamily: 'inherit',\r\n            transition: 'all 0.2s',\r\n            boxSizing: 'border-box',\r\n            display: 'inline-flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            gap: '8px',\r\n            opacity: disabled ? 0.5 : 1,\r\n            ...variantStyles[variant]\r\n        };\r\n\r\n        if (background) baseStyles.background = background;\r\n        if (textColor) baseStyles.color = textColor;\r\n        if (margin) baseStyles.margin = dp(margin);\r\n        if (weight) baseStyles.flex = weight;\r\n        if (alignSelf) baseStyles.alignSelf = alignSelf;\r\n        if (width === 'match_parent') baseStyles.width = '100%';\r\n        else if (width) baseStyles.width = dp(width);\r\n        if (height) baseStyles.height = dp(height);\r\n\r\n        applyStyles(button, baseStyles);\r\n        if (id) button.id = id;\r\n        if (className) button.className = className;\r\n\r\n        if (icon) {\r\n            const iconEl = document.createElement('i');\r\n            iconEl.className = icon;\r\n            button.appendChild(iconEl);\r\n        }\r\n        const textSpan = document.createElement('span');\r\n        textSpan.textContent = text;\r\n        button.appendChild(textSpan);\r\n\r\n        if (!disabled && onClick) button.addEventListener('click', onClick);\r\n\r\n        return {\r\n            getElement: () => button,\r\n            setText: (newText) => {\r\n                textSpan.textContent = newText;\r\n            },\r\n            setEnabled: (enabled) => {\r\n                button.disabled = !enabled;\r\n                button.style.opacity = enabled ? '1' : '0.5';\r\n                button.style.cursor = enabled ? 'pointer' : 'not-allowed';\r\n            }\r\n        };\r\n    };\r\n\r\n    // ==========================================\r\n    // Enhanced Card Component\r\n    // ==========================================\r\n    const Card = (props = {}, children = []) => {\r\n        const {\r\n            elevation = 1,\r\n                padding = 16,\r\n                margin = 0,\r\n                cornerRadius = 12,\r\n                width,\r\n                height,\r\n                onClick,\r\n                id,\r\n                className,\r\n                variant = 'elevated',\r\n                // New stroke/border properties\r\n                strokeWidth = 0,\r\n                strokeColor = 'var(--md-outline)',\r\n                // New background properties\r\n                backgroundColor,\r\n                // New hover properties\r\n                hoverable = false,\r\n                hoverElevation,\r\n                // New overflow property\r\n                overflow = 'visible',\r\n                // New transition properties\r\n                transition = 'all 0.3s ease',\r\n                // New ripple effect\r\n                ripple = true,\r\n                // New disabled state\r\n                disabled = false,\r\n                // New content alignment\r\n                alignContent = 'flex-start',\r\n                justifyContent = 'flex-start',\r\n                gap = 0\r\n        } = props;\r\n\r\n        const card = document.createElement('div');\r\n\r\n        const variantStyles = {\r\n            elevated: {\r\n                background: backgroundColor || 'var(--md-surface-container-low)',\r\n                boxShadow: `0 ${elevation}px ${elevation * 2}px rgba(0,0,0,0.1)`,\r\n            },\r\n            filled: {\r\n                background: backgroundColor || 'var(--md-surface-container-highest)',\r\n                boxShadow: 'none',\r\n            },\r\n            outlined: {\r\n                background: backgroundColor || 'var(--md-surface)',\r\n                border: '1px solid var(--md-outline-variant)',\r\n                boxShadow: 'none',\r\n            }\r\n        };\r\n\r\n        const styles = {\r\n            borderRadius: dp(cornerRadius),\r\n            padding: dp(padding),\r\n            margin: dp(margin),\r\n            boxSizing: 'border-box',\r\n            display: 'flex',\r\n            flexDirection: 'column',\r\n            alignItems: alignContent,\r\n            justifyContent: justifyContent,\r\n            gap: dp(gap),\r\n            overflow: overflow,\r\n            transition: transition,\r\n            position: 'relative',\r\n            ...variantStyles[variant]\r\n        };\r\n\r\n        // Apply stroke/border with same radius\r\n        if (strokeWidth > 0) {\r\n            styles.border = `${dp(strokeWidth)} solid ${strokeColor}`;\r\n            // Ensure border radius applies to the stroke\r\n            styles.borderRadius = dp(cornerRadius);\r\n        }\r\n\r\n        // Width and height handling\r\n        if (width === 'match_parent') styles.width = '100%';\r\n        else if (width) styles.width = dp(width);\r\n        if (height === 'match_parent') styles.height = '100%';\r\n        else if (height) styles.height = dp(height);\r\n\r\n        // Disabled state\r\n        if (disabled) {\r\n            styles.opacity = '0.38';\r\n            styles.pointerEvents = 'none';\r\n        }\r\n\r\n        // Click and hover handling\r\n        if (onClick && !disabled) {\r\n            styles.cursor = 'pointer';\r\n            card.addEventListener('click', onClick);\r\n\r\n            // Hoverable effect\r\n            if (hoverable) {\r\n                const hoverElev = hoverElevation || elevation + 2;\r\n                card.addEventListener('mouseenter', () => {\r\n                    card.style.boxShadow = `0 ${hoverElev}px ${hoverElev * 2}px rgba(0,0,0,0.15)`;\r\n                    card.style.transform = 'translateY(-2px)';\r\n                });\r\n                card.addEventListener('mouseleave', () => {\r\n                    card.style.boxShadow = styles.boxShadow;\r\n                    card.style.transform = 'translateY(0)';\r\n                });\r\n            }\r\n\r\n            // Ripple effect\r\n            if (ripple) {\r\n                card.style.overflow = 'hidden';\r\n                card.addEventListener('click', (e) => {\r\n                    const rippleEl = document.createElement('span');\r\n                    const rect = card.getBoundingClientRect();\r\n                    const size = Math.max(rect.width, rect.height);\r\n                    const x = e.clientX - rect.left - size / 2;\r\n                    const y = e.clientY - rect.top - size / 2;\r\n\r\n                    rippleEl.style.width = rippleEl.style.height = `${size}px`;\r\n                    rippleEl.style.left = `${x}px`;\r\n                    rippleEl.style.top = `${y}px`;\r\n                    rippleEl.style.position = 'absolute';\r\n                    rippleEl.style.borderRadius = '50%';\r\n                    rippleEl.style.background = 'rgba(255,255,255,0.4)';\r\n                    rippleEl.style.transform = 'scale(0)';\r\n                    rippleEl.style.animation = 'ripple 0.6s ease-out';\r\n                    rippleEl.style.pointerEvents = 'none';\r\n\r\n                    card.appendChild(rippleEl);\r\n                    setTimeout(() => rippleEl.remove(), 600);\r\n                });\r\n\r\n                // Add ripple animation\r\n                if (!document.getElementById('ripple-animation')) {\r\n                    const style = document.createElement('style');\r\n                    style.id = 'ripple-animation';\r\n                    style.textContent = `\r\n            @keyframes ripple {\r\n              to {\r\n                transform: scale(2);\r\n                opacity: 0;\r\n              }\r\n            }\r\n          `;\r\n                    document.head.appendChild(style);\r\n                }\r\n            }\r\n        }\r\n\r\n        applyStyles(card, styles);\r\n        if (id) card.id = id;\r\n        if (className) card.className = className;\r\n\r\n        children.forEach(child => {\r\n            if (child && typeof child.getElement === 'function') {\r\n                card.appendChild(child.getElement());\r\n            } else if (child instanceof HTMLElement) {\r\n                card.appendChild(child);\r\n            }\r\n        });\r\n\r\n        return {\r\n            getElement: () => card,\r\n            // Expose methods for dynamic updates\r\n            updateStroke: (width, color) => {\r\n                card.style.border = `${dp(width)} solid ${color}`;\r\n            },\r\n            updateRadius: (radius) => {\r\n                card.style.borderRadius = dp(radius);\r\n            },\r\n            updateElevation: (elev) => {\r\n                card.style.boxShadow = `0 ${elev}px ${elev * 2}px rgba(0,0,0,0.1)`;\r\n            }\r\n        };\r\n    };\r\n    // Helper to render icons (Class string or SVG)\r\n    const renderIcon = (iconData, element) => {\r\n        element.innerHTML = ''; // Clear previous\r\n        if (!iconData) return;\r\n\r\n        if (iconData.includes('<svg')) {\r\n            element.innerHTML = iconData;\r\n        } else {\r\n            // Assume it's a class string like 'bx bx-check'\r\n            const i = document.createElement('i');\r\n            i.className = iconData;\r\n            element.appendChild(i);\r\n        }\r\n    };\r\n\r\n    // Helper for dp (in case you don't have it globally)\r\n    const safeDp = (val) => typeof dp === 'function' ? dp(val) : (typeof val === 'number' ? `${val}px` : val);\r\n    // ==========================================\r\n    // Material 3 Checkbox Component\r\n    // ==========================================\r\n    const MaterialCheckbox = (props = {}) => {\r\n        const {\r\n            id,\r\n            className,\r\n            checked = false,\r\n            disabled = false,\r\n            indeterminate = false,\r\n            label = '',\r\n            onChange,\r\n            size = 18,\r\n            color = 'var(--md-primary)',\r\n            onColor = 'var(--md-on-primary, white)', // Color of the icon\r\n            borderColor = 'var(--md-outline, #79747e)',\r\n            errorColor = 'var(--md-error)',\r\n            checkedIcon = 'bx bx-check', // Default icon (requires Boxicons loaded) or use SVG\r\n            ripple = true,\r\n            error = false,\r\n            name,\r\n            value\r\n        } = props;\r\n\r\n        const container = document.createElement('label');\r\n        const wrapper = document.createElement('div');\r\n        const input = document.createElement('input');\r\n        const checkboxBox = document.createElement('div');\r\n        const iconContainer = document.createElement('div');\r\n        const labelText = document.createElement('span');\r\n\r\n        // Input Setup\r\n        input.type = 'checkbox';\r\n        input.checked = checked;\r\n        input.disabled = disabled;\r\n        if (name) input.name = name;\r\n        if (value) input.value = value;\r\n        if (id) input.id = id;\r\n\r\n        // Hide native input but keep it accessible\r\n        Object.assign(input.style, {\r\n            position: 'absolute',\r\n            opacity: 0,\r\n            width: 0,\r\n            height: 0,\r\n            margin: 0\r\n        });\r\n\r\n        // Container (Label) Styles\r\n        Object.assign(container.style, {\r\n            display: 'inline-flex',\r\n            alignItems: 'center', // Fix vertical alignment\r\n            gap: safeDp(12),\r\n            cursor: disabled ? 'not-allowed' : 'pointer',\r\n            userSelect: 'none',\r\n            opacity: disabled ? '0.38' : '1',\r\n            position: 'relative',\r\n            minHeight: safeDp(size + 16) // Touch target size\r\n        });\r\n\r\n        // Wrapper (The Ripple Area)\r\n        Object.assign(wrapper.style, {\r\n            position: 'relative',\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            width: safeDp(40), // M3 Standard touch target\r\n            height: safeDp(40),\r\n            borderRadius: '50%'\r\n        });\r\n\r\n        // The Visual Box\r\n        Object.assign(checkboxBox.style, {\r\n            width: safeDp(size),\r\n            height: safeDp(size),\r\n            border: `2px solid ${borderColor}`,\r\n            borderRadius: safeDp(2), // M3 uses 2px radius\r\n            position: 'relative',\r\n            transition: 'background-color 0.2s, border-color 0.2s',\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            boxSizing: 'border-box',\r\n            backgroundColor: 'transparent'\r\n        });\r\n\r\n        // Icon Container\r\n        Object.assign(iconContainer.style, {\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            color: onColor,\r\n            fontSize: safeDp(size * 0.8), // Scale icon to fit\r\n            opacity: 0,\r\n            transform: 'scale(0.5)',\r\n            transition: 'transform 0.2s ease-out, opacity 0.2s ease-out',\r\n            width: '100%',\r\n            height: '100%'\r\n        });\r\n\r\n        // Default SVG Checkmark if no Boxicons\r\n        const defaultCheckmark = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\"><path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>`;\r\n\r\n        // Determine what icon to render\r\n        const iconToRender = checkedIcon === 'bx bx-check' && !document.querySelector('link[href*=\"boxicons\"]') ?\r\n            defaultCheckmark :\r\n            checkedIcon;\r\n\r\n        renderIcon(iconToRender, iconContainer);\r\n\r\n        if (label) {\r\n            labelText.textContent = label;\r\n            Object.assign(labelText.style, {\r\n                fontSize: '14px',\r\n                fontFamily: 'inherit',\r\n                color: 'var(--md-on-surface)',\r\n                lineHeight: '1.5'\r\n            });\r\n        }\r\n\r\n        const updateState = () => {\r\n            const isChecked = input.checked;\r\n            const isIndeterminate = input.indeterminate;\r\n            const activeColor = error ? errorColor : color;\r\n\r\n            if (isChecked || isIndeterminate) {\r\n                // Checked Style: Filled Box\r\n                checkboxBox.style.backgroundColor = activeColor;\r\n                checkboxBox.style.borderColor = activeColor;\r\n\r\n                iconContainer.style.opacity = '1';\r\n                iconContainer.style.transform = 'scale(1)';\r\n\r\n                if (isIndeterminate) {\r\n                    // M3 Indeterminate is a dash\r\n                    iconContainer.innerHTML = `<svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M19 13H5v-2h14v2z\"/></svg>`;\r\n                } else {\r\n                    renderIcon(iconToRender, iconContainer);\r\n                }\r\n            } else {\r\n                // Unchecked Style: Transparent with Outline\r\n                checkboxBox.style.backgroundColor = 'transparent';\r\n                checkboxBox.style.borderColor = error ? errorColor : borderColor;\r\n\r\n                iconContainer.style.opacity = '0';\r\n                iconContainer.style.transform = 'scale(0.5)';\r\n            }\r\n        };\r\n\r\n        input.addEventListener('change', (e) => {\r\n            updateState();\r\n            if (onChange) onChange(e, input.checked);\r\n        });\r\n\r\n        // Ripple Effect\r\n        if (ripple && !disabled) {\r\n            wrapper.addEventListener('mousedown', () => {\r\n                const rippleEl = document.createElement('div');\r\n                rippleEl.style.cssText = `\r\n        position: absolute; width: 100%; height: 100%;\r\n        border-radius: 50%; background-color: ${error ? errorColor : color};\r\n        opacity: 0.12; transform: scale(0);\r\n        transition: transform 0.2s; pointer-events: none;\r\n      `;\r\n                wrapper.appendChild(rippleEl);\r\n                requestAnimationFrame(() => rippleEl.style.transform = 'scale(1)');\r\n\r\n                const removeRipple = () => {\r\n                    rippleEl.style.opacity = '0';\r\n                    setTimeout(() => rippleEl.remove(), 200);\r\n                    window.removeEventListener('mouseup', removeRipple);\r\n                };\r\n                window.addEventListener('mouseup', removeRipple);\r\n            });\r\n        }\r\n\r\n        checkboxBox.appendChild(iconContainer);\r\n        wrapper.appendChild(input);\r\n        wrapper.appendChild(checkboxBox);\r\n        container.appendChild(wrapper);\r\n        if (label) container.appendChild(labelText);\r\n\r\n        if (className) container.className = className;\r\n\r\n        // Initial State\r\n        if (indeterminate) input.indeterminate = true;\r\n        updateState();\r\n\r\n        return {\r\n            getElement: () => container,\r\n            setChecked: (val) => {\r\n                input.checked = val;\r\n                updateState();\r\n            },\r\n            setIndeterminate: (val) => {\r\n                input.indeterminate = val;\r\n                updateState();\r\n            },\r\n            isChecked: () => input.checked,\r\n            setDisabled: (val) => {\r\n                input.disabled = val;\r\n                container.style.opacity = val ? '0.38' : '1';\r\n                container.style.cursor = val ? 'not-allowed' : 'pointer';\r\n            }\r\n        };\r\n    };\r\n\r\n\r\n    // ==========================================\r\n    // Material 3 Radio Button Component\r\n    // ==========================================\r\n    const MaterialRadioButton = (props = {}) => {\r\n        const {\r\n            id,\r\n            className,\r\n            checked = false,\r\n            disabled = false,\r\n            label = '',\r\n            onChange,\r\n            size = 20,\r\n            color = 'var(--md-primary)',\r\n            borderColor = 'var(--md-outline, #79747e)',\r\n            errorColor = 'var(--md-error)',\r\n            // New Feature: If you pass an icon, it replaces the center dot\r\n            checkedIcon = null,\r\n            ripple = true,\r\n            error = false,\r\n            name,\r\n            value\r\n        } = props;\r\n\r\n        const container = document.createElement('label');\r\n        const wrapper = document.createElement('div');\r\n        const input = document.createElement('input');\r\n        const radioOuter = document.createElement('div');\r\n        const radioInner = document.createElement('div');\r\n        const labelText = document.createElement('span');\r\n\r\n        input.type = 'radio';\r\n        input.checked = checked;\r\n        input.disabled = disabled;\r\n        if (name) input.name = name;\r\n        if (value) input.value = value;\r\n        if (id) input.id = id;\r\n\r\n        Object.assign(input.style, {\r\n            position: 'absolute',\r\n            opacity: 0,\r\n            width: 0,\r\n            height: 0,\r\n            margin: 0\r\n        });\r\n\r\n        Object.assign(container.style, {\r\n            display: 'inline-flex',\r\n            alignItems: 'center',\r\n            gap: safeDp(12),\r\n            cursor: disabled ? 'not-allowed' : 'pointer',\r\n            userSelect: 'none',\r\n            opacity: disabled ? '0.38' : '1',\r\n            position: 'relative',\r\n            minHeight: safeDp(size + 16)\r\n        });\r\n\r\n        Object.assign(wrapper.style, {\r\n            position: 'relative',\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            width: safeDp(40),\r\n            height: safeDp(40),\r\n            borderRadius: '50%'\r\n        });\r\n\r\n        Object.assign(radioOuter.style, {\r\n            width: safeDp(size),\r\n            height: safeDp(size),\r\n            border: `2px solid ${borderColor}`,\r\n            borderRadius: '50%',\r\n            position: 'relative',\r\n            transition: 'border-color 0.2s',\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            boxSizing: 'border-box'\r\n        });\r\n\r\n        // If using an icon, we style it differently than the dot\r\n        Object.assign(radioInner.style, {\r\n            width: checkedIcon ? '100%' : safeDp(size * 0.5),\r\n            height: checkedIcon ? '100%' : safeDp(size * 0.5),\r\n            borderRadius: checkedIcon ? '0' : '50%',\r\n            backgroundColor: checkedIcon ? 'transparent' : color,\r\n            color: color, // For the icon font\r\n            transform: 'scale(0)',\r\n            transition: 'transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)',\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            fontSize: safeDp(size * 0.7) // Icon size\r\n        });\r\n\r\n        if (checkedIcon) renderIcon(checkedIcon, radioInner);\r\n\r\n        if (label) {\r\n            labelText.textContent = label;\r\n            Object.assign(labelText.style, {\r\n                fontSize: '14px',\r\n                color: 'var(--md-on-surface)',\r\n                fontFamily: 'inherit'\r\n            });\r\n        }\r\n\r\n        const updateState = () => {\r\n            const isChecked = input.checked;\r\n            const activeColor = error ? errorColor : color;\r\n\r\n            if (isChecked) {\r\n                radioOuter.style.borderColor = activeColor;\r\n                radioInner.style.transform = 'scale(1)';\r\n                if (!checkedIcon) radioInner.style.backgroundColor = activeColor;\r\n                else radioInner.style.color = activeColor;\r\n            } else {\r\n                radioOuter.style.borderColor = error ? errorColor : borderColor;\r\n                radioInner.style.transform = 'scale(0)';\r\n            }\r\n        };\r\n\r\n        // 1. Handle Direct Change\r\n        input.addEventListener('change', (e) => {\r\n            updateState();\r\n            if (onChange) onChange(e, input.value);\r\n        });\r\n\r\n        // 2. THE FIX: Handle Group Changes (When another radio unchecks this one)\r\n        // We attach a listener to the document to watch for changes on inputs with the same name\r\n        if (name) {\r\n            const groupListener = (e) => {\r\n                // If the changed element has the same name as me, I might have been unchecked\r\n                if (e.target !== input && e.target.name === name) {\r\n                    updateState();\r\n                }\r\n            };\r\n            document.addEventListener('change', groupListener);\r\n\r\n            // Cleanup helper attached to element for garbage collection if needed\r\n            container._cleanup = () => document.removeEventListener('change', groupListener);\r\n        }\r\n\r\n        // Ripple\r\n        if (ripple && !disabled) {\r\n            wrapper.addEventListener('mousedown', () => {\r\n                const rippleEl = document.createElement('div');\r\n                rippleEl.style.cssText = `\r\n        position: absolute; width: 100%; height: 100%;\r\n        border-radius: 50%; background-color: ${error ? errorColor : color};\r\n        opacity: 0.12; transform: scale(0);\r\n        transition: transform 0.2s; pointer-events: none;\r\n      `;\r\n                wrapper.appendChild(rippleEl);\r\n                requestAnimationFrame(() => rippleEl.style.transform = 'scale(1)');\r\n\r\n                const removeRipple = () => {\r\n                    rippleEl.style.opacity = '0';\r\n                    setTimeout(() => rippleEl.remove(), 200);\r\n                    window.removeEventListener('mouseup', removeRipple);\r\n                };\r\n                window.addEventListener('mouseup', removeRipple);\r\n            });\r\n        }\r\n\r\n        radioOuter.appendChild(radioInner);\r\n        wrapper.appendChild(input);\r\n        wrapper.appendChild(radioOuter);\r\n        container.appendChild(wrapper);\r\n        if (label) container.appendChild(labelText);\r\n        if (className) container.className = className;\r\n\r\n        updateState();\r\n\r\n        return {\r\n            getElement: () => container,\r\n            setChecked: (val) => {\r\n                input.checked = val;\r\n                updateState();\r\n                // If programmatically checking, we need to trigger the group logic manually\r\n                if (val && name) {\r\n                    input.dispatchEvent(new Event('change', {\r\n                        bubbles: true\r\n                    }));\r\n                }\r\n            },\r\n            isChecked: () => input.checked,\r\n            getValue: () => input.value,\r\n            setDisabled: (val) => {\r\n                input.disabled = val;\r\n                container.style.opacity = val ? '0.38' : '1';\r\n                container.style.cursor = val ? 'not-allowed' : 'pointer';\r\n            },\r\n            destroy: () => {\r\n                if (container._cleanup) container._cleanup();\r\n                container.remove();\r\n            }\r\n        };\r\n    };\r\n\r\n    // ==========================================\r\n    // Material Slider Component (Single/Range)\r\n    // ==========================================\r\n    const MaterialSlider = (props = {}) => {\r\n        const {\r\n            id,\r\n            className,\r\n            min = 0,\r\n            max = 100,\r\n            value = 50, // Single value or [start, end] for range\r\n            step = 1,\r\n            disabled = false,\r\n            color = 'var(--md-primary)',\r\n            trackColor = 'var(--md-surface-variant)',\r\n            thumbSize = 20,\r\n            trackHeight = 4,\r\n            showValue = false,\r\n            showMinMax = false,\r\n            showTicks = false,\r\n            tickStep = null, // If null, uses step value\r\n            formatValue = (val) => val.toString(),\r\n            onChange,\r\n            onChangeCommitted, // Fires when user releases thumb\r\n            marks = [], // Array of {value: number, label: string}\r\n            vertical = false,\r\n            width = 300,\r\n            height = 'auto'\r\n        } = props;\r\n\r\n        // Determine if this is a range slider\r\n        const isRange = Array.isArray(value);\r\n        const initialValue = isRange ? [...value] : value;\r\n        let currentValue = initialValue;\r\n\r\n        const container = document.createElement('div');\r\n        const sliderWrapper = document.createElement('div');\r\n        const track = document.createElement('div');\r\n        const activeTrack = document.createElement('div');\r\n        const thumb1 = document.createElement('div');\r\n        const thumb2 = isRange ? document.createElement('div') : null;\r\n        const valueDisplay1 = showValue ? document.createElement('div') : null;\r\n        const valueDisplay2 = showValue && isRange ? document.createElement('div') : null;\r\n        const minLabel = showMinMax ? document.createElement('span') : null;\r\n        const maxLabel = showMinMax ? document.createElement('span') : null;\r\n\r\n        let isDragging = false;\r\n        let activeThumb = null;\r\n\r\n        // Container styles\r\n        applyStyles(container, {\r\n            display: 'flex',\r\n            flexDirection: vertical ? 'row' : 'column',\r\n            alignItems: vertical ? 'center' : 'stretch',\r\n            gap: dp(8),\r\n            width: vertical ? 'auto' : dp(width),\r\n            height: vertical ? dp(height === 'auto' ? width : height) : 'auto',\r\n            opacity: disabled ? '0.38' : '1',\r\n            pointerEvents: disabled ? 'none' : 'auto'\r\n        });\r\n\r\n        // Min/Max labels\r\n        if (showMinMax) {\r\n            minLabel.textContent = formatValue(min);\r\n            maxLabel.textContent = formatValue(max);\r\n            applyStyles(minLabel, {\r\n                fontSize: '12px',\r\n                color: 'var(--md-on-surface-variant)',\r\n                userSelect: 'none'\r\n            });\r\n            applyStyles(maxLabel, {\r\n                fontSize: '12px',\r\n                color: 'var(--md-on-surface-variant)',\r\n                userSelect: 'none'\r\n            });\r\n        }\r\n\r\n        // Slider wrapper\r\n        applyStyles(sliderWrapper, {\r\n            position: 'relative',\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            flex: '1',\r\n            cursor: disabled ? 'not-allowed' : 'pointer',\r\n            padding: vertical ? `${dp(thumbSize / 2)} 0` : `0 ${dp(thumbSize / 2)}`\r\n        });\r\n\r\n        // Track styles\r\n        applyStyles(track, {\r\n            position: 'absolute',\r\n            backgroundColor: trackColor,\r\n            borderRadius: dp(trackHeight / 2),\r\n            ...(vertical ? {\r\n                width: dp(trackHeight),\r\n                height: '100%',\r\n                left: '50%',\r\n                transform: 'translateX(-50%)'\r\n            } : {\r\n                height: dp(trackHeight),\r\n                width: '100%',\r\n                top: '50%',\r\n                transform: 'translateY(-50%)'\r\n            })\r\n        });\r\n\r\n        // Active track styles\r\n        applyStyles(activeTrack, {\r\n            position: 'absolute',\r\n            backgroundColor: color,\r\n            borderRadius: dp(trackHeight / 2),\r\n            transition: isDragging ? 'none' : 'all 0.1s ease',\r\n            ...(vertical ? {\r\n                width: dp(trackHeight),\r\n                left: '50%',\r\n                transform: 'translateX(-50%)'\r\n            } : {\r\n                height: dp(trackHeight),\r\n                top: '50%',\r\n                transform: 'translateY(-50%)'\r\n            })\r\n        });\r\n\r\n        // Thumb styles\r\n        const createThumb = (thumbElement, valueDisplayElement) => {\r\n            applyStyles(thumbElement, {\r\n                position: 'absolute',\r\n                width: dp(thumbSize),\r\n                height: dp(thumbSize),\r\n                backgroundColor: color,\r\n                borderRadius: '50%',\r\n                border: '2px solid white',\r\n                boxShadow: '0 2px 4px rgba(0,0,0,0.2)',\r\n                cursor: disabled ? 'not-allowed' : 'grab',\r\n                transition: isDragging ? 'none' : 'all 0.1s ease',\r\n                zIndex: '2',\r\n                ...(vertical ? {\r\n                    left: '50%',\r\n                    transform: 'translate(-50%, -50%)'\r\n                } : {\r\n                    top: '50%',\r\n                    transform: 'translate(-50%, -50%)'\r\n                })\r\n            });\r\n\r\n            if (valueDisplayElement) {\r\n                valueDisplayElement.style.cssText = `\r\n        position: absolute;\r\n        background: ${color};\r\n        color: white;\r\n        padding: 4px 8px;\r\n        border-radius: 4px;\r\n        font-size: 12px;\r\n        font-weight: 500;\r\n        white-space: nowrap;\r\n        pointer-events: none;\r\n        opacity: 0;\r\n        transition: opacity 0.2s;\r\n        ${vertical ? 'left: calc(100% + 8px); top: 50%; transform: translateY(-50%);' : 'bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);'}\r\n      `;\r\n                thumbElement.appendChild(valueDisplayElement);\r\n            }\r\n        };\r\n\r\n        createThumb(thumb1, valueDisplay1);\r\n        if (thumb2) createThumb(thumb2, valueDisplay2);\r\n\r\n        // Add tick marks\r\n        if (showTicks) {\r\n            const tickContainer = document.createElement('div');\r\n            applyStyles(tickContainer, {\r\n                position: 'absolute',\r\n                ...(vertical ? {\r\n                    width: dp(trackHeight * 3),\r\n                    height: '100%',\r\n                    left: '50%',\r\n                    transform: 'translateX(-50%)'\r\n                } : {\r\n                    height: dp(trackHeight * 3),\r\n                    width: '100%',\r\n                    top: '50%',\r\n                    transform: 'translateY(-50%)'\r\n                })\r\n            });\r\n\r\n            const actualTickStep = tickStep || step;\r\n            for (let val = min; val <= max; val += actualTickStep) {\r\n                const tick = document.createElement('div');\r\n                const percent = ((val - min) / (max - min)) * 100;\r\n\r\n                applyStyles(tick, {\r\n                    position: 'absolute',\r\n                    backgroundColor: 'var(--md-outline-variant)',\r\n                    ...(vertical ? {\r\n                        width: dp(trackHeight * 2),\r\n                        height: '2px',\r\n                        bottom: `${percent}%`,\r\n                        left: '50%',\r\n                        transform: 'translate(-50%, 50%)'\r\n                    } : {\r\n                        height: dp(trackHeight * 2),\r\n                        width: '2px',\r\n                        left: `${percent}%`,\r\n                        top: '50%',\r\n                        transform: 'translate(-50%, -50%)'\r\n                    })\r\n                });\r\n\r\n                tickContainer.appendChild(tick);\r\n            }\r\n            sliderWrapper.appendChild(tickContainer);\r\n        }\r\n\r\n        // Add marks\r\n        marks.forEach(mark => {\r\n            const markContainer = document.createElement('div');\r\n            const markLabel = document.createElement('span');\r\n            const percent = ((mark.value - min) / (max - min)) * 100;\r\n\r\n            applyStyles(markContainer, {\r\n                position: 'absolute',\r\n                ...(vertical ? {\r\n                    bottom: `${percent}%`,\r\n                    left: '50%',\r\n                    transform: 'translate(-50%, 50%)'\r\n                } : {\r\n                    left: `${percent}%`,\r\n                    top: '50%',\r\n                    transform: 'translate(-50%, -50%)'\r\n                })\r\n            });\r\n\r\n            applyStyles(markLabel, {\r\n                position: 'absolute',\r\n                fontSize: '12px',\r\n                color: 'var(--md-on-surface-variant)',\r\n                whiteSpace: 'nowrap',\r\n                ...(vertical ? {\r\n                    left: 'calc(100% + 16px)',\r\n                    top: '50%',\r\n                    transform: 'translateY(-50%)'\r\n                } : {\r\n                    top: 'calc(100% + 8px)',\r\n                    left: '50%',\r\n                    transform: 'translateX(-50%)'\r\n                })\r\n            });\r\n\r\n            markLabel.textContent = mark.label;\r\n            markContainer.appendChild(markLabel);\r\n            sliderWrapper.appendChild(markContainer);\r\n        });\r\n\r\n        // Calculate position\r\n        const valueToPercent = (val) => ((val - min) / (max - min)) * 100;\r\n        const percentToValue = (percent) => {\r\n            const rawValue = (percent / 100) * (max - min) + min;\r\n            return Math.round(rawValue / step) * step;\r\n        };\r\n\r\n        const updatePosition = () => {\r\n            if (isRange) {\r\n                const [val1, val2] = currentValue;\r\n                const percent1 = valueToPercent(val1);\r\n                const percent2 = valueToPercent(val2);\r\n\r\n                if (vertical) {\r\n                    thumb1.style.bottom = `${percent1}%`;\r\n                    thumb2.style.bottom = `${percent2}%`;\r\n                    activeTrack.style.bottom = `${percent1}%`;\r\n                    activeTrack.style.height = `${percent2 - percent1}%`;\r\n                } else {\r\n                    thumb1.style.left = `${percent1}%`;\r\n                    thumb2.style.left = `${percent2}%`;\r\n                    activeTrack.style.left = `${percent1}%`;\r\n                    activeTrack.style.width = `${percent2 - percent1}%`;\r\n                }\r\n\r\n                if (valueDisplay1) valueDisplay1.textContent = formatValue(val1);\r\n                if (valueDisplay2) valueDisplay2.textContent = formatValue(val2);\r\n            } else {\r\n                const percent = valueToPercent(currentValue);\r\n\r\n                if (vertical) {\r\n                    thumb1.style.bottom = `${percent}%`;\r\n                    activeTrack.style.bottom = '0';\r\n                    activeTrack.style.height = `${percent}%`;\r\n                } else {\r\n                    thumb1.style.left = `${percent}%`;\r\n                    activeTrack.style.left = '0';\r\n                    activeTrack.style.width = `${percent}%`;\r\n                }\r\n\r\n                if (valueDisplay1) valueDisplay1.textContent = formatValue(currentValue);\r\n            }\r\n        };\r\n\r\n        // Mouse/touch event handlers\r\n        const getPositionFromEvent = (e) => {\r\n            const rect = track.getBoundingClientRect();\r\n            let position;\r\n\r\n            if (vertical) {\r\n                const clientY = e.touches ? e.touches[0].clientY : e.clientY;\r\n                position = ((rect.bottom - clientY) / rect.height) * 100;\r\n            } else {\r\n                const clientX = e.touches ? e.touches[0].clientX : e.clientX;\r\n                position = ((clientX - rect.left) / rect.width) * 100;\r\n            }\r\n\r\n            return Math.max(0, Math.min(100, position));\r\n        };\r\n\r\n        const handleMove = (e) => {\r\n            if (!isDragging || disabled) return;\r\n            e.preventDefault();\r\n\r\n            const percent = getPositionFromEvent(e);\r\n            const newValue = percentToValue(percent);\r\n\r\n            if (isRange) {\r\n                if (activeThumb === thumb1) {\r\n                    currentValue[0] = Math.min(newValue, currentValue[1]);\r\n                } else {\r\n                    currentValue[1] = Math.max(newValue, currentValue[0]);\r\n                }\r\n            } else {\r\n                currentValue = Math.max(min, Math.min(max, newValue));\r\n            }\r\n\r\n            updatePosition();\r\n            if (onChange) onChange(isRange ? [...currentValue] : currentValue);\r\n        };\r\n\r\n        const handleEnd = () => {\r\n            if (!isDragging) return;\r\n            isDragging = false;\r\n            activeThumb = null;\r\n\r\n            if (valueDisplay1) valueDisplay1.style.opacity = '0';\r\n            if (valueDisplay2) valueDisplay2.style.opacity = '0';\r\n\r\n            thumb1.style.cursor = 'grab';\r\n            if (thumb2) thumb2.style.cursor = 'grab';\r\n\r\n            if (onChangeCommitted) onChangeCommitted(isRange ? [...currentValue] : currentValue);\r\n        };\r\n\r\n        const handleStart = (e, thumb) => {\r\n            if (disabled) return;\r\n            e.preventDefault();\r\n            isDragging = true;\r\n            activeThumb = thumb;\r\n\r\n            const thumbValueDisplay = thumb === thumb1 ? valueDisplay1 : valueDisplay2;\r\n            if (thumbValueDisplay) thumbValueDisplay.style.opacity = '1';\r\n\r\n            thumb.style.cursor = 'grabbing';\r\n            handleMove(e);\r\n        };\r\n\r\n        // Click on track to jump\r\n        const handleTrackClick = (e) => {\r\n            if (disabled || isDragging) return;\r\n\r\n            const percent = getPositionFromEvent(e);\r\n            const newValue = percentToValue(percent);\r\n\r\n            if (isRange) {\r\n                // Determine which thumb is closer\r\n                const [val1, val2] = currentValue;\r\n                const dist1 = Math.abs(newValue - val1);\r\n                const dist2 = Math.abs(newValue - val2);\r\n\r\n                if (dist1 < dist2) {\r\n                    currentValue[0] = Math.min(newValue, val2);\r\n                } else {\r\n                    currentValue[1] = Math.max(newValue, val1);\r\n                }\r\n            } else {\r\n                currentValue = newValue;\r\n            }\r\n\r\n            updatePosition();\r\n            if (onChange) onChange(isRange ? [...currentValue] : currentValue);\r\n            if (onChangeCommitted) onChangeCommitted(isRange ? [...currentValue] : currentValue);\r\n        };\r\n\r\n        // Event listeners\r\n        thumb1.addEventListener('mousedown', (e) => handleStart(e, thumb1));\r\n        thumb1.addEventListener('touchstart', (e) => handleStart(e, thumb1));\r\n        if (thumb2) {\r\n            thumb2.addEventListener('mousedown', (e) => handleStart(e, thumb2));\r\n            thumb2.addEventListener('touchstart', (e) => handleStart(e, thumb2));\r\n        }\r\n\r\n        track.addEventListener('click', handleTrackClick);\r\n\r\n        document.addEventListener('mousemove', handleMove);\r\n        document.addEventListener('mouseup', handleEnd);\r\n        document.addEventListener('touchmove', handleMove);\r\n        document.addEventListener('touchend', handleEnd);\r\n\r\n        // Assembly\r\n        sliderWrapper.appendChild(track);\r\n        sliderWrapper.appendChild(activeTrack);\r\n        sliderWrapper.appendChild(thumb1);\r\n        if (thumb2) sliderWrapper.appendChild(thumb2);\r\n\r\n        if (vertical) {\r\n            if (maxLabel) container.appendChild(maxLabel);\r\n            container.appendChild(sliderWrapper);\r\n            if (minLabel) container.appendChild(minLabel);\r\n        } else {\r\n            if (minLabel) container.appendChild(minLabel);\r\n            container.appendChild(sliderWrapper);\r\n            if (maxLabel) container.appendChild(maxLabel);\r\n        }\r\n\r\n        if (id) container.id = id;\r\n        if (className) container.className = className;\r\n\r\n        updatePosition();\r\n\r\n        return {\r\n            getElement: () => container,\r\n            getValue: () => (isRange ? [...currentValue] : currentValue),\r\n            setValue: (val) => {\r\n                currentValue = isRange ? [...val] : val;\r\n                updatePosition();\r\n            },\r\n            setDisabled: (val) => {\r\n                container.style.opacity = val ? '0.38' : '1';\r\n                container.style.pointerEvents = val ? 'none' : 'auto';\r\n            }\r\n        };\r\n    };\r\n\r\n    // ==========================================\r\n    // OTP Input Component\r\n    // ==========================================\r\n    const OTPInput = (props = {}) => {\r\n        const {\r\n            id,\r\n            className,\r\n            length = 4,\r\n            value = '',\r\n            onChange,\r\n            onComplete,\r\n            type = 'number', // 'number', 'text', 'password'\r\n            disabled = false,\r\n            error = false,\r\n            autoFocus = true,\r\n            boxWidth = 48,\r\n            boxHeight = 56,\r\n            gap = 8,\r\n            fontSize = 24,\r\n            color = 'var(--md-primary)',\r\n            errorColor = 'var(--md-error)',\r\n            borderWidth = 2,\r\n            cornerRadius = 8,\r\n            placeholder = '·' // Character to show in empty boxes\r\n        } = props;\r\n\r\n        const container = document.createElement('div');\r\n        const inputs = [];\r\n        let currentValue = value.split('').slice(0, length);\r\n\r\n        // Container styles\r\n        applyStyles(container, {\r\n            display: 'flex',\r\n            gap: dp(gap),\r\n            alignItems: 'center'\r\n        });\r\n\r\n        // Create input boxes\r\n        for (let i = 0; i < length; i++) {\r\n            const inputWrapper = document.createElement('div');\r\n            const input = document.createElement('input');\r\n\r\n            input.type = type === 'password' ? 'password' : 'text';\r\n            input.maxLength = 1;\r\n            input.disabled = disabled;\r\n            input.value = currentValue[i] || '';\r\n            input.placeholder = placeholder;\r\n            input.inputMode = type === 'number' ? 'numeric' : 'text';\r\n\r\n            if (type === 'number') {\r\n                input.pattern = '[0-9]';\r\n            }\r\n\r\n            // Input wrapper styles\r\n            applyStyles(inputWrapper, {\r\n                position: 'relative',\r\n                width: dp(boxWidth),\r\n                height: dp(boxHeight)\r\n            });\r\n\r\n            // Input styles\r\n            applyStyles(input, {\r\n                width: '100%',\r\n                height: '100%',\r\n                textAlign: 'center',\r\n                fontSize: dp(fontSize),\r\n                fontWeight: '600',\r\n                border: `${dp(borderWidth)} solid ${error ? errorColor : 'var(--md-outline)'}`,\r\n                borderRadius: dp(cornerRadius),\r\n                backgroundColor: disabled ? 'var(--md-surface-variant)' : 'var(--md-surface)',\r\n                color: 'var(--md-on-surface)',\r\n                outline: 'none',\r\n                transition: 'all 0.2s',\r\n                boxSizing: 'border-box',\r\n                caretColor: color\r\n            });\r\n\r\n            // Focus styles\r\n            input.addEventListener('focus', () => {\r\n                if (!disabled) {\r\n                    input.style.borderColor = error ? errorColor : color;\r\n                    input.style.borderWidth = dp(borderWidth + 1);\r\n                    input.style.boxShadow = `0 0 0 1px ${error ? errorColor : color}`;\r\n                }\r\n            });\r\n\r\n            input.addEventListener('blur', () => {\r\n                input.style.borderColor = error ? errorColor : 'var(--md-outline)';\r\n                input.style.borderWidth = dp(borderWidth);\r\n                input.style.boxShadow = 'none';\r\n            });\r\n\r\n            // Handle input\r\n            input.addEventListener('input', (e) => {\r\n                let val = e.target.value;\r\n\r\n                // Filter non-numeric if type is number\r\n                if (type === 'number') {\r\n                    val = val.replace(/[^0-9]/g, '');\r\n                }\r\n\r\n                // Take only first character\r\n                val = val.slice(0, 1);\r\n                input.value = val;\r\n                currentValue[i] = val;\r\n\r\n                // Auto-focus next input\r\n                if (val && i < length - 1) {\r\n                    inputs[i + 1].focus();\r\n                }\r\n\r\n                // Trigger callbacks\r\n                const fullValue = currentValue.join('');\r\n                if (onChange) onChange(fullValue);\r\n\r\n                if (fullValue.length === length && onComplete) {\r\n                    onComplete(fullValue);\r\n                }\r\n            });\r\n\r\n            // Handle backspace\r\n            input.addEventListener('keydown', (e) => {\r\n                if (e.key === 'Backspace' && !input.value && i > 0) {\r\n                    inputs[i - 1].focus();\r\n                    currentValue[i - 1] = '';\r\n                    inputs[i - 1].value = '';\r\n\r\n                    const fullValue = currentValue.join('');\r\n                    if (onChange) onChange(fullValue);\r\n                }\r\n\r\n                // Handle arrow keys\r\n                if (e.key === 'ArrowLeft' && i > 0) {\r\n                    e.preventDefault();\r\n                    inputs[i - 1].focus();\r\n                }\r\n                if (e.key === 'ArrowRight' && i < length - 1) {\r\n                    e.preventDefault();\r\n                    inputs[i + 1].focus();\r\n                }\r\n            });\r\n\r\n            // Handle paste\r\n            input.addEventListener('paste', (e) => {\r\n                e.preventDefault();\r\n                const pastedData = e.clipboardData.getData('text').slice(0, length);\r\n\r\n                for (let j = 0; j < pastedData.length && (i + j) < length; j++) {\r\n                    let char = pastedData[j];\r\n                    if (type === 'number') {\r\n                        char = char.replace(/[^0-9]/g, '');\r\n                    }\r\n                    if (char) {\r\n                        inputs[i + j].value = char;\r\n                        currentValue[i + j] = char;\r\n                    }\r\n                }\r\n\r\n                // Focus last filled input\r\n                const lastFilledIndex = Math.min(i + pastedData.length, length - 1);\r\n                inputs[lastFilledIndex].focus();\r\n\r\n                const fullValue = currentValue.join('');\r\n                if (onChange) onChange(fullValue);\r\n\r\n                if (fullValue.length === length && onComplete) {\r\n                    onComplete(fullValue);\r\n                }\r\n            });\r\n\r\n            inputs.push(input);\r\n            inputWrapper.appendChild(input);\r\n            container.appendChild(inputWrapper);\r\n        }\r\n\r\n        // Auto-focus first input\r\n        if (autoFocus && !disabled) {\r\n            setTimeout(() => inputs[0].focus(), 0);\r\n        }\r\n\r\n        if (id) container.id = id;\r\n        if (className) container.className = className;\r\n\r\n        return {\r\n            getElement: () => container,\r\n            getValue: () => currentValue.join(''),\r\n            setValue: (val) => {\r\n                const chars = val.split('').slice(0, length);\r\n                for (let i = 0; i < length; i++) {\r\n                    inputs[i].value = chars[i] || '';\r\n                    currentValue[i] = chars[i] || '';\r\n                }\r\n            },\r\n            clear: () => {\r\n                for (let i = 0; i < length; i++) {\r\n                    inputs[i].value = '';\r\n                    currentValue[i] = '';\r\n                }\r\n                inputs[0].focus();\r\n            },\r\n            focus: () => {\r\n                const firstEmptyIndex = currentValue.findIndex(v => !v);\r\n                inputs[firstEmptyIndex !== -1 ? firstEmptyIndex : 0].focus();\r\n            },\r\n            setDisabled: (val) => {\r\n                inputs.forEach(input => input.disabled = val);\r\n            },\r\n            setError: (val) => {\r\n                const borderColor = val ? errorColor : 'var(--md-outline)';\r\n                inputs.forEach(input => {\r\n                    input.style.borderColor = borderColor;\r\n                });\r\n            }\r\n        };\r\n    };\r\n\r\n\r\n\r\n\r\n\r\n\r\n    // ==========================================\r\n    // Icon\r\n    // ==========================================\r\n    const Icon = (props = {}) => {\r\n        const {\r\n            name,\r\n            size = 24,\r\n            color,\r\n            margin,\r\n            onClick\r\n        } = props;\r\n        const icon = document.createElement('i');\r\n        icon.className = name;\r\n\r\n        const styles = {\r\n            fontSize: dp(size),\r\n            color: color || 'var(--md-on-surface)',\r\n            display: 'inline-flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n        };\r\n        if (margin) styles.margin = dp(margin);\r\n        if (onClick) {\r\n            styles.cursor = 'pointer';\r\n            icon.addEventListener('click', onClick);\r\n        }\r\n\r\n        applyStyles(icon, styles);\r\n        return {\r\n            getElement: () => icon\r\n        };\r\n    };\r\n\r\n    // ==========================================\r\n    // Divider\r\n    // ==========================================\r\n    const Divider = (props = {}) => {\r\n        const {\r\n            orientation = 'horizontal', thickness = 1, color, margin\r\n        } = props;\r\n        const divider = document.createElement('div');\r\n\r\n        const styles = {\r\n            backgroundColor: color || 'var(--md-outline-variant)',\r\n            margin: margin ? dp(margin) : '0',\r\n        };\r\n\r\n        if (orientation === 'horizontal') {\r\n            styles.height = dp(thickness);\r\n            styles.width = '100%';\r\n        } else {\r\n            styles.width = dp(thickness);\r\n            styles.height = '100%';\r\n        }\r\n\r\n        applyStyles(divider, styles);\r\n        return {\r\n            getElement: () => divider\r\n        };\r\n    };\r\n\r\n\r\n\r\n\r\n\r\n\r\n    // ==========================================\r\n    // MaterialStepView Component\r\n    // ==========================================\r\n\r\n    // First, inject the styles for StepView\r\n    const injectStepViewStyles = () => {\r\n        if (document.getElementById('android-components-stepview')) return;\r\n\r\n        const style = document.createElement('style');\r\n        style.id = 'android-components-stepview';\r\n        style.textContent = `\r\n    /* Material Step View Styles */\r\n    .material-stepview-container {\r\n      font-family: 'Segoe UI', Roboto, -apple-system, sans-serif;\r\n      width: 100%;\r\n    }\r\n\r\n    .material-stepview-header {\r\n      margin-bottom: 24px;\r\n    }\r\n\r\n    .material-stepview-title {\r\n      font-size: 24px;\r\n      font-weight: 600;\r\n      color: var(--md-on-surface);\r\n      margin: 0 0 8px 0;\r\n    }\r\n\r\n    .material-stepview-subtitle {\r\n      font-size: 14px;\r\n      color: var(--md-on-surface-variant);\r\n      margin: 0;\r\n    }\r\n\r\n    .material-stepview-steps {\r\n      position: relative;\r\n    }\r\n\r\n    .material-stepview-step {\r\n      position: relative;\r\n      display: flex;\r\n      gap: 16px;\r\n      padding-bottom: 32px;\r\n    }\r\n\r\n    .material-stepview-step:last-child {\r\n      padding-bottom: 0;\r\n    }\r\n\r\n    .material-stepview-step-indicator {\r\n      position: relative;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .material-stepview-step-circle {\r\n      width: 25px;\r\n      height: 25px;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      background: var(--md-surface-variant);\r\n      border: 2px solid var(--md-outline);\r\n      color: var(--md-on-surface-variant);\r\n      font-size: 16px;\r\n      font-weight: 500;\r\n      transition: all 0.3s ease;\r\n      z-index: 2;\r\n      position: relative;\r\n    }\r\n\r\n    .material-stepview-step.active .material-stepview-step-circle {\r\n      background: var(--md-primary);\r\n      border-color: var(--md-primary);\r\n      color: var(--md-on-primary);\r\n      box-shadow: 0 2px 8px rgba(103, 80, 164, 0.3);\r\n    }\r\n\r\n    .material-stepview-step.completed .material-stepview-step-circle {\r\n      background: var(--md-primary);\r\n      border-color: var(--md-primary);\r\n      color: var(--md-on-primary);\r\n    }\r\n\r\n    .material-stepview-step.error .material-stepview-step-circle {\r\n      background: var(--md-error);\r\n      border-color: var(--md-error);\r\n      color: var(--md-on-primary);\r\n    }\r\n\r\n    .material-stepview-step.warning .material-stepview-step-circle {\r\n      background: #f57c00;\r\n      border-color: #f57c00;\r\n      color: var(--md-on-primary);\r\n    }\r\n\r\n    .material-stepview-step.disabled .material-stepview-step-circle {\r\n      background: var(--md-disabled-bg);\r\n      border-color: var(--md-outline-variant);\r\n      color: var(--md-disabled-text);\r\n      opacity: 0.5;\r\n    }\r\n\r\n    .material-stepview-step-circle i {\r\n      font-size: 20px;\r\n      line-height: 1;\r\n    }\r\n\r\n    .material-stepview-step-number {\r\n      font-size: 16px;\r\n      font-weight: 500;\r\n    }\r\n\r\n    .material-stepview-step-line {\r\n      position: absolute;\r\n      top: 30px;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      width: 2px;\r\n      height: calc(100% - 30px);\r\n      background: var(--md-outline-variant);\r\n      transition: background 0.3s ease;\r\n      z-index: 1;\r\n    }\r\n\r\n    .material-stepview-step.completed .material-stepview-step-line {\r\n      background: var(--md-primary);\r\n    }\r\n\r\n    .material-stepview-step.active .material-stepview-step-line {\r\n      background: linear-gradient(to bottom, var(--md-primary) 0%, var(--md-outline-variant) 100%);\r\n    }\r\n\r\n    .material-stepview-step:last-child .material-stepview-step-line {\r\n      display: none;\r\n    }\r\n\r\n    .material-stepview-step-content {\r\n      flex: 1;\r\n      padding-top: 5px;\r\n    }\r\n\r\n    .material-stepview-step-title {\r\n      font-size: 16px;\r\n      font-weight: 500;\r\n      color: var(--md-on-surface);\r\n      margin: 0 0 4px 0;\r\n      transition: color 0.3s ease;\r\n    }\r\n\r\n    .material-stepview-step.active .material-stepview-step-title {\r\n      color: var(--md-primary);\r\n    }\r\n\r\n    .material-stepview-step.disabled .material-stepview-step-title {\r\n      color: var(--md-disabled-text);\r\n    }\r\n\r\n    .material-stepview-step-subtitle {\r\n      font-size: 14px;\r\n      color: var(--md-on-surface-variant);\r\n      margin: 0;\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .material-stepview-step.disabled .material-stepview-step-subtitle {\r\n      color: var(--md-disabled-text);\r\n    }\r\n\r\n    .material-stepview-step-description {\r\n      font-size: 13px;\r\n      color: var(--md-on-surface-variant);\r\n      margin: 8px 0 0 0;\r\n      line-height: 1.5;\r\n    }\r\n\r\n    /* Loading spinner for steps */\r\n    .material-stepview-spinner {\r\n      width: 18px;\r\n      height: 18px;\r\n      border: 3px solid var(--md-on-primary);\r\n      border-top-color: transparent;\r\n      border-radius: 50%;\r\n      animation: material-spin 0.8s linear infinite;\r\n    }\r\n\r\n    .material-stepview-step.active .material-stepview-spinner {\r\n      border-color: var(--md-on-primary);\r\n      border-top-color: transparent;\r\n    }\r\n\r\n    /* Clickable steps */\r\n    .material-stepview-step.clickable {\r\n      \r\n    }\r\n\r\n    .material-stepview-step.clickable:hover:not(.disabled) .material-stepview-step-circle {\r\n      transform: scale(1.05);\r\n      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);\r\n    }\r\n\r\n    .material-stepview-step.clickable:hover:not(.disabled) .material-stepview-step-title {\r\n      color: var(--md-primary);\r\n    }\r\n\r\n    /* Compact variant */\r\n    .material-stepview-container.compact .material-stepview-step {\r\n      padding-bottom: 20px;\r\n    }\r\n\r\n    .material-stepview-container.compact .material-stepview-step-circle {\r\n      width: 32px;\r\n      height: 32px;\r\n      font-size: 14px;\r\n    }\r\n\r\n    .material-stepview-container.compact .material-stepview-step-circle i {\r\n      font-size: 16px;\r\n    }\r\n\r\n    .material-stepview-container.compact .material-stepview-step-line {\r\n      top: 30px;\r\n      height: calc(100% - 30px);\r\n    }\r\n\r\n    .material-stepview-container.compact .material-stepview-step-content {\r\n      padding-top: 4px;\r\n    }\r\n\r\n    .material-stepview-container.compact .material-stepview-step-title {\r\n      font-size: 14px;\r\n    }\r\n\r\n    .material-stepview-container.compact .material-stepview-step-subtitle {\r\n      font-size: 12px;\r\n    }\r\n\r\n    /* Horizontal variant */\r\n    .material-stepview-container.horizontal {\r\n      overflow-x: auto;\r\n    }\r\n\r\n    .material-stepview-container.horizontal .material-stepview-steps {\r\n      display: flex;\r\n      gap: 0;\r\n    }\r\n\r\n    .material-stepview-container.horizontal .material-stepview-step {\r\n      flex-direction: column;\r\n      padding-bottom: 0;\r\n      padding-right: 48px;\r\n      min-width: 120px;\r\n    }\r\n\r\n    .material-stepview-container.horizontal .material-stepview-step:last-child {\r\n      padding-right: 0;\r\n    }\r\n\r\n    .material-stepview-container.horizontal .material-stepview-step-indicator {\r\n      flex-direction: row;\r\n      width: 100%;\r\n    }\r\n\r\n    .material-stepview-container.horizontal .material-stepview-step-line {\r\n      top: 50%;\r\n      left: 30px;\r\n      transform: translateY(-50%);\r\n      width: calc(100% - 30px);\r\n      height: 2px;\r\n    }\r\n\r\n    .material-stepview-container.horizontal .material-stepview-step-content {\r\n      padding-top: 16px;\r\n      text-align: center;\r\n    }\r\n\r\n    /* Animation for adding steps */\r\n    @keyframes stepFadeIn {\r\n      \r\n    }\r\n\r\n    .material-stepview-step.animating {\r\n      animation: stepFadeIn 0.3s ease;\r\n    }\r\n  `;\r\n        document.head.appendChild(style);\r\n    };\r\n\r\n    // Inject styles immediately\r\n    injectStepViewStyles();\r\n\r\n    const MaterialStepView = (props = {}) => {\r\n        const {\r\n            title = '',\r\n                subtitle = '',\r\n                steps = [], // Array of step objects\r\n                orientation = 'vertical', // vertical, horizontal\r\n                variant = 'default', // default, compact\r\n                activeStep = 0,\r\n                clickable = false,\r\n                showNumbers = true,\r\n                onStepClick = null,\r\n                id,\r\n                className,\r\n                margin,\r\n                padding,\r\n                weight,\r\n                alignSelf,\r\n                width\r\n        } = props;\r\n\r\n        const stepViewId = id || `material-stepview-${Date.now()}`;\r\n        let currentSteps = [...steps];\r\n        let currentActiveStep = activeStep;\r\n\r\n        // Container\r\n        const container = document.createElement('div');\r\n        const containerClasses = ['material-stepview-container'];\r\n        if (variant) containerClasses.push(variant);\r\n        if (orientation) containerClasses.push(orientation);\r\n        if (className) containerClasses.push(className);\r\n        container.className = containerClasses.join(' ');\r\n        container.id = stepViewId;\r\n\r\n        // Apply container styles\r\n        const containerStyles = {};\r\n        if (margin) containerStyles.margin = typeof margin === 'number' ? `${margin}px` : margin;\r\n        if (padding) containerStyles.padding = typeof padding === 'number' ? `${padding}px` : padding;\r\n        if (weight) containerStyles.flex = weight;\r\n        if (alignSelf) containerStyles.alignSelf = alignSelf;\r\n        if (width === 'match_parent') containerStyles.width = '100%';\r\n        else if (width) containerStyles.width = typeof width === 'number' ? `${width}px` : width;\r\n        Object.assign(container.style, containerStyles);\r\n\r\n        // Header\r\n        let headerEl, titleEl, subtitleEl;\r\n        if (title || subtitle) {\r\n            headerEl = document.createElement('div');\r\n            headerEl.className = 'material-stepview-header';\r\n\r\n            if (title) {\r\n                titleEl = document.createElement('h3');\r\n                titleEl.className = 'material-stepview-title';\r\n                titleEl.textContent = title;\r\n                headerEl.appendChild(titleEl);\r\n            }\r\n\r\n            if (subtitle) {\r\n                subtitleEl = document.createElement('p');\r\n                subtitleEl.className = 'material-stepview-subtitle';\r\n                subtitleEl.textContent = subtitle;\r\n                headerEl.appendChild(subtitleEl);\r\n            }\r\n\r\n            container.appendChild(headerEl);\r\n        }\r\n\r\n        // Steps container\r\n        const stepsContainer = document.createElement('div');\r\n        stepsContainer.className = 'material-stepview-steps';\r\n        container.appendChild(stepsContainer);\r\n\r\n        // Render a single step\r\n        const renderStep = (step, index) => {\r\n            const {\r\n                title: stepTitle = `Step ${index + 1}`,\r\n                subtitle: stepSubtitle = '',\r\n                description = '',\r\n                status = 'pending', // pending, active, completed, error, warning, disabled\r\n                icon = null,\r\n                loading = false,\r\n                customIcon = null\r\n            } = step;\r\n\r\n            // Step element\r\n            const stepEl = document.createElement('div');\r\n            const stepClasses = ['material-stepview-step'];\r\n\r\n            // Determine status\r\n            if (status === 'active' || index === currentActiveStep) {\r\n                stepClasses.push('active');\r\n            } else if (status === 'completed') {\r\n                stepClasses.push('completed');\r\n            } else if (status === 'error') {\r\n                stepClasses.push('error');\r\n            } else if (status === 'warning') {\r\n                stepClasses.push('warning');\r\n            } else if (status === 'disabled') {\r\n                stepClasses.push('disabled');\r\n            }\r\n\r\n            if (clickable && status !== 'disabled') {\r\n                stepClasses.push('clickable');\r\n            }\r\n\r\n            stepEl.className = stepClasses.join(' ');\r\n            stepEl.dataset.index = index;\r\n\r\n            // Indicator container\r\n            const indicator = document.createElement('div');\r\n            indicator.className = 'material-stepview-step-indicator';\r\n\r\n            // Circle\r\n            const circle = document.createElement('div');\r\n            circle.className = 'material-stepview-step-circle';\r\n\r\n            // Determine circle content\r\n            if (loading) {\r\n                const spinner = document.createElement('div');\r\n                spinner.className = 'material-stepview-spinner';\r\n                circle.appendChild(spinner);\r\n            } else if (status === 'completed' && !customIcon) {\r\n                const checkIcon = document.createElement('i');\r\n                checkIcon.className = 'bx bx-check';\r\n                circle.appendChild(checkIcon);\r\n            } else if (status === 'error' && !customIcon) {\r\n                const errorIcon = document.createElement('i');\r\n                errorIcon.className = 'bx bx-x';\r\n                circle.appendChild(errorIcon);\r\n            } else if (status === 'warning' && !customIcon) {\r\n                const warningIcon = document.createElement('i');\r\n                warningIcon.className = 'bx bx-error';\r\n                circle.appendChild(warningIcon);\r\n            } else if (customIcon || icon) {\r\n                const iconEl = document.createElement('i');\r\n                iconEl.className = customIcon || icon;\r\n                circle.appendChild(iconEl);\r\n            } else if (showNumbers) {\r\n                const number = document.createElement('span');\r\n                number.className = 'material-stepview-step-number';\r\n                number.textContent = index + 1;\r\n                circle.appendChild(number);\r\n            }\r\n\r\n            indicator.appendChild(circle);\r\n\r\n            // Connecting line\r\n            if (index < currentSteps.length - 1) {\r\n                const line = document.createElement('div');\r\n                line.className = 'material-stepview-step-line';\r\n                indicator.appendChild(line);\r\n            }\r\n\r\n            stepEl.appendChild(indicator);\r\n\r\n            // Content\r\n            const content = document.createElement('div');\r\n            content.className = 'material-stepview-step-content';\r\n\r\n            const titleEl = document.createElement('h4');\r\n            titleEl.className = 'material-stepview-step-title';\r\n            titleEl.textContent = stepTitle;\r\n            content.appendChild(titleEl);\r\n\r\n            if (stepSubtitle) {\r\n                const subtitleEl = document.createElement('p');\r\n                subtitleEl.className = 'material-stepview-step-subtitle';\r\n                subtitleEl.textContent = stepSubtitle;\r\n                content.appendChild(subtitleEl);\r\n            }\r\n\r\n            if (description) {\r\n                const descEl = document.createElement('p');\r\n                descEl.className = 'material-stepview-step-description';\r\n                descEl.textContent = description;\r\n                content.appendChild(descEl);\r\n            }\r\n\r\n            stepEl.appendChild(content);\r\n\r\n            // Click handler\r\n            if (clickable && status !== 'disabled') {\r\n                stepEl.addEventListener('click', () => {\r\n                    if (onStepClick) {\r\n                        onStepClick(index, step);\r\n                    }\r\n                    setActiveStep(index);\r\n                });\r\n            }\r\n\r\n            return stepEl;\r\n        };\r\n\r\n        // Render all steps\r\n        const renderSteps = () => {\r\n            stepsContainer.innerHTML = '';\r\n            currentSteps.forEach((step, index) => {\r\n                const stepEl = renderStep(step, index);\r\n                stepEl.classList.add('animating');\r\n                stepsContainer.appendChild(stepEl);\r\n            });\r\n        };\r\n\r\n        // Initial render\r\n        renderSteps();\r\n\r\n        // Public API\r\n        return {\r\n            getElement: () => container,\r\n\r\n            // Step management\r\n            addStep: (step, animate = true) => {\r\n                currentSteps.push(step);\r\n                const stepEl = renderStep(step, currentSteps.length - 1);\r\n                if (animate) stepEl.classList.add('animating');\r\n                stepsContainer.appendChild(stepEl);\r\n            },\r\n\r\n            insertStep: (index, step, animate = true) => {\r\n                currentSteps.splice(index, 0, step);\r\n                renderSteps();\r\n            },\r\n\r\n            removeStep: (index) => {\r\n                if (index >= 0 && index < currentSteps.length) {\r\n                    currentSteps.splice(index, 1);\r\n                    renderSteps();\r\n                }\r\n            },\r\n\r\n            updateStep: (index, updates) => {\r\n                if (index >= 0 && index < currentSteps.length) {\r\n                    currentSteps[index] = {\r\n                        ...currentSteps[index],\r\n                        ...updates\r\n                    };\r\n                    renderSteps();\r\n                }\r\n            },\r\n\r\n            getStep: (index) => {\r\n                return currentSteps[index];\r\n            },\r\n\r\n            getAllSteps: () => {\r\n                return [...currentSteps];\r\n            },\r\n\r\n            clearSteps: () => {\r\n                currentSteps = [];\r\n                stepsContainer.innerHTML = '';\r\n            },\r\n\r\n            setSteps: (newSteps) => {\r\n                currentSteps = [...newSteps];\r\n                renderSteps();\r\n            },\r\n\r\n            // Step status management\r\n            setStepStatus: (index, status) => {\r\n                if (index >= 0 && index < currentSteps.length) {\r\n                    currentSteps[index].status = status;\r\n                    renderSteps();\r\n                }\r\n            },\r\n\r\n            setStepLoading: (index, loading) => {\r\n                if (index >= 0 && index < currentSteps.length) {\r\n                    currentSteps[index].loading = loading;\r\n                    renderSteps();\r\n                }\r\n            },\r\n\r\n            completeStep: (index) => {\r\n                if (index >= 0 && index < currentSteps.length) {\r\n                    currentSteps[index].status = 'completed';\r\n                    renderSteps();\r\n                }\r\n            },\r\n\r\n            setStepError: (index, errorMessage) => {\r\n                if (index >= 0 && index < currentSteps.length) {\r\n                    currentSteps[index].status = 'error';\r\n                    if (errorMessage) {\r\n                        currentSteps[index].subtitle = errorMessage;\r\n                    }\r\n                    renderSteps();\r\n                }\r\n            },\r\n\r\n            // Active step management\r\n            setActiveStep: (index) => {\r\n                if (index >= 0 && index < currentSteps.length) {\r\n                    currentActiveStep = index;\r\n                    renderSteps();\r\n                }\r\n            },\r\n\r\n            getActiveStep: () => currentActiveStep,\r\n\r\n            nextStep: () => {\r\n                if (currentActiveStep < currentSteps.length - 1) {\r\n                    currentActiveStep++;\r\n                    renderSteps();\r\n                }\r\n                return currentActiveStep;\r\n            },\r\n\r\n            previousStep: () => {\r\n                if (currentActiveStep > 0) {\r\n                    currentActiveStep--;\r\n                    renderSteps();\r\n                }\r\n                return currentActiveStep;\r\n            },\r\n\r\n            // Header management\r\n            setTitle: (newTitle) => {\r\n                if (titleEl) {\r\n                    titleEl.textContent = newTitle;\r\n                } else if (headerEl) {\r\n                    titleEl = document.createElement('h3');\r\n                    titleEl.className = 'material-stepview-title';\r\n                    titleEl.textContent = newTitle;\r\n                    headerEl.insertBefore(titleEl, headerEl.firstChild);\r\n                }\r\n            },\r\n\r\n            setSubtitle: (newSubtitle) => {\r\n                if (subtitleEl) {\r\n                    subtitleEl.textContent = newSubtitle;\r\n                } else if (headerEl) {\r\n                    subtitleEl = document.createElement('p');\r\n                    subtitleEl.className = 'material-stepview-subtitle';\r\n                    subtitleEl.textContent = newSubtitle;\r\n                    headerEl.appendChild(subtitleEl);\r\n                }\r\n            },\r\n\r\n            // Utility\r\n            reset: () => {\r\n                currentActiveStep = 0;\r\n                currentSteps = currentSteps.map(step => ({\r\n                    ...step,\r\n                    status: 'pending',\r\n                    loading: false\r\n                }));\r\n                renderSteps();\r\n            },\r\n\r\n            getTotalSteps: () => currentSteps.length,\r\n\r\n            isLastStep: () => currentActiveStep === currentSteps.length - 1,\r\n\r\n            isFirstStep: () => currentActiveStep === 0\r\n        };\r\n    };\r\n\r\n\r\n    // ==========================================\r\n    // Avatar\r\n    // ==========================================\r\n    const Avatar = (props = {}) => {\r\n        const {\r\n            size = 40, icon, text, background, color, margin\r\n        } = props;\r\n        const avatar = document.createElement('div');\r\n\r\n        const styles = {\r\n            width: dp(size),\r\n            height: dp(size),\r\n            borderRadius: '50%',\r\n            background: background || 'var(--md-primary-container)',\r\n            color: color || 'var(--md-on-primary-container)',\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            fontSize: dp(size * 0.45),\r\n            fontWeight: '500',\r\n            flexShrink: 0,\r\n        };\r\n        if (margin) styles.margin = dp(margin);\r\n\r\n        applyStyles(avatar, styles);\r\n\r\n        if (icon) {\r\n            const iconEl = document.createElement('i');\r\n            iconEl.className = icon;\r\n            avatar.appendChild(iconEl);\r\n        } else if (text) {\r\n            avatar.textContent = text.charAt(0).toUpperCase();\r\n        }\r\n\r\n        return {\r\n            getElement: () => avatar\r\n        };\r\n    };\r\n\r\n    return {\r\n        TextView,\r\n        Button,\r\n        Card,\r\n        Icon,\r\n        Divider,\r\n        Avatar,\r\n        MaterialButton,\r\n        MaterialSwitch,\r\n        MaterialInput,\r\n        MaterialSpinner,\r\n        MaterialImage,\r\n        MaterialStepView,\r\n        OTPInput,\r\n        MaterialRadioButton,\r\n        MaterialCheckbox,\r\n        MaterialSlider,\r\n        utils: {\r\n            injectStyles,\r\n            injectedStyles,\r\n            generateId,\r\n            hexToRgba,\r\n            getLuminance\r\n        }\r\n    };\r\n\r\n})();\r\n\r\nwindow.AndroidComponents = AndroidComponents;\r\n\r\n\r\n// ============================================\r\n// Shimmer Component — drop-in for AndroidComponents\r\n// ============================================\r\n// Usage:\r\n//   const shimmer = AndroidComponents.Shimmer({\r\n//       width: 200,\r\n//       height: 20,\r\n//       borderRadius: 4,\r\n//       color: '#e0e0e0',          // base background\r\n//       highlightColor: '#f5f5f5', // sweep highlight\r\n//       duration: 1400,            // ms per sweep\r\n//       angle: 30,                 // gradient angle in deg\r\n//       intensity: 0.6,            // highlight opacity 0–1\r\n//       margin: [8, 0],            // reuses dp()\r\n//       className: ''              // extra CSS class\r\n//   });\r\n//   parent.appendChild(shimmer.getElement());\r\n//\r\n// Preset helper (builds a group of shimmers for common skeletons):\r\n//   const card = AndroidComponents.ShimmerPreset.card();\r\n//   parent.appendChild(card.getElement());\r\n//\r\n// ============================================\r\n\r\n(function attachShimmer(root) {\r\n    // -----------------------------------------------\r\n    // Guard: only attach when AndroidComponents exists\r\n    // -----------------------------------------------\r\n    if (!root.AndroidComponents) {\r\n        console.warn('[Shimmer] AndroidComponents not found on window. Attach after AndroidComponents loads.');\r\n        return;\r\n    }\r\n\r\n    const { dp, applyStyles } = root.AndroidLayouts?.utils || {};\r\n    const { injectStyles } = root.AndroidComponents.utils;\r\n\r\n    // -----------------------------------------------\r\n    // Inject the keyframe animation once\r\n    // -----------------------------------------------\r\n    injectStyles('shimmer', `\r\n        @keyframes android-shimmer-sweep {\r\n            0%   { background-position: -200% 0; }\r\n            100% { background-position: 200% 0; }\r\n        }\r\n        /* utility: stack multiple shimmers vertically with a gap */\r\n        .shimmer-group {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 10px;\r\n            width: 100%;\r\n        }\r\n        .shimmer-group-row {\r\n            display: flex;\r\n            flex-direction: row;\r\n            align-items: center;\r\n            gap: 10px;\r\n            width: 100%;\r\n        }\r\n    `);\r\n\r\n    // -----------------------------------------------\r\n    // Core Shimmer factory\r\n    // -----------------------------------------------\r\n    const Shimmer = (props = {}) => {\r\n        const {\r\n            width        = 100,          // number (dp) or 'match_parent'\r\n            height       = 16,           // number (dp)\r\n            borderRadius = 4,            // number (dp) or [tl, tr, br, bl]\r\n            color        = 'var(--md-surface-variant)',   // base bg\r\n            highlightColor = 'var(--md-surface-container-highest)', // sweep color\r\n            duration     = 1400,         // animation duration ms\r\n            angle        = 30,           // gradient angle deg\r\n            intensity    = 0.7,          // 0–1, highlight opacity\r\n            margin,                      // number or array → dp()\r\n            weight,                      // flex weight\r\n            alignSelf,\r\n            className    = '',\r\n            id\r\n        } = props;\r\n\r\n        // --- element ---\r\n        const el = document.createElement('div');\r\n        if (id) el.id = id;\r\n        if (className) el.className = className;\r\n\r\n        // --- border-radius ---\r\n        let radiusCSS;\r\n        if (Array.isArray(borderRadius)) {\r\n            radiusCSS = borderRadius.map(v => dp(v)).join(' ');\r\n        } else {\r\n            radiusCSS = dp(borderRadius);\r\n        }\r\n\r\n        // --- inline styles applied via applyStyles (mirrors rest of lib) ---\r\n        const styles = {\r\n            borderRadius: radiusCSS,\r\n            overflow:     'hidden',\r\n            flexShrink:   '0',\r\n            height:       dp(height),\r\n            // background and animation are set below as raw style\r\n        };\r\n\r\n        if (width === 'match_parent') {\r\n            styles.width = '100%';\r\n        } else {\r\n            styles.width = dp(width);\r\n        }\r\n\r\n        if (margin)     styles.margin    = dp(margin);\r\n        if (weight)     styles.flex      = weight;\r\n        if (alignSelf)  styles.alignSelf = alignSelf;\r\n\r\n        applyStyles(el, styles);\r\n\r\n        // --- shimmer gradient + animation (set directly; applyStyles doesn't handle\r\n        //     multi-value background shorthand or animation cleanly) ---\r\n        const rad = angle;\r\n        el.style.background = [\r\n            `linear-gradient(`,\r\n            `  ${rad}deg,`,\r\n            `  ${color} 0%,`,\r\n            `  ${color} 35%,`,\r\n            `  ${highlightColor} 50%,`,\r\n            `  ${color} 65%,`,\r\n            `  ${color} 100%`,\r\n            `)`\r\n        ].join('');\r\n        el.style.backgroundSize  = '200% 100%';\r\n        el.style.animation       = `android-shimmer-sweep ${duration}ms linear infinite`;\r\n\r\n        // --- public API ---\r\n        return {\r\n            getElement: () => el,\r\n\r\n            /** live-update any prop; re-applies everything that changed */\r\n            update(newProps) {\r\n                // simple recursive merge then re-render is cheap for a single div\r\n                Object.assign(props, newProps);\r\n\r\n                // re-derive\r\n                const w = props.width ?? 100;\r\n                const h = props.height ?? 16;\r\n                const br = props.borderRadius ?? 4;\r\n                const c = props.color ?? 'var(--md-surface-variant)';\r\n                const hc = props.highlightColor ?? 'var(--md-surface-container-highest)';\r\n                const dur = props.duration ?? 1400;\r\n                const ang = props.angle ?? 30;\r\n\r\n                el.style.width          = w === 'match_parent' ? '100%' : dp(w);\r\n                el.style.height         = dp(h);\r\n                el.style.borderRadius   = Array.isArray(br) ? br.map(v => dp(v)).join(' ') : dp(br);\r\n                el.style.background     = `linear-gradient(${ang}deg, ${c} 0%, ${c} 35%, ${hc} 50%, ${c} 65%, ${c} 100%)`;\r\n                el.style.backgroundSize = '200% 100%';\r\n                el.style.animationDuration = `${dur}ms`;\r\n            },\r\n\r\n            /** pause / resume the animation */\r\n            setPaused(paused) {\r\n                el.style.animationPlayState = paused ? 'paused' : 'running';\r\n            }\r\n        };\r\n    };\r\n\r\n    // -----------------------------------------------\r\n    // ShimmerPreset  —  ready-made skeleton layouts\r\n    // -----------------------------------------------\r\n    const ShimmerPreset = {\r\n        /**\r\n         * A typical card skeleton:\r\n         *   ┌─────────────────────┐\r\n         *   │  ████████████████   │  <- image area\r\n         *   │  ██████             │  <- title line\r\n         *   │  ████████████       │  <- subtitle line\r\n         *   └─────────────────────┘\r\n         */\r\n        card({ width = 'match_parent', color, highlightColor } = {}) {\r\n            const shared = {};\r\n            if (color)          shared.color          = color;\r\n            if (highlightColor) shared.highlightColor = highlightColor;\r\n\r\n            const group = document.createElement('div');\r\n            group.className = 'shimmer-group';\r\n            if (width === 'match_parent') group.style.width = '100%';\r\n            else                          group.style.width  = dp(width);\r\n\r\n            // image block\r\n            group.appendChild(Shimmer({ ...shared, width: 'match_parent', height: 160, borderRadius: 8 }).getElement());\r\n            // title\r\n            group.appendChild(Shimmer({ ...shared, width: '60%',          height: 18,  borderRadius: 4 }).getElement());\r\n            // subtitle\r\n            group.appendChild(Shimmer({ ...shared, width: '85%',          height: 14,  borderRadius: 4 }).getElement());\r\n\r\n            return { getElement: () => group };\r\n        },\r\n\r\n        /**\r\n         * A row of avatar + two text lines (common list-item skeleton)\r\n         *   ○  ████████████\r\n         *      ██████\r\n         */\r\n        listItem({ width = 'match_parent', color, highlightColor } = {}) {\r\n            const shared = {};\r\n            if (color)          shared.color          = color;\r\n            if (highlightColor) shared.highlightColor = highlightColor;\r\n\r\n            const row = document.createElement('div');\r\n            row.className = 'shimmer-group-row';\r\n            if (width === 'match_parent') row.style.width = '100%';\r\n            else                          row.style.width  = dp(width);\r\n\r\n            // avatar circle\r\n            row.appendChild(Shimmer({ ...shared, width: 44, height: 44, borderRadius: 22 }).getElement());\r\n\r\n            // text column\r\n            const col = document.createElement('div');\r\n            col.className = 'shimmer-group';\r\n            col.style.flex = '1';\r\n            col.appendChild(Shimmer({ ...shared, width: '70%', height: 16, borderRadius: 4 }).getElement());\r\n            col.appendChild(Shimmer({ ...shared, width: '45%', height: 12, borderRadius: 4 }).getElement());\r\n            row.appendChild(col);\r\n\r\n            return { getElement: () => row };\r\n        },\r\n\r\n        /**\r\n         * A single text-line skeleton (handy for inline use)\r\n         */\r\n        textLine({ width = '100%', height = 14, color, highlightColor } = {}) {\r\n            const shared = {};\r\n            if (color)          shared.color          = color;\r\n            if (highlightColor) shared.highlightColor = highlightColor;\r\n\r\n            return Shimmer({ ...shared, width, height, borderRadius: 4 });\r\n        },\r\n\r\n        /**\r\n         * A grid of equal-size card shimmers\r\n         *   ┌────┐ ┌────┐ ┌────┐\r\n         *   │    │ │    │ │    │\r\n         *   └────┘ └────┘ └────┘\r\n         */\r\n        grid({ columns = 2, cardHeight = 180, gap = 12, color, highlightColor } = {}) {\r\n            const shared = {};\r\n            if (color)          shared.color          = color;\r\n            if (highlightColor) shared.highlightColor = highlightColor;\r\n\r\n            const grid = document.createElement('div');\r\n            grid.style.display        = 'grid';\r\n            grid.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;\r\n            grid.style.gap            = dp(gap);\r\n            grid.style.width          = '100%';\r\n\r\n            for (let i = 0; i < columns; i++) {\r\n                grid.appendChild(Shimmer({ ...shared, width: 'match_parent', height: cardHeight, borderRadius: 12 }).getElement());\r\n            }\r\n\r\n            return { getElement: () => grid };\r\n        }\r\n    };\r\n\r\n    // -----------------------------------------------\r\n    // Attach to AndroidComponents\r\n    // -----------------------------------------------\r\n    root.AndroidComponents.Shimmer        = Shimmer;\r\n    root.AndroidComponents.ShimmerPreset  = ShimmerPreset;\r\n\r\n})(window);\r\n"]}