import { defineComponent as x, useSlots as E, useCssModule as w, ref as y, watch as b, openBlock as a, createElementBlock as c, createElementVNode as s, withKeys as h, withModifiers as C, normalizeClass as _, unref as i, renderSlot as m, Fragment as k, createVNode as l, toDisplayString as M, withDirectives as S, vShow as $, withCtx as z } from "vue";
import { _ as A } from "./Expand.vue_vue_type_script_setup_true_lang-CSzt6UW3.js";
import g from "./Icon.js";
import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const K = {
  class: "stash-accordion rounded border border-ice-500 bg-white",
  "data-test": "stash-accordion"
}, D = ["onKeypress"], I = { key: 0 }, N = { class: "flex-1 select-none font-medium leading-5 text-ice-900" }, V = { class: "mx-[18px] border-ice-200" }, j = {
  class: "stash-accordion__content p-[18px]",
  "data-test": "stash-accordion|content"
}, F = /* @__PURE__ */ x({
  __name: "Accordion",
  props: {
    icon: { default: "circle-info" },
    title: { default: void 0 },
    isExpanded: { type: Boolean, default: !1 }
  },
  emits: ["toggle", "open", "close"],
  setup(f, { emit: v }) {
    const t = f, d = E(), r = v, p = w();
    if (!t.title && !d.header)
      throw new Error("Either a title prop or header slot must be provided");
    const e = y(t.isExpanded);
    function u() {
      r("toggle", { isExpanded: e.value }), r(e.value ? "open" : "close");
    }
    const n = () => {
      e.value = !e.value, u();
    };
    return b(
      () => t.isExpanded,
      (o) => {
        e.value = o, u();
      }
    ), (o, J) => (a(), c("div", K, [
      s("div", {
        tabindex: "0",
        "data-test": "stash-accordion|toggle",
        class: _(["stash-accordion__toggle flex items-center", [i(p).toggle, e.value && i(p)["toggle--open"]]]),
        onClick: n,
        onKeypress: [
          h(n, ["enter"]),
          h(C(n, ["prevent"]), ["space"])
        ]
      }, [
        i(d).header ? (a(), c("div", I, [
          m(o.$slots, "header")
        ])) : (a(), c(k, { key: 1 }, [
          l(g, {
            class: "text-blue-500",
            size: "dense",
            name: t.icon,
            "data-test": "stash-accordion|toggle-icon"
          }, null, 8, ["name"]),
          s("div", N, M(t.title), 1)
        ], 64)),
        l(g, {
          class: _(["ml-auto justify-center text-ice-900 transition-transform duration-300", { "rotate-180": e.value }]),
          size: "dense",
          name: "chevron-down",
          "data-test": "stash-accordion|toggle-chevron"
        }, null, 8, ["class"])
      ], 42, D),
      S(s("hr", V, null, 512), [
        [$, e.value]
      ]),
      l(A, { "is-expanded": e.value }, {
        default: z(() => [
          s("div", j, [
            m(o.$slots, "default")
          ])
        ]),
        _: 3
      }, 8, ["is-expanded"])
    ]));
  }
}), q = "_toggle_E88AC", G = {
  toggle: q
}, H = {
  $style: G
}, R = /* @__PURE__ */ B(F, [["__cssModules", H]]);
export {
  R as default
};
//# sourceMappingURL=Accordion.js.map
