create-plasmic-app 0.0.133 → 0.0.134

package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx

@@ -0,0 +1,366 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/* prettier-ignore-start */
+
+/** @jsxRuntime classic */
+/** @jsx createPlasmicElementProxy */
+/** @jsxFrag React.Fragment */
+
+// This class is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+// Component: 6uuAAE1jiCew
+
+"use client";
+
+import * as React from "react";
+
+import Head from "next/head";
+import Link, { LinkProps } from "next/link";
+import { useRouter } from "next/navigation";
+
+import {
+  Flex as Flex__,
+  MultiChoiceArg,
+  PlasmicDataSourceContextProvider as PlasmicDataSourceContextProvider__,
+  PlasmicIcon as PlasmicIcon__,
+  PlasmicImg as PlasmicImg__,
+  PlasmicLink as PlasmicLink__,
+  PlasmicPageGuard as PlasmicPageGuard__,
+  SingleBooleanChoiceArg,
+  SingleChoiceArg,
+  Stack as Stack__,
+  StrictProps,
+  Trans as Trans__,
+  classNames,
+  createPlasmicElementProxy,
+  deriveRenderOpts,
+  ensureGlobalVariants,
+  generateOnMutateForSpec,
+  generateStateOnChangeProp,
+  generateStateOnChangePropForCodeComponents,
+  generateStateValueProp,
+  get as $stateGet,
+  hasVariant,
+  initializeCodeComponentStates,
+  initializePlasmicStates,
+  makeFragment,
+  omit,
+  pick,
+  renderPlasmicSlot,
+  set as $stateSet,
+  useCurrentUser,
+  useDollarState,
+  usePlasmicTranslator,
+  useTrigger,
+  wrapWithClassName
+} from "@plasmicapp/react-web";
+import {
+  DataCtxReader as DataCtxReader__,
+  useDataEnv,
+  useGlobalActions
+} from "@plasmicapp/host";
+
+import RandomDynamicPageButton from "../../RandomDynamicPageButton"; // plasmic-import: Q23H1_1M_P/component
+import { Fetcher } from "@plasmicapp/react-web/lib/data-sources";
+import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
+import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
+
+import "@plasmicapp/react-web/lib/plasmic.css";
+
+import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+import sty from "./PlasmicHomepage.module.css"; // plasmic-import: 6uuAAE1jiCew/css
+
+const emptyProxy: any = new Proxy(() => "", {
+  get(_, prop) {
+    return prop === Symbol.toPrimitive ? () => "" : emptyProxy;
+  }
+});
+
+function wrapQueriesWithLoadingProxy($q: any): any {
+  return new Proxy($q, {
+    get(target, queryName) {
+      const query = target[queryName];
+      return !query || query.isLoading || !query.data ? emptyProxy : query;
+    }
+  });
+}
+
+export function generateDynamicMetadata($q: any, $ctx: any) {
+  return {
+    openGraph: {},
+    twitter: {
+      card: "summary"
+    }
+  };
+}
+
+createPlasmicElementProxy;
+
+export type PlasmicHomepage__VariantMembers = {};
+export type PlasmicHomepage__VariantsArgs = {};
+type VariantPropType = keyof PlasmicHomepage__VariantsArgs;
+export const PlasmicHomepage__VariantProps = new Array<VariantPropType>();
+
+export type PlasmicHomepage__ArgsType = {};
+type ArgPropType = keyof PlasmicHomepage__ArgsType;
+export const PlasmicHomepage__ArgProps = new Array<ArgPropType>();
+
+export type PlasmicHomepage__OverridesType = {
+  root?: Flex__<"div">;
+  section?: Flex__<"section">;
+  h1?: Flex__<"h1">;
+  text?: Flex__<"div">;
+  randomDynamicPageButton?: Flex__<typeof RandomDynamicPageButton>;
+};
+
+export interface DefaultHomepageProps {}
+
+const $$ = {};
+
+function useNextRouter() {
+  try {
+    return useRouter();
+  } catch {}
+  return undefined;
+}
+
+function PlasmicHomepage__RenderFunc(props: {
+  variants: PlasmicHomepage__VariantsArgs;
+  args: PlasmicHomepage__ArgsType;
+  overrides: PlasmicHomepage__OverridesType;
+  forNode?: string;
+}) {
+  const { variants, overrides, forNode } = props;
+
+  const args = React.useMemo(
+    () =>
+      Object.assign(
+        {},
+        Object.fromEntries(
+          Object.entries(props.args).filter(([_, v]) => v !== undefined)
+        )
+      ),
+    [props.args]
+  );
+
+  const $props = {
+    ...args,
+    ...variants
+  };
+
+  const __nextRouter = useNextRouter();
+
+  const $ctx = useDataEnv?.() || {};
+  const refsRef = React.useRef({});
+  const $refs = refsRef.current;
+
+  const globalVariants = _useGlobalVariants();
+
+  const pageMetadata = generateDynamicMetadata(
+    wrapQueriesWithLoadingProxy({}),
+    $ctx
+  );
+
+  const styleTokensClassNames = _useStyleTokens();
+
+  return (
+    <React.Fragment>
+      <Head></Head>
+
+      <style>{`
+        body {
+          margin: 0;
+        }
+      `}</style>
+
+      <div className={projectcss.plasmic_page_wrapper}>
+        <div
+          data-plasmic-name={"root"}
+          data-plasmic-override={overrides.root}
+          data-plasmic-root={true}
+          data-plasmic-for-node={forNode}
+          className={classNames(
+            projectcss.all,
+            projectcss.root_reset,
+            projectcss.plasmic_default_styles,
+            projectcss.plasmic_mixins,
+            styleTokensClassNames,
+            sty.root
+          )}
+        >
+          <section
+            data-plasmic-name={"section"}
+            data-plasmic-override={overrides.section}
+            className={classNames(projectcss.all, sty.section)}
+          >
+            <h1
+              data-plasmic-name={"h1"}
+              data-plasmic-override={overrides.h1}
+              className={classNames(
+                projectcss.all,
+                projectcss.h1,
+                projectcss.__wab_text,
+                sty.h1
+              )}
+            >
+              {"create-plasmic-app"}
+            </h1>
+            <div
+              data-plasmic-name={"text"}
+              data-plasmic-override={overrides.text}
+              className={classNames(
+                projectcss.all,
+                projectcss.__wab_text,
+                sty.text
+              )}
+            >
+              {hasVariant(globalVariants, "screen", "desktopOnly") ? (
+                <React.Fragment>
+                  <React.Fragment>
+                    {
+                      "This project is used by run-cpa.ts in the create-plasmic-app repo.\n\nrun-cpa.ts runs create-plasmic-app for many combinations of args (e.g. nextjs + appDir + loader + typescript) to check for changes in generated files. Any changes to this project will result in lots of changes to the generated files. "
+                    }
+                  </React.Fragment>
+                  <span
+                    className={"plasmic_default__all plasmic_default__span"}
+                    style={{ fontWeight: 700 }}
+                  >
+                    {"Therefore, please avoid changing this project."}
+                  </span>
+                </React.Fragment>
+              ) : (
+                <React.Fragment>
+                  <React.Fragment>
+                    {
+                      "If you haven't already done so, go back and learn the basics by going through the Plasmic Levels tutorial.\n\nIt's always easier to start from examples! Add a new page using a template\u2014do this from the list of pages in the top left (the gray + button).\n\nOr press the big blue + button to start dragging items into this page.\n\nIntegrate this project into your codebase\u2014press the "
+                    }
+                  </React.Fragment>
+                  <span
+                    className={"plasmic_default__all plasmic_default__span"}
+                    style={{ fontWeight: 700 }}
+                  >
+                    {"Code"}
+                  </span>
+                  <React.Fragment>
+                    {
+                      " button in the top right and follow the quickstart instructions.\n\nJoin our Slack community (icon in bottom left) for help any time."
+                    }
+                  </React.Fragment>
+                </React.Fragment>
+              )}
+            </div>
+            <RandomDynamicPageButton
+              data-plasmic-name={"randomDynamicPageButton"}
+              data-plasmic-override={overrides.randomDynamicPageButton}
+              className={classNames(
+                "__wab_instance",
+                sty.randomDynamicPageButton
+              )}
+            />
+          </section>
+        </div>
+      </div>
+    </React.Fragment>
+  ) as React.ReactElement | null;
+}
+
+const PlasmicDescendants = {
+  root: ["root", "section", "h1", "text", "randomDynamicPageButton"],
+  section: ["section", "h1", "text", "randomDynamicPageButton"],
+  h1: ["h1"],
+  text: ["text"],
+  randomDynamicPageButton: ["randomDynamicPageButton"]
+} as const;
+type NodeNameType = keyof typeof PlasmicDescendants;
+type DescendantsType<T extends NodeNameType> =
+  (typeof PlasmicDescendants)[T][number];
+type NodeDefaultElementType = {
+  root: "div";
+  section: "section";
+  h1: "h1";
+  text: "div";
+  randomDynamicPageButton: typeof RandomDynamicPageButton;
+};
+
+type ReservedPropsType = "variants" | "args" | "overrides";
+type NodeOverridesType<T extends NodeNameType> = Pick<
+  PlasmicHomepage__OverridesType,
+  DescendantsType<T>
+>;
+type NodeComponentProps<T extends NodeNameType> =
+  // Explicitly specify variants, args, and overrides as objects
+  {
+    variants?: PlasmicHomepage__VariantsArgs;
+    args?: PlasmicHomepage__ArgsType;
+    overrides?: NodeOverridesType<T>;
+  } &
+    // Specify variants directly as props
+    Omit<PlasmicHomepage__VariantsArgs, ReservedPropsType> &
+    // Specify args directly as props
+    Omit<PlasmicHomepage__ArgsType, ReservedPropsType> &
+    // Specify overrides for each element directly as props
+    Omit<
+      NodeOverridesType<T>,
+      ReservedPropsType | VariantPropType | ArgPropType
+    > &
+    // Specify props for the root element
+    Omit<
+      Partial<React.ComponentProps<NodeDefaultElementType[T]>>,
+      ReservedPropsType | VariantPropType | ArgPropType | DescendantsType<T>
+    >;
+
+function makeNodeComponent<NodeName extends NodeNameType>(nodeName: NodeName) {
+  type PropsType = NodeComponentProps<NodeName> & { key?: React.Key };
+  const func = function <T extends PropsType>(
+    props: T & StrictProps<T, PropsType>
+  ) {
+    const { variants, args, overrides } = React.useMemo(
+      () =>
+        deriveRenderOpts(props, {
+          name: nodeName,
+          descendantNames: PlasmicDescendants[nodeName],
+          internalArgPropNames: PlasmicHomepage__ArgProps,
+          internalVariantPropNames: PlasmicHomepage__VariantProps
+        }),
+      [props, nodeName]
+    );
+    return PlasmicHomepage__RenderFunc({
+      variants,
+      args,
+      overrides,
+      forNode: nodeName
+    });
+  };
+  if (nodeName === "root") {
+    func.displayName = "PlasmicHomepage";
+  } else {
+    func.displayName = `PlasmicHomepage.${nodeName}`;
+  }
+  return func;
+}
+
+export const PlasmicHomepage = Object.assign(
+  // Top-level PlasmicHomepage renders the root element
+  makeNodeComponent("root"),
+  {
+    // Helper components rendering sub-elements
+    section: makeNodeComponent("section"),
+    h1: makeNodeComponent("h1"),
+    text: makeNodeComponent("text"),
+    randomDynamicPageButton: makeNodeComponent("randomDynamicPageButton"),
+
+    // Metadata about props expected for PlasmicHomepage
+    internalVariantProps: PlasmicHomepage__VariantProps,
+    internalArgProps: PlasmicHomepage__ArgProps,
+
+    pageMetadata: generateDynamicMetadata(wrapQueriesWithLoadingProxy({}), {
+      pagePath: "/",
+      searchParams: {},
+      params: {}
+    })
+  }
+);
+
+export default PlasmicHomepage;
+/* prettier-ignore-end */

