import { m as P, x as w, S as $ } from "./color-system.CScZ5uPf.js";
import { _ as h, B as a } from "./twind.D7be0E5m.js";
import { jsx as H } from "react/jsx-runtime";
import { Suspense as C, lazy as F } from "react";
import { merge as I, get as x } from "lodash-es";
import { c as j, u as S } from "./schema-resolver.b97jlDVg.js";
import { n as O, o as M } from "./_commonjsHelpers.C2ttCLrd.js";
import "@sinclair/typebox";
function nt({ attributes: t, editable: e, typography: o, showIntro: r }) {
  return h(
    "flex flex-col group/page mx-auto relative max-w-full w-full p-0 antialiased",
    e && "overflow-hidden min-h-[100cqh]",
    P(t.$backgroundColor) ? a({ backgroundColor: t.$backgroundColor }) : t.$backgroundColor,
    P(t.$textColor) ? a({ color: t.$textColor }) : t.$textColor,
    // typeof attributes.$backgroundColor?.image === "string" &&
    //   css({
    //     backgroundImage: `url(${attributes.$backgroundColor.image})`,
    //     backgroundRepeat: attributes.$backgroundColor.repeat ?? "no-repeat",
    //     backgroundSize: attributes.$backgroundColor.size ?? "cover",
    //     backgroundPosition: "center top",
    //   }),
    G(o),
    // Animate all bricks when the page is loading
    e && r && "[&>.brick-wrapper]:(opacity-0 animate-elastic-pop)"
  );
}
function G(t) {
  function e(o) {
    return o.type === "stack" ? `var(--font-${o.family})` : `"${o.family}"`;
  }
  return a({
    fontFamily: e(t.body),
    fontSize: `${t.base}px`,
    "& h1, & h2, & h3, & h4, & h5, & h6, & h7": {
      fontFamily: e(t.heading)
    }
  });
}
const A = /* @__PURE__ */ Object.assign({ "../bricks/accordion.tsx": () => import("./accordion.BP-6nMOo.js"), "../bricks/box.tsx": () => import("./box.s-Z4h_nj.js"), "../bricks/button.tsx": () => import("./button.Q_5wizoe.js"), "../bricks/card.tsx": () => import("./card.VaK7-H_t.js"), "../bricks/carousel.tsx": () => import("./carousel.CzfWEyoD.js"), "../bricks/dynamic.tsx": () => import("./dynamic.B2QaZqU_.js"), "../bricks/footer.tsx": () => import("./footer.B7xWSrYI.js"), "../bricks/form.tsx": () => import("./form.Doo1GHsY.js"), "../bricks/hbox.tsx": () => import("./hbox.B-pmebWv.js"), "../bricks/hero.tsx": () => import("./hero.DsJj01QZ.js"), "../bricks/icon.tsx": () => import("./icon.DHFyfRzK.js"), "../bricks/image.tsx": () => import("./image.CUWF8fqR.js"), "../bricks/images-gallery.tsx": () => import("./images-gallery.bh3KMOXY.js"), "../bricks/map.tsx": () => import("./map.C-QwpTvZ.js"), "../bricks/navbar.tsx": () => import("./navbar.CIgNYs6i.js"), "../bricks/sidebar.tsx": () => import("./sidebar.BB7K2mVt.js"), "../bricks/social-links.tsx": () => import("./social-links.DrKdGt5f.js"), "../bricks/spacer.tsx": () => import("./spacer.DV4uoiWN.js"), "../bricks/testimonials.tsx": () => import("./testimonials.CmLx-c4x.js"), "../bricks/text.tsx": () => import("./text.BA9B3JJY.js"), "../bricks/timeline.tsx": () => import("./timeline.B_hLbnO7.js"), "../bricks/vbox.tsx": () => import("./vbox.BYxi3VWO.js"), "../bricks/video.tsx": () => import("./video.CHU2UgDn.js").then((t) => t.v) }), D = Object.entries(A).reduce(
  (t, [e, o]) => {
    const r = e.match(/\.\/bricks\/(.*)\.tsx$/)[1];
    return t[r] = F(o), t;
  },
  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
  {}
), lt = ({
  brick: t,
  editable: e,
  selectedBrickId: o
}) => {
  const r = D[t.type];
  if (!r)
    return console.warn("Brick not found", t.type), null;
  const i = {
    brick: t,
    editable: e,
    selected: t.id === o
  };
  return /* @__PURE__ */ H(C, { children: /* @__PURE__ */ H(r, { ...i }) });
};
function E(t) {
  return t ? [
    t.color && w(t.color, "backgroundColor"),
    t.image && a({
      backgroundImage: `url(${t.image})`,
      backgroundSize: t.size ?? "auto",
      backgroundRepeat: t.repeat ?? "no-repeat"
    })
  ] : null;
}
function z(t, e) {
  return e ? `@desktop:(${a({ gap: t })}) @mobile:(${a({ gap: e })})` : a({
    gap: t
  });
}
function N(t, e) {
  return e ? `@desktop:(${$(t, "bg-color")}) @mobile:(${$(e, "bg-color")})` : $(t, "bg");
}
function q(t, e) {
  return w(t, "color");
}
function K(t) {
  return w(t, "opacity");
}
function n(t, e) {
  if (!e)
    return t;
  if (t && e)
    return `@desktop:(${t}) @mobile:(${e})`;
  if (e)
    return `@mobile:(${e})`;
}
function R(t) {
  return t ? "sticky top-0 left-0 right-0 self-start w-fill z-[99999] isolate" : null;
}
function T(t, e, o) {
  return !t || !o ? null : o["ui:flex-mode"] === "column" ? [
    t.vertical ? `justify-${t.vertical}` : null,
    t.horizontal ? `items-${t.horizontal}` : null
  ] : [
    t.horizontal ? `justify-${t.horizontal}` : null,
    t.vertical ? `items-${t.vertical}` : null
  ];
}
function _(t, e) {
  return t;
}
function J(t, e) {
  return t ? "grow" : null;
}
const L = {
  "styles:color": q,
  "styles:basicAlign": T,
  "styles:basicGap": _,
  "styles:textShadow": n,
  "styles:opacity": K,
  "styles:objectFit": n,
  "styles:objectPosition": n,
  "styles:heroSize": n,
  "styles:fontSize": n,
  "styles:padding": n,
  // test
  "styles:gap": z,
  "styles:border": n,
  "styles:gradientDirection": n,
  "styles:backgroundColor": N,
  "styles:background": E,
  "styles:shadow": n,
  "styles:rounding": n,
  "styles:direction": n
}, Q = {
  "styles:alignItems": n,
  "styles:justifyContent": n,
  "styles:fixedPositioned": R,
  "styles:alignSelf": n,
  "styles:growHorizontally": J
};
function U(t) {
  return t.includes(".") ? t.split(".").slice(0, -1).join(".") : t;
}
function k(t, e = "", o = {}) {
  if (t.type === "object")
    for (const r in t.properties) {
      const i = j(t.properties[r]);
      i["ui:styleId"] && (o[`${e}${r}`] = i["ui:styleId"]), k(i, `${e}${r}.`, o);
    }
  else t.type === "array" && k(t.items, `${e}[].`, o);
  return o;
}
function B(t, e, o) {
  const { props: r, mobileProps: i } = e, c = I({}, O[e.type].props, r), s = S(e.type), m = Object.entries(t).reduce((l, [p, y]) => {
    var f;
    const u = x(s.props.properties, p);
    if (u) {
      const b = j(u);
      if ((f = b.metadata) != null && f.filter) {
        const v = b.metadata.filter;
        v(b, c) || l.push(p);
      }
    }
    return l;
  }, []), d = o === "brick" ? L : Q;
  return Object.entries(t).reduce(
    (l, [p, y]) => {
      const u = d[y];
      if (!u || m.includes(p))
        return l;
      const f = U(p);
      l[f] = l[f] ?? [];
      const b = x(c, p), v = x(i, p), W = x(s.props.properties, p);
      return l[f].push(
        // @ts-expect-error
        h(u == null ? void 0 : u(b, v, W))
      ), l;
    },
    {}
  );
}
function at(t) {
  const e = S(t.type), o = k(e.props);
  return B(o, t, "brick");
}
function pt({
  brick: t,
  editable: e,
  selected: o,
  isContainerChild: r = !1
}) {
  var l, p, y, u;
  const { props: i, mobileProps: c } = t, s = S(t.type), m = k(s.props), d = Object.values(m), g = B(m, t, "wrapper");
  return h(
    s.staticClasses,
    i.className,
    i.preset,
    "brick-wrapper group/brick flex min-w-min min-h-min",
    ((l = s.maxHeight) == null ? void 0 : l.mobile) && `@mobile:max-h-[${s.maxHeight.mobile}px]`,
    ((p = s.maxHeight) == null ? void 0 : p.desktop) && `@desktop:max-h-[${s.maxHeight.desktop}px]`,
    // Always respect the parent container width
    r && "flex-grow",
    !r && (typeof i.width < "u" ? `@desktop:w-[${i.width}]` : `@desktop:w-[${s.defaultWidth.desktop}]`),
    !r && (typeof (c == null ? void 0 : c.width) < "u" ? `@mobile:min-w-[${c.width}]` : `@mobile:w-[${s.defaultWidth.mobile}]`),
    // Max width
    ((y = s.maxWidth) == null ? void 0 : y.mobile) && `@mobile:max-w-[${s.maxWidth.mobile}px]`,
    (u = s.maxWidth) != null && u.desktop ? `@desktop:max-w-[${s.maxWidth.desktop}px]` : typeof i.width < "u" ? `@desktop:max-w-[${i.width}px]` : null,
    typeof i.height < "u" ? a({
      height: `${i.height}`
    }) : `@mobile:h-[${s.defaultHeight.mobile}] @desktop:h-[${s.defaultHeight.desktop}]`,
    d.includes("styles:fixedPositioned") === !1 && "relative",
    // container children expand to fill the space
    r && "container-child",
    // When a brick is hidden on mobile, hide the wrapper as well
    "@mobile:[&:has([data-mobile-hidden])]:hidden",
    X(e === !0, s.isContainer, r, o),
    ...Object.values(g).flat()
  );
}
function X(t, e, o, r, i) {
  return t ? [
    "select-none transition-[outline] duration-[200ms]",
    "outline outline-2 outline-transparent outline-dashed",
    "outline-offset-2",
    r && !e && "!outline-upstart-400",
    r && e && "!outline-orange-300",
    !r && !o && !e && "hover:(outline-upstart-400/60)",
    !r && !o && e && "hover:(outline-orange-300/20)",
    !r && o && "hover:(outline-upstart-400/60) group-hover/brick:(outline-upstart-400/60)",
    a({
      "&.selected-group": {
        outlineColor: "var(--violet-8) !important"
      },
      "&.moving": {
        outlineColor: "var(--violet-8)"
      },
      "&.resizing": {
        outlineColor: "var(--violet-8)"
      },
      "& [data-brick-group]:hover": {
        outline: "1px dashed var(--violet-8)",
        opacity: 0.85
      },
      // This is the class of the drag element original emplacement
      // "&.moving": {
      //   backgroundColor: "var(--gray-a6)",
      // },
      // Hide all content when dragging
      // "&.moving > *": {
      //   visibility: "hidden",
      // },
      // Hide any UI children elements when dragging
      "&.moving [data-ui]": {
        display: "none"
      }
    })
  ] : null;
}
function ut({ section: t, selected: e, editable: o, previewMode: r }) {
  var d, g;
  const i = t.props.gap ?? "12px", c = M.properties.backgroundColor["ui:presets"], s = t.props.backgroundColor ? c[t.props.backgroundColor].value.main : void 0, m = t.props.gradientDirection;
  return h(
    "flex @mobile:flex-col @desktop:flex-row w-full @container/section group/section overflow-visible relative mx-auto max-sm:max-w-dvw",
    [
      // section.props.preset as string,
      s,
      m,
      t.props.maxWidth,
      typeof t.props.minHeight == "string" && t.props.minHeight !== "full" && `min-h-[${t.props.minHeight}]`,
      // full height
      t.props.minHeight === "full" && o && "min-h-[calc(100dvh-60px)]",
      // when in editor mode
      t.props.minHeight === "full" && !o && "min-h-dvh",
      // when in real mode
      t.props.alignItems,
      t.props.justifyContent,
      // Padding and gap
      // css({ gap: `${GAP}`, paddingInline: `${GAP}`, paddingBlock: `${GAP}` }),
      z(i, (d = t.mobileProps) == null ? void 0 : d.gap),
      n(
        `p-[${i}]`,
        (g = t.mobileProps) != null && g.gap ? `p-[${t.mobileProps.gap}]` : void 0
      ),
      a({
        "&:has([data-is-navbar])": {
          // This is a hack to ensure that the navbar is not affected by the section's padding
          paddingInline: "0px !important",
          paddingBlock: "0px !important",
          flexDirection: "row"
        }
      }),
      "flex-nowrap",
      // Background
      // Section editor styles
      Y({ editable: o, previewMode: r, section: t, selected: e }),
      // Manage the section order using css "order" (flex) property
      a({
        order: t.order
      })
    ]
  );
}
function Y({ section: t, editable: e, selected: o, previewMode: r }) {
  return e ? [
    "select-none transition-[outline] duration-150 relative",
    "outline-dashed outline-2 -outline-offset-2",
    // "self-stretch",
    o ? "outline-upstart-500/40" : "outline-transparent hover:outline-upstart-500/40",
    // this is the grid overlay shown when dragging
    e && r && a`
      &:has(.moving), &:has(.moving) ~ section {
        & [data-floating-ui-portal] {
          display: none;
        }
        & .resizable-handle {
          display: none;
        }
      }`
  ] : null;
}
export {
  lt as B,
  nt as a,
  at as b,
  pt as c,
  ut as u
};
//# sourceMappingURL=use-section-style.BAfgyRSq.js.map
