@dcl/shop 1.13.1-35227702430.commit-7f36a79 → 1.13.1-35585926635.commit-02c8d2e

package/_assets/CreditPackPicker-COb2KClL.js

@@ -0,0 +1,564 @@
+import{j as i}from"./react-ZT2P9-hV.js";import{a,s as e,z as l,ap as u,I as b,t as g,F as d}from"./index-y9tZLe7Z.js";(function(){try{var o=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},r=new o.Error().stack;r&&(o._sentryDebugIds=o._sentryDebugIds||{},o._sentryDebugIds[r]="16890aa6-0377-4179-82c5-98ae1169a7bd",o._sentryDebugIdIdentifier="sentry-dbid-16890aa6-0377-4179-82c5-98ae1169a7bd")}catch{}})();function I(o){return i.jsx("svg",{viewBox:"0 0 20 20",width:"24",height:"24","aria-hidden":!0,...o,children:i.jsx("path",{fill:"#f48221",d:"M10 0a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm0-8a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6a1 1 0 0 1 1-1Z"})})}const w="data:image/webp;base64,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",{colors:t,gradients:h,radius:x,z:v}=a,X=e.div`
+  position: fixed;
+  inset: 0;
+  z-index: ${v.overlay};
+  display: flex;
+  overflow-y: auto;
+  padding: 20px;
+`,q=e.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(22, 21, 24, 0.45);
+`,N=e.div`
+  position: relative;
+  z-index: 1;
+  margin: auto;
+  width: 100%;
+  /* Wide enough to fit all 4 credit bundles comfortably in a single row (the credits-server returns 4;
+     the Figma mock showed 3 at ~180px). The pack tiles flex to share this width. */
+  max-width: 700px;
+  /* Flex-item auto-minimum can otherwise push the card past the viewport on a narrow screen. */
+  min-width: 0;
+  /* Never taller than the viewport (100% of the padded overlay): the no-funds state stacks a warning, a
+     line list, 4 pack tiles, the total AND the Cancel/Buy pair, which overflows a laptop screen at 100%
+     zoom and used to take the CTAs off-screen with it. The body absorbs the difference, and the clip is
+     the backstop — a phase that forgets to make itself shrinkable is then visibly cut off at the card's
+     edge instead of painting its buttons out on the scrim. */
+  max-height: 100%;
+  overflow: hidden;
+  background: ${t.white};
+  border-radius: 16px;
+  padding: 12px 16px 16px;
+  box-shadow: 0 24px 60px rgba(22, 21, 24, 0.28);
+  animation: cart-pop-in 0.16s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  &[data-tall] {
+    min-height: 379px;
+    justify-content: space-between;
+  }
+`,H=e.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid ${t.gray4};
+`,O=e.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+`,$=e.h2`
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.6;
+  color: ${t.text};
+`,D=e.button`
+  flex-shrink: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  padding: 2px;
+  line-height: 0;
+`,L=e.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`,S=e.span`
+  font-size: 14px;
+  font-weight: 600;
+  color: ${t.muted1};
+`,J=e(l)`
+  width: 14px;
+  height: 14px;
+  background: ${t.text};
+`,Z=e.span`
+  font-size: 14px;
+  color: ${t.text};
+`,U=e.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  /* Shrink inside a viewport-capped card instead of overflowing it. Anything with its own flexible
+     region (e.g. the cart's line list) gives up height first; this scroll is the last resort so the
+     CTAs are always reachable on a short screen. */
+  min-height: 0;
+  overflow-y: auto;
+
+  /* Processing / loading states centre a single element in a taller body. */
+  &[data-processing] {
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    gap: 32px;
+    padding: 24px 0;
+  }
+`,Y=e.div`
+  display: flex;
+  gap: 24px;
+  align-items: center;
+
+  ${a.media.maxWidth("mobile")} {
+    gap: 12px;
+  }
+`,Q=e.div`
+  flex-shrink: 0;
+  width: 110px;
+  height: 110px;
+  background: ${t.media};
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+
+  & img {
+    width: 83%;
+    height: 83%;
+    object-fit: contain;
+    filter: drop-shadow(0.7px 2.9px 3.7px rgba(0, 0, 0, 0.1));
+  }
+
+  ${a.media.maxWidth("mobile")} {
+    width: 78px;
+    height: 78px;
+    border-radius: 7px;
+  }
+`,G=e.div`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+`,K=e.div`
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: ${t.text};
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  ${a.media.maxWidth("mobile")} {
+    font-size: 16px;
+  }
+`,R=e(u)`
+  font-size: 12px;
+  line-height: 1.43;
+  color: ${t.muted};
+
+  ${a.media.maxWidth("mobile")} {
+    font-size: 10px;
+  }
+`,_=e.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+
+  & span {
+    font-size: 18px;
+    font-weight: 700;
+    color: ${t.text2};
+  }
+
+  ${a.media.maxWidth("mobile")} {
+    & span {
+      font-size: 20px;
+    }
+  }
+`,ee=e(l)`
+  width: 18px;
+  height: 18px;
+  background: ${t.text2};
+`,te=e.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  background: rgba(255, 162, 90, 0.3);
+  border-radius: ${x.btn};
+  padding: 16px;
+
+  & > svg {
+    flex-shrink: 0;
+  }
+
+  ${a.media.maxWidth("mobile")} {
+    align-items: center;
+    gap: 8px;
+    padding: 12px 8px;
+  }
+`,ie=e.p`
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.334;
+  color: ${t.text2};
+
+  & b {
+    font-weight: 700;
+  }
+`,ae=e.a`
+  display: inline-block;
+  margin-top: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.334;
+  color: ${t.text2};
+  text-decoration: underline;
+
+  &:hover {
+    color: ${t.accent};
+  }
+`,f=e.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin: -6px 0;
+  padding: 6px;
+
+  /* Phones get a fixed 2x2 (Figma mobile frame). Wrapping decided the row break from each tile's own
+     content width, so a pack whose amount and price were wide enough — "260 ($29.99)" — stopped
+     sharing a line and claimed a full row: the four landed 2/1/1, three rows tall. That extra row is
+     also what pushed the total under the sticky CTAs. The tracks are minmax(0, 1fr), not 1fr, so a
+     long price shrinks the text inside the tile instead of widening the column past the card. */
+  ${a.media.maxWidth("mobile")} {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px 12px;
+  }
+`,y=e.button`
+  /* Wide enough to stay readable, so a narrow card wraps the tiles onto a second row instead of
+     squeezing four of them into one. */
+  flex: 1 1 140px;
+  height: 109px;
+  border: 1px solid ${t.muted2};
+  background: ${t.media};
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  padding: 3px;
+  transition:
+    transform 0.12s ease,
+    border-color 0.12s ease,
+    border-width 0.12s ease,
+    padding 0.12s ease;
+
+  /* The buy gradient AS the border: the flat fill is clipped to the padding box and the gradient to the
+     border box, which paints a gradient ring on the tile's own radius with no wrapper element (a
+     gradient is not a valid border-color). */
+  &:hover:not(:disabled),
+  &[data-on] {
+    padding: 0;
+    border-color: transparent;
+    border-width: 4px;
+    background-image: linear-gradient(${t.media}, ${t.media}), ${h.buyBtn};
+    background-origin: border-box;
+    background-clip: padding-box, border-box;
+  }
+
+  /* Selected also lifts; hover alone is just the ring. */
+  &[data-on] {
+    transform: scale(1.03);
+  }
+
+  ${a.media.maxWidth("mobile")} {
+    height: 83px;
+    gap: 6px;
+    /* A grid item defaults to min-width:auto, which would let the widest price push the tile out of
+       its track and back past the card edge — the shrinking the 1fr tracks above are there to allow. */
+    min-width: 0;
+
+    /* The grid gives every tile an identical box, so the lift only makes the selected one overlap its
+       gap and read as a size the design never gives it. The ring already says which is picked. */
+    &[data-on] {
+      transform: none;
+    }
+  }
+`,k=e.img`
+  width: 24px;
+  height: 26px;
+  flex: none;
+`,T=e.span`
+  font-size: 24px;
+  font-weight: 500;
+  color: ${t.text};
+`,A=e.span`
+  font-size: 14px;
+  color: ${t.text};
+`,P=e.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid ${t.gray4};
+  padding-top: 12px;
+`,j=e.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 24px;
+  font-weight: 700;
+  color: ${t.text};
+`,z=e(l)`
+  width: 30px;
+  height: 30px;
+  background: ${t.text};
+`,C=e.span`
+  font-size: 14px;
+  font-weight: 600;
+  color: ${t.muted1};
+`,ne=e.div`
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  gap: 12px;
+  margin-top: -8px;
+  padding-top: 8px;
+  background: ${t.white};
+
+  /*
+   * data-stack — one CTA per row on a phone.
+   *
+   * OPT-IN rather than applied to every state, because it is only worth it where BOTH labels are long: on
+   * a 390px screen the purchase-complete pair wraps to "TRY IN / WORLD" beside "MY ITEMS", while the error
+   * states' CANCEL / TRY AGAIN still read fine side by side.
+   *
+   * column-REVERSE, so the primary sits on top without reordering the markup — which would move it off the
+   * right-hand side on desktop, where the secondary-then-primary reading order is what every other row in
+   * the flow uses.
+   */
+  ${a.media.maxWidth("mobile")} {
+    &[data-stack] {
+      flex-direction: column-reverse;
+
+      /*
+       * The row sizes its CTAs with flex: 1. In a column that basis applies to the HEIGHT, so it would
+       * override the 46px and collapse both buttons to their min-content. Hand the sizing back over.
+       */
+      > * {
+        flex: none;
+        width: 100%;
+      }
+    }
+  }
+`,B=e.button`
+  flex: 1;
+  /* Let the CTAs shrink so their min-content can't widen the modal past the viewport on mobile. */
+  min-width: 0;
+  height: 46px;
+  border-radius: ${x.card};
+  border: 0;
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: 0.46px;
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  &[data-full] {
+    width: 100%;
+  }
+  /* The design system's primary fill (Figma 738:53266 "BUY Button") — the same gradient the cart's
+     CHECKOUT carries, so the two ends of the buy flow match. */
+  &[data-variant='gradient'] {
+    background: ${h.buyBtn};
+    color: ${t.softWhite};
+  }
+  &[data-variant='gradient']:hover:not(:disabled),
+  &[data-variant='gradient']:active:not(:disabled) {
+    background-image: linear-gradient(${t.dclRed}, ${t.dclRed});
+  }
+  &[data-variant='outline'] {
+    background: transparent;
+    border: 0.5px solid ${t.text};
+    color: ${t.text2};
+    font-size: 13px;
+  }
+  /* Figma's outlined hover (738:53251), which on this light card is the readable half of the pair: the
+     white-fill hover the dark-field buttons take would be invisible here. Same treatment as the
+     drawer's dismissing CTA (CartPopover ctaCss) — the two sit in one flow. */
+  &[data-variant='outline']:hover:not(:disabled) {
+    background: ${t.text2};
+    color: ${t.softWhite};
+  }
+  &[data-variant='ruby'] {
+    background: ${t.dclRed};
+    color: ${t.softWhite};
+    font-size: 13px;
+    letter-spacing: 0.61px;
+  }
+  // Solid accent fill (the error state's "Try again").
+  &[data-variant='purple'] {
+    background: ${t.accent};
+    color: ${t.softWhite};
+    font-size: 13px;
+  }
+  /**
+   * Hover, and ONLY where hovering is a thing.
+   *
+   * Two bugs lived in one selector here. It used to read &:hover, &[data-variant='purple']:hover — the
+   * first half unqualified, so the PURPLE hover fill was painted over every variant that had no hover of
+   * its own. Ruby was the only one, so the post-purchase CTA turned violet the moment it was hovered:
+   * measured rgb(255,45,85) at rest and rgb(122,43,191) hovered.
+   *
+   * And on a phone that is not a hover at all. A tap synthesises :hover and LEAVES it there, so the CTA
+   * that lands under the finger after the buy confirms comes up already violet — which is how this was
+   * reported. Gating on hover: hover is the same fix, for the same reason, that the creators rail uses
+   * on its card lift.
+   */
+  @media (hover: hover) {
+    &[data-variant='purple']:hover:not(:disabled) {
+      background: ${t.accentHover};
+    }
+    &[data-variant='ruby']:hover:not(:disabled) {
+      filter: brightness(1.08);
+    }
+  }
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+`,oe=B.withComponent("a"),re=e.img`
+  width: 61px;
+  height: 61px;
+`,se=e.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  background: rgba(255, 201, 213, 0.5);
+  border-radius: 16px;
+  padding: 24px 16px;
+`,de=e.img`
+  width: 64px;
+  height: 80px;
+  object-fit: contain;
+`,le=e.p`
+  margin: 0;
+  text-align: center;
+  font-size: 20px;
+  line-height: 1.334;
+  font-weight: 400;
+  color: ${t.text2};
+
+  & b {
+    font-weight: 700;
+  }
+`,he=e.div`
+  font-size: 20px;
+  font-weight: 700;
+  color: ${t.text2};
+  text-align: center;
+`,pe=e.div`
+  width: 100%;
+  max-width: 456px;
+  height: 12px;
+  background: ${t.media};
+  border-radius: 100px;
+  overflow: hidden;
+`,ce=e.span`
+  display: block;
+  height: 100%;
+  width: 40%;
+  border-radius: 100px;
+  background: ${h.amethyst};
+  animation: buy-modal-progress 1.1s ease-in-out infinite;
+
+  @keyframes buy-modal-progress {
+    0% {
+      transform: translateX(-120%);
+    }
+    100% {
+      transform: translateX(320%);
+    }
+  }
+
+  &[data-step] {
+    animation: none;
+    min-width: 12px;
+    transition: width 0.35s ease;
+  }
+`,ge=e.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  background: rgba(193, 238, 207, 0.5);
+  border-radius: 16px;
+  padding: 24px 16px;
+
+  &[data-wide] {
+    flex-direction: row;
+    align-items: center;
+    gap: 24px;
+    padding: 16px 24px;
+  }
+  @media (max-width: 600px) {
+    &[data-wide] {
+      flex-direction: column;
+      gap: 12px;
+      padding: 16px;
+    }
+  }
+`,xe=e.p`
+  margin: 0;
+  font-size: 20px;
+  line-height: 1.334;
+  color: ${t.text2};
+  text-align: center;
+
+  & b {
+    font-weight: 700;
+  }
+
+  &[data-wide] {
+    text-align: left;
+    font-size: 18px;
+  }
+  @media (max-width: 600px) {
+    &[data-wide] {
+      text-align: center;
+    }
+  }
+`,V=e(y)`
+  position: relative;
+`,F=e.span`
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px 4px 8px;
+  border-radius: ${a.radius.pill};
+  background: ${a.gradients.flare};
+  font-family: ${a.font.sans};
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+  color: ${a.colors.white};
+  white-space: nowrap;
+
+  .ico {
+    width: 16px;
+    height: 16px;
+  }
+`,W=e(f)`
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 28px 12px;
+
+  ${a.media.maxWidth("mobile")} {
+    gap: 24px 12px;
+  }
+`;function fe({packs:o,selectedId:r,onSelect:p,recommendedId:c}){const s=o.find(n=>n.id===r),m=c?W:f;return i.jsxs(i.Fragment,{children:[i.jsx(m,{"data-testid":"credit-packs",children:o.map(n=>i.jsxs(V,{type:"button","data-testid":"credit-pack","data-on":n.id===r||void 0,"aria-pressed":n.id===r,"aria-label":g("getCredits.packAria",{amount:d(n.credits),usd:n.usd}),onClick:()=>p(n.id),children:[n.id===c?i.jsxs(F,{"data-testid":"pack-recommended","aria-hidden":!0,children:[i.jsx(b,{name:"star-rounded"}),g("getCredits.packBadge")]}):null,i.jsx(k,{src:w,alt:""}),i.jsx(T,{children:d(n.credits)}),i.jsxs(A,{children:["($",n.usd.toFixed(2),")"]})]},n.id))}),i.jsxs(P,{children:[i.jsxs(j,{children:[i.jsx(z,{}),i.jsx("span",{"data-testid":"topup-total-credits",children:d((s==null?void 0:s.credits)??0)})]}),i.jsxs(C,{children:["$",((s==null?void 0:s.usd)??0).toFixed(2)]})]})]})}export{Y as A,L as B,N as C,oe as D,H,re as L,X as M,he as P,q as S,$ as T,te as W,D as X,O as a,S as b,J as c,Z as d,U as e,se as f,de as g,le as h,ne as i,B as j,pe as k,ce as l,I as m,ie as n,ae as o,Q as p,G as q,K as r,R as s,_ as t,ee as u,fe as v,f as w,y as x,ge as y,xe as z};
+//# sourceMappingURL=CreditPackPicker-COb2KClL.js.map