package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/PlasmicHomepageServer.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/* prettier-ignore-start */
+
+// This class is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+// Component: 6uuAAE1jiCew
+
+import * as React from "react";
+import { DefaultHomepageProps } from "./PlasmicHomepage"; // plasmic-import: 6uuAAE1jiCew/render
+
+import { ClientHomepage } from "../../../app/page-client"; // plasmic-import: 6uuAAE1jiCew/rscClient
+
+const $$ = {};
+
+export function generateDynamicMetadata($q: any, $ctx: any) {
+  return {
+    openGraph: {},
+    twitter: {
+      card: "summary"
+    }
+  };
+}
+
+function mkPathFromRouteAndParams(
+  route: string,
+  params: Record<string, string | string[] | undefined>
+) {
+  if (!params) {
+    return route;
+  }
+  let path = route;
+  for (const [key, value] of Object.entries(params)) {
+    if (typeof value === "string") {
+      path = path.replace(`[${key}]`, value);
+    } else if (Array.isArray(value)) {
+      if (path.includes(`[[...${key}]]`)) {
+        path = path.replace(`[[...${key}]]`, value.join("/"));
+      } else if (path.includes(`[...${key}]`)) {
+        path = path.replace(`[...${key}]`, value.join("/"));
+      }
+    }
+  }
+  return path;
+}
+
+export interface HomepageServerSkeletonProps {
+  params?: Promise<Record<string, string | string[] | undefined>>;
+  searchParams?: Promise<Record<string, string | string[] | undefined>>;
+}
+
+export async function makeAppRouterPageCtx({
+  params,
+  searchParams
+}: HomepageServerSkeletonProps) {
+  const pageRoute = "/";
+  const pageParams = (await params) ?? {};
+  const pagePath = mkPathFromRouteAndParams(pageRoute, pageParams);
+
+  const ctx = {
+    pageRoute,
+    pagePath,
+    params: pageParams,
+    query: (await searchParams) ?? {}
+  };
+  return ctx;
+}
+
+export type PlasmicHomepageServerProps = DefaultHomepageProps &
+  HomepageServerSkeletonProps;
+
+export async function PlasmicHomepageServer(props: PlasmicHomepageServerProps) {
+  return <ClientHomepage {...props} />;
+}

