@patterninc/pattern-ui 0.0.0-main.202610232103.2cb6e31ce186 → 0.0.0-main.202610232122.0f2a0d83bcb6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/browser/@patterninc/pattern-ui/artifact/image-artifact/GalleryPanelContent.js +1 -1
  2. package/dist/browser/@patterninc/pattern-ui/artifact/image-artifact/ImageArtifact.js +1 -1
  3. package/dist/browser/@patterninc/pattern-ui/artifact/image-artifact/Lightbox.js +1 -1
  4. package/dist/browser/@patterninc/pattern-ui/feedback-gateway-provider.js +1 -1
  5. package/dist/browser/@patterninc/pattern-ui/feedback-mode.js +1 -1
  6. package/dist/browser/@patterninc/pattern-ui/image-card.js +1 -1
  7. package/dist/browser/@patterninc/pattern-ui/image-compare.js +1 -1
  8. package/dist/browser/@patterninc/pattern-ui/image-grid.js +1 -1
  9. package/dist/browser/@patterninc/pattern-ui/marketplace-pdp-card.js +1 -1
  10. package/dist/browser/@patterninc/pattern-ui/trim-text-fn.js +1 -0
  11. package/dist/browser/@patterninc/pattern-ui/trim-text.js +1 -0
  12. package/dist/browser/_chunks/{FeedbackMode-DXgYhMCF.js → FeedbackMode-DscGSYlx.js} +1 -1
  13. package/dist/browser/_chunks/ImageCompare-CCyEzB62.js +1 -0
  14. package/dist/browser/_chunks/{ImageGrid-Drlg6iho.js → ImageGrid-w2ccAgx_.js} +1 -1
  15. package/dist/browser/_chunks/{Lightbox-BLNBf1tQ.js → Lightbox-BJYrdHsA.js} +1 -1
  16. package/dist/browser/_chunks/trim-text-DHZGuJ9c.js +1 -0
  17. package/dist/components/ImageCompare/ImageCompare.js +1 -1
  18. package/dist/components/TrimText/TrimText.js +258 -0
  19. package/dist/lib/utils/trim-text.js +17 -0
  20. package/dist/play-cdn-claude.js +1 -1
  21. package/package.json +9 -1
  22. package/src/components/ActivityCard/ActivityCardContent.tsx +1 -1
  23. package/src/components/ImageCompare/ImageCompare.tsx +3 -2
  24. package/src/components/TrimText/TrimText.tsx +169 -0
  25. package/src/lib/utils/trim-text.ts +13 -0
  26. package/dist/browser/_chunks/ImageCompare-BIeh0KQe.js +0 -1