package/_assets/{DeploymentBuilder-CVNQmpLh.js → DeploymentBuilder-Dg-EXfAY.js}

@@ -1,4 +1,4 @@
-import{g as I}from"./react-DhG5dcPN.js";import{r as H}from"./index-RelB0M4N.js";import{r as M}from"./dcl-schemas-B-U9a1k0.js";(function(){try{var o=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},f=new o.Error().stack;f&&(o._sentryDebugIds=o._sentryDebugIds||{},o._sentryDebugIds[f]="856676eb-61d8-48d8-aa1d-b8b18aeac8ee",o._sentryDebugIdIdentifier="sentry-dbid-856676eb-61d8-48d8-aa1d-b8b18aeac8ee")}catch{}})();function O(o,f){for(var w=0;w<f.length;w++){const h=f[w];if(typeof h!="string"&&!Array.isArray(h)){for(const b in h)if(b!=="default"&&!(b in o)){const g=Object.getOwnPropertyDescriptor(h,b);g&&Object.defineProperty(o,b,g.get?g:{enumerable:!0,get:()=>h[b]})}}}return Object.freeze(Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}))}var c={},F;function C(){if(F)return c;F=1,Object.defineProperty(c,"__esModule",{value:!0}),c.getHashesByKey=c.buildEntityWithoutNewFiles=c.buildEntity=c.buildEntityAndFile=void 0;const o=H(),f=M();async function w({type:n,pointers:t,timestamp:e,content:a,metadata:r}){var i;if(t.length===0)throw new Error("All entities must have at least one pointer.");const d={version:"v3",type:n,pointers:t,timestamp:e,content:a,metadata:r};if(a){const s=new Set;for(const p of a){const E=p.file.toLowerCase();if(s.has(E))throw new Error(`Error creating the deployable entity: Decentraland's file system is case insensitive, the file ${JSON.stringify(p.file)} is repeated`);s.add(E)}}const y=new TextEncoder().encode(JSON.stringify(d)),l={id:await(0,o.hashV1)(y),...d};if(!f.Entity.validate(l))throw new Error(`Generated entity is not valid:
+import{g as I}from"./react-ZT2P9-hV.js";import{r as H}from"./index-CEVRFChv.js";import{r as M}from"./dcl-schemas-Do6ePE9M.js";(function(){try{var o=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},f=new o.Error().stack;f&&(o._sentryDebugIds=o._sentryDebugIds||{},o._sentryDebugIds[f]="95840eba-4c70-4c16-b7ed-3eed2bbebe7c",o._sentryDebugIdIdentifier="sentry-dbid-95840eba-4c70-4c16-b7ed-3eed2bbebe7c")}catch{}})();function O(o,f){for(var b=0;b<f.length;b++){const h=f[b];if(typeof h!="string"&&!Array.isArray(h)){for(const w in h)if(w!=="default"&&!(w in o)){const g=Object.getOwnPropertyDescriptor(h,w);g&&Object.defineProperty(o,w,g.get?g:{enumerable:!0,get:()=>h[w]})}}}return Object.freeze(Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}))}var y={},F;function C(){if(F)return y;F=1,Object.defineProperty(y,"__esModule",{value:!0}),y.getHashesByKey=y.buildEntityWithoutNewFiles=y.buildEntity=y.buildEntityAndFile=void 0;const o=H(),f=M();async function b({type:n,pointers:t,timestamp:e,content:a,metadata:r}){var i;if(t.length===0)throw new Error("All entities must have at least one pointer.");const d={version:"v3",type:n,pointers:t,timestamp:e,content:a,metadata:r};if(a){const s=new Set;for(const p of a){const E=p.file.toLowerCase();if(s.has(E))throw new Error(`Error creating the deployable entity: Decentraland's file system is case insensitive, the file ${JSON.stringify(p.file)} is repeated`);s.add(E)}}const c=new TextEncoder().encode(JSON.stringify(d)),l={id:await(0,o.hashV1)(c),...d};if(!f.Entity.validate(l))throw new Error(`Generated entity is not valid:
 `+((i=f.Entity.validate.errors)===null||i===void 0?void 0:i.map(s=>s.message).join(`
-`)));return{entity:l,entityFile:y}}c.buildEntityAndFile=w;async function h({type:n,pointers:t,files:e,metadata:a,timestamp:r}){const i=Array.from(e||[]).map(([l,s])=>({key:l,content:s})),d=await Promise.all(i.map(async({key:l,content:s})=>({key:l,content:s,hash:await(0,o.hashV1)(s)}))),y=new Map(d.map(({hash:l,key:s})=>[s,l])),u=new Map(d.map(({hash:l,content:s})=>[l,s]));return g(n,t,{hashesByKey:y,filesByHash:u,metadata:a,timestamp:r})}c.buildEntity=h;async function b(n,{contentUrl:t,type:e,pointers:a,hashesByKey:r,metadata:i,timestamp:d}){const y=r??i?m(i):void 0;if(y&&D(e,y)){const u=await _(n,t,y),l=await A(u,i);return h({type:e,pointers:a,files:u,metadata:l,timestamp:d})}return g(e,a,{hashesByKey:r,metadata:i,timestamp:d})}c.buildEntityWithoutNewFiles=b;async function g(n,t,e){if(t.length===0)throw new Error("All entities must have at least one pointer.");const a=e!=null&&e.hashesByKey?e==null?void 0:e.hashesByKey:new Map,r=Array.from(a.entries()).map(([l,s])=>({file:l,hash:s})),i=e!=null&&e.timestamp?e==null?void 0:e.timestamp:Date.now(),{entity:d,entityFile:y}=await w({type:n,pointers:t,timestamp:i,content:r,metadata:e==null?void 0:e.metadata}),u=e!=null&&e.filesByHash?e.filesByHash:new Map;return u.set(d.id,y),{files:u,entityId:d.id}}function D(n,t){return n===f.EntityType.PROFILE&&Array.from(t).some(([,e])=>e.toLowerCase().startsWith("qm"))}async function v(n,t){const a=await(await n.fetch(t)).arrayBuffer();return new Uint8Array(a)}async function _(n,t,e){const a=e.get("body.png"),r=e.get("face256.png"),i=new URL(`${t}/contents/${a}`).toString(),d=new URL(`${t}/contents/${r}`).toString(),[y,u]=await Promise.all([v(n,i),v(n,d)]);return new Map([["body.png",y],["face256.png",u]])}async function A(n,t){return t&&(t.avatars=await Promise.all(t.avatars.map(async e=>{const a={face256:"",body:""},r=n.get("face256.png");r&&(a.face256=await(0,o.hashV1)(r));const i=n.get("body.png");return i&&(a.body=await(0,o.hashV1)(i)),e.avatar.snapshots=a,e})),t)}function m(n){const t=n.avatars[0];if(t.avatar.snapshots)return new Map([["body.png",t.avatar.snapshots.body],["face256.png",t.avatar.snapshots.face256]])}return c.getHashesByKey=m,c}var B=C();const P=I(B),j=O({__proto__:null,default:P},[B]);export{j as D};
-//# sourceMappingURL=DeploymentBuilder-CVNQmpLh.js.map
+`)));return{entity:l,entityFile:c}}y.buildEntityAndFile=b;async function h({type:n,pointers:t,files:e,metadata:a,timestamp:r}){const i=Array.from(e||[]).map(([l,s])=>({key:l,content:s})),d=await Promise.all(i.map(async({key:l,content:s})=>({key:l,content:s,hash:await(0,o.hashV1)(s)}))),c=new Map(d.map(({hash:l,key:s})=>[s,l])),u=new Map(d.map(({hash:l,content:s})=>[l,s]));return g(n,t,{hashesByKey:c,filesByHash:u,metadata:a,timestamp:r})}y.buildEntity=h;async function w(n,{contentUrl:t,type:e,pointers:a,hashesByKey:r,metadata:i,timestamp:d}){const c=r??i?m(i):void 0;if(c&&D(e,c)){const u=await _(n,t,c),l=await A(u,i);return h({type:e,pointers:a,files:u,metadata:l,timestamp:d})}return g(e,a,{hashesByKey:r,metadata:i,timestamp:d})}y.buildEntityWithoutNewFiles=w;async function g(n,t,e){if(t.length===0)throw new Error("All entities must have at least one pointer.");const a=e!=null&&e.hashesByKey?e==null?void 0:e.hashesByKey:new Map,r=Array.from(a.entries()).map(([l,s])=>({file:l,hash:s})),i=e!=null&&e.timestamp?e==null?void 0:e.timestamp:Date.now(),{entity:d,entityFile:c}=await b({type:n,pointers:t,timestamp:i,content:r,metadata:e==null?void 0:e.metadata}),u=e!=null&&e.filesByHash?e.filesByHash:new Map;return u.set(d.id,c),{files:u,entityId:d.id}}function D(n,t){return n===f.EntityType.PROFILE&&Array.from(t).some(([,e])=>e.toLowerCase().startsWith("qm"))}async function v(n,t){const a=await(await n.fetch(t)).arrayBuffer();return new Uint8Array(a)}async function _(n,t,e){const a=e.get("body.png"),r=e.get("face256.png"),i=new URL(`${t}/contents/${a}`).toString(),d=new URL(`${t}/contents/${r}`).toString(),[c,u]=await Promise.all([v(n,i),v(n,d)]);return new Map([["body.png",c],["face256.png",u]])}async function A(n,t){return t&&(t.avatars=await Promise.all(t.avatars.map(async e=>{const a={face256:"",body:""},r=n.get("face256.png");r&&(a.face256=await(0,o.hashV1)(r));const i=n.get("body.png");return i&&(a.body=await(0,o.hashV1)(i)),e.avatar.snapshots=a,e})),t)}function m(n){const t=n.avatars[0];if(t.avatar.snapshots)return new Map([["body.png",t.avatar.snapshots.body],["face256.png",t.avatar.snapshots.face256]])}return y.getHashesByKey=m,y}var B=C();const P=I(B),j=O({__proto__:null,default:P},[B]);export{j as D};
+//# sourceMappingURL=DeploymentBuilder-Dg-EXfAY.js.map

