@riverbankcms/sdk 0.60.0 → 0.60.1

package/dist/server/theme-bridge.mjs

@@ -2052,6 +2052,44 @@ function escapeStyleContent(css) {
 // ../theme-core/src/responsiveMode.ts
 var DEFAULT_THEME_RESPONSIVE_MODE = "viewport";
 var THEME_RESPONSIVE_CONTAINER_NAME = "rb-site";
+var THEME_RESPONSIVE_MODE_ATTR = "data-rb-responsive-mode";
+function getResponsiveScopeSpec(mode = DEFAULT_THEME_RESPONSIVE_MODE) {
+  if (mode === "container") {
+    return {
+      kind: "container",
+      selector: `[${THEME_RESPONSIVE_MODE_ATTR}="container"]`,
+      containerName: THEME_RESPONSIVE_CONTAINER_NAME
+    };
+  }
+  return {
+    kind: "viewport",
+    selector: `[${THEME_RESPONSIVE_MODE_ATTR}="viewport"]`
+  };
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+var RESPONSIVE_SCOPE_RULE_PATTERN = new RegExp(
+  buildResponsiveScopeRulePatternSource(),
+  "g"
+);
+var RESPONSIVE_SCOPE_RULE_AT_PATTERN = new RegExp(
+  buildResponsiveScopeRulePatternSource(),
+  "y"
+);
+function buildResponsiveScopeRulePatternSource() {
+  return [
+    "@scope",
+    "\\(\\[",
+    escapeRegExp(THEME_RESPONSIVE_MODE_ATTR),
+    '="(?:viewport|container)"\\]\\)',
+    "to",
+    "\\((?::scope )?\\[",
+    escapeRegExp(THEME_RESPONSIVE_MODE_ATTR),
+    "\\]\\)",
+    "\\{"
+  ].join("\\s*");
+}
 
 // ../theme-core/src/mock-themes/components/swatch.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -3738,45 +3776,53 @@ var containerResponsiveThemeCss = `/*
     flex-basis: 16.666667%;
   }
   @container rb-site (min-width: 768px) {
-    .rb-md-basis-full {
-      flex-basis: 100%;
-    }
-    .rb-md-basis-1-2 {
-      flex-basis: 50%;
-    }
-    .rb-md-basis-1-3 {
-      flex-basis: 33.333333%;
-    }
-    .rb-md-basis-1-4 {
-      flex-basis: 25%;
-    }
-    .rb-md-basis-1-5 {
-      flex-basis: 20%;
-    }
-    .rb-md-basis-1-6 {
-      flex-basis: 16.666667%;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-md-basis-full {
+        flex-basis: 100%;
+      }
+      .rb-md-basis-1-2 {
+        flex-basis: 50%;
+      }
+      .rb-md-basis-1-3 {
+        flex-basis: 33.333333%;
+      }
+      .rb-md-basis-1-4 {
+        flex-basis: 25%;
+      }
+      .rb-md-basis-1-5 {
+        flex-basis: 20%;
+      }
+      .rb-md-basis-1-6 {
+        flex-basis: 16.666667%;
+      }
     }
-  }
+
+}
   @container rb-site (min-width: 1024px) {
-    .rb-lg-basis-full {
-      flex-basis: 100%;
-    }
-    .rb-lg-basis-1-2 {
-      flex-basis: 50%;
-    }
-    .rb-lg-basis-1-3 {
-      flex-basis: 33.333333%;
-    }
-    .rb-lg-basis-1-4 {
-      flex-basis: 25%;
-    }
-    .rb-lg-basis-1-5 {
-      flex-basis: 20%;
-    }
-    .rb-lg-basis-1-6 {
-      flex-basis: 16.666667%;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-lg-basis-full {
+        flex-basis: 100%;
+      }
+      .rb-lg-basis-1-2 {
+        flex-basis: 50%;
+      }
+      .rb-lg-basis-1-3 {
+        flex-basis: 33.333333%;
+      }
+      .rb-lg-basis-1-4 {
+        flex-basis: 25%;
+      }
+      .rb-lg-basis-1-5 {
+        flex-basis: 20%;
+      }
+      .rb-lg-basis-1-6 {
+        flex-basis: 16.666667%;
+      }
     }
-  }
+
+}
   .rb-shrink-0 {
     flex-shrink: 0;
   }
