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

Welcome to the STIHL Design System react component library.

"use client";
import { jsx as p, jsxs as G } from "react/jsx-runtime";
import { d as ve } from "./index.cKLI89Eg.js";
import { c as N } from "./index.DQOqod3i.js";
import { forwardRef as Ce, useRef as We, useState as ze, useImperativeHandle as De, useEffect as ge } from "react";
import { DSHeading as Ne } from "../heading.BHSklXho.js";
import { D as Oe } from "./Icon.DYtaQgbw.js";
import { NumberIndicator as be } from "../numberindicator.DsK65Bj3.js";
import { g as J } from "./helpers.CexwVao7.js";
import '../assets/Accordion.RlqWqpGo.css';const xe = "ds-accordion_details_zfwi3_1", Ae = "ds-accordion_details--dark_zfwi3_112", Ie = "ds-accordion_summary_zfwi3_241", Ee = "ds-accordion_summary--utility--m_zfwi3_280", Te = "ds-accordion_summary--dark_zfwi3_309", Xe = "ds-accordion_summary--flush_zfwi3_348", Fe = "ds-accordion_summary--small_zfwi3_460", ke = "ds-accordion_summary--x-small_zfwi3_464", Pe = "ds-accordion_summary-content-wrapper_zfwi3_469", Re = "ds-accordion_summary-content-wrapper--flush_zfwi3_475", Le = "ds-accordion_summary-content-wrapper--chevron-left_zfwi3_479", je = "ds-accordion_summary-content-wrapper--x-small_zfwi3_483", Me = "ds-accordion_heading-summary-wrapper_zfwi3_487", He = "ds-accordion_heading-summary_zfwi3_487", Ue = "ds-accordion_heading-summary--x-small_zfwi3_497", qe = "ds-accordion_hint_zfwi3_501", Ve = "ds-accordion_icon_zfwi3_515", Ze = "ds-accordion_icon--open_zfwi3_526", $e = "ds-accordion_icon--open-caret_zfwi3_537", Be = "ds-accordion_content-wrapper_zfwi3_549", Ge = "ds-accordion_content-wrapper--flush_zfwi3_555", Je = "ds-accordion_content-wrapper--small_zfwi3_559", Ke = "ds-accordion_content-wrapper--x-small_zfwi3_563", t = {
  details: xe,
  detailsDark: Ae,
  summary: Ie,
  summaryUtilityM: Ee,
  summaryDark: Te,
  summaryFlush: Xe,
  summarySmall: Fe,
  summaryXSmall: ke,
  summaryContentWrapper: Pe,
  summaryContentWrapperFlush: Re,
  summaryContentWrapperChevronLeft: Le,
  summaryContentWrapperXSmall: je,
  headingSummaryWrapper: Me,
  headingSummary: He,
  headingSummaryXSmall: Ue,
  hint: qe,
  icon: Ve,
  iconOpen: Ze,
  iconOpenCaret: $e,
  contentWrapper: Be,
  contentWrapperFlush: Ge,
  contentWrapperSmall: Je,
  contentWrapperXSmall: Ke
}, ct = ["medium", "small", "x-small"], lt = ["chevron", "caret"], mt = ["left", "right"], Qe = ({
  children: O,
  hint: K,
  numberIndicatorValue: e,
  numberIndicatorAriaLabel: a,
  summary: i
}) => {
  if (!O)
    throw new Error(J("DSAccordion", "The component requires children to be set."));
  if (!i)
    throw new Error(J("DSAccordion", "The summary prop is required. Please add the summary prop to the DSAccordion component."));
  if (K && (e || e === ""))
    throw new Error(J("DSAccordion", "The hint and numberIndicator props cannot be used together. Please remove either the hint prop or the numberIndicatorValue prop."));
  (e || e === "") && !a && console.warn(J("DSAccordion", "Please provide a descriptive aria-label for the Number Indicator for better accessibility."));
}, Ye = Ce((O, K) => {
  const e = ve.c(83);
  let a, i, c, m, n, u, f, r, b, x, A, I, E;
  e[0] !== O ? ({
    children: a,
    summary: r,
    chevronPosition: b,
    className: i,
    hint: c,
    isFlush: x,
    isOpen: A,
    numberIndicatorValue: n,
    numberIndicatorAriaLabel: m,
    size: I,
    theme: E,
    onToggle: u,
    ...f
  } = O, e[0] = O, e[1] = a, e[2] = i, e[3] = c, e[4] = m, e[5] = n, e[6] = u, e[7] = f, e[8] = r, e[9] = b, e[10] = x, e[11] = A, e[12] = I, e[13] = E) : (a = e[1], i = e[2], c = e[3], m = e[4], n = e[5], u = e[6], f = e[7], r = e[8], b = e[9], x = e[10], A = e[11], I = e[12], E = e[13]);
  const _e = b === void 0 ? "right" : b, o = x === void 0 ? !1 : x, d = A === void 0 ? !1 : A, h = I === void 0 ? "medium" : I, s = E === void 0 ? "light" : E;
  process.env.NODE_ENV !== "production" && Qe({
    children: a,
    hint: c,
    numberIndicatorValue: n,
    numberIndicatorAriaLabel: m,
    summary: r
  });
  const _ = s === "dark", Q = _e === "right" ? "chevron" : "caret", l = We(null), [ye, Se] = ze(d);
  let X;
  e[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (X = () => l.current, e[14] = X) : X = e[14], De(K, X);
  let F;
  e[15] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (F = () => {
    l.current && Se(l.current.open);
  }, e[15] = F) : F = e[15];
  let k;
  e[16] !== d ? (k = [d], e[16] = d, e[17] = k) : k = e[17], ge(F, k);
  let P, R;
  e[18] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (R = () => {
    const we = () => {
      l.current && Se(l.current.open);
    };
    return l.current?.addEventListener("toggle", we), () => {
      l.current?.removeEventListener("toggle", we);
    };
  }, P = [], e[18] = P, e[19] = R) : (P = e[18], R = e[19]), ge(R, P);
  let L, j, M;
  const T = typeof r == "object" && r !== void 0;
  T && ({
    headingSize: L,
    headingTag: j,
    headingText: M
  } = r);
  let H;
  e[20] !== i || e[21] !== _ ? (H = N(t.details, i, {
    [t.detailsDark]: _
  }), e[20] = i, e[21] = _, e[22] = H) : H = e[22];
  const Y = H, ee = h === "small", te = h === "x-small", re = !T;
  let U;
  e[23] !== _ || e[24] !== o || e[25] !== ee || e[26] !== te || e[27] !== re ? (U = N(t.summary, {
    [t.summaryDark]: _,
    [t.summaryFlush]: o,
    [t.summarySmall]: ee,
    [t.summaryXSmall]: te,
    [t.summaryUtilityM]: re
  }), e[23] = _, e[24] = o, e[25] = ee, e[26] = te, e[27] = re, e[28] = U) : U = e[28];
  const se = U, ae = _e === "left", ne = h === "x-small";
  let q;
  e[29] !== o || e[30] !== ae || e[31] !== ne ? (q = N(t.summaryContentWrapper, {
    [t.summaryContentWrapperFlush]: o,
    [t.summaryContentWrapperChevronLeft]: ae,
    [t.summaryContentWrapperXSmall]: ne
  }), e[29] = o, e[30] = ae, e[31] = ne, e[32] = q) : q = e[32];
  const oe = q, ie = h === "x-small";
  let V;
  e[33] !== ie ? (V = N(t.headingSummary, {
    [t.headingSummaryXSmall]: ie
  }), e[33] = ie, e[34] = V) : V = e[34];
  const ce = V, le = Q === "chevron" && ye, me = Q === "caret" && ye;
  let Z;
  e[35] !== le || e[36] !== me ? (Z = N(t.icon, {
    [t.iconOpen]: le,
    [t.iconOpenCaret]: me
  }), e[35] = le, e[36] = me, e[37] = Z) : Z = e[37];
  const de = Z, pe = h === "small", ue = h === "x-small";
  let $;
  e[38] !== o || e[39] !== pe || e[40] !== ue ? ($ = N(t.contentWrapper, {
    [t.contentWrapperFlush]: o,
    [t.contentWrapperSmall]: pe,
    [t.contentWrapperXSmall]: ue
  }), e[38] = o, e[39] = pe, e[40] = ue, e[41] = $) : $ = e[41];
  const fe = $;
  let y;
  e[42] !== L || e[43] !== j || e[44] !== M || e[45] !== T || e[46] !== r || e[47] !== s ? (y = T ? /* @__PURE__ */ p(Ne, { tag: j, size: L, theme: s, children: M }) : r, e[42] = L, e[43] = j, e[44] = M, e[45] = T, e[46] = r, e[47] = s, e[48] = y) : y = e[48];
  let S;
  e[49] !== m || e[50] !== n || e[51] !== s ? (S = (n || n?.trim() === "") && /* @__PURE__ */ p("div", { children: /* @__PURE__ */ p(be, { "aria-label": m, label: n, theme: s }) }), e[49] = m, e[50] = n, e[51] = s, e[52] = S) : S = e[52];
  let w;
  e[53] !== ce || e[54] !== y || e[55] !== S ? (w = /* @__PURE__ */ G("div", { className: ce, children: [
    y,
    S
  ] }), e[53] = ce, e[54] = y, e[55] = S, e[56] = w) : w = e[56];
  let g;
  e[57] !== c ? (g = c && /* @__PURE__ */ p("div", { className: t.hint, children: c }), e[57] = c, e[58] = g) : g = e[58];
  let v;
  e[59] !== w || e[60] !== g ? (v = /* @__PURE__ */ G("div", { className: t.headingSummaryWrapper, children: [
    w,
    g
  ] }), e[59] = w, e[60] = g, e[61] = v) : v = e[61];
  const he = Q === "chevron" ? "chevron-down" : "caret-right";
  let C;
  e[62] !== de || e[63] !== he || e[64] !== s ? (C = /* @__PURE__ */ p(Oe, { name: he, "aria-hidden": "true", className: de, theme: s }), e[62] = de, e[63] = he, e[64] = s, e[65] = C) : C = e[65];
  let W;
  e[66] !== oe || e[67] !== v || e[68] !== C ? (W = /* @__PURE__ */ G("div", { className: oe, children: [
    v,
    C
  ] }), e[66] = oe, e[67] = v, e[68] = C, e[69] = W) : W = e[69];
  let z;
  e[70] !== se || e[71] !== W ? (z = /* @__PURE__ */ p("summary", { className: se, children: W }), e[70] = se, e[71] = W, e[72] = z) : z = e[72];
  let D;
  e[73] !== a || e[74] !== fe ? (D = /* @__PURE__ */ p("div", { className: fe, children: a }), e[73] = a, e[74] = fe, e[75] = D) : D = e[75];
  let B;
  return e[76] !== Y || e[77] !== d || e[78] !== u || e[79] !== f || e[80] !== z || e[81] !== D ? (B = /* @__PURE__ */ G("details", { ...f, ref: l, className: Y, open: d, onToggle: u, children: [
    z,
    D
  ] }), e[76] = Y, e[77] = d, e[78] = u, e[79] = f, e[80] = z, e[81] = D, e[82] = B) : B = e[82], B;
});
Ye.displayName = "DSAccordion";
export {
  lt as A,
  mt as C,
  Ye as D,
  ct as a,
  Qe as v
};