package/_assets/{EmotePlaybackBar-B0eDc_Xz.js → EmotePlaybackBar-DyYs6qdM.js}

@@ -1,5 +1,5 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["_assets/index-BAXoG69v.js","_assets/react-DhG5dcPN.js","_assets/dcl-schemas-B-U9a1k0.js","_assets/index-KErMJCvL.js","_assets/sentry-C-ZN4hdJ.js","_assets/ethers-DSJYCqoj.js","_assets/intl-AKLEHPeO.js","_assets/index-DPbzKM5D.css","_assets/createSvgIcon-B4YJe4s8.js","_assets/emotion-styled.browser.esm-CvLTks_d.js","_assets/styled-B_VfpbCV.js","_assets/index-DC99FOt3.js","_assets/useTheme-WQQFpB7n.js"])))=>i.map(i=>d[i]);
-import{j as r,r as s}from"./react-DhG5dcPN.js";import{_ as n,a as d,s as p}from"./index-KErMJCvL.js";import{E as u}from"./sentry-C-ZN4hdJ.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},o=new t.Error().stack;o&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[o]="4429b6b0-4be3-45c4-a8b6-000f10e300ab",t._sentryDebugIdIdentifier="sentry-dbid-4429b6b0-4be3-45c4-a8b6-000f10e300ab")}catch{}})();const l=s.lazy(async()=>{const[{EmoteControls:t},{Experimental_CssVarsProvider:o},{light:a}]=await Promise.all([n(()=>import("./index-BAXoG69v.js").then(i=>i.i),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10])),n(()=>import("./index-DC99FOt3.js"),__vite__mapDeps([11,3,1,2,4,5,6,7,12,10])),n(()=>import("./index-KErMJCvL.js").then(i=>i.dX),__vite__mapDeps([3,1,2,4,5,6,7]))]);return{default:i=>r.jsx(o,{theme:a,children:r.jsx(t,{...i})})}});function c(t){return r.jsx(u,{fallback:r.jsx(r.Fragment,{}),children:r.jsx(s.Suspense,{fallback:null,children:r.jsx(l,{...t})})})}const{colors:e,radius:b}=d,x=p.div`
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["_assets/index-C-cdcYSu.js","_assets/react-ZT2P9-hV.js","_assets/dcl-schemas-Do6ePE9M.js","_assets/index-y9tZLe7Z.js","_assets/sentry-qVQnooqM.js","_assets/ethers-DVrorjJ1.js","_assets/intl-AKLEHPeO.js","_assets/index-BhSgZf6d.css","_assets/createSvgIcon-BOJMqAuj.js","_assets/emotion-styled.browser.esm-dqXx08M6.js","_assets/styled-BOKv7XKm.js","_assets/index-BW2_mJUZ.js","_assets/useTheme-J18Pg7gw.js"])))=>i.map(i=>d[i]);
+import{j as r,r as s}from"./react-ZT2P9-hV.js";import{_ as n,a as d,s as p}from"./index-y9tZLe7Z.js";import{E as u}from"./sentry-qVQnooqM.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},o=new t.Error().stack;o&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[o]="48c0f84e-6330-4c8d-9b7d-c4ad1b2a6cf7",t._sentryDebugIdIdentifier="sentry-dbid-48c0f84e-6330-4c8d-9b7d-c4ad1b2a6cf7")}catch{}})();const l=s.lazy(async()=>{const[{EmoteControls:t},{Experimental_CssVarsProvider:o},{light:a}]=await Promise.all([n(()=>import("./index-C-cdcYSu.js").then(i=>i.i),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10])),n(()=>import("./index-BW2_mJUZ.js"),__vite__mapDeps([11,3,1,2,4,5,6,7,12,10])),n(()=>import("./index-y9tZLe7Z.js").then(i=>i.dY),__vite__mapDeps([3,1,2,4,5,6,7]))]);return{default:i=>r.jsx(o,{theme:a,children:r.jsx(t,{...i})})}});function c(t){return r.jsx(u,{fallback:r.jsx(r.Fragment,{}),children:r.jsx(s.Suspense,{fallback:null,children:r.jsx(l,{...t})})})}const{colors:e,radius:x}=d,b=p.div`
   /* Doubled class: a preview panel may size its children greedily (ItemDetail's stretches every child to
      fill the stage), and the bar's own geometry has to win that whichever order the styles land in. */
   && {
@@ -15,7 +15,7 @@ import{j as r,r as s}from"./react-DhG5dcPN.js";import{_ as n,a as d,s as p}from"
     background: rgba(255, 255, 255, 0.94);
     backdrop-filter: blur(6px);
     border: 1px solid ${e.line};
-    border-radius: ${b.pill};
+    border-radius: ${x.pill};
     padding: 6px 12px;
     box-shadow: 0 2px 10px rgba(22, 21, 24, 0.12);
   }
