@shopify/shop-minis-react/dist/components/atoms/safe-area.js

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import { jsx as f } from "react/jsx-runtime";
import { useSafeArea as g } from "../../hooks/util/useSafeArea.js";
const m = ["top", "right", "bottom", "left"], d = {
  top: "var(--safe-area-inset-top, 0px)",
  right: "var(--safe-area-inset-right, 0px)",
  bottom: "var(--safe-area-inset-bottom, 0px)",
  left: "var(--safe-area-inset-left, 0px)"
}, c = {
  padding: {
    top: "paddingTop",
    right: "paddingRight",
    bottom: "paddingBottom",
    left: "paddingLeft"
  },
  margin: {
    top: "marginTop",
    right: "marginRight",
    bottom: "marginBottom",
    left: "marginLeft"
  }
};
function x({
  edges: e = m,
  mode: a = "padding",
  className: i,
  style: r,
  children: n
}) {
  const o = { ...r }, s = c[a], p = g();
  for (const t of e)
    p?.[t] > 0 && (o[s[t]] = d[t]);
  return /* @__PURE__ */ f("div", { className: i, style: o, children: n });
}
export {
  x as SafeArea
};
//# sourceMappingURL=safe-area.js.map