import { m as P, x as $, S as v } from "./color-system.CScZ5uPf.js";
import { _ as h, B as l } from "./twind.D7be0E5m.js";
import { jsx as H } from "react/jsx-runtime";
import { Suspense as z, lazy as F } from "react";
import { merge as I, get as k } from "lodash-es";
import { c as j, u as S } from "./schema-resolver.ByXeiTGY.js";
import { l as O, n as M } from "./chunk-3RDGTRSB.DySNCMmQ.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) ? l({ backgroundColor: t.$backgroundColor }) : t.$backgroundColor,
    P(t.$textColor) ? l({ 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 l({
    fontFamily: e(t.body),
    fontSize: `${t.base}px`,
    "& h1, & h2, & h3, & h4, & h5, & h6, & h7": {
      fontFamily: e(t.heading)
    }
  });
}
const D = /* @__PURE__ */ Object.assign({ "../bricks/accordion.tsx": () => import("./accordion.QZ6F9m3y.js"), "../bricks/box.tsx": () => import("./box.BjqXOEnX.js"), "../bricks/button.tsx": () => import("./button.BeFGVxcq.js"), "../bricks/card.tsx": () => import("./card.BgMZUjdM.js"), "../bricks/carousel.tsx": () => import("./carousel.DVer60uf.js"), "../bricks/dynamic.tsx": () => import("./dynamic.yuQGx41F.js"), "../bricks/footer.tsx": () => import("./footer.AwolA1cD.js"), "../bricks/form.tsx": () => import("./form.20o1nSt0.js"), "../bricks/hero.tsx": () => import("./hero.DgPH9Jvc.js"), "../bricks/icon.tsx": () => import("./icon.lY0kkUab.js"), "../bricks/image.tsx": () => import("./image.DfBGwV1A.js"), "../bricks/images-gallery.tsx": () => import("./images-gallery.DUWwgw76.js"), "../bricks/map.tsx": () => import("./map.xeA2Pw_R.js"), "../bricks/navbar.tsx": () => import("./navbar.BoijoSdL.js"), "../bricks/sidebar.tsx": () => import("./sidebar.BOod7EhV.js"), "../bricks/social-links.tsx": () => import("./social-links.C6FJn0Lt.js"), "../bricks/spacer.tsx": () => import("./spacer.DJLXZq9R.js"), "../bricks/testimonials.tsx": () => import("./testimonials.Fs4DwqlQ.js"), "../bricks/text.tsx": () => import("./text.CthtexbG.js"), "../bricks/video.tsx": () => import("./video.BViM2ciT.js").then((t) => t.v) }), E = Object.entries(D).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 = E[t.type];
  if (!r)
    return console.warn("Brick not found", t.type), null;
  const s = {
    brick: t,
    editable: e,
    selected: t.id === o
  };
  return /* @__PURE__ */ H(z, { children: /* @__PURE__ */ H(r, { ...s }) });
};
function N(t) {
  return t ? [
    t.color && $(t.color, "backgroundColor"),
    t.image && l({
      backgroundImage: `url(${t.image})`,
      backgroundSize: t.size ?? "auto",
      backgroundRepeat: t.repeat ?? "no-repeat"
    })
  ] : null;
}
function B(t, e) {
  return e ? `@desktop:(${l({ gap: t })}) @mobile:(${l({ gap: e })})` : l({
    gap: t
  });
}
function q(t, e) {
  return e ? `@desktop:(${v(t, "bg-color")}) @mobile:(${v(e, "bg-color")})` : v(t, "bg");
}
function A(t, e) {
  return $(t, "color");
}
function K(t) {
  return $(t, "opacity");
}
function n(t, e, o) {
  if (o != null && o["ui:desktop-only"])
    return `@desktop:(${t})`;
  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) {
  return t;
}
function _(t, e, o) {
  return t ? [t.width, t.color] : null;
}
function J(t, e, o) {
  if (o != null && o["ui:desktop-only"])
    return "@desktop:(flex-grow)";
  if (t && e)
    return "flex-grow";
  if (!e)
    return t ? "@desktop:(flex-grow)" : null;
  if (e)
    return "@mobile:(flex-grow) @desktop:(grow-0)";
}
const L = {
  "styles:color": A,
  "styles:basicGap": T,
  "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:gradientDirection": n,
  "styles:backgroundColor": q,
  "styles:background": N,
  "styles:rounding": n,
  "styles:direction": n,
  // test putting here
  "styles:alignItems": n,
  "styles:justifyContent": n,
  "styles:border": _
}, Q = {
  "styles:direction": n,
  "styles:rounding": n,
  // "styles:alignItems": simpleClassHandler,
  "styles:shadow": n,
  "styles:justifyContent": n,
  "styles:alignItems": n,
  "styles:fixedPositioned": R,
  "styles:alignSelf": n,
  "styles:grow": J
};
function U(t) {
  return t.includes(".") ? t.split(".").slice(0, -1).join(".") : t;
}
function b(t, e = "", o = {}) {
  if (t.type === "object")
    for (const r in t.properties) {
      const s = j(t.properties[r]);
      s["ui:styleId"] && (o[`${e}${r}`] = s["ui:styleId"]), b(s, `${e}${r}.`, o);
    }
  else t.type === "array" && b(t.items, `${e}[].`, o);
  return o;
}
function C(t, e, o) {
  const { props: r, mobileProps: s } = e, c = I({}, O[e.type].props, r), i = S(e.type), m = Object.entries(t).reduce((p, [a, y]) => {
    var d;
    const u = k(i.props.properties, a);
    if (u) {
      const x = j(u);
      if ((d = x.metadata) != null && d.filter) {
        const w = x.metadata.filter;
        w(x, c) || p.push(a);
      }
    }
    return p;
  }, []), f = o === "brick" ? L : Q;
  return Object.entries(t).reduce(
    (p, [a, y]) => {
      const u = f[y];
      if (!u || m.includes(a))
        return p;
      const d = U(a);
      p[d] = p[d] ?? [];
      const x = k(c, a), w = k(s, a), W = k(i.props.properties, a);
      return p[d].push(
        // @ts-expect-error
        h(u == null ? void 0 : u(x, w, W))
      ), p;
    },
    {}
  );
}
function pt(t) {
  const e = S(t.type), o = b(e.props);
  return C(o, t, "brick");
}
function at({
  brick: t,
  editable: e,
  selected: o,
  isContainerChild: r = !1
}) {
  var a, y, u, d;
  const { props: s, mobileProps: c } = t, i = S(t.type), m = b(i.props), f = Object.values(m), g = C(m, t, "wrapper"), p = !!i.isContainer;
  return h(
    i.staticClasses,
    s.className,
    s.preset,
    "brick-wrapper group/brick flex",
    p ? "@desktop:min-w-min min-h-fit shrink-0 h-auto flex-wrap" : (
      // ? "@desktop:min-w-min min-h-fit shrink-0 h-auto @mobile:flex-wrap @desktop:flex-nowrap"
      "min-w-min min-h-min"
    ),
    ((a = i.maxHeight) == null ? void 0 : a.mobile) && `@mobile:max-h-[${i.maxHeight.mobile}px]`,
    ((y = i.maxHeight) == null ? void 0 : y.desktop) && `@desktop:max-h-[${i.maxHeight.desktop}px]`,
    // !isContainerChild &&
    s.grow ? "@desktop:w-auto" : typeof s.width < "u" ? `@desktop:w-[${s.width}]` : `@desktop:w-[${i.defaultWidth.desktop}]`,
    !r && (typeof (c == null ? void 0 : c.width) < "u" ? `@mobile:min-w-[${c.width}]` : `@mobile:w-[${i.defaultWidth.mobile}]`),
    // Max width
    ((u = i.maxWidth) == null ? void 0 : u.mobile) && `@mobile:max-w-[${i.maxWidth.mobile}px]`,
    ((d = i.maxWidth) == null ? void 0 : d.desktop) && `@desktop:max-w-[${i.maxWidth.desktop}px]`,
    typeof s.height < "u" ? l({
      minHeight: `${s.height}`
    }) : `@mobile:min-h-[${i.defaultHeight.mobile}] @desktop:min-h-[${i.defaultHeight.desktop}]`,
    f.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, i.isContainer, r, o),
    ...Object.values(g).flat()
  );
}
function X(t, e, o, r, s) {
  return t ? [
    "select-none transition-[outline] duration-[200ms]",
    "outline outline-2 outline-transparent outline-dashed",
    {
      "outline-offset-2": !e && !o,
      "outline-offset-4": e,
      "outline-offset-0": o
    },
    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)",
    l({
      "&.selected-group": {
        outlineColor: "var(--violet-8) !important"
      },
      "&.moving": {
        outlineColor: "var(--violet-8)"
      },
      "&.resizing": {
        outlineColor: "var(--violet-8)",
        minHeight: "min-content",
        overflow: "hidden"
      },
      "& [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 f, g;
  const s = t.props.gap ?? "12px", c = M.properties.backgroundColor["ui:presets"], i = 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,
      i,
      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}` }),
      B(s, (f = t.mobileProps) == null ? void 0 : f.gap),
      n(
        `p-[${s}]`,
        (g = t.mobileProps) != null && g.gap ? `p-[${t.mobileProps.gap}]` : void 0
      ),
      l({
        "&: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
      l({
        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 && l`
      &:has(.moving), &:has(.moving) ~ section {
        & [data-floating-ui-portal] {
          display: none;
        }
        & .resizable-handle {
          display: none;
        }
      }`
  ] : null;
}
export {
  lt as B,
  nt as a,
  pt as b,
  at as c,
  ut as u
};
//# sourceMappingURL=use-section-style.CihCUEtb.js.map