@@ -3798,64 +3844,80 @@ var containerResponsiveThemeCss = `/*
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
   @container rb-site (min-width: 640px) {
-    .rb-sm-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .rb-sm-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .rb-sm-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-sm-grid-cols-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .rb-sm-grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .rb-sm-grid-cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
     }
-  }
+
+}
   @container rb-site (min-width: 768px) {
-    .rb-md-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .rb-md-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .rb-md-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-md-grid-cols-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .rb-md-grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .rb-md-grid-cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
     }
-  }
+
+}
   @container rb-site (min-width: 1024px) {
-    .rb-lg-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .rb-lg-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .rb-lg-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-    .rb-lg-w-3\\/4 {
-      width: 75%;
-    }
-    .rb-lg-col-span-1 {
-      grid-column: span 1 / span 1;
-    }
-    .rb-lg-col-span-2 {
-      grid-column: span 2 / span 2;
-    }
-    .rb-lg-col-span-3 {
-      grid-column: span 3 / span 3;
-    }
-    .rb-lg-col-span-4 {
-      grid-column: span 4 / span 4;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-lg-grid-cols-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .rb-lg-grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .rb-lg-grid-cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+      .rb-lg-w-3\\/4 {
+        width: 75%;
+      }
+      .rb-lg-col-span-1 {
+        grid-column: span 1 / span 1;
+      }
+      .rb-lg-col-span-2 {
+        grid-column: span 2 / span 2;
+      }
+      .rb-lg-col-span-3 {
+        grid-column: span 3 / span 3;
+      }
+      .rb-lg-col-span-4 {
+        grid-column: span 4 / span 4;
+      }
     }
-  }
+
+}
   @container rb-site (min-width: 1280px) {
-    .rb-xl-grid-cols-2 {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    .rb-xl-grid-cols-3 {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    .rb-xl-grid-cols-4 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-xl-grid-cols-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .rb-xl-grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .rb-xl-grid-cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
     }
-  }
+
+}
 
   /* Alignment */
   .rb-items-start {
@@ -3924,13 +3986,17 @@ var containerResponsiveThemeCss = `/*
     row-gap: 0.75rem;
   }
   @container rb-site (min-width: 768px) {
-    .rb-md-gap-0 {
-      gap: 0;
-    }
-    .rb-md-gap-10 {
-      gap: 2.5rem;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-md-gap-0 {
+        gap: 0;
+      }
+      .rb-md-gap-10 {
+        gap: 2.5rem;
+      }
     }
-  }
+
+}
 
   .rb-space-y-1 > :not([hidden]) ~ :not([hidden]) {
     margin-top: 0.25rem;
@@ -4032,137 +4098,149 @@ var containerResponsiveThemeCss = `/*
   }
 
   @container rb-site (min-width: 640px) {
-    .rb-sm-py-16 {
-      padding-top: 4rem;
-      padding-bottom: 4rem;
-    }
-    .rb-sm-py-20 {
-      padding-top: 5rem;
-      padding-bottom: 5rem;
-    }
-    .rb-sm-p-6 {
-      padding: 1.5rem;
-    }
-    .rb-sm-flex {
-      display: flex;
-    }
-    .rb-sm-block {
-      display: block;
-    }
-    .rb-sm-inline {
-      display: inline;
-    }
-    .rb-sm-inline-block {
-      display: inline-block;
-    }
-    .rb-sm-inline-flex {
-      display: inline-flex;
-    }
-    .rb-sm-grid {
-      display: grid;
-    }
-    .rb-sm-hidden {
-      display: none;
-    }
-    .rb-sm-flex-row {
-      flex-direction: row;
-    }
-    .rb-sm-items-start {
-      align-items: flex-start;
-    }
-    .rb-sm-items-center {
-      align-items: center;
-    }
-    .rb-sm-justify-between {
-      justify-content: space-between;
-    }
-    .rb-sm-p-8 {
-      padding: 2rem;
-    }
-    .rb-sm-text-lg {
-      font-size: 1.125rem;
-      line-height: 1.75rem;
-    }
-    .rb-sm-text-xl {
-      font-size: 1.25rem;
-      line-height: 1.75rem;
-    }
-    .rb-sm-text-4xl {
-      font-size: 2.25rem;
-      line-height: 2.5rem;
-    }
 
-    .rb-sm-w-auto {
-      width: auto;
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-sm-py-16 {
+        padding-top: 4rem;
+        padding-bottom: 4rem;
+      }
+      .rb-sm-py-20 {
+        padding-top: 5rem;
+        padding-bottom: 5rem;
+      }
+      .rb-sm-p-6 {
+        padding: 1.5rem;
+      }
+      .rb-sm-flex {
+        display: flex;
+      }
+      .rb-sm-block {
+        display: block;
+      }
+      .rb-sm-inline {
+        display: inline;
+      }
+      .rb-sm-inline-block {
+        display: inline-block;
+      }
+      .rb-sm-inline-flex {
+        display: inline-flex;
+      }
+      .rb-sm-grid {
+        display: grid;
+      }
+      .rb-sm-hidden {
+        display: none;
+      }
+      .rb-sm-flex-row {
+        flex-direction: row;
+      }
+      .rb-sm-items-start {
+        align-items: flex-start;
+      }
+      .rb-sm-items-center {
+        align-items: center;
+      }
+      .rb-sm-justify-between {
+        justify-content: space-between;
+      }
+      .rb-sm-p-8 {
+        padding: 2rem;
+      }
+      .rb-sm-text-lg {
+        font-size: 1.125rem;
+        line-height: 1.75rem;
+      }
+      .rb-sm-text-xl {
+        font-size: 1.25rem;
+        line-height: 1.75rem;
+      }
+      .rb-sm-text-4xl {
+        font-size: 2.25rem;
+        line-height: 2.5rem;
+      }
+
+      .rb-sm-w-auto {
+        width: auto;
+      }
     }
-  }
+
+}
   @container rb-site (min-width: 768px) {
-    .rb-md-py-20 {
-      padding-top: 5rem;
-      padding-bottom: 5rem;
-    }
-    .rb-md-py-24 {
-      padding-top: 6rem;
-      padding-bottom: 6rem;
-    }
-    .rb-md-w-1\\/3 {
-      width: 33.333333%;
-    }
 
-    .rb-md-flex {
-      display: flex;
-    }
-    .rb-md-block {
-      display: block;
-    }
-    .rb-md-inline {
-      display: inline;
-    }
-    .rb-md-inline-block {
-      display: inline-block;
-    }
-    .rb-md-inline-flex {
-      display: inline-flex;
-    }
-    .rb-md-grid {
-      display: grid;
-    }
-    .rb-md-hidden {
-      display: none;
-    }
-    .rb-md-flex-row {
-      flex-direction: row;
-    }
-    .rb-md-flex-row-reverse {
-      flex-direction: row-reverse;
-    }
-    .rb-md-items-start {
-      align-items: flex-start;
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-md-py-20 {
+        padding-top: 5rem;
+        padding-bottom: 5rem;
+      }
+      .rb-md-py-24 {
+        padding-top: 6rem;
+        padding-bottom: 6rem;
+      }
+      .rb-md-w-1\\/3 {
+        width: 33.333333%;
+      }
+
+      .rb-md-flex {
+        display: flex;
+      }
+      .rb-md-block {
+        display: block;
+      }
+      .rb-md-inline {
+        display: inline;
+      }
+      .rb-md-inline-block {
+        display: inline-block;
+      }
+      .rb-md-inline-flex {
+        display: inline-flex;
+      }
+      .rb-md-grid {
+        display: grid;
+      }
+      .rb-md-hidden {
+        display: none;
+      }
+      .rb-md-flex-row {
+        flex-direction: row;
+      }
+      .rb-md-flex-row-reverse {
+        flex-direction: row-reverse;
+      }
+      .rb-md-items-start {
+        align-items: flex-start;
+      }
     }
-  }
+
+}
   @container rb-site (min-width: 1024px) {
-    .rb-lg-flex {
-      display: flex;
-    }
-    .rb-lg-block {
-      display: block;
-    }
-    .rb-lg-inline {
-      display: inline;
-    }
-    .rb-lg-inline-block {
-      display: inline-block;
-    }
-    .rb-lg-inline-flex {
-      display: inline-flex;
-    }
-    .rb-lg-grid {
-      display: grid;
-    }
-    .rb-lg-hidden {
-      display: none;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-lg-flex {
+        display: flex;
+      }
+      .rb-lg-block {
+        display: block;
+      }
+      .rb-lg-inline {
+        display: inline;
+      }
+      .rb-lg-inline-block {
+        display: inline-block;
+      }
+      .rb-lg-inline-flex {
+        display: inline-flex;
+      }
+      .rb-lg-grid {
+        display: grid;
+      }
+      .rb-lg-hidden {
+        display: none;
+      }
     }
-  }
+
+}
 
   /* Margin */
   .rb-m-0 {
@@ -4419,8 +4497,9 @@ var containerResponsiveThemeCss = `/*
     font-weight: 700;
   }
   .rb-font-mono {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-      "Liberation Mono", "Courier New", monospace;
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
   }
   .rb-leading-relaxed {
     line-height: 1.625;
@@ -4638,39 +4717,44 @@ var containerResponsiveThemeCss = `/*
   }
 
   @container rb-site (max-width: 639px) {
-    .rb-image-gallery-marquee {
-      overflow-x: auto;
-      overflow-y: hidden;
-      -webkit-overflow-scrolling: touch;
-      touch-action: pan-x;
-      scrollbar-width: none;
-    }
 
-    .rb-image-gallery-marquee::-webkit-scrollbar {
-      display: none;
-    }
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-image-gallery-marquee {
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+        touch-action: pan-x;
+        scrollbar-width: none;
+      }
 
-    /* Let users swipe smoothly without fighting autoplay while interacting. */
-    .rb-image-gallery-marquee:active .rb-animate-marquee,
-    .rb-image-gallery-marquee:focus-within .rb-animate-marquee {
-      animation-play-state: paused;
-    }
+      .rb-image-gallery-marquee::-webkit-scrollbar {
+        display: none;
+      }
 
-    .rb-container-full.rb-image-gallery-marquee-container {
-      padding-left: 0;
-      padding-right: 0;
-    }
+      /* Let users swipe smoothly without fighting autoplay while interacting. */
+      .rb-image-gallery-marquee:active .rb-animate-marquee,
+      .rb-image-gallery-marquee:focus-within .rb-animate-marquee {
+        animation-play-state: paused;
+      }
 
-    /* Marquee variant: keep images in color on mobile for legibility. */
-    .rb-image-gallery-marquee-container .rb-filter-grayscale,
-    .rb-image-gallery-marquee-container .rb-filter-grayscale-hover-reveal {
-      filter: none;
-    }
+      .rb-container-full.rb-image-gallery-marquee-container {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      /* Marquee variant: keep images in color on mobile for legibility. */
+      .rb-image-gallery-marquee-container .rb-filter-grayscale,
+      .rb-image-gallery-marquee-container .rb-filter-grayscale-hover-reveal {
+        filter: none;
+      }
 
-    .rb-image-gallery-marquee-container .rb-filter-grayscale-hover-reveal:hover {
-      filter: none;
+      .rb-image-gallery-marquee-container
+        .rb-filter-grayscale-hover-reveal:hover {
+        filter: none;
+      }
     }
-  }
+
+}
 
   @media (prefers-reduced-motion: reduce) {
     .rb-animate-marquee {
@@ -4775,12 +4859,16 @@ var containerResponsiveThemeCss = `/*
   }
 
   @container rb-site (min-width: 640px) {
-    .rb-container,
-    .rb-container-full {
-      padding-left: 1.5rem;
-      padding-right: 1.5rem;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-container,
+      .rb-container-full {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+      }
     }
-  }
+
+}
 
   /* Flex alignment */
   .rb-self-start {
@@ -4814,27 +4902,31 @@ var containerResponsiveThemeCss = `/*
   }
 
   @container rb-site (min-width: 640px) {
-    .rb-section-pad-compact {
-      padding-top: 2rem;
-      padding-bottom: 2rem;
-    }
-    .rb-section-pad-cozy {
-      padding-top: 3.5rem;
-      padding-bottom: 3.5rem;
-    }
-    .rb-section-pad-medium {
-      padding-top: 4rem;
-      padding-bottom: 4rem;
-    }
-    .rb-section-pad-comfortable {
-      padding-top: 5rem;
-      padding-bottom: 5rem;
-    }
-    .rb-section-pad-spacious {
-      padding-top: 7rem;
-      padding-bottom: 7rem;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-section-pad-compact {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+      }
+      .rb-section-pad-cozy {
+        padding-top: 3.5rem;
+        padding-bottom: 3.5rem;
+      }
+      .rb-section-pad-medium {
+        padding-top: 4rem;
+        padding-bottom: 4rem;
+      }
+      .rb-section-pad-comfortable {
+        padding-top: 5rem;
+        padding-bottom: 5rem;
+      }
+      .rb-section-pad-spacious {
+        padding-top: 7rem;
+        padding-bottom: 7rem;
+      }
     }
-  }
+
+}
 
   .rb-container-pad-none {
     padding: 0;
@@ -4856,22 +4948,26 @@ var containerResponsiveThemeCss = `/*
   }
 
   @container rb-site (min-width: 640px) {
-    .rb-container-pad-compact {
-      padding: 1.5rem;
-    }
-    .rb-container-pad-cozy {
-      padding: 2rem;
-    }
-    .rb-container-pad-medium {
-      padding: 2rem;
-    }
-    .rb-container-pad-comfortable {
-      padding: 2.5rem;
-    }
-    .rb-container-pad-spacious {
-      padding: 3.5rem;
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-container-pad-compact {
+        padding: 1.5rem;
+      }
+      .rb-container-pad-cozy {
+        padding: 2rem;
+      }
+      .rb-container-pad-medium {
+        padding: 2rem;
+      }
+      .rb-container-pad-comfortable {
+        padding: 2.5rem;
+      }
+      .rb-container-pad-spacious {
+        padding: 3.5rem;
+      }
     }
-  }
+
+}
 
   /* Semantic gap tokens (theme-aware via --space-mult) */
   .rb-gap-semantic-none {
@@ -4900,27 +4996,31 @@ var containerResponsiveThemeCss = `/*
   }
 
   @container rb-site (min-width: 768px) {
-    .rb-gap-semantic-compact {
-      --rb-semantic-gap: calc(1.25rem * var(--space-mult, 1));
-      gap: calc(1.25rem * var(--space-mult, 1));
-    }
-    .rb-gap-semantic-cozy {
-      --rb-semantic-gap: calc(2.25rem * var(--space-mult, 1));
-      gap: calc(2.25rem * var(--space-mult, 1));
-    }
-    .rb-gap-semantic-medium {
-      --rb-semantic-gap: calc(3.5rem * var(--space-mult, 1));
-      gap: calc(3.5rem * var(--space-mult, 1));
-    }
-    .rb-gap-semantic-comfortable {
-      --rb-semantic-gap: calc(5.75rem * var(--space-mult, 1));
-      gap: calc(5.75rem * var(--space-mult, 1));
-    }
-    .rb-gap-semantic-spacious {
-      --rb-semantic-gap: calc(8.75rem * var(--space-mult, 1));
-      gap: calc(8.75rem * var(--space-mult, 1));
+
+    @scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+      .rb-gap-semantic-compact {
+        --rb-semantic-gap: calc(1.25rem * var(--space-mult, 1));
+        gap: calc(1.25rem * var(--space-mult, 1));
+      }
+      .rb-gap-semantic-cozy {
+        --rb-semantic-gap: calc(2.25rem * var(--space-mult, 1));
+        gap: calc(2.25rem * var(--space-mult, 1));
+      }
+      .rb-gap-semantic-medium {
+        --rb-semantic-gap: calc(3.5rem * var(--space-mult, 1));
+        gap: calc(3.5rem * var(--space-mult, 1));
+      }
+      .rb-gap-semantic-comfortable {
+        --rb-semantic-gap: calc(5.75rem * var(--space-mult, 1));
+        gap: calc(5.75rem * var(--space-mult, 1));
+      }
+      .rb-gap-semantic-spacious {
+        --rb-semantic-gap: calc(8.75rem * var(--space-mult, 1));
+        gap: calc(8.75rem * var(--space-mult, 1));
+      }
     }
-  }
+
+}
 
   /* Backdrop blur helpers */
   .rb-backdrop-blur {
@@ -5274,11 +5374,13 @@ var containerResponsiveThemeCss = `/*
   line-height: var(--rb-prose-lg-line-height);
 }
 @container rb-site (min-width: 640px) {
-  :where(.theme-scope) .rb-prose-xl-sm {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .rb-prose-xl-sm {
     font-size: var(--rb-prose-xl-sm-font-size);
     line-height: var(--rb-prose-xl-sm-line-height);
   }
 }
+}
 
 /* Neutral prose uses theme text color by default */
 :where(.theme-scope) .rb-prose-neutral {
@@ -5362,22 +5464,28 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) .rb-columns-equal-height {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .rb-columns-equal-height {
     --rb-columns-cols: var(--rb-columns-cols-md, var(--rb-columns-cols));
   }
 }
+}
 
 @container rb-site (min-width: 1024px) {
-  :where(.theme-scope) .rb-columns-equal-height {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .rb-columns-equal-height {
     --rb-columns-cols: var(--rb-columns-cols-lg, var(--rb-columns-cols));
   }
 }
+}
 
 @container rb-site (min-width: 1280px) {
-  :where(.theme-scope) .rb-columns-equal-height {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .rb-columns-equal-height {
     --rb-columns-cols: var(--rb-columns-cols-xl, var(--rb-columns-cols));
   }
 }
+}
 
 :where(.theme-scope) .rb-columns-equal-height > * {
   height: var(--rb-columns-tile-h);
@@ -5999,7 +6107,8 @@ var containerResponsiveThemeCss = `/*
 
 /* Mobile: reduce site title size (~30%) to keep header compact */
 @container rb-site (max-width: 767px) {
-  :where(.theme-scope) .header-logo-text {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .header-logo-text {
     font-size: 0.8rem;
     line-height: 1.25rem;
   }
@@ -6010,6 +6119,7 @@ var containerResponsiveThemeCss = `/*
     line-height: 1.25rem;
   }
 }
+}
 
 /* Centered/editorial variants use larger title */
 :where(.theme-scope) .header-variant-centered .header-logo-text,
@@ -6033,10 +6143,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (max-width: 767px) {
-  :where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .rb-header-shrink.header-scrolled .header-logo-text {
     font-size: 0.75rem;
   }
 }
+}
 
 /* =================================================================
    Accessibility: Reduced Motion
@@ -6480,10 +6592,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"]) .er-event-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+}
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-row {
   display: flex;
@@ -6716,12 +6830,14 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="event-registration"]) .er-layout {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"]) .er-layout {
     /* Desktop: main + sidebar */
     grid-template-columns: 1fr 300px;
     grid-template-areas: "main summary";
   }
 }
