import { m as H, x as S, S as w } from "./color-system.CScZ5uPf.js";
import { _ as v, B as a } from "./twind.D7be0E5m.js";
import { jsx as j } from "react/jsx-runtime";
import { Suspense as F, lazy as M } from "react";
import { merge as C, get as k } from "lodash-es";
import { c as z, u as P } from "./schema-resolver.iYlSHQsB.js";
import { M as I, n as O } from "./_commonjsHelpers.DgVrNa4W.js";
import "@sinclair/typebox";
function nt({ attributes: t, editable: e, typography: o, showIntro: i }) {
  return v(
    "flex flex-col group/page mx-auto relative max-w-full w-full p-0 antialiased",
    e && "overflow-hidden min-h-[100cqh]",
    H(t.$backgroundColor) ? a({ backgroundColor: t.$backgroundColor }) : t.$backgroundColor,
    H(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 && i && "[&>.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.DQInpAio.js"), "../bricks/button.tsx": () => import("./button.BiPP5iRr.js"), "../bricks/card.tsx": () => import("./card.CM0AACLy.js"), "../bricks/carousel.tsx": () => import("./carousel.DW9YoEQY.js"), "../bricks/dynamic.tsx": () => import("./dynamic.i30tYu_7.js"), "../bricks/footer.tsx": () => import("./footer.IgYCs1gL.js"), "../bricks/form.tsx": () => import("./form.D8kiLsO8.js"), "../bricks/hbox.tsx": () => import("./hbox.Bqb4_psb.js"), "../bricks/hero.tsx": () => import("./hero.7ioeAVKD.js"), "../bricks/icon.tsx": () => import("./icon.DHFyfRzK.js"), "../bricks/image.tsx": () => import("./image.Dcqyzdlc.js"), "../bricks/images-gallery.tsx": () => import("./images-gallery.Cph1S8FH.js"), "../bricks/map.tsx": () => import("./map.Bv-mWoJt.js"), "../bricks/navbar.tsx": () => import("./navbar.BEAV7q9v.js"), "../bricks/sidebar.tsx": () => import("./sidebar.BB7K2mVt.js"), "../bricks/social-links.tsx": () => import("./social-links.DZg-Qk_g.js"), "../bricks/spacer.tsx": () => import("./spacer.SW4LOWno.js"), "../bricks/testimonials.tsx": () => import("./testimonials.ClFqoxNs.js"), "../bricks/text.tsx": () => import("./text.Cee5sDXF.js"), "../bricks/timeline.tsx": () => import("./timeline.B_hLbnO7.js"), "../bricks/vbox.tsx": () => import("./vbox.dA61OWwU.js"), "../bricks/video.tsx": () => import("./video.Lueddzq2.js").then((t) => t.v) }), D = Object.entries(A).reduce(
  (t, [e, o]) => {
    const i = e.match(/\.\/bricks\/(.*)\.tsx$/)[1];
    return t[i] = M(o), t;
  },
  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
  {}
), lt = ({
  brick: t,
  editable: e,
  selectedBrickId: o
}) => {
  const i = D[t.type];
  if (!i)
    return console.warn("Brick not found", t.type), null;
  const s = {
    brick: t,
    editable: e,
    selected: t.id === o
  };
  return /* @__PURE__ */ j(F, { children: /* @__PURE__ */ j(i, { ...s }) });
};
function E(t) {
  return t ? [
    t.color && S(t.color, "backgroundColor"),
    t.image && a({
      backgroundImage: `url(${t.image})`,
      backgroundSize: t.size ?? "auto",
      backgroundRepeat: t.repeat ?? "no-repeat"
    })
  ] : null;
}
function B(t, e) {
  return e ? `@desktop:(${a({ gap: t })}) @mobile:(${a({ gap: e })})` : a({
    gap: t
  });
}
function N(t, e) {
  return e ? `@desktop:(${w(t, "bg-color")}) @mobile:(${w(e, "bg-color")})` : w(t, "bg");
}
function q(t, e) {
  return S(t, "color");
}
function K(t) {
  return S(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": B,
  "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 $(t, e = "", o = {}) {
  if (t.type === "object")
    for (const i in t.properties) {
      const s = z(t.properties[i]);
      s["ui:styleId"] && (o[`${e}${i}`] = s["ui:styleId"]), $(s, `${e}${i}.`, o);
    }
  else t.type === "array" && $(t.items, `${e}[].`, o);
  return o;
}
function W(t, e, o) {
  const { props: i, mobileProps: s } = e, m = C({}, I[e.type].props, i), r = P(e.type), f = Object.entries(t).reduce((l, [p, x]) => {
    var c;
    const u = k(r.props.properties, p);
    if (u) {
      const d = z(u);
      if ((c = d.metadata) != null && c.filter) {
        const b = d.metadata.filter;
        b(d, m) || l.push(p);
      }
    }
    return l;
  }, []), g = o === "brick" ? L : Q;
  return Object.entries(t).reduce(
    (l, [p, x]) => {
      const u = g[x];
      if (!u || f.includes(p))
        return l;
      const c = U(p);
      l[c] = l[c] ?? [];
      const d = k(m, p), b = k(s, p), h = k(r.props.properties, p);
      return l[c].push(
        // @ts-expect-error
        v(u == null ? void 0 : u(d, b, h))
      ), l;
    },
    {}
  );
}
function at(t) {
  const e = P(t.type), o = $(e.props);
  return W(o, t, "brick");
}
function pt({
  brick: t,
  editable: e,
  selected: o,
  isContainerChild: i = !1
}) {
  var l, p, x, u, c, d, b, h;
  const { props: s, mobileProps: m } = t, r = P(t.type), f = $(r.props), g = Object.values(f), y = W(f, t, "wrapper");
  return v(
    r.staticClasses,
    s.className,
    s.preset,
    "brick-wrapper group/brick flex",
    (l = r.minWidth) != null && l.mobile ? `@mobile:min-w-[${r.minWidth.mobile}px]` : "@mobile:min-w-min",
    (p = r.minWidth) != null && p.desktop ? `@desktop:min-w-[${r.minWidth.desktop}px]` : "@desktop:min-w-min",
    (x = r.minHeight) != null && x.mobile ? `@mobile:min-h-[${r.minHeight.mobile}px]` : "@mobile:min-h-fit",
    (u = r.minHeight) != null && u.desktop ? `@desktop:min-h-[${r.minHeight.desktop}px]` : "@desktop:min-h-fit",
    ((c = r.maxHeight) == null ? void 0 : c.mobile) && `@mobile:max-h-[${r.maxHeight.mobile}px]`,
    ((d = r.maxHeight) == null ? void 0 : d.desktop) && `@desktop:max-h-[${r.maxHeight.desktop}px]`,
    // Always respect the parent container width
    i && "flex-grow",
    !i && typeof s.width < "u" && `@desktop:w-[${s.width}]`,
    !i && typeof s.width > "u" && `@desktop:w-[${r.defaultWidth.desktop}]`,
    !i && typeof (m == null ? void 0 : m.width) < "u" ? `@mobile:min-w-[${m.width}]` : `@mobile:w-[${r.defaultWidth.mobile}]`,
    // Max width
    ((b = r.maxWidth) == null ? void 0 : b.mobile) && `@mobile:max-w-[${r.maxWidth.mobile}px]`,
    (h = r.maxWidth) != null && h.desktop ? `@desktop:max-w-[${r.maxWidth.desktop}px]` : typeof s.width < "u" ? `@desktop:max-w-[${s.width}px]` : null,
    typeof s.height < "u" && a({
      height: `${s.height}`
    }),
    typeof s.height > "u" && `@mobile:h-[${r.defaultHeight.mobile}] @desktop:h-[${r.defaultHeight.desktop}]`,
    g.includes("styles:fixedPositioned") === !1 && "relative",
    // container children expand to fill the space
    i && "container-child",
    // When a brick is hidden on mobile, hide the wrapper as well
    "@mobile:[&:has([data-mobile-hidden])]:hidden",
    X(e === !0, r.isContainer, i, o),
    ...Object.values(y).flat()
  );
}
function X(t, e, o, i, s) {
  return t ? [
    "select-none transition-[outline] duration-[200ms]",
    "outline outline-2 outline-transparent outline-dashed",
    e ? "outline-offset-[6px]" : "outline-offset-2",
    i && !e && "!outline-upstart-400",
    i && e && "!outline-orange-300",
    !i && !o && !e && "hover:(outline-upstart-400/60)",
    !i && !o && e && "hover:(outline-orange-300/20)",
    !i && 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: i }) {
  var g, y;
  const s = t.props.gap ?? "12px", m = O.properties.backgroundColor["ui:presets"], r = t.props.backgroundColor ? m[t.props.backgroundColor].value.main : void 0, f = t.props.gradientDirection;
  return v(
    "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,
      r,
      f,
      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}` }),
      B(s, (g = t.mobileProps) == null ? void 0 : g.gap),
      n(
        `p-[${s}]`,
        (y = t.mobileProps) != null && y.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: i, 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: i }) {
  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 && i && 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.D7ZN4IXn.js.map