@@ -1 +1 @@
1
- import{a as e}from"../../../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../../../_chunks/react-CUaU2Z9V.js";import{t as n}from"../../../../_chunks/jsx-runtime-Dgn0yPdi.js";import{t as r}from"../../../../_chunks/dist-BNSTMZct.js";import{t as i}from"../../../../_chunks/GalleryCard-EW9HhNeP.js";import{t as a}from"../../../../_chunks/Lightbox-BLNBf1tQ.js";import{n as o,t as s}from"../../../../_chunks/galleryLayouts-COa9PIJw.js";var c=/* @__PURE__ */ e(n(),1),l=/* @__PURE__ */ e(t(),1);const u={cols:12,rows:8,maxPerGroup:7,heightRatio:1/3},d={cols:8,rows:8,maxPerGroup:7,heightRatio:3/4},f={cols:4,rows:8,maxPerGroup:4,heightRatio:1},p={cols:1,rows:1,maxPerGroup:1,heightRatio:3/4};function m(e){return e>=60?u:e>=40?d:e>=25?f:p}function h(e){let t=window.innerWidth;return t===0?d:t<640?p:m(e/t*100)}function g({images:e,className:t,qaTestId:n=`gallery-panel-content`}){let u=(0,l.useRef)(null),d=(0,l.useRef)(/* @__PURE__ */ new Set),f=(0,l.useRef)(/* @__PURE__ */ new Set),[,p]=(0,l.useState)(0),[m,g]=(0,l.useState)(()=>h(400)),_=(0,l.useRef)(m);(0,l.useEffect)(()=>{let e=u.current;if(!e)return;let t=new ResizeObserver(e=>{let t=h(e[0]?.contentRect.width??0);t!==_.current&&(_.current=t,g(t))});return t.observe(e),()=>t.disconnect()},[]);let v=s(e.length,m.cols,m.rows,m.maxPerGroup),y=o(e.length,m.rows,m.maxPerGroup),b=Math.ceil(e.length/m.maxPerGroup),[x,S]=(0,l.useState)(!1),[C,w]=(0,l.useState)(0),[T,E]=(0,l.useState)(null),D=e.map(e=>({src:e.src,alt:e.alt,title:e.title,description:e.description}));return e.length===0?null:/* @__PURE__ */ (0,c.jsxs)(c.Fragment,{children:[/* @__PURE__ */ (0,c.jsxs)(`div`,{ref:u,className:r(`h-full overflow-x-hidden overflow-y-auto`,t),role:`grid`,"aria-label":`Image gallery`,"qa-test-id":n,children:[/* @__PURE__ */ (0,c.jsx)(`div`,{className:`grid overflow-clip rounded-2xl`,style:{gridTemplateColumns:`repeat(${m.cols}, 1fr)`,gridTemplateRows:`repeat(${y}, 1fr)`,aspectRatio:`1 / ${m.heightRatio*b}`,gap:`4px`},children:e.map((t,n)=>{let r=v[n];return/* @__PURE__ */ (0,c.jsx)(i,{src:t.src,index:n,total:e.length,isLoaded:d.current.has(t.src),isError:f.current.has(t.src),gridColumn:r?.gridColumn,gridRow:r?.gridRow,isHidden:x&&C===n,onLoad:e=>{d.current.has(e)||(d.current.add(e),p(e=>e+1))},onError:e=>{f.current.has(e)||(f.current.add(e),p(e=>e+1))},onClick:(e,t)=>{w(e),E(t),S(!0)}},`${t.src}-${n}`)})}),/* @__PURE__ */ (0,c.jsx)(`div`,{className:`h-16 w-full`,"aria-hidden":`true`})]}),/* @__PURE__ */ (0,c.jsx)(a,{images:D,open:x,onClose:()=>{S(!1),requestAnimationFrame(()=>{document.activeElement instanceof HTMLElement&&document.activeElement.blur()})},initialIndex:C,origin:T})]})}export{g as GalleryPanelContent};
1
+ import{a as e}from"../../../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../../../_chunks/react-CUaU2Z9V.js";import{t as n}from"../../../../_chunks/jsx-runtime-Dgn0yPdi.js";import{t as r}from"../../../../_chunks/dist-BNSTMZct.js";import{t as i}from"../../../../_chunks/GalleryCard-EW9HhNeP.js";import{t as a}from"../../../../_chunks/Lightbox-BJYrdHsA.js";import{n as o,t as s}from"../../../../_chunks/galleryLayouts-COa9PIJw.js";var c=/* @__PURE__ */ e(n(),1),l=/* @__PURE__ */ e(t(),1);const u={cols:12,rows:8,maxPerGroup:7,heightRatio:1/3},d={cols:8,rows:8,maxPerGroup:7,heightRatio:3/4},f={cols:4,rows:8,maxPerGroup:4,heightRatio:1},p={cols:1,rows:1,maxPerGroup:1,heightRatio:3/4};function m(e){return e>=60?u:e>=40?d:e>=25?f:p}function h(e){let t=window.innerWidth;return t===0?d:t<640?p:m(e/t*100)}function g({images:e,className:t,qaTestId:n=`gallery-panel-content`}){let u=(0,l.useRef)(null),d=(0,l.useRef)(/* @__PURE__ */ new Set),f=(0,l.useRef)(/* @__PURE__ */ new Set),[,p]=(0,l.useState)(0),[m,g]=(0,l.useState)(()=>h(400)),_=(0,l.useRef)(m);(0,l.useEffect)(()=>{let e=u.current;if(!e)return;let t=new ResizeObserver(e=>{let t=h(e[0]?.contentRect.width??0);t!==_.current&&(_.current=t,g(t))});return t.observe(e),()=>t.disconnect()},[]);let v=s(e.length,m.cols,m.rows,m.maxPerGroup),y=o(e.length,m.rows,m.maxPerGroup),b=Math.ceil(e.length/m.maxPerGroup),[x,S]=(0,l.useState)(!1),[C,w]=(0,l.useState)(0),[T,E]=(0,l.useState)(null),D=e.map(e=>({src:e.src,alt:e.alt,title:e.title,description:e.description}));return e.length===0?null:/* @__PURE__ */ (0,c.jsxs)(c.Fragment,{children:[/* @__PURE__ */ (0,c.jsxs)(`div`,{ref:u,className:r(`h-full overflow-x-hidden overflow-y-auto`,t),role:`grid`,"aria-label":`Image gallery`,"qa-test-id":n,children:[/* @__PURE__ */ (0,c.jsx)(`div`,{className:`grid overflow-clip rounded-2xl`,style:{gridTemplateColumns:`repeat(${m.cols}, 1fr)`,gridTemplateRows:`repeat(${y}, 1fr)`,aspectRatio:`1 / ${m.heightRatio*b}`,gap:`4px`},children:e.map((t,n)=>{let r=v[n];return/* @__PURE__ */ (0,c.jsx)(i,{src:t.src,index:n,total:e.length,isLoaded:d.current.has(t.src),isError:f.current.has(t.src),gridColumn:r?.gridColumn,gridRow:r?.gridRow,isHidden:x&&C===n,onLoad:e=>{d.current.has(e)||(d.current.add(e),p(e=>e+1))},onError:e=>{f.current.has(e)||(f.current.add(e),p(e=>e+1))},onClick:(e,t)=>{w(e),E(t),S(!0)}},`${t.src}-${n}`)})}),/* @__PURE__ */ (0,c.jsx)(`div`,{className:`h-16 w-full`,"aria-hidden":`true`})]}),/* @__PURE__ */ (0,c.jsx)(a,{images:D,open:x,onClose:()=>{S(!1),requestAnimationFrame(()=>{document.activeElement instanceof HTMLElement&&document.activeElement.blur()})},initialIndex:C,origin:T})]})}export{g as GalleryPanelContent};
@@ -1 +1 @@
1
- import{a as e}from"../../../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../../../_chunks/react-CUaU2Z9V.js";import{t as n}from"../../../../_chunks/ArrowRightIcon-OEjQROCT.js";import{t as r}from"../../../../_chunks/compiler-runtime-B3BlmaWz.js";import{t as i}from"../../../../_chunks/jsx-runtime-Dgn0yPdi.js";import{t as a}from"../../../../_chunks/dist-BNSTMZct.js";import{t as o}from"../../../../_chunks/Button-BfpdYdpq.js";import{t as s}from"../../../../_chunks/artifact-footer-CveH1h7i.js";import{t as c}from"../../../../_chunks/Lightbox-BLNBf1tQ.js";import{r as l}from"../../../../_chunks/galleryLayouts-COa9PIJw.js";import{t as u}from"../../../../_chunks/ImageItem-B1VUwxF6.js";var d=r(),f=/* @__PURE__ */ e(i(),1),p=/* @__PURE__ */ e(t(),1);function m(e){let t=(0,d.c)(46),r,i,m,h,g,_,v;t[0]===e?(r=t[1],i=t[2],m=t[3],h=t[4],g=t[5],_=t[6],v=t[7]):({images:m,buttonText:r,onViewAllImages:g,onImageClick:h,className:i,qaTestId:v,..._}=e,t[0]=e,t[1]=r,t[2]=i,t[3]=m,t[4]=h,t[5]=g,t[6]=_,t[7]=v);let y=v===void 0?`image-artifact`:v,b=m.slice(0,5),x=b.length,S=l(x),[C,w]=p.useState(!1),T;t[8]===Symbol.for(`react.memo_cache_sentinel`)?(T=[],t[8]=T):T=t[8];let[E,D]=p.useState(T),[O,k]=p.useState(0),[A,j]=p.useState(null),[M,N]=p.useState(null),P=m.length>5,F=`view ${m.length} ${m.length===1?`image`:`images`}`,I;t[9]===Symbol.for(`react.memo_cache_sentinel`)?(I={icon:n},t[9]=I):I=t[9];let L=r??F,R;t[10]!==g||t[11]!==L?(R=/* @__PURE__ */ (0,f.jsx)(o,{variant:`weak`,fullwidth:!0,suffix:I,onClick:g,children:L}),t[10]=g,t[11]=L,t[12]=R):R=t[12];let z=R,B;t[13]!==m||t[14]!==h||t[15]!==N||t[16]!==w?(B=(e,t)=>{m[e]&&(h?h(e):(D(m),k(e),j(t),N(e),w(!0)))},t[13]=m,t[14]=h,t[15]=N,t[16]=w,t[17]=B):B=t[17];let V=B;if(x===0)return null;let H;t[18]===i?H=t[19]:(H=a(`mx-auto flex w-full max-w-[min(100%,calc(var(--artifact-breakout-column,680px)+2*var(--artifact-breakout-current,48px)))] min-w-0 flex-col items-stretch gap-6`,i),t[18]=i,t[19]=H);let U=x===1?`488 / 353`:`565 / 347`,W;t[20]===U?W=t[21]:(W={display:`grid`,width:`100%`,maxWidth:`100%`,minWidth:0,aspectRatio:U,gridTemplateColumns:`repeat(8, minmax(0, 1fr))`,gridTemplateRows:`repeat(6, minmax(0, 1fr))`,gap:4},t[20]=U,t[21]=W);let G=b.map((e,t)=>{let n=S[t];return n?/* @__PURE__ */ (0,f.jsx)(u,{src:e.src,alt:e.alt,onClick:e=>{let n=e.currentTarget.getBoundingClientRect();V(t,{x:n.left+n.width/2,y:n.top+n.height/2})},className:a(`h-full min-h-0 w-full min-w-0`,C&&M===t&&`invisible`),style:{gridColumn:n.gridColumn,gridRow:n.gridRow,minWidth:0,minHeight:0}},`${e.src}-${t}`):null}),K;t[22]!==W||t[23]!==G?(K=/* @__PURE__ */ (0,f.jsx)(`div`,{className:`overflow-clip rounded-2xl`,role:`group`,style:W,children:G}),t[22]=W,t[23]=G,t[24]=K):K=t[24];let q;t[25]!==z||t[26]!==P?(q=P?/* @__PURE__ */ (0,f.jsx)(s,{buttons:[z],layout:`full`,className:`w-full px-0`}):null,t[25]=z,t[26]=P,t[27]=q):q=t[27];let J;t[28]!==_||t[29]!==y||t[30]!==K||t[31]!==q||t[32]!==H?(J=/* @__PURE__ */ (0,f.jsxs)(`div`,{className:H,"qa-test-id":y,..._,children:[K,q]}),t[28]=_,t[29]=y,t[30]=K,t[31]=q,t[32]=H,t[33]=J):J=t[33];let Y;t[34]!==N||t[35]!==w?(Y=()=>{w(!1),N(null)},t[34]=N,t[35]=w,t[36]=Y):Y=t[36];let X;t[37]!==E||t[38]!==O||t[39]!==C||t[40]!==A||t[41]!==Y?(X=/* @__PURE__ */ (0,f.jsx)(c,{images:E,open:C,onClose:Y,initialIndex:O,origin:A}),t[37]=E,t[38]=O,t[39]=C,t[40]=A,t[41]=Y,t[42]=X):X=t[42];let Z;return t[43]!==J||t[44]!==X?(Z=/* @__PURE__ */ (0,f.jsxs)(f.Fragment,{children:[J,X]}),t[43]=J,t[44]=X,t[45]=Z):Z=t[45],Z}export{m as ImageArtifact};
1
+ import{a as e}from"../../../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../../../_chunks/react-CUaU2Z9V.js";import{t as n}from"../../../../_chunks/ArrowRightIcon-OEjQROCT.js";import{t as r}from"../../../../_chunks/compiler-runtime-B3BlmaWz.js";import{t as i}from"../../../../_chunks/jsx-runtime-Dgn0yPdi.js";import{t as a}from"../../../../_chunks/dist-BNSTMZct.js";import{t as o}from"../../../../_chunks/Button-BfpdYdpq.js";import{t as s}from"../../../../_chunks/artifact-footer-CveH1h7i.js";import{t as c}from"../../../../_chunks/Lightbox-BJYrdHsA.js";import{r as l}from"../../../../_chunks/galleryLayouts-COa9PIJw.js";import{t as u}from"../../../../_chunks/ImageItem-B1VUwxF6.js";var d=r(),f=/* @__PURE__ */ e(i(),1),p=/* @__PURE__ */ e(t(),1);function m(e){let t=(0,d.c)(46),r,i,m,h,g,_,v;t[0]===e?(r=t[1],i=t[2],m=t[3],h=t[4],g=t[5],_=t[6],v=t[7]):({images:m,buttonText:r,onViewAllImages:g,onImageClick:h,className:i,qaTestId:v,..._}=e,t[0]=e,t[1]=r,t[2]=i,t[3]=m,t[4]=h,t[5]=g,t[6]=_,t[7]=v);let y=v===void 0?`image-artifact`:v,b=m.slice(0,5),x=b.length,S=l(x),[C,w]=p.useState(!1),T;t[8]===Symbol.for(`react.memo_cache_sentinel`)?(T=[],t[8]=T):T=t[8];let[E,D]=p.useState(T),[O,k]=p.useState(0),[A,j]=p.useState(null),[M,N]=p.useState(null),P=m.length>5,F=`view ${m.length} ${m.length===1?`image`:`images`}`,I;t[9]===Symbol.for(`react.memo_cache_sentinel`)?(I={icon:n},t[9]=I):I=t[9];let L=r??F,R;t[10]!==g||t[11]!==L?(R=/* @__PURE__ */ (0,f.jsx)(o,{variant:`weak`,fullwidth:!0,suffix:I,onClick:g,children:L}),t[10]=g,t[11]=L,t[12]=R):R=t[12];let z=R,B;t[13]!==m||t[14]!==h||t[15]!==N||t[16]!==w?(B=(e,t)=>{m[e]&&(h?h(e):(D(m),k(e),j(t),N(e),w(!0)))},t[13]=m,t[14]=h,t[15]=N,t[16]=w,t[17]=B):B=t[17];let V=B;if(x===0)return null;let H;t[18]===i?H=t[19]:(H=a(`mx-auto flex w-full max-w-[min(100%,calc(var(--artifact-breakout-column,680px)+2*var(--artifact-breakout-current,48px)))] min-w-0 flex-col items-stretch gap-6`,i),t[18]=i,t[19]=H);let U=x===1?`488 / 353`:`565 / 347`,W;t[20]===U?W=t[21]:(W={display:`grid`,width:`100%`,maxWidth:`100%`,minWidth:0,aspectRatio:U,gridTemplateColumns:`repeat(8, minmax(0, 1fr))`,gridTemplateRows:`repeat(6, minmax(0, 1fr))`,gap:4},t[20]=U,t[21]=W);let G=b.map((e,t)=>{let n=S[t];return n?/* @__PURE__ */ (0,f.jsx)(u,{src:e.src,alt:e.alt,onClick:e=>{let n=e.currentTarget.getBoundingClientRect();V(t,{x:n.left+n.width/2,y:n.top+n.height/2})},className:a(`h-full min-h-0 w-full min-w-0`,C&&M===t&&`invisible`),style:{gridColumn:n.gridColumn,gridRow:n.gridRow,minWidth:0,minHeight:0}},`${e.src}-${t}`):null}),K;t[22]!==W||t[23]!==G?(K=/* @__PURE__ */ (0,f.jsx)(`div`,{className:`overflow-clip rounded-2xl`,role:`group`,style:W,children:G}),t[22]=W,t[23]=G,t[24]=K):K=t[24];let q;t[25]!==z||t[26]!==P?(q=P?/* @__PURE__ */ (0,f.jsx)(s,{buttons:[z],layout:`full`,className:`w-full px-0`}):null,t[25]=z,t[26]=P,t[27]=q):q=t[27];let J;t[28]!==_||t[29]!==y||t[30]!==K||t[31]!==q||t[32]!==H?(J=/* @__PURE__ */ (0,f.jsxs)(`div`,{className:H,"qa-test-id":y,..._,children:[K,q]}),t[28]=_,t[29]=y,t[30]=K,t[31]=q,t[32]=H,t[33]=J):J=t[33];let Y;t[34]!==N||t[35]!==w?(Y=()=>{w(!1),N(null)},t[34]=N,t[35]=w,t[36]=Y):Y=t[36];let X;t[37]!==E||t[38]!==O||t[39]!==C||t[40]!==A||t[41]!==Y?(X=/* @__PURE__ */ (0,f.jsx)(c,{images:E,open:C,onClose:Y,initialIndex:O,origin:A}),t[37]=E,t[38]=O,t[39]=C,t[40]=A,t[41]=Y,t[42]=X):X=t[42];let Z;return t[43]!==J||t[44]!==X?(Z=/* @__PURE__ */ (0,f.jsxs)(f.Fragment,{children:[J,X]}),t[43]=J,t[44]=X,t[45]=Z):Z=t[45],Z}export{m as ImageArtifact};
@@ -1 +1 @@
1
- export{t as Lightbox}from"../../../../_chunks/Lightbox-BLNBf1tQ.js";
1
+ export{t as Lightbox}from"../../../../_chunks/Lightbox-BJYrdHsA.js";
@@ -1 +1 @@
1
- import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../_chunks/react-CUaU2Z9V.js";import{T as n,a as r,b as i,d as a,i as o,l as s,o as c,p as l,x as u}from"../../_chunks/useFeedbackGatewaySession-Dyxvrz6I.js";import{t as d}from"../../_chunks/jsx-runtime-Dgn0yPdi.js";import{i as f}from"../../_chunks/Tooltip-abTz0p9j.js";import{i as p}from"../../_chunks/dist-BRMXKypj.js";import{r as m}from"../../_chunks/dist-CPlSvWC_.js";import{t as h}from"../../_chunks/HelperText-DQxQjdKH.js";import{t as g}from"../../_chunks/Modal-B8krPuKb.js";import{t as _}from"../../_chunks/ShakeWrapper-Cmh-6CRA.js";import{t as v}from"../../_chunks/collect-feedback-context-F1nAqZ8M.js";import{t as y}from"../../_chunks/FeedbackMode-DXgYhMCF.js";import{r as b,t as x}from"../../_chunks/useFeedbackGatewayAuth-C9bzYBkb.js";var S=/* @__PURE__ */ e(d(),1),C=/* @__PURE__ */ e(t(),1);const w=(0,C.createContext)(void 0);function T({app:e,enabled:t,environment:d,user:p,usesLocalDevProxy:h=!1,children:g,qaTestId:_=`feedback-gateway-provider`}){let T=m(),[D,O]=(0,C.useState)(!1),[k,A]=(0,C.useState)(0),[j,M]=(0,C.useState)(``),[N,P]=(0,C.useState)(`capture`),[F,I]=(0,C.useState)(!1);h&&c(e,{usesLocalDevProxy:!0});let L=!1;if(T)try{L=window.localStorage.getItem(n)===`true`}catch{L=!1}let R=o(t,L),z=R&&D,B=(0,C.useRef)(null),V=(0,C.useRef)(()=>{}),H=h&&T&&r(window.location.hostname)?async()=>{let e=await fetch(`/api/feedback/oly-origin`,{credentials:`same-origin`});if(!e.ok)throw Error(`oly-origin unavailable`);let t=await e.json();if(!t.origin)throw Error(`oly-origin missing`);return t.origin}:void 0,U=x({app:e,enabled:R,open:z&&F,resolveOlyGatewayOrigin:H,onReturnFromAuth:()=>{V.current()}});B.current=U;function W(t){M(i(e)),P(t?.review?`review`:`capture`),A(e=>e+1),O(!0)}function G(){if(!R)return;let e=B.current;e?(async()=>{try{let t=await a({dashboardOrigin:e.config.gatewayOrigin});if(t.status===`needs_auth`){e.redirectToLogin(new s(t.authUrl));return}if(t.status===`forbidden`||t.status===`error`){W({review:!0});return}W()}catch{e.redirectToLogin()}})():W()}V.current=G;async function K(t){let n=B.current;if(!n)throw Error(`Feedback gateway auth is not ready.`);u(e,t.message);try{await l({...t,context:v({app:e,environment:b(d),user:p,localStorage:{}})},{dashboardOrigin:n.config.gatewayOrigin}),u(e,``)}catch(e){throw e instanceof s&&n.redirectToLogin(e),e}}return/* @__PURE__ */ (0,S.jsxs)(w.Provider,{value:{enabled:R,openFeedback:G},children:[g,z?/* @__PURE__ */ (0,S.jsx)(f,{children:/* @__PURE__ */ (0,S.jsx)(y,{active:!0,initialPhase:N,initialMessage:j,onExit:()=>O(!1),onSubmit:K,renderReview:t=>/* @__PURE__ */ (0,S.jsx)(E,{app:e,review:t,gatewayAuth:U,onOpenChange:I,qaTestId:`${_}-review-dialog`}),qaTestId:_},k)}):null]})}function E({app:e,review:t,gatewayAuth:n,onOpenChange:r,qaTestId:i}){let{_:a}=p();(0,C.useEffect)(()=>(r(!0),()=>r(!1)),[r]);let o=t.phase===`sent`;return/* @__PURE__ */ (0,S.jsx)(g,{open:!0,dismissOnBackdropClick:!1,onOpenChange:e=>{e||t.exit()},size:`lg`,qaTestId:i,headerProps:o?{title:a({id:`2roTVj`})}:{title:a({id:`RoafuO`}),description:a({id:`7kUVRu`}),showClose:!0,closeDisabled:t.isSubmitting},footerProps:o?{primaryButton:{variant:`strong`,children:a({id:`yz7wBu`}),onClick:t.exit}}:{secondaryButton:{variant:`stroke`,children:a({id:`AhocSJ`}),disabled:t.isSubmitting,onClick:t.backToCapture},primaryButton:n.needsLogin?{variant:`strong`,children:a({id:`z0t9bb`}),disabled:t.isSubmitting,onClick:()=>{t.message.trim()&&u(e,t.message),n.onLogin()}}:{variant:`strong`,children:a({id:`JlFcis`}),isLoading:t.isSubmitting||n.isChecking,disabled:!n.canSend||t.isSubmitting,onClick:t.submit}},children:/* @__PURE__ */ (0,S.jsxs)(_,{ref:t.shakeRef,tooltip:o?void 0:a({id:`_8FaZU`}),children:[t.body,!o&&n.authNotice?/* @__PURE__ */ (0,S.jsx)(h,{state:`error`,wrap:!0,className:`mt-3`,children:n.authNotice}):null]})})}function D(){return(0,C.useContext)(w)??{enabled:!1,openFeedback:O}}function O(){}export{T as FeedbackGatewayProvider,D as useFeedbackGateway};
1
+ import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../_chunks/react-CUaU2Z9V.js";import{T as n,a as r,b as i,d as a,i as o,l as s,o as c,p as l,x as u}from"../../_chunks/useFeedbackGatewaySession-Dyxvrz6I.js";import{t as d}from"../../_chunks/jsx-runtime-Dgn0yPdi.js";import{i as f}from"../../_chunks/Tooltip-abTz0p9j.js";import{i as p}from"../../_chunks/dist-BRMXKypj.js";import{r as m}from"../../_chunks/dist-CPlSvWC_.js";import{t as h}from"../../_chunks/HelperText-DQxQjdKH.js";import{t as g}from"../../_chunks/Modal-B8krPuKb.js";import{t as _}from"../../_chunks/ShakeWrapper-Cmh-6CRA.js";import{t as v}from"../../_chunks/collect-feedback-context-F1nAqZ8M.js";import{t as y}from"../../_chunks/FeedbackMode-DscGSYlx.js";import{r as b,t as x}from"../../_chunks/useFeedbackGatewayAuth-C9bzYBkb.js";var S=/* @__PURE__ */ e(d(),1),C=/* @__PURE__ */ e(t(),1);const w=(0,C.createContext)(void 0);function T({app:e,enabled:t,environment:d,user:p,usesLocalDevProxy:h=!1,children:g,qaTestId:_=`feedback-gateway-provider`}){let T=m(),[D,O]=(0,C.useState)(!1),[k,A]=(0,C.useState)(0),[j,M]=(0,C.useState)(``),[N,P]=(0,C.useState)(`capture`),[F,I]=(0,C.useState)(!1);h&&c(e,{usesLocalDevProxy:!0});let L=!1;if(T)try{L=window.localStorage.getItem(n)===`true`}catch{L=!1}let R=o(t,L),z=R&&D,B=(0,C.useRef)(null),V=(0,C.useRef)(()=>{}),H=h&&T&&r(window.location.hostname)?async()=>{let e=await fetch(`/api/feedback/oly-origin`,{credentials:`same-origin`});if(!e.ok)throw Error(`oly-origin unavailable`);let t=await e.json();if(!t.origin)throw Error(`oly-origin missing`);return t.origin}:void 0,U=x({app:e,enabled:R,open:z&&F,resolveOlyGatewayOrigin:H,onReturnFromAuth:()=>{V.current()}});B.current=U;function W(t){M(i(e)),P(t?.review?`review`:`capture`),A(e=>e+1),O(!0)}function G(){if(!R)return;let e=B.current;e?(async()=>{try{let t=await a({dashboardOrigin:e.config.gatewayOrigin});if(t.status===`needs_auth`){e.redirectToLogin(new s(t.authUrl));return}if(t.status===`forbidden`||t.status===`error`){W({review:!0});return}W()}catch{e.redirectToLogin()}})():W()}V.current=G;async function K(t){let n=B.current;if(!n)throw Error(`Feedback gateway auth is not ready.`);u(e,t.message);try{await l({...t,context:v({app:e,environment:b(d),user:p,localStorage:{}})},{dashboardOrigin:n.config.gatewayOrigin}),u(e,``)}catch(e){throw e instanceof s&&n.redirectToLogin(e),e}}return/* @__PURE__ */ (0,S.jsxs)(w.Provider,{value:{enabled:R,openFeedback:G},children:[g,z?/* @__PURE__ */ (0,S.jsx)(f,{children:/* @__PURE__ */ (0,S.jsx)(y,{active:!0,initialPhase:N,initialMessage:j,onExit:()=>O(!1),onSubmit:K,renderReview:t=>/* @__PURE__ */ (0,S.jsx)(E,{app:e,review:t,gatewayAuth:U,onOpenChange:I,qaTestId:`${_}-review-dialog`}),qaTestId:_},k)}):null]})}function E({app:e,review:t,gatewayAuth:n,onOpenChange:r,qaTestId:i}){let{_:a}=p();(0,C.useEffect)(()=>(r(!0),()=>r(!1)),[r]);let o=t.phase===`sent`;return/* @__PURE__ */ (0,S.jsx)(g,{open:!0,dismissOnBackdropClick:!1,onOpenChange:e=>{e||t.exit()},size:`lg`,qaTestId:i,headerProps:o?{title:a({id:`2roTVj`})}:{title:a({id:`RoafuO`}),description:a({id:`7kUVRu`}),showClose:!0,closeDisabled:t.isSubmitting},footerProps:o?{primaryButton:{variant:`strong`,children:a({id:`yz7wBu`}),onClick:t.exit}}:{secondaryButton:{variant:`stroke`,children:a({id:`AhocSJ`}),disabled:t.isSubmitting,onClick:t.backToCapture},primaryButton:n.needsLogin?{variant:`strong`,children:a({id:`z0t9bb`}),disabled:t.isSubmitting,onClick:()=>{t.message.trim()&&u(e,t.message),n.onLogin()}}:{variant:`strong`,children:a({id:`JlFcis`}),isLoading:t.isSubmitting||n.isChecking,disabled:!n.canSend||t.isSubmitting,onClick:t.submit}},children:/* @__PURE__ */ (0,S.jsxs)(_,{ref:t.shakeRef,tooltip:o?void 0:a({id:`_8FaZU`}),children:[t.body,!o&&n.authNotice?/* @__PURE__ */ (0,S.jsx)(h,{state:`error`,wrap:!0,className:`mt-3`,children:n.authNotice}):null]})})}function D(){return(0,C.useContext)(w)??{enabled:!1,openFeedback:O}}function O(){}export{T as FeedbackGatewayProvider,D as useFeedbackGateway};
@@ -1 +1 @@
1
- import{t as e}from"../../_chunks/collect-feedback-context-F1nAqZ8M.js";import{a as t,i as n,n as r,r as i,t as a}from"../../_chunks/FeedbackMode-DXgYhMCF.js";export{t as FeedbackCaptureBar,a as FeedbackMode,n as FeedbackModeFrame,i as FeedbackModeReview,e as buildFeedbackContext,r as useFeedbackMode};
1
+ import{t as e}from"../../_chunks/collect-feedback-context-F1nAqZ8M.js";import{a as t,i as n,n as r,r as i,t as a}from"../../_chunks/FeedbackMode-DscGSYlx.js";export{t as FeedbackCaptureBar,a as FeedbackMode,n as FeedbackModeFrame,i as FeedbackModeReview,e as buildFeedbackContext,r as useFeedbackMode};
@@ -1 +1 @@
1
- import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../_chunks/compiler-runtime-B3BlmaWz.js";import{t as n}from"../../_chunks/jsx-runtime-Dgn0yPdi.js";import{t as r}from"../../_chunks/dist-BNSTMZct.js";import{t as i}from"../../_chunks/ImageGrid-Drlg6iho.js";var a=t(),o=/* @__PURE__ */ e(n(),1);function s(e){let t=(0,a.c)(25),{title:n,images:s,count:c,caption:l,logo:u,price:d,loading:f,lightbox:p,gridClassName:m,className:h,qaTestId:g}=e,_=f!==void 0&&f,v=p!==void 0&&p,y=g===void 0?`image-card`:g,b=m??`aspect-square w-full`,x;t[0]===h?x=t[1]:(x=r(`border-border-soft bg-base-inverse flex flex-col gap-2 rounded-[20px] border p-3`,h),t[0]=h,t[1]=x);let S;t[2]!==c||t[3]!==s||t[4]!==v||t[5]!==_||t[6]!==b||t[7]!==n?(S=/* @__PURE__ */ (0,o.jsx)(i,{images:s,count:c,loading:_,lightbox:v,label:n,className:b}),t[2]=c,t[3]=s,t[4]=v,t[5]=_,t[6]=b,t[7]=n,t[8]=S):S=t[8];let C;t[9]!==u||t[10]!==d?(C=u||d?/* @__PURE__ */ (0,o.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2 py-1`,children:[u?/* @__PURE__ */ (0,o.jsx)(`div`,{className:`shrink-0`,children:u}):null,d?/* @__PURE__ */ (0,o.jsx)(`span`,{className:`pui-text-label-medium-loose min-w-0 flex-1 truncate text-right text-text-strong tabular-nums`,children:d}):null]}):null,t[9]=u,t[10]=d,t[11]=C):C=t[11];let w;t[12]===n?w=t[13]:(w=/* @__PURE__ */ (0,o.jsx)(`span`,{className:`pui-text-label-medium-loose truncate text-text-sub`,children:n}),t[12]=n,t[13]=w);let T;t[14]===l?T=t[15]:(T=l?/* @__PURE__ */ (0,o.jsx)(`span`,{className:`pui-text-mono-small truncate text-text-soft`,children:l}):null,t[14]=l,t[15]=T);let E;t[16]!==C||t[17]!==w||t[18]!==T?(E=/* @__PURE__ */ (0,o.jsxs)(`div`,{className:`flex min-w-0 flex-col`,children:[C,w,T]}),t[16]=C,t[17]=w,t[18]=T,t[19]=E):E=t[19];let D;return t[20]!==y||t[21]!==x||t[22]!==S||t[23]!==E?(D=/* @__PURE__ */ (0,o.jsxs)(`div`,{className:x,"qa-test-id":y,children:[S,E]}),t[20]=y,t[21]=x,t[22]=S,t[23]=E,t[24]=D):D=t[24],D}export{s as ImageCard};
1
+ import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../_chunks/compiler-runtime-B3BlmaWz.js";import{t as n}from"../../_chunks/jsx-runtime-Dgn0yPdi.js";import{t as r}from"../../_chunks/dist-BNSTMZct.js";import{t as i}from"../../_chunks/ImageGrid-w2ccAgx_.js";var a=t(),o=/* @__PURE__ */ e(n(),1);function s(e){let t=(0,a.c)(25),{title:n,images:s,count:c,caption:l,logo:u,price:d,loading:f,lightbox:p,gridClassName:m,className:h,qaTestId:g}=e,_=f!==void 0&&f,v=p!==void 0&&p,y=g===void 0?`image-card`:g,b=m??`aspect-square w-full`,x;t[0]===h?x=t[1]:(x=r(`border-border-soft bg-base-inverse flex flex-col gap-2 rounded-[20px] border p-3`,h),t[0]=h,t[1]=x);let S;t[2]!==c||t[3]!==s||t[4]!==v||t[5]!==_||t[6]!==b||t[7]!==n?(S=/* @__PURE__ */ (0,o.jsx)(i,{images:s,count:c,loading:_,lightbox:v,label:n,className:b}),t[2]=c,t[3]=s,t[4]=v,t[5]=_,t[6]=b,t[7]=n,t[8]=S):S=t[8];let C;t[9]!==u||t[10]!==d?(C=u||d?/* @__PURE__ */ (0,o.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2 py-1`,children:[u?/* @__PURE__ */ (0,o.jsx)(`div`,{className:`shrink-0`,children:u}):null,d?/* @__PURE__ */ (0,o.jsx)(`span`,{className:`pui-text-label-medium-loose min-w-0 flex-1 truncate text-right text-text-strong tabular-nums`,children:d}):null]}):null,t[9]=u,t[10]=d,t[11]=C):C=t[11];let w;t[12]===n?w=t[13]:(w=/* @__PURE__ */ (0,o.jsx)(`span`,{className:`pui-text-label-medium-loose truncate text-text-sub`,children:n}),t[12]=n,t[13]=w);let T;t[14]===l?T=t[15]:(T=l?/* @__PURE__ */ (0,o.jsx)(`span`,{className:`pui-text-mono-small truncate text-text-soft`,children:l}):null,t[14]=l,t[15]=T);let E;t[16]!==C||t[17]!==w||t[18]!==T?(E=/* @__PURE__ */ (0,o.jsxs)(`div`,{className:`flex min-w-0 flex-col`,children:[C,w,T]}),t[16]=C,t[17]=w,t[18]=T,t[19]=E):E=t[19];let D;return t[20]!==y||t[21]!==x||t[22]!==S||t[23]!==E?(D=/* @__PURE__ */ (0,o.jsxs)(`div`,{className:x,"qa-test-id":y,children:[S,E]}),t[20]=y,t[21]=x,t[22]=S,t[23]=E,t[24]=D):D=t[24],D}export{s as ImageCard};
@@ -1 +1 @@
1
- export{t as ImageCompare}from"../../_chunks/ImageCompare-BIeh0KQe.js";
1
+ export{t as ImageCompare}from"../../_chunks/ImageCompare-CCyEzB62.js";
@@ -1 +1 @@
1
- export{t as ImageGrid}from"../../_chunks/ImageGrid-Drlg6iho.js";
1
+ export{t as ImageGrid}from"../../_chunks/ImageGrid-w2ccAgx_.js";
@@ -1 +1 @@
1
- import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../_chunks/react-CUaU2Z9V.js";import{t as n}from"../../_chunks/compiler-runtime-B3BlmaWz.js";import{t as r}from"../../_chunks/jsx-runtime-Dgn0yPdi.js";import{t as i}from"../../_chunks/dist-BNSTMZct.js";import{n as a}from"../../_chunks/react-CqECE5Y5.js";import{t as o}from"../../_chunks/AnimatePresence-DOl8NYHq.js";import{t as s}from"../../_chunks/use-reduced-motion-CNBdBisf.js";import{t as c}from"../../_chunks/ButtonInset-DmuC2cPs.js";import{n as l}from"../../_chunks/dist-CPlSvWC_.js";import{t as u}from"../../_chunks/Divider-LTM2QzTF.js";import{t as d}from"../../_chunks/Lightbox-BLNBf1tQ.js";import{t as f}from"../../_chunks/ArrowUpRightIcon-BQhMqKWo.js";var p=n(),m=/* @__PURE__ */ e(r(),1),h=/* @__PURE__ */ e(t(),1);function g(e,t){if(!e)return null;if(t.has(e))return e;let n=e;for(;n.includes(`/`);)if(n=n.slice(0,n.lastIndexOf(`/`)),t.has(n))return n;return null}const _={x:0,y:0,scale:1},v={type:`spring`,duration:.55,bounce:0},y={type:`spring`,stiffness:360,damping:32};function b(e,t,n,r){let i=e.getBoundingClientRect(),a=t.getBoundingClientRect(),o=n.getBoundingClientRect(),s=(i.left-a.left)/r,c=(i.top-a.top)/r,l=i.width/r,u=i.height/r,d=o.width,f=o.height,p=Math.min(d/Math.max(1,l+56),f/Math.max(1,u+56),3);return{x:d/2-(s+l/2)*p,y:Math.min(f/2-(c+u/2)*p,28),scale:p}}const x=()=>void 0,S=(0,h.createContext)({effectiveRegionId:null,cameraMode:!1,cameraScale:1,annotationVisible:!1,registerRegion:x,unregisterRegion:x}),ee=S.Provider;function te(){return(0,h.useContext)(S)}const C={small:`rounded-lg`,medium:`rounded-xl`,large:`rounded-2xl`};function ne(e,t){if(!(t instanceof Element)||t.closest(`[data-pdp-region-id]`)!==e)return!1;let n=t.closest(`button, a[href], input, select, textarea, [role="button"]`);return n&&e.contains(n)?!1:window.getSelection()?.isCollapsed??!0}function w(e){let t=(0,p.c)(48),{id:n,as:r,children:c,className:l,highlightFill:u,highlightRadius:d,highlightInset:f,qaTestId:g}=e,_=r===void 0?`div`:r,v=u===void 0||u,b=d===void 0?`medium`:d,x=g===void 0?`pdp-region`:g,{effectiveRegionId:S,cameraMode:ee,cameraScale:w,annotation:E,annotationVisible:D,onRegionClick:O,registerRegion:k,unregisterRegion:A}=te(),j=s(),M=(0,h.useRef)(null),N=(0,h.useRef)(null),[P,F]=(0,h.useState)(!1),I;t[0]===Symbol.for(`react.memo_cache_sentinel`)?(I=e=>{M.current=e},t[0]=I):I=t[0];let L=I,R,z;t[1]!==n||t[2]!==k||t[3]!==A?(R=()=>{let e=M.current;if(e)return k(n,e),()=>A(n)},z=[n,k,A],t[1]=n,t[2]=k,t[3]=A,t[4]=R,t[5]=z):(R=t[4],z=t[5]),(0,h.useLayoutEffect)(R,z);let B=S===n,V=B&&E!=null,H=w>0?1/w:1,ie=L,ae=ee&&!j?.38:0,U=j?0:.16,W;t[6]===U?W=t[7]:(W={duration:U},t[6]=U,t[7]=W);let G=W,K,q;t[8]!==H||t[9]!==V?(K=()=>{if(!V){F(!1);return}let e=N.current,t=e?.querySelector(`[data-slot="tag"]`),n=e?.querySelector(`[data-pdp-annotation-box]`),r=t instanceof HTMLElement?t:n instanceof HTMLElement?n:null;if(!(e&&r))return;let i=r.offsetWidth*H,a=r.offsetHeight*H;F(a+24>e.clientHeight||i+24>e.clientWidth)},q=[V,H],t[8]=H,t[9]=V,t[10]=K,t[11]=q):(K=t[10],q=t[11]),(0,h.useLayoutEffect)(K,q);let oe=O&&`cursor-pointer`,J;t[12]!==l||t[13]!==oe?(J=i(`relative overflow-visible`,oe,l),t[12]=l,t[13]=oe,t[14]=J):J=t[14];let Y;t[15]!==n||t[16]!==O?(Y=O?e=>{ne(e.currentTarget,e.target)&&O(n)}:void 0,t[15]=n,t[16]=O,t[17]=Y):Y=t[17];let X=B?``:void 0,se=f?.top??0,ce=f?.right??0,le=f?.bottom??0,Z;t[18]!==E||t[19]!==D||t[20]!==G||t[21]!==ae||t[22]!==v||t[23]!==f?.bottom||t[24]!==f?.left||t[25]!==f?.right||t[26]!==f?.top||t[27]!==b||t[28]!==H||t[29]!==B||t[30]!==P||t[31]!==j||t[32]!==V?(Z=B?/* @__PURE__ */ (0,m.jsxs)(a.div,{ref:N,"aria-hidden":!D||void 0,className:`pointer-events-none absolute overflow-visible`,style:{top:-(f?.top??0),right:-(f?.right??0),bottom:-(f?.bottom??0),left:-(f?.left??0)},initial:{opacity:1},animate:{opacity:1},exit:{opacity:0,transition:G},"data-pdp-region-highlight":``,"qa-test-id":`pdp-region-highlight`,children:[/* @__PURE__ */ (0,m.jsx)(a.div,{"aria-hidden":!0,className:i(`absolute inset-0 border-2 border-secondary-base`,C[b],v&&`bg-depth-secondary-10`),initial:{opacity:0},animate:{opacity:1,transition:j?{duration:0}:{...y,delay:ae}}}),/* @__PURE__ */ (0,m.jsx)(o,{children:V?/* @__PURE__ */ (0,m.jsx)(a.div,{className:`pointer-events-none absolute overflow-visible`,"data-pdp-region-annotation":``,"data-pdp-annotation-placement":P?`outside`:`inside`,"qa-test-id":`pdp-region-annotation`,initial:!1,animate:{opacity:1},exit:{opacity:0,transition:G},style:P?{top:`calc(100% + 8px)`,right:0,bottom:`auto`}:{top:`auto`,right:12,bottom:12},onClick:re,onPointerDown:T,children:/* @__PURE__ */ (0,m.jsx)(`div`,{"data-pdp-annotation-box":``,"data-annotation-visible":D?``:void 0,className:i(`w-fit pdp-annotation-box`,D?`pointer-events-auto`:`pointer-events-none`),style:{transform:`scale(${H})`,transformOrigin:P?`top right`:`bottom right`},children:E})},`annotation`):null})]},`highlight`):null,t[18]=E,t[19]=D,t[20]=G,t[21]=ae,t[22]=v,t[23]=f?.bottom,t[24]=f?.left,t[25]=f?.right,t[26]=f?.top,t[27]=b,t[28]=H,t[29]=B,t[30]=P,t[31]=j,t[32]=V,t[33]=Z):Z=t[33];let Q;t[34]===Z?Q=t[35]:(Q=/* @__PURE__ */ (0,m.jsx)(o,{children:Z}),t[34]=Z,t[35]=Q);let $;return t[36]!==_||t[37]!==c||t[38]!==n||t[39]!==x||t[40]!==J||t[41]!==Y||t[42]!==X||t[43]!==se||t[44]!==ce||t[45]!==le||t[46]!==Q?($=/* @__PURE__ */ (0,m.jsxs)(_,{ref:ie,className:J,onClick:Y,"data-pdp-region-id":n,"data-active-region":X,"data-hang-inset-top":se,"data-hang-inset-right":ce,"data-hang-inset-bottom":le,"qa-test-id":x,children:[c,Q]}),t[36]=_,t[37]=c,t[38]=n,t[39]=x,t[40]=J,t[41]=Y,t[42]=X,t[43]=se,t[44]=ce,t[45]=le,t[46]=Q,t[47]=$):$=t[47],$}function T(e){return e.stopPropagation()}function re(e){return e.stopPropagation()}function E(e){let t=(0,p.c)(5),[n,r]=(0,h.useState)(!1),i,a;t[0]===e?(i=t[1],a=t[2]):(i=()=>{if(!e){r(!1);return}let t=new Image;return t.onload=()=>r(!0),t.onerror=()=>r(!0),t.src=e,()=>{t.onload=null,t.onerror=null}},a=[e],t[0]=e,t[1]=i,t[2]=a),(0,h.useEffect)(i,a);let o;return t[3]===n?o=t[4]:(o={ready:n},t[3]=n,t[4]=o),o}function D(e){let t=(0,p.c)(8),{className:n,label:r}=e,a;t[0]===n?a=t[1]:(a=i(`pointer-events-none relative animate-skeleton-shimmer overflow-hidden image-shimmer`,n),t[0]=n,t[1]=a);let o;t[2]===r?o=t[3]:(o=/* @__PURE__ */ (0,m.jsx)(`span`,{className:`sr-only`,children:r}),t[2]=r,t[3]=o);let s;return t[4]!==r||t[5]!==a||t[6]!==o?(s=/* @__PURE__ */ (0,m.jsx)(`div`,{role:`status`,"aria-live":`polite`,"aria-label":r,className:a,children:o}),t[4]=r,t[5]=a,t[6]=o,t[7]=s):s=t[7],s}function O(e){let t=(0,p.c)(7),{src:n,pending:r,alt:c,shimmerLabel:l,className:u}=e,d=s(),{ready:f}=E(r?void 0:n),h=r||!f,g=d?0:.18,_;return t[0]!==c||t[1]!==u||t[2]!==g||t[3]!==l||t[4]!==h||t[5]!==n?(_=/* @__PURE__ */ (0,m.jsx)(o,{initial:!1,mode:`sync`,children:h?/* @__PURE__ */ (0,m.jsx)(a.div,{className:`absolute inset-0`,initial:{opacity:1},animate:{opacity:1},exit:{opacity:0},transition:{duration:g},children:/* @__PURE__ */ (0,m.jsx)(D,{className:i(`size-full`,u),label:l})},`shimmer`):/* @__PURE__ */ (0,m.jsx)(a.img,{src:n,alt:c,className:i(`absolute inset-0 size-full object-cover`,u),initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:g}},`img-${n}`)}),t[0]=c,t[1]=u,t[2]=g,t[3]=l,t[4]=h,t[5]=n,t[6]=_):_=t[6],_}function k(e){let t=(0,p.c)(4),{className:n}=e,r;t[0]===n?r=t[1]:(r=i(`block rounded-full bg-base-weak`,n),t[0]=n,t[1]=r);let a;return t[2]===r?a=t[3]:(a=/* @__PURE__ */ (0,m.jsx)(`span`,{"aria-hidden":!0,className:r}),t[2]=r,t[3]=a),a}function A(e){let t=(0,p.c)(4),{className:n}=e,r;t[0]===n?r=t[1]:(r=i(`block rounded-full bg-depth-black-4`,n),t[0]=n,t[1]=r);let a;return t[2]===r?a=t[3]:(a=/* @__PURE__ */ (0,m.jsx)(`span`,{"aria-hidden":!0,className:r}),t[2]=r,t[3]=a),a}function j({product:e,canPreviewHero:t,onHeroClick:n,getSlot:r,variant:o=`inline`,layoutMode:c=`auto`,showSkeletons:f=!0,titleClassName:p,activeShotId:y,cameraMode:x=!1,activeHeroIndex:S,onHeroIndexChange:te,onRegionClick:C,heroFit:ne=`cover`,heroAspectRatio:T=`auto`,regionAnnotation:re,qaTestId:E=`marketplace-pdp-card-body`}){let D=ne===`contain`?`object-contain`:`object-cover`,[j,M]=(0,h.useState)(!1),N=s()??!1,P=o===`detail`&&c===`stacked`,F=P?T===`square`?`aspect-square w-full`:`h-[330px] w-full`:T===`square`?`aspect-square h-auto`:`aspect-12/13 h-auto`,I=new Set(e.thumbnailsPending??[]),L=(e.thumbnails.length>0?e.thumbnails:e.thumbnailsPending&&e.thumbnailsPending.length>0?e.thumbnailsPending.map(()=>``):[e.heroImage]).map((t,n)=>{let i=`thumb-${n}`,a=r(e.id,i),o=I.has(i)&&!a?.imageUrl;return{slot:i,url:a?.imageUrl??t,pending:o}}),R=Math.max(L.length-1,0),z=S===void 0?0:Math.min(Math.max(S,0),R),B=`${e.id}|${z}|${L.length}`,[V,H]=(0,h.useState)(z),[ie,ae]=(0,h.useState)(B);ie!==B&&(ae(B),H(z));let U=r(e.id,`hero`),W=U?.imageUrl??e.heroImage,G=!U?.imageUrl&&!e.heroImage,K=V===0?{url:W,pending:G}:L[V]??L[0],q=K?.url??e.heroImage,oe=!!K?.pending,J=p??(o===`detail`?`pui-text-heading-medium`:`pui-text-label-large`),Y=[],X=[];for(let t=0;t<L.length;t++){let n=t===0?W:L[t]?.url??``,i=t===0?G:L[t]?.pending??!1;if(n&&!i){let i=r(e.id,t===0?`hero`:`thumb-${t}`)?.beforeImageUrl;X[t]=Y.length,Y.push(i?{src:n,alt:e.name,before:i}:{src:n,alt:e.name})}}let se=X[V]??0,ce=Y.length>0&&X[V]!==void 0,le=t=>{if(!ce)return;let r=t.currentTarget.getBoundingClientRect(),i=V===0?`hero`:`thumb-${V}`;M(!0),n?.(e.id,{x:r.left+r.width/2,y:r.top+r.height/2},{lightboxSlot:i,fallbackImageUrl:q})},Z=e.bullets.length>0,Q=!!e.body,$=`focus-visible:shadow-[0_0_0_2px_var(--color-base-inverse),0_0_0_3px_var(--color-primary-base)]`,ue=(0,h.useRef)(/* @__PURE__ */ new Map),de=(0,h.useRef)((e,t)=>{ue.current.set(e,t)}).current,fe=(0,h.useRef)(e=>{ue.current.delete(e)}).current,pe=(0,h.useRef)(null),me=(0,h.useRef)(null),he=(0,h.useRef)(_),[ge,_e]=(0,h.useState)(_),[ve,ye]=(0,h.useState)(null),[be,xe]=(0,h.useState)(!0),[Se,Ce]=(0,h.useState)(null),we=ve===`hero`&&V!==z?void 0:re,Te={effectiveRegionId:ve,cameraMode:x,cameraScale:ge.scale,annotation:we,annotationVisible:!(!we||x&&!be),onRegionClick:C,registerRegion:de,unregisterRegion:fe},Ee=()=>{let e=g(y,ue.current);if(ye(e),!x){_e(_),he.current=_,xe(!0);return}let t=e?ue.current.get(e):null;if(!t||!pe.current||!me.current){_e(_),he.current=_,xe(!0);return}let n=b(t,me.current,pe.current,he.current.scale),r=he.current,i=n.x===r.x&&n.y===r.y&&n.scale===r.scale;he.current=n,_e(n),xe(i)};return(0,h.useEffect)(()=>{Ee()},[x,y]),(0,h.useEffect)(()=>{if(be||!x)return;let e=N?0:v.duration*1e3+50,t=window.setTimeout(()=>xe(!0),e);return()=>window.clearTimeout(t)},[be,x,ge,N]),l(`resize`,Ee),(0,h.useLayoutEffect)(()=>{let e=pe.current;e&&Ce(x&&y?t=>t??e.offsetHeight:null)},[x,y]),/* @__PURE__ */ (0,m.jsxs)(ee,{value:Te,children:[/* @__PURE__ */ (0,m.jsx)(`div`,{ref:pe,"qa-test-id":E,className:i(`bg-base-inverse`,x&&`overflow-hidden`,o===`detail`&&`flex min-h-0 flex-1 flex-col`,o!==`detail`&&`flex items-stretch`,Se!=null&&`flex-none overflow-hidden`),style:Se==null?void 0:{height:Se},children:/* @__PURE__ */ (0,m.jsxs)(a.div,{ref:me,"data-pdp-camera-set":``,"qa-test-id":`pdp-camera-set`,className:i(`bg-base-inverse`,o===`detail`&&`flex min-h-0 flex-1 flex-col`,o!==`detail`&&`flex w-full items-stretch`,Se!=null&&`flex-none`),style:{originX:0,originY:0},animate:{x:ge.x,y:ge.y,scale:ge.scale},transition:N?{duration:0}:v,onAnimationComplete:()=>xe(!0),children:[o===`detail`&&f?/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex h-12 shrink-0 items-center gap-2 px-3.5`,"aria-hidden":!0,children:[/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-1/6 max-w-24 min-w-0`}),/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-1/12 max-w-10 min-w-6`}),/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-1/9 max-w-16 min-w-0`})]}):null,/* @__PURE__ */ (0,m.jsxs)(`div`,{className:i(`flex min-h-0 items-stretch`,o===`detail`&&!f&&`pt-4`),children:[/* @__PURE__ */ (0,m.jsx)(`div`,{role:`group`,"aria-label":`Product images`,className:i(`flex shrink-0 flex-col items-center gap-2`,o===`detail`?`px-4 pb-4`:`p-4`),children:L.map((t,n)=>{let r=n===V,o=n===0?{url:W,pending:G}:t;return/* @__PURE__ */ (0,m.jsx)(a.button,{type:`button`,"aria-pressed":r,"aria-label":`Show image ${n+1}`,onClick:()=>{H(n),te?.(n)},whileTap:N?void 0:{scale:.95},transition:{duration:.15,ease:`easeOut`},className:i(`relative size-10 shrink-0 cursor-pointer overflow-hidden rounded-lg bg-base-weak transition-opacity outline-none`,$,r?i(`opacity-100`,`shadow-[0_0_0_2px_var(--color-base-inverse),0_0_0_3px_var(--color-primary-base)]`):`opacity-60 hover:opacity-100`),children:/* @__PURE__ */ (0,m.jsx)(O,{src:o.url,pending:o.pending,alt:``,shimmerLabel:`Generating image ${n+1}`})},`${e.id}-thumb-${n}`)})}),/* @__PURE__ */ (0,m.jsx)(`div`,{className:i(`min-w-0 flex-1 pr-3.5`,o===`detail`?`pb-4`:`py-4`),children:/* @__PURE__ */ (0,m.jsxs)(`div`,{className:i(`flex items-start gap-4`,o===`detail`?P?`flex-col`:`flex-col @[520px]:flex-row! @[520px]:flex-nowrap!`:`flex flex-col items-start gap-4 @[520px]:flex-row! @[520px]:flex-nowrap`),children:[/* @__PURE__ */ (0,m.jsxs)(`div`,{className:i(`flex w-full shrink-0 flex-col`,o===`detail`?`gap-5`:`gap-3`,o===`detail`&&!P&&`@[520px]:w-auto! @[520px]:max-w-88 @[520px]:min-w-48 @[520px]:shrink @[520px]:grow-0 @[520px]:basis-[44%] @[760px]:max-w-[24rem] @[760px]:basis-[48%]`,o!==`detail`&&`@[520px]:w-[240px]!`),children:[/* @__PURE__ */ (0,m.jsx)(w,{id:`hero`,className:`w-full`,highlightRadius:`large`,highlightFill:!1,highlightInset:{top:6,right:6,bottom:6,left:6},children:t?/* @__PURE__ */ (0,m.jsx)(a.button,{type:`button`,onClick:le,whileTap:N?void 0:{scale:.98},transition:{duration:.15,ease:`easeOut`},"aria-label":`Open image preview for ${e.name}`,className:i(`group relative block w-full cursor-zoom-in overflow-hidden rounded-xl bg-base-weak outline-none`,o===`detail`?F:`h-[260px]`,`transition-opacity duration-150 ease-out hover:[@media(hover:hover)]:opacity-80`,$),children:/* @__PURE__ */ (0,m.jsx)(O,{src:q,pending:oe,alt:e.name,shimmerLabel:`Generating hero image for ${e.name}`,className:i(D,`transition-transform duration-200 ease-out group-hover:[@media(hover:hover)]:scale-105`)})}):/* @__PURE__ */ (0,m.jsx)(`div`,{className:i(`group relative block w-full overflow-hidden rounded-xl bg-base-weak`,o===`detail`?F:`h-[260px]`,`transition-opacity duration-150 ease-out hover:[@media(hover:hover)]:opacity-80`),children:/* @__PURE__ */ (0,m.jsx)(O,{src:q,pending:oe,alt:e.name,shimmerLabel:`Generating hero image for ${e.name}`,className:i(D,`transition-transform duration-200 ease-out group-hover:[@media(hover:hover)]:scale-105`)})})}),o===`detail`&&f?/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex w-full flex-col gap-2`,"aria-hidden":!0,children:[/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-1/4 max-w-14 min-w-0`}),/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-4/5 min-w-0`}),/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-3/5 max-w-[140px] min-w-0`})]}):null]}),/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-2 py-1`,children:[/* @__PURE__ */ (0,m.jsx)(w,{id:`hero/title`,className:`w-full`,highlightInset:{top:8,right:8,bottom:8,left:8},children:/* @__PURE__ */ (0,m.jsx)(`h4`,{className:i(`w-full min-w-0 text-balance wrap-break-word text-text-strong`,J),children:e.name})}),f?/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex w-full min-w-0 items-center gap-2`,"aria-hidden":!0,children:[/* @__PURE__ */ (0,m.jsx)(k,{className:`h-3.5 w-1/2 max-w-[67px] min-w-0`}),/* @__PURE__ */ (0,m.jsx)(k,{className:`h-3.5 w-2/5 max-w-[50px] min-w-0`})]}):null,o===`detail`&&f?/* @__PURE__ */ (0,m.jsxs)(m.Fragment,{children:[/* @__PURE__ */ (0,m.jsx)(u,{type:`line`,spacing:!0}),/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex w-full min-w-0 flex-col gap-3`,"aria-hidden":!0,children:[/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex w-full min-w-0 items-center gap-2`,children:[/* @__PURE__ */ (0,m.jsx)(`span`,{className:`h-10 w-1/5 max-w-10 shrink-0 rounded-[10px] bg-depth-black-4`}),/* @__PURE__ */ (0,m.jsx)(`span`,{className:`h-10 w-2/3 max-w-[132px] min-w-0 shrink-0 rounded-[10px] bg-depth-black-4`})]}),/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex w-full min-w-0 flex-col gap-2`,children:[/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-1/2 max-w-[104px] min-w-0`}),/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-1/4 max-w-14 min-w-0`})]})]})]}):null,Z?/* @__PURE__ */ (0,m.jsxs)(m.Fragment,{children:[o===`inline`?/* @__PURE__ */ (0,m.jsx)(`div`,{className:`my-2 h-px w-full bg-depth-black-4`,"aria-hidden":!0}):null,o===`detail`?/* @__PURE__ */ (0,m.jsx)(u,{type:`line`,spacing:!0}):null,/* @__PURE__ */ (0,m.jsx)(w,{id:`list`,className:`w-full`,highlightInset:{top:6,right:8,bottom:6,left:8},children:/* @__PURE__ */ (0,m.jsx)(`ul`,{className:i(`list-outside list-disc pl-4 marker:text-text-soft`,o===`detail`?`pui-text-label-small space-y-2 text-text-strong`:`text-[10px] leading-4 text-text-sub`),children:e.bullets.map((t,n)=>/* @__PURE__ */ (0,m.jsx)(w,{id:`list/${n}`,as:`li`,highlightInset:{top:4,right:4,bottom:4,left:4},highlightRadius:`small`,children:t},`${e.id}-bullet-${n}`))})})]}):null,Q?/* @__PURE__ */ (0,m.jsxs)(m.Fragment,{children:[/* @__PURE__ */ (0,m.jsx)(`div`,{className:`my-2 h-px w-full bg-depth-black-4`,"aria-hidden":!0}),/* @__PURE__ */ (0,m.jsx)(w,{id:`details`,className:`w-full`,highlightInset:{top:6,right:8,bottom:6,left:8},children:/* @__PURE__ */ (0,m.jsx)(`p`,{className:i(o===`detail`?`pui-text-body-small text-text-sub`:`text-[10px] leading-4 text-text-sub`),children:e.body})})]}):null]})]})})]})]})}),/* @__PURE__ */ (0,m.jsx)(d,{images:Y,open:j,onClose:()=>M(!1),initialIndex:se})]})}function M(e){try{let{protocol:t}=new URL(e);return t===`http:`||t===`https:`?e:null}catch{return null}}function N(e){let t=(0,p.c)(18),{product:n,qaTestId:r}=e,i=r===void 0?`marketplace-pdp-card-chrome`:r,a;if(t[0]!==n.url){let e;t[2]===Symbol.for(`react.memo_cache_sentinel`)?(e=/^https?:\/\//,t[2]=e):e=t[2],a=n.url.replace(e,``),t[0]=n.url,t[1]=a}else a=t[1];let o=a,s;t[3]===n.url?s=t[4]:(s=M(n.url),t[3]=n.url,t[4]=s);let l=s,u;t[5]===Symbol.for(`react.memo_cache_sentinel`)?(u=/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex shrink-0 items-center gap-1`,"aria-hidden":!0,children:[/* @__PURE__ */ (0,m.jsx)(`span`,{className:`block size-2 rounded-full bg-negative-base`}),/* @__PURE__ */ (0,m.jsx)(`span`,{className:`block size-2 rounded-full bg-notice-base`}),/* @__PURE__ */ (0,m.jsx)(`span`,{className:`block size-2 rounded-full bg-positive-base`})]}),t[5]=u):u=t[5];let d;t[6]===o?d=t[7]:(d=/* @__PURE__ */ (0,m.jsx)(`div`,{className:`flex h-6 min-w-0 flex-1 items-center rounded-full bg-base-weak px-2.5 py-1`,children:/* @__PURE__ */ (0,m.jsx)(`p`,{className:`truncate font-mono text-[9px] leading-4 text-text-soft`,children:o})}),t[6]=o,t[7]=d);let h=`Open ${o} in a new tab`,g=l===null,_;t[8]===l?_=t[9]:(_=()=>{l&&window.open(l,`_blank`,`noopener,noreferrer`)},t[8]=l,t[9]=_);let v;t[10]!==h||t[11]!==g||t[12]!==_?(v=/* @__PURE__ */ (0,m.jsx)(c,{type:`button`,variant:`inverse`,icon:f,"aria-label":h,disabled:g,onClick:_}),t[10]=h,t[11]=g,t[12]=_,t[13]=v):v=t[13];let y;return t[14]!==i||t[15]!==d||t[16]!==v?(y=/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex shrink-0 items-center gap-3 border-b border-border-soft bg-base-inverse px-3.5 py-3`,"qa-test-id":i,children:[u,d,v]}),t[14]=i,t[15]=d,t[16]=v,t[17]=y):y=t[17],y}function P(e){let t=(0,p.c)(16),n,r,a,o,s,c;t[0]===e?(n=t[1],r=t[2],a=t[3],o=t[4],s=t[5],c=t[6]):({variant:o,fillHeight:s,className:r,children:n,qaTestId:c,...a}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=a,t[4]=o,t[5]=s,t[6]=c);let l=o===void 0?`inline`:o,u=s!==void 0&&s,d=c===void 0?`marketplace-pdp-card-container`:c,f=u?`h-full max-h-full`:`max-h-full`,h;t[7]!==r||t[8]!==f||t[9]!==l?(h=i(`@container flex w-full flex-col overflow-hidden rounded-[20px] border border-border-soft`,l===`detail`&&i(`min-h-0 min-w-0`,f),r),t[7]=r,t[8]=f,t[9]=l,t[10]=h):h=t[10];let g;return t[11]!==n||t[12]!==a||t[13]!==d||t[14]!==h?(g=/* @__PURE__ */ (0,m.jsx)(`div`,{"qa-test-id":d,...a,className:h,"data-card-container":!0,children:n}),t[11]=n,t[12]=a,t[13]=d,t[14]=h,t[15]=g):g=t[15],g}function F(e){let t=(0,p.c)(30),{product:n,canPreviewHero:r,onHeroClick:a,getSlot:o,className:s,variant:c,layoutMode:l,showSkeletons:u,showChrome:d,titleClassName:f,fillHeight:h,activeShotId:g,cameraMode:_,activeHeroIndex:v,onHeroIndexChange:y,onRegionClick:b,heroFit:x,heroAspectRatio:S,regionAnnotation:ee,qaTestId:te}=e,C=c===void 0?`inline`:c,ne=l===void 0?`auto`:l,w=u===void 0||u,T=d===void 0||d,re=h!==void 0&&h,E=_!==void 0&&_,D=te===void 0?`marketplace-pdp-card`:te,O=!T&&`rounded-none border-0`,k;t[0]!==s||t[1]!==O?(k=i(O,s),t[0]=s,t[1]=O,t[2]=k):k=t[2];let A;t[3]!==n||t[4]!==T?(A=T?/* @__PURE__ */ (0,m.jsx)(N,{product:n}):null,t[3]=n,t[4]=T,t[5]=A):A=t[5];let M;t[6]!==v||t[7]!==g||t[8]!==E||t[9]!==r||t[10]!==o||t[11]!==S||t[12]!==x||t[13]!==ne||t[14]!==a||t[15]!==y||t[16]!==b||t[17]!==n||t[18]!==ee||t[19]!==w||t[20]!==f||t[21]!==C?(M=/* @__PURE__ */ (0,m.jsx)(j,{product:n,canPreviewHero:r,onHeroClick:a,getSlot:o,variant:C,layoutMode:ne,showSkeletons:w,titleClassName:f,activeShotId:g,cameraMode:E,activeHeroIndex:v,onHeroIndexChange:y,onRegionClick:b,heroFit:x,heroAspectRatio:S,regionAnnotation:ee}),t[6]=v,t[7]=g,t[8]=E,t[9]=r,t[10]=o,t[11]=S,t[12]=x,t[13]=ne,t[14]=a,t[15]=y,t[16]=b,t[17]=n,t[18]=ee,t[19]=w,t[20]=f,t[21]=C,t[22]=M):M=t[22];let F;return t[23]!==re||t[24]!==D||t[25]!==A||t[26]!==M||t[27]!==k||t[28]!==C?(F=/* @__PURE__ */ (0,m.jsxs)(P,{variant:C,fillHeight:re,className:k,qaTestId:D,children:[A,M]}),t[23]=re,t[24]=D,t[25]=A,t[26]=M,t[27]=k,t[28]=C,t[29]=F):F=t[29],F}const I=Object.assign(F,{Container:P,Chrome:N,Body:j});export{I as MarketplacePdpCard};
1
+ import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../_chunks/react-CUaU2Z9V.js";import{t as n}from"../../_chunks/compiler-runtime-B3BlmaWz.js";import{t as r}from"../../_chunks/jsx-runtime-Dgn0yPdi.js";import{t as i}from"../../_chunks/dist-BNSTMZct.js";import{n as a}from"../../_chunks/react-CqECE5Y5.js";import{t as o}from"../../_chunks/AnimatePresence-DOl8NYHq.js";import{t as s}from"../../_chunks/use-reduced-motion-CNBdBisf.js";import{t as c}from"../../_chunks/ButtonInset-DmuC2cPs.js";import{n as l}from"../../_chunks/dist-CPlSvWC_.js";import{t as u}from"../../_chunks/Divider-LTM2QzTF.js";import{t as d}from"../../_chunks/Lightbox-BJYrdHsA.js";import{t as f}from"../../_chunks/ArrowUpRightIcon-BQhMqKWo.js";var p=n(),m=/* @__PURE__ */ e(r(),1),h=/* @__PURE__ */ e(t(),1);function g(e,t){if(!e)return null;if(t.has(e))return e;let n=e;for(;n.includes(`/`);)if(n=n.slice(0,n.lastIndexOf(`/`)),t.has(n))return n;return null}const _={x:0,y:0,scale:1},v={type:`spring`,duration:.55,bounce:0},y={type:`spring`,stiffness:360,damping:32};function b(e,t,n,r){let i=e.getBoundingClientRect(),a=t.getBoundingClientRect(),o=n.getBoundingClientRect(),s=(i.left-a.left)/r,c=(i.top-a.top)/r,l=i.width/r,u=i.height/r,d=o.width,f=o.height,p=Math.min(d/Math.max(1,l+56),f/Math.max(1,u+56),3);return{x:d/2-(s+l/2)*p,y:Math.min(f/2-(c+u/2)*p,28),scale:p}}const x=()=>void 0,S=(0,h.createContext)({effectiveRegionId:null,cameraMode:!1,cameraScale:1,annotationVisible:!1,registerRegion:x,unregisterRegion:x}),ee=S.Provider;function te(){return(0,h.useContext)(S)}const C={small:`rounded-lg`,medium:`rounded-xl`,large:`rounded-2xl`};function ne(e,t){if(!(t instanceof Element)||t.closest(`[data-pdp-region-id]`)!==e)return!1;let n=t.closest(`button, a[href], input, select, textarea, [role="button"]`);return n&&e.contains(n)?!1:window.getSelection()?.isCollapsed??!0}function w(e){let t=(0,p.c)(48),{id:n,as:r,children:c,className:l,highlightFill:u,highlightRadius:d,highlightInset:f,qaTestId:g}=e,_=r===void 0?`div`:r,v=u===void 0||u,b=d===void 0?`medium`:d,x=g===void 0?`pdp-region`:g,{effectiveRegionId:S,cameraMode:ee,cameraScale:w,annotation:E,annotationVisible:D,onRegionClick:O,registerRegion:k,unregisterRegion:A}=te(),j=s(),M=(0,h.useRef)(null),N=(0,h.useRef)(null),[P,F]=(0,h.useState)(!1),I;t[0]===Symbol.for(`react.memo_cache_sentinel`)?(I=e=>{M.current=e},t[0]=I):I=t[0];let L=I,R,z;t[1]!==n||t[2]!==k||t[3]!==A?(R=()=>{let e=M.current;if(e)return k(n,e),()=>A(n)},z=[n,k,A],t[1]=n,t[2]=k,t[3]=A,t[4]=R,t[5]=z):(R=t[4],z=t[5]),(0,h.useLayoutEffect)(R,z);let B=S===n,V=B&&E!=null,H=w>0?1/w:1,ie=L,ae=ee&&!j?.38:0,U=j?0:.16,W;t[6]===U?W=t[7]:(W={duration:U},t[6]=U,t[7]=W);let G=W,K,q;t[8]!==H||t[9]!==V?(K=()=>{if(!V){F(!1);return}let e=N.current,t=e?.querySelector(`[data-slot="tag"]`),n=e?.querySelector(`[data-pdp-annotation-box]`),r=t instanceof HTMLElement?t:n instanceof HTMLElement?n:null;if(!(e&&r))return;let i=r.offsetWidth*H,a=r.offsetHeight*H;F(a+24>e.clientHeight||i+24>e.clientWidth)},q=[V,H],t[8]=H,t[9]=V,t[10]=K,t[11]=q):(K=t[10],q=t[11]),(0,h.useLayoutEffect)(K,q);let oe=O&&`cursor-pointer`,J;t[12]!==l||t[13]!==oe?(J=i(`relative overflow-visible`,oe,l),t[12]=l,t[13]=oe,t[14]=J):J=t[14];let Y;t[15]!==n||t[16]!==O?(Y=O?e=>{ne(e.currentTarget,e.target)&&O(n)}:void 0,t[15]=n,t[16]=O,t[17]=Y):Y=t[17];let X=B?``:void 0,se=f?.top??0,ce=f?.right??0,le=f?.bottom??0,Z;t[18]!==E||t[19]!==D||t[20]!==G||t[21]!==ae||t[22]!==v||t[23]!==f?.bottom||t[24]!==f?.left||t[25]!==f?.right||t[26]!==f?.top||t[27]!==b||t[28]!==H||t[29]!==B||t[30]!==P||t[31]!==j||t[32]!==V?(Z=B?/* @__PURE__ */ (0,m.jsxs)(a.div,{ref:N,"aria-hidden":!D||void 0,className:`pointer-events-none absolute overflow-visible`,style:{top:-(f?.top??0),right:-(f?.right??0),bottom:-(f?.bottom??0),left:-(f?.left??0)},initial:{opacity:1},animate:{opacity:1},exit:{opacity:0,transition:G},"data-pdp-region-highlight":``,"qa-test-id":`pdp-region-highlight`,children:[/* @__PURE__ */ (0,m.jsx)(a.div,{"aria-hidden":!0,className:i(`absolute inset-0 border-2 border-secondary-base`,C[b],v&&`bg-depth-secondary-10`),initial:{opacity:0},animate:{opacity:1,transition:j?{duration:0}:{...y,delay:ae}}}),/* @__PURE__ */ (0,m.jsx)(o,{children:V?/* @__PURE__ */ (0,m.jsx)(a.div,{className:`pointer-events-none absolute overflow-visible`,"data-pdp-region-annotation":``,"data-pdp-annotation-placement":P?`outside`:`inside`,"qa-test-id":`pdp-region-annotation`,initial:!1,animate:{opacity:1},exit:{opacity:0,transition:G},style:P?{top:`calc(100% + 8px)`,right:0,bottom:`auto`}:{top:`auto`,right:12,bottom:12},onClick:re,onPointerDown:T,children:/* @__PURE__ */ (0,m.jsx)(`div`,{"data-pdp-annotation-box":``,"data-annotation-visible":D?``:void 0,className:i(`w-fit pdp-annotation-box`,D?`pointer-events-auto`:`pointer-events-none`),style:{transform:`scale(${H})`,transformOrigin:P?`top right`:`bottom right`},children:E})},`annotation`):null})]},`highlight`):null,t[18]=E,t[19]=D,t[20]=G,t[21]=ae,t[22]=v,t[23]=f?.bottom,t[24]=f?.left,t[25]=f?.right,t[26]=f?.top,t[27]=b,t[28]=H,t[29]=B,t[30]=P,t[31]=j,t[32]=V,t[33]=Z):Z=t[33];let Q;t[34]===Z?Q=t[35]:(Q=/* @__PURE__ */ (0,m.jsx)(o,{children:Z}),t[34]=Z,t[35]=Q);let $;return t[36]!==_||t[37]!==c||t[38]!==n||t[39]!==x||t[40]!==J||t[41]!==Y||t[42]!==X||t[43]!==se||t[44]!==ce||t[45]!==le||t[46]!==Q?($=/* @__PURE__ */ (0,m.jsxs)(_,{ref:ie,className:J,onClick:Y,"data-pdp-region-id":n,"data-active-region":X,"data-hang-inset-top":se,"data-hang-inset-right":ce,"data-hang-inset-bottom":le,"qa-test-id":x,children:[c,Q]}),t[36]=_,t[37]=c,t[38]=n,t[39]=x,t[40]=J,t[41]=Y,t[42]=X,t[43]=se,t[44]=ce,t[45]=le,t[46]=Q,t[47]=$):$=t[47],$}function T(e){return e.stopPropagation()}function re(e){return e.stopPropagation()}function E(e){let t=(0,p.c)(5),[n,r]=(0,h.useState)(!1),i,a;t[0]===e?(i=t[1],a=t[2]):(i=()=>{if(!e){r(!1);return}let t=new Image;return t.onload=()=>r(!0),t.onerror=()=>r(!0),t.src=e,()=>{t.onload=null,t.onerror=null}},a=[e],t[0]=e,t[1]=i,t[2]=a),(0,h.useEffect)(i,a);let o;return t[3]===n?o=t[4]:(o={ready:n},t[3]=n,t[4]=o),o}function D(e){let t=(0,p.c)(8),{className:n,label:r}=e,a;t[0]===n?a=t[1]:(a=i(`pointer-events-none relative animate-skeleton-shimmer overflow-hidden image-shimmer`,n),t[0]=n,t[1]=a);let o;t[2]===r?o=t[3]:(o=/* @__PURE__ */ (0,m.jsx)(`span`,{className:`sr-only`,children:r}),t[2]=r,t[3]=o);let s;return t[4]!==r||t[5]!==a||t[6]!==o?(s=/* @__PURE__ */ (0,m.jsx)(`div`,{role:`status`,"aria-live":`polite`,"aria-label":r,className:a,children:o}),t[4]=r,t[5]=a,t[6]=o,t[7]=s):s=t[7],s}function O(e){let t=(0,p.c)(7),{src:n,pending:r,alt:c,shimmerLabel:l,className:u}=e,d=s(),{ready:f}=E(r?void 0:n),h=r||!f,g=d?0:.18,_;return t[0]!==c||t[1]!==u||t[2]!==g||t[3]!==l||t[4]!==h||t[5]!==n?(_=/* @__PURE__ */ (0,m.jsx)(o,{initial:!1,mode:`sync`,children:h?/* @__PURE__ */ (0,m.jsx)(a.div,{className:`absolute inset-0`,initial:{opacity:1},animate:{opacity:1},exit:{opacity:0},transition:{duration:g},children:/* @__PURE__ */ (0,m.jsx)(D,{className:i(`size-full`,u),label:l})},`shimmer`):/* @__PURE__ */ (0,m.jsx)(a.img,{src:n,alt:c,className:i(`absolute inset-0 size-full object-cover`,u),initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:g}},`img-${n}`)}),t[0]=c,t[1]=u,t[2]=g,t[3]=l,t[4]=h,t[5]=n,t[6]=_):_=t[6],_}function k(e){let t=(0,p.c)(4),{className:n}=e,r;t[0]===n?r=t[1]:(r=i(`block rounded-full bg-base-weak`,n),t[0]=n,t[1]=r);let a;return t[2]===r?a=t[3]:(a=/* @__PURE__ */ (0,m.jsx)(`span`,{"aria-hidden":!0,className:r}),t[2]=r,t[3]=a),a}function A(e){let t=(0,p.c)(4),{className:n}=e,r;t[0]===n?r=t[1]:(r=i(`block rounded-full bg-depth-black-4`,n),t[0]=n,t[1]=r);let a;return t[2]===r?a=t[3]:(a=/* @__PURE__ */ (0,m.jsx)(`span`,{"aria-hidden":!0,className:r}),t[2]=r,t[3]=a),a}function j({product:e,canPreviewHero:t,onHeroClick:n,getSlot:r,variant:o=`inline`,layoutMode:c=`auto`,showSkeletons:f=!0,titleClassName:p,activeShotId:y,cameraMode:x=!1,activeHeroIndex:S,onHeroIndexChange:te,onRegionClick:C,heroFit:ne=`cover`,heroAspectRatio:T=`auto`,regionAnnotation:re,qaTestId:E=`marketplace-pdp-card-body`}){let D=ne===`contain`?`object-contain`:`object-cover`,[j,M]=(0,h.useState)(!1),N=s()??!1,P=o===`detail`&&c===`stacked`,F=P?T===`square`?`aspect-square w-full`:`h-[330px] w-full`:T===`square`?`aspect-square h-auto`:`aspect-12/13 h-auto`,I=new Set(e.thumbnailsPending??[]),L=(e.thumbnails.length>0?e.thumbnails:e.thumbnailsPending&&e.thumbnailsPending.length>0?e.thumbnailsPending.map(()=>``):[e.heroImage]).map((t,n)=>{let i=`thumb-${n}`,a=r(e.id,i),o=I.has(i)&&!a?.imageUrl;return{slot:i,url:a?.imageUrl??t,pending:o}}),R=Math.max(L.length-1,0),z=S===void 0?0:Math.min(Math.max(S,0),R),B=`${e.id}|${z}|${L.length}`,[V,H]=(0,h.useState)(z),[ie,ae]=(0,h.useState)(B);ie!==B&&(ae(B),H(z));let U=r(e.id,`hero`),W=U?.imageUrl??e.heroImage,G=!U?.imageUrl&&!e.heroImage,K=V===0?{url:W,pending:G}:L[V]??L[0],q=K?.url??e.heroImage,oe=!!K?.pending,J=p??(o===`detail`?`pui-text-heading-medium`:`pui-text-label-large`),Y=[],X=[];for(let t=0;t<L.length;t++){let n=t===0?W:L[t]?.url??``,i=t===0?G:L[t]?.pending??!1;if(n&&!i){let i=r(e.id,t===0?`hero`:`thumb-${t}`)?.beforeImageUrl;X[t]=Y.length,Y.push(i?{src:n,alt:e.name,before:i}:{src:n,alt:e.name})}}let se=X[V]??0,ce=Y.length>0&&X[V]!==void 0,le=t=>{if(!ce)return;let r=t.currentTarget.getBoundingClientRect(),i=V===0?`hero`:`thumb-${V}`;M(!0),n?.(e.id,{x:r.left+r.width/2,y:r.top+r.height/2},{lightboxSlot:i,fallbackImageUrl:q})},Z=e.bullets.length>0,Q=!!e.body,$=`focus-visible:shadow-[0_0_0_2px_var(--color-base-inverse),0_0_0_3px_var(--color-primary-base)]`,ue=(0,h.useRef)(/* @__PURE__ */ new Map),de=(0,h.useRef)((e,t)=>{ue.current.set(e,t)}).current,fe=(0,h.useRef)(e=>{ue.current.delete(e)}).current,pe=(0,h.useRef)(null),me=(0,h.useRef)(null),he=(0,h.useRef)(_),[ge,_e]=(0,h.useState)(_),[ve,ye]=(0,h.useState)(null),[be,xe]=(0,h.useState)(!0),[Se,Ce]=(0,h.useState)(null),we=ve===`hero`&&V!==z?void 0:re,Te={effectiveRegionId:ve,cameraMode:x,cameraScale:ge.scale,annotation:we,annotationVisible:!(!we||x&&!be),onRegionClick:C,registerRegion:de,unregisterRegion:fe},Ee=()=>{let e=g(y,ue.current);if(ye(e),!x){_e(_),he.current=_,xe(!0);return}let t=e?ue.current.get(e):null;if(!t||!pe.current||!me.current){_e(_),he.current=_,xe(!0);return}let n=b(t,me.current,pe.current,he.current.scale),r=he.current,i=n.x===r.x&&n.y===r.y&&n.scale===r.scale;he.current=n,_e(n),xe(i)};return(0,h.useEffect)(()=>{Ee()},[x,y]),(0,h.useEffect)(()=>{if(be||!x)return;let e=N?0:v.duration*1e3+50,t=window.setTimeout(()=>xe(!0),e);return()=>window.clearTimeout(t)},[be,x,ge,N]),l(`resize`,Ee),(0,h.useLayoutEffect)(()=>{let e=pe.current;e&&Ce(x&&y?t=>t??e.offsetHeight:null)},[x,y]),/* @__PURE__ */ (0,m.jsxs)(ee,{value:Te,children:[/* @__PURE__ */ (0,m.jsx)(`div`,{ref:pe,"qa-test-id":E,className:i(`bg-base-inverse`,x&&`overflow-hidden`,o===`detail`&&`flex min-h-0 flex-1 flex-col`,o!==`detail`&&`flex items-stretch`,Se!=null&&`flex-none overflow-hidden`),style:Se==null?void 0:{height:Se},children:/* @__PURE__ */ (0,m.jsxs)(a.div,{ref:me,"data-pdp-camera-set":``,"qa-test-id":`pdp-camera-set`,className:i(`bg-base-inverse`,o===`detail`&&`flex min-h-0 flex-1 flex-col`,o!==`detail`&&`flex w-full items-stretch`,Se!=null&&`flex-none`),style:{originX:0,originY:0},animate:{x:ge.x,y:ge.y,scale:ge.scale},transition:N?{duration:0}:v,onAnimationComplete:()=>xe(!0),children:[o===`detail`&&f?/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex h-12 shrink-0 items-center gap-2 px-3.5`,"aria-hidden":!0,children:[/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-1/6 max-w-24 min-w-0`}),/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-1/12 max-w-10 min-w-6`}),/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-1/9 max-w-16 min-w-0`})]}):null,/* @__PURE__ */ (0,m.jsxs)(`div`,{className:i(`flex min-h-0 items-stretch`,o===`detail`&&!f&&`pt-4`),children:[/* @__PURE__ */ (0,m.jsx)(`div`,{role:`group`,"aria-label":`Product images`,className:i(`flex shrink-0 flex-col items-center gap-2`,o===`detail`?`px-4 pb-4`:`p-4`),children:L.map((t,n)=>{let r=n===V,o=n===0?{url:W,pending:G}:t;return/* @__PURE__ */ (0,m.jsx)(a.button,{type:`button`,"aria-pressed":r,"aria-label":`Show image ${n+1}`,onClick:()=>{H(n),te?.(n)},whileTap:N?void 0:{scale:.95},transition:{duration:.15,ease:`easeOut`},className:i(`relative size-10 shrink-0 cursor-pointer overflow-hidden rounded-lg bg-base-weak transition-opacity outline-none`,$,r?i(`opacity-100`,`shadow-[0_0_0_2px_var(--color-base-inverse),0_0_0_3px_var(--color-primary-base)]`):`opacity-60 hover:opacity-100`),children:/* @__PURE__ */ (0,m.jsx)(O,{src:o.url,pending:o.pending,alt:``,shimmerLabel:`Generating image ${n+1}`})},`${e.id}-thumb-${n}`)})}),/* @__PURE__ */ (0,m.jsx)(`div`,{className:i(`min-w-0 flex-1 pr-3.5`,o===`detail`?`pb-4`:`py-4`),children:/* @__PURE__ */ (0,m.jsxs)(`div`,{className:i(`flex items-start gap-4`,o===`detail`?P?`flex-col`:`flex-col @[520px]:flex-row! @[520px]:flex-nowrap!`:`flex flex-col items-start gap-4 @[520px]:flex-row! @[520px]:flex-nowrap`),children:[/* @__PURE__ */ (0,m.jsxs)(`div`,{className:i(`flex w-full shrink-0 flex-col`,o===`detail`?`gap-5`:`gap-3`,o===`detail`&&!P&&`@[520px]:w-auto! @[520px]:max-w-88 @[520px]:min-w-48 @[520px]:shrink @[520px]:grow-0 @[520px]:basis-[44%] @[760px]:max-w-[24rem] @[760px]:basis-[48%]`,o!==`detail`&&`@[520px]:w-[240px]!`),children:[/* @__PURE__ */ (0,m.jsx)(w,{id:`hero`,className:`w-full`,highlightRadius:`large`,highlightFill:!1,highlightInset:{top:6,right:6,bottom:6,left:6},children:t?/* @__PURE__ */ (0,m.jsx)(a.button,{type:`button`,onClick:le,whileTap:N?void 0:{scale:.98},transition:{duration:.15,ease:`easeOut`},"aria-label":`Open image preview for ${e.name}`,className:i(`group relative block w-full cursor-zoom-in overflow-hidden rounded-xl bg-base-weak outline-none`,o===`detail`?F:`h-[260px]`,`transition-opacity duration-150 ease-out hover:[@media(hover:hover)]:opacity-80`,$),children:/* @__PURE__ */ (0,m.jsx)(O,{src:q,pending:oe,alt:e.name,shimmerLabel:`Generating hero image for ${e.name}`,className:i(D,`transition-transform duration-200 ease-out group-hover:[@media(hover:hover)]:scale-105`)})}):/* @__PURE__ */ (0,m.jsx)(`div`,{className:i(`group relative block w-full overflow-hidden rounded-xl bg-base-weak`,o===`detail`?F:`h-[260px]`,`transition-opacity duration-150 ease-out hover:[@media(hover:hover)]:opacity-80`),children:/* @__PURE__ */ (0,m.jsx)(O,{src:q,pending:oe,alt:e.name,shimmerLabel:`Generating hero image for ${e.name}`,className:i(D,`transition-transform duration-200 ease-out group-hover:[@media(hover:hover)]:scale-105`)})})}),o===`detail`&&f?/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex w-full flex-col gap-2`,"aria-hidden":!0,children:[/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-1/4 max-w-14 min-w-0`}),/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-4/5 min-w-0`}),/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-3/5 max-w-[140px] min-w-0`})]}):null]}),/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-2 py-1`,children:[/* @__PURE__ */ (0,m.jsx)(w,{id:`hero/title`,className:`w-full`,highlightInset:{top:8,right:8,bottom:8,left:8},children:/* @__PURE__ */ (0,m.jsx)(`h4`,{className:i(`w-full min-w-0 text-balance wrap-break-word text-text-strong`,J),children:e.name})}),f?/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex w-full min-w-0 items-center gap-2`,"aria-hidden":!0,children:[/* @__PURE__ */ (0,m.jsx)(k,{className:`h-3.5 w-1/2 max-w-[67px] min-w-0`}),/* @__PURE__ */ (0,m.jsx)(k,{className:`h-3.5 w-2/5 max-w-[50px] min-w-0`})]}):null,o===`detail`&&f?/* @__PURE__ */ (0,m.jsxs)(m.Fragment,{children:[/* @__PURE__ */ (0,m.jsx)(u,{type:`line`,spacing:!0}),/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex w-full min-w-0 flex-col gap-3`,"aria-hidden":!0,children:[/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex w-full min-w-0 items-center gap-2`,children:[/* @__PURE__ */ (0,m.jsx)(`span`,{className:`h-10 w-1/5 max-w-10 shrink-0 rounded-[10px] bg-depth-black-4`}),/* @__PURE__ */ (0,m.jsx)(`span`,{className:`h-10 w-2/3 max-w-[132px] min-w-0 shrink-0 rounded-[10px] bg-depth-black-4`})]}),/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex w-full min-w-0 flex-col gap-2`,children:[/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-1/2 max-w-[104px] min-w-0`}),/* @__PURE__ */ (0,m.jsx)(A,{className:`h-3.5 w-1/4 max-w-14 min-w-0`})]})]})]}):null,Z?/* @__PURE__ */ (0,m.jsxs)(m.Fragment,{children:[o===`inline`?/* @__PURE__ */ (0,m.jsx)(`div`,{className:`my-2 h-px w-full bg-depth-black-4`,"aria-hidden":!0}):null,o===`detail`?/* @__PURE__ */ (0,m.jsx)(u,{type:`line`,spacing:!0}):null,/* @__PURE__ */ (0,m.jsx)(w,{id:`list`,className:`w-full`,highlightInset:{top:6,right:8,bottom:6,left:8},children:/* @__PURE__ */ (0,m.jsx)(`ul`,{className:i(`list-outside list-disc pl-4 marker:text-text-soft`,o===`detail`?`pui-text-label-small space-y-2 text-text-strong`:`text-[10px] leading-4 text-text-sub`),children:e.bullets.map((t,n)=>/* @__PURE__ */ (0,m.jsx)(w,{id:`list/${n}`,as:`li`,highlightInset:{top:4,right:4,bottom:4,left:4},highlightRadius:`small`,children:t},`${e.id}-bullet-${n}`))})})]}):null,Q?/* @__PURE__ */ (0,m.jsxs)(m.Fragment,{children:[/* @__PURE__ */ (0,m.jsx)(`div`,{className:`my-2 h-px w-full bg-depth-black-4`,"aria-hidden":!0}),/* @__PURE__ */ (0,m.jsx)(w,{id:`details`,className:`w-full`,highlightInset:{top:6,right:8,bottom:6,left:8},children:/* @__PURE__ */ (0,m.jsx)(`p`,{className:i(o===`detail`?`pui-text-body-small text-text-sub`:`text-[10px] leading-4 text-text-sub`),children:e.body})})]}):null]})]})})]})]})}),/* @__PURE__ */ (0,m.jsx)(d,{images:Y,open:j,onClose:()=>M(!1),initialIndex:se})]})}function M(e){try{let{protocol:t}=new URL(e);return t===`http:`||t===`https:`?e:null}catch{return null}}function N(e){let t=(0,p.c)(18),{product:n,qaTestId:r}=e,i=r===void 0?`marketplace-pdp-card-chrome`:r,a;if(t[0]!==n.url){let e;t[2]===Symbol.for(`react.memo_cache_sentinel`)?(e=/^https?:\/\//,t[2]=e):e=t[2],a=n.url.replace(e,``),t[0]=n.url,t[1]=a}else a=t[1];let o=a,s;t[3]===n.url?s=t[4]:(s=M(n.url),t[3]=n.url,t[4]=s);let l=s,u;t[5]===Symbol.for(`react.memo_cache_sentinel`)?(u=/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex shrink-0 items-center gap-1`,"aria-hidden":!0,children:[/* @__PURE__ */ (0,m.jsx)(`span`,{className:`block size-2 rounded-full bg-negative-base`}),/* @__PURE__ */ (0,m.jsx)(`span`,{className:`block size-2 rounded-full bg-notice-base`}),/* @__PURE__ */ (0,m.jsx)(`span`,{className:`block size-2 rounded-full bg-positive-base`})]}),t[5]=u):u=t[5];let d;t[6]===o?d=t[7]:(d=/* @__PURE__ */ (0,m.jsx)(`div`,{className:`flex h-6 min-w-0 flex-1 items-center rounded-full bg-base-weak px-2.5 py-1`,children:/* @__PURE__ */ (0,m.jsx)(`p`,{className:`truncate font-mono text-[9px] leading-4 text-text-soft`,children:o})}),t[6]=o,t[7]=d);let h=`Open ${o} in a new tab`,g=l===null,_;t[8]===l?_=t[9]:(_=()=>{l&&window.open(l,`_blank`,`noopener,noreferrer`)},t[8]=l,t[9]=_);let v;t[10]!==h||t[11]!==g||t[12]!==_?(v=/* @__PURE__ */ (0,m.jsx)(c,{type:`button`,variant:`inverse`,icon:f,"aria-label":h,disabled:g,onClick:_}),t[10]=h,t[11]=g,t[12]=_,t[13]=v):v=t[13];let y;return t[14]!==i||t[15]!==d||t[16]!==v?(y=/* @__PURE__ */ (0,m.jsxs)(`div`,{className:`flex shrink-0 items-center gap-3 border-b border-border-soft bg-base-inverse px-3.5 py-3`,"qa-test-id":i,children:[u,d,v]}),t[14]=i,t[15]=d,t[16]=v,t[17]=y):y=t[17],y}function P(e){let t=(0,p.c)(16),n,r,a,o,s,c;t[0]===e?(n=t[1],r=t[2],a=t[3],o=t[4],s=t[5],c=t[6]):({variant:o,fillHeight:s,className:r,children:n,qaTestId:c,...a}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=a,t[4]=o,t[5]=s,t[6]=c);let l=o===void 0?`inline`:o,u=s!==void 0&&s,d=c===void 0?`marketplace-pdp-card-container`:c,f=u?`h-full max-h-full`:`max-h-full`,h;t[7]!==r||t[8]!==f||t[9]!==l?(h=i(`@container flex w-full flex-col overflow-hidden rounded-[20px] border border-border-soft`,l===`detail`&&i(`min-h-0 min-w-0`,f),r),t[7]=r,t[8]=f,t[9]=l,t[10]=h):h=t[10];let g;return t[11]!==n||t[12]!==a||t[13]!==d||t[14]!==h?(g=/* @__PURE__ */ (0,m.jsx)(`div`,{"qa-test-id":d,...a,className:h,"data-card-container":!0,children:n}),t[11]=n,t[12]=a,t[13]=d,t[14]=h,t[15]=g):g=t[15],g}function F(e){let t=(0,p.c)(30),{product:n,canPreviewHero:r,onHeroClick:a,getSlot:o,className:s,variant:c,layoutMode:l,showSkeletons:u,showChrome:d,titleClassName:f,fillHeight:h,activeShotId:g,cameraMode:_,activeHeroIndex:v,onHeroIndexChange:y,onRegionClick:b,heroFit:x,heroAspectRatio:S,regionAnnotation:ee,qaTestId:te}=e,C=c===void 0?`inline`:c,ne=l===void 0?`auto`:l,w=u===void 0||u,T=d===void 0||d,re=h!==void 0&&h,E=_!==void 0&&_,D=te===void 0?`marketplace-pdp-card`:te,O=!T&&`rounded-none border-0`,k;t[0]!==s||t[1]!==O?(k=i(O,s),t[0]=s,t[1]=O,t[2]=k):k=t[2];let A;t[3]!==n||t[4]!==T?(A=T?/* @__PURE__ */ (0,m.jsx)(N,{product:n}):null,t[3]=n,t[4]=T,t[5]=A):A=t[5];let M;t[6]!==v||t[7]!==g||t[8]!==E||t[9]!==r||t[10]!==o||t[11]!==S||t[12]!==x||t[13]!==ne||t[14]!==a||t[15]!==y||t[16]!==b||t[17]!==n||t[18]!==ee||t[19]!==w||t[20]!==f||t[21]!==C?(M=/* @__PURE__ */ (0,m.jsx)(j,{product:n,canPreviewHero:r,onHeroClick:a,getSlot:o,variant:C,layoutMode:ne,showSkeletons:w,titleClassName:f,activeShotId:g,cameraMode:E,activeHeroIndex:v,onHeroIndexChange:y,onRegionClick:b,heroFit:x,heroAspectRatio:S,regionAnnotation:ee}),t[6]=v,t[7]=g,t[8]=E,t[9]=r,t[10]=o,t[11]=S,t[12]=x,t[13]=ne,t[14]=a,t[15]=y,t[16]=b,t[17]=n,t[18]=ee,t[19]=w,t[20]=f,t[21]=C,t[22]=M):M=t[22];let F;return t[23]!==re||t[24]!==D||t[25]!==A||t[26]!==M||t[27]!==k||t[28]!==C?(F=/* @__PURE__ */ (0,m.jsxs)(P,{variant:C,fillHeight:re,className:k,qaTestId:D,children:[A,M]}),t[23]=re,t[24]=D,t[25]=A,t[26]=M,t[27]=k,t[28]=C,t[29]=F):F=t[29],F}const I=Object.assign(F,{Container:P,Chrome:N,Body:j});export{I as MarketplacePdpCard};
@@ -0,0 +1 @@
1
+ export{t as trimText}from"../../_chunks/trim-text-DHZGuJ9c.js";
@@ -0,0 +1 @@
1
+ import{a as e}from"../../_chunks/rolldown-runtime-BWaJ3C7D.js";import{t}from"../../_chunks/react-CUaU2Z9V.js";import{t as n}from"../../_chunks/compiler-runtime-B3BlmaWz.js";import{t as r}from"../../_chunks/jsx-runtime-Dgn0yPdi.js";import{t as i}from"../../_chunks/dist-BNSTMZct.js";import{a,n as o,r as s}from"../../_chunks/Tooltip-abTz0p9j.js";import{t as c}from"../../_chunks/trim-text-DHZGuJ9c.js";var l=n(),u=/* @__PURE__ */ e(r(),1),d=/* @__PURE__ */ e(t(),1);function f(e,t){typeof e==`function`?e(t):e&&(e.current=t)}function p(e){return e.scrollWidth>e.clientWidth}function m(e,t){let n=()=>t(p(e));n();let r=requestAnimationFrame(n),i=new ResizeObserver(n);i.observe(e);let a=e.parentElement;a?.addEventListener(`focusin`,n),a?.addEventListener(`pointerenter`,n);let o=typeof document<`u`?document.fonts:void 0;return o?.addEventListener(`loadingdone`,n),o?.ready.then(()=>{e.isConnected&&n()}),()=>{cancelAnimationFrame(r),i.disconnect(),a?.removeEventListener(`focusin`,n),a?.removeEventListener(`pointerenter`,n),o?.removeEventListener(`loadingdone`,n)}}function h(e){let t=(0,l.c)(57),n,r,h,g,_,v,y;t[0]===e?(n=t[1],r=t[2],h=t[3],g=t[4],_=t[5],v=t[6],y=t[7]):({text:y,limit:r,side:_,className:n,qaTestId:v,ref:g,...h}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=h,t[4]=g,t[5]=_,t[6]=v,t[7]=y);let b=_===void 0?`bottom`:_,x=v===void 0?`trim-text`:v,S=(0,d.useRef)(null),C=(0,d.useRef)(null),[w,T]=(0,d.useState)(!1),[E,D]=(0,d.useState)(!1),O,k,A,j,M,N,P,F;if(t[8]!==n||t[9]!==r||t[10]!==w||t[11]!==h||t[12]!==x||t[13]!==g||t[14]!==b||t[15]!==y){F=Symbol.for(`react.early_return_sentinel`);bb0:{let e=i(`pui-text-body-medium text-text-strong`,n);if(r!=null&&r>=1){let n;t[24]!==r||t[25]!==y?(n=c(y,r),t[24]=r,t[25]=y,t[26]=n):n=t[26];let i=n;if(i===y){F=/* @__PURE__ */ (0,u.jsx)(`span`,{ref:g,className:e,"qa-test-id":x,...h,children:y});break bb0}let l=/* @__PURE__ */ (0,u.jsx)(a,{asChild:!0,children:/* @__PURE__ */ (0,u.jsx)(`span`,{ref:g,className:e,"qa-test-id":x,...h,tabIndex:0,children:i})}),d;t[27]!==b||t[28]!==y?(d=/* @__PURE__ */ (0,u.jsx)(s,{side:b,className:`max-w-xs break-words whitespace-normal`,children:y}),t[27]=b,t[28]=y,t[29]=d):d=t[29];let f;t[30]!==l||t[31]!==d?(f=/* @__PURE__ */ (0,u.jsxs)(o,{children:[l,d]}),t[30]=l,t[31]=d,t[32]=f):f=t[32],F=f;break bb0}k=o,N=w,t[33]===Symbol.for(`react.memo_cache_sentinel`)?(P=e=>{let t=S.current;T(e&&t!=null&&p(t))},t[33]=P):P=t[33],O=a,M=!0,t[34]!==g||t[35]!==y?(A=e=>{C.current?.(),C.current=null,S.current=e,f(g,e),e&&(y.length===0?D(!1):C.current=m(e,D))},t[34]=g,t[35]=y,t[36]=A):A=t[36],j=i(e,`block w-full min-w-0 truncate`)}t[8]=n,t[9]=r,t[10]=w,t[11]=h,t[12]=x,t[13]=g,t[14]=b,t[15]=y,t[16]=O,t[17]=k,t[18]=A,t[19]=j,t[20]=M,t[21]=N,t[22]=P,t[23]=F}else O=t[16],k=t[17],A=t[18],j=t[19],M=t[20],N=t[21],P=t[22],F=t[23];if(F!==Symbol.for(`react.early_return_sentinel`))return F;let I=E?0:void 0,L;t[37]!==h||t[38]!==x||t[39]!==A||t[40]!==j||t[41]!==I||t[42]!==y?(L=/* @__PURE__ */ (0,u.jsx)(`span`,{ref:A,className:j,"qa-test-id":x,...h,tabIndex:I,children:y}),t[37]=h,t[38]=x,t[39]=A,t[40]=j,t[41]=I,t[42]=y,t[43]=L):L=t[43];let R;t[44]!==O||t[45]!==L||t[46]!==M?(R=/* @__PURE__ */ (0,u.jsx)(O,{asChild:M,children:L}),t[44]=O,t[45]=L,t[46]=M,t[47]=R):R=t[47];let z;t[48]!==b||t[49]!==y?(z=/* @__PURE__ */ (0,u.jsx)(s,{side:b,className:`max-w-xs break-words whitespace-normal`,children:y}),t[48]=b,t[49]=y,t[50]=z):z=t[50];let B;return t[51]!==k||t[52]!==R||t[53]!==z||t[54]!==N||t[55]!==P?(B=/* @__PURE__ */ (0,u.jsxs)(k,{open:N,onOpenChange:P,children:[R,z]}),t[51]=k,t[52]=R,t[53]=z,t[54]=N,t[55]=P,t[56]=B):B=t[56],B}export{h as TrimText,c as trimText};
@@ -1 +1 @@
1
- import{a as e}from"./rolldown-runtime-BWaJ3C7D.js";import{v as t}from"./transitions-Cn0Tw_ua.js";import{t as n}from"./react-CUaU2Z9V.js";import{t as r}from"./compiler-runtime-B3BlmaWz.js";import{t as i}from"./jsx-runtime-Dgn0yPdi.js";import{t as a}from"./dist-BNSTMZct.js";import{n as o}from"./react-CqECE5Y5.js";import{t as s}from"./AnimatePresence-DOl8NYHq.js";import{t as c}from"./use-reduced-motion-CNBdBisf.js";import{t as l}from"./Button-BfpdYdpq.js";import{i as ee}from"./dist-BRMXKypj.js";import{n as u}from"./dist-CPlSvWC_.js";import{t as d}from"./ScrollGradientWrapper-h6yq23DQ.js";import{t as f}from"./HelperText-DQxQjdKH.js";import{t as p}from"./TextareaField-t1AdxrBG.js";import{t as m}from"./Lightbox-BLNBf1tQ.js";import{t as h}from"./Waveform-Chgk_Kb1.js";import{t as g}from"./PaperclipIcon-B8vj2DdY.js";import{t as _}from"./Modal-B8krPuKb.js";import{t as v}from"./SelectFrameIcon-C5h9EvIp.js";import{t as y}from"./CameraIcon-D88ZfWsN.js";import{t as b}from"./MicrophoneIcon-BuLtN1VU.js";import{t as x}from"./MicrophoneMuteIcon-BL-krIAi.js";import{t as S}from"./StopIcon-BHLP_d0D.js";import{t as C}from"./VideoCamera2Icon-Bya8Tob2.js";import{n as w,t as T}from"./PromptHint-poWleFeL.js";import{_ as te,c as ne,i as E,m as D,o as O,s as k}from"./collect-feedback-context-F1nAqZ8M.js";import{t as A}from"./CheckCircleIcon-hRaPf6jV.js";function re(e,t){return[...e.map(e=>({src:e.previewUrl,alt:e.file.name})),...t.map(e=>({src:e.previewUrl,alt:e.file.name,mediaType:`video`}))]}var j=r(),M=/* @__PURE__ */ e(i(),1),N=/* @__PURE__ */ e(n(),1);const P=`attach`;function F(e){let t=(0,j.c)(145),{selectedMode:n,onSelectMode:r,screenshots:i,recordings:o,elements:s,onRemoveScreenshot:c,onRemoveRecording:u,onRemoveElement:p,onAddMedia:_,screenshotsAtLimit:te,error:ne,isRecording:E,recordingElapsedMs:O,onStopRecording:A,audioEnabled:F,onAudioEnabledChange:I,audioLevels:L,onHighlightElement:R,isEngaged:z,onDone:B,onExit:V,layout:H,className:U,introHint:W,qaTestId:G}=e,K=te!==void 0&&te,q=ne===void 0?null:ne,J=E!==void 0&&E,ie=O===void 0?0:O,Y=F===void 0||F,X=z!==void 0&&z,ae=H===void 0?`compact`:H,Z=G===void 0?`feedback-capture-bar`:G,{_:Q}=ee(),[oe,se]=(0,N.useState)(null),ce=(0,N.useRef)(null),le=ae===`compact`,ue=i.length>0||o.length>0||s.length>0,de;t[0]===Q?de=t[1]:(de=Q({id:`IxyZXD`}),t[0]=Q,t[1]=de);let fe=de,pe;t[2]===Q?pe=t[3]:(pe=Q({id:`w80YWM`}),t[2]=Q,t[3]=pe);let me=pe,he;t[4]===Q?he=t[5]:(he=Q({id:`rG3WVm`}),t[4]=Q,t[5]=he);let ge=he,_e;t[6]===Q?_e=t[7]:(_e=Q({id:`N5OFex`}),t[6]=Q,t[7]=_e);let ve=_e,ye;t[8]!==Q||t[9]!==Y?(ye=Q(Y?{id:`39h1ax`}:{id:`pPT0bd`}),t[8]=Q,t[9]=Y,t[10]=ye):ye=t[10];let be=ye,xe;t[11]!==Q||t[12]!==Y?(xe=Q(Y?{id:`R7SsBE`}:{id:`rn6SBY`}),t[11]=Q,t[12]=Y,t[13]=xe):xe=t[13];let Se=xe,Ce=!Y,we;t[14]===Se?we=t[15]:(we={content:Se,side:`top`},t[14]=Se,t[15]=we);let Te=Y?b:x,Ee;t[16]===Te?Ee=t[17]:(Ee={icon:Te},t[16]=Te,t[17]=Ee);let De;t[18]!==Y||t[19]!==I?(De=()=>I?.(!Y),t[18]=Y,t[19]=I,t[20]=De):De=t[20];let Oe=`${Z}-mute`,ke;t[21]!==be||t[22]!==Ce||t[23]!==we||t[24]!==Ee||t[25]!==De||t[26]!==Oe?(ke=/* @__PURE__ */ (0,M.jsx)(l,{type:`button`,variant:`inverse`,size:`medium`,"aria-label":be,"aria-pressed":Ce,tooltipProps:we,prefix:Ee,onClick:De,qaTestId:Oe}),t[21]=be,t[22]=Ce,t[23]=we,t[24]=Ee,t[25]=De,t[26]=Oe,t[27]=ke):ke=t[27];let Ae=ke,je;t[28]!==fe||t[29]!==K?(je={value:`screenshot`,label:fe,icon:y,disabled:K},t[28]=fe,t[29]=K,t[30]=je):je=t[30];let Me;t[31]===me?Me=t[32]:(Me={value:`recording`,label:me,icon:C,disabled:!1},t[31]=me,t[32]=Me);let Ne;t[33]===ge?Ne=t[34]:(Ne={value:`element`,label:ge,icon:v,disabled:!1},t[33]=ge,t[34]=Ne);let Pe;t[35]!==ve||t[36]!==_?(Pe=_?[{value:P,label:ve,icon:g,disabled:!1}]:[],t[35]=ve,t[36]=_,t[37]=Pe):Pe=t[37];let Fe;t[38]!==je||t[39]!==Me||t[40]!==Ne||t[41]!==Pe?(Fe=[je,Me,Ne,...Pe],t[38]=je,t[39]=Me,t[40]=Ne,t[41]=Pe,t[42]=Fe):Fe=t[42];let Ie=Fe,Le;t[43]===Q?Le=t[44]:(Le=Q({id:`QQ_wAv`}),t[43]=Q,t[44]=Le);let Re=`${Z}-modes`,ze;t[45]!==le||t[46]!==r||t[47]!==Z||t[48]!==n||t[49]!==Ie?(ze=Ie.map((e,t)=>{let i=e.value===P,o=!i&&e.value===n,s=!le&&!i;return/* @__PURE__ */ (0,M.jsxs)(N.Fragment,{children:[t>0?/* @__PURE__ */ (0,M.jsx)(`div`,{"aria-hidden":!0,className:a(`h-4 w-px shrink-0 rounded-full bg-depth-black-8`,(Ie[t-1]?.value===n||e.value===n)&&`opacity-0`)}):null,/* @__PURE__ */ (0,M.jsx)(l,{type:`button`,variant:`inverse`,size:`medium`,className:o?`bg-primary-light`:void 0,"aria-pressed":i?void 0:o,"aria-label":s?void 0:e.label,tooltipProps:s?void 0:{content:e.label,side:`top`},prefix:{icon:e.icon,color:o?`primary-dark`:void 0},disabled:e.disabled,onClick:()=>{i?ce.current?.click():r(e.value)},qaTestId:`${Z}-mode-${e.value}`,children:s?/* @__PURE__ */ (0,M.jsx)(`span`,{className:o?`text-primary-dark`:void 0,children:e.label}):void 0})]},e.value)}),t[45]=le,t[46]=r,t[47]=Z,t[48]=n,t[49]=Ie,t[50]=ze):ze=t[50];let Be;t[51]!==Le||t[52]!==Re||t[53]!==ze?(Be=/* @__PURE__ */ (0,M.jsx)(`div`,{className:`flex min-w-0 items-center gap-0.5`,role:`group`,"aria-label":Le,"qa-test-id":Re,children:ze}),t[51]=Le,t[52]=Re,t[53]=ze,t[54]=Be):Be=t[54];let Ve=n===`recording`?Ae:null,He;t[55]!==Be||t[56]!==Ve?(He=/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`flex min-w-0 items-center gap-0.5`,children:[Be,Ve]}),t[55]=Be,t[56]=Ve,t[57]=He):He=t[57];let Ue;t[58]!==_||t[59]!==Z?(Ue=_?/* @__PURE__ */ (0,M.jsx)(`input`,{ref:ce,className:`hidden`,type:`file`,multiple:!0,accept:D,onChange:e=>{let t=Array.from(e.target.files??[]);e.target.value=``,t.length>0&&_(t)},"qa-test-id":`${Z}-media-input`}):null,t[58]=_,t[59]=Z,t[60]=Ue):Ue=t[60];let We;t[61]!==He||t[62]!==Ue?(We=/* @__PURE__ */ (0,M.jsxs)(M.Fragment,{children:[He,Ue]}),t[61]=He,t[62]=Ue,t[63]=We):We=t[63];let Ge=We,Ke=`${Z}-exit`,qe;t[64]===Q?qe=t[65]:(qe=Q({id:`dEgA5A`}),t[64]=Q,t[65]=qe);let Je;t[66]!==V||t[67]!==Ke||t[68]!==qe?(Je=/* @__PURE__ */ (0,M.jsx)(l,{type:`button`,variant:`stroke`,size:`medium`,onClick:V,qaTestId:Ke,children:qe}),t[66]=V,t[67]=Ke,t[68]=qe,t[69]=Je):Je=t[69];let Ye;t[70]!==Q||t[71]!==X||t[72]!==B||t[73]!==Z?(Ye=X?null:/* @__PURE__ */ (0,M.jsx)(l,{type:`button`,variant:`strong`,size:`medium`,onClick:B,qaTestId:`${Z}-done`,children:Q({id:`hXzOVo`})}),t[70]=Q,t[71]=X,t[72]=B,t[73]=Z,t[74]=Ye):Ye=t[74];let Xe;t[75]!==Je||t[76]!==Ye?(Xe=/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`flex shrink-0 items-center gap-2`,children:[Je,Ye]}),t[75]=Je,t[76]=Ye,t[77]=Xe):Xe=t[77];let Ze=Xe,Qe;t[78]!==W||t[79]!==Z?(Qe=W?/* @__PURE__ */ (0,M.jsx)(T,{text:W.text,onDismiss:W.onDismiss,qaTestId:`${Z}-intro-hint`}):null,t[78]=W,t[79]=Z,t[80]=Qe):Qe=t[80];let $e;t[81]===U?$e=t[82]:($e=a(`flex w-full min-w-0 flex-col gap-2`,U),t[81]=U,t[82]=$e);let et;t[83]===Symbol.for(`react.memo_cache_sentinel`)?(et=a(`flex flex-col gap-2 rounded-[20px] bg-base-weak p-2`,`shadow-floating-composer`),t[83]=et):et=t[83];let tt;t[84]!==Q||t[85]!==s||t[86]!==ue||t[87]!==R||t[88]!==p||t[89]!==u||t[90]!==c||t[91]!==Z||t[92]!==o||t[93]!==i?(tt=ue?/* @__PURE__ */ (0,M.jsxs)(d,{gradientSurface:`weak`,className:`min-w-0`,scrollClassName:`items-center gap-2 px-1 pt-1`,"aria-label":Q({id:`_0EAFR`}),qaTestId:`${Z}-captures`,children:[i.map((e,t)=>/* @__PURE__ */ (0,M.jsx)(w,{type:`image`,imageSrc:e.previewUrl,onExpand:()=>se(t),onRemove:()=>c(e.id)},e.id)),o.map((e,t)=>{let n=t+1;return/* @__PURE__ */ (0,M.jsx)(w,{type:`file`,fileName:o.length>1?Q({id:`gnRaOE`,values:{number:n}}):Q({id:`Ag2QUH`}),fileMetadata:e.file.type||`webm`,icon:C,onExpand:()=>se(i.length+t),onRemove:()=>u(e.id)},e.id)}),s.map(e=>/* @__PURE__ */ (0,M.jsx)(w,{type:`file`,icon:v,fileName:e.payload.instruction,fileMetadata:e.payload.tagName.toLowerCase(),onExpand:()=>R?.(e.commentId),onRemove:()=>p(e.commentId)},e.commentId))]}):null,t[84]=Q,t[85]=s,t[86]=ue,t[87]=R,t[88]=p,t[89]=u,t[90]=c,t[91]=Z,t[92]=o,t[93]=i,t[94]=tt):tt=t[94];let $;t[95]!==Q||t[96]!==Y||t[97]!==L||t[98]!==J||t[99]!==be||t[100]!==Se||t[101]!==I||t[102]!==V||t[103]!==A||t[104]!==Z||t[105]!==ie?($=J?/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`flex items-center gap-3 rounded-2xl bg-depth-black-4 px-3 py-2`,role:`status`,"aria-live":`polite`,"aria-label":Q({id:`XmKjfh`}),"qa-test-id":`${Z}-recording`,children:[/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`flex items-center gap-2`,children:[/* @__PURE__ */ (0,M.jsx)(`span`,{className:`size-2 shrink-0 animate-pulse rounded-full bg-negative-base motion-reduce:animate-none`,"aria-hidden":!0}),/* @__PURE__ */ (0,M.jsx)(`p`,{className:`pui-text-mono-small-alt shrink-0 text-text-sub tabular-nums`,children:k(ie)})]}),/* @__PURE__ */ (0,M.jsx)(h,{interactive:!1,isPlaying:Y,levels:L,className:`min-w-20 flex-1`,qaTestId:`${Z}-audio-wave`}),/* @__PURE__ */ (0,M.jsx)(l,{type:`button`,variant:`inverse`,size:`small`,"aria-label":be,"aria-pressed":!Y,tooltipProps:{content:Se,side:`top`},prefix:{icon:Y?b:x},onClick:()=>I?.(!Y),qaTestId:`${Z}-mute`}),/* @__PURE__ */ (0,M.jsx)(l,{type:`button`,variant:`strong`,size:`small`,"aria-label":Q({id:`pJ_IRc`}),prefix:{icon:S},onClick:A,qaTestId:`${Z}-stop-recording`}),/* @__PURE__ */ (0,M.jsx)(l,{type:`button`,variant:`stroke`,size:`small`,onClick:V,qaTestId:`${Z}-exit`,children:Q({id:`dEgA5A`})})]}):null,t[95]=Q,t[96]=Y,t[97]=L,t[98]=J,t[99]=be,t[100]=Se,t[101]=I,t[102]=V,t[103]=A,t[104]=Z,t[105]=ie,t[106]=$):$=t[106];let nt=ae===`stacked`?`flex-col`:`flex-nowrap items-center justify-between`,rt=J&&`hidden`,it;t[107]!==nt||t[108]!==rt?(it=a(`flex min-w-0 gap-2`,nt,rt),t[107]=nt,t[108]=rt,t[109]=it):it=t[109];let at;t[110]===Q?at=t[111]:(at=Q({id:`KoDfwZ`}),t[110]=Q,t[111]=at);let ot;t[112]!==Ze||t[113]!==ae||t[114]!==Ge?(ot=ae===`stacked`?/* @__PURE__ */ (0,M.jsxs)(M.Fragment,{children:[Ge,/* @__PURE__ */ (0,M.jsx)(`div`,{className:`flex justify-end`,children:Ze})]}):/* @__PURE__ */ (0,M.jsxs)(M.Fragment,{children:[Ge,Ze]}),t[112]=Ze,t[113]=ae,t[114]=Ge,t[115]=ot):ot=t[115];let st;t[116]!==it||t[117]!==at||t[118]!==ot?(st=/* @__PURE__ */ (0,M.jsx)(`div`,{className:it,role:`toolbar`,"aria-label":at,children:ot}),t[116]=it,t[117]=at,t[118]=ot,t[119]=st):st=t[119];let ct;t[120]!==q||t[121]!==Z?(ct=q?/* @__PURE__ */ (0,M.jsx)(`div`,{className:`px-1 pb-1`,"qa-test-id":`${Z}-error`,children:/* @__PURE__ */ (0,M.jsx)(f,{state:`error`,wrap:!0,children:q})}):null,t[120]=q,t[121]=Z,t[122]=ct):ct=t[122];let lt;t[123]!==tt||t[124]!==$||t[125]!==st||t[126]!==ct?(lt=/* @__PURE__ */ (0,M.jsxs)(`div`,{className:et,children:[tt,$,st,ct]}),t[123]=tt,t[124]=$,t[125]=st,t[126]=ct,t[127]=lt):lt=t[127];let ut;t[128]!==o||t[129]!==i?(ut=re(i,o),t[128]=o,t[129]=i,t[130]=ut):ut=t[130];let dt=oe!=null,ft=oe??0,pt;t[131]===Symbol.for(`react.memo_cache_sentinel`)?(pt=()=>se(null),t[131]=pt):pt=t[131];let mt=`${Z}-lightbox`,ht;t[132]!==ut||t[133]!==dt||t[134]!==ft||t[135]!==mt?(ht=/* @__PURE__ */ (0,M.jsx)(m,{images:ut,open:dt,initialIndex:ft,onClose:pt,qaTestId:mt}),t[132]=ut,t[133]=dt,t[134]=ft,t[135]=mt,t[136]=ht):ht=t[136];let gt;t[137]!==Z||t[138]!==$e||t[139]!==lt||t[140]!==ht?(gt=/* @__PURE__ */ (0,M.jsxs)(`div`,{"data-slot":`feedback-capture-bar`,className:$e,"data-html2canvas-ignore":`true`,"qa-test-id":Z,children:[lt,ht]}),t[137]=Z,t[138]=$e,t[139]=lt,t[140]=ht,t[141]=gt):gt=t[141];let _t;return t[142]!==Qe||t[143]!==gt?(_t=/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`mx-auto flex w-full max-w-120 min-w-0 flex-col items-stretch gap-2`,"data-html2canvas-ignore":`true`,children:[Qe,gt]}),t[142]=Qe,t[143]=gt,t[144]=_t):_t=t[144],_t}function I(e){let n=(0,j.c)(12),{show:r,className:i,qaTestId:l}=e,u=l===void 0?`feedback-mode-frame`:l,{_:d}=ee(),f=c()??!1,p;n[0]===i?p=n[1]:(p=a(`pointer-events-none fixed inset-0 z-[104]`,i),n[0]=i,n[1]=p);let m;n[2]!==d||n[3]!==f||n[4]!==r?(m=r&&/* @__PURE__ */ (0,M.jsxs)(o.div,{className:`absolute inset-0`,initial:f?{opacity:0}:{opacity:0,scale:1.01},animate:f?{opacity:1}:{opacity:1,scale:1},exit:{opacity:0},transition:f?{duration:0}:t,children:[/* @__PURE__ */ (0,M.jsx)(`div`,{"aria-hidden":!0,className:`absolute inset-0 rounded-xl border-2 border-primary-base`}),/* @__PURE__ */ (0,M.jsx)(`div`,{"aria-hidden":!0,className:`absolute inset-0 rounded-xl opacity-40 shadow-[inset_0_0_32px_-8px_var(--color-primary-base)]`}),/* @__PURE__ */ (0,M.jsx)(`p`,{className:`sr-only`,role:`status`,"aria-live":`polite`,children:d({id:`m6gbZh`})})]}),n[2]=d,n[3]=f,n[4]=r,n[5]=m):m=n[5];let h;n[6]===m?h=n[7]:(h=/* @__PURE__ */ (0,M.jsx)(s,{children:m}),n[6]=m,n[7]=h);let g;return n[8]!==u||n[9]!==p||n[10]!==h?(g=/* @__PURE__ */ (0,M.jsx)(`div`,{"data-slot":`feedback-mode-frame`,"data-html2canvas-ignore":`true`,className:p,"qa-test-id":u,children:h}),n[8]=u,n[9]=p,n[10]=h,n[11]=g):g=n[11],g}function L(e){let t=(0,j.c)(59),{message:n,onMessageChange:r,showMessageError:i,screenshots:a,recordings:o,elements:s,onRemoveScreenshot:c,onRemoveRecording:l,onRemoveElement:u,isSubmitting:h,submitError:g,qaTestId:_}=e,y=i!==void 0&&i,b=h!==void 0&&h,x=g===void 0?null:g,S=_===void 0?`feedback-mode-review`:_,{_:T}=ee(),[te,ne]=(0,N.useState)(null),[E,D]=(0,N.useState)(null),O=a.length>0||o.length>0||s.length>0,k;t[0]===T?k=t[1]:(k=T({id:`LksjCS`}),t[0]=T,t[1]=k);let A;t[2]!==T||t[3]!==y?(A=y?T({id:`GS7_wF`}):void 0,t[2]=T,t[3]=y,t[4]=A):A=t[4];let P;t[5]===r?P=t[6]:(P=e=>r(e.target.value),t[5]=r,t[6]=P);let F;t[7]===T?F=t[8]:(F=T({id:`LkRzA3`}),t[7]=T,t[8]=F);let I;t[9]!==b||t[10]!==n||t[11]!==F?(I={variant:`stroke`,value:n,rows:4,autoFocus:!0,disabled:b,placeholder:F},t[9]=b,t[10]=n,t[11]=F,t[12]=I):I=t[12];let L=`${S}-message`,R;t[13]!==y||t[14]!==L||t[15]!==k||t[16]!==A||t[17]!==P||t[18]!==I?(R=/* @__PURE__ */ (0,M.jsx)(p,{fieldLabel:k,required:!0,error:y,description:A,onChange:P,textareaControlProps:I,qaTestId:L}),t[13]=y,t[14]=L,t[15]=k,t[16]=A,t[17]=P,t[18]=I,t[19]=R):R=t[19];let z;t[20]===T?z=t[21]:(z=T({id:`_0EAFR`}),t[20]=T,t[21]=z);let B;t[22]===z?B=t[23]:(B=/* @__PURE__ */ (0,M.jsx)(`p`,{className:`pui-text-label-medium text-text-strong`,children:z}),t[22]=z,t[23]=B);let V;t[24]!==T||t[25]!==O?(V=O?null:/* @__PURE__ */ (0,M.jsx)(`p`,{className:`pui-text-label-medium text-text-soft`,children:T({id:`vqygf0`})}),t[24]=T,t[25]=O,t[26]=V):V=t[26];let H;t[27]!==T||t[28]!==s||t[29]!==O||t[30]!==u||t[31]!==l||t[32]!==c||t[33]!==S||t[34]!==o||t[35]!==a?(H=O?/* @__PURE__ */ (0,M.jsxs)(d,{gradientSurface:`inverse`,className:`min-w-0`,scrollClassName:`items-center gap-2`,"aria-label":T({id:`_0EAFR`}),qaTestId:`${S}-captures`,children:[a.map((e,t)=>/* @__PURE__ */ (0,M.jsx)(w,{type:`image`,imageSrc:e.previewUrl,onExpand:()=>{D(null),ne(t)},onRemove:()=>c(e.id)},e.id)),o.map((e,t)=>{let n=t+1;return/* @__PURE__ */ (0,M.jsx)(w,{type:`file`,fileName:o.length>1?T({id:`gnRaOE`,values:{number:n}}):T({id:`Ag2QUH`}),fileMetadata:e.file.type||`webm`,icon:C,onExpand:()=>{D(null),ne(a.length+t)},onRemove:()=>l(e.id)},e.id)}),s.map(e=>/* @__PURE__ */ (0,M.jsx)(w,{type:`file`,icon:v,fileName:e.payload.instruction,fileMetadata:e.payload.tagName.toLowerCase(),onRemove:()=>u(e.commentId)},e.commentId))]}):null,t[27]=T,t[28]=s,t[29]=O,t[30]=u,t[31]=l,t[32]=c,t[33]=S,t[34]=o,t[35]=a,t[36]=H):H=t[36];let U;t[37]!==B||t[38]!==V||t[39]!==H?(U=/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`flex w-full min-w-0 flex-col gap-2`,children:[B,V,H]}),t[37]=B,t[38]=V,t[39]=H,t[40]=U):U=t[40];let W;t[41]===x?W=t[42]:(W=x?/* @__PURE__ */ (0,M.jsx)(f,{state:`error`,wrap:!0,children:x}):null,t[41]=x,t[42]=W);let G;t[43]!==o||t[44]!==a?(G=re(a,o),t[43]=o,t[44]=a,t[45]=G):G=t[45];let K=te!=null,q=te??0,J;t[46]===Symbol.for(`react.memo_cache_sentinel`)?(J=()=>ne(null),t[46]=J):J=t[46];let ie=`${S}-lightbox`,Y;t[47]!==E||t[48]!==G||t[49]!==K||t[50]!==q||t[51]!==ie?(Y=/* @__PURE__ */ (0,M.jsx)(m,{images:G,open:K,initialIndex:q,origin:E,onClose:J,qaTestId:ie}),t[47]=E,t[48]=G,t[49]=K,t[50]=q,t[51]=ie,t[52]=Y):Y=t[52];let X;return t[53]!==S||t[54]!==R||t[55]!==U||t[56]!==W||t[57]!==Y?(X=/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`flex flex-col gap-4`,"qa-test-id":S,children:[R,U,W,Y]}),t[53]=S,t[54]=R,t[55]=U,t[56]=W,t[57]=Y,t[58]=X):X=t[58],X}const R={capture:!0};function z({onSubmit:e,initialPhase:t=`capture`,initialScreenshots:n=[],initialMessage:r=``,defaultScreenRecording:i=!1,isActive:a=!0,onExit:o}){let{_:s}=ee(),c=s({id:`C7-tRr`}),[l,d]=(0,N.useState)(t),[f,p]=(0,N.useState)(r),[m,h]=(0,N.useState)(!1),[g,v]=(0,N.useState)(!1),[y,b]=(0,N.useState)(null),[x,S]=(0,N.useState)(!1),[C,w]=(0,N.useState)(`screenshot`),[T,D]=(0,N.useState)(null),[k,A]=(0,N.useState)(!1),re=(0,N.useRef)(null),j=E(n,{handleEscape:!1}),P=ne(i),F=O({showStopControl:!1,describePlaceholder:c,handleEscape:!1}),I=x||j.isSelecting||P.isCapturing||F.isSelecting,L=j.isDragging||j.isCapturing||P.isCapturing||F.isDescribing;function z(e){return e===`permission`?s({id:`saKeiM`}):e===`unsupported`?s({id:`LLrXkb`}):e===`failed`?s({id:`wdNb5Y`}):null}function B(){S(!0)}function V(){S(!1)}function H(){j.start({onSettled:e=>{V(),!(e!==`captured`||j.isAtLimit)&&(B(),H())}})}function U(e){if(D(null),e.length===0)return;let{images:t,videos:n,rejected:r}=te(e);t.length>0&&j.addFiles(t);for(let e of n)P.setClip(e);t.length===0&&n.length===0?D(s({id:`MZbysF`})):r.length>0&&D(s({id:`7N8QTL`}))}u(`keydown`,e=>{a&&o&&e instanceof KeyboardEvent&&e.key===`Escape`&&(e.preventDefault(),e.stopImmediatePropagation(),k?A(!1):G())},void 0,R),u(`paste`,e=>{if(!a||!(e instanceof ClipboardEvent))return;let t=Array.from(e.clipboardData?.files??[]);t.length!==0&&(e.preventDefault(),U(t))});let W=j.items.length>0||P.clips.length>0||P.isRecording||F.items.length>0||F.isDescribing||f.trim()!==``;function G(){l===`sent`||!W?o?.():(j.stop(),F.stop(),A(!0))}function K(){let t=f.trim();t?(h(!1),b(null),v(!0),Promise.resolve(e({message:t,screenshots:j.items.length>0?j.items.map(e=>e.file):void 0,screenRecording:P.clips.length>0?P.clips.map(e=>e.file):void 0,elementComments:F.items.map(e=>e.payload)})).then(()=>{d(`sent`)}).catch(e=>{let t=e instanceof Error?e.message.trim():``;console.error(`Feedback submit failed: %s`,t||`unknown`);let n=e instanceof Error&&`code`in e&&typeof e.code==`string`?e.code:void 0,r={needs_auth:s({id:`W5yboM`}),forbidden:s({id:`7DBZwP`}),too_large:s({id:`blInpT`}),upload_failed:s({id:`w9O_D6`}),unavailable:s({id:`5qN8QO`}),submit_failed:s({id:`j1ZalJ`})};b((n?r[n]:void 0)??(t||s({id:`j1ZalJ`})))}).finally(()=>{v(!1)})):(h(!0),re.current?.shake())}return{phase:l,isCapturing:I,isEngaged:L,isRecording:P.isRecording,recordingElapsedMs:P.elapsedMs,stopRecording:P.stop,audioEnabled:P.audioEnabled,setAudioEnabled:P.setAudioEnabled,audioLevels:P.audioLevels,draftLabel:F.draftLabel,describeDraft:F.describeDraft,cancelDraft:F.cancelDraft,highlightElement:F.highlightElement,highlightedId:F.highlightedId,screenshots:j.items,recordings:P.clips,elements:F.items,screenshotsAtLimit:j.isAtLimit,captureError:j.error??T??z(P.errorKind),message:f,setMessage:e=>{p(e),e.trim()&&h(!1)},showMessageError:m,isSubmitting:g,submitError:y,shakeRef:re,selectedMode:C,startMode:e=>{w(e),D(null),e!==`screenshot`&&j.stop(),e!==`element`&&F.stop(),e!==`recording`&&P.stop(),B(),e===`screenshot`?H():e===`recording`?P.start({onSettled:()=>{V(),w(e=>e===`recording`?null:e)}}):F.start({onSettled:V})},addMedia:U,hasUnsavedWork:W,isConfirmingDiscard:k,requestExit:G,confirmDiscard:()=>{A(!1),o?.()},cancelDiscard:()=>A(!1),removeScreenshot:j.remove,removeRecording:P.remove,removeElement:F.remove,done:()=>{j.stop(),F.stop(),P.stop(),d(`review`)},backToCapture:()=>{d(`capture`),C!=null&&C!==`recording`&&(B(),C===`screenshot`?H():F.start({onSettled:V}))},submit:K,reset:()=>{d(`capture`),w(`screenshot`),p(``),h(!1),b(null),D(null),A(!1),S(!1),j.reset(),P.reset(),F.reset()},overlays:/* @__PURE__ */ (0,M.jsxs)(M.Fragment,{children:[j.overlay,F.overlay,k?/* @__PURE__ */ (0,M.jsx)(_,{open:!0,size:`md`,closeOnEscape:!1,dismissOnBackdropClick:!0,onOpenChange:e=>{e||A(!1)},headerProps:{title:s({id:`y_B1-W`}),description:s({id:`i9B9Se`})},footerProps:{primaryButton:{variant:`strong`,children:s({id:`4OjqAQ`}),onClick:()=>A(!1)},secondaryButton:{variant:`stroke`,children:s({id:`bzSI52`}),onClick:()=>{A(!1),o?.()}}},qaTestId:`feedback-mode-discard-confirm`}):null]})}}function B({active:e,onExit:n,onSubmit:r,renderReview:i,initialPhase:a,initialScreenshots:l,initialMessage:u,defaultScreenRecording:d,qaTestId:f=`feedback-mode`}){let{_:p}=ee(),m=c()??!1,h=(0,N.useRef)(()=>{}),g=z({onSubmit:r,initialPhase:a,initialScreenshots:l,initialMessage:u,defaultScreenRecording:d,isActive:e,onExit:()=>{h.current()}});function _(){g.reset(),n()}if(h.current=_,!e)return null;let v=g.phase===`sent`?/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`flex flex-col items-center gap-3 py-4 text-center`,"qa-test-id":`${f}-sent`,children:[/* @__PURE__ */ (0,M.jsx)(A,{size:24,color:`positive-base`}),/* @__PURE__ */ (0,M.jsx)(`p`,{className:`pui-text-label-medium text-text-sub`,children:p({id:`P3EO-9`})})]}):/* @__PURE__ */ (0,M.jsx)(L,{message:g.message,onMessageChange:g.setMessage,showMessageError:g.showMessageError,screenshots:g.screenshots,recordings:g.recordings,elements:g.elements,onRemoveScreenshot:g.removeScreenshot,onRemoveRecording:g.removeRecording,onRemoveElement:g.removeElement,isSubmitting:g.isSubmitting,submitError:g.submitError,qaTestId:`${f}-review`});return/* @__PURE__ */ (0,M.jsxs)(`div`,{"qa-test-id":f,children:[/* @__PURE__ */ (0,M.jsx)(I,{show:!0,qaTestId:`${f}-frame`}),/* @__PURE__ */ (0,M.jsx)(s,{children:g.phase===`capture`&&!g.isConfirmingDiscard?/* @__PURE__ */ (0,M.jsx)(o.div,{className:`pointer-events-none fixed inset-x-0 bottom-6 z-[106] flex justify-center px-4`,initial:m?{opacity:0}:{opacity:0,y:20},animate:m?{opacity:1}:{opacity:1,y:0},exit:m?{opacity:0}:{opacity:0,y:20},transition:m?{duration:0}:t,children:/* @__PURE__ */ (0,M.jsx)(`div`,{className:`pointer-events-auto w-full max-w-130 min-w-0`,children:/* @__PURE__ */ (0,M.jsx)(F,{selectedMode:g.selectedMode,onSelectMode:g.startMode,screenshots:g.screenshots,recordings:g.recordings,elements:g.elements,onRemoveScreenshot:g.removeScreenshot,onRemoveRecording:g.removeRecording,onRemoveElement:g.removeElement,onHighlightElement:g.highlightElement,screenshotsAtLimit:g.screenshotsAtLimit,error:g.captureError,isRecording:g.isRecording,recordingElapsedMs:g.recordingElapsedMs,onStopRecording:g.stopRecording,audioEnabled:g.audioEnabled,onAudioEnabledChange:g.setAudioEnabled,audioLevels:g.audioLevels,isEngaged:g.isEngaged,onAddMedia:g.addMedia,onDone:g.done,onExit:g.requestExit,qaTestId:`${f}-bar`})})}):null}),g.phase===`capture`?null:i({phase:g.phase,message:g.message,isSubmitting:g.isSubmitting,shakeRef:g.shakeRef,submit:g.submit,backToCapture:g.backToCapture,exit:_,body:v}),g.overlays]})}export{F as a,I as i,z as n,L as r,B as t};
1
+ import{a as e}from"./rolldown-runtime-BWaJ3C7D.js";import{v as t}from"./transitions-Cn0Tw_ua.js";import{t as n}from"./react-CUaU2Z9V.js";import{t as r}from"./compiler-runtime-B3BlmaWz.js";import{t as i}from"./jsx-runtime-Dgn0yPdi.js";import{t as a}from"./dist-BNSTMZct.js";import{n as o}from"./react-CqECE5Y5.js";import{t as s}from"./AnimatePresence-DOl8NYHq.js";import{t as c}from"./use-reduced-motion-CNBdBisf.js";import{t as l}from"./Button-BfpdYdpq.js";import{i as ee}from"./dist-BRMXKypj.js";import{n as u}from"./dist-CPlSvWC_.js";import{t as d}from"./ScrollGradientWrapper-h6yq23DQ.js";import{t as f}from"./HelperText-DQxQjdKH.js";import{t as p}from"./TextareaField-t1AdxrBG.js";import{t as m}from"./Lightbox-BJYrdHsA.js";import{t as h}from"./Waveform-Chgk_Kb1.js";import{t as g}from"./PaperclipIcon-B8vj2DdY.js";import{t as _}from"./Modal-B8krPuKb.js";import{t as v}from"./SelectFrameIcon-C5h9EvIp.js";import{t as y}from"./CameraIcon-D88ZfWsN.js";import{t as b}from"./MicrophoneIcon-BuLtN1VU.js";import{t as x}from"./MicrophoneMuteIcon-BL-krIAi.js";import{t as S}from"./StopIcon-BHLP_d0D.js";import{t as C}from"./VideoCamera2Icon-Bya8Tob2.js";import{n as w,t as T}from"./PromptHint-poWleFeL.js";import{_ as te,c as ne,i as E,m as D,o as O,s as k}from"./collect-feedback-context-F1nAqZ8M.js";import{t as A}from"./CheckCircleIcon-hRaPf6jV.js";function re(e,t){return[...e.map(e=>({src:e.previewUrl,alt:e.file.name})),...t.map(e=>({src:e.previewUrl,alt:e.file.name,mediaType:`video`}))]}var j=r(),M=/* @__PURE__ */ e(i(),1),N=/* @__PURE__ */ e(n(),1);const P=`attach`;function F(e){let t=(0,j.c)(145),{selectedMode:n,onSelectMode:r,screenshots:i,recordings:o,elements:s,onRemoveScreenshot:c,onRemoveRecording:u,onRemoveElement:p,onAddMedia:_,screenshotsAtLimit:te,error:ne,isRecording:E,recordingElapsedMs:O,onStopRecording:A,audioEnabled:F,onAudioEnabledChange:I,audioLevels:L,onHighlightElement:R,isEngaged:z,onDone:B,onExit:V,layout:H,className:U,introHint:W,qaTestId:G}=e,K=te!==void 0&&te,q=ne===void 0?null:ne,J=E!==void 0&&E,ie=O===void 0?0:O,Y=F===void 0||F,X=z!==void 0&&z,ae=H===void 0?`compact`:H,Z=G===void 0?`feedback-capture-bar`:G,{_:Q}=ee(),[oe,se]=(0,N.useState)(null),ce=(0,N.useRef)(null),le=ae===`compact`,ue=i.length>0||o.length>0||s.length>0,de;t[0]===Q?de=t[1]:(de=Q({id:`IxyZXD`}),t[0]=Q,t[1]=de);let fe=de,pe;t[2]===Q?pe=t[3]:(pe=Q({id:`w80YWM`}),t[2]=Q,t[3]=pe);let me=pe,he;t[4]===Q?he=t[5]:(he=Q({id:`rG3WVm`}),t[4]=Q,t[5]=he);let ge=he,_e;t[6]===Q?_e=t[7]:(_e=Q({id:`N5OFex`}),t[6]=Q,t[7]=_e);let ve=_e,ye;t[8]!==Q||t[9]!==Y?(ye=Q(Y?{id:`39h1ax`}:{id:`pPT0bd`}),t[8]=Q,t[9]=Y,t[10]=ye):ye=t[10];let be=ye,xe;t[11]!==Q||t[12]!==Y?(xe=Q(Y?{id:`R7SsBE`}:{id:`rn6SBY`}),t[11]=Q,t[12]=Y,t[13]=xe):xe=t[13];let Se=xe,Ce=!Y,we;t[14]===Se?we=t[15]:(we={content:Se,side:`top`},t[14]=Se,t[15]=we);let Te=Y?b:x,Ee;t[16]===Te?Ee=t[17]:(Ee={icon:Te},t[16]=Te,t[17]=Ee);let De;t[18]!==Y||t[19]!==I?(De=()=>I?.(!Y),t[18]=Y,t[19]=I,t[20]=De):De=t[20];let Oe=`${Z}-mute`,ke;t[21]!==be||t[22]!==Ce||t[23]!==we||t[24]!==Ee||t[25]!==De||t[26]!==Oe?(ke=/* @__PURE__ */ (0,M.jsx)(l,{type:`button`,variant:`inverse`,size:`medium`,"aria-label":be,"aria-pressed":Ce,tooltipProps:we,prefix:Ee,onClick:De,qaTestId:Oe}),t[21]=be,t[22]=Ce,t[23]=we,t[24]=Ee,t[25]=De,t[26]=Oe,t[27]=ke):ke=t[27];let Ae=ke,je;t[28]!==fe||t[29]!==K?(je={value:`screenshot`,label:fe,icon:y,disabled:K},t[28]=fe,t[29]=K,t[30]=je):je=t[30];let Me;t[31]===me?Me=t[32]:(Me={value:`recording`,label:me,icon:C,disabled:!1},t[31]=me,t[32]=Me);let Ne;t[33]===ge?Ne=t[34]:(Ne={value:`element`,label:ge,icon:v,disabled:!1},t[33]=ge,t[34]=Ne);let Pe;t[35]!==ve||t[36]!==_?(Pe=_?[{value:P,label:ve,icon:g,disabled:!1}]:[],t[35]=ve,t[36]=_,t[37]=Pe):Pe=t[37];let Fe;t[38]!==je||t[39]!==Me||t[40]!==Ne||t[41]!==Pe?(Fe=[je,Me,Ne,...Pe],t[38]=je,t[39]=Me,t[40]=Ne,t[41]=Pe,t[42]=Fe):Fe=t[42];let Ie=Fe,Le;t[43]===Q?Le=t[44]:(Le=Q({id:`QQ_wAv`}),t[43]=Q,t[44]=Le);let Re=`${Z}-modes`,ze;t[45]!==le||t[46]!==r||t[47]!==Z||t[48]!==n||t[49]!==Ie?(ze=Ie.map((e,t)=>{let i=e.value===P,o=!i&&e.value===n,s=!le&&!i;return/* @__PURE__ */ (0,M.jsxs)(N.Fragment,{children:[t>0?/* @__PURE__ */ (0,M.jsx)(`div`,{"aria-hidden":!0,className:a(`h-4 w-px shrink-0 rounded-full bg-depth-black-8`,(Ie[t-1]?.value===n||e.value===n)&&`opacity-0`)}):null,/* @__PURE__ */ (0,M.jsx)(l,{type:`button`,variant:`inverse`,size:`medium`,className:o?`bg-primary-light`:void 0,"aria-pressed":i?void 0:o,"aria-label":s?void 0:e.label,tooltipProps:s?void 0:{content:e.label,side:`top`},prefix:{icon:e.icon,color:o?`primary-dark`:void 0},disabled:e.disabled,onClick:()=>{i?ce.current?.click():r(e.value)},qaTestId:`${Z}-mode-${e.value}`,children:s?/* @__PURE__ */ (0,M.jsx)(`span`,{className:o?`text-primary-dark`:void 0,children:e.label}):void 0})]},e.value)}),t[45]=le,t[46]=r,t[47]=Z,t[48]=n,t[49]=Ie,t[50]=ze):ze=t[50];let Be;t[51]!==Le||t[52]!==Re||t[53]!==ze?(Be=/* @__PURE__ */ (0,M.jsx)(`div`,{className:`flex min-w-0 items-center gap-0.5`,role:`group`,"aria-label":Le,"qa-test-id":Re,children:ze}),t[51]=Le,t[52]=Re,t[53]=ze,t[54]=Be):Be=t[54];let Ve=n===`recording`?Ae:null,He;t[55]!==Be||t[56]!==Ve?(He=/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`flex min-w-0 items-center gap-0.5`,children:[Be,Ve]}),t[55]=Be,t[56]=Ve,t[57]=He):He=t[57];let Ue;t[58]!==_||t[59]!==Z?(Ue=_?/* @__PURE__ */ (0,M.jsx)(`input`,{ref:ce,className:`hidden`,type:`file`,multiple:!0,accept:D,onChange:e=>{let t=Array.from(e.target.files??[]);e.target.value=``,t.length>0&&_(t)},"qa-test-id":`${Z}-media-input`}):null,t[58]=_,t[59]=Z,t[60]=Ue):Ue=t[60];let We;t[61]!==He||t[62]!==Ue?(We=/* @__PURE__ */ (0,M.jsxs)(M.Fragment,{children:[He,Ue]}),t[61]=He,t[62]=Ue,t[63]=We):We=t[63];let Ge=We,Ke=`${Z}-exit`,qe;t[64]===Q?qe=t[65]:(qe=Q({id:`dEgA5A`}),t[64]=Q,t[65]=qe);let Je;t[66]!==V||t[67]!==Ke||t[68]!==qe?(Je=/* @__PURE__ */ (0,M.jsx)(l,{type:`button`,variant:`stroke`,size:`medium`,onClick:V,qaTestId:Ke,children:qe}),t[66]=V,t[67]=Ke,t[68]=qe,t[69]=Je):Je=t[69];let Ye;t[70]!==Q||t[71]!==X||t[72]!==B||t[73]!==Z?(Ye=X?null:/* @__PURE__ */ (0,M.jsx)(l,{type:`button`,variant:`strong`,size:`medium`,onClick:B,qaTestId:`${Z}-done`,children:Q({id:`hXzOVo`})}),t[70]=Q,t[71]=X,t[72]=B,t[73]=Z,t[74]=Ye):Ye=t[74];let Xe;t[75]!==Je||t[76]!==Ye?(Xe=/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`flex shrink-0 items-center gap-2`,children:[Je,Ye]}),t[75]=Je,t[76]=Ye,t[77]=Xe):Xe=t[77];let Ze=Xe,Qe;t[78]!==W||t[79]!==Z?(Qe=W?/* @__PURE__ */ (0,M.jsx)(T,{text:W.text,onDismiss:W.onDismiss,qaTestId:`${Z}-intro-hint`}):null,t[78]=W,t[79]=Z,t[80]=Qe):Qe=t[80];let $e;t[81]===U?$e=t[82]:($e=a(`flex w-full min-w-0 flex-col gap-2`,U),t[81]=U,t[82]=$e);let et;t[83]===Symbol.for(`react.memo_cache_sentinel`)?(et=a(`flex flex-col gap-2 rounded-[20px] bg-base-weak p-2`,`shadow-floating-composer`),t[83]=et):et=t[83];let tt;t[84]!==Q||t[85]!==s||t[86]!==ue||t[87]!==R||t[88]!==p||t[89]!==u||t[90]!==c||t[91]!==Z||t[92]!==o||t[93]!==i?(tt=ue?/* @__PURE__ */ (0,M.jsxs)(d,{gradientSurface:`weak`,className:`min-w-0`,scrollClassName:`items-center gap-2 px-1 pt-1`,"aria-label":Q({id:`_0EAFR`}),qaTestId:`${Z}-captures`,children:[i.map((e,t)=>/* @__PURE__ */ (0,M.jsx)(w,{type:`image`,imageSrc:e.previewUrl,onExpand:()=>se(t),onRemove:()=>c(e.id)},e.id)),o.map((e,t)=>{let n=t+1;return/* @__PURE__ */ (0,M.jsx)(w,{type:`file`,fileName:o.length>1?Q({id:`gnRaOE`,values:{number:n}}):Q({id:`Ag2QUH`}),fileMetadata:e.file.type||`webm`,icon:C,onExpand:()=>se(i.length+t),onRemove:()=>u(e.id)},e.id)}),s.map(e=>/* @__PURE__ */ (0,M.jsx)(w,{type:`file`,icon:v,fileName:e.payload.instruction,fileMetadata:e.payload.tagName.toLowerCase(),onExpand:()=>R?.(e.commentId),onRemove:()=>p(e.commentId)},e.commentId))]}):null,t[84]=Q,t[85]=s,t[86]=ue,t[87]=R,t[88]=p,t[89]=u,t[90]=c,t[91]=Z,t[92]=o,t[93]=i,t[94]=tt):tt=t[94];let $;t[95]!==Q||t[96]!==Y||t[97]!==L||t[98]!==J||t[99]!==be||t[100]!==Se||t[101]!==I||t[102]!==V||t[103]!==A||t[104]!==Z||t[105]!==ie?($=J?/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`flex items-center gap-3 rounded-2xl bg-depth-black-4 px-3 py-2`,role:`status`,"aria-live":`polite`,"aria-label":Q({id:`XmKjfh`}),"qa-test-id":`${Z}-recording`,children:[/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`flex items-center gap-2`,children:[/* @__PURE__ */ (0,M.jsx)(`span`,{className:`size-2 shrink-0 animate-pulse rounded-full bg-negative-base motion-reduce:animate-none`,"aria-hidden":!0}),/* @__PURE__ */ (0,M.jsx)(`p`,{className:`pui-text-mono-small-alt shrink-0 text-text-sub tabular-nums`,children:k(ie)})]}),/* @__PURE__ */ (0,M.jsx)(h,{interactive:!1,isPlaying:Y,levels:L,className:`min-w-20 flex-1`,qaTestId:`${Z}-audio-wave`}),/* @__PURE__ */ (0,M.jsx)(l,{type:`button`,variant:`inverse`,size:`small`,"aria-label":be,"aria-pressed":!Y,tooltipProps:{content:Se,side:`top`},prefix:{icon:Y?b:x},onClick:()=>I?.(!Y),qaTestId:`${Z}-mute`}),/* @__PURE__ */ (0,M.jsx)(l,{type:`button`,variant:`strong`,size:`small`,"aria-label":Q({id:`pJ_IRc`}),prefix:{icon:S},onClick:A,qaTestId:`${Z}-stop-recording`}),/* @__PURE__ */ (0,M.jsx)(l,{type:`button`,variant:`stroke`,size:`small`,onClick:V,qaTestId:`${Z}-exit`,children:Q({id:`dEgA5A`})})]}):null,t[95]=Q,t[96]=Y,t[97]=L,t[98]=J,t[99]=be,t[100]=Se,t[101]=I,t[102]=V,t[103]=A,t[104]=Z,t[105]=ie,t[106]=$):$=t[106];let nt=ae===`stacked`?`flex-col`:`flex-nowrap items-center justify-between`,rt=J&&`hidden`,it;t[107]!==nt||t[108]!==rt?(it=a(`flex min-w-0 gap-2`,nt,rt),t[107]=nt,t[108]=rt,t[109]=it):it=t[109];let at;t[110]===Q?at=t[111]:(at=Q({id:`KoDfwZ`}),t[110]=Q,t[111]=at);let ot;t[112]!==Ze||t[113]!==ae||t[114]!==Ge?(ot=ae===`stacked`?/* @__PURE__ */ (0,M.jsxs)(M.Fragment,{children:[Ge,/* @__PURE__ */ (0,M.jsx)(`div`,{className:`flex justify-end`,children:Ze})]}):/* @__PURE__ */ (0,M.jsxs)(M.Fragment,{children:[Ge,Ze]}),t[112]=Ze,t[113]=ae,t[114]=Ge,t[115]=ot):ot=t[115];let st;t[116]!==it||t[117]!==at||t[118]!==ot?(st=/* @__PURE__ */ (0,M.jsx)(`div`,{className:it,role:`toolbar`,"aria-label":at,children:ot}),t[116]=it,t[117]=at,t[118]=ot,t[119]=st):st=t[119];let ct;t[120]!==q||t[121]!==Z?(ct=q?/* @__PURE__ */ (0,M.jsx)(`div`,{className:`px-1 pb-1`,"qa-test-id":`${Z}-error`,children:/* @__PURE__ */ (0,M.jsx)(f,{state:`error`,wrap:!0,children:q})}):null,t[120]=q,t[121]=Z,t[122]=ct):ct=t[122];let lt;t[123]!==tt||t[124]!==$||t[125]!==st||t[126]!==ct?(lt=/* @__PURE__ */ (0,M.jsxs)(`div`,{className:et,children:[tt,$,st,ct]}),t[123]=tt,t[124]=$,t[125]=st,t[126]=ct,t[127]=lt):lt=t[127];let ut;t[128]!==o||t[129]!==i?(ut=re(i,o),t[128]=o,t[129]=i,t[130]=ut):ut=t[130];let dt=oe!=null,ft=oe??0,pt;t[131]===Symbol.for(`react.memo_cache_sentinel`)?(pt=()=>se(null),t[131]=pt):pt=t[131];let mt=`${Z}-lightbox`,ht;t[132]!==ut||t[133]!==dt||t[134]!==ft||t[135]!==mt?(ht=/* @__PURE__ */ (0,M.jsx)(m,{images:ut,open:dt,initialIndex:ft,onClose:pt,qaTestId:mt}),t[132]=ut,t[133]=dt,t[134]=ft,t[135]=mt,t[136]=ht):ht=t[136];let gt;t[137]!==Z||t[138]!==$e||t[139]!==lt||t[140]!==ht?(gt=/* @__PURE__ */ (0,M.jsxs)(`div`,{"data-slot":`feedback-capture-bar`,className:$e,"data-html2canvas-ignore":`true`,"qa-test-id":Z,children:[lt,ht]}),t[137]=Z,t[138]=$e,t[139]=lt,t[140]=ht,t[141]=gt):gt=t[141];let _t;return t[142]!==Qe||t[143]!==gt?(_t=/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`mx-auto flex w-full max-w-120 min-w-0 flex-col items-stretch gap-2`,"data-html2canvas-ignore":`true`,children:[Qe,gt]}),t[142]=Qe,t[143]=gt,t[144]=_t):_t=t[144],_t}function I(e){let n=(0,j.c)(12),{show:r,className:i,qaTestId:l}=e,u=l===void 0?`feedback-mode-frame`:l,{_:d}=ee(),f=c()??!1,p;n[0]===i?p=n[1]:(p=a(`pointer-events-none fixed inset-0 z-[104]`,i),n[0]=i,n[1]=p);let m;n[2]!==d||n[3]!==f||n[4]!==r?(m=r&&/* @__PURE__ */ (0,M.jsxs)(o.div,{className:`absolute inset-0`,initial:f?{opacity:0}:{opacity:0,scale:1.01},animate:f?{opacity:1}:{opacity:1,scale:1},exit:{opacity:0},transition:f?{duration:0}:t,children:[/* @__PURE__ */ (0,M.jsx)(`div`,{"aria-hidden":!0,className:`absolute inset-0 rounded-xl border-2 border-primary-base`}),/* @__PURE__ */ (0,M.jsx)(`div`,{"aria-hidden":!0,className:`absolute inset-0 rounded-xl opacity-40 shadow-[inset_0_0_32px_-8px_var(--color-primary-base)]`}),/* @__PURE__ */ (0,M.jsx)(`p`,{className:`sr-only`,role:`status`,"aria-live":`polite`,children:d({id:`m6gbZh`})})]}),n[2]=d,n[3]=f,n[4]=r,n[5]=m):m=n[5];let h;n[6]===m?h=n[7]:(h=/* @__PURE__ */ (0,M.jsx)(s,{children:m}),n[6]=m,n[7]=h);let g;return n[8]!==u||n[9]!==p||n[10]!==h?(g=/* @__PURE__ */ (0,M.jsx)(`div`,{"data-slot":`feedback-mode-frame`,"data-html2canvas-ignore":`true`,className:p,"qa-test-id":u,children:h}),n[8]=u,n[9]=p,n[10]=h,n[11]=g):g=n[11],g}function L(e){let t=(0,j.c)(59),{message:n,onMessageChange:r,showMessageError:i,screenshots:a,recordings:o,elements:s,onRemoveScreenshot:c,onRemoveRecording:l,onRemoveElement:u,isSubmitting:h,submitError:g,qaTestId:_}=e,y=i!==void 0&&i,b=h!==void 0&&h,x=g===void 0?null:g,S=_===void 0?`feedback-mode-review`:_,{_:T}=ee(),[te,ne]=(0,N.useState)(null),[E,D]=(0,N.useState)(null),O=a.length>0||o.length>0||s.length>0,k;t[0]===T?k=t[1]:(k=T({id:`LksjCS`}),t[0]=T,t[1]=k);let A;t[2]!==T||t[3]!==y?(A=y?T({id:`GS7_wF`}):void 0,t[2]=T,t[3]=y,t[4]=A):A=t[4];let P;t[5]===r?P=t[6]:(P=e=>r(e.target.value),t[5]=r,t[6]=P);let F;t[7]===T?F=t[8]:(F=T({id:`LkRzA3`}),t[7]=T,t[8]=F);let I;t[9]!==b||t[10]!==n||t[11]!==F?(I={variant:`stroke`,value:n,rows:4,autoFocus:!0,disabled:b,placeholder:F},t[9]=b,t[10]=n,t[11]=F,t[12]=I):I=t[12];let L=`${S}-message`,R;t[13]!==y||t[14]!==L||t[15]!==k||t[16]!==A||t[17]!==P||t[18]!==I?(R=/* @__PURE__ */ (0,M.jsx)(p,{fieldLabel:k,required:!0,error:y,description:A,onChange:P,textareaControlProps:I,qaTestId:L}),t[13]=y,t[14]=L,t[15]=k,t[16]=A,t[17]=P,t[18]=I,t[19]=R):R=t[19];let z;t[20]===T?z=t[21]:(z=T({id:`_0EAFR`}),t[20]=T,t[21]=z);let B;t[22]===z?B=t[23]:(B=/* @__PURE__ */ (0,M.jsx)(`p`,{className:`pui-text-label-medium text-text-strong`,children:z}),t[22]=z,t[23]=B);let V;t[24]!==T||t[25]!==O?(V=O?null:/* @__PURE__ */ (0,M.jsx)(`p`,{className:`pui-text-label-medium text-text-soft`,children:T({id:`vqygf0`})}),t[24]=T,t[25]=O,t[26]=V):V=t[26];let H;t[27]!==T||t[28]!==s||t[29]!==O||t[30]!==u||t[31]!==l||t[32]!==c||t[33]!==S||t[34]!==o||t[35]!==a?(H=O?/* @__PURE__ */ (0,M.jsxs)(d,{gradientSurface:`inverse`,className:`min-w-0`,scrollClassName:`items-center gap-2`,"aria-label":T({id:`_0EAFR`}),qaTestId:`${S}-captures`,children:[a.map((e,t)=>/* @__PURE__ */ (0,M.jsx)(w,{type:`image`,imageSrc:e.previewUrl,onExpand:()=>{D(null),ne(t)},onRemove:()=>c(e.id)},e.id)),o.map((e,t)=>{let n=t+1;return/* @__PURE__ */ (0,M.jsx)(w,{type:`file`,fileName:o.length>1?T({id:`gnRaOE`,values:{number:n}}):T({id:`Ag2QUH`}),fileMetadata:e.file.type||`webm`,icon:C,onExpand:()=>{D(null),ne(a.length+t)},onRemove:()=>l(e.id)},e.id)}),s.map(e=>/* @__PURE__ */ (0,M.jsx)(w,{type:`file`,icon:v,fileName:e.payload.instruction,fileMetadata:e.payload.tagName.toLowerCase(),onRemove:()=>u(e.commentId)},e.commentId))]}):null,t[27]=T,t[28]=s,t[29]=O,t[30]=u,t[31]=l,t[32]=c,t[33]=S,t[34]=o,t[35]=a,t[36]=H):H=t[36];let U;t[37]!==B||t[38]!==V||t[39]!==H?(U=/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`flex w-full min-w-0 flex-col gap-2`,children:[B,V,H]}),t[37]=B,t[38]=V,t[39]=H,t[40]=U):U=t[40];let W;t[41]===x?W=t[42]:(W=x?/* @__PURE__ */ (0,M.jsx)(f,{state:`error`,wrap:!0,children:x}):null,t[41]=x,t[42]=W);let G;t[43]!==o||t[44]!==a?(G=re(a,o),t[43]=o,t[44]=a,t[45]=G):G=t[45];let K=te!=null,q=te??0,J;t[46]===Symbol.for(`react.memo_cache_sentinel`)?(J=()=>ne(null),t[46]=J):J=t[46];let ie=`${S}-lightbox`,Y;t[47]!==E||t[48]!==G||t[49]!==K||t[50]!==q||t[51]!==ie?(Y=/* @__PURE__ */ (0,M.jsx)(m,{images:G,open:K,initialIndex:q,origin:E,onClose:J,qaTestId:ie}),t[47]=E,t[48]=G,t[49]=K,t[50]=q,t[51]=ie,t[52]=Y):Y=t[52];let X;return t[53]!==S||t[54]!==R||t[55]!==U||t[56]!==W||t[57]!==Y?(X=/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`flex flex-col gap-4`,"qa-test-id":S,children:[R,U,W,Y]}),t[53]=S,t[54]=R,t[55]=U,t[56]=W,t[57]=Y,t[58]=X):X=t[58],X}const R={capture:!0};function z({onSubmit:e,initialPhase:t=`capture`,initialScreenshots:n=[],initialMessage:r=``,defaultScreenRecording:i=!1,isActive:a=!0,onExit:o}){let{_:s}=ee(),c=s({id:`C7-tRr`}),[l,d]=(0,N.useState)(t),[f,p]=(0,N.useState)(r),[m,h]=(0,N.useState)(!1),[g,v]=(0,N.useState)(!1),[y,b]=(0,N.useState)(null),[x,S]=(0,N.useState)(!1),[C,w]=(0,N.useState)(`screenshot`),[T,D]=(0,N.useState)(null),[k,A]=(0,N.useState)(!1),re=(0,N.useRef)(null),j=E(n,{handleEscape:!1}),P=ne(i),F=O({showStopControl:!1,describePlaceholder:c,handleEscape:!1}),I=x||j.isSelecting||P.isCapturing||F.isSelecting,L=j.isDragging||j.isCapturing||P.isCapturing||F.isDescribing;function z(e){return e===`permission`?s({id:`saKeiM`}):e===`unsupported`?s({id:`LLrXkb`}):e===`failed`?s({id:`wdNb5Y`}):null}function B(){S(!0)}function V(){S(!1)}function H(){j.start({onSettled:e=>{V(),!(e!==`captured`||j.isAtLimit)&&(B(),H())}})}function U(e){if(D(null),e.length===0)return;let{images:t,videos:n,rejected:r}=te(e);t.length>0&&j.addFiles(t);for(let e of n)P.setClip(e);t.length===0&&n.length===0?D(s({id:`MZbysF`})):r.length>0&&D(s({id:`7N8QTL`}))}u(`keydown`,e=>{a&&o&&e instanceof KeyboardEvent&&e.key===`Escape`&&(e.preventDefault(),e.stopImmediatePropagation(),k?A(!1):G())},void 0,R),u(`paste`,e=>{if(!a||!(e instanceof ClipboardEvent))return;let t=Array.from(e.clipboardData?.files??[]);t.length!==0&&(e.preventDefault(),U(t))});let W=j.items.length>0||P.clips.length>0||P.isRecording||F.items.length>0||F.isDescribing||f.trim()!==``;function G(){l===`sent`||!W?o?.():(j.stop(),F.stop(),A(!0))}function K(){let t=f.trim();t?(h(!1),b(null),v(!0),Promise.resolve(e({message:t,screenshots:j.items.length>0?j.items.map(e=>e.file):void 0,screenRecording:P.clips.length>0?P.clips.map(e=>e.file):void 0,elementComments:F.items.map(e=>e.payload)})).then(()=>{d(`sent`)}).catch(e=>{let t=e instanceof Error?e.message.trim():``;console.error(`Feedback submit failed: %s`,t||`unknown`);let n=e instanceof Error&&`code`in e&&typeof e.code==`string`?e.code:void 0,r={needs_auth:s({id:`W5yboM`}),forbidden:s({id:`7DBZwP`}),too_large:s({id:`blInpT`}),upload_failed:s({id:`w9O_D6`}),unavailable:s({id:`5qN8QO`}),submit_failed:s({id:`j1ZalJ`})};b((n?r[n]:void 0)??(t||s({id:`j1ZalJ`})))}).finally(()=>{v(!1)})):(h(!0),re.current?.shake())}return{phase:l,isCapturing:I,isEngaged:L,isRecording:P.isRecording,recordingElapsedMs:P.elapsedMs,stopRecording:P.stop,audioEnabled:P.audioEnabled,setAudioEnabled:P.setAudioEnabled,audioLevels:P.audioLevels,draftLabel:F.draftLabel,describeDraft:F.describeDraft,cancelDraft:F.cancelDraft,highlightElement:F.highlightElement,highlightedId:F.highlightedId,screenshots:j.items,recordings:P.clips,elements:F.items,screenshotsAtLimit:j.isAtLimit,captureError:j.error??T??z(P.errorKind),message:f,setMessage:e=>{p(e),e.trim()&&h(!1)},showMessageError:m,isSubmitting:g,submitError:y,shakeRef:re,selectedMode:C,startMode:e=>{w(e),D(null),e!==`screenshot`&&j.stop(),e!==`element`&&F.stop(),e!==`recording`&&P.stop(),B(),e===`screenshot`?H():e===`recording`?P.start({onSettled:()=>{V(),w(e=>e===`recording`?null:e)}}):F.start({onSettled:V})},addMedia:U,hasUnsavedWork:W,isConfirmingDiscard:k,requestExit:G,confirmDiscard:()=>{A(!1),o?.()},cancelDiscard:()=>A(!1),removeScreenshot:j.remove,removeRecording:P.remove,removeElement:F.remove,done:()=>{j.stop(),F.stop(),P.stop(),d(`review`)},backToCapture:()=>{d(`capture`),C!=null&&C!==`recording`&&(B(),C===`screenshot`?H():F.start({onSettled:V}))},submit:K,reset:()=>{d(`capture`),w(`screenshot`),p(``),h(!1),b(null),D(null),A(!1),S(!1),j.reset(),P.reset(),F.reset()},overlays:/* @__PURE__ */ (0,M.jsxs)(M.Fragment,{children:[j.overlay,F.overlay,k?/* @__PURE__ */ (0,M.jsx)(_,{open:!0,size:`md`,closeOnEscape:!1,dismissOnBackdropClick:!0,onOpenChange:e=>{e||A(!1)},headerProps:{title:s({id:`y_B1-W`}),description:s({id:`i9B9Se`})},footerProps:{primaryButton:{variant:`strong`,children:s({id:`4OjqAQ`}),onClick:()=>A(!1)},secondaryButton:{variant:`stroke`,children:s({id:`bzSI52`}),onClick:()=>{A(!1),o?.()}}},qaTestId:`feedback-mode-discard-confirm`}):null]})}}function B({active:e,onExit:n,onSubmit:r,renderReview:i,initialPhase:a,initialScreenshots:l,initialMessage:u,defaultScreenRecording:d,qaTestId:f=`feedback-mode`}){let{_:p}=ee(),m=c()??!1,h=(0,N.useRef)(()=>{}),g=z({onSubmit:r,initialPhase:a,initialScreenshots:l,initialMessage:u,defaultScreenRecording:d,isActive:e,onExit:()=>{h.current()}});function _(){g.reset(),n()}if(h.current=_,!e)return null;let v=g.phase===`sent`?/* @__PURE__ */ (0,M.jsxs)(`div`,{className:`flex flex-col items-center gap-3 py-4 text-center`,"qa-test-id":`${f}-sent`,children:[/* @__PURE__ */ (0,M.jsx)(A,{size:24,color:`positive-base`}),/* @__PURE__ */ (0,M.jsx)(`p`,{className:`pui-text-label-medium text-text-sub`,children:p({id:`P3EO-9`})})]}):/* @__PURE__ */ (0,M.jsx)(L,{message:g.message,onMessageChange:g.setMessage,showMessageError:g.showMessageError,screenshots:g.screenshots,recordings:g.recordings,elements:g.elements,onRemoveScreenshot:g.removeScreenshot,onRemoveRecording:g.removeRecording,onRemoveElement:g.removeElement,isSubmitting:g.isSubmitting,submitError:g.submitError,qaTestId:`${f}-review`});return/* @__PURE__ */ (0,M.jsxs)(`div`,{"qa-test-id":f,children:[/* @__PURE__ */ (0,M.jsx)(I,{show:!0,qaTestId:`${f}-frame`}),/* @__PURE__ */ (0,M.jsx)(s,{children:g.phase===`capture`&&!g.isConfirmingDiscard?/* @__PURE__ */ (0,M.jsx)(o.div,{className:`pointer-events-none fixed inset-x-0 bottom-6 z-[106] flex justify-center px-4`,initial:m?{opacity:0}:{opacity:0,y:20},animate:m?{opacity:1}:{opacity:1,y:0},exit:m?{opacity:0}:{opacity:0,y:20},transition:m?{duration:0}:t,children:/* @__PURE__ */ (0,M.jsx)(`div`,{className:`pointer-events-auto w-full max-w-130 min-w-0`,children:/* @__PURE__ */ (0,M.jsx)(F,{selectedMode:g.selectedMode,onSelectMode:g.startMode,screenshots:g.screenshots,recordings:g.recordings,elements:g.elements,onRemoveScreenshot:g.removeScreenshot,onRemoveRecording:g.removeRecording,onRemoveElement:g.removeElement,onHighlightElement:g.highlightElement,screenshotsAtLimit:g.screenshotsAtLimit,error:g.captureError,isRecording:g.isRecording,recordingElapsedMs:g.recordingElapsedMs,onStopRecording:g.stopRecording,audioEnabled:g.audioEnabled,onAudioEnabledChange:g.setAudioEnabled,audioLevels:g.audioLevels,isEngaged:g.isEngaged,onAddMedia:g.addMedia,onDone:g.done,onExit:g.requestExit,qaTestId:`${f}-bar`})})}):null}),g.phase===`capture`?null:i({phase:g.phase,message:g.message,isSubmitting:g.isSubmitting,shakeRef:g.shakeRef,submit:g.submit,backToCapture:g.backToCapture,exit:_,body:v}),g.overlays]})}export{F as a,I as i,z as n,L as r,B as t};
@@ -0,0 +1 @@
1
+ import{a as e}from"./rolldown-runtime-BWaJ3C7D.js";import{t}from"./react-CUaU2Z9V.js";import{t as n}from"./ChevronRightIcon-Dgm8qBR8.js";import{t as r}from"./compiler-runtime-B3BlmaWz.js";import{t as i}from"./jsx-runtime-Dgn0yPdi.js";import{t as a}from"./dist-BNSTMZct.js";import{n as o}from"./react-CqECE5Y5.js";import{t as s}from"./AnimatePresence-DOl8NYHq.js";import{t as c}from"./use-reduced-motion-CNBdBisf.js";import{i as l}from"./dist-BRMXKypj.js";import{t as u}from"./Tag-ORoY16Bh.js";import{t as ee}from"./ChevronLeftIcon-DixrWUUO.js";var te=r(),d=/* @__PURE__ */ e(i(),1),f=/* @__PURE__ */ e(t(),1);const ne=[.32,.72,0,1];function re(e){return Math.max(0,Math.min(100,e))}function ie(e){let t=(0,te.c)(3),[n,r]=(0,f.useState)(void 0),i,a;return t[0]===e?(i=t[1],a=t[2]):(i=()=>{if(!e)return;let t=new Image,n=()=>r(e);return t.onload=n,t.onerror=n,t.src=e,()=>{t.onload=null,t.onerror=null}},a=[e],t[0]=e,t[1]=i,t[2]=a),(0,f.useEffect)(i,a),!!e&&n===e}function p(e){let t=(0,te.c)(115),{before:r,after:i,alt:p,initialPosition:ae,afterPending:oe,className:se,qaTestId:ce}=e,le=ae===void 0?50:ae,ue=oe!==void 0&&oe,de=ce===void 0?`image-compare`:ce,{_:m}=l(),fe=c()??!1,pe=(0,f.useRef)(null),me=ie(ue?void 0:i),h=!ue&&me,g;t[0]===le?g=t[1]:(g=()=>re(le),t[0]=le,t[1]=g);let[_,he]=(0,f.useState)(g),[v,ge]=(0,f.useState)(!1),y=h?_:50,b,x,S,C,w,T,E,D,O,k,A,j,M,N;if(t[2]!==m||t[3]!==v||t[4]!==_||t[5]!==fe||t[6]!==h||t[7]!==y){let e=Math.round(y),n=100-e,r=fe?0:.18,i;t[22]===r?i=t[23]:(i={duration:r,ease:ne},t[22]=r,t[23]=i),x=i;let a;t[24]===_?a=t[25]:(a=e=>{let t=pe.current?.getBoundingClientRect();return!t||t.width<=0?_:re((e-t.left)/t.width*100)},t[24]=_,t[25]=a);let o=a,s;t[26]!==o||t[27]!==h?(s=e=>{if(h&&e.button===0){try{e.currentTarget.setPointerCapture(e.pointerId)}catch{}ge(!0),he(o(e.clientX))}},t[26]=o,t[27]=h,t[28]=s):s=t[28],C=s;let c;t[29]!==v||t[30]!==o||t[31]!==h?(c=e=>{h&&v&&he(o(e.clientX))},t[29]=v,t[30]=o,t[31]=h,t[32]=c):c=t[32],w=c;let l;t[33]===v?l=t[34]:(l=e=>{if(v){try{e.currentTarget.releasePointerCapture(e.pointerId)}catch{}ge(!1)}},t[33]=v,t[34]=l),T=l;let u;t[35]!==_||t[36]!==h?(u=e=>{if(!h)return;let t=e.shiftKey?10:2,n=null;e.key===`ArrowLeft`?n=_-t:e.key===`ArrowRight`?n=_+t:e.key===`Home`?n=0:e.key===`End`&&(n=100),n!==null&&(e.preventDefault(),e.stopPropagation(),he(re(n)))},t[35]=_,t[36]=h,t[37]=u):u=t[37],S=u,b=`inset(0 0 0 ${y}%)`,k=pe,A=`slider`,j=h?0:-1,t[38]===m?M=t[39]:(M=m({id:`bVJj50`}),t[38]=m,t[39]=M),N=0,E=100,D=e,O=m({id:`dpp_NS`,values:{roundedPosition:e,afterShare:n}}),t[2]=m,t[3]=v,t[4]=_,t[5]=fe,t[6]=h,t[7]=y,t[8]=b,t[9]=x,t[10]=S,t[11]=C,t[12]=w,t[13]=T,t[14]=E,t[15]=D,t[16]=O,t[17]=k,t[18]=A,t[19]=j,t[20]=M,t[21]=N}else b=t[8],x=t[9],S=t[10],C=t[11],w=t[12],T=t[13],E=t[14],D=t[15],O=t[16],k=t[17],A=t[18],j=t[19],M=t[20],N=t[21];let _e=!h||void 0,ve=h?`cursor-ew-resize`:`cursor-default`,P;t[40]!==se||t[41]!==ve?(P=a(`relative w-full touch-none overflow-clip rounded-28 bg-base-weak outline-none select-none`,ve,`focus-visible:shadow-outline-primary focus-visible:outline-none`,se),t[40]=se,t[41]=ve,t[42]=P):P=t[42];let ye=v||void 0,be=!h||void 0,F;t[43]!==p||t[44]!==r?(F=/* @__PURE__ */ (0,d.jsx)(`img`,{src:r,alt:p,draggable:!1,decoding:`async`,className:`pointer-events-none block h-auto w-full select-none`,"data-slot":`image-compare-before`}),t[43]=p,t[44]=r,t[45]=F):F=t[45];let I;t[46]===b?I=t[47]:(I={clipPath:b,WebkitClipPath:b},t[46]=b,t[47]=I);let L;t[48]!==i||t[49]!==x||t[50]!==h?(L=/* @__PURE__ */ (0,d.jsx)(s,{initial:!1,mode:`sync`,children:h?/* @__PURE__ */ (0,d.jsx)(o.img,{src:i,alt:``,draggable:!1,decoding:`async`,className:`absolute inset-0 size-full object-cover select-none`,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:x},`after-image`):/* @__PURE__ */ (0,d.jsx)(o.div,{className:`absolute inset-0 bg-base-weak`,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:x,"data-slot":`image-compare-shimmer`,children:/* @__PURE__ */ (0,d.jsx)(`div`,{className:`size-full animate-skeleton-shimmer image-shimmer`})},`after-shimmer`)}),t[48]=i,t[49]=x,t[50]=h,t[51]=L):L=t[51];let R;t[52]!==I||t[53]!==L?(R=/* @__PURE__ */ (0,d.jsx)(`div`,{"aria-hidden":!0,className:`pointer-events-none absolute inset-0`,style:I,"data-slot":`image-compare-after`,children:L}),t[52]=I,t[53]=L,t[54]=R):R=t[54];let z;t[55]!==m||t[56]!==p||t[57]!==h?(z=h?null:/* @__PURE__ */ (0,d.jsx)(`span`,{className:`sr-only`,children:m({id:`2EnWHS`,values:{alt:p}})}),t[55]=m,t[56]=p,t[57]=h,t[58]=z):z=t[58];let xe=y>6?`opacity-100`:`opacity-30`,B;t[59]===xe?B=t[60]:(B=a(`transition-opacity duration-150`,xe),t[59]=xe,t[60]=B);let V;t[61]===m?V=t[62]:(V=m({id:`EmSrGB`}),t[61]=m,t[62]=V);let H;t[63]===V?H=t[64]:(H=/* @__PURE__ */ (0,d.jsx)(u,{variant:`overlay`,size:`medium`,className:`backdrop-blur-md`,children:V}),t[63]=V,t[64]=H);let U;t[65]!==B||t[66]!==H?(U=/* @__PURE__ */ (0,d.jsx)(`span`,{className:B,"data-slot":`image-compare-label-before`,children:H}),t[65]=B,t[66]=H,t[67]=U):U=t[67];let Se=y<94?`opacity-100`:`opacity-30`,W;t[68]===Se?W=t[69]:(W=a(`transition-opacity duration-150`,Se),t[68]=Se,t[69]=W);let G;t[70]===m?G=t[71]:(G=m({id:`NawEr2`}),t[70]=m,t[71]=G);let K;t[72]===G?K=t[73]:(K=/* @__PURE__ */ (0,d.jsx)(u,{variant:`overlay`,size:`medium`,className:`backdrop-blur-md`,children:G}),t[72]=G,t[73]=K);let q;t[74]!==W||t[75]!==K?(q=/* @__PURE__ */ (0,d.jsx)(`span`,{className:W,"data-slot":`image-compare-label-after`,children:K}),t[74]=W,t[75]=K,t[76]=q):q=t[76];let J;t[77]!==U||t[78]!==q?(J=/* @__PURE__ */ (0,d.jsxs)(`div`,{"aria-hidden":!0,className:`pointer-events-none absolute inset-x-0 top-0 flex items-start justify-between p-3`,children:[U,q]}),t[77]=U,t[78]=q,t[79]=J):J=t[79];let Ce=`${y}%`,Y;t[80]===Ce?Y=t[81]:(Y={left:Ce},t[80]=Ce,t[81]=Y);let X;t[82]===Symbol.for(`react.memo_cache_sentinel`)?(X=/* @__PURE__ */ (0,d.jsx)(`div`,{className:`absolute inset-y-0 left-0 w-0.5 -translate-x-1/2 bg-base-inverse shadow-card-outline`}),t[82]=X):X=t[82];let we=v?`px-1 py-3`:`px-0.5 py-2.5`,Z;t[83]===we?Z=t[84]:(Z=a(`absolute top-1/2 left-0 flex -translate-x-1/2 -translate-y-1/2 rounded-full bg-base-inverse shadow-depth-sm transition-[padding] duration-150`,we),t[83]=we,t[84]=Z);let Te,Ee;t[85]===Symbol.for(`react.memo_cache_sentinel`)?(Te=/* @__PURE__ */ (0,d.jsx)(ee,{size:16,color:`icon-strong`}),Ee=/* @__PURE__ */ (0,d.jsx)(n,{size:16,color:`icon-strong`}),t[85]=Te,t[86]=Ee):(Te=t[85],Ee=t[86]);let Q;t[87]===Z?Q=t[88]:(Q=/* @__PURE__ */ (0,d.jsxs)(`div`,{className:Z,"data-slot":`image-compare-knob`,children:[Te,Ee]}),t[87]=Z,t[88]=Q);let $;t[89]!==Y||t[90]!==Q?($=/* @__PURE__ */ (0,d.jsxs)(`div`,{"aria-hidden":!0,className:`pointer-events-none absolute inset-y-0 w-0`,style:Y,"data-slot":`image-compare-handle`,children:[X,Q]}),t[89]=Y,t[90]=Q,t[91]=$):$=t[91];let De;return t[92]!==S||t[93]!==C||t[94]!==w||t[95]!==T||t[96]!==de||t[97]!==E||t[98]!==D||t[99]!==O||t[100]!==_e||t[101]!==P||t[102]!==ye||t[103]!==be||t[104]!==F||t[105]!==R||t[106]!==z||t[107]!==J||t[108]!==$||t[109]!==k||t[110]!==A||t[111]!==j||t[112]!==M||t[113]!==N?(De=/* @__PURE__ */ (0,d.jsxs)(`div`,{ref:k,role:A,tabIndex:j,"aria-label":M,"aria-valuemin":N,"aria-valuemax":E,"aria-valuenow":D,"aria-valuetext":O,"aria-disabled":_e,onPointerDown:C,onPointerMove:w,onPointerUp:T,onPointerCancel:T,onKeyDown:S,className:P,"data-slot":`image-compare`,"data-dragging":ye,"data-pending":be,"qa-test-id":de,children:[F,R,z,J,$]}),t[92]=S,t[93]=C,t[94]=w,t[95]=T,t[96]=de,t[97]=E,t[98]=D,t[99]=O,t[100]=_e,t[101]=P,t[102]=ye,t[103]=be,t[104]=F,t[105]=R,t[106]=z,t[107]=J,t[108]=$,t[109]=k,t[110]=A,t[111]=j,t[112]=M,t[113]=N,t[114]=De):De=t[114],De}export{p as t};
@@ -1 +1 @@
1
- import{a as e}from"./rolldown-runtime-BWaJ3C7D.js";import{t}from"./react-CUaU2Z9V.js";import{t as n}from"./compiler-runtime-B3BlmaWz.js";import{t as r}from"./jsx-runtime-Dgn0yPdi.js";import{t as i}from"./dist-BNSTMZct.js";import{i as a}from"./dist-BRMXKypj.js";import{t as o}from"./Lightbox-BLNBf1tQ.js";var s=n(),c=/* @__PURE__ */ e(r(),1),l=/* @__PURE__ */ e(t(),1);const u={1:`grid-cols-1 grid-rows-1`,2:`grid-cols-2 grid-rows-1`,3:`grid-cols-2 grid-rows-2 [&>*:first-child]:row-span-2`,4:`grid-cols-2 grid-rows-2`},d={default:`gap-1 rounded-10`,medium:`size-16 gap-0.5 rounded-lg`,small:`size-10 gap-px rounded-md`};function f(e){let t=e.getBoundingClientRect();return{x:t.left+t.width/2,y:t.top+t.height/2}}function p(e){let t=(0,s.c)(33),{src:n,loading:r,overflow:o,isOverflowTile:u,onOpen:d,label:p}=e,{_:m}=a(),[h,g]=(0,l.useState)(!1),_=!!d&&!!n&&!r,v=r||!!n&&!h,y;t[0]!==_||t[1]!==h||t[2]!==r||t[3]!==n?(y=n&&!r?/* @__PURE__ */ (0,c.jsx)(`div`,{className:i(`absolute inset-0`,_&&`transition-opacity duration-150 ease-out hover:[@media(hover:hover)]:opacity-80`),children:/* @__PURE__ */ (0,c.jsx)(`img`,{ref:e=>{e?.complete&&g(!0)},src:n,alt:``,loading:`lazy`,onLoad:()=>g(!0),onError:()=>g(!0),className:i(`pointer-events-none absolute inset-0 size-full object-cover`,_&&`transition-transform duration-200 ease-out group-hover:[@media(hover:hover)]:scale-105`,h?`opacity-100`:`opacity-0`)})}):null,t[0]=_,t[1]=h,t[2]=r,t[3]=n,t[4]=y):y=t[4];let b;t[5]!==m||t[6]!==v?(b=v?/* @__PURE__ */ (0,c.jsx)(`div`,{role:`status`,"aria-label":m({id:`N1YYa7`}),className:`pointer-events-none absolute inset-0 animate-skeleton-shimmer image-shimmer`,children:/* @__PURE__ */ (0,c.jsx)(`span`,{className:`sr-only`,children:m({id:`N1YYa7`})})}):null,t[5]=m,t[6]=v,t[7]=b):b=t[7];let x;t[8]!==u||t[9]!==r||t[10]!==o?(x=u&&!r?/* @__PURE__ */ (0,c.jsx)(`div`,{className:`pointer-events-none absolute right-2 bottom-2 flex items-center rounded-10 bg-depth-black-4 px-1.5 py-1 backdrop-blur-sm`,children:/* @__PURE__ */ (0,c.jsx)(`span`,{className:`pui-text-mono-medium-bold text-static-white`,children:`+${o}`})}):null,t[8]=u,t[9]=r,t[10]=o,t[11]=x):x=t[11];let S;t[12]!==y||t[13]!==b||t[14]!==x?(S=/* @__PURE__ */ (0,c.jsxs)(c.Fragment,{children:[y,b,x]}),t[12]=y,t[13]=b,t[14]=x,t[15]=S):S=t[15];let C=S,w,T;if(t[16]!==m||t[17]!==C||t[18]!==_||t[19]!==p||t[20]!==r||t[21]!==d||t[22]!==n){T=Symbol.for(`react.early_return_sentinel`);bb0:if(w=i(`group relative size-full min-h-0 overflow-clip rounded`,_&&`cursor-zoom-in`,!n&&!r&&`bg-base-weak`),_&&d){let e;t[25]!==m||t[26]!==p?(e=m(p?{id:`bS9wc7`,values:{label:p}}:{id:`FfCzU5`}),t[25]=m,t[26]=p,t[27]=e):e=t[27];let n;t[28]===d?n=t[29]:(n=e=>{d(f(e.currentTarget))},t[28]=d,t[29]=n),T=/* @__PURE__ */ (0,c.jsx)(`button`,{type:`button`,"aria-label":e,onClick:n,className:i(w,`appearance-none border-0 bg-transparent p-0`),children:C});break bb0}t[16]=m,t[17]=C,t[18]=_,t[19]=p,t[20]=r,t[21]=d,t[22]=n,t[23]=w,t[24]=T}else w=t[23],T=t[24];if(T!==Symbol.for(`react.early_return_sentinel`))return T;let E;return t[30]!==w||t[31]!==C?(E=/* @__PURE__ */ (0,c.jsx)(`div`,{className:w,children:C}),t[30]=w,t[31]=C,t[32]=E):E=t[32],E}function m(e){let t=(0,s.c)(32),{images:n,count:r,loading:a,lightbox:f,label:m,size:h,className:g,showOverflow:_,qaTestId:v}=e,y=a!==void 0&&a,b=f!==void 0&&f,x=h===void 0?`default`:h,S=_===void 0||_,C=v===void 0?`image-grid`:v,[w,T]=(0,l.useState)(!1),[E,D]=(0,l.useState)(0),[O,k]=(0,l.useState)(null),A;t[0]===n?A=t[1]:(A=n.slice(0,4),t[0]=n,t[1]=A);let j=A,M=r??n.length,N=r===void 0?4:Math.min(Math.max(M,1),4),P=y?Math.min(Math.max(M,1),4):Math.max(Math.min(j.length,N,4),1),F=y||x!=="default"?0:Math.max(0,M-P),I=b&&n.length>0,L;t[2]===n.length?L=t[3]:(L=(e,t)=>{D(Math.min(e,n.length-1)),k(t),T(!0)},t[2]=n.length,t[3]=L);let R=L,z=d[x],B=u[P],V;t[4]!==g||t[5]!==z||t[6]!==B?(V=i(`grid overflow-clip`,z,B,g),t[4]=g,t[5]=z,t[6]=B,t[7]=V):V=t[7];let H;t[8]!==m||t[9]!==I||t[10]!==y||t[11]!==R||t[12]!==F||t[13]!==S||t[14]!==j||t[15]!==P?(H=Array.from({length:P},(e,t)=>/* @__PURE__ */ (0,c.jsx)(p,{src:y?void 0:j[t],loading:y,overflow:F,isOverflowTile:S&&t===P-1&&F>0,onOpen:I?e=>R(t,e):void 0,label:m},t)),t[8]=m,t[9]=I,t[10]=y,t[11]=R,t[12]=F,t[13]=S,t[14]=j,t[15]=P,t[16]=H):H=t[16];let U;t[17]!==C||t[18]!==V||t[19]!==H?(U=/* @__PURE__ */ (0,c.jsx)(`div`,{className:V,"qa-test-id":C,children:H}),t[17]=C,t[18]=V,t[19]=H,t[20]=U):U=t[20];let W;t[21]!==n||t[22]!==E||t[23]!==m||t[24]!==I||t[25]!==w||t[26]!==O||t[27]!==C?(W=I?/* @__PURE__ */ (0,c.jsx)(o,{images:n.map(e=>({src:e,title:m})),open:w,initialIndex:E,origin:O,onClose:()=>T(!1),qaTestId:`${C}-lightbox`}):null,t[21]=n,t[22]=E,t[23]=m,t[24]=I,t[25]=w,t[26]=O,t[27]=C,t[28]=W):W=t[28];let G;return t[29]!==U||t[30]!==W?(G=/* @__PURE__ */ (0,c.jsxs)(c.Fragment,{children:[U,W]}),t[29]=U,t[30]=W,t[31]=G):G=t[31],G}export{m as t};
1
+ import{a as e}from"./rolldown-runtime-BWaJ3C7D.js";import{t}from"./react-CUaU2Z9V.js";import{t as n}from"./compiler-runtime-B3BlmaWz.js";import{t as r}from"./jsx-runtime-Dgn0yPdi.js";import{t as i}from"./dist-BNSTMZct.js";import{i as a}from"./dist-BRMXKypj.js";import{t as o}from"./Lightbox-BJYrdHsA.js";var s=n(),c=/* @__PURE__ */ e(r(),1),l=/* @__PURE__ */ e(t(),1);const u={1:`grid-cols-1 grid-rows-1`,2:`grid-cols-2 grid-rows-1`,3:`grid-cols-2 grid-rows-2 [&>*:first-child]:row-span-2`,4:`grid-cols-2 grid-rows-2`},d={default:`gap-1 rounded-10`,medium:`size-16 gap-0.5 rounded-lg`,small:`size-10 gap-px rounded-md`};function f(e){let t=e.getBoundingClientRect();return{x:t.left+t.width/2,y:t.top+t.height/2}}function p(e){let t=(0,s.c)(33),{src:n,loading:r,overflow:o,isOverflowTile:u,onOpen:d,label:p}=e,{_:m}=a(),[h,g]=(0,l.useState)(!1),_=!!d&&!!n&&!r,v=r||!!n&&!h,y;t[0]!==_||t[1]!==h||t[2]!==r||t[3]!==n?(y=n&&!r?/* @__PURE__ */ (0,c.jsx)(`div`,{className:i(`absolute inset-0`,_&&`transition-opacity duration-150 ease-out hover:[@media(hover:hover)]:opacity-80`),children:/* @__PURE__ */ (0,c.jsx)(`img`,{ref:e=>{e?.complete&&g(!0)},src:n,alt:``,loading:`lazy`,onLoad:()=>g(!0),onError:()=>g(!0),className:i(`pointer-events-none absolute inset-0 size-full object-cover`,_&&`transition-transform duration-200 ease-out group-hover:[@media(hover:hover)]:scale-105`,h?`opacity-100`:`opacity-0`)})}):null,t[0]=_,t[1]=h,t[2]=r,t[3]=n,t[4]=y):y=t[4];let b;t[5]!==m||t[6]!==v?(b=v?/* @__PURE__ */ (0,c.jsx)(`div`,{role:`status`,"aria-label":m({id:`N1YYa7`}),className:`pointer-events-none absolute inset-0 animate-skeleton-shimmer image-shimmer`,children:/* @__PURE__ */ (0,c.jsx)(`span`,{className:`sr-only`,children:m({id:`N1YYa7`})})}):null,t[5]=m,t[6]=v,t[7]=b):b=t[7];let x;t[8]!==u||t[9]!==r||t[10]!==o?(x=u&&!r?/* @__PURE__ */ (0,c.jsx)(`div`,{className:`pointer-events-none absolute right-2 bottom-2 flex items-center rounded-10 bg-depth-black-4 px-1.5 py-1 backdrop-blur-sm`,children:/* @__PURE__ */ (0,c.jsx)(`span`,{className:`pui-text-mono-medium-bold text-static-white`,children:`+${o}`})}):null,t[8]=u,t[9]=r,t[10]=o,t[11]=x):x=t[11];let S;t[12]!==y||t[13]!==b||t[14]!==x?(S=/* @__PURE__ */ (0,c.jsxs)(c.Fragment,{children:[y,b,x]}),t[12]=y,t[13]=b,t[14]=x,t[15]=S):S=t[15];let C=S,w,T;if(t[16]!==m||t[17]!==C||t[18]!==_||t[19]!==p||t[20]!==r||t[21]!==d||t[22]!==n){T=Symbol.for(`react.early_return_sentinel`);bb0:if(w=i(`group relative size-full min-h-0 overflow-clip rounded`,_&&`cursor-zoom-in`,!n&&!r&&`bg-base-weak`),_&&d){let e;t[25]!==m||t[26]!==p?(e=m(p?{id:`bS9wc7`,values:{label:p}}:{id:`FfCzU5`}),t[25]=m,t[26]=p,t[27]=e):e=t[27];let n;t[28]===d?n=t[29]:(n=e=>{d(f(e.currentTarget))},t[28]=d,t[29]=n),T=/* @__PURE__ */ (0,c.jsx)(`button`,{type:`button`,"aria-label":e,onClick:n,className:i(w,`appearance-none border-0 bg-transparent p-0`),children:C});break bb0}t[16]=m,t[17]=C,t[18]=_,t[19]=p,t[20]=r,t[21]=d,t[22]=n,t[23]=w,t[24]=T}else w=t[23],T=t[24];if(T!==Symbol.for(`react.early_return_sentinel`))return T;let E;return t[30]!==w||t[31]!==C?(E=/* @__PURE__ */ (0,c.jsx)(`div`,{className:w,children:C}),t[30]=w,t[31]=C,t[32]=E):E=t[32],E}function m(e){let t=(0,s.c)(32),{images:n,count:r,loading:a,lightbox:f,label:m,size:h,className:g,showOverflow:_,qaTestId:v}=e,y=a!==void 0&&a,b=f!==void 0&&f,x=h===void 0?`default`:h,S=_===void 0||_,C=v===void 0?`image-grid`:v,[w,T]=(0,l.useState)(!1),[E,D]=(0,l.useState)(0),[O,k]=(0,l.useState)(null),A;t[0]===n?A=t[1]:(A=n.slice(0,4),t[0]=n,t[1]=A);let j=A,M=r??n.length,N=r===void 0?4:Math.min(Math.max(M,1),4),P=y?Math.min(Math.max(M,1),4):Math.max(Math.min(j.length,N,4),1),F=y||x!=="default"?0:Math.max(0,M-P),I=b&&n.length>0,L;t[2]===n.length?L=t[3]:(L=(e,t)=>{D(Math.min(e,n.length-1)),k(t),T(!0)},t[2]=n.length,t[3]=L);let R=L,z=d[x],B=u[P],V;t[4]!==g||t[5]!==z||t[6]!==B?(V=i(`grid overflow-clip`,z,B,g),t[4]=g,t[5]=z,t[6]=B,t[7]=V):V=t[7];let H;t[8]!==m||t[9]!==I||t[10]!==y||t[11]!==R||t[12]!==F||t[13]!==S||t[14]!==j||t[15]!==P?(H=Array.from({length:P},(e,t)=>/* @__PURE__ */ (0,c.jsx)(p,{src:y?void 0:j[t],loading:y,overflow:F,isOverflowTile:S&&t===P-1&&F>0,onOpen:I?e=>R(t,e):void 0,label:m},t)),t[8]=m,t[9]=I,t[10]=y,t[11]=R,t[12]=F,t[13]=S,t[14]=j,t[15]=P,t[16]=H):H=t[16];let U;t[17]!==C||t[18]!==V||t[19]!==H?(U=/* @__PURE__ */ (0,c.jsx)(`div`,{className:V,"qa-test-id":C,children:H}),t[17]=C,t[18]=V,t[19]=H,t[20]=U):U=t[20];let W;t[21]!==n||t[22]!==E||t[23]!==m||t[24]!==I||t[25]!==w||t[26]!==O||t[27]!==C?(W=I?/* @__PURE__ */ (0,c.jsx)(o,{images:n.map(e=>({src:e,title:m})),open:w,initialIndex:E,origin:O,onClose:()=>T(!1),qaTestId:`${C}-lightbox`}):null,t[21]=n,t[22]=E,t[23]=m,t[24]=I,t[25]=w,t[26]=O,t[27]=C,t[28]=W):W=t[28];let G;return t[29]!==U||t[30]!==W?(G=/* @__PURE__ */ (0,c.jsxs)(c.Fragment,{children:[U,W]}),t[29]=U,t[30]=W,t[31]=G):G=t[31],G}export{m as t};
@@ -1 +1 @@
1
- import{a as e}from"./rolldown-runtime-BWaJ3C7D.js";import{t}from"./react-CUaU2Z9V.js";import{t as n}from"./jsx-runtime-Dgn0yPdi.js";import{t as r}from"./dist-BNSTMZct.js";import{n as i}from"./react-CqECE5Y5.js";import{t as a}from"./AnimatePresence-DOl8NYHq.js";import{t as o}from"./use-reduced-motion-CNBdBisf.js";import{t as s}from"./react-dom-BoXJ8nUa.js";import{i as c}from"./dist-BRMXKypj.js";import{n as l}from"./dist-CPlSvWC_.js";import{t as u}from"./CloseIcon-CpFDDETM.js";import{t as d}from"./ButtonGroup-DyN6RM7S.js";import{t as f}from"./DownloadIcon-IBxOELNe.js";import{t as p}from"./ImageCompare-BIeh0KQe.js";import{n as m}from"./downloadImage-9ousrCMi.js";import{t as h}from"./LightboxScrub-CX4sq0Ei.js";var g=/* @__PURE__ */ e(n(),1),_=/* @__PURE__ */ e(t(),1),v=/* @__PURE__ */ e(s(),1);const y={type:`spring`,stiffness:400,damping:32,mass:.8},b={duration:.2,ease:[.32,.72,0,1]},x={duration:.25,ease:[.32,.72,0,1]},S={duration:0};function C(e){return e instanceof Element&&e.closest(`[data-slot="image-compare"]`)!==null}function w({images:e,open:t,onClose:n,initialIndex:s=0,origin:w=null,qaTestId:T=`lightbox`}){let{_:E}=c(),D=o()??!1,[O,k]=(0,_.useState)(s),A=e.length>1,[j,M]=(0,_.useState)(!1);t!==j&&(M(t),t&&k(s));let N=Math.max(0,Math.min(O,e.length-1)),P=e[N],F=P?.mediaType===`video`?void 0:P?.before,I=()=>{n()},L=(0,_.useRef)(e.length);L.current=e.length;let R=(0,_.useRef)(e=>{k(t=>{let n=L.current;return e===1?t<n-1?t+1:0:t>0?t-1:n-1})}).current;l(`keydown`,e=>{if(t)switch(e.key){case`Escape`:e.stopImmediatePropagation(),I();break;case`ArrowUp`:case`ArrowLeft`:A&&!C(e.target)&&(e.preventDefault(),R(-1));break;case`ArrowDown`:case`ArrowRight`:A&&!C(e.target)&&(e.preventDefault(),R(1))}},void 0,{capture:!0});let z=(0,_.useRef)(!1);if((0,_.useEffect)(()=>{if(!t||!A)return;let e=!1,n=null,r=t=>{let r=t.target;if(r.closest(`[data-slot="lightbox-scrub"]`)||C(r))return;let i=window.matchMedia(`(max-width: 768px)`).matches,a=i?t.deltaX:t.deltaY,o=i?t.deltaY:t.deltaX;Math.abs(a)<20||Math.abs(a)<Math.abs(o)||(t.preventDefault(),e?(n&&clearTimeout(n),n=setTimeout(()=>{e=!1},150)):(e=!0,R(a>0?1:-1),n=setTimeout(()=>{e=!1},150)))};return window.addEventListener(`wheel`,r,{passive:!1}),()=>{window.removeEventListener(`wheel`,r),n&&clearTimeout(n)}},[t,A,e.length,R]),(0,_.useEffect)(()=>{if(!t||!A)return;let e=null,n=t=>{let n=t.target;if(n.closest(`button`)||n.closest(`[data-slot="lightbox-scrub"]`)||C(n))return;let r=t.touches[0];r&&(e={x:r.clientX,y:r.clientY})},r=t=>{if(!e)return;let n=t.touches[0];if(!n)return;let r=Math.abs(n.clientX-e.x),i=Math.abs(n.clientY-e.y);r>10&&r>i&&t.preventDefault()},i=t=>{if(!e)return;let n=t.changedTouches[0];if(!n){e=null;return}let r=n.clientX-e.x,i=n.clientY-e.y;e=null,Math.abs(r)>50&&Math.abs(r)>Math.abs(i)&&(z.current=!0,R(r<0?1:-1))};return window.addEventListener(`touchstart`,n,{passive:!0}),window.addEventListener(`touchmove`,r,{passive:!1}),window.addEventListener(`touchend`,i),()=>{window.removeEventListener(`touchstart`,n),window.removeEventListener(`touchmove`,r),window.removeEventListener(`touchend`,i)}},[t,A,e.length,R]),(0,_.useEffect)(()=>{if(t){let e=document.body.style.overflow;return document.body.style.overflow=`hidden`,()=>{document.body.style.overflow=e}}},[t]),typeof document>`u`)return null;let B=w?`${w.x}px ${w.y}px`:`50% 50%`;return(0,v.createPortal)(/* @__PURE__ */ (0,g.jsx)(a,{children:t&&P?/* @__PURE__ */ (0,g.jsxs)(`div`,{className:`fixed inset-0 z-[110]`,"qa-test-id":T,"data-slot":`lightbox`,children:[/* @__PURE__ */ (0,g.jsx)(i.div,{className:`absolute inset-0 bg-depth-white-96`,initial:{opacity:0},animate:{opacity:1,transition:D?S:x},exit:{opacity:0,transition:D?S:b},onClick:I,"aria-hidden":!0}),/* @__PURE__ */ (0,g.jsx)(i.div,{className:`pointer-events-none absolute inset-0`,style:{transformOrigin:B},initial:D?{opacity:0}:{opacity:0,scale:.6},animate:{opacity:1,scale:1,transition:D?S:y},exit:{opacity:0,scale:D?1:.6,transition:D?S:b},children:/* @__PURE__ */ (0,g.jsx)(`div`,{className:r(`pointer-events-auto relative flex h-full items-center justify-center p-5 sm:p-16`,`max-sm:pr-[max(1.25rem,env(safe-area-inset-right))] max-sm:pl-[max(1.25rem,env(safe-area-inset-left))]`,`max-sm:pt-[max(1rem,env(safe-area-inset-top))]`,A?`max-sm:pb-[max(5.5rem,calc(env(safe-area-inset-bottom)+4.5rem))]`:`max-sm:pb-[max(1rem,env(safe-area-inset-bottom))]`),onClick:()=>{z.current?z.current=!1:I()},children:/* @__PURE__ */ (0,g.jsxs)(`div`,{className:`flex w-full max-w-full flex-col items-center gap-4`,children:[/* @__PURE__ */ (0,g.jsx)(`div`,{className:r(`relative`,!F&&`overflow-hidden rounded-2xl`),onClick:e=>e.stopPropagation(),children:F?/* @__PURE__ */ (0,g.jsx)(p,{before:F,after:P.src,alt:P.alt??``,className:r(`w-auto rounded-2xl! [&>img]:w-auto`,A?r(`[&>img]:max-h-[55vh] sm:[&>img]:max-h-[70vh]`,`[&>img]:max-w-[calc(100vw-3rem)] sm:[&>img]:max-w-[65vw]`):r(`[&>img]:max-h-[70vh]`,`[&>img]:max-w-[min(80vw,calc(100vw-3rem))]`)),qaTestId:`${T}-image-compare`},P.src):P.mediaType===`video`?/* @__PURE__ */ (0,g.jsx)(`video`,{src:P.src,controls:!0,autoPlay:!0,playsInline:!0,"aria-label":P.alt??``,className:r(`bg-base-strong object-contain`,A?r(`max-h-[55vh] sm:max-h-[70vh]`,`max-w-[calc(100vw-3rem)] sm:max-w-[65vw]`):r(`max-h-[70vh]`,`max-w-[min(80vw,calc(100vw-3rem))]`))},P.src):/* @__PURE__ */ (0,g.jsx)(`img`,{src:P.src,alt:P.alt??``,className:r(`pointer-events-none object-contain select-none`,A?r(`max-h-[55vh] sm:max-h-[70vh]`,`max-w-[calc(100vw-3rem)] sm:max-w-[65vw]`):r(`max-h-[70vh]`,`max-w-[min(80vw,calc(100vw-3rem))]`)),draggable:!1})}),P.title||P.description?/* @__PURE__ */ (0,g.jsxs)(`div`,{className:`flex flex-col items-center gap-1`,onClick:e=>e.stopPropagation(),children:[P.title?/* @__PURE__ */ (0,g.jsx)(`p`,{className:`pui-text-label-medium text-text-strong`,children:P.title}):null,P.description?/* @__PURE__ */ (0,g.jsx)(`p`,{className:`pui-text-body-small text-text-soft`,children:P.description}):null]}):null]})})}),/* @__PURE__ */ (0,g.jsx)(i.div,{className:r(`absolute z-10`,`max-sm:top-[max(0.75rem,env(safe-area-inset-top))] max-sm:right-[max(0.75rem,env(safe-area-inset-right))]`,`sm:top-2 sm:right-2`),initial:D?{opacity:0}:{opacity:0,x:80},animate:{opacity:1,x:0,transition:D?S:y},exit:{opacity:0,x:D?0:80,transition:D?S:b},children:/* @__PURE__ */ (0,g.jsx)(d,{variant:`weak`,actions:[{icon:u,"aria-label":`Close lightbox`,onClick:I},{icon:f,"aria-label":P.mediaType===`video`?E({id:`BdyTPm`}):E({id:`dhu12h`}),onClick:()=>{P&&m(P.src,P.alt)}}]})}),A?/* @__PURE__ */ (0,g.jsx)(i.div,{className:r(`absolute flex`,`sm:top-14 sm:right-6 sm:bottom-14`,`max-sm:right-0 max-sm:bottom-[max(0.75rem,env(safe-area-inset-bottom))] max-sm:left-0 max-sm:justify-center`),initial:D?{opacity:0}:{opacity:0,x:80},animate:{opacity:1,x:0,transition:D?S:y},exit:{opacity:0,x:D?0:80,transition:D?S:b},onClick:e=>e.stopPropagation(),children:/* @__PURE__ */ (0,g.jsx)(h,{images:e,activeIndex:N,onSelect:k})}):null]}):null}),document.body)}export{w as t};
1
+ import{a as e}from"./rolldown-runtime-BWaJ3C7D.js";import{t}from"./react-CUaU2Z9V.js";import{t as n}from"./jsx-runtime-Dgn0yPdi.js";import{t as r}from"./dist-BNSTMZct.js";import{n as i}from"./react-CqECE5Y5.js";import{t as a}from"./AnimatePresence-DOl8NYHq.js";import{t as o}from"./use-reduced-motion-CNBdBisf.js";import{t as s}from"./react-dom-BoXJ8nUa.js";import{i as c}from"./dist-BRMXKypj.js";import{n as l}from"./dist-CPlSvWC_.js";import{t as u}from"./CloseIcon-CpFDDETM.js";import{t as d}from"./ButtonGroup-DyN6RM7S.js";import{t as f}from"./DownloadIcon-IBxOELNe.js";import{t as p}from"./ImageCompare-CCyEzB62.js";import{n as m}from"./downloadImage-9ousrCMi.js";import{t as h}from"./LightboxScrub-CX4sq0Ei.js";var g=/* @__PURE__ */ e(n(),1),_=/* @__PURE__ */ e(t(),1),v=/* @__PURE__ */ e(s(),1);const y={type:`spring`,stiffness:400,damping:32,mass:.8},b={duration:.2,ease:[.32,.72,0,1]},x={duration:.25,ease:[.32,.72,0,1]},S={duration:0};function C(e){return e instanceof Element&&e.closest(`[data-slot="image-compare"]`)!==null}function w({images:e,open:t,onClose:n,initialIndex:s=0,origin:w=null,qaTestId:T=`lightbox`}){let{_:E}=c(),D=o()??!1,[O,k]=(0,_.useState)(s),A=e.length>1,[j,M]=(0,_.useState)(!1);t!==j&&(M(t),t&&k(s));let N=Math.max(0,Math.min(O,e.length-1)),P=e[N],F=P?.mediaType===`video`?void 0:P?.before,I=()=>{n()},L=(0,_.useRef)(e.length);L.current=e.length;let R=(0,_.useRef)(e=>{k(t=>{let n=L.current;return e===1?t<n-1?t+1:0:t>0?t-1:n-1})}).current;l(`keydown`,e=>{if(t)switch(e.key){case`Escape`:e.stopImmediatePropagation(),I();break;case`ArrowUp`:case`ArrowLeft`:A&&!C(e.target)&&(e.preventDefault(),R(-1));break;case`ArrowDown`:case`ArrowRight`:A&&!C(e.target)&&(e.preventDefault(),R(1))}},void 0,{capture:!0});let z=(0,_.useRef)(!1);if((0,_.useEffect)(()=>{if(!t||!A)return;let e=!1,n=null,r=t=>{let r=t.target;if(r.closest(`[data-slot="lightbox-scrub"]`)||C(r))return;let i=window.matchMedia(`(max-width: 768px)`).matches,a=i?t.deltaX:t.deltaY,o=i?t.deltaY:t.deltaX;Math.abs(a)<20||Math.abs(a)<Math.abs(o)||(t.preventDefault(),e?(n&&clearTimeout(n),n=setTimeout(()=>{e=!1},150)):(e=!0,R(a>0?1:-1),n=setTimeout(()=>{e=!1},150)))};return window.addEventListener(`wheel`,r,{passive:!1}),()=>{window.removeEventListener(`wheel`,r),n&&clearTimeout(n)}},[t,A,e.length,R]),(0,_.useEffect)(()=>{if(!t||!A)return;let e=null,n=t=>{let n=t.target;if(n.closest(`button`)||n.closest(`[data-slot="lightbox-scrub"]`)||C(n))return;let r=t.touches[0];r&&(e={x:r.clientX,y:r.clientY})},r=t=>{if(!e)return;let n=t.touches[0];if(!n)return;let r=Math.abs(n.clientX-e.x),i=Math.abs(n.clientY-e.y);r>10&&r>i&&t.preventDefault()},i=t=>{if(!e)return;let n=t.changedTouches[0];if(!n){e=null;return}let r=n.clientX-e.x,i=n.clientY-e.y;e=null,Math.abs(r)>50&&Math.abs(r)>Math.abs(i)&&(z.current=!0,R(r<0?1:-1))};return window.addEventListener(`touchstart`,n,{passive:!0}),window.addEventListener(`touchmove`,r,{passive:!1}),window.addEventListener(`touchend`,i),()=>{window.removeEventListener(`touchstart`,n),window.removeEventListener(`touchmove`,r),window.removeEventListener(`touchend`,i)}},[t,A,e.length,R]),(0,_.useEffect)(()=>{if(t){let e=document.body.style.overflow;return document.body.style.overflow=`hidden`,()=>{document.body.style.overflow=e}}},[t]),typeof document>`u`)return null;let B=w?`${w.x}px ${w.y}px`:`50% 50%`;return(0,v.createPortal)(/* @__PURE__ */ (0,g.jsx)(a,{children:t&&P?/* @__PURE__ */ (0,g.jsxs)(`div`,{className:`fixed inset-0 z-[110]`,"qa-test-id":T,"data-slot":`lightbox`,children:[/* @__PURE__ */ (0,g.jsx)(i.div,{className:`absolute inset-0 bg-depth-white-96`,initial:{opacity:0},animate:{opacity:1,transition:D?S:x},exit:{opacity:0,transition:D?S:b},onClick:I,"aria-hidden":!0}),/* @__PURE__ */ (0,g.jsx)(i.div,{className:`pointer-events-none absolute inset-0`,style:{transformOrigin:B},initial:D?{opacity:0}:{opacity:0,scale:.6},animate:{opacity:1,scale:1,transition:D?S:y},exit:{opacity:0,scale:D?1:.6,transition:D?S:b},children:/* @__PURE__ */ (0,g.jsx)(`div`,{className:r(`pointer-events-auto relative flex h-full items-center justify-center p-5 sm:p-16`,`max-sm:pr-[max(1.25rem,env(safe-area-inset-right))] max-sm:pl-[max(1.25rem,env(safe-area-inset-left))]`,`max-sm:pt-[max(1rem,env(safe-area-inset-top))]`,A?`max-sm:pb-[max(5.5rem,calc(env(safe-area-inset-bottom)+4.5rem))]`:`max-sm:pb-[max(1rem,env(safe-area-inset-bottom))]`),onClick:()=>{z.current?z.current=!1:I()},children:/* @__PURE__ */ (0,g.jsxs)(`div`,{className:`flex w-full max-w-full flex-col items-center gap-4`,children:[/* @__PURE__ */ (0,g.jsx)(`div`,{className:r(`relative`,!F&&`overflow-hidden rounded-2xl`),onClick:e=>e.stopPropagation(),children:F?/* @__PURE__ */ (0,g.jsx)(p,{before:F,after:P.src,alt:P.alt??``,className:r(`w-auto rounded-2xl! [&>img]:w-auto`,A?r(`[&>img]:max-h-[55vh] sm:[&>img]:max-h-[70vh]`,`[&>img]:max-w-[calc(100vw-3rem)] sm:[&>img]:max-w-[65vw]`):r(`[&>img]:max-h-[70vh]`,`[&>img]:max-w-[min(80vw,calc(100vw-3rem))]`)),qaTestId:`${T}-image-compare`},P.src):P.mediaType===`video`?/* @__PURE__ */ (0,g.jsx)(`video`,{src:P.src,controls:!0,autoPlay:!0,playsInline:!0,"aria-label":P.alt??``,className:r(`bg-base-strong object-contain`,A?r(`max-h-[55vh] sm:max-h-[70vh]`,`max-w-[calc(100vw-3rem)] sm:max-w-[65vw]`):r(`max-h-[70vh]`,`max-w-[min(80vw,calc(100vw-3rem))]`))},P.src):/* @__PURE__ */ (0,g.jsx)(`img`,{src:P.src,alt:P.alt??``,className:r(`pointer-events-none object-contain select-none`,A?r(`max-h-[55vh] sm:max-h-[70vh]`,`max-w-[calc(100vw-3rem)] sm:max-w-[65vw]`):r(`max-h-[70vh]`,`max-w-[min(80vw,calc(100vw-3rem))]`)),draggable:!1})}),P.title||P.description?/* @__PURE__ */ (0,g.jsxs)(`div`,{className:`flex flex-col items-center gap-1`,onClick:e=>e.stopPropagation(),children:[P.title?/* @__PURE__ */ (0,g.jsx)(`p`,{className:`pui-text-label-medium text-text-strong`,children:P.title}):null,P.description?/* @__PURE__ */ (0,g.jsx)(`p`,{className:`pui-text-body-small text-text-soft`,children:P.description}):null]}):null]})})}),/* @__PURE__ */ (0,g.jsx)(i.div,{className:r(`absolute z-10`,`max-sm:top-[max(0.75rem,env(safe-area-inset-top))] max-sm:right-[max(0.75rem,env(safe-area-inset-right))]`,`sm:top-2 sm:right-2`),initial:D?{opacity:0}:{opacity:0,x:80},animate:{opacity:1,x:0,transition:D?S:y},exit:{opacity:0,x:D?0:80,transition:D?S:b},children:/* @__PURE__ */ (0,g.jsx)(d,{variant:`weak`,actions:[{icon:u,"aria-label":`Close lightbox`,onClick:I},{icon:f,"aria-label":P.mediaType===`video`?E({id:`BdyTPm`}):E({id:`dhu12h`}),onClick:()=>{P&&m(P.src,P.alt)}}]})}),A?/* @__PURE__ */ (0,g.jsx)(i.div,{className:r(`absolute flex`,`sm:top-14 sm:right-6 sm:bottom-14`,`max-sm:right-0 max-sm:bottom-[max(0.75rem,env(safe-area-inset-bottom))] max-sm:left-0 max-sm:justify-center`),initial:D?{opacity:0}:{opacity:0,x:80},animate:{opacity:1,x:0,transition:D?S:y},exit:{opacity:0,x:D?0:80,transition:D?S:b},onClick:e=>e.stopPropagation(),children:/* @__PURE__ */ (0,g.jsx)(h,{images:e,activeIndex:N,onSelect:k})}):null]}):null}),document.body)}export{w as t};
@@ -0,0 +1 @@
1
+ function e(e=``,t){return t<1||e.length<=t?e:`${e.substring(0,t).trim()}...`}export{e as t};
@@ -246,7 +246,7 @@ function ImageCompare(t0) {
246
246
  const t14 = showAfter ? "cursor-ew-resize" : "cursor-default";
247
247
  let t15;
248
248
  if ($[40] !== className || $[41] !== t14) {
249
- t15 = cn("relative w-full touch-none overflow-clip rounded-28 bg-base-weak outline-none select-none", t14, "focus-visible:ring-4 focus-visible:ring-primary-base", className);
249
+ t15 = cn("relative w-full touch-none overflow-clip rounded-28 bg-base-weak outline-none select-none", t14, "focus-visible:shadow-outline-primary focus-visible:outline-none", className);
250
250
  $[40] = className;
251
251
  $[41] = t14;
252
252
  $[42] = t15;
@@ -0,0 +1,258 @@
1
+ import { Tooltip, TooltipContent, TooltipTrigger } from "../Tooltip/Tooltip.js";
2
+ import { trimText } from "../../lib/utils/trim-text.js";
3
+ import { c } from "react/compiler-runtime";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ import { useRef, useState } from "react";
6
+ import { cn } from "cn";
7
+
8
+ //#region src/components/TrimText/TrimText.tsx
9
+ function assignRef(ref, node) {
10
+ if (typeof ref === "function") ref(node);
11
+ else if (ref) ref.current = node;
12
+ }
13
+ function isOverflowed(el) {
14
+ return el.scrollWidth > el.clientWidth;
15
+ }
16
+ /**
17
+ * Width clipping depends on layout, not on props: the span is `w-full`, so its border box follows
18
+ * the container while `scrollWidth` follows the text. ResizeObserver misses a font swap or a
19
+ * letter-spacing change that leaves that box the same size. Measure on the node itself (no effect),
20
+ * again when `document.fonts` settles, and again when the parent is hovered or focused so the tab
21
+ * stop is current before the user tabs onward.
22
+ */
23
+ function watchWidthOverflow(node, onChange) {
24
+ const measure = () => onChange(isOverflowed(node));
25
+ measure();
26
+ const frame = requestAnimationFrame(measure);
27
+ const observer = new ResizeObserver(measure);
28
+ observer.observe(node);
29
+ const parent = node.parentElement;
30
+ parent?.addEventListener("focusin", measure);
31
+ parent?.addEventListener("pointerenter", measure);
32
+ const fonts = typeof document !== "undefined" ? document.fonts : void 0;
33
+ fonts?.addEventListener("loadingdone", measure);
34
+ fonts?.ready.then(() => {
35
+ if (node.isConnected) measure();
36
+ });
37
+ return () => {
38
+ cancelAnimationFrame(frame);
39
+ observer.disconnect();
40
+ parent?.removeEventListener("focusin", measure);
41
+ parent?.removeEventListener("pointerenter", measure);
42
+ fonts?.removeEventListener("loadingdone", measure);
43
+ };
44
+ }
45
+ function TrimText(t0) {
46
+ const $ = c(57);
47
+ let className;
48
+ let limit;
49
+ let props;
50
+ let ref;
51
+ let t1;
52
+ let t2;
53
+ let text;
54
+ if ($[0] !== t0) {
55
+ ({text, limit, side: t1, className, qaTestId: t2, ref, ...props} = t0);
56
+ $[0] = t0;
57
+ $[1] = className;
58
+ $[2] = limit;
59
+ $[3] = props;
60
+ $[4] = ref;
61
+ $[5] = t1;
62
+ $[6] = t2;
63
+ $[7] = text;
64
+ } else {
65
+ className = $[1];
66
+ limit = $[2];
67
+ props = $[3];
68
+ ref = $[4];
69
+ t1 = $[5];
70
+ t2 = $[6];
71
+ text = $[7];
72
+ }
73
+ const side = t1 === void 0 ? "bottom" : t1;
74
+ const qaTestId = t2 === void 0 ? "trim-text" : t2;
75
+ const spanRef = useRef(null);
76
+ const overflowWatchRef = useRef(null);
77
+ const [open, setOpen] = useState(false);
78
+ const [overflowed, setOverflowed] = useState(false);
79
+ let T0;
80
+ let T1;
81
+ let t3;
82
+ let t4;
83
+ let t5;
84
+ let t6;
85
+ let t7;
86
+ let t8;
87
+ if ($[8] !== className || $[9] !== limit || $[10] !== open || $[11] !== props || $[12] !== qaTestId || $[13] !== ref || $[14] !== side || $[15] !== text) {
88
+ t8 = Symbol.for("react.early_return_sentinel");
89
+ bb0: {
90
+ const textClassName = cn("pui-text-body-medium text-text-strong", className);
91
+ if (limit != null && limit >= 1) {
92
+ let t9;
93
+ if ($[24] !== limit || $[25] !== text) {
94
+ t9 = trimText(text, limit);
95
+ $[24] = limit;
96
+ $[25] = text;
97
+ $[26] = t9;
98
+ } else t9 = $[26];
99
+ const trimmed = t9;
100
+ if (trimmed === text) {
101
+ t8 = /* @__PURE__ */ jsx("span", {
102
+ ref,
103
+ className: textClassName,
104
+ "qa-test-id": qaTestId,
105
+ ...props,
106
+ children: text
107
+ });
108
+ break bb0;
109
+ }
110
+ const t10 = /* @__PURE__ */ jsx(TooltipTrigger, {
111
+ asChild: true,
112
+ children: /* @__PURE__ */ jsx("span", {
113
+ ref,
114
+ className: textClassName,
115
+ "qa-test-id": qaTestId,
116
+ ...props,
117
+ tabIndex: 0,
118
+ children: trimmed
119
+ })
120
+ });
121
+ let t11;
122
+ if ($[27] !== side || $[28] !== text) {
123
+ t11 = /* @__PURE__ */ jsx(TooltipContent, {
124
+ side,
125
+ className: "max-w-xs break-words whitespace-normal",
126
+ children: text
127
+ });
128
+ $[27] = side;
129
+ $[28] = text;
130
+ $[29] = t11;
131
+ } else t11 = $[29];
132
+ let t12;
133
+ if ($[30] !== t10 || $[31] !== t11) {
134
+ t12 = /* @__PURE__ */ jsxs(Tooltip, { children: [t10, t11] });
135
+ $[30] = t10;
136
+ $[31] = t11;
137
+ $[32] = t12;
138
+ } else t12 = $[32];
139
+ t8 = t12;
140
+ break bb0;
141
+ }
142
+ T1 = Tooltip;
143
+ t6 = open;
144
+ if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
145
+ t7 = (next) => {
146
+ const el = spanRef.current;
147
+ setOpen(next && el != null && isOverflowed(el));
148
+ };
149
+ $[33] = t7;
150
+ } else t7 = $[33];
151
+ T0 = TooltipTrigger;
152
+ t5 = true;
153
+ if ($[34] !== ref || $[35] !== text) {
154
+ t3 = (node) => {
155
+ overflowWatchRef.current?.();
156
+ overflowWatchRef.current = null;
157
+ spanRef.current = node;
158
+ assignRef(ref, node);
159
+ if (!node) return;
160
+ if (text.length === 0) {
161
+ setOverflowed(false);
162
+ return;
163
+ }
164
+ overflowWatchRef.current = watchWidthOverflow(node, setOverflowed);
165
+ };
166
+ $[34] = ref;
167
+ $[35] = text;
168
+ $[36] = t3;
169
+ } else t3 = $[36];
170
+ t4 = cn(textClassName, "block w-full min-w-0 truncate");
171
+ }
172
+ $[8] = className;
173
+ $[9] = limit;
174
+ $[10] = open;
175
+ $[11] = props;
176
+ $[12] = qaTestId;
177
+ $[13] = ref;
178
+ $[14] = side;
179
+ $[15] = text;
180
+ $[16] = T0;
181
+ $[17] = T1;
182
+ $[18] = t3;
183
+ $[19] = t4;
184
+ $[20] = t5;
185
+ $[21] = t6;
186
+ $[22] = t7;
187
+ $[23] = t8;
188
+ } else {
189
+ T0 = $[16];
190
+ T1 = $[17];
191
+ t3 = $[18];
192
+ t4 = $[19];
193
+ t5 = $[20];
194
+ t6 = $[21];
195
+ t7 = $[22];
196
+ t8 = $[23];
197
+ }
198
+ if (t8 !== Symbol.for("react.early_return_sentinel")) return t8;
199
+ const t9 = overflowed ? 0 : void 0;
200
+ let t10;
201
+ if ($[37] !== props || $[38] !== qaTestId || $[39] !== t3 || $[40] !== t4 || $[41] !== t9 || $[42] !== text) {
202
+ t10 = /* @__PURE__ */ jsx("span", {
203
+ ref: t3,
204
+ className: t4,
205
+ "qa-test-id": qaTestId,
206
+ ...props,
207
+ tabIndex: t9,
208
+ children: text
209
+ });
210
+ $[37] = props;
211
+ $[38] = qaTestId;
212
+ $[39] = t3;
213
+ $[40] = t4;
214
+ $[41] = t9;
215
+ $[42] = text;
216
+ $[43] = t10;
217
+ } else t10 = $[43];
218
+ let t11;
219
+ if ($[44] !== T0 || $[45] !== t10 || $[46] !== t5) {
220
+ t11 = /* @__PURE__ */ jsx(T0, {
221
+ asChild: t5,
222
+ children: t10
223
+ });
224
+ $[44] = T0;
225
+ $[45] = t10;
226
+ $[46] = t5;
227
+ $[47] = t11;
228
+ } else t11 = $[47];
229
+ let t12;
230
+ if ($[48] !== side || $[49] !== text) {
231
+ t12 = /* @__PURE__ */ jsx(TooltipContent, {
232
+ side,
233
+ className: "max-w-xs break-words whitespace-normal",
234
+ children: text
235
+ });
236
+ $[48] = side;
237
+ $[49] = text;
238
+ $[50] = t12;
239
+ } else t12 = $[50];
240
+ let t13;
241
+ if ($[51] !== T1 || $[52] !== t11 || $[53] !== t12 || $[54] !== t6 || $[55] !== t7) {
242
+ t13 = /* @__PURE__ */ jsxs(T1, {
243
+ open: t6,
244
+ onOpenChange: t7,
245
+ children: [t11, t12]
246
+ });
247
+ $[51] = T1;
248
+ $[52] = t11;
249
+ $[53] = t12;
250
+ $[54] = t6;
251
+ $[55] = t7;
252
+ $[56] = t13;
253
+ } else t13 = $[56];
254
+ return t13;
255
+ }
256
+
257
+ //#endregion
258
+ export { TrimText, trimText };
@@ -0,0 +1,17 @@
1
+ //#region src/lib/utils/trim-text.ts
2
+ /**
3
+ * Truncate `text` to `characterLength` characters and append `...` when it does not fit. Mirrors
4
+ * React UI `trimText`: a length below 1 returns `text` unchanged (so a bad limit never collapses to
5
+ * a lone ellipsis), and the kept slice is trimmed before the ellipsis.
6
+ *
7
+ * Truncation is signaled by the return value. When the text was shortened, the result differs from
8
+ * `text` and ends with `...`. When it was not, the result is `text`.
9
+ */
10
+ function trimText(text = "", characterLength) {
11
+ if (characterLength < 1) return text;
12
+ if (text.length <= characterLength) return text;
13
+ return `${text.substring(0, characterLength).trim()}...`;
14
+ }
15
+
16
+ //#endregion
17
+ export { trimText };
@@ -2,7 +2,7 @@
2
2
  const NPM_CDN = "https://cdn.jsdelivr.net/npm/";
3
3
  const SHARED = /^(@patterninc\/pattern-ui\/|(react|react-dom|@lingui\/core|@lingui\/react|sucrase)(\/|$))/;
4
4
  const scriptUrl = document.currentScript instanceof HTMLScriptElement ? document.currentScript.src : "";
5
- const packageUrl = new URL("../", scriptUrl || location.href).href.replace(/\/@patterninc\/pattern-ui(@[^/]*)?\//, `/@patterninc/pattern-ui@0.0.0-main.202610232103.2cb6e31ce186/`);
5
+ const packageUrl = new URL("../", scriptUrl || location.href).href.replace(/\/@patterninc\/pattern-ui(@[^/]*)?\//, `/@patterninc/pattern-ui@0.0.0-main.202610232122.0f2a0d83bcb6/`);
6
6
  const browserUrl = `${packageUrl}dist/browser/`;
7
7
  globalThis.patternPlayCdnUrl = (specifier) => {
8
8
  if (specifier.endsWith(".css")) return `${browserUrl}${specifier}`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patterninc/pattern-ui",
3
- "version": "0.0.0-main.202610232103.2cb6e31ce186",
3
+ "version": "0.0.0-main.202610232122.0f2a0d83bcb6",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/patterninc/pattern-exp.git",
@@ -753,6 +753,14 @@
753
753
  "./tone": {
754
754
  "types": "./src/utils/tone-context.tsx",
755
755
  "default": "./dist/utils/tone-context.js"
756
+ },
757
+ "./trim-text": {
758
+ "types": "./src/components/TrimText/TrimText.tsx",
759
+ "default": "./dist/components/TrimText/TrimText.js"
760
+ },
761
+ "./trim-text-fn": {
762
+ "types": "./src/lib/utils/trim-text.ts",
763
+ "default": "./dist/lib/utils/trim-text.js"
756
764
  }
757
765
  },
758
766
  "publishConfig": {
@@ -352,7 +352,7 @@ export function ActivityCardContent({
352
352
  ) : null)}
353
353
  {media ? (
354
354
  // Radius-16 clip so any media gets the card's corners. An ImageCompare clips its own image
355
- // layers, so for it the wrapper stops clipping (its 4px focus ring stays visible) and sets
355
+ // layers, so for it the wrapper stops clipping (its 3px focus outline stays visible) and sets
356
356
  // its radius to 16px instead, as Lightbox does. Interactive media (e.g. a compare drag)
357
357
  // must not toggle the card's selection.
358
358
  <div
@@ -183,8 +183,9 @@ export function ImageCompare({
183
183
  className={cn(
184
184
  'relative w-full touch-none overflow-clip rounded-28 bg-base-weak outline-none select-none',
185
185
  showAfter ? 'cursor-ew-resize' : 'cursor-default',
186
- // Figma's focus ring: State/Primary/Base at Effect-4 (4px). No focus-ring token exists.
187
- 'focus-visible:ring-4 focus-visible:ring-primary-base',
186
+ // Figma's Outline/Primary focus effect (2px Base/Inverse inside a 3px State/Primary/Base),
187
+ // the same outline Switch and other Pattern UI controls use.
188
+ 'focus-visible:shadow-outline-primary focus-visible:outline-none',
188
189
  className,
189
190
  )}
190
191
  data-slot='image-compare'
@@ -0,0 +1,169 @@
1
+ import { cn } from 'cn'
2
+ import { type ComponentProps, type Ref, useRef, useState } from 'react'
3
+
4
+ import { trimText } from '../../lib/utils/trim-text'
5
+ // Pattern UI Tooltip (same primitive UploadItem uses for a clipped filename). The full string is
6
+ // shown on hover and keyboard focus, and only when the text is actually truncated. A plain span
7
+ // is not in the tab order, and Radix only opens the tooltip when the trigger is focusable, so the
8
+ // truncated span gets tabIndex={0}.
9
+ import { Tooltip, TooltipContent, TooltipTrigger } from '../Tooltip/Tooltip'
10
+
11
+ export { trimText } from '../../lib/utils/trim-text'
12
+
13
+ export type TrimTextSide = 'top' | 'right' | 'bottom' | 'left'
14
+
15
+ export interface TrimTextProps extends Omit<ComponentProps<'span'>, 'children'> {
16
+ /** The text to display. */
17
+ text: string
18
+ /**
19
+ * Characters to keep before the ellipsis. Omit it, or pass a value below 1, to ellipsize to the
20
+ * container width instead of counting characters.
21
+ */
22
+ limit?: number
23
+ /**
24
+ * Preferred tooltip side. This is React UI `TrimText`'s `position`, named for Pattern UI
25
+ * `TooltipContent`.
26
+ *
27
+ * @default 'bottom'
28
+ */
29
+ side?: TrimTextSide
30
+ /** Optional test id rendered as the `qa-test-id` attribute for QA testing */
31
+ qaTestId?: string
32
+ }
33
+
34
+ function assignRef(ref: Ref<HTMLSpanElement> | undefined, node: HTMLSpanElement | null) {
35
+ if (typeof ref === 'function') ref(node)
36
+ else if (ref) ref.current = node
37
+ }
38
+
39
+ function isOverflowed(el: HTMLElement): boolean {
40
+ // Integers, so a 1px overflow is already ellipsized. Strict `>` matches React UI TrimText.
41
+ return el.scrollWidth > el.clientWidth
42
+ }
43
+
44
+ /**
45
+ * Width clipping depends on layout, not on props: the span is `w-full`, so its border box follows
46
+ * the container while `scrollWidth` follows the text. ResizeObserver misses a font swap or a
47
+ * letter-spacing change that leaves that box the same size. Measure on the node itself (no effect),
48
+ * again when `document.fonts` settles, and again when the parent is hovered or focused so the tab
49
+ * stop is current before the user tabs onward.
50
+ */
51
+ function watchWidthOverflow(
52
+ node: HTMLSpanElement,
53
+ onChange: (overflowed: boolean) => void,
54
+ ): () => void {
55
+ const measure = () => onChange(isOverflowed(node))
56
+ measure()
57
+ const frame = requestAnimationFrame(measure)
58
+
59
+ const observer = new ResizeObserver(measure)
60
+ observer.observe(node)
61
+
62
+ const parent = node.parentElement
63
+ parent?.addEventListener('focusin', measure)
64
+ parent?.addEventListener('pointerenter', measure)
65
+
66
+ // jsdom has no FontFaceSet. Apps that render TrimText in Vitest stub ResizeObserver only, so a
67
+ // missing `document.fonts` must not throw inside the ref callback.
68
+ const fonts = typeof document !== 'undefined' ? document.fonts : undefined
69
+ fonts?.addEventListener('loadingdone', measure)
70
+ void fonts?.ready.then(() => {
71
+ if (node.isConnected) measure()
72
+ })
73
+
74
+ return () => {
75
+ cancelAnimationFrame(frame)
76
+ observer.disconnect()
77
+ parent?.removeEventListener('focusin', measure)
78
+ parent?.removeEventListener('pointerenter', measure)
79
+ fonts?.removeEventListener('loadingdone', measure)
80
+ }
81
+ }
82
+
83
+ export function TrimText({
84
+ text,
85
+ limit,
86
+ side = 'bottom',
87
+ className,
88
+ qaTestId = 'trim-text',
89
+ ref,
90
+ ...props
91
+ }: TrimTextProps) {
92
+ const spanRef = useRef<HTMLSpanElement>(null)
93
+ const overflowWatchRef = useRef<(() => void) | null>(null)
94
+ const [open, setOpen] = useState(false)
95
+ const [overflowed, setOverflowed] = useState(false)
96
+ const textClassName = cn('pui-text-body-medium text-text-strong', className)
97
+
98
+ if (limit != null && limit >= 1) {
99
+ const trimmed = trimText(text, limit)
100
+ if (trimmed === text) {
101
+ return (
102
+ <span ref={ref} className={textClassName} qa-test-id={qaTestId} {...props}>
103
+ {text}
104
+ </span>
105
+ )
106
+ }
107
+
108
+ return (
109
+ <Tooltip>
110
+ <TooltipTrigger asChild>
111
+ <span
112
+ ref={ref}
113
+ className={textClassName}
114
+ qa-test-id={qaTestId}
115
+ {...props}
116
+ // Truncated text is the tooltip trigger. Radix opens on focus only when it is tabbable.
117
+ // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- span trigger, tabbable only while truncated
118
+ tabIndex={0}
119
+ >
120
+ {trimmed}
121
+ </span>
122
+ </TooltipTrigger>
123
+ <TooltipContent side={side} className='max-w-xs break-words whitespace-normal'>
124
+ {text}
125
+ </TooltipContent>
126
+ </Tooltip>
127
+ )
128
+ }
129
+
130
+ return (
131
+ <Tooltip
132
+ open={open}
133
+ onOpenChange={(next) => {
134
+ const el = spanRef.current
135
+ setOpen(next && el != null && isOverflowed(el))
136
+ }}
137
+ >
138
+ <TooltipTrigger asChild>
139
+ <span
140
+ ref={(node) => {
141
+ overflowWatchRef.current?.()
142
+ overflowWatchRef.current = null
143
+ spanRef.current = node
144
+ assignRef(ref, node)
145
+ if (!node) return
146
+ // `text` is read so a new string re-attaches the watcher. An empty line is not
147
+ // clipped; clear the previous tab stop instead of leaving `overflowed` true.
148
+ if (text.length === 0) {
149
+ setOverflowed(false)
150
+ return
151
+ }
152
+ overflowWatchRef.current = watchWidthOverflow(node, setOverflowed)
153
+ }}
154
+ className={cn(textClassName, 'block w-full min-w-0 truncate')}
155
+ qa-test-id={qaTestId}
156
+ {...props}
157
+ // Only the clipped line is a tab stop. `undefined` drops the attribute when it fits.
158
+ // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- span trigger, tabbable only while truncated
159
+ tabIndex={overflowed ? 0 : undefined}
160
+ >
161
+ {text}
162
+ </span>
163
+ </TooltipTrigger>
164
+ <TooltipContent side={side} className='max-w-xs break-words whitespace-normal'>
165
+ {text}
166
+ </TooltipContent>
167
+ </Tooltip>
168
+ )
169
+ }
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Truncate `text` to `characterLength` characters and append `...` when it does not fit. Mirrors
3
+ * React UI `trimText`: a length below 1 returns `text` unchanged (so a bad limit never collapses to
4
+ * a lone ellipsis), and the kept slice is trimmed before the ellipsis.
5
+ *
6
+ * Truncation is signaled by the return value. When the text was shortened, the result differs from
7
+ * `text` and ends with `...`. When it was not, the result is `text`.
8
+ */
9
+ export function trimText(text = '', characterLength: number): string {
10
+ if (characterLength < 1) return text
11
+ if (text.length <= characterLength) return text
12
+ return `${text.substring(0, characterLength).trim()}...`
13
+ }
@@ -1 +0,0 @@
1
- import{a as e}from"./rolldown-runtime-BWaJ3C7D.js";import{t}from"./react-CUaU2Z9V.js";import{t as n}from"./ChevronRightIcon-Dgm8qBR8.js";import{t as r}from"./compiler-runtime-B3BlmaWz.js";import{t as i}from"./jsx-runtime-Dgn0yPdi.js";import{t as a}from"./dist-BNSTMZct.js";import{n as o}from"./react-CqECE5Y5.js";import{t as s}from"./AnimatePresence-DOl8NYHq.js";import{t as c}from"./use-reduced-motion-CNBdBisf.js";import{i as l}from"./dist-BRMXKypj.js";import{t as u}from"./Tag-ORoY16Bh.js";import{t as ee}from"./ChevronLeftIcon-DixrWUUO.js";var te=r(),d=/* @__PURE__ */ e(i(),1),f=/* @__PURE__ */ e(t(),1);const ne=[.32,.72,0,1];function re(e){return Math.max(0,Math.min(100,e))}function ie(e){let t=(0,te.c)(3),[n,r]=(0,f.useState)(void 0),i,a;return t[0]===e?(i=t[1],a=t[2]):(i=()=>{if(!e)return;let t=new Image,n=()=>r(e);return t.onload=n,t.onerror=n,t.src=e,()=>{t.onload=null,t.onerror=null}},a=[e],t[0]=e,t[1]=i,t[2]=a),(0,f.useEffect)(i,a),!!e&&n===e}function p(e){let t=(0,te.c)(115),{before:r,after:i,alt:p,initialPosition:ae,afterPending:oe,className:se,qaTestId:ce}=e,le=ae===void 0?50:ae,ue=oe!==void 0&&oe,de=ce===void 0?`image-compare`:ce,{_:m}=l(),fe=c()??!1,pe=(0,f.useRef)(null),me=ie(ue?void 0:i),h=!ue&&me,g;t[0]===le?g=t[1]:(g=()=>re(le),t[0]=le,t[1]=g);let[_,he]=(0,f.useState)(g),[v,ge]=(0,f.useState)(!1),y=h?_:50,b,x,S,C,w,T,E,D,O,k,A,j,M,N;if(t[2]!==m||t[3]!==v||t[4]!==_||t[5]!==fe||t[6]!==h||t[7]!==y){let e=Math.round(y),n=100-e,r=fe?0:.18,i;t[22]===r?i=t[23]:(i={duration:r,ease:ne},t[22]=r,t[23]=i),x=i;let a;t[24]===_?a=t[25]:(a=e=>{let t=pe.current?.getBoundingClientRect();return!t||t.width<=0?_:re((e-t.left)/t.width*100)},t[24]=_,t[25]=a);let o=a,s;t[26]!==o||t[27]!==h?(s=e=>{if(h&&e.button===0){try{e.currentTarget.setPointerCapture(e.pointerId)}catch{}ge(!0),he(o(e.clientX))}},t[26]=o,t[27]=h,t[28]=s):s=t[28],C=s;let c;t[29]!==v||t[30]!==o||t[31]!==h?(c=e=>{h&&v&&he(o(e.clientX))},t[29]=v,t[30]=o,t[31]=h,t[32]=c):c=t[32],w=c;let l;t[33]===v?l=t[34]:(l=e=>{if(v){try{e.currentTarget.releasePointerCapture(e.pointerId)}catch{}ge(!1)}},t[33]=v,t[34]=l),T=l;let u;t[35]!==_||t[36]!==h?(u=e=>{if(!h)return;let t=e.shiftKey?10:2,n=null;e.key===`ArrowLeft`?n=_-t:e.key===`ArrowRight`?n=_+t:e.key===`Home`?n=0:e.key===`End`&&(n=100),n!==null&&(e.preventDefault(),e.stopPropagation(),he(re(n)))},t[35]=_,t[36]=h,t[37]=u):u=t[37],S=u,b=`inset(0 0 0 ${y}%)`,k=pe,A=`slider`,j=h?0:-1,t[38]===m?M=t[39]:(M=m({id:`bVJj50`}),t[38]=m,t[39]=M),N=0,E=100,D=e,O=m({id:`dpp_NS`,values:{roundedPosition:e,afterShare:n}}),t[2]=m,t[3]=v,t[4]=_,t[5]=fe,t[6]=h,t[7]=y,t[8]=b,t[9]=x,t[10]=S,t[11]=C,t[12]=w,t[13]=T,t[14]=E,t[15]=D,t[16]=O,t[17]=k,t[18]=A,t[19]=j,t[20]=M,t[21]=N}else b=t[8],x=t[9],S=t[10],C=t[11],w=t[12],T=t[13],E=t[14],D=t[15],O=t[16],k=t[17],A=t[18],j=t[19],M=t[20],N=t[21];let _e=!h||void 0,ve=h?`cursor-ew-resize`:`cursor-default`,P;t[40]!==se||t[41]!==ve?(P=a(`relative w-full touch-none overflow-clip rounded-28 bg-base-weak outline-none select-none`,ve,`focus-visible:ring-4 focus-visible:ring-primary-base`,se),t[40]=se,t[41]=ve,t[42]=P):P=t[42];let ye=v||void 0,be=!h||void 0,F;t[43]!==p||t[44]!==r?(F=/* @__PURE__ */ (0,d.jsx)(`img`,{src:r,alt:p,draggable:!1,decoding:`async`,className:`pointer-events-none block h-auto w-full select-none`,"data-slot":`image-compare-before`}),t[43]=p,t[44]=r,t[45]=F):F=t[45];let I;t[46]===b?I=t[47]:(I={clipPath:b,WebkitClipPath:b},t[46]=b,t[47]=I);let L;t[48]!==i||t[49]!==x||t[50]!==h?(L=/* @__PURE__ */ (0,d.jsx)(s,{initial:!1,mode:`sync`,children:h?/* @__PURE__ */ (0,d.jsx)(o.img,{src:i,alt:``,draggable:!1,decoding:`async`,className:`absolute inset-0 size-full object-cover select-none`,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:x},`after-image`):/* @__PURE__ */ (0,d.jsx)(o.div,{className:`absolute inset-0 bg-base-weak`,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:x,"data-slot":`image-compare-shimmer`,children:/* @__PURE__ */ (0,d.jsx)(`div`,{className:`size-full animate-skeleton-shimmer image-shimmer`})},`after-shimmer`)}),t[48]=i,t[49]=x,t[50]=h,t[51]=L):L=t[51];let R;t[52]!==I||t[53]!==L?(R=/* @__PURE__ */ (0,d.jsx)(`div`,{"aria-hidden":!0,className:`pointer-events-none absolute inset-0`,style:I,"data-slot":`image-compare-after`,children:L}),t[52]=I,t[53]=L,t[54]=R):R=t[54];let z;t[55]!==m||t[56]!==p||t[57]!==h?(z=h?null:/* @__PURE__ */ (0,d.jsx)(`span`,{className:`sr-only`,children:m({id:`2EnWHS`,values:{alt:p}})}),t[55]=m,t[56]=p,t[57]=h,t[58]=z):z=t[58];let xe=y>6?`opacity-100`:`opacity-30`,B;t[59]===xe?B=t[60]:(B=a(`transition-opacity duration-150`,xe),t[59]=xe,t[60]=B);let V;t[61]===m?V=t[62]:(V=m({id:`EmSrGB`}),t[61]=m,t[62]=V);let H;t[63]===V?H=t[64]:(H=/* @__PURE__ */ (0,d.jsx)(u,{variant:`overlay`,size:`medium`,className:`backdrop-blur-md`,children:V}),t[63]=V,t[64]=H);let U;t[65]!==B||t[66]!==H?(U=/* @__PURE__ */ (0,d.jsx)(`span`,{className:B,"data-slot":`image-compare-label-before`,children:H}),t[65]=B,t[66]=H,t[67]=U):U=t[67];let Se=y<94?`opacity-100`:`opacity-30`,W;t[68]===Se?W=t[69]:(W=a(`transition-opacity duration-150`,Se),t[68]=Se,t[69]=W);let G;t[70]===m?G=t[71]:(G=m({id:`NawEr2`}),t[70]=m,t[71]=G);let K;t[72]===G?K=t[73]:(K=/* @__PURE__ */ (0,d.jsx)(u,{variant:`overlay`,size:`medium`,className:`backdrop-blur-md`,children:G}),t[72]=G,t[73]=K);let q;t[74]!==W||t[75]!==K?(q=/* @__PURE__ */ (0,d.jsx)(`span`,{className:W,"data-slot":`image-compare-label-after`,children:K}),t[74]=W,t[75]=K,t[76]=q):q=t[76];let J;t[77]!==U||t[78]!==q?(J=/* @__PURE__ */ (0,d.jsxs)(`div`,{"aria-hidden":!0,className:`pointer-events-none absolute inset-x-0 top-0 flex items-start justify-between p-3`,children:[U,q]}),t[77]=U,t[78]=q,t[79]=J):J=t[79];let Ce=`${y}%`,Y;t[80]===Ce?Y=t[81]:(Y={left:Ce},t[80]=Ce,t[81]=Y);let X;t[82]===Symbol.for(`react.memo_cache_sentinel`)?(X=/* @__PURE__ */ (0,d.jsx)(`div`,{className:`absolute inset-y-0 left-0 w-0.5 -translate-x-1/2 bg-base-inverse shadow-card-outline`}),t[82]=X):X=t[82];let we=v?`px-1 py-3`:`px-0.5 py-2.5`,Z;t[83]===we?Z=t[84]:(Z=a(`absolute top-1/2 left-0 flex -translate-x-1/2 -translate-y-1/2 rounded-full bg-base-inverse shadow-depth-sm transition-[padding] duration-150`,we),t[83]=we,t[84]=Z);let Te,Ee;t[85]===Symbol.for(`react.memo_cache_sentinel`)?(Te=/* @__PURE__ */ (0,d.jsx)(ee,{size:16,color:`icon-strong`}),Ee=/* @__PURE__ */ (0,d.jsx)(n,{size:16,color:`icon-strong`}),t[85]=Te,t[86]=Ee):(Te=t[85],Ee=t[86]);let Q;t[87]===Z?Q=t[88]:(Q=/* @__PURE__ */ (0,d.jsxs)(`div`,{className:Z,"data-slot":`image-compare-knob`,children:[Te,Ee]}),t[87]=Z,t[88]=Q);let $;t[89]!==Y||t[90]!==Q?($=/* @__PURE__ */ (0,d.jsxs)(`div`,{"aria-hidden":!0,className:`pointer-events-none absolute inset-y-0 w-0`,style:Y,"data-slot":`image-compare-handle`,children:[X,Q]}),t[89]=Y,t[90]=Q,t[91]=$):$=t[91];let De;return t[92]!==S||t[93]!==C||t[94]!==w||t[95]!==T||t[96]!==de||t[97]!==E||t[98]!==D||t[99]!==O||t[100]!==_e||t[101]!==P||t[102]!==ye||t[103]!==be||t[104]!==F||t[105]!==R||t[106]!==z||t[107]!==J||t[108]!==$||t[109]!==k||t[110]!==A||t[111]!==j||t[112]!==M||t[113]!==N?(De=/* @__PURE__ */ (0,d.jsxs)(`div`,{ref:k,role:A,tabIndex:j,"aria-label":M,"aria-valuemin":N,"aria-valuemax":E,"aria-valuenow":D,"aria-valuetext":O,"aria-disabled":_e,onPointerDown:C,onPointerMove:w,onPointerUp:T,onPointerCancel:T,onKeyDown:S,className:P,"data-slot":`image-compare`,"data-dragging":ye,"data-pending":be,"qa-test-id":de,children:[F,R,z,J,$]}),t[92]=S,t[93]=C,t[94]=w,t[95]=T,t[96]=de,t[97]=E,t[98]=D,t[99]=O,t[100]=_e,t[101]=P,t[102]=ye,t[103]=be,t[104]=F,t[105]=R,t[106]=z,t[107]=J,t[108]=$,t[109]=k,t[110]=A,t[111]=j,t[112]=M,t[113]=N,t[114]=De):De=t[114],De}export{p as t};