@shopify/cli-hydrogen 5.2.0 → 5.2.1

package/dist/commands/hydrogen/dev.js

@@ -16,7 +16,6 @@ import { addVirtualRoutes } from '../../lib/virtual-routes.js';
 import { spawnCodegenProcess } from '../../lib/codegen.js';
 import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
 import { getConfig } from '../../lib/shopify-config.js';
-import { findPort } from '../../lib/find-port.js';
 import { setupLiveReload } from '../../lib/live-reload.js';
 import { checkRemixVersions } from '../../lib/remix-version-check.js';
 
@@ -110,7 +109,7 @@ async function runDev({
       return;
     miniOxygen = await startMiniOxygen({
       root,
-      port: await findPort(portFlag),
+      port: portFlag,
       watch: !liveReload,
       buildPathWorkerFile,
       buildPathClient,

package/dist/commands/hydrogen/generate/route.test.js

@@ -16,7 +16,6 @@ describe("runGenerate", () => {
   it("calls route generation and renders the result", async () => {
     vi.mocked(generateRoutes).mockResolvedValue({
       isTypescript: true,
-      transpilerOptions: {},
       formatOptions: {},
       v2Flags: {},
       routeGroups: {},

package/dist/commands/hydrogen/init.js

@@ -6,7 +6,7 @@ import { AbortError } from '@shopify/cli-kit/node/error';
 import { AbortController } from '@shopify/cli-kit/node/abort';
 import { commonFlags, flagsToCamelObject, parseProcessFlags } from '../../lib/flags.js';
 import { checkHydrogenVersion } from '../../lib/check-version.js';
-import { SETUP_CSS_STRATEGIES } from './../../lib/setups/css/index.js';
+import { STYLING_CHOICES } from './../../lib/setups/css/index.js';
 import { I18N_CHOICES } from '../../lib/setups/i18n/index.js';
 import { supressNodeExperimentalWarnings } from '../../lib/process.js';
 import { setupRemoteTemplate, setupLocalStarterTemplate } from '../../lib/onboarding/index.js';
@@ -58,9 +58,9 @@ class Init extends Command {
         `Invalid URL structure strategy: ${flags.markets}. Must be one of ${I18N_CHOICES.join(", ")}`
       );
     }
-    if (flags.styling && !SETUP_CSS_STRATEGIES.includes(flags.styling)) {
+    if (flags.styling && !STYLING_CHOICES.includes(flags.styling)) {
       throw new AbortError(
-        `Invalid styling strategy: ${flags.styling}. Must be one of ${SETUP_CSS_STRATEGIES.join(", ")}`
+        `Invalid styling strategy: ${flags.styling}. Must be one of ${STYLING_CHOICES.join(", ")}`
       );
     }
     await runInit(flagsToCamelObject(flags));

package/dist/commands/hydrogen/preview.js

@@ -3,7 +3,6 @@ import { muteDevLogs } from '../../lib/log.js';
 import { getProjectPaths } from '../../lib/remix-config.js';
 import { commonFlags, DEFAULT_PORT } from '../../lib/flags.js';
 import { startMiniOxygen } from '../../lib/mini-oxygen.js';
-import { findPort } from '../../lib/find-port.js';
 
 class Preview extends Command {
   static description = "Runs a Hydrogen storefront in an Oxygen worker for production.";
@@ -26,7 +25,7 @@ async function runPreview({
   const { root, buildPathWorkerFile, buildPathClient } = getProjectPaths(appPath);
   const miniOxygen = await startMiniOxygen({
     root,
-    port: await findPort(port),
+    port,
     buildPathClient,
     buildPathWorkerFile
   });

package/dist/generator-templates/starter/app/entry.server.tsx

@@ -2,6 +2,7 @@ import type {EntryContext} from '@shopify/remix-oxygen';
 import {RemixServer} from '@remix-run/react';
 import isbot from 'isbot';
 import {renderToReadableStream} from 'react-dom/server';
+import {createContentSecurityPolicy} from '@shopify/hydrogen';
 
 export default async function handleRequest(
   request: Request,
@@ -9,9 +10,14 @@ export default async function handleRequest(
   responseHeaders: Headers,
   remixContext: EntryContext,
 ) {
+  const {nonce, header, NonceProvider} = createContentSecurityPolicy();
+
   const body = await renderToReadableStream(
-    <RemixServer context={remixContext} url={request.url} />,
+    <NonceProvider>
+      <RemixServer context={remixContext} url={request.url} />
+    </NonceProvider>,
     {
+      nonce,
       signal: request.signal,
       onError(error) {
         // eslint-disable-next-line no-console
@@ -26,6 +32,8 @@ export default async function handleRequest(
   }
 
   responseHeaders.set('Content-Type', 'text/html');
+  responseHeaders.set('Content-Security-Policy', header);
+
   return new Response(body, {
     headers: responseHeaders,
     status: responseStatusCode,

package/dist/generator-templates/starter/app/root.tsx

@@ -1,3 +1,4 @@
+import {useNonce} from '@shopify/hydrogen';
 import {defer, type LoaderArgs} from '@shopify/remix-oxygen';
 import {
   Links,
@@ -98,6 +99,7 @@ export async function loader({context}: LoaderArgs) {
 }
 
 export default function App() {
+  const nonce = useNonce();
   const data = useLoaderData<typeof loader>();
 
   return (
@@ -112,9 +114,9 @@ export default function App() {
         <Layout {...data}>
           <Outlet />
         </Layout>
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );
@@ -123,6 +125,7 @@ export default function App() {
 export function ErrorBoundary() {
   const error = useRouteError();
   const [root] = useMatches();
+  const nonce = useNonce();
   let errorMessage = 'Unknown error';
   let errorStatus = 500;
 
@@ -153,9 +156,9 @@ export function ErrorBoundary() {
             )}
           </div>
         </Layout>
-        <ScrollRestoration />
-        <Scripts />
-        <LiveReload />
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+        <LiveReload nonce={nonce} />
       </body>
     </html>
   );

package/dist/generator-templates/starter/app/routes/blogs._index.tsx

@@ -3,7 +3,7 @@ import {Link, useLoaderData, type V2_MetaFunction} from '@remix-run/react';
 import {Pagination, getPaginationVariables} from '@shopify/hydrogen';
 
 export const meta: V2_MetaFunction = () => {
-  return [{title: `Hydrogen | Logs`}];
+  return [{title: `Hydrogen | Blogs`}];
 };
 
 export const loader = async ({request, context: {storefront}}: LoaderArgs) => {

package/dist/generator-templates/starter/package.json

@@ -15,8 +15,8 @@
   "dependencies": {
     "@remix-run/react": "1.19.1",
     "@shopify/cli": "3.48.0",
-    "@shopify/cli-hydrogen": "^5.2.0",
-    "@shopify/hydrogen": "^2023.7.3",
+    "@shopify/cli-hydrogen": "^5.2.1",
+    "@shopify/hydrogen": "^2023.7.4",
     "@shopify/remix-oxygen": "^1.1.3",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
@@ -30,12 +30,12 @@
     "@shopify/prettier-config": "^1.1.2",
     "@total-typescript/ts-reset": "^0.4.2",
     "@types/eslint": "^8.4.10",
-    "@types/react": "^18.0.20",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
     "eslint": "^8.20.0",
     "eslint-plugin-hydrogen": "0.12.2",
     "prettier": "^2.8.4",
-    "typescript": "^4.9.5"
+    "typescript": "^5.2.2"
   },
   "engines": {
     "node": ">=16.13"

package/dist/generator-templates/starter/tsconfig.json

@@ -7,6 +7,7 @@
     "jsx": "react-jsx",
     "moduleResolution": "node",
     "resolveJsonModule": true,
+    "module": "ES2022",
     "target": "ES2022",
     "strict": true,
     "allowJs": true,

package/dist/lib/file.js

@@ -8,7 +8,7 @@ async function replaceFileContent(filepath, formatConfig, replacer) {
   if (typeof content !== "string")
     return;
   if (formatConfig) {
-    content = formatCode(content, formatConfig, filepath);
+    content = await formatCode(content, formatConfig, filepath);
   }
   return writeFile(filepath, content);
 }

package/dist/lib/flags.js

@@ -3,7 +3,7 @@ import { camelize } from '@shopify/cli-kit/common/string';
 import { renderInfo } from '@shopify/cli-kit/node/ui';
 import { normalizeStoreFqdn } from '@shopify/cli-kit/node/context/fqdn';
 import colors from '@shopify/cli-kit/node/colors';
-import { SETUP_CSS_STRATEGIES } from './setups/css/index.js';
+import { STYLING_CHOICES } from './setups/css/index.js';
 import { I18N_CHOICES } from './setups/i18n/index.js';
 
 const DEFAULT_PORT = 3e3;
@@ -50,10 +50,10 @@ const commonFlags = {
     dependsOn: ["codegen-unstable"]
   }),
   styling: Flags.string({
-    description: `Sets the styling strategy to use. One of ${SETUP_CSS_STRATEGIES.map(
+    description: `Sets the styling strategy to use. One of ${STYLING_CHOICES.map(
       (item) => `\`${item}\``
     ).join(", ")}.`,
-    choices: SETUP_CSS_STRATEGIES,
+    choices: STYLING_CHOICES,
     env: "SHOPIFY_HYDROGEN_FLAG_STYLING"
   }),
   markets: Flags.string({

package/dist/lib/format-code.js

@@ -1,4 +1,3 @@
-import prettier from 'prettier';
 import { extname } from '@shopify/cli-kit/node/path';
 
 const DEFAULT_PRETTIER_CONFIG = {
@@ -9,21 +8,22 @@ const DEFAULT_PRETTIER_CONFIG = {
 };
 async function getCodeFormatOptions(filePath = process.cwd()) {
   try {
+    const prettier = await import('prettier');
     return await prettier.resolveConfig(filePath) || DEFAULT_PRETTIER_CONFIG;
   } catch {
     return DEFAULT_PRETTIER_CONFIG;
   }
 }
-function formatCode(content, config = DEFAULT_PRETTIER_CONFIG, filePath = "") {
+async function formatCode(content, config = DEFAULT_PRETTIER_CONFIG, filePath = "") {
   const ext = extname(filePath);
-  const formattedContent = prettier.format(content, {
+  const prettier = await import('prettier');
+  return prettier.format(content, {
     // Specify the TypeScript parser for ts/tsx files. Otherwise
     // we need to use the babel parser because the default parser
     // Otherwise prettier will print a warning.
     parser: ext === ".tsx" || ext === ".ts" ? "typescript" : "babel",
     ...config
   });
-  return formattedContent;
 }
 
 export { formatCode, getCodeFormatOptions };

package/dist/lib/graphql/admin/client.js

@@ -20,6 +20,24 @@ async function adminRequest(query, session, variables) {
         "Install the Hydrogen sales channel on your store to start creating and linking Hydrogen storefronts: https://apps.shopify.com/hydrogen"
       );
     }
+    if (errors?.some?.(
+      (error2) => error2.message.includes(
+        "Access denied for hydrogenStorefrontCreate field"
+      )
+    )) {
+      throw new AbortError("Couldn't connect storefront to Shopify", [
+        "Common reasons for this error include:",
+        {
+          list: {
+            items: [
+              "The Hydrogen sales channel isn't installed on the store.",
+              "You don't have the required account permission to manage apps or channels.",
+              "You're trying to connect to an ineligible store type (Trial, Development store)"
+            ]
+          }
+        }
+      ]);
+    }
     throw error;
   }
 }

package/dist/lib/graphql/admin/client.test.js

@@ -16,8 +16,8 @@ describe("adminRequest", () => {
     });
     expect(response).toContain(fakeResponse);
   });
-  describe("error response", () => {
-    it("sends a query to the Admin API and returns an unknown error response", async () => {
+  describe("when there is an unknown error response", () => {
+    it("passes along the error message", async () => {
       const fakeGraphqlError = {
         errors: [
           {
@@ -32,7 +32,9 @@ describe("adminRequest", () => {
       });
       await expect(response).rejects.toContain(fakeGraphqlError);
     });
-    it("sends a query to the Admin API and returns an error where app isn't installed", async () => {
+  });
+  describe("when the app isn't installed", () => {
+    it("throws an AbortError", async () => {
       const fakeGraphqlError = {
         errors: [
           {
@@ -46,6 +48,29 @@ describe("adminRequest", () => {
         storeFqdn: ""
       });
       await expect(response).rejects.toThrowError(AbortError);
+      await expect(response).rejects.toMatch(
+        /Hydrogen sales channel isn\'t installed/
+      );
+    });
+  });
+  describe("when the user doesn't have access to hydrogenStorefrontCreate", () => {
+    it("throws an AbortError", async () => {
+      const fakeGraphqlError = {
+        errors: [
+          {
+            message: "Access denied for hydrogenStorefrontCreate field"
+          }
+        ]
+      };
+      vi.mocked(graphqlRequest).mockRejectedValue(fakeGraphqlError);
+      const response = adminRequest("", {
+        token: "",
+        storeFqdn: ""
+      });
+      await expect(response).rejects.toThrowError(AbortError);
+      await expect(response).rejects.toMatch(
+        /Couldn\'t connect storefront to Shopify/
+      );
     });
   });
 });

package/dist/lib/setups/css/index.js

@@ -1,10 +1,12 @@
 import { renderSelectPrompt } from '@shopify/cli-kit/node/ui';
+import { SETUP_CSS_STRATEGIES } from './assets.js';
+export { SETUP_CSS_STRATEGIES } from './assets.js';
 import { setupTailwind } from './tailwind.js';
 import { setupPostCss } from './postcss.js';
 import { setupCssModules } from './css-modules.js';
 import { setupVanillaExtract } from './vanilla-extract.js';
-export { SETUP_CSS_STRATEGIES } from './assets.js';
 
+const STYLING_CHOICES = [...SETUP_CSS_STRATEGIES, "none"];
 const CSS_STRATEGY_NAME_MAP = {
   tailwind: "Tailwind",
   "css-modules": "CSS Modules",
@@ -41,4 +43,4 @@ async function renderCssPrompt(options) {
   });
 }
 
-export { CSS_STRATEGY_NAME_MAP, renderCssPrompt, setupCssStrategy };
+export { CSS_STRATEGY_NAME_MAP, STYLING_CHOICES, renderCssPrompt, setupCssStrategy };

package/dist/lib/setups/routes/generate.js

@@ -64,8 +64,7 @@ async function generateRoutes(options) {
     options,
     v2Flags.isV2RouteConvention
   );
-  const typescript = options.typescript ?? !!tsconfigPath;
-  const transpilerOptions = typescript ? void 0 : await getJsTranspilerOptions(rootDirectory);
+  const typescript = !!(options.typescript ?? tsconfigPath?.endsWith("tsconfig.json"));
   const routes = [];
   for (const route of routesArray) {
     routes.push(
@@ -76,7 +75,6 @@ async function generateRoutes(options) {
         rootDirectory,
         appDirectory,
         formatOptions,
-        transpilerOptions,
         v2Flags
       })
     );
@@ -85,7 +83,6 @@ async function generateRoutes(options) {
     routes,
     routeGroups,
     isTypescript: typescript,
-    transpilerOptions,
     v2Flags,
     formatOptions
   };
@@ -98,12 +95,12 @@ async function getLocalePrefix(appDirectory, { localePrefix, routeName }, isV2Ro
   const existingFiles = await readdir(joinPath(appDirectory, "routes")).catch(
     () => []
   );
-  const homeRouteWithLocaleRE = isV2RouteConvention ? /^\(\$(\w+)\)\._index.[jt]sx?$/ : /^\(\$(\w+)\)$/;
-  const homeRouteWithLocale = existingFiles.find(
-    (file) => homeRouteWithLocaleRE.test(file)
+  const coreRouteWithLocaleRE = isV2RouteConvention ? /^\(\$(\w+)\)\.(_index|\$|cart).[jt]sx?$/ : /^\(\$(\w+)\)$/;
+  const coreRouteWithLocale = existingFiles.find(
+    (file) => coreRouteWithLocaleRE.test(file)
   );
-  if (homeRouteWithLocale) {
-    return homeRouteWithLocale.match(homeRouteWithLocaleRE)?.[1];
+  if (coreRouteWithLocale) {
+    return coreRouteWithLocale.match(coreRouteWithLocaleRE)?.[1];
   }
 }
 async function generateProjectFile(routeFrom, {
@@ -113,7 +110,6 @@ async function generateProjectFile(routeFrom, {
   force,
   adapter,
   templatesRoot = getStarterDir(),
-  transpilerOptions,
   formatOptions,
   localePrefix,
   v2Flags = {},
@@ -159,19 +155,17 @@ async function generateProjectFile(routeFrom, {
     if (!await fileExists(dirname(destinationPath))) {
       await mkdir(dirname(destinationPath));
     }
+    const templateAppFilePath = getTemplateAppFile(filePath, templatesRoot);
     if (!/\.[jt]sx?$/.test(filePath)) {
-      await copyFile(
-        getTemplateAppFile(filePath, templatesRoot),
-        destinationPath
-      );
+      await copyFile(templateAppFilePath, destinationPath);
       continue;
     }
     let templateContent = convertTemplateToRemixVersion(
-      await readFile(getTemplateAppFile(filePath, templatesRoot)),
+      await readFile(templateAppFilePath),
       v2Flags
     );
     if (!typescript) {
-      templateContent = transpileFile(templateContent, transpilerOptions);
+      templateContent = await transpileFile(templateContent);
     }
     if (adapter) {
       templateContent = templateContent.replace(
@@ -179,7 +173,7 @@ async function generateProjectFile(routeFrom, {
         adapter
       );
     }
-    templateContent = formatCode(
+    templateContent = await formatCode(
       templateContent,
       formatOptions,
       destinationPath
@@ -223,17 +217,6 @@ async function findRouteDependencies(routeFilePath, appDirectory) {
   }
   return [...fileDependencies];
 }
-async function getJsTranspilerOptions(rootDirectory) {
-  const jsConfigPath = joinPath(rootDirectory, "jsconfig.json");
-  if (!await fileExists(jsConfigPath))
-    return;
-  return JSON.parse(
-    (await readFile(jsConfigPath, { encoding: "utf8" })).replace(
-      /^\s*\/\/.*$/gm,
-      ""
-    )
-  )?.compilerOptions;
-}
 async function renderRoutePrompt(options) {
   const generateAll = await renderConfirmationPrompt({
     message: "Scaffold all standard route files? " + Object.keys(ROUTE_MAP).join(", "),

package/dist/lib/setups/routes/generate.test.js

@@ -39,7 +39,6 @@ describe("generate/route", () => {
         expect(result).toMatchObject(
           expect.objectContaining({
             isTypescript: false,
-            transpilerOptions: { test: "js" },
             formatOptions: { singleQuote: false },
             routes: expect.any(Array)
           })
@@ -61,7 +60,7 @@ describe("generate/route", () => {
         });
         vi.mocked(getRemixConfig).mockResolvedValue({
           ...directories,
-          tsconfigPath: "somewhere",
+          tsconfigPath: "somewhere/tsconfig.json",
           future: {
             v2_routeConvention: true
           }
@@ -74,7 +73,6 @@ describe("generate/route", () => {
         expect(result).toMatchObject(
           expect.objectContaining({
             isTypescript: true,
-            transpilerOptions: void 0,
             routes: expect.any(Array),
             formatOptions: expect.any(Object)
           })

package/dist/lib/transpile-ts.js

@@ -1,6 +1,5 @@
 import path from 'path';
 import fs from 'fs/promises';
-import ts from 'typescript';
 import glob from 'fast-glob';
 import { outputDebug } from '@shopify/cli-kit/node/output';
 import { getCodeFormatOptions, formatCode } from './format-code.js';
@@ -18,7 +17,9 @@ const DEFAULT_TS_CONFIG = {
   forceConsistentCasingInFileNames: true,
   skipLibCheck: true
 };
-function transpileFile(code, config = DEFAULT_TS_CONFIG) {
+async function transpileFile(code, config = DEFAULT_TS_CONFIG) {
+  const tsImport = await import('typescript');
+  const ts = tsImport.default ?? tsImport;
   const withArtificialNewLines = escapeNewLines(code);
   const compiled = ts.transpileModule(withArtificialNewLines, {
     reportDiagnostics: false,
@@ -82,7 +83,7 @@ async function transpileProject(projectDir) {
       continue;
     }
     const tsx = await fs.readFile(entry, "utf8");
-    const mjs = formatCode(transpileFile(tsx), formatConfig);
+    const mjs = await formatCode(await transpileFile(tsx), formatConfig);
     await fs.rm(entry);
     await fs.writeFile(entry.replace(/\.ts(x?)$/, ".js$1"), mjs, "utf8");
   }

package/dist/virtual-routes/components/HydrogenLogoBaseBW.jsx

@@ -1,28 +1,31 @@
-const HydrogenLogoBaseBW = (props) => /* @__PURE__ */ React.createElement(
+import { jsx, jsxs } from "react/jsx-runtime";
+const HydrogenLogoBaseBW = (props) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: 81,
     height: 82,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      d: "M39.955 81.28 2.138 61.19l12.933-6.818 14.562 7.733 12.218-6.441L27.29 47.93l12.933-6.833L78.04 61.189l-12.934 6.817L51.35 60.7l-12.236 6.457 13.774 7.308-12.933 6.817Z",
-      fill: "#000"
-    }
-  ),
-  /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "m40.225 0 39.953 21.227-15.073 7.945-13.756-7.308-10.096 5.328 13.775 7.309-15.075 7.945L0 21.22l15.073-7.945 14.562 7.732 10.078-5.313-14.56-7.731L40.225 0ZM29.426 7.967l14.564 7.734L29.63 23.27 15.07 15.537l-10.794 5.69 35.68 18.956 10.793-5.688-13.773-7.307L51.352 19.6l13.757 7.308 10.794-5.69-35.68-18.956-10.797 5.704Z",
-      fill: "#000"
-    }
-  )
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M39.955 81.28 2.138 61.19l12.933-6.818 14.562 7.733 12.218-6.441L27.29 47.93l12.933-6.833L78.04 61.189l-12.934 6.817L51.35 60.7l-12.236 6.457 13.774 7.308-12.933 6.817Z",
+          fill: "#000"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "m40.225 0 39.953 21.227-15.073 7.945-13.756-7.308-10.096 5.328 13.775 7.309-15.075 7.945L0 21.22l15.073-7.945 14.562 7.732 10.078-5.313-14.56-7.731L40.225 0ZM29.426 7.967l14.564 7.734L29.63 23.27 15.07 15.537l-10.794 5.69 35.68 18.956 10.793-5.688-13.773-7.307L51.352 19.6l13.757 7.308 10.794-5.69-35.68-18.956-10.797 5.704Z",
+          fill: "#000"
+        }
+      )
+    ]
+  }
 );
 export {
   HydrogenLogoBaseBW

package/dist/virtual-routes/components/HydrogenLogoBaseColor.jsx

@@ -1,42 +1,46 @@
-import * as React from "react";
-const HydrogenLogoBaseColor = (props) => /* @__PURE__ */ React.createElement(
+import { jsx, jsxs } from "react/jsx-runtime";
+const HydrogenLogoBaseColor = (props) => /* @__PURE__ */ jsxs(
   "svg",
   {
     width: 76,
     height: 81,
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      d: "M37.817 80.149 0 60.057l12.934-6.817 14.561 7.733 12.218-6.441-14.561-7.733 12.933-6.833 37.818 20.091-12.934 6.817-13.757-7.307-12.236 6.457 13.775 7.308-12.934 6.817Z",
-      fill: "#000"
-    }
-  ),
-  /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      d: "M37.818 40.183 0 20.092l12.934-6.818 14.562 7.733 12.218-6.441-14.562-7.733L38.086 0l37.817 20.091-12.934 6.817-13.756-7.307-12.236 6.457 13.774 7.308-12.933 6.817Z",
-      fill: "url(#a)"
-    }
-  ),
-  /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement(
-    "linearGradient",
-    {
-      id: "a",
-      x1: 74.48,
-      y1: 21.654,
-      x2: 18.735,
-      y2: 51.694,
-      gradientUnits: "userSpaceOnUse"
-    },
-    /* @__PURE__ */ React.createElement("stop", { offset: 2e-3, stopColor: "#430470" }),
-    /* @__PURE__ */ React.createElement("stop", { offset: 0.385, stopColor: "#8E01F0" }),
-    /* @__PURE__ */ React.createElement("stop", { offset: 0.635, stopColor: "#354CF6" }),
-    /* @__PURE__ */ React.createElement("stop", { offset: 1, stopColor: "#01FFFF" })
-  ))
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M37.817 80.149 0 60.057l12.934-6.817 14.561 7.733 12.218-6.441-14.561-7.733 12.933-6.833 37.818 20.091-12.934 6.817-13.757-7.307-12.236 6.457 13.775 7.308-12.934 6.817Z",
+          fill: "#000"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M37.818 40.183 0 20.092l12.934-6.818 14.562 7.733 12.218-6.441-14.562-7.733L38.086 0l37.817 20.091-12.934 6.817-13.756-7.307-12.236 6.457 13.774 7.308-12.933 6.817Z",
+          fill: "url(#a)"
+        }
+      ),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+        "linearGradient",
+        {
+          id: "a",
+          x1: 74.48,
+          y1: 21.654,
+          x2: 18.735,
+          y2: 51.694,
+          gradientUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ jsx("stop", { offset: 2e-3, stopColor: "#430470" }),
+            /* @__PURE__ */ jsx("stop", { offset: 0.385, stopColor: "#8E01F0" }),
+            /* @__PURE__ */ jsx("stop", { offset: 0.635, stopColor: "#354CF6" }),
+            /* @__PURE__ */ jsx("stop", { offset: 1, stopColor: "#01FFFF" })
+          ]
+        }
+      ) })
+    ]
+  }
 );
 export {
   HydrogenLogoBaseColor