import {
  Icon
} from "./chunk-DMPXNHDT.js";

// src/components/Loading.tsx
import { useTheme } from "@emotion/react";
import styled from "@emotion/styled";
import { jsx } from "@emotion/react/jsx-runtime";
var loadingKinds = ["primary", "secondary"];
function Loading({
  center = true,
  size = 60,
  ml = 0,
  mt = 0,
  kind = "primary",
  color = void 0
}) {
  const theme = useTheme();
  const iconName = resolveLoadingProp(null, kind, "defaultIconName", theme);
  return /* @__PURE__ */ jsx(LoadingWrapper, { center, ml, mt, children: /* @__PURE__ */ jsx(Rotate, { children: /* @__PURE__ */ jsx(Icon, { name: iconName, width: size, color }) }) });
}
var LoadingWrapper = styled.div`
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin-left: ${({ ml }) => ml}px;
  margin-top: ${({ mt }) => mt}px;

  ${({ center }) => center && `
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 !important;
  `}
`;
var Rotate = styled.div`
  display: inline-flex;
  animation: rotate 0.5s linear infinite;

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
`;
function resolveLoadingProp(prop, kind, defaultKey, theme) {
  var _a;
  return (
    /** props may be unset for a given kind but theme defaults always exist,
     * so this will always resolve a value: */
    prop || ((_a = theme.loading.kinds[kind]) == null ? void 0 : _a[defaultKey]) || theme.loading[defaultKey]
  );
}

export {
  loadingKinds,
  Loading,
  LoadingWrapper
};
