import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { DIDConnectFooter as a } from "@arcblock/ux/lib/DIDConnect";
import { DID_CONNECT_SMALL_WIDTH as l } from "@arcblock/ux/lib/Util/constant";
import { getCurrentApp as x } from "@arcblock/ux/lib/Util/federated";
import { Box as o, Skeleton as i } from "@mui/material";
function f(r) {
  const n = globalThis.blocklet ? x(globalThis.blocklet) : globalThis.env;
  return /* @__PURE__ */ t(
    o,
    {
      className: "did-connect__root",
      sx: {
        backgroundColor: "background.default",
        display: "flex",
        flexDirection: "column",
        height: "100%",
        position: "relative",
        maxWidth: "100%",
        // eslint-disable-next-line react/prop-types
        width: r.mode === "drawer" ? "100%" : l - 20,
        transition: "width 0.2s ease-in-out",
        margin: "auto",
        p: 3,
        pb: 0,
        gap: 2.5
      },
      children: [
        /* @__PURE__ */ t(o, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
          /* @__PURE__ */ e(i, { variant: "rounded", height: 28, sx: { width: "6rem" } }),
          /* @__PURE__ */ t(o, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
            /* @__PURE__ */ e(i, { variant: "rounded", sx: { fontSize: "13px", height: "15px" } }),
            /* @__PURE__ */ e(i, { variant: "rounded", sx: { fontSize: "13px", height: "15px", width: "3rem" } })
          ] })
        ] }),
        /* @__PURE__ */ t(o, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: [
          /* @__PURE__ */ e(i, { variant: "rounded", sx: { height: "35px" } }),
          /* @__PURE__ */ e(i, { variant: "rounded", sx: { height: "35px" } }),
          /* @__PURE__ */ e(i, { variant: "rounded", sx: { height: "35px" } }),
          /* @__PURE__ */ t(o, { sx: { display: "flex", gap: 1.5, mt: 1 }, children: [
            /* @__PURE__ */ e(i, { variant: "rounded", sx: { flex: 1, height: "32px" } }),
            /* @__PURE__ */ e(i, { variant: "rounded", sx: { flex: 1, height: "32px" } }),
            /* @__PURE__ */ e(i, { variant: "rounded", sx: { flex: 1, height: "32px" } }),
            /* @__PURE__ */ e(i, { variant: "rounded", sx: { flex: 1, height: "32px" } })
          ] })
        ] }),
        /* @__PURE__ */ e(a, { currentAppInfo: n })
      ]
    }
  );
}
export {
  f as default
};
