import { jsx as e } from "react/jsx-runtime";
import { classNames as p } from "./index-classNames.js";
import { ComponentContainer as u } from "./index-ComponentContainer.js";
import "react";
import { a as b } from "./index-react-spring_web.modern.js";
import i from "./index-Skeleton.module.scss.js";
import { useSpring as y } from "./index-react-spring_core.modern.js";
var n;
(function(r) {
  r.rectangle = "rectangle", r.circle = "circle", r.fill = "fill";
})(n || (n = {}));
const I = (r) => {
  const {
    children: o,
    style: l,
    width: s,
    height: c,
    type: t,
    className: d,
    testId: g = "Skeleton",
    color: a = "light",
    noAnimation: m,
    borderRadius: v = 4
  } = r, f = y({
    loop: !0,
    from: {
      transform: "translate(-100%,0)",
      background: a === "light" ? "linear-gradient(45deg, var(--n200) 45%, var(--n100) 55%, var(--n200) 65%)" : "linear-gradient(45deg, var(--n400) 45%, var(--n300) 55%, var(--n400) 65%)"
    },
    to: {
      transform: "translate(30%,0)",
      background: a === "light" ? "linear-gradient(45deg, var(--n200) 45%, var(--n100) 55%, var(--n200) 65%)" : "linear-gradient(45deg, var(--n400) 45%, var(--n300) 55%, var(--n400) 65%)"
    },
    config: {
      duration: 1500
    }
  }), h = {
    background: a === "light" ? "var(--n200)" : "var(--n400)"
  };
  return e(u, {
    testId: g,
    className: p(i.container, d ?? ""),
    style: {
      backgroundColor: a === "light" ? "var(--n200)" : "var(--n400)",
      width: t === n.fill ? "100%" : s,
      height: t === n.fill ? "100%" : c,
      borderRadius: t === n.circle ? "50%" : v,
      ...l
    },
    children: e(b.div, {
      className: i.animated,
      style: m ? h : f,
      children: o
    })
  });
};
export {
  I as Skeleton,
  n as SkeletonTypes
};
