@fluid-app/rep-widgets 0.1.5 → 0.1.7

package/dist/chunk-ZV3W3LUO.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/widgets/NestedWidget.tsx"],"names":["useRef","jsxs","jsx","MediaRenderer","getMediaPropsFromShareable","gapValues","ScrollArrows","getFontSizeField","getColorField","getPaddingField","getBorderRadiusField","getGapField"],"mappings":";;;;;;;;;AAsDO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,YAAA,GAAe,IAAA;AAAA,EACf,SAAA,GAAY,qBAAA;AAAA,EACZ,aAAa,EAAC;AAAA,EACd,GAAA,GAAM,IAAA;AAAA,EACN,OAAA,GAAU,CAAA;AAAA,EACV,YAAA,GAAe,IAAA;AAAA,EACf,kBAAA,GAAqB,GAAA;AAAA,EACrB,aAAA,GAAgB,IAAA;AAAA,EAChB,UAAA,GAAa,YAAA;AAAA,EACb,cAAA,GAAiB,EAAE,UAAA,EAAY,MAAA,EAAQ,UAAU,QAAA,EAAS;AAAA,EAC1D,eAAA,GAAkB,YAAA;AAAA,EAClB,UAAA,GAAa;AAAA,IACX,IAAA,EAAM,OAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACT;AAAA,EACA,cAAA,GAAiB,IAAA;AAAA,EACjB,WAAA,GAAc,UAAA;AAAA,EACd,gBAAA,GAAmB,EAAA;AAAA,EACnB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsB;AACpB,EAAA,MAAM,kBAAA,GAAqBA,aAAuB,IAAI,CAAA;AAEtD,EAAA,MAAM,cAAA,GAAiB,CAAC,SAAA,KAA+B;AACrD,IAAA,MAAM,YAAY,kBAAA,CAAmB,OAAA;AACrC,IAAA,IAAI,CAAC,SAAA,EAAW;AAGhB,IAAA,MAAM,cAAc,UAAA,CAAW,gBAAA,CAAiB,SAAS,CAAA,CAAE,GAAG,CAAA,IAAK,CAAA;AACnE,IAAA,MAAM,YAAY,kBAAA,GAAqB,IAAA;AACvC,IAAA,MAAM,eAAe,SAAA,GAAY,WAAA;AAEjC,IAAA,SAAA,CAAU,QAAA,CAAS;AAAA,MACjB,MACE,SAAA,CAAU,UAAA,IACT,SAAA,KAAc,MAAA,GAAS,eAAe,CAAC,YAAA,CAAA;AAAA,MAC1C,QAAA,EAAU;AAAA,KACX,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,MAAM,cAAA,GAAiB,WAAW,MAAA,GAAS,CAAA;AAE3C,EAAA,MAAM,qBAAA,GAAwB;AAAA,IAC5B,IAAA,EAAM,WAAA;AAAA,IACN,MAAA,EAAQ,aAAA;AAAA,IACR,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,MAAM,eAAA,GAAkB,WAAW,KAAA,IAAS,YAAA;AAC5C,EAAA,MAAM,mBACH,UAAA,CAAW,QAAA,EAAU,SAAA,IAAa,UAAA,CAAW,UAAU,QAAA,KACxD,UAAA,CAAW,IAAA,KAAS,OAAA,GAChB,OAAO,UAAA,CAAW,QAAA,CAAS,aAAa,UAAA,CAAW,QAAA,CAAS,QAAQ,CAAA,CAAA,CAAA,GACpE,MAAA;AAEN,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,4BAA4B,OAAO,CAAA,SAAA,EAAY,YAAY,CAAA,IAAA,EAAO,eAAe,IAAI,SAAS,CAAA,CAAA;AAAA,MACxG,GAAG,KAAA;AAAA,MACJ,KAAA,EAAO;AAAA,QACL,SAAA,EAAW,GAAG,kBAAkB,CAAA,EAAA,CAAA;AAAA,QAChC;AAAA,OACF;AAAA,MAGA,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,yCAAyC,YAAY,CAAA,CAAA;AAAA,YAChE,KAAA,EAAO;AAAA,cACL,KAAA,EAAO,GAAG,kBAAkB,CAAA,EAAA;AAAA,aAC9B;AAAA,YAGA,QAAA,kBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAA,EACb,QAAA,EAAA;AAAA,8BAAAC,cAAA;AAAA,gBAACC,+BAAA;AAAA,gBAAA;AAAA,kBACE,GAAI,QAAA,GAAWC,4CAAA,CAA2B,QAAQ,IAAI;AAAC;AAAA,eAC1D;AAAA,cAGC,cAAA,oBACCF,cAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,CAAA,0CAAA,EACT,WAAA,KAAgB,UAAA,GACZ,+CACA,UACN,CAAA,CAAA;AAAA,kBACA,KAAA,EAAO;AAAA,oBACL,OAAA,EAAA,CACG,MAAA,CAAO,MAAA,CAAO,gBAAgB,CAAA,CAAE,QAAQ,GAAA,EAAK,EAAE,CAAC,CAAA,IAAK,EAAA,IACtD;AAAA;AACJ;AAAA,eACF;AAAA,cAAA,CAIC,YAAA,IAAgB,aAAc,cAAA,qBAC/BD,eAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,wBAAwB,qBAAA,CAAsB,cAAA,EAAgB,cAAc,MAAM,CAAC,CAAA,GAAA,EAAM,OAAO,CAAA,CAAA,EACzG,cAAA,CAAe,aAAa,KAAA,GACxB,CAAA,SAAA,EAAY,OAAO,CAAA,CAAA,GACnB,cAAA,CAAe,aAAa,QAAA,GAC1B,0BAAA,GACA,CAAA,YAAA,EAAe,OAAO,CAAA,CAC9B,CAAA,CAAA;AAAA,kBAEC,QAAA,EAAA;AAAA,oBAAA,YAAA,IAAgB,SAAA,oBACfC,cAAA;AAAA,sBAAC,IAAA;AAAA,sBAAA;AAAA,wBACC,WAAW,CAAA,6BAAA,EAAgC,UAAU,SAAS,aAAA,KAAkB,IAAA,GAAO,SAAS,aAAa,CAAA,CAAA;AAAA,wBAE5G,QAAA,EAAA;AAAA;AAAA,qBACH;AAAA,oBAID,kCACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,CAAA,GAAA,EAAM,OAAO,CAAA,WAAA,CAAA,EAC3B,QAAA,kBAAAA,cAAA;AAAA,sBAAC,KAAA;AAAA,sBAAA;AAAA,wBACC,SAAA,EAAW,CAAA,yBAAA,EAA4BG,2BAAA,CAAU,GAAG,CAAC,CAAA,eAAA,CAAA;AAAA,wBAEpD,QAAA,EAAA,UAAA,CAAW,GAAA,CAAI,CAAC,SAAA,qBACfH,cAAA;AAAA,0BAAC,KAAA;AAAA,0BAAA;AAAA,4BAEC,SAAA,EAAU,qCAAA;AAAA,4BAEV,QAAA,kBAAAA,cAAA;AAAA,8BAAC,KAAA;AAAA,8BAAA;AAAA,gCACC,SAAA,EAAW,2CAA2C,YAAY,CAAA,CAAA;AAAA,gCAElE,QAAA,kBAAAA,cAAA;AAAA,kCAACC,+BAAA;AAAA,kCAAA;AAAA,oCACE,GAAGC,6CAA2B,SAAS;AAAA;AAAA;AAC1C;AAAA;AACF,2BAAA;AAAA,0BATK,SAAA,CAAU;AAAA,yBAWlB;AAAA;AAAA,qBACH,EACF;AAAA;AAAA;AAAA;AAEJ,aAAA,EAEJ;AAAA;AAAA,SACF;AAAA,QAGC,cAAA,oBACCH,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,+DAA+D,OAAO,CAAA,CAAA;AAAA,YAEjF,QAAA,EAAA;AAAA,8BAAAC,cAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,GAAA,EAAK,kBAAA;AAAA,kBACL,SAAA,EAAW,CAAA,yCAAA,EAA4CG,2BAAA,CAAU,GAAG,CAAC,CAAA,CAAA;AAAA,kBACrE,KAAA,EAAO,EAAE,cAAA,EAAgB,aAAA,EAAc;AAAA,kBAEtC,QAAA,EAAA,UAAA,CAAW,GAAA,CAAI,CAAC,SAAA,qBACfJ,eAAA;AAAA,oBAAC,KAAA;AAAA,oBAAA;AAAA,sBAEC,SAAA,EAAU,qBAAA;AAAA,sBACV,KAAA,EAAO;AAAA,wBACL,KAAA,EAAO,CAAA,EAAG,kBAAA,GAAqB,IAAI,CAAA,EAAA,CAAA;AAAA,wBACnC,eAAA,EAAiB;AAAA,uBACnB;AAAA,sBAEA,QAAA,EAAA;AAAA,wCAAAC,cAAA;AAAA,0BAAC,KAAA;AAAA,0BAAA;AAAA,4BACC,SAAA,EAAW,6BAA6B,YAAY,CAAA,gBAAA,CAAA;AAAA,4BAEpD,QAAA,kBAAAA,cAAA,CAACC,+BAAA,EAAA,EAAe,GAAGC,4CAAA,CAA2B,SAAS,CAAA,EAAG;AAAA;AAAA,yBAC5D;AAAA,wCACAH,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,CAAA,uBAAA,EAA0B,eAAe,CAAA,CAAA,EACxD,QAAA,EAAA;AAAA,0CAAAC,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,SAAA,CAAU,SAAS,EAAA,EAAG,CAAA;AAAA,0CAC/CA,cAAA,CAAC,OAAE,SAAA,EAAU,UAAA,EACR,qBAAU,aAAA,IAA4B,SAAA,CAAU,UACjD,EAAA,EACJ;AAAA,yBAAA,EACF;AAAA;AAAA,qBAAA;AAAA,oBAlBK,SAAA,CAAU;AAAA,mBAoBlB;AAAA;AAAA,eACH;AAAA,8BAGAA,cAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,CAAA,yFAAA,CAAA;AAAA,kBAEX,QAAA,kBAAAA,cAAA;AAAA,oBAACI,8BAAA;AAAA,oBAAA;AAAA,sBACC,UAAA,EAAY,MAAM,cAAA,CAAe,MAAM,CAAA;AAAA,sBACvC,MAAA,EAAQ,MAAM,cAAA,CAAe,MAAM;AAAA;AAAA;AACrC;AAAA;AACF;AAAA;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ;AAEO,IAAM,0BAAA,GAAmD;AAAA,EAC9D,UAAA,EAAY,cAAA;AAAA,EACZ,WAAA,EAAa,eAAA;AAAA,EACb,UAAA,EAAY;AAAA,IACV,EAAE,EAAA,EAAI,SAAA,EAAW,KAAA,EAAO,SAAA,EAAU;AAAA,IAClC,EAAE,EAAA,EAAI,MAAA,EAAQ,KAAA,EAAO,MAAA;AAAO,GAC9B;AAAA,EACA,qBAAA,EAAuB,CAAC,YAAY,CAAA;AAAA,EACpC,MAAA,EAAQ;AAAA;AAAA,IAEN;AAAA,MACE,GAAA,EAAK,UAAA;AAAA,MACL,KAAA,EAAO,eAAA;AAAA,MACP,IAAA,EAAM,UAAA;AAAA,MACN,WAAA,EAAa,uDAAA;AAAA,MACb,YAAA,EAAc,CAAC,QAAQ,CAAA;AAAA,MACvB,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA;AAAA,IAEA;AAAA,MACE,GAAA,EAAK,cAAA;AAAA,MACL,KAAA,EAAO,cAAA;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,WAAA,EAAa,mDAAA;AAAA,MACb,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,GAAA,EAAK,WAAA;AAAA,MACL,KAAA,EAAO,OAAA;AAAA,MACP,IAAA,EAAM,MAAA;AAAA,MACN,WAAA,EAAa,6CAAA;AAAA,MACb,YAAA,EAAc,qBAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,OAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACvB;AAAA,IACAC,kCAAA,CAAiB;AAAA,MACf,KAAA,EAAO,iBAAA;AAAA,MACP,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,eAAA;AAAA,MACL,WAAA,EAAa,gCAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,OAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACtB,CAAA;AAAA,IACDC,+BAAA,CAAc;AAAA,MACZ,YAAA,EAAc,YAAA;AAAA,MACd,GAAA,EAAK,YAAA;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,WAAA,EAAa,4BAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,OAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACtB,CAAA;AAAA;AAAA,IAED;AAAA,MACE,GAAA,EAAK,oBAAA;AAAA,MACL,KAAA,EAAO,2BAAA;AAAA,MACP,IAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAa,iDAAA;AAAA,MACb,GAAA,EAAK,GAAA;AAAA,MACL,GAAA,EAAK,GAAA;AAAA,MACL,IAAA,EAAM,EAAA;AAAA,MACN,YAAA,EAAc,GAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,GAAA,EAAK,WAAA;AAAA,MACL,IAAA,EAAM,WAAA;AAAA,MACN,KAAA,EAAO,WAAA;AAAA,MACP,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,GAAA,EAAK,gBAAA;AAAA,MACL,KAAA,EAAO,mBAAA;AAAA,MACP,IAAA,EAAM,WAAA;AAAA,MACN,WAAA,EAAa,mDAAA;AAAA,MACb,YAAA,EAAc,EAAE,UAAA,EAAY,MAAA,EAAQ,UAAU,QAAA,EAAS;AAAA,MACvD,OAAA,EAAS;AAAA,QACP,iBAAA,EAAmB,IAAA;AAAA,QACnB,eAAA,EAAiB;AAAA,OACnB;AAAA,MACA,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,GAAA,EAAK,YAAA;AAAA,MACL,IAAA,EAAM,WAAA;AAAA,MACN,KAAA,EAAO,WAAA;AAAA,MACP,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACAC,iCAAA,CAAgB;AAAA,MACd,YAAA,EAAc,CAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,SAAA;AAAA,MACP,WAAA,EAAa,oCAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACDC,sCAAA,CAAqB;AAAA,MACnB,YAAA,EAAc,IAAA;AAAA,MACd,KAAA,EAAO,eAAA;AAAA,MACP,GAAA,EAAK,cAAA;AAAA,MACL,WAAA,EAAa,gCAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACD;AAAA,MACE,GAAA,EAAK,gBAAA;AAAA,MACL,KAAA,EAAO,gBAAA;AAAA,MACP,IAAA,EAAM,SAAA;AAAA,MACN,WAAA,EACE,qEAAA;AAAA,MACF,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA,IACA;AAAA,MACE,GAAA,EAAK,aAAA;AAAA,MACL,KAAA,EAAO,cAAA;AAAA,MACP,IAAA,EAAM,aAAA;AAAA,MACN,WAAA,EAAa,wBAAA;AAAA,MACb,YAAA,EAAc,UAAA;AAAA,MACd,OAAA,EAAS;AAAA,QACP,EAAE,KAAA,EAAO,OAAA,EAAS,KAAA,EAAO,OAAA,EAAQ;AAAA,QACjC,EAAE,KAAA,EAAO,UAAA,EAAY,KAAA,EAAO,UAAA;AAAW,OACzC;AAAA,MACA,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,QAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACvB;AAAA,IACA;AAAA,MACE,GAAA,EAAK,kBAAA;AAAA,MACL,KAAA,EAAO,mBAAA;AAAA,MACP,IAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAa,gCAAA;AAAA,MACb,GAAA,EAAK,CAAA;AAAA,MACL,GAAA,EAAK,GAAA;AAAA,MACL,IAAA,EAAM,CAAA;AAAA,MACN,YAAA,EAAc,EAAA;AAAA,MACd,IAAA,EAAM,GAAA;AAAA,MACN,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO,QAAA;AAAA,MACP,mBAAA,EAAqB;AAAA,KACvB;AAAA;AAAA,IAEAC,6BAAA,CAAY;AAAA,MACV,KAAA,EAAO,KAAA;AAAA,MACP,YAAA,EAAc,IAAA;AAAA,MACd,GAAA,EAAK,KAAA;AAAA,MACL,WAAA,EAAa,gCAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACDH,+BAAA,CAAc;AAAA,MACZ,YAAA,EAAc,YAAA;AAAA,MACd,GAAA,EAAK,iBAAA;AAAA,MACL,KAAA,EAAO,mBAAA;AAAA,MACP,WAAA,EAAa,+BAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACR,CAAA;AAAA,IACD;AAAA,MACE,IAAA,EAAM,YAAA;AAAA,MACN,YAAA,EAAc,YAAA;AAAA,MACd,GAAA,EAAK,YAAA;AAAA,MACL,KAAA,EAAO,YAAA;AAAA,MACP,WAAA,EAAa,6CAAA;AAAA,MACb,GAAA,EAAK,SAAA;AAAA,MACL,KAAA,EAAO;AAAA,KACT;AAAA;AAAA,IAEA;AAAA,MACE,GAAA,EAAK,YAAA;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,IAAA,EAAM,YAAA;AAAA,MACN,WAAA,EAAa,6CAAA;AAAA,MACb,GAAA,EAAK,MAAA;AAAA,MACL,KAAA,EAAO;AAAA;AACT,GACF;AAAA;AAAA,EAEA,gBAAA,EAAkB;AAAA,IAChB,WAAA,EAAa,kCAAA;AAAA,IACb,MAAA,EAAQ;AAAA,MACN;AAAA,QACE,GAAA,EAAK,OAAA;AAAA,QACL,KAAA,EAAO,cAAA;AAAA,QACP,IAAA,EAAM,MAAA;AAAA,QACN,WAAA,EAAa;AAAA;AACf;AACF;AAEJ","file":"chunk-ZV3W3LUO.cjs","sourcesContent":["import { useRef, type ComponentProps } from \"react\";\nimport {\n  MediaRenderer,\n  getMediaPropsFromShareable,\n} from \"../components/MediaRenderer\";\nimport type {\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n  AlignOptions,\n  GapOptions,\n  BackgroundValue,\n} from \"@fluid-app/rep-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getGapField,\n  getPaddingField,\n  gapValues,\n} from \"../core/fields\";\nimport { ScrollArrows } from \"../ui/scroll-arrows\";\nimport { type ShareableItem } from \"@fluid-app/rep-core/types\";\n\ntype NestedWidgetProps = ComponentProps<\"div\"> & {\n  // Content\n  resource?: ShareableItem;\n  titleEnabled?: boolean;\n  titleText?: string;\n  shareables?: ShareableItem[];\n\n  // Layout\n  gap?: GapOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n  primaryMediaHeight?: number;\n\n  // Title styling\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n  titleAlignment?: AlignOptions;\n\n  // Nested media styling\n  nestedTextColor?: ColorOptions;\n  background?: BackgroundValue;\n\n  // Overlay\n  overlayEnabled?: boolean;\n  overlayType?: \"solid\" | \"gradient\";\n  overlayIntensity?: number;\n};\n\nexport function NestedWidget({\n  resource,\n  titleEnabled = true,\n  titleText = \"Featured Collection\",\n  shareables = [],\n  gap = \"md\",\n  padding = 4,\n  borderRadius = \"md\",\n  primaryMediaHeight = 400,\n  titleFontSize = \"xl\",\n  titleColor = \"background\",\n  titleAlignment = { horizontal: \"left\", vertical: \"bottom\" },\n  nestedTextColor = \"foreground\",\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  overlayEnabled = true,\n  overlayType = \"gradient\",\n  overlayIntensity = 50,\n  className,\n  ...props\n}: NestedWidgetProps) {\n  const scrollContainerRef = useRef<HTMLDivElement>(null);\n\n  const scrollByAmount = (direction: \"prev\" | \"next\") => {\n    const container = scrollContainerRef.current;\n    if (!container) return;\n\n    // Get the actual gap from computed styles (supports theme variations)\n    const computedGap = parseFloat(getComputedStyle(container).gap) || 0;\n    const itemWidth = primaryMediaHeight * 0.75;\n    const scrollAmount = itemWidth + computedGap;\n\n    container.scrollTo({\n      left:\n        container.scrollLeft +\n        (direction === \"next\" ? scrollAmount : -scrollAmount),\n      behavior: \"smooth\",\n    });\n  };\n\n  const hasNestedMedia = shareables.length > 0;\n\n  const titleAlignmentClasses = {\n    left: \"text-left\",\n    center: \"text-center\",\n    right: \"text-right\",\n  };\n\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n\n  return (\n    <div\n      className={`@container flex w-full p-${padding} rounded-${borderRadius} bg-${backgroundColor} ${className}`}\n      {...props}\n      style={{\n        maxHeight: `${primaryMediaHeight}px`,\n        backgroundImage: backgroundImage,\n      }}\n    >\n      {/* Primary Media Container - Full width on mobile, fixed on desktop */}\n      <div\n        className={`overflow-hidden @md:flex-none rounded-${borderRadius}`}\n        style={{\n          width: `${primaryMediaHeight}px`,\n        }}\n      >\n        {/* Primary Media */}\n        <div className=\"relative h-full w-full\">\n          <MediaRenderer\n            {...(resource ? getMediaPropsFromShareable(resource) : {})}\n          />\n\n          {/* Overlay */}\n          {overlayEnabled && (\n            <div\n              className={`pointer-events-none absolute inset-0 z-10 ${\n                overlayType === \"gradient\"\n                  ? \"bg-gradient-to-t from-black to-transparent\"\n                  : \"bg-black\"\n              }`}\n              style={{\n                opacity:\n                  (Number(String(overlayIntensity).replace(\"%\", \"\")) || 50) /\n                  100,\n              }}\n            />\n          )}\n\n          {/* Title and Mobile Nested Media */}\n          {((titleEnabled && titleText) || hasNestedMedia) && (\n            <div\n              className={`absolute z-20 w-full ${titleAlignmentClasses[titleAlignment?.horizontal ?? \"left\"]} p-${padding} ${\n                titleAlignment.vertical === \"top\"\n                  ? `top-0 pt-${padding}`\n                  : titleAlignment.vertical === \"center\"\n                    ? \"top-1/2 -translate-y-1/2\"\n                    : `bottom-0 pb-${padding}`\n              }`}\n            >\n              {titleEnabled && titleText && (\n                <h2\n                  className={`leading-tight font-bold text-${titleColor} text-${titleFontSize === \"md\" ? \"base\" : titleFontSize}`}\n                >\n                  {titleText}\n                </h2>\n              )}\n\n              {/* Mobile: Products overlay inside primary media */}\n              {hasNestedMedia && (\n                <div className={`pt-${padding} @md:hidden`}>\n                  <div\n                    className={`flex overflow-x-auto gap-${gapValues[gap]} bg-transparent`}\n                  >\n                    {shareables.map((shareable) => (\n                      <div\n                        key={shareable.id}\n                        className=\"flex shrink-0 flex-col items-center\"\n                      >\n                        <div\n                          className={`aspect-3/4 h-40 overflow-hidden rounded-${borderRadius}`}\n                        >\n                          <MediaRenderer\n                            {...getMediaPropsFromShareable(shareable)}\n                          />\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Desktop: Products Container - Single row beside primary media */}\n      {hasNestedMedia && (\n        <div\n          className={`relative hidden min-w-0 self-stretch @md:flex @md:flex-1 px-${padding}`}\n        >\n          <div\n            ref={scrollContainerRef}\n            className={`flex h-full flex-row overflow-x-auto gap-${gapValues[gap]}`}\n            style={{ scrollSnapType: \"x mandatory\" }}\n          >\n            {shareables.map((shareable) => (\n              <div\n                key={shareable.id}\n                className=\"flex flex-col gap-1\"\n                style={{\n                  width: `${primaryMediaHeight * 0.75}px`,\n                  scrollSnapAlign: \"start\",\n                }}\n              >\n                <div\n                  className={`aspect-3/4 h-full rounded-${borderRadius} overflow-hidden`}\n                >\n                  <MediaRenderer {...getMediaPropsFromShareable(shareable)} />\n                </div>\n                <span className={`flex-none text-sm text-${nestedTextColor}`}>\n                  <p className=\"truncate\">{shareable.title || \"\"}</p>\n                  <p className=\"truncate\">\n                    {((shareable.display_price as string) ?? shareable.price) ||\n                      \"\"}\n                  </p>\n                </span>\n              </div>\n            ))}\n          </div>\n\n          {/* Navigation arrows */}\n          <div\n            className={`absolute inset-x-0 top-1/2 flex w-full -translate-y-1/2 items-center justify-between px-8`}\n          >\n            <ScrollArrows\n              onPrevious={() => scrollByAmount(\"prev\")}\n              onNext={() => scrollByAmount(\"next\")}\n            />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const nestedWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"NestedWidget\",\n  displayName: \"Nested Widget\",\n  tabsConfig: [\n    { id: \"styling\", label: \"Styling\" },\n    { id: \"data\", label: \"Data\" },\n  ],\n  dataSourceTargetProps: [\"shareables\"],\n  fields: [\n    // Content tab - Resource group\n    {\n      key: \"resource\",\n      label: \"Primary Media\",\n      type: \"resource\",\n      description: \"Select the primary media displayed in the large panel\",\n      allowedTypes: [\"Medium\"],\n      tab: \"styling\",\n      group: \"Content\",\n    },\n    // Content tab - Title group\n    {\n      key: \"titleEnabled\",\n      label: \"Widget Title\",\n      type: \"boolean\",\n      description: \"Enable the title displayed over the primary media\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Title\",\n    },\n    {\n      key: \"titleText\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Main title displayed over the primary media\",\n      defaultValue: \"Featured Collection\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    },\n    getFontSizeField({\n      label: \"Title Font Size\",\n      defaultValue: \"xl\",\n      key: \"titleFontSize\",\n      description: \"Font size for the widget title\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      defaultValue: \"background\",\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the widget title\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    // Styling tab - Design group\n    {\n      key: \"primaryMediaHeight\",\n      label: \"Primary Media Height (px)\",\n      type: \"number\",\n      description: \"Height of the primary media container in pixels\",\n      min: 200,\n      max: 800,\n      step: 10,\n      defaultValue: 400,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"separator\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"titleAlignment\",\n      label: \"Content Alignment\",\n      type: \"alignment\",\n      description: \"Alignment of the content inside the primary media\",\n      defaultValue: { horizontal: \"left\", vertical: \"bottom\" },\n      options: {\n        horizontalEnabled: true,\n        verticalEnabled: true,\n      },\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"separator2\",\n      type: \"separator\",\n      label: \"Separator\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getPaddingField({\n      defaultValue: 4,\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"Padding used throughout the widget\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getBorderRadiusField({\n      defaultValue: \"md\",\n      label: \"Border Radius\",\n      key: \"borderRadius\",\n      description: \"Rounded corners for the widget\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    {\n      key: \"overlayEnabled\",\n      label: \"Enable Overlay\",\n      type: \"boolean\",\n      description:\n        \"Add a dark overlay to the primary media for better text readability\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    {\n      key: \"overlayType\",\n      label: \"Overlay Type\",\n      type: \"buttonGroup\",\n      description: \"Type of overlay effect\",\n      defaultValue: \"gradient\",\n      options: [\n        { label: \"Solid\", value: \"solid\" },\n        { label: \"Gradient\", value: \"gradient\" },\n      ],\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyToBeTrue: \"overlayEnabled\",\n    },\n    {\n      key: \"overlayIntensity\",\n      label: \"Overlay Intensity\",\n      type: \"slider\",\n      description: \"Opacity of the overlay (0-100)\",\n      min: 0,\n      max: 100,\n      step: 5,\n      defaultValue: 50,\n      unit: \"%\",\n      tab: \"styling\",\n      group: \"Design\",\n      requiresKeyToBeTrue: \"overlayEnabled\",\n    },\n    // Styling tab - Nested Media Styling group\n    getGapField({\n      label: \"Gap\",\n      defaultValue: \"md\",\n      key: \"gap\",\n      description: \"Gap between nested media items\",\n      tab: \"styling\",\n      group: \"Nested Design\",\n    }),\n    getColorField({\n      defaultValue: \"foreground\",\n      key: \"nestedTextColor\",\n      label: \"Nested Text Color\",\n      description: \"Color for nested media labels\",\n      tab: \"styling\",\n      group: \"Nested Design\",\n    }),\n    {\n      type: \"background\",\n      defaultValue: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background color for nested media container\",\n      tab: \"styling\",\n      group: \"Nested Design\",\n    },\n    // Data tab\n    {\n      key: \"dataSource\",\n      label: \"Data Source\",\n      type: \"dataSource\",\n      description: \"Configure dynamic data fetching from an API\",\n      tab: \"data\",\n      group: \"Data Configuration\",\n    },\n  ],\n  // Per-item configuration schema for custom data sources\n  itemConfigSchema: {\n    description: \"Configure settings for this item\",\n    fields: [\n      {\n        key: \"title\",\n        label: \"Custom Title\",\n        type: \"text\",\n        description: \"Override the item's title for this widget\",\n      },\n    ],\n  },\n} as const satisfies WidgetPropertySchema;\n"]}