import { lz as e, lI as i, lJ as t } from "./ant-design-icons-6bfdc7d5.js";
import { useMemo as r } from "react";
import { w as o } from "./antd-2abdded3.js";
import "./alasql-f60045ee.js";
import "react-dom";
import "./dayjs-2035e031.js";
import "./lodash-b5661970.js";
var n = function() {
  function e2() {
  }
  return e2.create = function(e3) {
    return e3;
  }, e2;
}();
function l(i2) {
  var t2 = i2.screenWidth, n2 = i2.screenType, l2 = void 0 === n2 ? "modern" : n2, a2 = i2.isLandscape, h2 = void 0 !== a2 && a2, v2 = i2.frameColor, f2 = void 0 === v2 ? "#666666" : v2, y2 = i2.frameOnly, p2 = void 0 !== y2 && y2, m2 = i2.statusbarColor, g2 = void 0 === m2 ? "#CCCCCC" : m2, b2 = i2.hideStatusBar, C2 = void 0 !== b2 && b2, w2 = i2.transparentNavBar, x = void 0 !== w2 && w2, B = i2.hideNavBar, R = void 0 !== B && B, S = r(function() {
    return "legacy" === l2 ? h2 ? u : c : h2 ? s : d;
  }, [h2, l2]);
  return e("div", o({ className: i2.className, style: i2.containerStlye }, { children: e(S, o({ screenWidth: t2, frameColor: f2, frameOnly: p2, statusbarColor: g2, hideStatusBar: C2, transparentNavigationBar: x, hideNavigationBar: R }, { children: i2.children })) }));
}
var a = function(e2) {
  var i2, t2, r2, o2 = e2.isLandscape, l2 = e2.getSizeWithRatio, a2 = e2.screenWidth, d2 = e2.mHeight, s2 = e2.frameColor, h2 = e2.statusbarColor, c2 = e2.frameOnly, u2 = l2(35), v2 = Math.floor(u2 / 2), f2 = a2 + 2 * u2, y2 = d2 + 2 * u2, p2 = l2(50), m2 = Math.floor(0.65 * u2), g2 = (o2 ? d2 : a2) + u2 + v2 + m2 - v2;
  return c2 ? (i2 = 0, t2 = 0, r2 = 0) : (r2 = m2 - Math.floor(v2 / 1.5), i2 = o2 ? 0 : m2 - Math.floor(v2 / 1.5), t2 = o2 ? m2 - Math.floor(v2 / 1.5) : 0), n.create({ container: { display: "flex", flexDirection: "column", boxSizing: "content-box", position: "relative", width: f2, height: y2, paddingTop: r2, paddingRight: i2, paddingLeft: t2 }, frame: { display: "flex", flexDirection: "column", position: "relative", borderRadius: p2, borderStyle: "solid", borderWidth: u2, borderColor: s2, overflow: "hidden" }, screen: { display: "flex", flexDirection: "column", position: "relative", width: a2, height: d2, backgroundColor: "transparent", overflow: "hidden" }, notchContainer: { display: "flex", flexDirection: "column", width: "100%", height: l2(24), backgroundColor: h2, alignItems: "center" }, swipeContainerFullScreen: { display: "flex", flexDirection: "column", position: "absolute", boxSizing: "border-box", bottom: 0, width: "100%", height: l2(20), paddingTop: l2(4), alignItems: "center", justifyContent: "center", pointerEvents: "none" }, swipeContainer: { display: "flex", flexDirection: "column", boxSizing: "border-box", width: "100%", height: l2(20), backgroundColor: h2, paddingTop: l2(4), alignItems: "center", justifyContent: "center" }, swipeBar: { backgroundColor: s2, borderRadius: l2(100), width: o2 ? "25%" : "30%", height: l2(8) }, volumeUp: { position: "absolute", borderRadius: u2, top: o2 ? void 0 : l2(75), left: o2 ? l2(75) : g2, bottom: o2 ? g2 : void 0, width: o2 ? l2(50) : m2, height: o2 ? m2 : l2(50), backgroundColor: s2 }, volumeDown: { position: "absolute", borderRadius: u2, top: o2 ? void 0 : l2(130), left: o2 ? l2(130) : g2, bottom: o2 ? g2 : void 0, width: o2 ? l2(50) : m2, height: o2 ? m2 : l2(50), backgroundColor: s2 }, power: { position: "absolute", borderRadius: u2, bottom: o2 ? d2 - u2 - v2 : d2 + u2 + v2 + m2 - v2, left: o2 ? void 0 : a2 - u2 - v2, right: o2 ? a2 + u2 + v2 + m2 - v2 : void 0, width: o2 ? m2 : l2(60), height: o2 ? l2(60) : m2, backgroundColor: s2 } });
};
function d(n2) {
  var l2 = n2.screenWidth, d2 = n2.frameColor, s2 = n2.frameOnly, h2 = n2.statusbarColor, c2 = n2.hideStatusBar, u2 = n2.hideNavigationBar, v2 = n2.transparentNavigationBar, f2 = r(function() {
    var e2 = Math.floor(l2 / 3 * 4);
    return a({ isLandscape: false, getSizeWithRatio: function(e3) {
      var i2 = Math.floor(l2 * e3 / 834);
      return Math.max(i2, 1);
    }, screenWidth: l2, mHeight: e2, frameColor: d2, statusbarColor: h2, frameOnly: s2 });
  }, [l2, d2, h2, s2]);
  return i("div", o({ style: f2.container }, { children: [i("div", o({ style: f2.frame }, { children: [i("div", o({ style: f2.screen }, { children: [false === c2 && e("div", { style: f2.notchContainer }), e("div", o({ style: { display: "flex", flex: 1, overflow: "hidden" } }, { children: n2.children })), false === u2 && false === v2 && e("div", o({ style: f2.swipeContainer }, { children: e("div", { style: f2.swipeBar }) }))] })), false === u2 && v2 && e("div", o({ style: f2.swipeContainerFullScreen }, { children: e("div", { style: f2.swipeBar }) }))] })), !s2 && i(t, { children: [e("div", { style: f2.volumeUp }), e("div", { style: f2.volumeDown }), e("div", { style: f2.power })] })] }));
}
function s(n2) {
  var l2 = n2.screenWidth, d2 = n2.frameColor, s2 = n2.frameOnly, h2 = n2.statusbarColor, c2 = n2.hideStatusBar, u2 = n2.hideNavigationBar, v2 = n2.transparentNavigationBar, f2 = r(function() {
    var e2 = Math.floor(l2 / 4 * 3);
    return a({ isLandscape: true, getSizeWithRatio: function(e3) {
      var i2 = Math.floor(l2 * e3 / 1194);
      return Math.max(i2, 1);
    }, screenWidth: l2, mHeight: e2, frameColor: d2, statusbarColor: h2, frameOnly: s2 });
  }, [l2, d2, h2, s2]);
  return i("div", o({ style: f2.container }, { children: [i("div", o({ style: f2.frame }, { children: [i("div", o({ style: f2.screen }, { children: [false === c2 && e("div", { style: f2.notchContainer }), e("div", o({ style: { display: "flex", flex: 1, overflow: "hidden" } }, { children: n2.children })), false === u2 && false === v2 && e("div", o({ style: f2.swipeContainer }, { children: e("div", { style: f2.swipeBar }) }))] })), false === u2 && v2 && e("div", o({ style: f2.swipeContainerFullScreen }, { children: e("div", { style: f2.swipeBar }) }))] })), !s2 && i(t, { children: [e("div", { style: f2.volumeUp }), e("div", { style: f2.volumeDown }), e("div", { style: f2.power })] })] }));
}
var h = function(e2) {
  var i2 = e2.isLandscape, t2 = e2.getSizeWithRatio, r2 = e2.screenWidth, o2 = e2.mHeight, l2 = e2.frameColor, a2 = e2.statusbarColor, d2 = t2(35), s2 = r2 + 2 * d2, h2 = o2 + 2 * d2, c2 = t2(90), u2 = t2(90), v2 = t2(40);
  return n.create({ container: { display: "flex", flexDirection: i2 ? "row" : "column", boxSizing: "content-box", position: "relative", width: i2 ? r2 + c2 + u2 : s2, height: i2 ? h2 : o2 + c2 + u2 }, frame: { display: "flex", flexDirection: "column", alignItems: i2 ? "flex-start" : "center", justifyContent: i2 ? "center" : "flex-start", position: "relative", boxSizing: "border-box", borderLeftWidth: d2, borderLeftStyle: "solid", borderRightWidth: d2, borderRightStyle: "solid", borderColor: l2, width: i2 ? r2 : s2, height: i2 ? h2 : o2, overflow: "hidden" }, upperBezel: { display: "flex", flexDirection: "column", position: "relative", borderTopLeftRadius: v2, borderTopRightRadius: i2 ? 0 : v2, borderBottomLeftRadius: i2 ? v2 : 0, width: i2 ? c2 : s2, height: i2 ? h2 : c2, backgroundColor: l2, justifyContent: "center" }, camSpeakerCont: { display: "flex", flexDirection: i2 ? "row" : "column", position: "relative", width: "100%", height: "100%", alignItems: "center", justifyContent: "center" }, camera: { width: t2(20), height: t2(20), borderRadius: t2(20), backgroundColor: a2 }, lowerBezel: { display: "flex", flexDirection: i2 ? "row" : "column", borderBottomLeftRadius: i2 ? 0 : v2, borderBottomRightRadius: v2, borderTopRightRadius: i2 ? v2 : 0, width: i2 ? u2 : s2, height: i2 ? h2 : u2, backgroundColor: l2, alignItems: "center", justifyContent: "center" }, homeButoon: { width: t2(55), height: t2(55), backgroundColor: a2, borderRadius: t2(55) }, screen: { display: "flex", flexDirection: "column", position: "relative", width: r2, height: o2, backgroundColor: "transparent", overflow: "hidden" }, statusbar: { width: "100%", height: t2(20), backgroundColor: a2, alignItems: "center" } });
};
function c(t2) {
  var n2 = t2.screenWidth, l2 = t2.frameColor, a2 = t2.frameOnly, d2 = t2.statusbarColor, s2 = t2.hideStatusBar, c2 = r(function() {
    var e2 = Math.floor(n2 / 3 * 4);
    return h({ isLandscape: false, getSizeWithRatio: function(e3) {
      var i2 = Math.floor(n2 * e3 / 810);
      return Math.max(i2, 1);
    }, screenWidth: n2, mHeight: e2, frameColor: l2, statusbarColor: d2, frameOnly: a2 });
  }, [n2, l2, d2, a2]);
  return i("div", o({ style: c2.container }, { children: [e("div", o({ style: c2.upperBezel }, { children: e("div", o({ style: c2.camSpeakerCont }, { children: e("div", { style: c2.camera }) })) })), e("div", o({ style: c2.frame }, { children: i("div", o({ style: c2.screen }, { children: [false === s2 && e("div", { style: c2.statusbar }), e("div", o({ style: { display: "flex", flex: 1, overflow: "hidden" } }, { children: t2.children }))] })) })), e("div", o({ style: c2.lowerBezel }, { children: e("div", { style: c2.homeButoon }) }))] }));
}
function u(t2) {
  var n2 = t2.screenWidth, l2 = t2.frameColor, a2 = t2.frameOnly, d2 = t2.statusbarColor, s2 = t2.hideStatusBar, c2 = r(function() {
    var e2 = Math.floor(n2 / 4 * 3);
    return h({ isLandscape: true, getSizeWithRatio: function(e3) {
      var i2 = Math.floor(n2 * e3 / 1080);
      return Math.max(i2, 1);
    }, screenWidth: n2, mHeight: e2, frameColor: l2, statusbarColor: d2, frameOnly: a2 });
  }, [n2, l2, d2, a2]);
  return i("div", o({ style: c2.container }, { children: [e("div", o({ style: c2.upperBezel }, { children: e("div", o({ style: c2.camSpeakerCont }, { children: e("div", { style: c2.camera }) })) })), e("div", o({ style: c2.frame }, { children: i("div", o({ style: c2.screen }, { children: [false === s2 && e("div", { style: c2.statusbar }), e("div", o({ style: { display: "flex", flex: 1, overflow: "hidden" } }, { children: t2.children }))] })) })), e("div", o({ style: c2.lowerBezel }, { children: e("div", { style: c2.homeButoon }) }))] }));
}
function v(i2) {
  var t2 = i2.screenWidth, n2 = i2.screenType, l2 = void 0 === n2 ? "island" : n2, a2 = i2.isLandscape, d2 = void 0 !== a2 && a2, s2 = i2.frameColor, h2 = void 0 === s2 ? "#666666" : s2, c2 = i2.frameOnly, u2 = void 0 !== c2 && c2, v2 = i2.statusbarColor, f2 = void 0 === v2 ? "#CCCCCC" : v2, b2 = i2.hideStatusBar, x = void 0 !== b2 && b2, B = i2.transparentNavBar, R = void 0 !== B && B, S = i2.hideNavBar, W = void 0 !== S && S, k = r(function() {
    switch (l2) {
      case "legacy":
        return d2 ? w : C;
      case "notch":
        return d2 ? g : m;
      default:
        return d2 ? p : y;
    }
  }, [d2, l2]);
  return e("div", o({ className: i2.className, style: i2.containerStlye }, { children: e(k, o({ screenWidth: t2, frameColor: h2, frameOnly: u2, statusbarColor: f2, hideStatusBar: x, transparentNavigationBar: R, hideNavigationBar: W }, { children: i2.children })) }));
}
var f = function(e2) {
  var i2, t2, r2, o2, l2, a2, d2, s2, h2, c2 = e2.screenType, u2 = e2.isLandscape, v2 = e2.getSizeWithRatio, f2 = e2.screenWidth, y2 = e2.mHeight, p2 = e2.frameColor, m2 = e2.frameWidth, g2 = e2.statusbarColor, b2 = e2.frameOnly, C2 = e2.bezelRadius, w2 = m2, x = Math.floor(w2 / 2), B = f2 + 2 * w2, R = y2 + 2 * w2, S = Math.floor(0.9 * w2), W = (u2 ? y2 : f2) + w2 + x + S - x;
  if (b2 ? (i2 = 0, t2 = 0, r2 = 0, o2 = 0) : (i2 = u2 ? 0 : S - x, t2 = u2 ? 0 : S - x, r2 = u2 ? S - x : 0, o2 = u2 ? S - x : 0), "notch" === c2)
    l2 = u2 ? 0 : v2(44), a2 = u2 ? v2(44) : 0, d2 = u2 ? v2(44) : 0, s2 = v2(u2 ? 21 : 34), h2 = v2(250);
  else
    l2 = u2 ? 0 : v2(59), a2 = u2 ? v2(59) : 0, d2 = u2 ? v2(59) : 0, s2 = v2(u2 ? 21 : 34), h2 = v2(280);
  return n.create({ container: { display: "flex", flexDirection: u2 ? "row" : "column", boxSizing: "content-box", position: "relative", width: B, height: R, paddingRight: i2, paddingLeft: t2, paddingTop: r2, paddingBottom: o2 }, frame: { display: "flex", flexDirection: "column", position: "relative", boxSizing: "border-box", borderRadius: C2, borderStyle: "solid", borderWidth: w2, borderColor: p2, overflow: "hidden" }, screen: { display: "flex", flexDirection: u2 ? "row" : "column", position: "relative", width: f2, height: y2, backgroundColor: "transparent", overflow: "hidden" }, notchContainer: { display: "flex", flexDirection: "column", width: u2 ? a2 : "100%", height: u2 ? "100%" : l2, backgroundColor: g2, alignItems: u2 ? "flex-start" : "center", justifyContent: u2 ? "center" : "flex-start" }, notchContainerFullScreen: { display: "flex", flexDirection: "column", position: "absolute", width: u2 ? a2 : "100%", height: u2 ? "100%" : l2, alignItems: u2 ? "flex-start" : "center", justifyContent: u2 ? "center" : "flex-start", pointerEvents: "none" }, safeAreaRight: { width: d2, height: "100%", backgroundColor: g2 }, island: { width: v2(u2 ? 35 : 128), height: v2(u2 ? 128 : 35), backgroundColor: p2, borderRadius: v2(50), marginTop: u2 ? void 0 : v2(13), marginLeft: u2 ? v2(13) : void 0 }, notch: { width: v2(u2 ? 31 : 160), height: v2(u2 ? 160 : 31), backgroundColor: p2, borderBottomLeftRadius: u2 ? 0 : v2(20), borderBottomRightRadius: v2(20), borderTopRightRadius: u2 ? v2(20) : 0 }, swipeContainer: { display: "flex", flexDirection: "column", width: "100%", height: s2, backgroundColor: g2, alignItems: "center", justifyContent: "flex-end" }, swipeContainerFullScreen: { display: "flex", flexDirection: "column", position: "absolute", bottom: 0, width: "100%", height: s2, alignItems: "center", justifyContent: "flex-end", pointerEvents: "none" }, swipeBar: { backgroundColor: p2, borderRadius: v2(100), width: u2 ? v2(230) : "35%", height: v2(7), marginBottom: v2(u2 ? 5 : 10) }, silenceSwitch: { position: "absolute", borderRadius: w2, top: u2 ? W : v2(165), left: u2 ? v2(165) : void 0, right: u2 ? void 0 : W, width: u2 ? v2(34) : S, height: u2 ? S : v2(34), backgroundColor: p2 }, volumeUp: { position: "absolute", borderRadius: w2, top: u2 ? W : v2(230), left: u2 ? v2(230) : void 0, right: u2 ? void 0 : W, width: u2 ? v2(65) : S, height: u2 ? S : v2(65), backgroundColor: p2 }, volumeDown: { position: "absolute", borderRadius: w2, top: u2 ? W : v2(315), left: u2 ? v2(315) : void 0, right: u2 ? void 0 : W, width: u2 ? v2(65) : S, height: u2 ? S : v2(65), backgroundColor: p2 }, powerPortrait: { position: "absolute", borderRadius: w2, top: u2 ? void 0 : h2, left: u2 ? h2 : W, bottom: u2 ? W : void 0, width: u2 ? v2(105) : S, height: u2 ? S : v2(105), backgroundColor: p2 }, notchPad: { alignSelf: "center", position: "absolute", top: u2 ? void 0 : x, left: u2 ? x : void 0, width: v2(u2 ? 20 : 160), height: v2(u2 ? 160 : 20), backgroundColor: p2 } });
};
function y(n2) {
  var l2 = n2.screenWidth, a2 = n2.frameColor, d2 = n2.frameOnly, s2 = n2.statusbarColor, h2 = n2.hideStatusBar, c2 = n2.hideNavigationBar, u2 = n2.transparentNavigationBar, v2 = r(function() {
    var e2 = function(e3) {
      var i3 = Math.floor(l2 * e3 / 390);
      return Math.max(i3, 1);
    }, i2 = Math.floor(l2 / 9 * 19.5);
    return f({ screenType: "island", isLandscape: false, getSizeWithRatio: e2, screenWidth: l2, mHeight: i2, frameColor: a2, frameWidth: e2(10), frameOnly: d2, statusbarColor: s2, bezelRadius: e2(68) });
  }, [l2, a2, s2, d2]);
  return i("div", o({ style: v2.container }, { children: [i("div", o({ style: v2.frame }, { children: [i("div", o({ style: v2.screen }, { children: [false === h2 && e("div", o({ style: v2.notchContainer }, { children: e("div", { style: v2.island }) })), e("div", o({ style: { display: "flex", flex: 1, overflow: "hidden" } }, { children: n2.children })), false === c2 && false === u2 && e("div", o({ style: v2.swipeContainer }, { children: e("div", { style: v2.swipeBar }) }))] })), h2 && e("div", o({ style: v2.notchContainerFullScreen }, { children: e("div", { style: v2.island }) })), false === c2 && u2 && e("div", o({ style: v2.swipeContainerFullScreen }, { children: e("div", { style: v2.swipeBar }) }))] })), !d2 && i(t, { children: [e("div", { style: v2.silenceSwitch }), e("div", { style: v2.volumeUp }), e("div", { style: v2.volumeDown }), e("div", { style: v2.powerPortrait })] })] }));
}
function p(n2) {
  var l2 = n2.screenWidth, a2 = n2.frameColor, d2 = n2.frameOnly, s2 = n2.statusbarColor, h2 = n2.hideStatusBar, c2 = n2.hideNavigationBar, u2 = n2.transparentNavigationBar, v2 = r(function() {
    var e2 = function(e3) {
      var i3 = Math.floor(l2 * e3 / 844);
      return Math.max(i3, 1);
    }, i2 = Math.floor(l2 / 19.5 * 9);
    return f({ screenType: "island", isLandscape: true, getSizeWithRatio: e2, screenWidth: l2, mHeight: i2, frameColor: a2, frameWidth: e2(10), frameOnly: d2, statusbarColor: s2, bezelRadius: e2(68) });
  }, [l2, a2, s2, d2]);
  return i("div", o({ style: v2.container }, { children: [i("div", o({ style: v2.frame }, { children: [i("div", o({ style: v2.screen }, { children: [false === h2 && e("div", o({ style: v2.notchContainer }, { children: e("div", { style: v2.island }) })), i("div", o({ style: { display: "flex", flex: 1, flexDirection: "column" } }, { children: [e("div", o({ style: { display: "flex", flex: 1, overflow: "hidden" } }, { children: n2.children })), false === c2 && false === u2 && e("div", o({ style: v2.swipeContainer }, { children: e("div", { style: v2.swipeBar }) }))] })), false === h2 && e("div", { style: v2.safeAreaRight })] })), h2 && e("div", o({ style: v2.notchContainerFullScreen }, { children: e("div", { style: v2.island }) })), false === c2 && u2 && e("div", o({ style: v2.swipeContainerFullScreen }, { children: e("div", { style: v2.swipeBar }) }))] })), !d2 && i(t, { children: [e("div", { style: v2.silenceSwitch }), e("div", { style: v2.volumeUp }), e("div", { style: v2.volumeDown }), e("div", { style: v2.powerPortrait })] })] }));
}
function m(n2) {
  var l2 = n2.screenWidth, a2 = n2.frameColor, d2 = n2.frameOnly, s2 = n2.statusbarColor, h2 = n2.hideStatusBar, c2 = n2.hideNavigationBar, u2 = n2.transparentNavigationBar, v2 = r(function() {
    var e2 = function(e3) {
      var i3 = Math.floor(l2 * e3 / 390);
      return Math.max(i3, 1);
    }, i2 = Math.floor(l2 / 9 * 19.5);
    return f({ screenType: "notch", isLandscape: false, getSizeWithRatio: e2, screenWidth: l2, mHeight: i2, frameColor: a2, frameWidth: e2(14), frameOnly: d2, statusbarColor: s2, bezelRadius: e2(64) });
  }, [l2, a2, s2, d2]);
  return i("div", o({ style: v2.container }, { children: [i("div", o({ style: v2.frame }, { children: [i("div", o({ style: v2.screen }, { children: [false === h2 && e("div", o({ style: v2.notchContainer }, { children: e("div", { style: v2.notch }) })), e("div", o({ style: { display: "flex", flex: 1, overflow: "hidden" } }, { children: n2.children })), false === c2 && false === u2 && e("div", o({ style: v2.swipeContainer }, { children: e("div", { style: v2.swipeBar }) }))] })), h2 && e("div", o({ style: v2.notchContainerFullScreen }, { children: e("div", { style: v2.notch }) })), false === c2 && u2 && e("div", o({ style: v2.swipeContainerFullScreen }, { children: e("div", { style: v2.swipeBar }) }))] })), e("div", { style: v2.notchPad }), !d2 && i(t, { children: [e("div", { style: v2.silenceSwitch }), e("div", { style: v2.volumeUp }), e("div", { style: v2.volumeDown }), e("div", { style: v2.powerPortrait })] })] }));
}
function g(n2) {
  var l2 = n2.screenWidth, a2 = n2.frameColor, d2 = n2.frameOnly, s2 = n2.statusbarColor, h2 = n2.hideStatusBar, c2 = n2.hideNavigationBar, u2 = n2.transparentNavigationBar, v2 = r(function() {
    var e2 = function(e3) {
      var i3 = Math.floor(l2 * e3 / 844);
      return Math.max(i3, 1);
    }, i2 = Math.floor(l2 / 19.5 * 9);
    return f({ screenType: "notch", isLandscape: true, getSizeWithRatio: e2, screenWidth: l2, mHeight: i2, frameColor: a2, frameWidth: e2(14), frameOnly: d2, statusbarColor: s2, bezelRadius: e2(64) });
  }, [l2, a2, s2, d2]);
  return i("div", o({ style: v2.container }, { children: [i("div", o({ style: v2.frame }, { children: [i("div", o({ style: v2.screen }, { children: [false === h2 && e("div", o({ style: v2.notchContainer }, { children: e("div", { style: v2.notch }) })), i("div", o({ style: { display: "flex", flex: 1, flexDirection: "column" } }, { children: [e("div", o({ style: { display: "flex", flex: 1, flexDirection: "column", overflow: "hidden" } }, { children: n2.children })), false === c2 && false === u2 && e("div", o({ style: v2.swipeContainer }, { children: e("div", { style: v2.swipeBar }) }))] })), false === h2 && e("div", { style: v2.safeAreaRight })] })), h2 && e("div", o({ style: v2.notchContainerFullScreen }, { children: e("div", { style: v2.notch }) })), false === c2 && u2 && e("div", o({ style: v2.swipeContainerFullScreen }, { children: e("div", { style: v2.swipeBar }) }))] })), e("div", { style: v2.notchPad }), !d2 && i(t, { children: [e("div", { style: v2.silenceSwitch }), e("div", { style: v2.volumeUp }), e("div", { style: v2.volumeDown }), e("div", { style: v2.powerPortrait })] })] }));
}
var b = function(e2) {
  var i2, t2, r2, o2, l2 = e2.isLandscape, a2 = e2.getSizeWithRatio, d2 = e2.screenWidth, s2 = e2.mHeight, h2 = e2.frameColor, c2 = e2.statusbarColor, u2 = e2.frameOnly, v2 = a2(22), f2 = Math.floor(v2 / 2), y2 = d2 + 2 * v2, p2 = s2 + 2 * v2, m2 = a2(110), g2 = a2(110), b2 = Math.floor(0.8 * v2), C2 = (l2 ? s2 : d2) + v2 + f2 + b2 - f2, w2 = a2(60);
  return u2 ? (i2 = 0, t2 = 0, r2 = 0, o2 = 0) : (i2 = l2 ? 0 : b2 - f2, t2 = l2 ? 0 : b2 - f2, r2 = l2 ? b2 - f2 : 0, o2 = l2 ? b2 - f2 : 0), n.create({ container: { display: "flex", flexDirection: l2 ? "row" : "column", boxSizing: "content-box", position: "relative", width: l2 ? d2 + m2 + g2 : y2, height: l2 ? p2 : s2 + m2 + g2, paddingRight: i2, paddingLeft: t2, paddingTop: r2, paddingBottom: o2 }, frame: { display: "flex", flexDirection: "column", alignItems: l2 ? "flex-start" : "center", justifyContent: l2 ? "center" : "flex-start", position: "relative", boxSizing: "border-box", borderLeftWidth: v2, borderLeftStyle: "solid", borderRightWidth: v2, borderRightStyle: "solid", borderColor: h2, width: l2 ? d2 : y2, height: l2 ? p2 : s2, overflow: "hidden" }, upperBezel: { display: "flex", flexDirection: "column", position: "relative", borderTopLeftRadius: w2, borderTopRightRadius: l2 ? 0 : w2, borderBottomLeftRadius: l2 ? w2 : 0, width: l2 ? m2 : y2, height: l2 ? p2 : m2, backgroundColor: h2, justifyContent: "center" }, camSpeakerCont: { display: "flex", flexDirection: l2 ? "row" : "column", position: "relative", width: "100%", height: "100%", alignItems: "center", justifyContent: "center" }, camera: { position: "absolute", left: l2 ? void 0 : -a2(38), bottom: l2 ? -a2(38) : 0, width: a2(10), height: a2(10), borderRadius: a2(10), backgroundColor: c2 }, speaker: { position: "relative", width: a2(l2 ? 10 : 80), height: a2(l2 ? 80 : 10), backgroundColor: c2, borderRadius: a2(10) }, lowerBezel: { display: "flex", flexDirection: l2 ? "row" : "column", borderTopRightRadius: l2 ? w2 : 0, borderBottomLeftRadius: l2 ? 0 : a2(60), borderBottomRightRadius: a2(60), width: l2 ? g2 : y2, height: l2 ? p2 : g2, backgroundColor: h2, alignItems: "center", justifyContent: "center" }, homeButoon: { width: a2(65), height: a2(65), backgroundColor: c2, borderRadius: a2(65) }, screen: { display: "flex", flexDirection: l2 ? "row" : "column", position: "relative", width: d2, height: s2, backgroundColor: "transparent" }, statusbar: { width: "100%", height: a2(20), backgroundColor: c2, alignItems: "center" }, silenceSwitch: { position: "absolute", borderRadius: v2, top: l2 ? C2 : a2(115), left: l2 ? a2(115) : void 0, right: l2 ? void 0 : C2, width: l2 ? a2(36) : b2, height: l2 ? b2 : a2(36), backgroundColor: h2 }, volumeUp: { position: "absolute", borderRadius: v2, top: l2 ? C2 : a2(185), left: l2 ? a2(185) : void 0, right: C2, width: l2 ? a2(70) : b2, height: l2 ? b2 : a2(70), backgroundColor: h2 }, volumeDown: { position: "absolute", borderRadius: v2, top: l2 ? C2 : a2(270), left: l2 ? a2(270) : void 0, right: l2 ? void 0 : C2, width: l2 ? a2(70) : b2, height: l2 ? b2 : a2(70), backgroundColor: h2 }, power: { position: "absolute", borderRadius: v2, top: l2 ? void 0 : a2(190), left: l2 ? a2(190) : C2, bottom: l2 ? C2 : void 0, width: l2 ? a2(64) : b2, height: l2 ? b2 : a2(64), backgroundColor: h2 } });
};
function C(n2) {
  var l2 = n2.screenWidth, a2 = n2.frameColor, d2 = n2.frameOnly, s2 = n2.statusbarColor, h2 = n2.hideStatusBar, c2 = r(function() {
    var e2 = Math.floor(l2 / 9 * 16);
    return b({ isLandscape: false, getSizeWithRatio: function(e3) {
      var i2 = Math.floor(l2 * e3 / 375);
      return Math.max(i2, 1);
    }, screenWidth: l2, mHeight: e2, frameColor: a2, statusbarColor: s2, frameOnly: d2 });
  }, [l2, a2, s2, d2]);
  return i("div", o({ style: c2.container }, { children: [e("div", o({ style: c2.upperBezel }, { children: e("div", o({ style: c2.camSpeakerCont }, { children: e("div", o({ style: c2.speaker }, { children: e("div", { style: c2.camera }) })) })) })), e("div", o({ style: c2.frame }, { children: i("div", o({ style: c2.screen }, { children: [false === h2 && e("div", { style: c2.statusbar }), e("div", o({ style: { display: "flex", flex: 1, overflow: "hidden" } }, { children: n2.children }))] })) })), e("div", o({ style: c2.lowerBezel }, { children: e("div", { style: c2.homeButoon }) })), !d2 && i(t, { children: [e("div", { style: c2.silenceSwitch }), e("div", { style: c2.volumeUp }), e("div", { style: c2.volumeDown }), e("div", { style: c2.power })] })] }));
}
function w(n2) {
  var l2 = n2.screenWidth, a2 = n2.frameColor, d2 = n2.frameOnly, s2 = n2.statusbarColor, h2 = r(function() {
    var e2 = Math.floor(l2 / 16 * 9);
    return b({ isLandscape: true, getSizeWithRatio: function(e3) {
      var i2 = Math.floor(l2 * e3 / 667);
      return Math.max(i2, 1);
    }, screenWidth: l2, mHeight: e2, frameColor: a2, statusbarColor: s2, frameOnly: d2 });
  }, [l2, a2, d2, s2]);
  return i("div", o({ style: h2.container }, { children: [e("div", o({ style: h2.upperBezel }, { children: e("div", o({ style: h2.camSpeakerCont }, { children: e("div", o({ style: h2.speaker }, { children: e("div", { style: h2.camera }) })) })) })), e("div", o({ style: h2.frame }, { children: e("div", o({ style: h2.screen }, { children: e("div", o({ style: { display: "flex", flex: 1, overflow: "hidden" } }, { children: n2.children })) })) })), e("div", o({ style: h2.lowerBezel }, { children: e("div", { style: h2.homeButoon }) })), !d2 && i(t, { children: [e("div", { style: h2.silenceSwitch }), e("div", { style: h2.volumeUp }), e("div", { style: h2.volumeDown }), e("div", { style: h2.power })] })] }));
}
export {
  l as IPadMockup,
  v as IPhoneMockup
};