package/cpa-out/nextjs-app-codegen-ts/components/plasmic/create_plasmic_app/PlasmicRandomDynamicPageButton.tsx

@@ -0,0 +1,274 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/* prettier-ignore-start */
+
+/** @jsxRuntime classic */
+/** @jsx createPlasmicElementProxy */
+/** @jsxFrag React.Fragment */
+
+// This class is auto-generated by Plasmic; please do not edit!
+// Plasmic Project: 47tFXWjN2C4NyHFGGpaYQ3
+// Component: Q23H1_1M_P
+
+"use client";
+
+import * as React from "react";
+
+import Head from "next/head";
+import Link, { LinkProps } from "next/link";
+import { useRouter } from "next/navigation";
+
+import {
+  Flex as Flex__,
+  MultiChoiceArg,
+  PlasmicDataSourceContextProvider as PlasmicDataSourceContextProvider__,
+  PlasmicIcon as PlasmicIcon__,
+  PlasmicImg as PlasmicImg__,
+  PlasmicLink as PlasmicLink__,
+  PlasmicPageGuard as PlasmicPageGuard__,
+  SingleBooleanChoiceArg,
+  SingleChoiceArg,
+  Stack as Stack__,
+  StrictProps,
+  Trans as Trans__,
+  classNames,
+  createPlasmicElementProxy,
+  deriveRenderOpts,
+  ensureGlobalVariants,
+  generateOnMutateForSpec,
+  generateStateOnChangeProp,
+  generateStateOnChangePropForCodeComponents,
+  generateStateValueProp,
+  get as $stateGet,
+  hasVariant,
+  initializeCodeComponentStates,
+  initializePlasmicStates,
+  makeFragment,
+  omit,
+  pick,
+  renderPlasmicSlot,
+  set as $stateSet,
+  useCurrentUser,
+  useDollarState,
+  usePlasmicTranslator,
+  useTrigger,
+  wrapWithClassName
+} from "@plasmicapp/react-web";
+import {
+  DataCtxReader as DataCtxReader__,
+  useDataEnv,
+  useGlobalActions
+} from "@plasmicapp/host";
+
+import Button from "../../Button"; // plasmic-import: TQcvW_pSKi3/component
+import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
+import { _useStyleTokens } from "./PlasmicStyleTokensProvider"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/styleTokensProvider
+
+import "@plasmicapp/react-web/lib/plasmic.css";
+
+import projectcss from "./plasmic.module.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+import sty from "./PlasmicRandomDynamicPageButton.module.css"; // plasmic-import: Q23H1_1M_P/css
+
+import CheckSvgIcon from "./icons/PlasmicIcon__CheckSvg"; // plasmic-import: gj-_D7n31Ho/icon
+import IconIcon from "./icons/PlasmicIcon__Icon"; // plasmic-import: 6PNxx3YMyDQ/icon
+
+createPlasmicElementProxy;
+
+export type PlasmicRandomDynamicPageButton__VariantMembers = {};
+export type PlasmicRandomDynamicPageButton__VariantsArgs = {};
+type VariantPropType = keyof PlasmicRandomDynamicPageButton__VariantsArgs;
+export const PlasmicRandomDynamicPageButton__VariantProps =
+  new Array<VariantPropType>();
+
+export type PlasmicRandomDynamicPageButton__ArgsType = {};
+type ArgPropType = keyof PlasmicRandomDynamicPageButton__ArgsType;
+export const PlasmicRandomDynamicPageButton__ArgProps =
+  new Array<ArgPropType>();
+
+export type PlasmicRandomDynamicPageButton__OverridesType = {
+  root?: Flex__<typeof Button>;
+};
+
+export interface DefaultRandomDynamicPageButtonProps {
+  className?: string;
+}
+
+const $$ = {};
+
+function useNextRouter() {
+  try {
+    return useRouter();
+  } catch {}
+  return undefined;
+}
+
+function PlasmicRandomDynamicPageButton__RenderFunc(props: {
+  variants: PlasmicRandomDynamicPageButton__VariantsArgs;
+  args: PlasmicRandomDynamicPageButton__ArgsType;
+  overrides: PlasmicRandomDynamicPageButton__OverridesType;
+  forNode?: string;
+}) {
+  const { variants, overrides, forNode } = props;
+
+  const args = React.useMemo(
+    () =>
+      Object.assign(
+        {},
+        Object.fromEntries(
+          Object.entries(props.args).filter(([_, v]) => v !== undefined)
+        )
+      ),
+    [props.args]
+  );
+
+  const $props = {
+    ...args,
+    ...variants
+  };
+
+  const __nextRouter = useNextRouter();
+
+  const $ctx = useDataEnv?.() || {};
+  const refsRef = React.useRef({});
+  const $refs = refsRef.current;
+
+  const styleTokensClassNames = _useStyleTokens();
+
+  return (
+    <Button
+      data-plasmic-name={"root"}
+      data-plasmic-override={overrides.root}
+      data-plasmic-root={true}
+      data-plasmic-for-node={forNode}
+      className={classNames("__wab_instance", sty.root)}
+      onClick={async event => {
+        const $steps = {};
+
+        $steps["goToDynamicPage"] = true
+          ? (() => {
+              const actionArgs = {
+                destination: `/dynamic/${(() => {
+                  try {
+                    return Math.random().toString(36).slice(2);
+                  } catch (e) {
+                    if (
+                      e instanceof TypeError ||
+                      e?.plasmicType === "PlasmicUndefinedDataError"
+                    ) {
+                      return "value";
+                    }
+                    throw e;
+                  }
+                })()}`
+              };
+              return (({ destination }) => {
+                if (
+                  typeof destination === "string" &&
+                  destination.startsWith("#")
+                ) {
+                  document
+                    .getElementById(destination.substr(1))
+                    .scrollIntoView({ behavior: "smooth" });
+                } else {
+                  __nextRouter?.push(destination);
+                }
+              })?.apply(null, [actionArgs]);
+            })()
+          : undefined;
+        if (
+          $steps["goToDynamicPage"] != null &&
+          typeof $steps["goToDynamicPage"] === "object" &&
+          typeof $steps["goToDynamicPage"].then === "function"
+        ) {
+          $steps["goToDynamicPage"] = await $steps["goToDynamicPage"];
+        }
+      }}
+      submitsForm={true}
+    >
+      {"Random Dynamic Page"}
+    </Button>
+  ) as React.ReactElement | null;
+}
+
+const PlasmicDescendants = {
+  root: ["root"]
+} as const;
+type NodeNameType = keyof typeof PlasmicDescendants;
+type DescendantsType<T extends NodeNameType> =
+  (typeof PlasmicDescendants)[T][number];
+type NodeDefaultElementType = {
+  root: typeof Button;
+};
+
+type ReservedPropsType = "variants" | "args" | "overrides";
+type NodeOverridesType<T extends NodeNameType> = Pick<
+  PlasmicRandomDynamicPageButton__OverridesType,
+  DescendantsType<T>
+>;
+type NodeComponentProps<T extends NodeNameType> =
+  // Explicitly specify variants, args, and overrides as objects
+  {
+    variants?: PlasmicRandomDynamicPageButton__VariantsArgs;
+    args?: PlasmicRandomDynamicPageButton__ArgsType;
+    overrides?: NodeOverridesType<T>;
+  } &
+    // Specify variants directly as props
+    Omit<PlasmicRandomDynamicPageButton__VariantsArgs, ReservedPropsType> &
+    // Specify args directly as props
+    Omit<PlasmicRandomDynamicPageButton__ArgsType, ReservedPropsType> &
+    // Specify overrides for each element directly as props
+    Omit<
+      NodeOverridesType<T>,
+      ReservedPropsType | VariantPropType | ArgPropType
+    > &
+    // Specify props for the root element
+    Omit<
+      Partial<React.ComponentProps<NodeDefaultElementType[T]>>,
+      ReservedPropsType | VariantPropType | ArgPropType | DescendantsType<T>
+    >;
+
+function makeNodeComponent<NodeName extends NodeNameType>(nodeName: NodeName) {
+  type PropsType = NodeComponentProps<NodeName> & { key?: React.Key };
+  const func = function <T extends PropsType>(
+    props: T & StrictProps<T, PropsType>
+  ) {
+    const { variants, args, overrides } = React.useMemo(
+      () =>
+        deriveRenderOpts(props, {
+          name: nodeName,
+          descendantNames: PlasmicDescendants[nodeName],
+          internalArgPropNames: PlasmicRandomDynamicPageButton__ArgProps,
+          internalVariantPropNames: PlasmicRandomDynamicPageButton__VariantProps
+        }),
+      [props, nodeName]
+    );
+    return PlasmicRandomDynamicPageButton__RenderFunc({
+      variants,
+      args,
+      overrides,
+      forNode: nodeName
+    });
+  };
+  if (nodeName === "root") {
+    func.displayName = "PlasmicRandomDynamicPageButton";
+  } else {
+    func.displayName = `PlasmicRandomDynamicPageButton.${nodeName}`;
+  }
+  return func;
+}
+
+export const PlasmicRandomDynamicPageButton = Object.assign(
+  // Top-level PlasmicRandomDynamicPageButton renders the root element
+  makeNodeComponent("root"),
+  {
+    // Helper components rendering sub-elements
+
+    // Metadata about props expected for PlasmicRandomDynamicPageButton
+    internalVariantProps: PlasmicRandomDynamicPageButton__VariantProps,
+    internalArgProps: PlasmicRandomDynamicPageButton__ArgProps
+  }
+);
+
+export default PlasmicRandomDynamicPageButton;
+/* prettier-ignore-end */