import { defineComponent as c, useSlots as u, useCssModule as d, computed as l, openBlock as h, createElementBlock as v, normalizeStyle as f, normalizeClass as p, unref as n, renderSlot as x } from "vue";
import { _ as m } from "./_plugin-vue_export-helper-CHgC5LLL.js";
var _ = /* @__PURE__ */ ((e) => (e.Text = "text", e.Circular = "circular", e.Rectangular = "rectangular", e))(_ || {});
const g = /* @__PURE__ */ c({
  __name: "Skeleton",
  props: {
    height: { default: void 0 },
    variant: {
      default: "text"
      /* Text */
    },
    width: { default: void 0 }
  },
  setup(e) {
    const t = e, o = u(), r = d(), a = l(() => !!o.default), i = l(() => {
      const s = {};
      return t.width && (s.width = `${t.width}px`), t.height && t.variant !== "text" && (s.height = `${t.height}px`), s;
    });
    return (s, y) => (h(), v("div", {
      "data-test": "stash-skeleton",
      class: p(["stash-skeleton animate-pulse bg-ice-500", {
        "stash-skeleton--circular rounded-full": t.variant === "circular",
        "stash-skeleton--text rounded": t.variant === "text",
        [n(r)["text-variant"]]: t.variant === "text",
        "stash-skeleton--rectangular rounded": t.variant === "rectangular",
        [n(r)["has-children"]]: a.value,
        "max-w-fit": a.value && !t.width,
        "h-auto": a.value && !t.height
      }]),
      style: f(i.value)
    }, [
      x(s.$slots, "default")
    ], 6));
  }
}), k = {
  "text-variant": "_text-variant_tKbhE",
  "has-children": "_has-children_QB0AD"
}, w = {
  $style: k
}, $ = /* @__PURE__ */ m(g, [["__cssModules", w]]);
export {
  _ as SkeletonVariants,
  $ as default
};
//# sourceMappingURL=Skeleton.js.map
