@dcl/shop 0.10.1-31042990976.commit-7edc9b6 → 1.0.0

package/_assets/{Assets.styles-D4-S4NWG.js → Assets.styles-BUHnZ7Nb.js}

@@ -1,17 +1,17 @@
-import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as de}from"./categories-yTyOCTA2.js";import{n as c,T as pe}from"./Tooltip-BoJS18Z3.js";import{t as e,s as o,I as g,b as s,am as P,C as v}from"./index-BL2RPpVH.js";const xe=o.div`
+import{r as w,j as i}from"./react-BYHuwl8r.js";import{C as _,R as T,a as le,b as de}from"./categories-B3DJZe02.js";import{n as d,T as ce}from"./Tooltip-tAvMrdFp.js";import{s as t,t as e,I as k,b as a,an as E,C as F}from"./index-C616xNgB.js";const pe=t.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
   width: 100%;
-`,k=o.div`
+`,$=t.div`
   height: 1px;
-  background: ${e.colors.media};
+  background: rgba(255, 255, 255, 0.25);
   width: 100%;
-`,he=o.div`
+`,he=t.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-`,me=o("button",c("desktopStatic"))`
+`,xe=t("button",d("desktopStatic"))`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -22,7 +22,7 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
   border: 0;
   border-radius: 4px;
   background: transparent;
-  color: ${e.colors.text};
+  color: ${e.colors.softWhite};
   text-align: left;
   cursor: pointer;
 
@@ -32,7 +32,7 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
 
   @media (hover: hover) {
     &:hover {
-      background: #f5f4f7;
+      background: rgba(255, 255, 255, 0.08);
     }
   }
   &:focus-visible {
@@ -40,84 +40,80 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
     outline-offset: 2px;
   }
 
