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 _, withModifiers as C, normalizeClass as g, unref as l, renderSlot as h, Fragment as k, createVNode as i, toDisplayString as z, withDirectives as K, vShow as M, withCtx as S } from "vue";
import { _ as $ } from "./Expand.vue_vue_type_script_setup_true_lang-CSzt6UW3.js";
import m from "./Icon.js";
import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const B = {
  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", B, [
      s("div", {
        tabindex: "0",
        "data-test": "stash-accordion|toggle",
        class: g(["stash-accordion__toggle flex items-center", [l(p).toggle, e.value && l(p)["toggle--open"]]]),
        onClick: n,
        onKeypress: [
          _(n, ["enter"]),
          _(C(n, ["prevent"]), ["space"])
        ]
      }, [
        l(d).header ? (a(), c("div", I, [
          h(o.$slots, "header")
        ])) : (a(), c(k, { key: 1 }, [
          i(m, {
            class: "text-blue-500",
            size: "dense",
            name: t.icon,
            "data-test": "stash-accordion|toggle-icon"
          }, null, 8, ["name"]),
          s("div", N, z(t.title), 1)
        ], 64)),
        i(m, {
          class: g(["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),
      K(s("hr", V, null, 512), [
        [M, e.value]
      ]),
      i($, { "is-expanded": e.value }, {
        default: S(() => [
          s("div", j, [
            h(o.$slots, "default")
          ])
        ]),
        _: 3
      }, 8, ["is-expanded"])
    ]));
  }
}), q = "_toggle_E88AC", G = {
  toggle: q,
  "toggle--open": "_toggle--open__dnKz"
}, H = {
  $style: G
}, R = /* @__PURE__ */ A(F, [["__cssModules", H]]);
export {
  R as default
};
//# sourceMappingURL=Accordion.js.map
