@dcl/shop 1.14.1-35731809173.commit-aacaccc → 1.14.1-35732774937.commit-d3acaab

package/_assets/Filters-D5CUPglE.js

@@ -0,0 +1,823 @@
+import{r as $,j as e}from"./react-ChceODIJ.js";import{s as t,a as n,I,n as Xe,bX as _,t as s,bQ as J,av as de,C as ce}from"./index-DRRXfH5T.js";import{f as G,g as qe}from"./browseLayout.styles-CtEXdyi5.js";import{n as T,T as Je}from"./Tooltip-3YnG1Umc.js";import{T as Ze}from"./skeleton.styles-DFjpg3_l.js";(function(){try{var i=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},o=new i.Error().stack;o&&(i._sentryDebugIds=i._sentryDebugIds||{},i._sentryDebugIds[o]="0329b01f-bddb-444e-85f0-1b06a786eb54",i._sentryDebugIdIdentifier="sentry-dbid-0329b01f-bddb-444e-85f0-1b06a786eb54")}catch{}})();function Zt(i){const o=$.useRef(null);$.useEffect(()=>{const p=o.current;o.current=i,!(p===null||p===i)&&window.scrollTo({top:0,left:0,behavior:"instant"})},[i])}const{colors:C,font:ee}=n,et=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+
+  &[data-flat] {
+    background: none;
+    padding: 0;
+    width: auto;
+  }
+  &[data-flat] [data-cat]:hover,
+  &[data-flat] [data-sub]:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+  &[data-flat] [data-cat][data-selected],
+  &[data-flat] [data-sub][data-active] {
+    background: rgba(255, 255, 255, 0.16);
+  }
+`,pe=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`,he=t.div`
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.22s ease;
+
+  &[data-open] {
+    grid-template-rows: 1fr;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`,xe=t.div`
+  overflow: hidden;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`,te=Xe`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  height: 40px;
+  padding: 4px 8px;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+`,ue=t.button`
+  ${te};
+
+  /* Selected only: being open is signalled by the rotated chevron, not by tinting the row. */
+  &[data-selected] {
+    background: rgba(255, 255, 255, 0.14);
+  }
+`,tt=t.button`
+  ${te};
+  padding-left: 24px;
+
+  &[data-active] {
+    background: rgba(255, 255, 255, 0.16);
+  }
+  &[data-active] [data-sub-label] {
+    color: ${C.white};
+    font-weight: 600;
+  }
+
+  /* The chevron tracks the row's label: gray4 at rest, white on hover and while selected. */
+  [data-chevron] {
+    color: ${C.gray4};
+  }
+  &:hover [data-chevron],
+  &[data-active] [data-chevron] {
+    color: ${C.white};
+  }
+`,it=t.button`
+  ${te};
+  padding-left: 48px;
+
+  &[data-active] {
+    background: ${C.rarityBg};
+  }
+  &[data-active] [data-sub-label] {
+    color: ${C.rarity};
+    font-weight: 600;
+  }
+`,ge=t.span`
+  font-family: ${ee.sans};
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 1.57;
+  color: ${C.softWhite};
+`,fe=t.span`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+`,me=t(I)`
+  width: 24px;
+  height: 24px;
+  color: ${C.gray4};
+`,be=t.span`
+  font-family: ${ee.sans};
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.5;
+  color: ${C.gray4};
+`,nt=t.p`
+  font-family: ${ee.sans};
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: ${C.gray4};
+  margin: 0 0 4px;
+  padding: 8px 16px 0;
+`;function we(i){var o;for(const p of _)for(const h of p.subs??[])if((o=h.subs)!=null&&o.some(l=>l.key===i))return h.key;return null}function ot({category:i,subCategory:o,onCategory:p,onSub:h,title:l,flat:g=!1,collections:f=!1,onCollections:k,hideAll:j=!1,hideNames:b=!1,extraLabelKey:z="categories.collections"}){const[L,S]=$.useState(()=>_.some(r=>r.key===i&&r.subs)?i:null),[P,w]=$.useState(()=>we(o));$.useEffect(()=>{_.some(x=>x.key===i&&x.subs)&&S(i);const r=we(o);r&&w(r)},[i,o]);function W(r){h(o===r.key?null:r.key),r.subs&&w(x=>x===r.key?null:r.key)}function B(r){r.subs?S(x=>{const u=x!==r.key;return u&&p(r.key),u?r.key:null}):(p(r.key),S(null))}return e.jsxs(et,{"data-flat":g||void 0,children:[l?e.jsx(nt,{children:l}):null,_.filter(r=>!(j&&r.key==="all")&&!(b&&r.key==="names")).map(r=>{const x=L===r.key&&!!r.subs,u=!f&&r.key===i&&!o;return e.jsxs(pe,{children:[e.jsxs(ue,{type:"button","data-cat":!0,"data-expanded":x||void 0,"data-selected":u||void 0,onClick:()=>B(r),children:[e.jsx(ge,{children:s(r.labelKey)}),r.expandable?e.jsx(G,{up:x,size:24,color:n.colors.softWhite}):null]}),r.subs?e.jsx(he,{"data-subs":!0,"data-open":x||void 0,children:e.jsx(xe,{children:r.subs.map(m=>{const c=P===m.key&&!!m.subs;return e.jsxs("div",{children:[e.jsxs(tt,{type:"button","data-sub":!0,"data-active":o===m.key||void 0,onClick:()=>W(m),children:[e.jsxs(fe,{children:[e.jsx(me,{name:m.icon,"aria-hidden":!0}),e.jsx(be,{"data-sub-label":!0,children:s(m.labelKey)})]}),m.expandable?e.jsx(G,{up:c,size:24,"data-chevron":!0}):null]}),m.subs?e.jsx(he,{"data-subs":!0,"data-open":c||void 0,children:e.jsx(xe,{children:m.subs.map(R=>e.jsx(it,{type:"button","data-sub":!0,"data-active":o===R.key||void 0,onClick:()=>h(o===R.key?null:R.key),children:e.jsxs(fe,{children:[e.jsx(me,{name:R.icon,"aria-hidden":!0}),e.jsx(be,{"data-sub-label":!0,children:s(R.labelKey)})]})},R.key))})}):null]},m.key)})})}):null]},r.key)}),k?e.jsx(pe,{children:e.jsx(ue,{type:"button","data-cat":!0,"data-testid":"filter-collections","data-selected":f||void 0,onClick:k,children:e.jsx(ge,{children:s(z)})})}):null]})}const{colors:O}=n,at=t.div`
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 36;
+  background: ${O.white};
+  border: 1px solid ${O.line};
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(22, 21, 24, 0.12);
+  padding: 8px;
+  animation: cart-pop-in 0.16s ease;
+
+  &[data-variant='rarity'] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2px;
+    min-width: 250px;
+  }
+  &[data-variant='price'] {
+    min-width: 240px;
+    padding: 12px;
+  }
+`,st=t.label`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  font-size: 14px;
+  text-transform: capitalize;
+  cursor: pointer;
+
+  &:hover {
+    background: #f5f4f7;
+  }
+  & input {
+    accent-color: ${O.accent};
+    width: 15px;
+    height: 15px;
+  }
+`;t.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  & input {
+    width: 100%;
+    border: 1px solid ${O.lineStrong};
+    border-radius: 10px;
+    padding: 8px 10px;
+    font-size: 14px;
+  }
+  & input:focus {
+    outline: 0;
+    border-color: ${O.accent};
+  }
+  & input::-webkit-outer-spin-button,
+  & input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+`;t.p`
+  margin: 8px 2px 0;
+  color: ${O.muted};
+  font-size: 12px;
+`;const{colors:d,media:D,radius:rt}=n,lt=t.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+`,dt=t.span`
+  order: 1;
+  color: ${d.gray5};
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.43;
+  white-space: nowrap;
+
+  /* Left end of the controls row, not a line of its own (2328:340761). */
+  ${D.maxWidth("lg")} {
+    order: 1;
+    flex: 0 0 auto;
+    font-size: 12px;
+    line-height: 1;
+    color: ${d.gray4};
+  }
+`,ct=t.div`
+  order: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+
+  ${D.maxWidth("lg")} {
+    order: 4;
+    flex-basis: 100%;
+    gap: 4px;
+  }
+`,pt=t.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px 6px 12px;
+  border: 0;
+  border-radius: ${rt.pill};
+  background: ${d.chipDark};
+  color: ${d.white};
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 1.43;
+  white-space: nowrap;
+  cursor: pointer;
+
+  ${D.maxWidth("lg")} {
+    font-size: 10px;
+  }
+
+  &:hover {
+    background: ${d.text};
+  }
+  &:focus-visible {
+    outline: 2px solid ${d.accent};
+    outline-offset: 2px;
+  }
+`,ht=t(I)`
+  width: 14px;
+  height: 14px;
+  color: ${d.white};
+`,ye=t.button`
+  padding: 0 4px;
+  background: none;
+  border: 0;
+  color: ${d.gray4};
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 1.43;
+  text-decoration: underline;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover {
+    color: ${d.white};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${d.accent};
+    outline-offset: 2px;
+  }
+`,xt=t.div`
+  flex: 0 1 405px;
+  min-width: 200px;
+
+  ${D.maxWidth("lg")} {
+    /* Shares the first row with Sort By + Filters, taking whatever they leave; the count drops below.
+       Deliberately no order property: it is the first child of Right already, and any positive order
+       would sort it BEHIND its unordered siblings. */
+    flex: 1 1 auto;
+    min-width: 130px;
+    margin-right: 16px;
+  }
+`,ut=t.div`
+  order: 4;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+
+  /* Sort By carries no height of its own — it is sized by its 12px label plus a 24px chevron, which lands
+     at 34px and left it visibly shorter than the 40px search field beside it. Pinned here, on the toolbar,
+     rather than on the Dropdown itself: that component is also used inside filter popovers and a modal,
+     where 40px is not the right size. Every toolbar gets the same pair of 40px controls. */
+  & [data-dropdown-trigger] {
+    height: 40px;
+  }
+
+  ${D.maxWidth("lg")} {
+    /* Owns the whole first row — search field then the two pills — with the count and chips below.
+       min-width: 0 defeats the flex item's automatic minimum, which would otherwise hold the row at its
+       min-content width (the pills never shrink) and push Filters off the right edge. */
+    order: 2;
+    flex: 1 1 auto;
+    min-width: 0;
+    margin-left: auto;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+
+    /* On mobile the Sort By dropdown is a pill matching the Filters pill (Figma 1304-310201): fully
+       rounded, 0.5px gray-3 hairline, title-case (not the desktop uppercase), same 28px height. */
+    & [data-dropdown-trigger] {
+      height: 36px;
+      padding: 8px 8px 8px 12px;
+      border-radius: 32px;
+      border: 1px solid ${d.softWhite};
+      color: ${d.softWhite};
+      background: ${d.glassFaint};
+      font-size: 12px;
+      font-weight: 500;
+      text-transform: none;
+      gap: 4px;
+    }
+  }
+`,gt=t.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 36px;
+  padding: 8px 8px 8px 12px;
+  background: ${d.glassFaint};
+  border: 1px solid ${d.softWhite};
+  border-radius: 32px;
+  color: ${d.softWhite};
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 1.43;
+  white-space: nowrap;
+  cursor: pointer;
+
+  ${D.minWidth("lg")} {
+    display: none;
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  &:focus-visible {
+    outline: 2px solid ${d.accent};
+    outline-offset: 2px;
+  }
+`,ft=t(I)`
+  width: 20px;
+  height: 20px;
+  color: #ecebed;
+`,mt=t.div`
+  order: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`,bt=t.div`
+  position: relative;
+`,wt=t.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: 0;
+  padding: 8px 10px;
+  border-radius: 8px;
+  color: ${d.gray4};
+  font-weight: 600;
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: ${d.white};
+  }
+  &[data-open],
+  &[data-active] {
+    color: ${d.white};
+  }
+  &:focus-visible {
+    outline: 2px solid ${d.accent};
+    outline-offset: 2px;
+  }
+`,yt=t.span`
+  display: inline-grid;
+  place-items: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: ${d.accent};
+  color: ${d.white};
+  font-size: 11px;
+  font-weight: 700;
+`,vt=t.div`
+  position: fixed;
+  inset: 0;
+  z-index: 34;
+`,Ne=[{key:"newest",label:"filterBar.sortNewest",server:"newest"},{key:"price-asc",label:"filterBar.sortCheapest",server:"cheapest"},{key:"price-desc",label:"filterBar.sortMostExpensive",server:"most_expensive"},{key:"name",label:"filterBar.sortName",server:"name"}],ei={key:"relevance",label:"filterBar.sortRelevance",server:"relevance"},ti=[{key:"discount",label:"filterBar.sortBiggestDiscount",server:"discount"},...Ne];function kt({panelKey:i,label:o,active:p,badge:h,panel:l,children:g}){const f=l.open===i;return e.jsxs(bt,{children:[e.jsxs(wt,{type:"button","data-open":f||void 0,"data-active":p||void 0,onClick:()=>l.toggle(i),children:[o," ",h?e.jsx(yt,{children:h}):null," ",e.jsx(G,{up:f,size:24,color:n.colors.text2})]}),f?g:null]})}function ii({sort:i,onSort:o,sortOptions:p=Ne,total:h,loading:l,query:g,onOpenFilters:f,chips:k,onClearChips:j,rarities:b,onToggleRarity:z,rarityOptions:L=J,anyActive:S,onClear:P,renderLeading:w,renderTrailing:W,search:B}){const[r,x]=$.useState(null),u={open:r,toggle:c=>x(R=>R===c?null:c),close:()=>x(null)},m=!!z||!!w||!!W;return e.jsxs(e.Fragment,{children:[r?e.jsx(vt,{onClick:u.close,"aria-hidden":!0}):null,e.jsxs(lt,{"data-testid":"browse-toolbar",children:[e.jsx(dt,{"data-testid":"browse-count","aria-busy":l||void 0,children:l?e.jsx(Ze,{className:"skeleton",width:72,"data-testid":"browse-count-skeleton","aria-hidden":!0}):e.jsxs(e.Fragment,{children:[s("filterBar.count",{count:h}),g?` ${s("filterBar.forQuery",{query:g})}`:""]})}),k&&k.length?e.jsxs(ct,{"data-testid":"filter-chips",children:[k.map(c=>e.jsxs(pt,{type:"button",onClick:c.onRemove,"aria-label":s("filterBar.removeFilter",{filter:c.label}),children:[e.jsx("span",{children:c.label}),e.jsx(ht,{name:"close","aria-hidden":!0})]},c.key)),j?e.jsx(ye,{type:"button",onClick:j,children:s("filterBar.clearAll")}):null]}):null,m?e.jsxs(mt,{children:[w==null?void 0:w(u),z?e.jsx(kt,{panelKey:"rarity",label:s("filterBar.rarity"),active:((b==null?void 0:b.length)??0)>0,badge:(b==null?void 0:b.length)||void 0,panel:u,children:e.jsx(at,{"data-variant":"rarity",children:L.map(c=>e.jsxs(st,{children:[e.jsx("input",{type:"checkbox",checked:(b==null?void 0:b.includes(c))??!1,onChange:()=>z(c)}),e.jsx("span",{children:c})]},c))})}):null,W==null?void 0:W(u),S?e.jsx(ye,{type:"button",onClick:()=>{P==null||P(),u.close()},children:s("filterBar.clearAll")}):null]}):null,e.jsxs(ut,{children:[B?e.jsx(xt,{children:B}):null,e.jsx(qe,{label:s("filterBar.sortBy"),ariaLabel:s("filterBar.sortBy"),value:i,options:p.map(c=>({value:c.key,label:s(c.label)})),onChange:o,align:"right",open:u.open==="sort",onOpenChange:c=>c?u.toggle("sort"):u.close()}),f?e.jsxs(gt,{type:"button","data-testid":"open-filters",onClick:f,children:[s("filterBar.filters"),e.jsx(ft,{name:"filter","aria-hidden":!0})]}):null]})]})]})}const N=1e5,M=900,E=90,Y=E*2,_e=M/E,Oe=N-M,ve=100;function ke(i){const o=Math.max(0,Math.min(Math.round(i),Y));if(o<=E)return o*_e;const p=M+(o-E)/E*Oe;return Math.round(p/ve)*ve}function Z(i){const o=Math.max(0,Math.min(i,N));return o<=M?Math.round(o/_e):E+Math.round((o-M)/Oe*E)}function $e(i){return Z(i)/Y*100}const $t=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+`,H=t.div`
+  height: 1px;
+  background: rgba(255, 255, 255, 0.25);
+  width: 100%;
+`,jt=t.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`,St=t("button",T("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: ${n.colors.softWhite};
+  text-align: left;
+  cursor: pointer;
+
+  ${n.media.maxWidth("lg")} {
+    height: 52px;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+  &:focus-visible {
+    outline: 2px solid ${n.colors.accent};
+    outline-offset: 2px;
+  }
+
+  ${({desktopStatic:i})=>i?`${n.media.minWidth("lg")} {
+          cursor: default;
+          &:hover { background: transparent; }
+        }`:""}
+`,Rt=t.span`
+  font-family: ${n.font.sans};
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 1.43;
+  color: ${n.colors.softWhite};
+
+  ${n.media.maxWidth("lg")} {
+    font-size: 16px;
+  }
+`,zt=t.span`
+  display: inline-flex;
+  ${n.media.minWidth("lg")} {
+    display: none;
+  }
+`,Wt=t("p",T("desktopHidden"))`
+  margin: 0;
+  padding: 0 4px 4px;
+  font-family: ${n.font.sans};
+  font-weight: 400;
+  font-size: 12px;
+  line-height: normal;
+  color: ${n.colors.gray4};
+  text-transform: capitalize;
+
+  ${({desktopHidden:i})=>i?`${n.media.minWidth("lg")} { display: none; }`:""}
+`,Ct=t("div",T("open","desktopStatic"))`
+  display: grid;
+  grid-template-rows: ${({open:i})=>i?"1fr":"0fr"};
+  transition: grid-template-rows 0.22s ease;
+
+  ${({desktopStatic:i})=>i?`${n.media.minWidth("lg")} { grid-template-rows: 1fr; }`:""}
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`,Tt=t.div`
+  overflow: hidden;
+  min-height: 0;
+`,Pt=t.div`
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 4px 0;
+`,je=t.label`
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+`,Se=t.span`
+  font-family: ${n.font.sans};
+  font-weight: 400;
+  font-size: 12px;
+  color: ${n.colors.gray4};
+`,Re=t.span`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 42px;
+  padding: 8px;
+  border: 0.5px solid ${n.colors.softWhite};
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.1);
+
+  /* theme.colors.orange, which theme.ts already designates for input borders — not a rarity hue. This
+     was theme.rarities.epic, the colour EPIC means everywhere else in the app, which read as unrelated
+     to the Shop and quietly overloaded a semantic token. The accent purple is the focus colour on the
+     app's light surfaces, but it would vanish against this sidebar's own purple. */
+  &:focus-within {
+    border-color: ${n.colors.orange};
+  }
+`,ze=t.input`
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  background: none;
+  padding: 0;
+  font-family: ${n.font.sans};
+  font-size: 13px;
+  color: ${n.colors.softWhite};
+
+  &:focus {
+    outline: 0;
+  }
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+`,Et=t.span`
+  padding-bottom: 12px;
+  color: ${n.colors.softWhite};
+  font-family: ${n.font.sans};
+  font-size: 13px;
+`,It=t.div`
+  position: relative;
+  height: 20px;
+  margin: 24px 4px 0;
+`,Bt=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;
+`,Ft=t("div",T("minPct","maxPct"))`
+  position: absolute;
+  top: 50%;
+  height: 2px;
+  transform: translateY(-50%);
+  left: ${({minPct:i})=>`${i}%`};
+  right: ${({maxPct:i})=>`${100-i}%`};
+  background: ${n.colors.rarity};
+  border-radius: 2px;
+`,We=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: ${n.colors.white};
+    border: 2px solid ${n.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: ${n.colors.white};
+    border: 2px solid ${n.colors.rarity};
+    box-shadow: 0 1px 3px rgba(22, 21, 24, 0.25);
+    cursor: pointer;
+  }
+`,Nt=t.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 4px 0;
+`,Ce=t.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-family: ${n.font.sans};
+  font-size: 13px;
+  color: ${n.colors.softWhite};
+`,Te=t(I)`
+  width: 16px;
+  height: 16px;
+  color: ${n.colors.softWhite};
+`,_t=t.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 9px 4px 9px 8px;
+
+  ${n.media.maxWidth("lg")} {
+    gap: 12px 16px;
+  }
+`,Ot=t("button",T("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 ${n.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: ${n.colors.softWhite};
+  }
+  &:focus-visible {
+    outline: 2px solid ${n.colors.accent};
+    outline-offset: 2px;
+  }
+`,Dt=t("span",T("color"))`
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  background: ${({color:i})=>i};
+  flex: none;
+`,Lt=t(I)`
+  position: absolute;
+  inset: 0;
+  width: 16px;
+  height: 16px;
+  color: ${n.colors.white};
+`,Mt=t("span",T("selected"))`
+  font-family: ${n.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?n.colors.softWhite:n.colors.media};
+  text-transform: capitalize;
+
+  ${n.media.maxWidth("lg")} {
+    font-size: 14px;
+  }
+`,At=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: ${n.colors.dclRed};
+    }
+  }
+`,Kt=t.input`
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  border: 2px solid ${n.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: ${n.colors.dclRed};
+    background: radial-gradient(circle at center, ${n.colors.dclRed} 0 4px, transparent 4.5px);
+  }
+  &:focus-visible {
+    outline: 2px solid ${n.colors.dclRed};
+    outline-offset: 2px;
+  }
+`,Ht=t.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: ${n.font.sans};
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.43;
+  color: ${n.colors.gray4};
+`,ni=t.img`
+  width: 1em;
+  height: 1em;
+  flex: none;
+  vertical-align: -0.12em;
+`,Pe=t.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  height: 40px;
+  padding: 4px;
+
+  /* On mobile a toggle row is a peer of the collapsible section headers (Figma 1304-307965): same 52px
+     row height so it doesn't read as a smaller afterthought. */
+  ${n.media.maxWidth("lg")} {
+    height: 52px;
+  }
+`,Ee=t.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`,Ut=t(I)`
+  width: 14px;
+  height: 14px;
+  color: ${n.colors.softWhite};
+
+  ${n.media.maxWidth("lg")} {
+    width: 16px;
+    height: 16px;
+  }
+`,Ie=t.span`
+  font-family: ${n.font.sans};
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 1.43;
+  color: ${n.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 a toggle row has the same hierarchy as Price/Rarity. */
+  ${n.media.maxWidth("lg")} {
+    font-size: 16px;
+  }
+`,Gt=t(I)`
+  width: 12px;
+  height: 12px;
+  color: ${n.colors.muted2};
+`,Be=t("button",T("on"))`
+  position: relative;
+  width: 24px;
+  height: 14px;
+  padding: 0;
+  border-radius: 100px;
+  border: 0;
+  background: ${({on:i})=>i?n.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 ${n.colors.accent};
+    outline-offset: 2px;
+  }
+
+  /* Bigger, tappable switch on mobile (the 24×14 desktop pill reads as too small on a phone). */
+  ${n.media.maxWidth("lg")} {
+    width: 40px;
+    height: 22px;
+  }
+`,Fe=t("span",T("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: ${n.colors.softWhite};
+  box-shadow: 0 1px 2px rgba(22, 21, 24, 0.3);
+  transition: left 0.15s ease;
+
+  ${n.media.maxWidth("lg")} {
+    width: 18px;
+    height: 18px;
+    left: ${({on:i})=>i?"calc(100% - 18px)":"2px"};
+  }
+`;function Yt(i){var o;for(const p of _){const h=(o=p.subs)==null?void 0:o.find(l=>l.key===i);if(h)return s(h.labelKey)}return i}function U({title:i,open:o,onToggle:p,summary:h,desktopStatic:l,headerTestId:g,headerAria:f,children:k}){const j=e.jsx(G,{up:o,size:24,color:n.colors.softWhite});return e.jsxs(jt,{children:[e.jsxs(St,{type:"button",desktopStatic:l,onClick:p,"aria-expanded":o,"aria-label":f,"data-testid":g,children:[e.jsx(Rt,{children:i}),l?e.jsx(zt,{children:j}):j]}),!o&&h?e.jsx(Wt,{desktopHidden:l,children:h}):null,e.jsx(Ct,{open:o,desktopStatic:l,children:e.jsx(Tt,{children:k})})]})}function oi({category:i,subCategory:o,onCategory:p,onSub:h,priceMin:l,priceMax:g,onPriceMin:f,onPriceMax:k,rarities:j,onToggleRarity:b,status:z,onStatus:L,smart:S,onSmart:P,deals:w,onDeals:W,hideNames:B=!1,collections:r=!1,onCollections:x}){var le;const[u,m]=$.useState(!0),[c,R]=$.useState(!0),[De,Le]=$.useState(!1),[Me,Ae]=$.useState(!0),Q=l&&!Number.isNaN(Number(l))?Number(l):void 0,V=g&&!Number.isNaN(Number(g))?Number(g):void 0,[y,X]=$.useState({}),ie=Q!=null?Math.min(Q,N):0,ne=V!=null?Math.min(V,N):N,A=y.min??ie,K=y.max??ne,oe=$e(A),Ke=$e(K),ae=a=>a<=0?"":String(a),se=a=>a>=N?"":String(a);function He(a){X(v=>{const q=v.max??ne;return{...v,min:Math.min(ke(a),q)}})}function Ue(a){X(v=>{const q=v.min??ie;return{...v,max:Math.max(ke(a),q)}})}function F(){y.min===void 0&&y.max===void 0||(y.min!==void 0&&f(ae(y.min)),y.max!==void 0&&k(se(y.max)),X({}))}const re=(le=_.find(a=>a.key===i))==null?void 0:le.labelKey,Ge=r?s("categories.collections"):o?Yt(o):re&&i!=="all"?s(re):"",Ye=Q!=null||V!=null?`${l||"0"}-${g||"∞"}`:"",Qe=J.filter(a=>j.includes(a)).map(de).join(", "),Ve=z==="on_sale"?s("filter.onSale"):z==="not_for_sale"?s("filter.notForSale"):"";return e.jsxs($t,{children:[e.jsx(U,{title:s("assets.category"),open:u,onToggle:()=>m(a=>!a),summary:Ge,desktopStatic:!0,children:e.jsx(ot,{category:i,subCategory:o,onCategory:p,onSub:h,hideNames:B,collections:r,onCollections:x})}),e.jsx(H,{}),e.jsxs(U,{title:s("filter.price"),open:c,onToggle:()=>R(a=>!a),summary:Ye,desktopStatic:!0,children:[e.jsxs(Pt,{children:[e.jsxs(je,{children:[e.jsx(Se,{children:s("assets.min")}),e.jsx(Re,{children:e.jsx(ze,{type:"number",min:"0","aria-label":s("assets.minPriceAria"),placeholder:"0",value:y.min!==void 0?ae(y.min):l,onChange:a=>f(a.target.value)})})]}),e.jsx(Et,{children:s("assets.priceTo")}),e.jsxs(je,{children:[e.jsx(Se,{children:s("assets.max")}),e.jsx(Re,{children:e.jsx(ze,{type:"number",min:"0","aria-label":s("assets.maxPriceAria"),placeholder:"0",value:y.max!==void 0?se(y.max):g,onChange:a=>k(a.target.value)})})]})]}),e.jsxs(It,{children:[e.jsx(Bt,{"aria-hidden":!0}),e.jsx(Ft,{minPct:oe,maxPct:Ke,"aria-hidden":!0}),e.jsx(We,{type:"range",min:0,max:Y,value:Z(A),"aria-label":s("assets.minPriceSliderAria"),"aria-valuetext":A.toLocaleString(),"data-on-top":oe>=50?"":void 0,onChange:a=>He(Number(a.target.value)),onPointerUp:F,onKeyUp:F,onBlur:F}),e.jsx(We,{type:"range",min:0,max:Y,value:Z(K),"aria-label":s("assets.maxPriceSliderAria"),"aria-valuetext":K.toLocaleString(),onChange:a=>Ue(Number(a.target.value)),onPointerUp:F,onKeyUp:F,onBlur:F})]}),e.jsxs(Nt,{children:[e.jsxs(Ce,{children:[e.jsx(Te,{name:ce.iconName,"aria-hidden":!0}),A.toLocaleString()]}),e.jsxs(Ce,{children:[e.jsx(Te,{name:ce.iconName,"aria-hidden":!0}),K.toLocaleString()]})]})]}),e.jsx(H,{}),e.jsx(U,{title:s("assets.rarity"),open:De,onToggle:()=>Le(a=>!a),summary:Qe,headerTestId:"sidebar-section-toggle",children:e.jsx(_t,{"data-testid":"rarity-filter",children:J.map(a=>{const v=j.includes(a);return e.jsxs(Ot,{type:"button",selected:v,"aria-pressed":v,onClick:()=>b(a),"data-testid":"rarity-filter-check",children:[e.jsx(Dt,{color:n.rarities[a],children:v?e.jsx(Lt,{name:"check","aria-hidden":!0}):null}),e.jsx(Mt,{selected:v,children:de(a)})]},a)})})}),e.jsx(H,{}),e.jsx(U,{title:s("filter.status"),open:Me,onToggle:()=>Ae(a=>!a),summary:Ve,children:[["all",s("filter.statusAll")],["on_sale",s("filter.onSale")],["not_for_sale",s("filter.notForSale")]].map(([a,v])=>e.jsxs(At,{children:[e.jsx(Kt,{type:"radio",name:"shop-status",checked:z===a,onChange:()=>L(a)}),e.jsx(Ht,{children:v})]},a))}),e.jsx(H,{}),W?e.jsxs(Pe,{"data-testid":"deals-row",children:[e.jsx(Ee,{children:e.jsx(Ie,{children:s("filter.deals")})}),e.jsx(Be,{type:"button",role:"switch",on:!!w,"aria-checked":!!w,"aria-label":s("filter.deals"),"data-testid":"deals-toggle",onClick:()=>W(!w),children:e.jsx(Fe,{on:!!w})})]}):null,e.jsxs(Pe,{children:[e.jsxs(Ee,{children:[e.jsx(Ut,{name:"smart","aria-hidden":!0}),e.jsx(Ie,{children:s("filter.smart")}),e.jsx(Je,{content:s("filter.smartHint"),placement:"bottom",children:e.jsx(Gt,{name:"info",role:"img","aria-label":s("filter.smartHint"),tabIndex:0,"data-testid":"smart-hint"})})]}),e.jsx(Be,{type:"button",role:"switch",on:S,"aria-checked":S,"aria-label":s("filter.smart"),onClick:()=>P(!S),children:e.jsx(Fe,{on:S})})]})]})}export{ot as C,H as D,oi as F,$t as R,Ne as S,ii as a,U as b,_t as c,Ot as d,Dt as e,Lt as f,Mt as g,At as h,Kt as i,Ht as j,ni as k,ei as l,ti as m,Zt as u};
+//# sourceMappingURL=Filters-D5CUPglE.js.map