-  ${({desktopStatic:i})=>i?`${e.media.minWidth("lg")} {
+  ${({desktopStatic:o})=>o?`${e.media.minWidth("lg")} {
           cursor: default;
           &:hover { background: transparent; }
         }`:""}
-`,ge=o.span`
+`,ge=t.span`
   font-family: ${e.font.sans};
   font-weight: 600;
   font-size: 14px;
   line-height: 1.43;
-  color: ${e.colors.text};
+  color: ${e.colors.softWhite};
 
   ${e.media.maxWidth("lg")} {
     font-size: 16px;
   }
-`,fe=o.span`
+`,fe=t.span`
   display: inline-flex;
   ${e.media.minWidth("lg")} {
     display: none;
   }
-`,ue=o("p",c("desktopHidden"))`
+`,me=t("p",d("desktopHidden"))`
   margin: 0;
   padding: 0 4px 4px;
   font-family: ${e.font.sans};
   font-weight: 400;
   font-size: 12px;
   line-height: normal;
-  color: ${e.colors.muted};
+  color: ${e.colors.gray4};
   text-transform: capitalize;
 
-  ${({desktopHidden:i})=>i?`${e.media.minWidth("lg")} { display: none; }`:""}
-`,be=o("div",c("open","desktopStatic"))`
+  ${({desktopHidden:o})=>o?`${e.media.minWidth("lg")} { display: none; }`:""}
+`,ue=t("div",d("open","desktopStatic"))`
   display: grid;
-  grid-template-rows: ${({open:i})=>i?"1fr":"0fr"};
+  grid-template-rows: ${({open:o})=>o?"1fr":"0fr"};
   transition: grid-template-rows 0.22s ease;
 
-  ${({desktopStatic:i})=>i?`${e.media.minWidth("lg")} { grid-template-rows: 1fr; }`:""}
+  ${({desktopStatic:o})=>o?`${e.media.minWidth("lg")} { grid-template-rows: 1fr; }`:""}
 
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
-`,ye=o.div`
+`,be=t.div`
   overflow: hidden;
   min-height: 0;
-`,we=o.div`
+`,ye=t.div`
   display: flex;
   align-items: flex-end;
   justify-content: center;
   gap: 6px;
   padding: 8px 4px 0;
-`,E=o.label`
+`,P=t.label`
   display: flex;
   flex: 1;
   min-width: 0;
   flex-direction: column;
   gap: 4px;
-`,F=o.span`
+`,I=t.span`
   font-family: ${e.font.sans};
   font-weight: 400;
   font-size: 12px;
-  color: ${e.colors.muted};
-`,I=o.span`
+  color: ${e.colors.gray4};
+`,N=t.span`
   display: flex;
   align-items: center;
   gap: 4px;
   height: 42px;
   padding: 8px;
-  border: 0.5px solid ${e.colors.text};
+  border: 0.5px solid ${e.colors.softWhite};
   border-radius: 8px;
-  background: ${e.colors.white};
+  background: rgba(0, 0, 0, 0.1);
 
   &:focus-within {
     border-color: ${e.rarities.epic};
   }
-`,A=o(g)`
-  width: 16px;
-  height: 16px;
-  color: ${e.colors.text};
-`,H=o.input`
+`,A=t.input`
   width: 100%;
   min-width: 0;
   border: 0;
@@ -125,7 +121,7 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
   padding: 0;
   font-family: ${e.font.sans};
   font-size: 13px;
-  color: ${e.colors.text};
+  color: ${e.colors.softWhite};
 
   &:focus {
     outline: 0;
@@ -135,34 +131,34 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
     -webkit-appearance: none;
     margin: 0;
   }
-`,$e=o.span`
+`,we=t.span`
   padding-bottom: 12px;
-  color: ${e.colors.text};
+  color: ${e.colors.softWhite};
   font-family: ${e.font.sans};
   font-size: 13px;
-`,ve=o.div`
+`,$e=t.div`
   position: relative;
   height: 20px;
   margin: 24px 4px 0;
-`,ke=o.div`
+`,ve=t.div`
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   height: 2px;
   transform: translateY(-50%);
-  background: ${e.colors.media};
+  background: rgba(255, 255, 255, 0.3);
   border-radius: 2px;
-`,je=o("div",c("minPct","maxPct"))`
+`,ke=t("div",d("minPct","maxPct"))`
   position: absolute;
   top: 50%;
   height: 2px;
   transform: translateY(-50%);
-  left: ${({minPct:i})=>`${i}%`};
-  right: ${({maxPct:i})=>`${100-i}%`};
+  left: ${({minPct:o})=>`${o}%`};
+  right: ${({maxPct:o})=>`${100-o}%`};
   background: ${e.colors.rarity};
   border-radius: 2px;
-`,L=o.input`
+`,L=t.input`
   position: absolute;
   top: 0;
   left: 0;
@@ -196,23 +192,23 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
     box-shadow: 0 1px 3px rgba(22, 21, 24, 0.25);
     cursor: pointer;
   }
-`,Se=o.div`
+`,je=t.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 4px 0;
-`,B=o.span`
+`,D=t.span`
   display: inline-flex;
   align-items: center;
   gap: 2px;
   font-family: ${e.font.sans};
   font-size: 13px;
-  color: ${e.colors.text};
-`,D=o(g)`
+  color: ${e.colors.softWhite};
+`,H=t(k)`
   width: 16px;
   height: 16px;
-  color: ${e.colors.text};
-`,Re=o.div`
+  color: ${e.colors.softWhite};
+`,Se=t.div`
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
@@ -221,68 +217,97 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
   ${e.media.maxWidth("lg")} {
     gap: 12px 16px;
   }
-`,Ce=o("button",c("selected"))`
+`,We=t("button",d("selected"))`
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 4px 8px;
   border-radius: 6px;
-  background: ${e.colors.softWhite};
-  border: ${({selected:i})=>i?`1px solid ${e.colors.text}`:`0.5px solid ${e.colors.gray4}`};
+  background: ${({selected:o})=>o?"rgba(0, 0, 0, 0.3)":"transparent"};
+  border: ${({selected:o})=>o?`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.text};
+    border-color: ${e.colors.softWhite};
   }
   &:focus-visible {
     outline: 2px solid ${e.colors.accent};
     outline-offset: 2px;
   }
-`,ze=o("span",c("color"))`
+`,Re=t("span",d("color"))`
   position: relative;
   width: 16px;
   height: 16px;
   border-radius: 4px;
-  background: ${({color:i})=>i};
+  background: ${({color:o})=>o};
   flex: none;
-`,Te=o(g)`
+`,Ce=t(k)`
   position: absolute;
   inset: 0;
   width: 16px;
   height: 16px;
   color: ${e.colors.white};
-`,We=o("span",c("selected"))`
+`,ze=t("span",d("selected"))`
   font-family: ${e.font.sans};
-  font-weight: ${({selected:i})=>i?600:400};
+  font-weight: ${({selected:o})=>o?600:400};
   font-size: 12px;
   line-height: 1.43;
-  color: ${({selected:i})=>i?e.colors.text2:e.colors.gray0};
+  /* Gray 5 at rest, soft-white when selected (Figma) — both read on the purple field. */
+  color: ${({selected:o})=>o?e.colors.softWhite:e.colors.media};
   text-transform: capitalize;
 
   ${e.media.maxWidth("lg")} {
     font-size: 14px;
   }
-`,Ne=o.label`
+`,Te=t.label`
   display: flex;
   align-items: center;
   gap: 8px;
   height: 40px;
   padding: 4px 4px 4px 24px;
   cursor: pointer;
-`,Pe=o.input`
+
+  /* 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};
+    }
+  }
+`,Ee=t.input`
+  appearance: none;
   width: 18px;
   height: 18px;
   margin: 0;
-  accent-color: ${e.colors.accent};
+  border: 2px solid ${e.colors.media};
+  border-radius: 50%;
+  background: transparent;
   cursor: pointer;
   flex: none;
-`,Ee=o.span`
+  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;
+  }
+`,Fe=t.span`
   font-family: ${e.font.sans};
   font-weight: 400;
   font-size: 14px;
   line-height: 1.43;
-  color: ${e.colors.gray0};
-`,Fe=o.div`
+  color: ${e.colors.gray4};
+`,Pe=t.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -296,25 +321,25 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
   ${e.media.maxWidth("lg")} {
     height: 52px;
   }
-`,Ie=o.div`
+`,Ie=t.div`
   display: flex;
   align-items: center;
   gap: 6px;
-`,Ae=o(g)`
+`,Ne=t(k)`
   width: 14px;
   height: 14px;
-  color: ${e.colors.text};
+  color: ${e.colors.softWhite};
 
   ${e.media.maxWidth("lg")} {
     width: 16px;
     height: 16px;
   }
-`,He=o.span`
+`,Ae=t.span`
   font-family: ${e.font.sans};
   font-weight: 600;
   font-size: 14px;
   line-height: 1.43;
-  color: ${e.colors.text};
+  color: ${e.colors.softWhite};
   /* Figma labels SMART in uppercase (the flash-feature label), unlike the title-case section names. */
   text-transform: uppercase;
 
@@ -322,18 +347,18 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
   ${e.media.maxWidth("lg")} {
     font-size: 16px;
   }
-`,Le=o(g)`
+`,Le=t(k)`
   width: 12px;
   height: 12px;
   color: ${e.colors.muted2};
-`,Be=o("button",c("on"))`
+`,De=t("button",d("on"))`
   position: relative;
   width: 24px;
   height: 14px;
   padding: 0;
   border-radius: 100px;
-  border: 1px solid ${({on:i})=>i?e.colors.accent:e.colors.gray4};
-  background: ${({on:i})=>i?e.colors.accent:e.colors.media};
+  border: 0;
+  background: ${({on:o})=>o?e.colors.dclRed:"rgba(255, 255, 255, 0.1)"};
   cursor: pointer;
   flex: none;
   transition:
@@ -350,24 +375,25 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
     width: 40px;
     height: 22px;
   }
-`,De=o("span",c("on"))`
+`,He=t("span",d("on"))`
   position: absolute;
   top: 50%;
-  left: ${({on:i})=>i?"calc(100% - 12px)":"0px"};
+  left: ${({on:o})=>o?"calc(100% - 12px)":"0px"};
   transform: translateY(-50%);
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background: ${e.colors.white};
+  /* 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"};
+    left: ${({on:o})=>o?"calc(100% - 18px)":"2px"};
   }
-`,d=1e5;function Oe(i){var l;for(const h of O){const p=(l=h.subs)==null?void 0:l.find(a=>a.key===i);if(p)return s(p.labelKey)}return i}function j({title:i,open:l,onToggle:h,summary:p,desktopStatic:a,headerTestId:x,headerAria:f,children:u}){const m=t.jsx(de,{up:l,size:24,color:e.colors.text});return t.jsxs(he,{children:[t.jsxs(me,{type:"button",desktopStatic:a,onClick:h,"aria-expanded":l,"aria-label":f,"data-testid":x,children:[t.jsx(ge,{children:i}),a?t.jsx(fe,{children:m}):m]}),!l&&p?t.jsx(ue,{desktopHidden:a,children:p}):null,t.jsx(be,{open:l,desktopStatic:a,children:t.jsx(ye,{children:u})})]})}function Ue({category:i,subCategory:l,onCategory:h,onSub:p,priceMin:a,priceMax:x,onPriceMin:f,onPriceMax:u,rarities:m,onToggleRarity:_,status:S,onStatus:M,smart:b,onSmart:Y,hideNames:K=!1,collections:z=!1,onCollections:U}){var W;const[q,G]=$.useState(!0),[V,X]=$.useState(!0),[J,Q]=$.useState(!1),[Z,ee]=$.useState(!0),R=a&&!Number.isNaN(Number(a))?Number(a):void 0,C=x&&!Number.isNaN(Number(x))?Number(x):void 0,y=R!=null?Math.min(R,d):0,w=C!=null?Math.min(C,d):d,te=y/d*100,oe=w/d*100;function ie(n){const r=Math.min(n,w);f(r<=0?"":String(r))}function ne(n){const r=Math.max(n,y);u(r>=d?"":String(r))}const T=(W=O.find(n=>n.key===i))==null?void 0:W.labelKey,se=z?s("categories.collections"):l?Oe(l):T&&i!=="all"?s(T):"",ae=R!=null||C!=null?`${a||"0"}-${x||"∞"}`:"",re=N.filter(n=>m.includes(n)).map(P).join(", "),le=S==="on_sale"?s("filter.onSale"):S==="not_for_sale"?s("filter.notForSale"):"";return t.jsxs(xe,{children:[t.jsx(j,{title:s("assets.category"),open:q,onToggle:()=>G(n=>!n),summary:se,desktopStatic:!0,children:t.jsx(ce,{category:i,subCategory:l,onCategory:h,onSub:p,hideNames:K,collections:z,onCollections:U})}),t.jsx(k,{}),t.jsxs(j,{title:s("filter.price"),open:V,onToggle:()=>X(n=>!n),summary:ae,desktopStatic:!0,children:[t.jsxs(we,{children:[t.jsxs(E,{children:[t.jsx(F,{children:s("assets.min")}),t.jsxs(I,{children:[t.jsx(A,{name:v.iconName,"aria-hidden":!0}),t.jsx(H,{type:"number",min:"0","aria-label":s("assets.minPriceAria"),placeholder:"0",value:a,onChange:n=>f(n.target.value)})]})]}),t.jsx($e,{children:s("assets.priceTo")}),t.jsxs(E,{children:[t.jsx(F,{children:s("assets.max")}),t.jsxs(I,{children:[t.jsx(A,{name:v.iconName,"aria-hidden":!0}),t.jsx(H,{type:"number",min:"0","aria-label":s("assets.maxPriceAria"),placeholder:"0",value:x,onChange:n=>u(n.target.value)})]})]})]}),t.jsxs(ve,{children:[t.jsx(ke,{"aria-hidden":!0}),t.jsx(je,{minPct:te,maxPct:oe,"aria-hidden":!0}),t.jsx(L,{type:"range",min:0,max:d,value:y,"aria-label":s("assets.minPriceSliderAria"),onChange:n=>ie(Number(n.target.value))}),t.jsx(L,{type:"range",min:0,max:d,value:w,"aria-label":s("assets.maxPriceSliderAria"),onChange:n=>ne(Number(n.target.value))})]}),t.jsxs(Se,{children:[t.jsxs(B,{children:[t.jsx(D,{name:v.iconName,"aria-hidden":!0}),y.toLocaleString()]}),t.jsxs(B,{children:[t.jsx(D,{name:v.iconName,"aria-hidden":!0}),w.toLocaleString()]})]})]}),t.jsx(k,{}),t.jsx(j,{title:s("assets.rarity"),open:J,onToggle:()=>Q(n=>!n),summary:re,headerTestId:"sidebar-section-toggle",children:t.jsx(Re,{"data-testid":"rarity-filter",children:N.map(n=>{const r=m.includes(n);return t.jsxs(Ce,{type:"button",selected:r,"aria-pressed":r,onClick:()=>_(n),"data-testid":"rarity-filter-check",children:[t.jsx(ze,{color:e.rarities[n],children:r?t.jsx(Te,{name:"check","aria-hidden":!0}):null}),t.jsx(We,{selected:r,children:P(n)})]},n)})})}),t.jsx(k,{}),t.jsx(j,{title:s("filter.status"),open:Z,onToggle:()=>ee(n=>!n),summary:le,children:[["all",s("filter.statusAll")],["on_sale",s("filter.onSale")],["not_for_sale",s("filter.notForSale")]].map(([n,r])=>t.jsxs(Ne,{children:[t.jsx(Pe,{type:"radio",name:"shop-status",checked:S===n,onChange:()=>M(n)}),t.jsx(Ee,{children:r})]},n))}),t.jsx(k,{}),t.jsxs(Fe,{children:[t.jsxs(Ie,{children:[t.jsx(Ae,{name:"smart","aria-hidden":!0}),t.jsx(He,{children:s("filter.smart")}),t.jsx(pe,{content:s("filter.smartHint"),placement:"bottom",children:t.jsx(Le,{name:"info",role:"img","aria-label":s("filter.smartHint"),tabIndex:0,"data-testid":"smart-hint"})})]}),t.jsx(Be,{type:"button",role:"switch",on:b,"aria-checked":b,"aria-label":s("filter.smart"),onClick:()=>Y(!b),children:t.jsx(De,{on:b})})]})]})}const qe=o.div`
+`,c=1e5;function _e(o){var l;for(const x of _){const p=(l=x.subs)==null?void 0:l.find(s=>s.key===o);if(p)return a(p.labelKey)}return o}function v({title:o,open:l,onToggle:x,summary:p,desktopStatic:s,headerTestId:h,headerAria:f,children:m}){const g=i.jsx(de,{up:l,size:24,color:e.colors.softWhite});return i.jsxs(he,{children:[i.jsxs(xe,{type:"button",desktopStatic:s,onClick:x,"aria-expanded":l,"aria-label":f,"data-testid":h,children:[i.jsx(ge,{children:o}),s?i.jsx(fe,{children:g}):g]}),!l&&p?i.jsx(me,{desktopHidden:s,children:p}):null,i.jsx(ue,{open:l,desktopStatic:s,children:i.jsx(be,{children:m})})]})}function Ke({category:o,subCategory:l,onCategory:x,onSub:p,priceMin:s,priceMax:h,onPriceMin:f,onPriceMax:m,rarities:g,onToggleRarity:B,status:j,onStatus:M,smart:u,onSmart:O,hideNames:Y=!1,collections:R=!1,onCollections:K}){var z;const[G,U]=w.useState(!0),[q,V]=w.useState(!0),[X,J]=w.useState(!1),[Q,Z]=w.useState(!0),S=s&&!Number.isNaN(Number(s))?Number(s):void 0,W=h&&!Number.isNaN(Number(h))?Number(h):void 0,b=S!=null?Math.min(S,c):0,y=W!=null?Math.min(W,c):c,ee=b/c*100,te=y/c*100;function ie(n){const r=Math.min(n,y);f(r<=0?"":String(r))}function oe(n){const r=Math.max(n,b);m(r>=c?"":String(r))}const C=(z=_.find(n=>n.key===o))==null?void 0:z.labelKey,ne=R?a("categories.collections"):l?_e(l):C&&o!=="all"?a(C):"",ae=S!=null||W!=null?`${s||"0"}-${h||"∞"}`:"",se=T.filter(n=>g.includes(n)).map(E).join(", "),re=j==="on_sale"?a("filter.onSale"):j==="not_for_sale"?a("filter.notForSale"):"";return i.jsxs(pe,{children:[i.jsx(v,{title:a("assets.category"),open:G,onToggle:()=>U(n=>!n),summary:ne,desktopStatic:!0,children:i.jsx(le,{category:o,subCategory:l,onCategory:x,onSub:p,hideNames:Y,collections:R,onCollections:K})}),i.jsx($,{}),i.jsxs(v,{title:a("filter.price"),open:q,onToggle:()=>V(n=>!n),summary:ae,desktopStatic:!0,children:[i.jsxs(ye,{children:[i.jsxs(P,{children:[i.jsx(I,{children:a("assets.min")}),i.jsx(N,{children:i.jsx(A,{type:"number",min:"0","aria-label":a("assets.minPriceAria"),placeholder:"0",value:s,onChange:n=>f(n.target.value)})})]}),i.jsx(we,{children:a("assets.priceTo")}),i.jsxs(P,{children:[i.jsx(I,{children:a("assets.max")}),i.jsx(N,{children:i.jsx(A,{type:"number",min:"0","aria-label":a("assets.maxPriceAria"),placeholder:"0",value:h,onChange:n=>m(n.target.value)})})]})]}),i.jsxs($e,{children:[i.jsx(ve,{"aria-hidden":!0}),i.jsx(ke,{minPct:ee,maxPct:te,"aria-hidden":!0}),i.jsx(L,{type:"range",min:0,max:c,value:b,"aria-label":a("assets.minPriceSliderAria"),onChange:n=>ie(Number(n.target.value))}),i.jsx(L,{type:"range",min:0,max:c,value:y,"aria-label":a("assets.maxPriceSliderAria"),onChange:n=>oe(Number(n.target.value))})]}),i.jsxs(je,{children:[i.jsxs(D,{children:[i.jsx(H,{name:F.iconName,"aria-hidden":!0}),b.toLocaleString()]}),i.jsxs(D,{children:[i.jsx(H,{name:F.iconName,"aria-hidden":!0}),y.toLocaleString()]})]})]}),i.jsx($,{}),i.jsx(v,{title:a("assets.rarity"),open:X,onToggle:()=>J(n=>!n),summary:se,headerTestId:"sidebar-section-toggle",children:i.jsx(Se,{"data-testid":"rarity-filter",children:T.map(n=>{const r=g.includes(n);return i.jsxs(We,{type:"button",selected:r,"aria-pressed":r,onClick:()=>B(n),"data-testid":"rarity-filter-check",children:[i.jsx(Re,{color:e.rarities[n],children:r?i.jsx(Ce,{name:"check","aria-hidden":!0}):null}),i.jsx(ze,{selected:r,children:E(n)})]},n)})})}),i.jsx($,{}),i.jsx(v,{title:a("filter.status"),open:Q,onToggle:()=>Z(n=>!n),summary:re,children:[["all",a("filter.statusAll")],["on_sale",a("filter.onSale")],["not_for_sale",a("filter.notForSale")]].map(([n,r])=>i.jsxs(Te,{children:[i.jsx(Ee,{type:"radio",name:"shop-status",checked:j===n,onChange:()=>M(n)}),i.jsx(Fe,{children:r})]},n))}),i.jsx($,{}),i.jsxs(Pe,{children:[i.jsxs(Ie,{children:[i.jsx(Ne,{name:"smart","aria-hidden":!0}),i.jsx(Ae,{children:a("filter.smart")}),i.jsx(ce,{content:a("filter.smartHint"),placement:"bottom",children:i.jsx(Le,{name:"info",role:"img","aria-label":a("filter.smartHint"),tabIndex:0,"data-testid":"smart-hint"})})]}),i.jsx(De,{type:"button",role:"switch",on:u,"aria-checked":u,"aria-label":a("filter.smart"),onClick:()=>O(!u),children:i.jsx(He,{on:u})})]})]})}const Ge=t.div`
   position: relative;
   display: flex;
   gap: 32px;
@@ -376,14 +402,14 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
   ${e.media.maxWidth("lg")} {
     display: block;
   }
-`,Ge=o.div`
+`,Ue=t.div`
   flex: 1;
   min-width: 0;
 
   ${e.media.maxWidth("lg")} {
     width: 100%;
   }
-`,Ve=o.aside`
+`,qe=t.aside`
   flex: none;
   width: 265px;
 
@@ -401,32 +427,13 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
     max-height: calc(100vh - 158px - 24px);
     overflow-y: auto;
     overscroll-behavior: contain;
-    /* Reserve the scrollbar gutter so revealing the bar on hover doesn't shift the filter content. */
-    scrollbar-gutter: stable;
-
-    /* Subtle scrollbar (matches the cart scroll list). The track width is reserved CONSTANTLY — the same
-       8px at rest and on hover — so revealing the scrollbar never consumes space and pushes the sidebar
-       content left. Only the THUMB fades in on hover; at rest both thumb and track are transparent, so
-       the gutter is invisible but its space is already held. Firefox keeps scrollbar-width: thin (not
-       none -> thin, which would also shift) and just recolours the thumb on hover. */
-    scrollbar-width: thin;
-    scrollbar-color: transparent transparent;
+    /* 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: 8px;
-    }
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: transparent;
-      border-radius: 8px;
-      transition: background 0.2s ease;
-    }
-    &:hover {
-      scrollbar-color: ${e.colors.muted2} transparent;
-    }
-    &:hover::-webkit-scrollbar-thumb {
-      background: ${e.colors.muted2};
+      width: 0;
+      display: none;
     }
   }
 
@@ -442,7 +449,7 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
     display: flex;
     flex-direction: column;
     border-radius: 16px 16px 0 0;
-    background: ${e.colors.white};
+    background: #2b0e44;
     padding: 0 16px;
     box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
     transform: translateY(100%);
@@ -454,7 +461,7 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
       visibility: visible;
     }
   }
-`,Xe=o.div`
+`,Ve=t.div`
   ${e.media.maxWidth("lg")} {
     flex: 1;
     min-height: 0;
@@ -462,12 +469,12 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
     /* Room so the last filter row clears the sticky "Show items" bar (Figma bottom bar). */
     padding-bottom: 24px;
   }
