feat: Initial AcfLayout field

wp-content/themes/headless/app/components/acf/AcfLayout.gql

@@ -0,0 +1,18 @@
+fragment LayoutColor on GroupLayoutColor_Fields {
+  color @nullToUndefined @enum(values: ["default", "muted", "inverted", "primary"])
+}
+
+fragment LayoutContainer on GroupLayoutContainer_Fields {
+  container @nullToUndefined @enum(values: ["default", "xl", "lg", "md", "sm", "fluid", "none"])
+}
+
+fragment LayoutPadding on GroupLayoutPadding_Fields {
+  verticalPadding @nullToUndefined @enum(values: ["none", "sm", "md", "lg"])
+}
+
+fragment AcfLayout on GroupAbstractBuilderSectionsLayoutSettings_Fields {
+  __typename
+  ...LayoutColor
+  ...LayoutContainer
+  ...LayoutPadding
+}

wp-content/themes/headless/app/components/acf/AcfLayout.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { tv } from "tailwind-variants";
+
+import type { AcfLayoutFragment } from "#graphql/types";
+
+const props = defineProps<{ layout: AcfLayoutFragment }>();
+
+const tvLayoutVariants = tv({
+  slots: {
+    base: "",
+    inner: "",
+  },
+  variants: {
+    display: {
+      block: { inner: "block" },
+      flex: { inner: "flex flex-col gap-6" },
+      grid: { inner: "grid" },
+    },
+
+    color: {
+      default: { base: "bg-default" },
+      muted: { base: "bg-muted" },
+      inverted: { base: "bg-inverted text-inverted" },
+      primary: { base: "bg-primary text-inverted" },
+    },
+
+    container: {
+      default: { inner: "container" },
+      xl: { inner: "container-xl" },
+      lg: { inner: "container-lg" },
+      md: { inner: "container-md" },
+      sm: { inner: "container-sm" },
+      fluid: { inner: "container-fluid" },
+      none: { inner: "container-none" },
+    },
+
+    verticalPadding: {
+      none: { base: "py-0" },
+      sm: { base: "py-6" },
+      md: { base: "py-12" },
+      lg: { base: "py-24" },
+    },
+  },
+  defaultVariants: {
+    display: "block",
+    color: "default",
+    container: "default",
+    verticalPadding: "md",
+  },
+});
+
+const { base, inner } = tvLayoutVariants(props.layout);
+</script>
+
+<template>
+  <section :class="base()">
+    <div :class="inner()">
+      <slot />
+    </div>
+  </section>
+</template>

wp-content/themes/headless/app/components/sections/SectionProse.gql

@@ -1,3 +1,6 @@
 fragment SectionProse on GroupAbstractBuilderSectionsProseLayout {
   content
+  layout: layoutSettings @nonNull {
+    ...AcfLayout
+  }
 }

wp-content/themes/headless/app/components/sections/SectionProse.vue

@@ -5,5 +5,7 @@ defineProps<{ section: SectionProseFragment }>();
 </script>
 
 <template>
-  <div class="prose" v-html="section.content"></div>
+  <AcfLayout :layout="section.layout">
+    <div class="prose" v-html="section.content"></div>
+  </AcfLayout>
 </template>