@dcl/shop 1.6.4-31393274893.commit-fe5b3e4 → 1.6.4-31478985898.commit-31fbca5

package/_assets/Assets.styles-DyGkSQg3.js

@@ -1,652 +0,0 @@
-import{r as b,j as o}from"./react-DjYfJ2MV.js";import{C as oe,R as B,a as je,b as We}from"./categories-Df30N9ir.js";import{n as c,T as Re}from"./Tooltip-CnaT1qo6.js";import{s as t,t as e,I as T,b as a,ac as K,C as U}from"./index-DmWruJR2.js";(function(){try{var i=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},s=new i.Error().stack;s&&(i._sentryDebugIds=i._sentryDebugIds||{},i._sentryDebugIds[s]="30976e60-b8da-4c2f-a915-2976b9fd68b1",i._sentryDebugIdIdentifier="sentry-dbid-30976e60-b8da-4c2f-a915-2976b9fd68b1")}catch{}})();const f=1e5,y=900,g=90,R=g*2,ie=y/g,ne=f-y,Y=100;function G(i){const s=Math.max(0,Math.min(Math.round(i),R));if(s<=g)return s*ie;const p=y+(s-g)/g*ne;return Math.round(p/Y)*Y}function M(i){const s=Math.max(0,Math.min(i,f));return s<=y?Math.round(s/ie):g+Math.round((s-y)/ne*g)}function q(i){return M(i)/R*100}const Te=t.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-`,j=t.div`
-  height: 1px;
-  background: rgba(255, 255, 255, 0.25);
-  width: 100%;
-`,Ce=t.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`,ze=t("button",c("desktopStatic"))`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  height: 40px;
-  padding: 4px;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: ${e.colors.softWhite};
-  text-align: left;
-  cursor: pointer;
-
-  ${e.media.maxWidth("lg")} {
-    height: 52px;
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      background: rgba(255, 255, 255, 0.08);
-    }
-  }
-  &:focus-visible {
-    outline: 2px solid ${e.colors.accent};
-    outline-offset: 2px;
-  }
-
-  ${({desktopStatic:i})=>i?`${e.media.minWidth("lg")} {
-          cursor: default;
-          &:hover { background: transparent; }
-        }`:""}
-`,Pe=t.span`
-  font-family: ${e.font.sans};
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 1.43;
-  color: ${e.colors.softWhite};
-
-  ${e.media.maxWidth("lg")} {
-    font-size: 16px;
-  }
-`,Ee=t.span`
-  display: inline-flex;
-  ${e.media.minWidth("lg")} {
-    display: none;
-  }
-`,Ie=t("p",c("desktopHidden"))`
-  margin: 0;
-  padding: 0 4px 4px;
-  font-family: ${e.font.sans};
-  font-weight: 400;
-  font-size: 12px;
-  line-height: normal;
-  color: ${e.colors.gray4};
-  text-transform: capitalize;
-
-  ${({desktopHidden:i})=>i?`${e.media.minWidth("lg")} { display: none; }`:""}
-`,Me=t("div",c("open","desktopStatic"))`
-  display: grid;
-  grid-template-rows: ${({open:i})=>i?"1fr":"0fr"};
-  transition: grid-template-rows 0.22s ease;
-
-  ${({desktopStatic:i})=>i?`${e.media.minWidth("lg")} { grid-template-rows: 1fr; }`:""}
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-`,Ne=t.div`
-  overflow: hidden;
-  min-height: 0;
-`,_e=t.div`
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  gap: 6px;
-  padding: 8px 4px 0;
-`,V=t.label`
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  flex-direction: column;
-  gap: 4px;
-`,X=t.span`
-  font-family: ${e.font.sans};
-  font-weight: 400;
-  font-size: 12px;
-  color: ${e.colors.gray4};
-`,J=t.span`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  height: 42px;
-  padding: 8px;
-  border: 0.5px solid ${e.colors.softWhite};
-  border-radius: 8px;
-  background: rgba(0, 0, 0, 0.1);
-
-  &:focus-within {
-    border-color: ${e.rarities.epic};
-  }
-`,Q=t.input`
-  width: 100%;
-  min-width: 0;
-  border: 0;
-  background: none;
-  padding: 0;
-  font-family: ${e.font.sans};
-  font-size: 13px;
-  color: ${e.colors.softWhite};
-
-  &:focus {
-    outline: 0;
-  }
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-`,De=t.span`
-  padding-bottom: 12px;
-  color: ${e.colors.softWhite};
-  font-family: ${e.font.sans};
-  font-size: 13px;
-`,Fe=t.div`
-  position: relative;
-  height: 20px;
-  margin: 24px 4px 0;
-`,Le=t.div`
-  position: absolute;
-  top: 50%;
-  left: 0;
-  right: 0;
-  height: 2px;
-  transform: translateY(-50%);
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: 2px;
-`,Ae=t("div",c("minPct","maxPct"))`
-  position: absolute;
-  top: 50%;
-  height: 2px;
-  transform: translateY(-50%);
-  left: ${({minPct:i})=>`${i}%`};
-  right: ${({maxPct:i})=>`${100-i}%`};
-  background: ${e.colors.rarity};
-  border-radius: 2px;
-`,Z=t.input`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 20px;
-  margin: 0;
-  -webkit-appearance: none;
-  appearance: none;
-  background: none;
-  pointer-events: none;
-
-  /* The two inputs are stacked, so where the thumbs overlap only the one on top can be grabbed — and by
-     DOM order that is always Max. Once they meet, dragging left does nothing (Max is clamped against
-     Min) and the pair can only ever be separated rightwards; meeting at the ceiling wedges them for
-     good. Min claims the top half of the track, which is the half where it is the one against a wall. */
-  &[data-on-top] {
-    z-index: 2;
-  }
-
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    pointer-events: auto;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background: ${e.colors.white};
-    border: 2px solid ${e.colors.rarity};
-    box-shadow: 0 1px 3px rgba(22, 21, 24, 0.25);
-    cursor: pointer;
-  }
-  &::-moz-range-thumb {
-    pointer-events: auto;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background: ${e.colors.white};
-    border: 2px solid ${e.colors.rarity};
-    box-shadow: 0 1px 3px rgba(22, 21, 24, 0.25);
-    cursor: pointer;
-  }
-`,He=t.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 4px 0;
-`,ee=t.span`
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  font-family: ${e.font.sans};
-  font-size: 13px;
-  color: ${e.colors.softWhite};
-`,te=t(T)`
-  width: 16px;
-  height: 16px;
-  color: ${e.colors.softWhite};
-`,Oe=t.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  padding: 9px 4px 9px 8px;
-
-  ${e.media.maxWidth("lg")} {
-    gap: 12px 16px;
-  }
-`,Be=t("button",c("selected"))`
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  background: ${({selected:i})=>i?"rgba(0, 0, 0, 0.3)":"transparent"};
-  border: ${({selected:i})=>i?`1px solid ${e.colors.softWhite}`:"0.5px solid rgba(255, 255, 255, 0.3)"};
-  cursor: pointer;
-  transition:
-    background 0.15s ease,
-    border-color 0.15s ease;
-
-  &:hover {
-    border-color: ${e.colors.softWhite};
-  }
-  &:focus-visible {
-    outline: 2px solid ${e.colors.accent};
-    outline-offset: 2px;
-  }
-`,Ke=t("span",c("color"))`
-  position: relative;
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  background: ${({color:i})=>i};
-  flex: none;
-`,Ue=t(T)`
-  position: absolute;
-  inset: 0;
-  width: 16px;
-  height: 16px;
-  color: ${e.colors.white};
-`,Ye=t("span",c("selected"))`
-  font-family: ${e.font.sans};
-  font-weight: ${({selected:i})=>i?600:400};
-  font-size: 12px;
-  line-height: 1.43;
-  /* Gray 5 at rest, soft-white when selected (Figma) — both read on the purple field. */
-  color: ${({selected:i})=>i?e.colors.softWhite:e.colors.media};
-  text-transform: capitalize;
-
-  ${e.media.maxWidth("lg")} {
-    font-size: 14px;
-  }
-`,Ge=t.label`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 40px;
-  padding: 4px 4px 4px 24px;
-  cursor: pointer;
-
-  /* The whole row is the target, so pointing at the label previews the same red the radio takes when
-     it is picked. Selected by tag rather than by interpolating StatusRadio (see CLAUDE.md). */
-  @media (hover: hover) {
-    &:hover input[type='radio'] {
-      border-color: ${e.colors.dclRed};
-    }
-  }
-`,qe=t.input`
-  appearance: none;
-  width: 18px;
-  height: 18px;
-  margin: 0;
-  border: 2px solid ${e.colors.media};
-  border-radius: 50%;
-  background: transparent;
-  cursor: pointer;
-  flex: none;
-  transition:
-    border-color 0.15s ease,
-    background 0.15s ease;
-
-  /* The dot is painted as a background rather than a child element, which a replaced element can't
-     have. The half-pixel feather on the stop keeps its edge from going jagged. */
-  &:checked {
-    border-color: ${e.colors.dclRed};
-    background: radial-gradient(circle at center, ${e.colors.dclRed} 0 4px, transparent 4.5px);
-  }
-  &:focus-visible {
-    outline: 2px solid ${e.colors.dclRed};
-    outline-offset: 2px;
-  }
-`,Ve=t.span`
-  font-family: ${e.font.sans};
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.43;
-  color: ${e.colors.gray4};
-`,Xe=t.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  width: 100%;
-  height: 40px;
-  padding: 4px;
-
-  /* On mobile SMART is a peer of the collapsible section headers (Figma 1304-307965): same 52px row
-     height so it doesn't read as a smaller afterthought. */
-  ${e.media.maxWidth("lg")} {
-    height: 52px;
-  }
-`,Je=t.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-`,Qe=t(T)`
-  width: 14px;
-  height: 14px;
-  color: ${e.colors.softWhite};
-
-  ${e.media.maxWidth("lg")} {
-    width: 16px;
-    height: 16px;
-  }
-`,Ze=t.span`
-  font-family: ${e.font.sans};
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 1.43;
-  color: ${e.colors.softWhite};
-  /* Figma labels SMART in uppercase (the flash-feature label), unlike the title-case section names. */
-  text-transform: uppercase;
-
-  /* Match the section-header title size on mobile so SMART has the same hierarchy as Price/Rarity/etc. */
-  ${e.media.maxWidth("lg")} {
-    font-size: 16px;
-  }
-`,et=t(T)`
-  width: 12px;
-  height: 12px;
-  color: ${e.colors.muted2};
-`,tt=t("button",c("on"))`
-  position: relative;
-  width: 24px;
-  height: 14px;
-  padding: 0;
-  border-radius: 100px;
-  border: 0;
-  background: ${({on:i})=>i?e.colors.dclRed:"rgba(255, 255, 255, 0.1)"};
-  cursor: pointer;
-  flex: none;
-  transition:
-    background 0.15s ease,
-    border-color 0.15s ease;
-
-  &:focus-visible {
-    outline: 2px solid ${e.colors.accent};
-    outline-offset: 2px;
-  }
-
-  /* Bigger, tappable switch on mobile (the 24×14 desktop pill reads as too small on a phone). */
-  ${e.media.maxWidth("lg")} {
-    width: 40px;
-    height: 22px;
-  }
-`,ot=t("span",c("on"))`
-  position: absolute;
-  top: 50%;
-  left: ${({on:i})=>i?"calc(100% - 12px)":"0px"};
-  transform: translateY(-50%);
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  /* White knob in both states (Figma switch knob is soft-white) — only its position animates. */
-  background: ${e.colors.softWhite};
-  box-shadow: 0 1px 2px rgba(22, 21, 24, 0.3);
-  transition: left 0.15s ease;
-
-  ${e.media.maxWidth("lg")} {
-    width: 18px;
-    height: 18px;
-    left: ${({on:i})=>i?"calc(100% - 18px)":"2px"};
-  }
-`;function it(i){var s;for(const p of oe){const h=(s=p.subs)==null?void 0:s.find(r=>r.key===i);if(h)return a(h.labelKey)}return i}function W({title:i,open:s,onToggle:p,summary:h,desktopStatic:r,headerTestId:x,headerAria:w,children:v}){const u=o.jsx(We,{up:s,size:24,color:e.colors.softWhite});return o.jsxs(Ce,{children:[o.jsxs(ze,{type:"button",desktopStatic:r,onClick:p,"aria-expanded":s,"aria-label":w,"data-testid":x,children:[o.jsx(Pe,{children:i}),r?o.jsx(Ee,{children:u}):u]}),!s&&h?o.jsx(Ie,{desktopHidden:r,children:h}):null,o.jsx(Me,{open:s,desktopStatic:r,children:o.jsx(Ne,{children:v})})]})}function lt({category:i,subCategory:s,onCategory:p,onSub:h,priceMin:r,priceMax:x,onPriceMin:w,onPriceMax:v,rarities:u,onToggleRarity:ae,status:C,onStatus:se,smart:$,onSmart:re,hideNames:le=!1,collections:N=!1,onCollections:de}){var O;const[ce,pe]=b.useState(!0),[he,xe]=b.useState(!0),[ge,me]=b.useState(!1),[fe,ue]=b.useState(!0),z=r&&!Number.isNaN(Number(r))?Number(r):void 0,P=x&&!Number.isNaN(Number(x))?Number(x):void 0,[l,E]=b.useState({}),_=z!=null?Math.min(z,f):0,D=P!=null?Math.min(P,f):f,k=l.min??_,S=l.max??D,F=q(k),be=q(S),L=n=>n<=0?"":String(n),A=n=>n>=f?"":String(n);function ye(n){E(d=>{const I=d.max??D;return{...d,min:Math.min(G(n),I)}})}function we(n){E(d=>{const I=d.min??_;return{...d,max:Math.max(G(n),I)}})}function m(){l.min===void 0&&l.max===void 0||(l.min!==void 0&&w(L(l.min)),l.max!==void 0&&v(A(l.max)),E({}))}const H=(O=oe.find(n=>n.key===i))==null?void 0:O.labelKey,ve=N?a("categories.collections"):s?it(s):H&&i!=="all"?a(H):"",$e=z!=null||P!=null?`${r||"0"}-${x||"∞"}`:"",ke=B.filter(n=>u.includes(n)).map(K).join(", "),Se=C==="on_sale"?a("filter.onSale"):C==="not_for_sale"?a("filter.notForSale"):"";return o.jsxs(Te,{children:[o.jsx(W,{title:a("assets.category"),open:ce,onToggle:()=>pe(n=>!n),summary:ve,desktopStatic:!0,children:o.jsx(je,{category:i,subCategory:s,onCategory:p,onSub:h,hideNames:le,collections:N,onCollections:de})}),o.jsx(j,{}),o.jsxs(W,{title:a("filter.price"),open:he,onToggle:()=>xe(n=>!n),summary:$e,desktopStatic:!0,children:[o.jsxs(_e,{children:[o.jsxs(V,{children:[o.jsx(X,{children:a("assets.min")}),o.jsx(J,{children:o.jsx(Q,{type:"number",min:"0","aria-label":a("assets.minPriceAria"),placeholder:"0",value:l.min!==void 0?L(l.min):r,onChange:n=>w(n.target.value)})})]}),o.jsx(De,{children:a("assets.priceTo")}),o.jsxs(V,{children:[o.jsx(X,{children:a("assets.max")}),o.jsx(J,{children:o.jsx(Q,{type:"number",min:"0","aria-label":a("assets.maxPriceAria"),placeholder:"0",value:l.max!==void 0?A(l.max):x,onChange:n=>v(n.target.value)})})]})]}),o.jsxs(Fe,{children:[o.jsx(Le,{"aria-hidden":!0}),o.jsx(Ae,{minPct:F,maxPct:be,"aria-hidden":!0}),o.jsx(Z,{type:"range",min:0,max:R,value:M(k),"aria-label":a("assets.minPriceSliderAria"),"aria-valuetext":k.toLocaleString(),"data-on-top":F>=50?"":void 0,onChange:n=>ye(Number(n.target.value)),onPointerUp:m,onKeyUp:m,onBlur:m}),o.jsx(Z,{type:"range",min:0,max:R,value:M(S),"aria-label":a("assets.maxPriceSliderAria"),"aria-valuetext":S.toLocaleString(),onChange:n=>we(Number(n.target.value)),onPointerUp:m,onKeyUp:m,onBlur:m})]}),o.jsxs(He,{children:[o.jsxs(ee,{children:[o.jsx(te,{name:U.iconName,"aria-hidden":!0}),k.toLocaleString()]}),o.jsxs(ee,{children:[o.jsx(te,{name:U.iconName,"aria-hidden":!0}),S.toLocaleString()]})]})]}),o.jsx(j,{}),o.jsx(W,{title:a("assets.rarity"),open:ge,onToggle:()=>me(n=>!n),summary:ke,headerTestId:"sidebar-section-toggle",children:o.jsx(Oe,{"data-testid":"rarity-filter",children:B.map(n=>{const d=u.includes(n);return o.jsxs(Be,{type:"button",selected:d,"aria-pressed":d,onClick:()=>ae(n),"data-testid":"rarity-filter-check",children:[o.jsx(Ke,{color:e.rarities[n],children:d?o.jsx(Ue,{name:"check","aria-hidden":!0}):null}),o.jsx(Ye,{selected:d,children:K(n)})]},n)})})}),o.jsx(j,{}),o.jsx(W,{title:a("filter.status"),open:fe,onToggle:()=>ue(n=>!n),summary:Se,children:[["all",a("filter.statusAll")],["on_sale",a("filter.onSale")],["not_for_sale",a("filter.notForSale")]].map(([n,d])=>o.jsxs(Ge,{children:[o.jsx(qe,{type:"radio",name:"shop-status",checked:C===n,onChange:()=>se(n)}),o.jsx(Ve,{children:d})]},n))}),o.jsx(j,{}),o.jsxs(Xe,{children:[o.jsxs(Je,{children:[o.jsx(Qe,{name:"smart","aria-hidden":!0}),o.jsx(Ze,{children:a("filter.smart")}),o.jsx(Re,{content:a("filter.smartHint"),placement:"bottom",children:o.jsx(et,{name:"info",role:"img","aria-label":a("filter.smartHint"),tabIndex:0,"data-testid":"smart-hint"})})]}),o.jsx(tt,{type:"button",role:"switch",on:$,"aria-checked":$,"aria-label":a("filter.smart"),onClick:()=>re(!$),children:o.jsx(ot,{on:$})})]})]})}const dt=t.div`
-  position: relative;
-  display: flex;
-  gap: 32px;
-  align-items: flex-start;
-
-  ${e.media.maxWidth("lg")} {
-    display: block;
-  }
-`,ct=t.div`
-  flex: 1;
-  min-width: 0;
-
-  ${e.media.maxWidth("lg")} {
-    width: 100%;
-  }
-`,pt=t.aside`
-  flex: none;
-  width: 265px;
-
-  /* Desktop only (mobile is the off-canvas drawer below). Pin the filter column so it accompanies the
-     grid's scroll, and let it scroll internally when every section is expanded instead of overflowing
-     the page. The row's align-items: flex-start (Root) keeps this a content-height item, which is what
-     makes sticky able to move within the row. */
-  ${e.media.minWidth("lg")} {
-    position: sticky;
-    /* Sit flush below the fixed ui2 navbar (92px) + the sticky shop sub-nav (66px = its height) so the
-       sidebar tracks scroll without hiding under them or floating in a gap (see index.css). */
-    top: 158px;
-    /* Scroll inside the column when the expanded filters exceed the viewport; the 24px keeps the last
-       control clear of the screen edge. */
-    max-height: calc(100vh - 158px - 24px);
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    /* Scrollbar fully hidden (it used to fade in on hover, which read as a glitch on the dark theme).
-       Wheel/trackpad/keyboard scrolling still works; the column just never shows a bar. */
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar {
-      width: 0;
-      display: none;
-    }
-  }
-
-  ${e.media.maxWidth("lg")} {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: auto;
-    z-index: 9999;
-    width: 100%;
-    max-height: 88vh;
-    display: flex;
-    flex-direction: column;
-    border-radius: 16px 16px 0 0;
-    background: #2b0e44;
-    padding: 0 16px;
-    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
-    transform: translateY(100%);
-    transition: transform 0.26s ease;
-    visibility: hidden;
-
-    &[data-open] {
-      transform: translateY(0);
-      visibility: visible;
-    }
-  }
-`,ht=t.div`
-  ${e.media.maxWidth("lg")} {
-    flex: 1;
-    min-height: 0;
-    overflow-y: auto;
-    /* Room so the last filter row clears the sticky "Show items" bar (Figma bottom bar). */
-    padding-bottom: 24px;
-  }
-`,xt=t.div`
-  position: fixed;
-  inset: 0;
-  z-index: 9998;
-  background: rgba(0, 0, 0, 0.4);
-`,gt=t.div`
-  display: none;
-
-  ${e.media.maxWidth("lg")} {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: #2b0e44;
-    margin: 0 -16px 8px;
-    padding: 16px 16px 12px;
-    border-radius: 16px 16px 0 0;
-  }
-`,mt=t.span`
-  font-family: ${e.font.sans};
-  font-weight: 700;
-  font-size: 15px;
-  letter-spacing: 0.46px;
-  text-transform: uppercase;
-  color: ${e.colors.softWhite};
-`,ft=t.button`
-  display: grid;
-  place-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.16);
-  border: 0;
-  font-size: 15px;
-  line-height: 1;
-  cursor: pointer;
-  color: ${e.colors.softWhite};
-
-  &:focus-visible {
-    outline: 2px solid ${e.colors.accent};
-    outline-offset: 2px;
-  }
-`,ut=t.div`
-  display: none;
-
-  ${e.media.maxWidth("lg")} {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    position: sticky;
-    bottom: 0;
-    margin: 8px -16px 0;
-    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
-    background: #2b0e44;
-    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
-    z-index: 1;
-  }
-`,bt=t.button`
-  flex: 1;
-  height: 40px;
-  border: 0;
-  border-radius: 8px;
-  background: ${e.colors.accent};
-  color: ${e.colors.softWhite};
-  font-family: ${e.font.sans};
-  font-weight: 600;
-  font-size: 13px;
-  letter-spacing: 0.46px;
-  line-height: 24px;
-  text-transform: uppercase;
-  cursor: pointer;
-
-  &:hover {
-    filter: brightness(1.08);
-  }
-  &:focus-visible {
-    outline: 2px solid ${e.colors.accent};
-    outline-offset: 2px;
-  }
-`,yt=t.p`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  background: ${e.colors.rarityBg};
-  color: ${e.colors.accent};
-  border-radius: 12px;
-  padding: 12px 16px;
-  margin-bottom: 14px;
-  font-weight: 600;
-  font-size: 14px;
-
-  &[data-variant='warn'] {
-    background: rgba(211, 51, 51, 0.1);
-    color: ${e.colors.err};
-  }
-`,wt=t.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 24px;
-  padding: 48px 16px;
-  border-radius: 16px;
-  background: rgba(0, 0, 0, 0.2);
-  text-align: center;
-`,vt=t.img`
-  width: 138px;
-  height: 138px;
-`,$t=t.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding-bottom: 16px;
-  color: ${e.colors.softWhite};
-`,kt=t.p`
-  margin: 0;
-  font-family: ${e.font.sans};
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 1.6;
-`,St=t.p`
-  margin: 0;
-  max-width: 520px;
-  font-family: ${e.font.sans};
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 1.6;
-
-  b {
-    font-weight: 600;
-  }
-`,jt=t.div`
-  display: flex;
-  flex-direction: column;
-  width: 310px;
-  max-width: 100%;
-  padding-bottom: 16px;
-`,Wt=t.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  height: 52px;
-  padding: 0 12px;
-  border: 0;
-  border-radius: 12px;
-  /* The design's own CTA here is a deeper translucent black on the panel, not a solid purple. */
-  background: rgba(0, 0, 0, 0.4);
-  color: ${e.colors.softWhite};
-  font-family: ${e.font.sans};
-  font-weight: 600;
-  font-size: 15px;
-  line-height: 24px;
-  letter-spacing: 0.46px;
-  text-transform: uppercase;
-  cursor: pointer;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.55);
-  }
-  &:active {
-    background: rgba(0, 0, 0, 0.65);
-  }
-  &:focus-visible {
-    outline: 2px solid ${e.colors.softWhite};
-    outline-offset: 2px;
-  }
-`;export{ft as C,gt as D,$t as E,lt as F,ct as M,dt as R,xt as S,pt as a,mt as b,ht as c,ut as d,bt as e,St as f,wt as g,kt as h,jt as i,Wt as j,j as k,W as l,Oe as m,Be as n,Ke as o,Ue as p,Ye as q,Ge as r,qe as s,Ve as t,yt as u,vt as v};
-//# sourceMappingURL=Assets.styles-DyGkSQg3.js.map