@stihl-design-system/components/chunks/Accordion.C5V5IcM-.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsx as l, jsxs as q } from "react/jsx-runtime";
import { d as Se } from "./index.CgTHIF3K.js";
import { c as W } from "./index.CEyLAtio.js";
import { forwardRef as ge, useRef as Ce, useState as ve, useImperativeHandle as We, useEffect as ye } from "react";
import { DSHeading as ke } from "../heading.BXFBZhKv.js";
import { D as Oe } from "./Icon.DGTYCv63.js";
import { NumberIndicator as Ne } from "../numberindicator.Ddf3ESi7.js";
import { g as me } from "./helpers.BbWkXTr3.js";
import '../assets/Accordion.BJb4TOG0.css';const we = "ds-accordion_details_1cikf_1", De = "ds-accordion_summary_1cikf_115", xe = "ds-accordion_summary--utility--m_1cikf_154", Ee = "ds-accordion_summary--flush_1cikf_183", Ae = "ds-accordion_summary--small_1cikf_251", Ie = "ds-accordion_summary--x-small_1cikf_255", Xe = "ds-accordion_summary-content-wrapper_1cikf_260", Fe = "ds-accordion_summary-content-wrapper--flush_1cikf_266", Te = "ds-accordion_summary-content-wrapper--chevron-left_1cikf_270", be = "ds-accordion_summary-content-wrapper--x-small_1cikf_274", Pe = "ds-accordion_heading-summary-wrapper_1cikf_278", Re = "ds-accordion_heading-summary_1cikf_278", Le = "ds-accordion_heading-summary--x-small_1cikf_288", je = "ds-accordion_hint_1cikf_292", ze = "ds-accordion_icon_1cikf_306", Me = "ds-accordion_icon--open_1cikf_317", He = "ds-accordion_icon--open-caret_1cikf_328", Ue = "ds-accordion_content-wrapper_1cikf_340", qe = "ds-accordion_content-wrapper--flush_1cikf_346", Ve = "ds-accordion_content-wrapper--small_1cikf_350", Ze = "ds-accordion_content-wrapper--x-small_1cikf_354", t = {
  details: we,
  summary: De,
  summaryUtilityM: xe,
  summaryFlush: Ee,
  summarySmall: Ae,
  summaryXSmall: Ie,
  summaryContentWrapper: Xe,
  summaryContentWrapperFlush: Fe,
  summaryContentWrapperChevronLeft: Te,
  summaryContentWrapperXSmall: be,
  headingSummaryWrapper: Pe,
  headingSummary: Re,
  headingSummaryXSmall: Le,
  hint: je,
  icon: ze,
  iconOpen: Me,
  iconOpenCaret: He,
  contentWrapper: Ue,
  contentWrapperFlush: qe,
  contentWrapperSmall: Ve,
  contentWrapperXSmall: Ze
}, nt = ["medium", "small", "x-small"], st = ["chevron", "caret"], at = ["left", "right"], $e = ({
  children: k,
  hint: V,
  numberIndicatorValue: e,
  summary: s
}) => {
  if (!k)
    throw new Error(me("DSAccordion", "The component requires children to be set."));
  if (!s)
    throw new Error(me("DSAccordion", "The summary prop is required. Please add the summary prop to the DSAccordion component."));
  if (V && (e || e === ""))
    throw new Error(me("DSAccordion", "The hint and numberIndicator props cannot be used together. Please remove either the hint prop or the numberIndicatorValue prop."));
}, Be = ge((k, V) => {
  const e = Se.c(73);
  let s, m, o, r, p, n, O, N, w, D;
  e[0] !== k ? ({
    children: s,
    summary: n,
    chevronPosition: O,
    className: m,
    hint: o,
    isFlush: N,
    isOpen: w,
    numberIndicatorValue: r,
    size: D,
    ...p
  } = k, e[0] = k, e[1] = s, e[2] = m, e[3] = o, e[4] = r, e[5] = p, e[6] = n, e[7] = O, e[8] = N, e[9] = w, e[10] = D) : (s = e[1], m = e[2], o = e[3], r = e[4], p = e[5], n = e[6], O = e[7], N = e[8], w = e[9], D = e[10]);
  const pe = O === void 0 ? "right" : O, a = N === void 0 ? !1 : N, i = w === void 0 ? !1 : w, d = D === void 0 ? "medium" : D;
  process.env.NODE_ENV !== "production" && $e({
    children: s,
    hint: o,
    numberIndicatorValue: r,
    summary: n
  });
  const Z = pe === "right" ? "chevron" : "caret", c = Ce(null), [de, ue] = ve(i);
  let E;
  e[11] === Symbol.for("react.memo_cache_sentinel") ? (E = () => c.current, e[11] = E) : E = e[11], We(V, E);
  let A;
  e[12] === Symbol.for("react.memo_cache_sentinel") ? (A = () => {
    c.current && ue(c.current.open);
  }, e[12] = A) : A = e[12];
  let I;
  e[13] !== i ? (I = [i], e[13] = i, e[14] = I) : I = e[14], ye(A, I);
  let X, F;
  e[15] === Symbol.for("react.memo_cache_sentinel") ? (X = () => {
    var he;
    const fe = () => {
      c.current && ue(c.current.open);
    };
    return (he = c.current) == null || he.addEventListener("toggle", fe), () => {
      var _e;
      (_e = c.current) == null || _e.removeEventListener("toggle", fe);
    };
  }, F = [], e[15] = X, e[16] = F) : (X = e[15], F = e[16]), ye(X, F);
  let T, b, P;
  const x = typeof n == "object" && n !== void 0;
  x && ({
    headingSize: T,
    headingTag: b,
    headingText: P
  } = n);
  let R;
  e[17] !== m ? (R = W(t.details, m), e[17] = m, e[18] = R) : R = e[18];
  const $ = R, B = d === "small", G = d === "x-small", J = !x;
  let L;
  e[19] !== a || e[20] !== B || e[21] !== G || e[22] !== J ? (L = W(t.summary, {
    [t.summaryFlush]: a,
    [t.summarySmall]: B,
    [t.summaryXSmall]: G,
    [t.summaryUtilityM]: J
  }), e[19] = a, e[20] = B, e[21] = G, e[22] = J, e[23] = L) : L = e[23];
  const K = L, Q = pe === "left", Y = d === "x-small";
  let j;
  e[24] !== a || e[25] !== Q || e[26] !== Y ? (j = W(t.summaryContentWrapper, {
    [t.summaryContentWrapperFlush]: a,
    [t.summaryContentWrapperChevronLeft]: Q,
    [t.summaryContentWrapperXSmall]: Y
  }), e[24] = a, e[25] = Q, e[26] = Y, e[27] = j) : j = e[27];
  const ee = j, te = d === "x-small";
  let z;
  e[28] !== te ? (z = W(t.headingSummary, {
    [t.headingSummaryXSmall]: te
  }), e[28] = te, e[29] = z) : z = e[29];
  const re = z, ne = Z === "chevron" && de, se = Z === "caret" && de;
  let M;
  e[30] !== ne || e[31] !== se ? (M = W(t.icon, {
    [t.iconOpen]: ne,
    [t.iconOpenCaret]: se
  }), e[30] = ne, e[31] = se, e[32] = M) : M = e[32];
  const ae = M, oe = d === "small", ce = d === "x-small";
  let H;
  e[33] !== a || e[34] !== oe || e[35] !== ce ? (H = W(t.contentWrapper, {
    [t.contentWrapperFlush]: a,
    [t.contentWrapperSmall]: oe,
    [t.contentWrapperXSmall]: ce
  }), e[33] = a, e[34] = oe, e[35] = ce, e[36] = H) : H = e[36];
  const ie = H;
  let u;
  e[37] !== T || e[38] !== b || e[39] !== P || e[40] !== x || e[41] !== n ? (u = x ? /* @__PURE__ */ l(ke, { tag: b, size: T, children: P }) : n, e[37] = T, e[38] = b, e[39] = P, e[40] = x, e[41] = n, e[42] = u) : u = e[42];
  let f;
  e[43] !== r ? (f = (r || (r == null ? void 0 : r.trim()) === "") && /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(Ne, { label: r }) }), e[43] = r, e[44] = f) : f = e[44];
  let h;
  e[45] !== re || e[46] !== u || e[47] !== f ? (h = /* @__PURE__ */ q("div", { className: re, children: [
    u,
    f
  ] }), e[45] = re, e[46] = u, e[47] = f, e[48] = h) : h = e[48];
  let _;
  e[49] !== o ? (_ = o && /* @__PURE__ */ l("div", { className: t.hint, children: o }), e[49] = o, e[50] = _) : _ = e[50];
  let y;
  e[51] !== h || e[52] !== _ ? (y = /* @__PURE__ */ q("div", { className: t.headingSummaryWrapper, children: [
    h,
    _
  ] }), e[51] = h, e[52] = _, e[53] = y) : y = e[53];
  const le = Z === "chevron" ? "chevron-down" : "caret-right";
  let S;
  e[54] !== ae || e[55] !== le ? (S = /* @__PURE__ */ l(Oe, { name: le, "aria-hidden": "true", className: ae }), e[54] = ae, e[55] = le, e[56] = S) : S = e[56];
  let g;
  e[57] !== ee || e[58] !== y || e[59] !== S ? (g = /* @__PURE__ */ q("div", { className: ee, children: [
    y,
    S
  ] }), e[57] = ee, e[58] = y, e[59] = S, e[60] = g) : g = e[60];
  let C;
  e[61] !== K || e[62] !== g ? (C = /* @__PURE__ */ l("summary", { className: K, children: g }), e[61] = K, e[62] = g, e[63] = C) : C = e[63];
  let v;
  e[64] !== s || e[65] !== ie ? (v = /* @__PURE__ */ l("div", { className: ie, children: s }), e[64] = s, e[65] = ie, e[66] = v) : v = e[66];
  let U;
  return e[67] !== $ || e[68] !== i || e[69] !== p || e[70] !== C || e[71] !== v ? (U = /* @__PURE__ */ q("details", { ...p, ref: c, className: $, open: i, children: [
    C,
    v
  ] }), e[67] = $, e[68] = i, e[69] = p, e[70] = C, e[71] = v, e[72] = U) : U = e[72], U;
});
Be.displayName = "DSAccordion";
export {
  nt as A,
  at as C,
  Be as D,
  st as a,
  $e as v
};