-`,Je=o.div`
+`,Xe=t.div`
   position: fixed;
   inset: 0;
   z-index: 9998;
   background: rgba(0, 0, 0, 0.4);
-`,Qe=o.div`
+`,Je=t.div`
   display: none;
 
   ${e.media.maxWidth("lg")} {
@@ -477,36 +484,36 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: ${e.colors.white};
+    background: #2b0e44;
     margin: 0 -16px 8px;
     padding: 16px 16px 12px;
     border-radius: 16px 16px 0 0;
   }
-`,Ze=o.span`
+`,Qe=t.span`
   font-family: ${e.font.sans};
   font-weight: 700;
   font-size: 15px;
   letter-spacing: 0.46px;
   text-transform: uppercase;
-  color: ${e.colors.text};
-`,et=o.button`
+  color: ${e.colors.softWhite};
+`,Ze=t.button`
   display: grid;
   place-items: center;
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: ${e.colors.chip};
+  background: rgba(255, 255, 255, 0.16);
   border: 0;
   font-size: 15px;
   line-height: 1;
   cursor: pointer;
-  color: ${e.colors.text};
+  color: ${e.colors.softWhite};
 
   &:focus-visible {
     outline: 2px solid ${e.colors.accent};
     outline-offset: 2px;
   }
-`,tt=o.div`
+`,et=t.div`
   display: none;
 
   ${e.media.maxWidth("lg")} {
@@ -517,11 +524,11 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
     bottom: 0;
     margin: 8px -16px 0;
     padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
-    background: ${e.colors.white};
+    background: #2b0e44;
     box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
     z-index: 1;
   }
