create-plasmic-app 0.0.151 → 0.0.152

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicButton.css

@@ -0,0 +1,495 @@
+.Button__root__gpc3K {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background: #232320;
+  cursor: pointer;
+  transition-property: background;
+  transition-duration: 0.1s;
+  column-gap: 8px;
+  -webkit-transition-property: background;
+  -webkit-transition-duration: 0.1s;
+  border-radius: 6px;
+  padding: 12px 20px;
+  border-width: 0px;
+}
+.Button__rootshowStartIcon__gpc3KzX0Z8 {
+  padding-left: 16px;
+}
+.Button__rootshowEndIcon__gpc3Kyu4Va {
+  padding-right: 16px;
+}
+.Button__rootisDisabled__gpc3Kwr3Ff {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.Button__rootshape_rounded__gpc3KYlIzA {
+  padding-left: 20px;
+  padding-right: 20px;
+  min-width: 100px;
+  border-radius: 999px;
+}
+.Button__rootshape_round__gpc3Kq33Mv {
+  border-radius: 50%;
+  padding: 12px;
+}
+.Button__rootshape_sharp__gpc3K0LUp {
+  border-radius: 0px;
+}
+.Button__rootsize_compact__gpc3Kn6Abw {
+  padding: 6px 16px;
+}
+.Button__rootsize_minimal__gpc3KklAxP {
+  padding: 0px;
+}
+.Button__rootcolor_blue__gpc3K7OS1A {
+  background: #0091ff;
+}
+.Button__rootcolor_green__gpc3Kwu3Pw {
+  background: #30a46c;
+}
+.Button__rootcolor_yellow__gpc3KoEjPn {
+  background: #f5d90a;
+}
+.Button__rootcolor_red__gpc3KlyFe7 {
+  background: #e54d2e;
+}
+.Button__rootcolor_sand__gpc3K2T7KH {
+  background: #717069;
+}
+.Button__rootcolor_white__gpc3K5R3VM {
+  background: #ffffff;
+}
+.Button__rootcolor_softBlue__gpc3KnZeg {
+  background: #edf6ff;
+}
+.Button__rootcolor_softGreen__gpc3KqOip {
+  background: #e9f9ee;
+}
+.Button__rootcolor_softYellow__gpc3K95U0X {
+  background: #fffbd1;
+}
+.Button__rootcolor_softRed__gpc3KEt128 {
+  background: #fff0ee;
+}
+.Button__rootcolor_softSand__gpc3K8XvkE {
+  background: #eeeeec;
+}
+.Button__rootcolor_clear__gpc3KpPAgM {
+  background: #ffffff00;
+}
+.Button__rootcolor_link__gpc3Kf1H09 {
+  background: #ffffff00;
+}
+.Button__rootshape_rounded_showStartIcon__gpc3KYlIzAZX0Z8 {
+  padding-left: 16px;
+}
+.Button__rootshowEndIcon_shape_rounded__gpc3Kyu4VaYlIzA {
+  padding-right: 16px;
+}
+.Button__rootshape_round_size_compact__gpc3Kq33MvN6Abw {
+  padding: 6px;
+}
+.Button__root___focusVisibleWithin__gpc3KcjR25 {
+  box-shadow: 0px 0px 0px 3px #96c7f2;
+  outline: none;
+}
+.Button__root__gpc3K:focus-within:focus-within {
+  box-shadow: 0px 0px 0px 3px #96c7f2;
+  outline: none;
+}
+.Button__root__gpc3K:hover:hover {
+  background: #282826;
+}
+.Button__root__gpc3K:active:active {
+  background: #2e2e2b;
+}
+.Button__rootcolor_blue__gpc3K7OS1A:hover:hover {
+  background: #369eff;
+}
+.Button__rootcolor_blue__gpc3K7OS1A:active:active {
+  background: #52a9ff;
+}
+.Button__rootcolor_green__gpc3Kwu3Pw:hover:hover {
+  background: #3cb179;
+}
+.Button__rootcolor_green__gpc3Kwu3Pw:active:active {
+  background: #4cc38a;
+}
+.Button__rootcolor_yellow__gpc3KoEjPn:hover:hover {
+  background: #ffef5c;
+}
+.Button__rootcolor_yellow__gpc3KoEjPn:active:active {
+  background: #f0c000;
+}
+.Button__rootcolor_red__gpc3KlyFe7:hover:hover {
+  background: #ec5e41;
+}
+.Button__rootcolor_red__gpc3KlyFe7:active:active {
+  background: #f16a50;
+}
+.Button__rootcolor_sand__gpc3K2T7KH:hover:hover {
+  background: #7f7e77;
+}
+.Button__rootcolor_sand__gpc3K2T7KH:active:active {
+  background: #a1a09a;
+}
+.Button__rootcolor_white__gpc3K5R3VM:hover:hover {
+  background: #ffef5c;
+}
+.Button__rootcolor_white__gpc3K5R3VM:active:active {
+  background: #f0c000;
+}
+.Button__rootcolor_softBlue__gpc3KnZeg:hover:hover {
+  background: #e1f0ff;
+}
+.Button__rootcolor_softBlue__gpc3KnZeg:active:active {
+  background: #cee7fe;
+}
+.Button__rootcolor_softGreen__gpc3KqOip:active:active {
+  background: #ccebd7;
+}
+.Button__rootcolor_softGreen__gpc3KqOip:hover:hover {
+  background: #ddf3e4;
+}
+.Button__rootcolor_softYellow__gpc3K95U0X:active:active {
+  background: #fef2a4;
+}
+.Button__rootcolor_softYellow__gpc3K95U0X:hover:hover {
+  background: #fff8bb;
+}
+.Button__rootcolor_softRed__gpc3KEt128:active:active {
+  background: #fdd8d3;
+}
+.Button__rootcolor_softRed__gpc3KEt128:hover:hover {
+  background: #ffe6e2;
+}
+.Button__rootcolor_softSand__gpc3K8XvkE:hover:hover {
+  background: #e9e9e6;
+}
+.Button__rootcolor_softSand__gpc3K8XvkE:active:active {
+  background: #e3e3e0;
+}
+.Button__rootcolor_clear__gpc3KpPAgM:hover:hover {
+  background: #e9e9e6;
+}
+.Button__rootcolor_clear__gpc3KpPAgM:active:active {
+  background: #e3e3e0;
+}
+.Button__rootcolor_link__gpc3Kf1H09:hover:hover {
+  background: #ffffff00;
+}
+.Button__rootcolor_link__gpc3Kf1H09:active:active {
+  background: #ffffff00;
+}
+.Button__startIconContainer__men7Z {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+.Button__startIconContainershowStartIcon__men7ZzX0Z8 {
+  display: flex;
+}
+.Button__slotTargetStartIcon__tvHa9 {
+  color: #ededec;
+}
+.Button__slotTargetStartIconcolor_yellow__tvHa9OEjPn {
+  color: #35290f;
+}
+.Button__slotTargetStartIconcolor_white__tvHa95R3VM {
+  color: #35290f;
+}
+.Button__slotTargetStartIconcolor_softBlue__tvHa9NZeg {
+  color: #006adc;
+}
+.Button__slotTargetStartIconcolor_softGreen__tvHa9QOip {
+  color: #18794e;
+}
+.Button__slotTargetStartIconcolor_softYellow__tvHa995U0X {
+  color: #946800;
+}
+.Button__slotTargetStartIconcolor_softRed__tvHa9Et128 {
+  color: #ca3214;
+}
+.Button__slotTargetStartIconcolor_softSand__tvHa98XvkE {
+  color: #706f6c;
+}
+.Button__slotTargetStartIconcolor_clear__tvHa9PPAgM {
+  color: #1b1b18;
+}
+.Button__slotTargetStartIconcolor_link__tvHa9F1H09 {
+  color: #0091ff;
+}
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetStartIconcolor_link__tvHa9F1H09 {
+  color: #0081f1;
+}
+.Button__rootcolor_link__gpc3Kf1H09:active
+  .Button__slotTargetStartIconcolor_link__tvHa9F1H09 {
+  color: #006adc;
+}
+.Button__svg__s6Xxe {
+  position: relative;
+  object-fit: cover;
+  width: auto;
+  height: 1em;
+}
+.Button__contentContainer__sXXwU {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+.Button__root__gpc3K
+  .Button__contentContainer___focusVisibleWithin__sXXwUcjR25 {
+  outline: none;
+}
+.Button__slotTargetChildren__yzBwr {
+  color: #ededec;
+  font-weight: 500;
+  white-space: pre;
+}
+.Button__slotTargetChildrencolor_blue__yzBwr7OS1A {
+  color: #ffffff;
+}
+.Button__slotTargetChildrencolor_green__yzBwRwu3Pw {
+  color: #ffffff;
+}
+.Button__slotTargetChildrencolor_yellow__yzBwRoEjPn {
+  color: #35290f;
+}
+.Button__slotTargetChildrencolor_red__yzBwrlyFe7 {
+  color: #ffffff;
+}
+.Button__slotTargetChildrencolor_sand__yzBwr2T7KH {
+  color: #ffffff;
+}
+.Button__slotTargetChildrencolor_white__yzBwr5R3VM {
+  color: #1b1b18;
+}
+.Button__slotTargetChildrencolor_softBlue__yzBwRnZeg {
+  color: #006adc;
+}
+.Button__slotTargetChildrencolor_softGreen__yzBwrqOip {
+  color: #18794e;
+}
+.Button__slotTargetChildrencolor_softYellow__yzBwr95U0X {
+  color: #946800;
+}
+.Button__slotTargetChildrencolor_softRed__yzBwrEt128 {
+  color: #ca3214;
+}
+.Button__slotTargetChildrencolor_softSand__yzBwr8XvkE {
+  color: #1b1b18;
+}
+.Button__slotTargetChildrencolor_clear__yzBwRpPAgM {
+  color: #1b1b18;
+}
+.Button__slotTargetChildrencolor_link__yzBwRf1H09 {
+  color: #0091ff;
+}
+.Button__root__gpc3K:focus-within .Button__slotTargetChildren__yzBwr > *,
+.Button__root__gpc3K:focus-within
+  .Button__slotTargetChildren__yzBwr
+  > .__wab_slot
+  > *,
+.Button__root__gpc3K:focus-within
+  .Button__slotTargetChildren__yzBwr
+  > .__wab_slot
+  > .__wab_slot
+  > *,
+.Button__root__gpc3K:focus-within
+  .Button__slotTargetChildren__yzBwr
+  > .__wab_slot
+  > .__wab_slot
+  > .__wab_slot
+  > *,
+.Button__root__gpc3K:focus-within
+  .Button__slotTargetChildren__yzBwr
+  > picture
+  > img,
+.Button__root__gpc3K:focus-within
+  .Button__slotTargetChildren__yzBwr
+  > .__wab_slot
+  > picture
+  > img,
+.Button__root__gpc3K:focus-within
+  .Button__slotTargetChildren__yzBwr
+  > .__wab_slot
+  > .__wab_slot
+  > picture
+  > img,
+.Button__root__gpc3K:focus-within
+  .Button__slotTargetChildren__yzBwr
+  > .__wab_slot
+  > .__wab_slot
+  > .__wab_slot
+  > picture
+  > img {
+  outline: none;
+}
+.Button__root__gpc3K
+  .Button__slotTargetChildren___focusVisibleWithin__yzBwRcjR25
+  > *,
+.Button__root__gpc3K
+  .Button__slotTargetChildren___focusVisibleWithin__yzBwRcjR25
+  > .__wab_slot
+  > *,
+.Button__root__gpc3K
+  .Button__slotTargetChildren___focusVisibleWithin__yzBwRcjR25
+  > .__wab_slot
+  > .__wab_slot
+  > *,
+.Button__root__gpc3K
+  .Button__slotTargetChildren___focusVisibleWithin__yzBwRcjR25
+  > .__wab_slot
+  > .__wab_slot
+  > .__wab_slot
+  > *,
+.Button__root__gpc3K
+  .Button__slotTargetChildren___focusVisibleWithin__yzBwRcjR25
+  > picture
+  > img,
+.Button__root__gpc3K
+  .Button__slotTargetChildren___focusVisibleWithin__yzBwRcjR25
+  > .__wab_slot
+  > picture
+  > img,
+.Button__root__gpc3K
+  .Button__slotTargetChildren___focusVisibleWithin__yzBwRcjR25
+  > .__wab_slot
+  > .__wab_slot
+  > picture
+  > img,
+.Button__root__gpc3K
+  .Button__slotTargetChildren___focusVisibleWithin__yzBwRcjR25
+  > .__wab_slot
+  > .__wab_slot
+  > .__wab_slot
+  > picture
+  > img {
+  outline: none;
+}
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetChildrencolor_link__yzBwRf1H09 {
+  color: #0081f1;
+}
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetChildrencolor_link__yzBwRf1H09
+  > .__wab_text,
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetChildrencolor_link__yzBwRf1H09
+  > .__wab_expr_html_text,
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetChildrencolor_link__yzBwRf1H09
+  > .__wab_slot-string-wrapper,
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetChildrencolor_link__yzBwRf1H09
+  > .__wab_slot
+  > .__wab_text,
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetChildrencolor_link__yzBwRf1H09
+  > .__wab_slot
+  > .__wab_expr_html_text,
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetChildrencolor_link__yzBwRf1H09
+  > .__wab_slot
+  > .__wab_slot-string-wrapper,
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetChildrencolor_link__yzBwRf1H09
+  > .__wab_slot
+  > .__wab_slot
+  > .__wab_text,
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetChildrencolor_link__yzBwRf1H09
+  > .__wab_slot
+  > .__wab_slot
+  > .__wab_expr_html_text,
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetChildrencolor_link__yzBwRf1H09
+  > .__wab_slot
+  > .__wab_slot
+  > .__wab_slot-string-wrapper,
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetChildrencolor_link__yzBwRf1H09
+  > .__wab_slot
+  > .__wab_slot
+  > .__wab_slot
+  > .__wab_text,
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetChildrencolor_link__yzBwRf1H09
+  > .__wab_slot
+  > .__wab_slot
+  > .__wab_slot
+  > .__wab_expr_html_text,
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetChildrencolor_link__yzBwRf1H09
+  > .__wab_slot
+  > .__wab_slot
+  > .__wab_slot
+  > .__wab_slot-string-wrapper {
+  text-decoration-line: underline;
+}
+.Button__rootcolor_link__gpc3Kf1H09:active
+  .Button__slotTargetChildrencolor_link__yzBwRf1H09 {
+  color: #006adc;
+}
+.Button__endIconContainer___3CzAx {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+.Button__endIconContainershowEndIcon___3CzAxYu4Va {
+  display: flex;
+}
+.Button__slotTargetEndIcon__eGy7P {
+  color: #ededec;
+}
+.Button__slotTargetEndIconcolor_yellow__eGy7PoEjPn {
+  color: #35290f;
+}
+.Button__slotTargetEndIconcolor_white__eGy7P5R3VM {
+  color: #35290f;
+}
+.Button__slotTargetEndIconcolor_softBlue__eGy7PnZeg {
+  color: #006adc;
+}
+.Button__slotTargetEndIconcolor_softGreen__eGy7PqOip {
+  color: #18794e;
+}
+.Button__slotTargetEndIconcolor_softYellow__eGy7P95U0X {
+  color: #946800;
+}
+.Button__slotTargetEndIconcolor_softRed__eGy7PEt128 {
+  color: #ca3214;
+}
+.Button__slotTargetEndIconcolor_softSand__eGy7P8XvkE {
+  color: #706f6c;
+}
+.Button__slotTargetEndIconcolor_clear__eGy7PpPAgM {
+  color: #1b1b18;
+}
+.Button__slotTargetEndIconcolor_link__eGy7Pf1H09 {
+  color: #0091ff;
+}
+.Button__rootcolor_link__gpc3Kf1H09:hover
+  .Button__slotTargetEndIconcolor_link__eGy7Pf1H09 {
+  color: #0081f1;
+}
+.Button__rootcolor_link__gpc3Kf1H09:active
+  .Button__slotTargetEndIconcolor_link__eGy7Pf1H09 {
+  color: #006adc;
+}
+.Button__svg__liJa {
+  position: relative;
+  object-fit: cover;
+  width: auto;
+  height: 1em;
+}

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.css

@@ -0,0 +1,44 @@
+.DynamicPage__root__hgzte {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  min-width: 0;
+  min-height: 0;
+  padding: 0px;
+}
+.DynamicPage__section__mbqxB {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  row-gap: 16px;
+  min-width: 0;
+  padding: 96px 24px;
+}
+.DynamicPage__h2__uyAe1 {
+  position: relative;
+  width: 100%;
+  height: auto;
+  max-width: 800px;
+  text-align: center;
+  min-width: 0;
+}
+.DynamicPage__span__eZlYo {
+  position: relative;
+  width: 100%;
+  height: auto;
+  max-width: 800px;
+  text-align: center;
+  min-width: 0;
+}
+.DynamicPage__randomDynamicPageButton__kaCiI.__wab_instance.__wab_instance {
+  position: relative;
+}

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx

@@ -58,6 +58,15 @@ import {
   useGlobalActions
 } from "@plasmicapp/react-web/lib/host";
 
+import { useMutablePlasmicQueryData } from "@plasmicapp/query";
+
+import { unstable_usePlasmicQueries } from "@plasmicapp/react-web/lib/data-sources";
+import type {
+  PlasmicQuery,
+  PlasmicQueryResult
+} from "@plasmicapp/react-web/lib/data-sources";
+import type { QueryComponentNode } from "@plasmicapp/react-web/lib/data-sources";
+
 import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
 import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
 import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
@@ -113,7 +122,8 @@ export const PlasmicDynamicPage__ArgProps = new Array<ArgPropType>();
 export type PlasmicDynamicPage__OverridesType = {
   root?: Flex__<"div">;
   section?: Flex__<"section">;
-  h1?: Flex__<"h1">;
+  h2?: Flex__<"h2">;
+  span?: Flex__<"span">;
   randomDynamicPageButton?: Flex__<typeof RandomDynamicPageButton>;
 };
 
@@ -121,6 +131,38 @@ export interface DefaultDynamicPageProps {}
 
 const $$ = {};
 
+export const serverQueryTree: QueryComponentNode = {
+  type: "component",
+  queries: {
+    sha256: {
+      id: "custom:krgWtF9Kkesx",
+      fn: async ({ $q, $props, $ctx, $state }) => {
+        console.log("Running SHA-256");
+        const data = new TextEncoder().encode($ctx.params.slug);
+        const hash = await crypto.subtle.digest("SHA-256", data);
+        return [...new Uint8Array(hash)]
+          .map(b => b.toString(16).padStart(2, "0"))
+          .join("-");
+      },
+      args: ({ $q, $props, $ctx, $state }) => {
+        return [
+          {
+            $ctx: {
+              params: $ctx["params"]
+            },
+            $props: {},
+            $q: {},
+            $state: {}
+          }
+        ];
+      }
+    }
+  },
+  propsContext: {},
+  stateSpecs: [],
+  children: []
+};
+
 function useTanStackRouter() {
   try {
     return useRouter();
@@ -157,6 +199,8 @@ function PlasmicDynamicPage__RenderFunc(props: {
   const refsRef = React.useRef({});
   const $refs = refsRef.current;
 
+  const $q = unstable_usePlasmicQueries(serverQueryTree, $ctx, $props, null);
+
   const styleTokensClassNames = _useStyleTokens();
 
   return (
@@ -190,33 +234,32 @@ function PlasmicDynamicPage__RenderFunc(props: {
               "DynamicPage__section__mbqxB"
             )}
           >
-            <h1
-              data-plasmic-name={"h1"}
-              data-plasmic-override={overrides.h1}
+            <h2
+              data-plasmic-name={"h2"}
+              data-plasmic-override={overrides.h2}
+              className={classNames(
+                "plasmic_default__all",
+                "plasmic_default__h2",
+                "plasmic_default__h2__47tFX",
+                "__wab_text",
+                "DynamicPage__h2__uyAe1"
+              )}
+            >
+              <React.Fragment>{$ctx.params.slug}</React.Fragment>
+            </h2>
+            <span
+              data-plasmic-name={"span"}
+              data-plasmic-override={overrides.span}
               className={classNames(
                 "plasmic_default__all",
-                "plasmic_default__h1",
-                "plasmic_default__h1__47tFX",
+                "plasmic_default__span",
+                "plasmic_default__span__47tFX",
                 "__wab_text",
-                "DynamicPage__h1__uyAe1"
+                "DynamicPage__span__eZlYo"
               )}
             >
-              <React.Fragment>
-                {(() => {
-                  try {
-                    return $ctx.params.slug;
-                  } catch (e) {
-                    if (
-                      e instanceof TypeError ||
-                      e?.plasmicType === "PlasmicUndefinedDataError"
-                    ) {
-                      return "Page 1";
-                    }
-                    throw e;
-                  }
-                })()}
-              </React.Fragment>
-            </h1>
+              <React.Fragment>{`SHA-256(${$ctx.params.slug}): ${$q.sha256.data}`}</React.Fragment>
+            </span>
             <RandomDynamicPageButton
               data-plasmic-name={"randomDynamicPageButton"}
               data-plasmic-override={overrides.randomDynamicPageButton}
@@ -233,9 +276,10 @@ function PlasmicDynamicPage__RenderFunc(props: {
 }
 
 const PlasmicDescendants = {
-  root: ["root", "section", "h1", "randomDynamicPageButton"],
-  section: ["section", "h1", "randomDynamicPageButton"],
-  h1: ["h1"],
+  root: ["root", "section", "h2", "span", "randomDynamicPageButton"],
+  section: ["section", "h2", "span", "randomDynamicPageButton"],
+  h2: ["h2"],
+  span: ["span"],
   randomDynamicPageButton: ["randomDynamicPageButton"]
 } as const;
 type NodeNameType = keyof typeof PlasmicDescendants;
@@ -244,7 +288,8 @@ type DescendantsType<T extends NodeNameType> =
 type NodeDefaultElementType = {
   root: "div";
   section: "section";
-  h1: "h1";
+  h2: "h2";
+  span: "span";
   randomDynamicPageButton: typeof RandomDynamicPageButton;
 };
 
@@ -311,7 +356,8 @@ export const PlasmicDynamicPage = Object.assign(
   {
     // Helper components rendering sub-elements
     section: makeNodeComponent("section"),
-    h1: makeNodeComponent("h1"),
+    h2: makeNodeComponent("h2"),
+    span: makeNodeComponent("span"),
     randomDynamicPageButton: makeNodeComponent("randomDynamicPageButton"),
 
     // Metadata about props expected for PlasmicDynamicPage