@@ -117,5 +117,5 @@ import{j as r,r as s}from"./react-DhG5dcPN.js";import{_ as n,a as d,s as p}from"
     outline: 2px solid ${e.accent};
     outline-offset: 2px;
   }
-`;function f({previewId:t,testId:o="emote-controls"}){return r.jsx(x,{"data-preview-controls":!0,"data-testid":o,children:r.jsx(c,{wearablePreviewId:t,hideFrameInput:!0})})}export{f as E};
-//# sourceMappingURL=EmotePlaybackBar-B0eDc_Xz.js.map
+`;function f({previewId:t,testId:o="emote-controls"}){return r.jsx(b,{"data-preview-controls":!0,"data-testid":o,children:r.jsx(c,{wearablePreviewId:t,hideFrameInput:!0})})}export{f as E};
+//# sourceMappingURL=EmotePlaybackBar-DyYs6qdM.js.map

package/_assets/{ErrorNotice-aYlVfBxT.js → ErrorNotice-Cm0KaFyV.js}

@@ -1,2 +1,2 @@
-import{j as n}from"./react-DhG5dcPN.js";import{I as o}from"./index-KErMJCvL.js";(function(){try{var e=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},r=new e.Error().stack;r&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[r]="c67eed24-9c07-42e3-aafe-ecbed75d6f90",e._sentryDebugIdIdentifier="sentry-dbid-c67eed24-9c07-42e3-aafe-ecbed75d6f90")}catch{}})();function i({message:e,className:r,testId:t}){return e?n.jsxs("p",{className:r?`error-notice ${r}`:"error-notice","data-testid":t,role:"alert",children:[n.jsx(o,{name:"alert",className:"error-notice__ico",size:18}),n.jsx("span",{className:"error-notice__msg",children:e})]}):null}export{i as E};
-//# sourceMappingURL=ErrorNotice-aYlVfBxT.js.map
+import{j as n}from"./react-ZT2P9-hV.js";import{I as o}from"./index-y9tZLe7Z.js";(function(){try{var e=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},r=new e.Error().stack;r&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[r]="c67eed24-9c07-42e3-aafe-ecbed75d6f90",e._sentryDebugIdIdentifier="sentry-dbid-c67eed24-9c07-42e3-aafe-ecbed75d6f90")}catch{}})();function i({message:e,className:r,testId:t}){return e?n.jsxs("p",{className:r?`error-notice ${r}`:"error-notice","data-testid":t,role:"alert",children:[n.jsx(o,{name:"alert",className:"error-notice__ico",size:18}),n.jsx("span",{className:"error-notice__msg",children:e})]}):null}export{i as E};
+//# sourceMappingURL=ErrorNotice-Cm0KaFyV.js.map