-`,ot=o.button`
+`,tt=t.button`
   flex: 1;
   height: 40px;
   border: 0;
@@ -543,7 +550,7 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
     outline: 2px solid ${e.colors.accent};
     outline-offset: 2px;
   }
-`,it=o.p`
+`,it=t.p`
   display: flex;
   align-items: center;
   gap: 10px;
@@ -559,7 +566,7 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
     background: rgba(211, 51, 51, 0.1);
     color: ${e.colors.err};
   }
-`,nt=o.div`
+`,ot=t.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -567,25 +574,25 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
   gap: 24px;
   padding: 48px 16px;
   border-radius: 16px;
-  background: ${e.colors.white};
+  background: rgba(0, 0, 0, 0.2);
   text-align: center;
-`,st=o.img`
+`,nt=t.img`
   width: 101px;
   height: 101px;
-`,at=o.div`
+`,at=t.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   padding-bottom: 16px;
-  color: ${e.colors.text};
-`,rt=o.p`
+  color: ${e.colors.softWhite};
+`,st=t.p`
   margin: 0;
   font-family: ${e.font.sans};
   font-weight: 700;
   font-size: 20px;
   line-height: 1.6;
-`,lt=o.p`
+`,rt=t.p`
   margin: 0;
   max-width: 520px;
   font-family: ${e.font.sans};
