@dcl/shop 0.7.2-30995616440.commit-c92c0a7 → 0.7.3-30998099552.commit-f7fa6e3

package/_assets/Faq-mPkwptjW.js

@@ -0,0 +1,168 @@
+import{r as h,j as o}from"./react-DehiWSvs.js";import{t as e,s as a,d as r,I as w}from"./index-CzGc0rp2.js";const b=a.section`
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+  font-family: ${e.font.sans};
+
+  &[data-tone='on-dark'] {
+    align-items: center;
+  }
+
+  ${e.media.maxWidth("mobile")} {
+    gap: 24px;
+  }
+`,m=a.h2`
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.167;
+  color: ${e.colors.text2};
+
+  [data-tone='on-dark'] & {
+    font-size: 32px;
+    color: ${e.colors.white};
+    text-align: center;
+  }
+
+  ${e.media.maxWidth("mobile")} {
+    font-size: 18px;
+
+    [data-tone='on-dark'] & {
+      font-size: 24px;
+    }
+  }
+`,k=a.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+`,v=a.div`
+  border-radius: ${e.radius.pill};
+
+  &[data-open='true'] {
+    border-radius: 42px;
+    overflow: hidden;
+    border: 0.5px solid ${e.colors.text2};
+  }
+
+  [data-tone='on-dark'] &[data-open='true'] {
+    background: rgba(0, 0, 0, 0.1);
+    /* 1px when open, 0.5px closed — the design thickens the outline as the row takes over the page. */
+    border: 1px solid ${e.colors.white};
+  }
+`,$=a.button`
+  appearance: none;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 24px;
+  border: none;
+  border-radius: inherit;
+  background: rgba(0, 0, 0, 0.05);
+  font-family: inherit;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.43;
+  /* Gray 0 closed, Soft Black 2 open: the question darkens as it becomes the heading of a section. */
+  color: ${e.colors.gray0};
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    box-shadow 120ms ease,
+    color 120ms ease;
+
+  &[data-open='true'] {
+    color: ${e.colors.text2};
+    /* The header keeps square bottom corners while the answer sits under it. */
+    border-radius: 42px 42px 0 0;
+  }
+
+  /* No hover variant exists for the light mode in the design, so this is the smallest honest reading of
+     one: the same fill, a step darker. Inventing the dark mode's 3px white ring here would have put a
+     border on a row that has none. */
+  &:hover {
+    background: rgba(0, 0, 0, 0.08);
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${e.colors.text2};
+    outline-offset: 2px;
+  }
+
+  [data-tone='on-dark'] & {
+    background: rgba(0, 0, 0, 0.1);
+    border: 0.5px solid ${e.colors.white};
+    color: ${e.colors.white};
+  }
+
+  /* On hover the dark skin deepens its fill and takes its outline from 0.5px to 3px.
+     The extra 2.5px is an INSET SHADOW, not a fatter border. border-box keeps the outer box fixed, but
+     height here is auto — content + padding + BORDER — so growing the border 0.5px → 3px added 5px of
+     height and shoved every row below it down as the pointer crossed. A box-shadow takes no part in
+     layout, so the stroke thickens inward from the same outer edge and nothing moves. (The pack cards
+     hit this same trap and solve it with a masked pseudo-element; they need one because their stroke is a
+     gradient, which a border cannot paint. This one is flat white, so the shadow is enough.)
+     0.5 + 2.5 = the designed 3px. */
+  [data-tone='on-dark'] &:hover {
+    background: rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 0 2.5px ${e.colors.white};
+  }
+
+  /* border-color, not "border: none": dropping the border outright would take its 0.5px out of the
+     height as well, so opening a row would nudge it by 1px on top of the answer appearing. The background
+     paints under the border area (background-clip defaults to border-box), so the transparent hairline
+     shows this header's own fill, not the shell behind it. */
+  [data-tone='on-dark'] &[data-open='true'] {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  [data-tone='on-dark'] &:focus-visible {
+    outline-color: ${e.colors.white};
+  }
+
+  ${e.media.maxWidth("mobile")} {
+    padding: 16px;
+    font-size: 16px;
+  }
+`,q=a.span`
+  flex: 1 0 0;
+  min-width: 0;
+  /* The design sets the question nowrap at 1423px, where every one of them fits on a line. At the Shop's
+     widths they do not, so wrapping is the faithful reading of the intent — a clipped question is not. */
+  overflow-wrap: break-word;
+`,j=a.span`
+  flex-shrink: 0;
+  display: flex;
+  transition: transform 160ms ease;
+
+  &[data-open='false'] {
+    transform: rotate(180deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`,y=a.div`
+  padding: 32px 24px;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: ${e.colors.text2};
+  /* The answers are authored as one string with a newline where the design breaks the line. Two <p>s with
+     no margin between them render as two lines, which is what this is — keeping it one translatable string
+     rather than splitting every answer into numbered halves. */
+  white-space: pre-line;
+
+  [data-tone='on-dark'] & {
+    color: ${e.colors.white};
+  }
+
+  ${e.media.maxWidth("mobile")} {
+    padding: 20px 16px;
+    font-size: 16px;
+  }
+`;function I({title:l,entries:p,tone:c="light",className:x}){const[u,g]=h.useState(()=>new Set),s=h.useId();function f(t){g(n=>{const i=new Set(n);return i.delete(t)||i.add(t),i})}return o.jsxs(b,{className:x,"data-tone":c,"data-testid":"faq",children:[o.jsx(m,{children:r(l)}),o.jsx(k,{children:p.map(t=>{const n=u.has(t.question),i=`${s}-panel-${t.question}`,d=`${s}-header-${t.question}`;return o.jsxs(v,{"data-open":n,"data-testid":"faq-item",children:[o.jsxs($,{type:"button",onClick:()=>f(t.question),id:d,"aria-expanded":n,"aria-controls":n?i:void 0,"data-open":n,"data-testid":"faq-question",children:[o.jsx(q,{children:r(t.question)}),o.jsx(j,{"data-open":n,"aria-hidden":!0,children:o.jsx(w,{name:"chevron-up-line",size:36})})]}),n&&o.jsx(y,{id:i,role:"region","aria-labelledby":d,"data-testid":"faq-answer",children:r(t.answer)})]},t.question)})})]})}export{I as F};