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

package/_assets/Filters-BipHXxnJ.js

@@ -1,823 +0,0 @@
-import{r as S,j as e}from"./react-EC0gZ8rD.js";import{s as t,a as i,I as P,n as qe,t as n,av as ce,C as de}from"./index-CUIg8HdV.js";import{f as U,g as Qe}from"./browseLayout.styles-Dphi8OG5.js";import{n as W,T as Xe}from"./Tooltip-CAbr028E.js";import{T as Je}from"./skeleton.styles-Df0jIOwp.js";(function(){try{var a=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},r=new a.Error().stack;r&&(a._sentryDebugIds=a._sentryDebugIds||{},a._sentryDebugIds[r]="ab0420d0-8558-4b25-bc6c-07b780c39491",a._sentryDebugIdIdentifier="sentry-dbid-ab0420d0-8558-4b25-bc6c-07b780c39491")}catch{}})();function Jt(a){const r=S.useRef(null);S.useEffect(()=>{const p=r.current;r.current=a,!(p===null||p===a)&&window.scrollTo({top:0,left:0,behavior:"instant"})},[a])}const{colors:z,font:Z}=i,Ze=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;
-`,ee=qe`
-  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`
-  ${ee};
-
-  /* Selected only: being open is signalled by the rotated chevron, not by tinting the row. */
-  &[data-selected] {
-    background: rgba(255, 255, 255, 0.14);
-  }
-`,et=t.button`
-  ${ee};
-  padding-left: 24px;
-
-  &[data-active] {
-    background: rgba(255, 255, 255, 0.16);
-  }
-  &[data-active] [data-sub-label] {
-    color: ${z.white};
-    font-weight: 600;
-  }
-
-  /* The chevron tracks the row's label: gray4 at rest, white on hover and while selected. */
-  [data-chevron] {
-    color: ${z.gray4};
-  }
-  &:hover [data-chevron],
-  &[data-active] [data-chevron] {
-    color: ${z.white};
-  }
-`,tt=t.button`
-  ${ee};
-  padding-left: 48px;
-
-  &[data-active] {
-    background: ${z.rarityBg};
-  }
-  &[data-active] [data-sub-label] {
-    color: ${z.rarity};
-    font-weight: 600;
-  }
-`,ge=t.span`
-  font-family: ${Z.sans};
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 1.57;
-  color: ${z.softWhite};
-`,fe=t.span`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-`,be=t(P)`
-  width: 24px;
-  height: 24px;
-  color: ${z.gray4};
-`,me=t.span`
-  font-family: ${Z.sans};
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.5;
-  color: ${z.gray4};
-`,it=t.p`
-  font-family: ${Z.sans};
-  font-weight: 600;
-  font-size: 13px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: ${z.gray4};
-  margin: 0 0 4px;
-  padding: 8px 16px 0;
-`,te=[{key:"all",labelKey:"categories.shopAll"},{key:"wearable",labelKey:"categories.wearables",expandable:!0,subs:[{key:"Head",labelKey:"categories.head",icon:"cat-head",expandable:!0,subs:[{key:"Facial Hair",labelKey:"categories.facialHair",icon:"cat-facial-hair"},{key:"Hair",labelKey:"categories.hair",icon:"cat-hair"},{key:"Eyes",labelKey:"categories.eyes",icon:"cat-eyes"},{key:"Eyebrows",labelKey:"categories.eyebrows",icon:"cat-eyebrows"},{key:"Mouth",labelKey:"categories.mouth",icon:"cat-mouth"}]},{key:"Upper Body",labelKey:"categories.upperBody",icon:"cat-upper"},{key:"Handwear",labelKey:"categories.handwear",icon:"cat-handwear"},{key:"Lower Body",labelKey:"categories.lowerBody",icon:"cat-lower"},{key:"Feet",labelKey:"categories.feet",icon:"cat-feet"},{key:"Accessories",labelKey:"categories.accessories",icon:"cat-accessories",expandable:!0,subs:[{key:"Earring",labelKey:"categories.earring",icon:"cat-earring"},{key:"Eyewear",labelKey:"categories.eyewear",icon:"cat-eyewear"},{key:"Hat",labelKey:"categories.hat",icon:"cat-hat"},{key:"Helmet",labelKey:"categories.helmet",icon:"cat-helmet"},{key:"Mask",labelKey:"categories.mask",icon:"cat-mask"},{key:"Tiara",labelKey:"categories.tiara",icon:"cat-tiara"},{key:"Top Head",labelKey:"categories.topHead",icon:"cat-top-head"}]},{key:"Skins",labelKey:"categories.skins",icon:"cat-skins"}]},{key:"emote",labelKey:"categories.emotes",expandable:!0,subs:[{key:"Dance",labelKey:"categories.dance",icon:"emote-dance"},{key:"Stunt",labelKey:"categories.stunt",icon:"emote-stunt"},{key:"Greetings",labelKey:"categories.greetings",icon:"emote-greetings"},{key:"Fun",labelKey:"categories.fun",icon:"emote-fun"},{key:"Poses",labelKey:"categories.poses",icon:"emote-poses"},{key:"Reactions",labelKey:"categories.reactions",icon:"emote-reactions"},{key:"Horror",labelKey:"categories.horror",icon:"emote-horror"},{key:"Miscellaneous",labelKey:"categories.miscellaneous",icon:"emote-misc"}]},{key:"names",labelKey:"categories.names"}];function at({category:a,subCategory:r,onCategory:p,onSub:h,title:d,flat:u=!1,collections:g=!1,onCollections:k,hideAll:$=!1,hideNames:b=!1,extraLabelKey:K="categories.collections"}){const[H,R]=S.useState(()=>a==="wearable"?"wearable":null),[T,v]=S.useState(null);function C(s){h(r===s.key?null:s.key),s.subs&&v(m=>m===s.key?null:s.key)}function B(s){s.subs?R(m=>{const x=m!==s.key;return x&&p(s.key),x?s.key:null}):(p(s.key),R(null))}return e.jsxs(Ze,{"data-flat":u||void 0,children:[d?e.jsx(it,{children:d}):null,te.filter(s=>!($&&s.key==="all")&&!(b&&s.key==="names")).map(s=>{const m=H===s.key&&!!s.subs,x=!g&&s.key===a&&!r;return e.jsxs(pe,{children:[e.jsxs(ue,{type:"button","data-cat":!0,"data-expanded":m||void 0,"data-selected":x||void 0,onClick:()=>B(s),children:[e.jsx(ge,{children:n(s.labelKey)}),s.expandable?e.jsx(U,{up:m,size:24,color:i.colors.softWhite}):null]}),s.subs?e.jsx(he,{"data-open":m||void 0,children:e.jsx(xe,{children:s.subs.map(f=>{const c=T===f.key&&!!f.subs;return e.jsxs("div",{children:[e.jsxs(et,{type:"button","data-sub":!0,"data-active":r===f.key||void 0,onClick:()=>C(f),children:[e.jsxs(fe,{children:[e.jsx(be,{name:f.icon,"aria-hidden":!0}),e.jsx(me,{"data-sub-label":!0,children:n(f.labelKey)})]}),f.expandable?e.jsx(U,{up:c,size:24,"data-chevron":!0}):null]}),f.subs?e.jsx(he,{"data-open":c||void 0,children:e.jsx(xe,{children:f.subs.map(j=>e.jsx(tt,{type:"button","data-sub":!0,"data-active":r===j.key||void 0,onClick:()=>h(r===j.key?null:j.key),children:e.jsxs(fe,{children:[e.jsx(be,{name:j.icon,"aria-hidden":!0}),e.jsx(me,{"data-sub-label":!0,children:n(j.labelKey)})]})},j.key))})}):null]},f.key)})})}):null]},s.key)}),k?e.jsx(pe,{children:e.jsx(ue,{type:"button","data-cat":!0,"data-testid":"filter-collections","data-selected":g||void 0,onClick:k,children:e.jsx(ge,{children:n(K)})})}):null]})}const{colors:N}=i,ot=t.div`
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  z-index: 36;
-  background: ${N.white};
-  border: 1px solid ${N.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;
-  }
-`,nt=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: ${N.accent};
-    width: 15px;
-    height: 15px;
-  }
-`;t.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  & input {
-    width: 100%;
-    border: 1px solid ${N.lineStrong};
-    border-radius: 10px;
-    padding: 8px 10px;
-    font-size: 14px;
-  }
-  & input:focus {
-    outline: 0;
-    border-color: ${N.accent};
-  }
-  & input::-webkit-outer-spin-button,
-  & input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-`;t.p`
-  margin: 8px 2px 0;
-  color: ${N.muted};
-  font-size: 12px;
-`;const{colors:l,media:_,radius:rt}=i,st=t.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 20px;
-`,lt=t.span`
-  order: 1;
-  color: ${l.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). */
-  ${_.maxWidth("lg")} {
-    order: 1;
-    flex: 0 0 auto;
-    font-size: 12px;
-    line-height: 1;
-    color: ${l.gray4};
-  }
-`,ct=t.div`
-  order: 2;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-
-  ${_.maxWidth("lg")} {
-    order: 4;
-    flex-basis: 100%;
-    gap: 4px;
-  }
-`,dt=t.button`
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 6px 8px 6px 12px;
-  border: 0;
-  border-radius: ${rt.pill};
-  background: ${l.chipDark};
-  color: ${l.white};
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 1.43;
-  white-space: nowrap;
-  cursor: pointer;
-
-  ${_.maxWidth("lg")} {
-    font-size: 10px;
-  }
-
-  &:hover {
-    background: ${l.text};
-  }
-  &:focus-visible {
-    outline: 2px solid ${l.accent};
-    outline-offset: 2px;
-  }
-`,pt=t(P)`
-  width: 14px;
-  height: 14px;
-  color: ${l.white};
-`,ye=t.button`
-  padding: 0 4px;
-  background: none;
-  border: 0;
-  color: ${l.gray4};
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 1.43;
-  text-decoration: underline;
-  white-space: nowrap;
-  cursor: pointer;
-
-  &:hover {
-    color: ${l.white};
-  }
-
-  &:focus-visible {
-    outline: 2px solid ${l.accent};
-    outline-offset: 2px;
-  }
-`,ht=t.div`
-  flex: 0 1 405px;
-  min-width: 200px;
-
-  ${_.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;
-  }
-`,xt=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;
-  }
-
-  ${_.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 ${l.softWhite};
-      color: ${l.softWhite};
-      background: ${l.glassFaint};
-      font-size: 12px;
-      font-weight: 500;
-      text-transform: none;
-      gap: 4px;
-    }
-  }
-`,ut=t.button`
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  height: 36px;
-  padding: 8px 8px 8px 12px;
-  background: ${l.glassFaint};
-  border: 1px solid ${l.softWhite};
-  border-radius: 32px;
-  color: ${l.softWhite};
-  font-weight: 500;
-  font-size: 12px;
-  line-height: 1.43;
-  white-space: nowrap;
-  cursor: pointer;
-
-  ${_.minWidth("lg")} {
-    display: none;
-  }
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.12);
-  }
-  &:focus-visible {
-    outline: 2px solid ${l.accent};
-    outline-offset: 2px;
-  }
-`,gt=t(P)`
-  width: 20px;
-  height: 20px;
-  color: #ecebed;
-`,ft=t.div`
-  order: 2;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`,bt=t.div`
-  position: relative;
-`,mt=t.button`
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  background: none;
-  border: 0;
-  padding: 8px 10px;
-  border-radius: 8px;
-  color: ${l.gray4};
-  font-weight: 600;
-  font-size: 14px;
-  white-space: nowrap;
-  cursor: pointer;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: ${l.white};
-  }
-  &[data-open],
-  &[data-active] {
-    color: ${l.white};
-  }
-  &:focus-visible {
-    outline: 2px solid ${l.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: ${l.accent};
-  color: ${l.white};
-  font-size: 11px;
-  font-weight: 700;
-`,wt=t.div`
-  position: fixed;
-  inset: 0;
-  z-index: 34;
-`,X=["common","uncommon","epic","rare","legendary","exotic","mythic","unique"],Fe=[{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"}],Zt={key:"relevance",label:"filterBar.sortRelevance",server:"relevance"},ei=[{key:"discount",label:"filterBar.sortBiggestDiscount",server:"discount"},...Fe];function kt({panelKey:a,label:r,active:p,badge:h,panel:d,children:u}){const g=d.open===a;return e.jsxs(bt,{children:[e.jsxs(mt,{type:"button","data-open":g||void 0,"data-active":p||void 0,onClick:()=>d.toggle(a),children:[r," ",h?e.jsx(yt,{children:h}):null," ",e.jsx(U,{up:g,size:24,color:i.colors.text2})]}),g?u:null]})}function ti({sort:a,onSort:r,sortOptions:p=Fe,total:h,loading:d,query:u,onOpenFilters:g,chips:k,onClearChips:$,rarities:b,onToggleRarity:K,rarityOptions:H=X,anyActive:R,onClear:T,renderLeading:v,renderTrailing:C,search:B}){const[s,m]=S.useState(null),x={open:s,toggle:c=>m(j=>j===c?null:c),close:()=>m(null)},f=!!K||!!v||!!C;return e.jsxs(e.Fragment,{children:[s?e.jsx(wt,{onClick:x.close,"aria-hidden":!0}):null,e.jsxs(st,{"data-testid":"browse-toolbar",children:[e.jsx(lt,{"data-testid":"browse-count","aria-busy":d||void 0,children:d?e.jsx(Je,{className:"skeleton",width:72,"data-testid":"browse-count-skeleton","aria-hidden":!0}):e.jsxs(e.Fragment,{children:[n("filterBar.count",{count:h}),u?` ${n("filterBar.forQuery",{query:u})}`:""]})}),k&&k.length?e.jsxs(ct,{"data-testid":"filter-chips",children:[k.map(c=>e.jsxs(dt,{type:"button",onClick:c.onRemove,"aria-label":n("filterBar.removeFilter",{filter:c.label}),children:[e.jsx("span",{children:c.label}),e.jsx(pt,{name:"close","aria-hidden":!0})]},c.key)),$?e.jsx(ye,{type:"button",onClick:$,children:n("filterBar.clearAll")}):null]}):null,f?e.jsxs(ft,{children:[v==null?void 0:v(x),K?e.jsx(kt,{panelKey:"rarity",label:n("filterBar.rarity"),active:((b==null?void 0:b.length)??0)>0,badge:(b==null?void 0:b.length)||void 0,panel:x,children:e.jsx(ot,{"data-variant":"rarity",children:H.map(c=>e.jsxs(nt,{children:[e.jsx("input",{type:"checkbox",checked:(b==null?void 0:b.includes(c))??!1,onChange:()=>K(c)}),e.jsx("span",{children:c})]},c))})}):null,C==null?void 0:C(x),R?e.jsx(ye,{type:"button",onClick:()=>{T==null||T(),x.close()},children:n("filterBar.clearAll")}):null]}):null,e.jsxs(xt,{children:[B?e.jsx(ht,{children:B}):null,e.jsx(Qe,{label:n("filterBar.sortBy"),ariaLabel:n("filterBar.sortBy"),value:a,options:p.map(c=>({value:c.key,label:n(c.label)})),onChange:r,align:"right",open:x.open==="sort",onOpenChange:c=>c?x.toggle("sort"):x.close()}),g?e.jsxs(ut,{type:"button","data-testid":"open-filters",onClick:g,children:[n("filterBar.filters"),e.jsx(gt,{name:"filter","aria-hidden":!0})]}):null]})]})]})}const I=1e5,D=900,E=90,G=E*2,Ie=D/E,Ne=I-D,we=100;function ke(a){const r=Math.max(0,Math.min(Math.round(a),G));if(r<=E)return r*Ie;const p=D+(r-E)/E*Ne;return Math.round(p/we)*we}function J(a){const r=Math.max(0,Math.min(a,I));return r<=D?Math.round(r/Ie):E+Math.round((r-D)/Ne*E)}function ve(a){return J(a)/G*100}const vt=t.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-`,A=t.div`
-  height: 1px;
-  background: rgba(255, 255, 255, 0.25);
-  width: 100%;
-`,$t=t.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`,jt=t("button",W("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: ${i.colors.softWhite};
-  text-align: left;
-  cursor: pointer;
-
-  ${i.media.maxWidth("lg")} {
-    height: 52px;
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      background: rgba(255, 255, 255, 0.08);
-    }
-  }
-  &:focus-visible {
-    outline: 2px solid ${i.colors.accent};
-    outline-offset: 2px;
-  }
-
-  ${({desktopStatic:a})=>a?`${i.media.minWidth("lg")} {
-          cursor: default;
-          &:hover { background: transparent; }
-        }`:""}
-`,St=t.span`
-  font-family: ${i.font.sans};
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 1.43;
-  color: ${i.colors.softWhite};
-
-  ${i.media.maxWidth("lg")} {
-    font-size: 16px;
-  }
-`,Kt=t.span`
-  display: inline-flex;
-  ${i.media.minWidth("lg")} {
-    display: none;
-  }
-`,Rt=t("p",W("desktopHidden"))`
-  margin: 0;
-  padding: 0 4px 4px;
-  font-family: ${i.font.sans};
-  font-weight: 400;
-  font-size: 12px;
-  line-height: normal;
-  color: ${i.colors.gray4};
-  text-transform: capitalize;
-
-  ${({desktopHidden:a})=>a?`${i.media.minWidth("lg")} { display: none; }`:""}
-`,Ct=t("div",W("open","desktopStatic"))`
-  display: grid;
-  grid-template-rows: ${({open:a})=>a?"1fr":"0fr"};
-  transition: grid-template-rows 0.22s ease;
-
-  ${({desktopStatic:a})=>a?`${i.media.minWidth("lg")} { grid-template-rows: 1fr; }`:""}
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-`,zt=t.div`
-  overflow: hidden;
-  min-height: 0;
-`,Wt=t.div`
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  gap: 6px;
-  padding: 8px 4px 0;
-`,$e=t.label`
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  flex-direction: column;
-  gap: 4px;
-`,je=t.span`
-  font-family: ${i.font.sans};
-  font-weight: 400;
-  font-size: 12px;
-  color: ${i.colors.gray4};
-`,Se=t.span`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  height: 42px;
-  padding: 8px;
-  border: 0.5px solid ${i.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: ${i.colors.orange};
-  }
-`,Ke=t.input`
-  width: 100%;
-  min-width: 0;
-  border: 0;
-  background: none;
-  padding: 0;
-  font-family: ${i.font.sans};
-  font-size: 13px;
-  color: ${i.colors.softWhite};
-
-  &:focus {
-    outline: 0;
-  }
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-`,Tt=t.span`
-  padding-bottom: 12px;
-  color: ${i.colors.softWhite};
-  font-family: ${i.font.sans};
-  font-size: 13px;
-`,Et=t.div`
-  position: relative;
-  height: 20px;
-  margin: 24px 4px 0;
-`,Pt=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;
-`,Bt=t("div",W("minPct","maxPct"))`
-  position: absolute;
-  top: 50%;
-  height: 2px;
-  transform: translateY(-50%);
-  left: ${({minPct:a})=>`${a}%`};
-  right: ${({maxPct:a})=>`${100-a}%`};
-  background: ${i.colors.rarity};
-  border-radius: 2px;
-`,Re=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: ${i.colors.white};
-    border: 2px solid ${i.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: ${i.colors.white};
-    border: 2px solid ${i.colors.rarity};
-    box-shadow: 0 1px 3px rgba(22, 21, 24, 0.25);
-    cursor: pointer;
-  }
-`,Ft=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: ${i.font.sans};
-  font-size: 13px;
-  color: ${i.colors.softWhite};
-`,ze=t(P)`
-  width: 16px;
-  height: 16px;
-  color: ${i.colors.softWhite};
-`,It=t.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  padding: 9px 4px 9px 8px;
-
-  ${i.media.maxWidth("lg")} {
-    gap: 12px 16px;
-  }
-`,Nt=t("button",W("selected"))`
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  background: ${({selected:a})=>a?"rgba(0, 0, 0, 0.3)":"transparent"};
-  border: ${({selected:a})=>a?`1px solid ${i.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: ${i.colors.softWhite};
-  }
-  &:focus-visible {
-    outline: 2px solid ${i.colors.accent};
-    outline-offset: 2px;
-  }
-`,_t=t("span",W("color"))`
-  position: relative;
-  width: 16px;
-  height: 16px;
-  border-radius: 4px;
-  background: ${({color:a})=>a};
-  flex: none;
-`,Ht=t(P)`
-  position: absolute;
-  inset: 0;
-  width: 16px;
-  height: 16px;
-  color: ${i.colors.white};
-`,Dt=t("span",W("selected"))`
-  font-family: ${i.font.sans};
-  font-weight: ${({selected:a})=>a?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:a})=>a?i.colors.softWhite:i.colors.media};
-  text-transform: capitalize;
-
-  ${i.media.maxWidth("lg")} {
-    font-size: 14px;
-  }
-`,Mt=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: ${i.colors.dclRed};
-    }
-  }
-`,Ot=t.input`
-  appearance: none;
-  width: 18px;
-  height: 18px;
-  margin: 0;
-  border: 2px solid ${i.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: ${i.colors.dclRed};
-    background: radial-gradient(circle at center, ${i.colors.dclRed} 0 4px, transparent 4.5px);
-  }
-  &:focus-visible {
-    outline: 2px solid ${i.colors.dclRed};
-    outline-offset: 2px;
-  }
-`,At=t.span`
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-family: ${i.font.sans};
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 1.43;
-  color: ${i.colors.gray4};
-`,ii=t.img`
-  width: 1em;
-  height: 1em;
-  flex: none;
-  vertical-align: -0.12em;
-`,We=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. */
-  ${i.media.maxWidth("lg")} {
-    height: 52px;
-  }
-`,Te=t.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-`,Lt=t(P)`
-  width: 14px;
-  height: 14px;
-  color: ${i.colors.softWhite};
-
-  ${i.media.maxWidth("lg")} {
-    width: 16px;
-    height: 16px;
-  }
-`,Ee=t.span`
-  font-family: ${i.font.sans};
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 1.43;
-  color: ${i.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. */
-  ${i.media.maxWidth("lg")} {
-    font-size: 16px;
-  }
-`,Ut=t(P)`
-  width: 12px;
-  height: 12px;
-  color: ${i.colors.muted2};
-`,Pe=t("button",W("on"))`
-  position: relative;
-  width: 24px;
-  height: 14px;
-  padding: 0;
-  border-radius: 100px;
-  border: 0;
-  background: ${({on:a})=>a?i.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 ${i.colors.accent};
-    outline-offset: 2px;
-  }
-
-  /* Bigger, tappable switch on mobile (the 24×14 desktop pill reads as too small on a phone). */
-  ${i.media.maxWidth("lg")} {
-    width: 40px;
-    height: 22px;
-  }
-`,Be=t("span",W("on"))`
-  position: absolute;
-  top: 50%;
-  left: ${({on:a})=>a?"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: ${i.colors.softWhite};
-  box-shadow: 0 1px 2px rgba(22, 21, 24, 0.3);
-  transition: left 0.15s ease;
-
-  ${i.media.maxWidth("lg")} {
-    width: 18px;
-    height: 18px;
-    left: ${({on:a})=>a?"calc(100% - 18px)":"2px"};
-  }
-`;function Gt(a){var r;for(const p of te){const h=(r=p.subs)==null?void 0:r.find(d=>d.key===a);if(h)return n(h.labelKey)}return a}function L({title:a,open:r,onToggle:p,summary:h,desktopStatic:d,headerTestId:u,headerAria:g,children:k}){const $=e.jsx(U,{up:r,size:24,color:i.colors.softWhite});return e.jsxs($t,{children:[e.jsxs(jt,{type:"button",desktopStatic:d,onClick:p,"aria-expanded":r,"aria-label":g,"data-testid":u,children:[e.jsx(St,{children:a}),d?e.jsx(Kt,{children:$}):$]}),!r&&h?e.jsx(Rt,{desktopHidden:d,children:h}):null,e.jsx(Ct,{open:r,desktopStatic:d,children:e.jsx(zt,{children:k})})]})}function ai({category:a,subCategory:r,onCategory:p,onSub:h,priceMin:d,priceMax:u,onPriceMin:g,onPriceMax:k,rarities:$,onToggleRarity:b,status:K,onStatus:H,smart:R,onSmart:T,deals:v,onDeals:C,hideNames:B=!1,collections:s=!1,onCollections:m}){var le;const[x,f]=S.useState(!0),[c,j]=S.useState(!0),[_e,He]=S.useState(!1),[De,Me]=S.useState(!0),Y=d&&!Number.isNaN(Number(d))?Number(d):void 0,V=u&&!Number.isNaN(Number(u))?Number(u):void 0,[y,q]=S.useState({}),ie=Y!=null?Math.min(Y,I):0,ae=V!=null?Math.min(V,I):I,M=y.min??ie,O=y.max??ae,oe=ve(M),Oe=ve(O),ne=o=>o<=0?"":String(o),re=o=>o>=I?"":String(o);function Ae(o){q(w=>{const Q=w.max??ae;return{...w,min:Math.min(ke(o),Q)}})}function Le(o){q(w=>{const Q=w.min??ie;return{...w,max:Math.max(ke(o),Q)}})}function F(){y.min===void 0&&y.max===void 0||(y.min!==void 0&&g(ne(y.min)),y.max!==void 0&&k(re(y.max)),q({}))}const se=(le=te.find(o=>o.key===a))==null?void 0:le.labelKey,Ue=s?n("categories.collections"):r?Gt(r):se&&a!=="all"?n(se):"",Ge=Y!=null||V!=null?`${d||"0"}-${u||"∞"}`:"",Ye=X.filter(o=>$.includes(o)).map(ce).join(", "),Ve=K==="on_sale"?n("filter.onSale"):K==="not_for_sale"?n("filter.notForSale"):"";return e.jsxs(vt,{children:[e.jsx(L,{title:n("assets.category"),open:x,onToggle:()=>f(o=>!o),summary:Ue,desktopStatic:!0,children:e.jsx(at,{category:a,subCategory:r,onCategory:p,onSub:h,hideNames:B,collections:s,onCollections:m})}),e.jsx(A,{}),e.jsxs(L,{title:n("filter.price"),open:c,onToggle:()=>j(o=>!o),summary:Ge,desktopStatic:!0,children:[e.jsxs(Wt,{children:[e.jsxs($e,{children:[e.jsx(je,{children:n("assets.min")}),e.jsx(Se,{children:e.jsx(Ke,{type:"number",min:"0","aria-label":n("assets.minPriceAria"),placeholder:"0",value:y.min!==void 0?ne(y.min):d,onChange:o=>g(o.target.value)})})]}),e.jsx(Tt,{children:n("assets.priceTo")}),e.jsxs($e,{children:[e.jsx(je,{children:n("assets.max")}),e.jsx(Se,{children:e.jsx(Ke,{type:"number",min:"0","aria-label":n("assets.maxPriceAria"),placeholder:"0",value:y.max!==void 0?re(y.max):u,onChange:o=>k(o.target.value)})})]})]}),e.jsxs(Et,{children:[e.jsx(Pt,{"aria-hidden":!0}),e.jsx(Bt,{minPct:oe,maxPct:Oe,"aria-hidden":!0}),e.jsx(Re,{type:"range",min:0,max:G,value:J(M),"aria-label":n("assets.minPriceSliderAria"),"aria-valuetext":M.toLocaleString(),"data-on-top":oe>=50?"":void 0,onChange:o=>Ae(Number(o.target.value)),onPointerUp:F,onKeyUp:F,onBlur:F}),e.jsx(Re,{type:"range",min:0,max:G,value:J(O),"aria-label":n("assets.maxPriceSliderAria"),"aria-valuetext":O.toLocaleString(),onChange:o=>Le(Number(o.target.value)),onPointerUp:F,onKeyUp:F,onBlur:F})]}),e.jsxs(Ft,{children:[e.jsxs(Ce,{children:[e.jsx(ze,{name:de.iconName,"aria-hidden":!0}),M.toLocaleString()]}),e.jsxs(Ce,{children:[e.jsx(ze,{name:de.iconName,"aria-hidden":!0}),O.toLocaleString()]})]})]}),e.jsx(A,{}),e.jsx(L,{title:n("assets.rarity"),open:_e,onToggle:()=>He(o=>!o),summary:Ye,headerTestId:"sidebar-section-toggle",children:e.jsx(It,{"data-testid":"rarity-filter",children:X.map(o=>{const w=$.includes(o);return e.jsxs(Nt,{type:"button",selected:w,"aria-pressed":w,onClick:()=>b(o),"data-testid":"rarity-filter-check",children:[e.jsx(_t,{color:i.rarities[o],children:w?e.jsx(Ht,{name:"check","aria-hidden":!0}):null}),e.jsx(Dt,{selected:w,children:ce(o)})]},o)})})}),e.jsx(A,{}),e.jsx(L,{title:n("filter.status"),open:De,onToggle:()=>Me(o=>!o),summary:Ve,children:[["all",n("filter.statusAll")],["on_sale",n("filter.onSale")],["not_for_sale",n("filter.notForSale")]].map(([o,w])=>e.jsxs(Mt,{children:[e.jsx(Ot,{type:"radio",name:"shop-status",checked:K===o,onChange:()=>H(o)}),e.jsx(At,{children:w})]},o))}),e.jsx(A,{}),C?e.jsxs(We,{"data-testid":"deals-row",children:[e.jsx(Te,{children:e.jsx(Ee,{children:n("filter.deals")})}),e.jsx(Pe,{type:"button",role:"switch",on:!!v,"aria-checked":!!v,"aria-label":n("filter.deals"),"data-testid":"deals-toggle",onClick:()=>C(!v),children:e.jsx(Be,{on:!!v})})]}):null,e.jsxs(We,{children:[e.jsxs(Te,{children:[e.jsx(Lt,{name:"smart","aria-hidden":!0}),e.jsx(Ee,{children:n("filter.smart")}),e.jsx(Xe,{content:n("filter.smartHint"),placement:"bottom",children:e.jsx(Ut,{name:"info",role:"img","aria-label":n("filter.smartHint"),tabIndex:0,"data-testid":"smart-hint"})})]}),e.jsx(Pe,{type:"button",role:"switch",on:R,"aria-checked":R,"aria-label":n("filter.smart"),onClick:()=>T(!R),children:e.jsx(Be,{on:R})})]})]})}export{te as C,A as D,ai as F,X as R,Fe as S,ti as a,vt as b,at as c,L as d,It as e,Nt as f,_t as g,Ht as h,Dt as i,Mt as j,Ot as k,At as l,ii as m,Zt as n,ei as o,Jt as u};
-//# sourceMappingURL=Filters-BipHXxnJ.js.map