@@ -596,23 +603,24 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
   b {
     font-weight: 600;
   }
-`,ct=o.div`
+`,lt=t.div`
   display: flex;
   flex-direction: column;
   width: 310px;
   max-width: 100%;
   padding-bottom: 16px;
-`,dt=o.button`
+`,dt=t.button`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
-  height: 56px;
+  height: 52px;
   padding: 0 12px;
   border: 0;
   border-radius: 12px;
-  background: ${e.colors.accent};
+  /* 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;
@@ -623,13 +631,13 @@ import{r as $,j as t}from"./react-BYHuwl8r.js";import{C as O,R as N,a as ce,b as
   cursor: pointer;
 
   &:hover {
-    background: ${e.colors.accentHover};
+    background: rgba(0, 0, 0, 0.55);
   }
   &:active {
-    background: ${e.colors.accentActive};
+    background: rgba(0, 0, 0, 0.65);
   }
   &:focus-visible {
-    outline: 2px solid ${e.colors.accent};
+    outline: 2px solid ${e.colors.softWhite};
     outline-offset: 2px;
   }
-`;export{et as C,k as D,nt as E,j as F,Ge as M,Re as R,Ne as S,Ce as a,ze as b,Te as c,We as d,Pe as e,Ee as f,qe as g,Je as h,Ve as i,Qe as j,Ze as k,Xe as l,tt as m,ot as n,Ue as o,at as p,rt as q,lt as r,ct as s,dt as t,it as u,st as v};
+`;export{Ze as C,$ as D,ot as E,v as F,Ue as M,Se as R,Te as S,We as a,Re as b,Ce as c,ze as d,Ee as e,Fe as f,Ge as g,Xe as h,qe as i,Je as j,Qe as k,Ve as l,et as m,tt as n,Ke as o,at as p,st as q,rt as r,lt as s,dt as t,it as u,nt as v};