+}
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-layout-main {
   grid-area: main;
@@ -6803,10 +6919,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 640px) {
-  :where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"]) .er-step-label {
     display: inline;
   }
 }
+}
 
 /* Sticky order summary */
 :where(.theme-scope) :where([data-block="event-registration"]) .er-summary {
@@ -6823,11 +6941,13 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="event-registration"]) .er-summary {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"]) .er-summary {
     position: sticky;
     top: 1rem;
   }
 }
+}
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-summary-event {
   font-weight: 600;
@@ -6897,12 +7017,14 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="event-registration"]) .er-guest-card {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"]) .er-guest-card {
     grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
     column-gap: 1rem;
     align-items: start;
   }
 }
+}
 
 /* Shake animation for validation errors */
 @keyframes er-shake {
@@ -7047,7 +7169,8 @@ var containerResponsiveThemeCss = `/*
  * ============================================================================= */
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope)
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope)
     :where([data-block="event-listing"], [data-block="event-spotlight"], [data-block="event-calendar"], [data-block="event-combined"])
     .event-card[data-orientation="horizontal"] {
     display: flex;
@@ -7098,6 +7221,7 @@ var containerResponsiveThemeCss = `/*
     text-align: right;
   }
 }
+}
 
 /* Keep token list in sync with \`EVENT_CATEGORY_BADGE_TOKENS\` in \`packages/blocks/src/system/constants/events.ts\`. */
 :where(.theme-scope)
@@ -7177,7 +7301,8 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout {
     grid-template-columns: 1fr 260px;
     grid-template-areas:
       "main sidebar"
@@ -7192,6 +7317,7 @@ var containerResponsiveThemeCss = `/*
       "footer";
   }
 }
+}
 
 :where(.theme-scope) :where([data-block="event-registration"]) .er-payment-layout-main {
   grid-area: main;
@@ -8471,7 +8597,8 @@ var containerResponsiveThemeCss = `/*
 :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-time,
 :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-title,
 :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-teacher,
-:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-meta {
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-meta,
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-capacity {
   display: block;
   min-width: 0;
   overflow: hidden;
@@ -8497,6 +8624,17 @@ var containerResponsiveThemeCss = `/*
   opacity: 0.72;
 }
 
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-capacity {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  opacity: 0.85;
+}
+
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-event-capacity--full {
+  color: rgb(var(--tb-danger, 220 38 38));
+  opacity: 1;
+}
+
 :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day-empty {
   margin: 0;
   padding: 1rem 0.5rem;
@@ -8513,7 +8651,8 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (max-width: 767px) {
-  :where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day-selector {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-timetable-day-selector {
     display: flex;
   }
 
@@ -8543,6 +8682,7 @@ var containerResponsiveThemeCss = `/*
     padding-inline: 0.75rem;
   }
 }
+}
 
 /* -----------------------------------------------------------------------------
  * Event Calendar Modals
@@ -8681,7 +8821,8 @@ var containerResponsiveThemeCss = `/*
 
 /* Responsive adjustments */
 @container rb-site (max-width: 640px) {
-  :where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-container {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="event-calendar"]) .event-calendar-container {
     margin-left: -1.5rem;
     margin-right: -1.5rem;
     border-left: none;
@@ -8742,6 +8883,7 @@ var containerResponsiveThemeCss = `/*
     margin: 0 0.5rem;
   }
 }
+}
 
 /*
  * Shared: Tab bar (underline style)
@@ -9104,10 +9246,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="form"]) .fb-row-2 {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="form"]) .fb-row-2 {
     grid-template-columns: 1fr 1fr;
   }
 }
+}
 
 /* Field wrapper */
 :where(.theme-scope) :where([data-block="form"]) .fb-field {
@@ -9188,10 +9332,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 640px) {
-  :where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="hero"]) .hero-subheadline {
     font-size: 1.25rem;
   }
 }
+}
 
 /* =============================================================================
  * Shared: Heading Group (used by CTA, single-button, etc.)
@@ -9405,16 +9551,19 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) .carousel-root {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .carousel-root {
     --rb-carousel-slides-to-show: var(
       --rb-carousel-slides-to-show-tablet,
       var(--rb-carousel-slides-to-show-mobile, 1)
     );
   }
 }
+}
 
 @container rb-site (min-width: 1024px) {
-  :where(.theme-scope) .carousel-root {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .carousel-root {
     --rb-carousel-slides-to-show: var(
       --rb-carousel-slides-to-show-desktop,
       var(
@@ -9424,6 +9573,7 @@ var containerResponsiveThemeCss = `/*
     );
   }
 }
+}
 
 /* Slides take exact percentage width with internal padding for gaps.
  * Padding is more reliable than margin (no collapsing, consistent on all slides). */
@@ -9697,10 +9847,12 @@ var containerResponsiveThemeCss = `/*
 
 /* Responsive grid */
 @container rb-site (max-width: 768px) {
-  :where(.theme-scope) .shop__products--grid {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .shop__products--grid {
     grid-template-columns: 1fr;
   }
 }
+}
 
 :where(.theme-scope) .shop__modal-product {
   font-size: 0.9375rem;
@@ -9802,11 +9954,13 @@ var containerResponsiveThemeCss = `/*
 
 /* Mobile: full-width CTA buttons inside cards */
 @container rb-site (max-width: 640px) {
-  :where(.theme-scope) .shop__cta {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .shop__cta {
     align-self: stretch;
     width: 100%;
   }
 }
+}
 
 /* =============================================================================
  * Block: Customer Portal
@@ -10512,7 +10666,8 @@ var containerResponsiveThemeCss = `/*
 
 /* Responsive: show everything without horizontal scrolling */
 @container rb-site (max-width: 640px) {
-  :where(.theme-scope) :where([data-block="customer-portal"]) .cp-only-mobile {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="customer-portal"]) .cp-only-mobile {
     display: flex;
   }
 
@@ -10552,6 +10707,7 @@ var containerResponsiveThemeCss = `/*
     align-self: stretch;
   }
 }
+}
 
 /* Placeholder (SSR) */
 :where(.theme-scope) :where([data-block="customer-portal"]) .cp-placeholder {
@@ -10641,7 +10797,8 @@ var containerResponsiveThemeCss = `/*
 
 /* Position arrows outside the carousel content area */
 @container rb-site (max-width: 639px) {
-  :where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--prev {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--prev {
     /* Move arrows closer to viewport edge than container edge on mobile. */
     left: calc(0.5rem - 1.5rem);
   }
@@ -10651,10 +10808,12 @@ var containerResponsiveThemeCss = `/*
     right: calc(0.5rem - 1.5rem);
   }
 }
+}
 
 /* Position arrows further out on larger breakpoints */
 @container rb-site (min-width: 640px) {
-  :where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--prev {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="testimonials"]) .rb-testimonials-carousel.carousel-root .carousel-nav-btn--prev {
     left: calc(-1 * (var(--rb-testimonial-carousel-arrow-size) / 2 + var(--rb-testimonial-carousel-arrow-gap)));
   }
 
@@ -10662,6 +10821,7 @@ var containerResponsiveThemeCss = `/*
     right: calc(-1 * (var(--rb-testimonial-carousel-arrow-size) / 2 + var(--rb-testimonial-carousel-arrow-gap)));
   }
 }
+}
 
 /*
  * Event Details (runtime node)
@@ -10713,10 +10873,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) .rb-tiles-grid {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .rb-tiles-grid {
     grid-template-columns: repeat(var(--rb-tiles-grid-cols-md, var(--rb-tiles-grid-cols-sm, 2)), minmax(0, 1fr));
   }
 }
+}
 
 :where(.theme-scope) :where(.rb-tile--interactive, .er-event-card) {
   cursor: pointer;
@@ -10821,10 +10983,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="course-registration"]) .cr-layout--with-sidebar {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-layout--with-sidebar {
     grid-template-columns: 1fr 280px;
   }
 }
+}
 
 :where(.theme-scope) :where([data-block="course-registration"]) .cr-layout__main {
   min-width: 0;
@@ -10835,10 +10999,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  :where(.theme-scope) :where([data-block="course-registration"]) .cr-layout__sidebar {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-layout__sidebar {
     display: block;
   }
 }
+}
 
 /* =============================================================================
  * Step Indicator
@@ -10889,10 +11055,12 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 640px) {
-  :where(.theme-scope) :where([data-block="course-registration"]) .cr-step-label {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="course-registration"]) .cr-step-label {
     display: block;
   }
 }
+}
 
 :where(.theme-scope) :where([data-block="course-registration"]) .cr-step-label--active {
   color: var(--cr-on-surface);
@@ -11775,7 +11943,8 @@ var containerResponsiveThemeCss = `/*
 
 /* Mobile fallback for inline variant */
 @container rb-site (max-width: 640px) {
-  :where(.theme-scope) .newsletter-inline .newsletter-form-fields {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) .newsletter-inline .newsletter-form-fields {
     flex-direction: column;
   }
 
@@ -11783,6 +11952,7 @@ var containerResponsiveThemeCss = `/*
     min-width: 100%;
   }
 }
+}
 
 /* =============================================================================
  * Success State
@@ -11820,12 +11990,14 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 1024px) {
-  :where(.theme-scope) :where([data-block="team-members"]) :where(.rb-team-members[data-layout-width="lg-3-4-left"]) {
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+:where(.theme-scope) :where([data-block="team-members"]) :where(.rb-team-members[data-layout-width="lg-3-4-left"]) {
     width: 75%;
     margin-left: 0;
     margin-right: auto;
   }
 }
+}
 
 :where(.theme-scope) :where([data-block="team-members"]) .rb-team-member-photo {
   display: block;
@@ -11900,7 +12072,8 @@ var containerResponsiveThemeCss = `/*
 }
 
 @container rb-site (min-width: 768px) {
-  /* Stack variant: enforce real column ratio at md+ (fixes transform/fallback pitfalls). */
+@scope ([data-rb-responsive-mode="container"]) to (:scope [data-rb-responsive-mode]) {
+/* Stack variant: enforce real column ratio at md+ (fixes transform/fallback pitfalls). */
   :where(.theme-scope) :where([data-block="team-members"][data-block-variant="stack"]) :where(.rb-team-member-photo-col) {
     flex: 0 0 var(--rb-team-image-basis);
   }
@@ -11924,6 +12097,7 @@ var containerResponsiveThemeCss = `/*
     flex-direction: row-reverse;
   }
 }
+}
 
 /* Thumbnail padding (space around image inside the item) */
 :where(.theme-scope) :where([data-block="team-members"]) .rb-team-members[data-thumb-pad="sm"] .rb-team-member-photo-wrap {
@@ -12126,18 +12300,19 @@ function ThemeScopeCore({
   children,
   className
 }) {
-  const isContainerResponsive = responsiveMode === "container";
+  const responsiveScope = getResponsiveScopeSpec(responsiveMode);
+  const isContainerResponsive = responsiveScope.kind === "container";
   const wrapperStyle = isContainerResponsive ? {
     ...cssVars,
     containerType: "inline-size",
-    containerName: THEME_RESPONSIVE_CONTAINER_NAME
+    containerName: responsiveScope.containerName
   } : cssVars;
   return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: className ? `theme-scope ${className}` : "theme-scope",
       style: wrapperStyle,
-      "data-rb-responsive-mode": responsiveMode,
+      "data-rb-responsive-mode": responsiveScope.kind,
       ...dataAttrs,
       suppressHydrationWarning,
       children: [
@@ -12145,25 +12320,131 @@ function ThemeScopeCore({
           "style",
           {
             "data-container-responsive-overrides": true,
-            dangerouslySetInnerHTML: { __html: escapeStyleContent(containerResponsiveThemeCss) }
+            dangerouslySetInnerHTML: {
+              __html: escapeStyleContent(containerResponsiveThemeCss)
+            }
+          }
+        ),
+        layoutCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-layout-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(layoutCss) }
+          }
+        ),
+        buttonCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-button-effects": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(buttonCss) }
+          }
+        ),
+        headerCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-header-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(headerCss) }
+          }
+        ),
+        footerCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-footer-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(footerCss) }
+          }
+        ),
+        cardCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-card-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(cardCss) }
+          }
+        ),
+        accordionCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-accordion-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(accordionCss) }
+          }
+        ),
+        inputCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-input-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(inputCss) }
+          }
+        ),
+        statusCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-status-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(statusCss) }
+          }
+        ),
+        progressCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-progress-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(progressCss) }
+          }
+        ),
+        typographyCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-typography-styles": true,
+            dangerouslySetInnerHTML: {
+              __html: escapeStyleContent(typographyCss)
+            }
+          }
+        ),
+        eventCalendarCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-event-calendar-styles": true,
+            dangerouslySetInnerHTML: {
+              __html: escapeStyleContent(eventCalendarCss)
+            }
+          }
+        ),
+        blockVarsCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-block-vars-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(blockVarsCss) }
+          }
+        ),
+        blockCustomVarsCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-block-custom-vars-styles": true,
+            dangerouslySetInnerHTML: {
+              __html: escapeStyleContent(blockCustomVarsCss)
+            }
+          }
+        ),
+        blockCustomCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-block-custom-styles": true,
+            dangerouslySetInnerHTML: {
+              __html: escapeStyleContent(blockCustomCss)
+            }
+          }
+        ),
+        atRulesCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-at-rules-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(atRulesCss) }
+          }
+        ),
+        customCss && /* @__PURE__ */ jsx3(
+          "style",
+          {
+            "data-custom-theme-styles": true,
+            dangerouslySetInnerHTML: { __html: escapeStyleContent(customCss) }
           }
         ),
-        layoutCss && /* @__PURE__ */ jsx3("style", { "data-layout-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(layoutCss) } }),
-        buttonCss && /* @__PURE__ */ jsx3("style", { "data-button-effects": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(buttonCss) } }),
-        headerCss && /* @__PURE__ */ jsx3("style", { "data-header-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(headerCss) } }),
-        footerCss && /* @__PURE__ */ jsx3("style", { "data-footer-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(footerCss) } }),
-        cardCss && /* @__PURE__ */ jsx3("style", { "data-card-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(cardCss) } }),
-        accordionCss && /* @__PURE__ */ jsx3("style", { "data-accordion-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(accordionCss) } }),
-        inputCss && /* @__PURE__ */ jsx3("style", { "data-input-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(inputCss) } }),
-        statusCss && /* @__PURE__ */ jsx3("style", { "data-status-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(statusCss) } }),
-        progressCss && /* @__PURE__ */ jsx3("style", { "data-progress-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(progressCss) } }),
-        typographyCss && /* @__PURE__ */ jsx3("style", { "data-typography-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(typographyCss) } }),
-        eventCalendarCss && /* @__PURE__ */ jsx3("style", { "data-event-calendar-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(eventCalendarCss) } }),
-        blockVarsCss && /* @__PURE__ */ jsx3("style", { "data-block-vars-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(blockVarsCss) } }),
-        blockCustomVarsCss && /* @__PURE__ */ jsx3("style", { "data-block-custom-vars-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(blockCustomVarsCss) } }),
-        blockCustomCss && /* @__PURE__ */ jsx3("style", { "data-block-custom-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(blockCustomCss) } }),
-        atRulesCss && /* @__PURE__ */ jsx3("style", { "data-at-rules-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(atRulesCss) } }),
-        customCss && /* @__PURE__ */ jsx3("style", { "data-custom-theme-styles": true, dangerouslySetInnerHTML: { __html: escapeStyleContent(customCss) } }),
         children
       ]
     }