@shopify/hydrogen 0.22.1 → 0.25.0

package/dist/esnext/foundation/Analytics/connectors/Shopify/utils.js

@@ -0,0 +1,56 @@
+const zeros = '00000000';
+const tokenHash = 'xxxx-4xxx-xxxx-xxxxxxxxxxxx';
+export function buildUUID() {
+    let hash = '';
+    try {
+        const crypto = window.crypto;
+        const randomValuesArray = new Uint16Array(31);
+        crypto.getRandomValues(randomValuesArray);
+        // Generate a strong UUID
+        let i = 0;
+        hash = tokenHash
+            .replace(/[x]/g, (c, ...args) => {
+            const r = randomValuesArray[i] % 16;
+            const v = c === 'x' ? r : (r & 0x3) | 0x8;
+            i++;
+            return v.toString(16);
+        })
+            .toUpperCase();
+    }
+    catch (err) {
+        // crypto not available, generate weak UUID
+        hash = tokenHash
+            .replace(/[x]/g, (c, ...args) => {
+            const r = (Math.random() * 16) | 0;
+            const v = c === 'x' ? r : (r & 0x3) | 0x8;
+            return v.toString(16);
+        })
+            .toUpperCase();
+    }
+    return `${hexTime()}-${hash}`;
+}
+export function hexTime() {
+    // 32 bit representations of new Date().getTime() and performance.now()
+    let dateNumber = 0;
+    let perfNumber = 0;
+    // Result of zero-fill right shift is always positive
+    dateNumber = new Date().getTime() >>> 0;
+    try {
+        perfNumber = performance.now() >>> 0;
+    }
+    catch (err) {
+        perfNumber = 0;
+    }
+    const output = Math.abs(dateNumber + perfNumber)
+        .toString(16)
+        .toLowerCase();
+    return zeros.substr(0, 8 - output.length) + output;
+}
+export function addDataIf(keyValuePairs, formattedData) {
+    Object.entries(keyValuePairs).forEach(([key, value]) => {
+        if (value) {
+            formattedData[key] = value;
+        }
+    });
+    return formattedData;
+}

package/dist/esnext/foundation/Analytics/hook.js

@@ -1,7 +1,9 @@
 import { useServerRequest } from '../ServerRequestProvider';
+import { mergeDeep } from './utils';
 export function useServerAnalytics(data) {
     const request = useServerRequest();
-    if (data)
-        request.ctx.analyticsData = Object.assign({}, request.ctx.analyticsData, data);
+    if (data) {
+        request.ctx.analyticsData = mergeDeep(request.ctx.analyticsData, data);
+    }
     return request.ctx.analyticsData;
 }

package/dist/esnext/foundation/Analytics/utils.d.ts

@@ -1 +1,3 @@
 export declare function getNamedspacedEventname(eventname: string): string;
+export declare function isObject(item: any): any;
+export declare function mergeDeep(target: any, ...sources: any[]): any;

package/dist/esnext/foundation/Analytics/utils.js

@@ -6,3 +6,24 @@ export function getNamedspacedEventname(eventname) {
         ? `c-${eventname}`
         : eventname;
 }
+export function isObject(item) {
+    return item && typeof item === 'object' && !Array.isArray(item);
+}
+export function mergeDeep(target, ...sources) {
+    if (!sources.length)
+        return target;
+    const source = sources.shift();
+    if (isObject(target) && isObject(source)) {
+        for (const key in source) {
+            if (isObject(source[key])) {
+                if (!target[key])
+                    Object.assign(target, { [key]: {} });
+                mergeDeep(target[key], source[key]);
+            }
+            else {
+                Object.assign(target, { [key]: source[key] });
+            }
+        }
+    }
+    return mergeDeep(target, ...sources);
+}

package/dist/esnext/foundation/BuiltInRoutes/BuiltInRoutes.d.ts

@@ -0,0 +1,2 @@
+import { ResourceGetter } from '../../utilities/apiRoutes';
+export declare function getBuiltInRoute(url: URL): ResourceGetter | null;

package/dist/esnext/foundation/BuiltInRoutes/BuiltInRoutes.js

@@ -0,0 +1,23 @@
+import { EVENT_PATHNAME, EVENT_PATHNAME_REGEX } from '../../constants';
+import { ServerAnalyticsRoute } from '../Analytics/ServerAnalyticsRoute';
+import { HealthCheck } from './healthCheck';
+const builtInRoutes = [
+    {
+        pathname: EVENT_PATHNAME,
+        regex: EVENT_PATHNAME_REGEX,
+        resource: ServerAnalyticsRoute,
+    },
+    {
+        pathname: '/__health',
+        resource: HealthCheck,
+    },
+];
+export function getBuiltInRoute(url) {
+    for (const route of builtInRoutes) {
+        if (url.pathname === route.pathname ||
+            (route.regex && route.regex.test(url.pathname))) {
+            return route.resource;
+        }
+    }
+    return null;
+}

package/dist/esnext/foundation/BuiltInRoutes/healthCheck.d.ts

@@ -0,0 +1 @@
+export declare function HealthCheck(): Promise<Response>;

package/dist/esnext/foundation/BuiltInRoutes/healthCheck.js

@@ -0,0 +1,3 @@
+export async function HealthCheck() {
+    return new Response(null, { status: 200 });
+}

package/dist/{node/framework → esnext/foundation/Cache}/cache-sub-request.d.ts

@@ -1,4 +1,4 @@
-import type { QueryKey, CachingStrategy } from '../types';
+import type { QueryKey, CachingStrategy } from '../../types';
 export declare function generateSubRequestCacheControlHeader(userCacheOptions?: CachingStrategy): string;
 /**
  * Get an item from the cache. If a match is found, returns a tuple

package/dist/esnext/{framework → foundation/Cache}/cache-sub-request.js

@@ -1,7 +1,7 @@
-import { getCache } from './runtime';
-import { hashKey } from '../utilities/hash';
+import { getCache } from '../runtime';
+import { hashKey } from '../../utilities/hash';
 import * as CacheApi from './cache';
-import { CacheSeconds } from './CachingStrategy';
+import { CacheShort } from './strategies';
 /**
  * Wrapper Cache functions for sub queries
  */
@@ -12,7 +12,7 @@ function getKeyUrl(key) {
     return `https://shopify.dev/?${key}`;
 }
 function getCacheOption(userCacheOptions) {
-    return userCacheOptions || CacheSeconds();
+    return userCacheOptions || CacheShort();
 }
 export function generateSubRequestCacheControlHeader(userCacheOptions) {
     return CacheApi.generateDefaultCacheControlHeader(getCacheOption(userCacheOptions));

package/dist/esnext/{framework → foundation/Cache}/cache.d.ts

@@ -1,4 +1,4 @@
-import type { CachingStrategy } from '../types';
+import type { CachingStrategy } from '../../types';
 export declare function generateDefaultCacheControlHeader(userCacheOptions?: CachingStrategy): string;
 /**
  * Get an item from the cache. If a match is found, returns a tuple

package/dist/esnext/{framework → foundation/Cache}/cache.js

@@ -1,6 +1,6 @@
-import { getCache } from './runtime';
-import { CacheSeconds, generateCacheControlHeader, } from '../framework/CachingStrategy';
-import { logCacheApiStatus } from '../utilities/log';
+import { getCache } from '../runtime';
+import { CacheShort, generateCacheControlHeader } from './strategies';
+import { logCacheApiStatus } from '../../utilities/log';
 function getCacheControlSetting(userCacheOptions, options) {
     if (userCacheOptions && options) {
         return {
@@ -9,7 +9,7 @@ function getCacheControlSetting(userCacheOptions, options) {
         };
     }
     else {
-        return userCacheOptions || CacheSeconds();
+        return userCacheOptions || CacheShort();
     }
 }
 export function generateDefaultCacheControlHeader(userCacheOptions) {

package/dist/esnext/foundation/Cache/strategies/index.d.ts

@@ -0,0 +1,7 @@
+import type { CachingStrategy, AllCacheOptions, NoStoreStrategy } from '../../../types';
+export declare const NO_STORE = "no-store";
+export declare function generateCacheControlHeader(cacheOptions: CachingStrategy): string;
+export declare function CacheNone(): NoStoreStrategy;
+export declare function CacheShort(overrideOptions?: CachingStrategy): AllCacheOptions;
+export declare function CacheLong(overrideOptions?: CachingStrategy): AllCacheOptions;
+export declare function CacheCustom(overrideOptions: CachingStrategy): AllCacheOptions;

package/dist/esnext/foundation/Cache/strategies/index.js

@@ -0,0 +1,54 @@
+const PUBLIC = 'public';
+const PRIVATE = 'private';
+export const NO_STORE = 'no-store';
+const optionMapping = {
+    maxAge: 'max-age',
+    staleWhileRevalidate: 'stale-while-revalidate',
+    sMaxAge: 's-maxage',
+    staleIfError: 'stale-if-error',
+};
+export function generateCacheControlHeader(cacheOptions) {
+    const cacheControl = [];
+    Object.keys(cacheOptions).forEach((key) => {
+        if (key === 'mode') {
+            cacheControl.push(cacheOptions[key]);
+        }
+        else if (optionMapping[key]) {
+            cacheControl.push(`${optionMapping[key]}=${cacheOptions[key]}`);
+        }
+    });
+    return cacheControl.join(', ');
+}
+export function CacheNone() {
+    return {
+        mode: NO_STORE,
+    };
+}
+function guardExpirableModeType(overrideOptions) {
+    if (overrideOptions?.mode &&
+        overrideOptions?.mode !== PUBLIC &&
+        overrideOptions?.mode !== PRIVATE) {
+        throw Error("'mode' must be either 'public' or 'private'");
+    }
+}
+export function CacheShort(overrideOptions) {
+    guardExpirableModeType(overrideOptions);
+    return {
+        mode: PUBLIC,
+        maxAge: 1,
+        staleWhileRevalidate: 9,
+        ...overrideOptions,
+    };
+}
+export function CacheLong(overrideOptions) {
+    guardExpirableModeType(overrideOptions);
+    return {
+        mode: PUBLIC,
+        maxAge: 3600,
+        staleWhileRevalidate: 82800,
+        ...overrideOptions,
+    };
+}
+export function CacheCustom(overrideOptions) {
+    return overrideOptions;
+}

package/dist/esnext/foundation/Cookie/Cookie.d.ts

@@ -1,9 +1,9 @@
 export declare type CookieOptions = {
-    /** Whether to secure the cookie so that the browser only sends it over HTTPS. Some
-     * browsers [don't work with secure cookies on localhost](https://owasp.org/www-community/controls/SecureCookieAttribute).
+    /** Whether to secure the cookie so that [client-side JavaScript can't read the cookie](https://owasp.org/www-community/HttpOnly).
      */
     httpOnly?: boolean;
-    /** Whether to secure the cookie so that [client JavaScript is unable to read it](https://owasp.org/www-community/HttpOnly).
+    /** Whether to secure the cookie so that the browser only sends the cookie over HTTPS. Some
+     * browsers [don't work with secure cookies on localhost](https://owasp.org/www-community/controls/SecureCookieAttribute).
      */
     secure?: boolean;
     /** Declares that the cookie should be restricted to a first-party

package/dist/esnext/foundation/Cookie/Cookie.js

@@ -7,6 +7,11 @@ const reservedCookieNames = ['mac', 'user_session_id'];
  * same configuration options as what's available in `Cookie`.
  */
 export class Cookie {
+    /** The name of the cookie stored in the browser. */
+    name;
+    /** An optional object to configure [how the cookie is persisted in the browser](https://shopify.dev/api/hydrogen/components/framework/cookie#cookie-options). */
+    options;
+    data;
     constructor(name, options = {}) {
         if (reservedCookieNames.includes(name)) {
             log.warn(`Warning "${name}" is a reserved cookie name by oxygen!`);

package/dist/esnext/foundation/DevTools/DevTools.client.d.ts

@@ -0,0 +1,3 @@
+export declare function DevTools({ dataFromServer }: {
+    dataFromServer: any;
+}): JSX.Element | null;

package/dist/esnext/foundation/DevTools/DevTools.client.js

@@ -0,0 +1,17 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Interface, Panels } from './components';
+export function DevTools({ dataFromServer }) {
+    const [open, setOpen] = useState(false);
+    const toggleOpen = useCallback(() => {
+        setOpen((state) => !state);
+    }, []);
+    const [hasMounted, setHasMounted] = useState(false);
+    useEffect(() => {
+        setHasMounted(true);
+    }, []);
+    if (hasMounted) {
+        return (React.createElement(Interface, { open: open, onClose: toggleOpen, onOpen: toggleOpen },
+            React.createElement(Panels, { ...dataFromServer })));
+    }
+    return null;
+}

package/dist/esnext/foundation/DevTools/DevTools.server.d.ts

@@ -0,0 +1 @@
+export declare function DevTools(): JSX.Element;

package/dist/esnext/foundation/DevTools/DevTools.server.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { DevTools as DevToolsClient } from './DevTools.client';
+import { useServerRequest } from '../ServerRequestProvider';
+export function DevTools() {
+    const serverRequest = useServerRequest();
+    const { shopifyConfig } = serverRequest.ctx;
+    const { locale, storeDomain, storefrontApiVersion } = shopifyConfig || {};
+    const settings = {
+        locale,
+        storeDomain,
+        storefrontApiVersion,
+    };
+    return React.createElement(DevToolsClient, { dataFromServer: { settings } });
+}

package/dist/esnext/foundation/DevTools/components/GraphQL.client.d.ts

@@ -0,0 +1 @@
+export declare function GraphQL(): JSX.Element;

package/dist/esnext/foundation/DevTools/components/GraphQL.client.js

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from 'react';
+export function GraphQL() {
+    const [warnings, setWarnings] = useState(null);
+    useEffect(() => {
+        if (import.meta.hot) {
+            import.meta.hot.on('hydrogen-dev-tools', ({ type, data }) => {
+                if (type === 'warn') {
+                    setWarnings((state) => [...(state || []), data]);
+                }
+            });
+        }
+    }, []);
+    const warningsMarkup = warnings
+        ? warnings.map((war, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        React.createElement("li", { key: war + i },
+            React.createElement("pre", null, war))))
+        : null;
+    return (React.createElement("div", null,
+        React.createElement("ul", { style: {
+                fontFamily: 'monospace',
+                paddingTop: '1em',
+                fontSize: '0.9em',
+            } }, warningsMarkup)));
+}

package/dist/esnext/foundation/DevTools/components/Heading.d.ts

@@ -0,0 +1,5 @@
+export declare function Heading({ linkText, url, children, }: {
+    linkText?: string;
+    url?: string;
+    children: string;
+}): JSX.Element;

package/dist/esnext/foundation/DevTools/components/Heading.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export function Heading({ linkText, url, children, }) {
+    return (React.createElement("span", { style: { display: 'flex', alignItems: 'baseline', padding: '0 0 0.5em' } },
+        React.createElement("span", { style: { paddingRight: '0em', flex: 1, fontWeight: 'bold' } },
+            children,
+            ' '),
+        React.createElement("a", { style: {
+                color: 'blue',
+                fontFamily: 'monospace',
+                textDecoration: 'underline',
+            }, href: url }, linkText)));
+}

package/dist/esnext/foundation/DevTools/components/Interface.client.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Props {
+    open?: boolean;
+    title?: string | React.ReactNode;
+    onClose?: () => void;
+    onOpen?: () => void;
+    activator?: React.ReactElement;
+    children?: React.ReactNode;
+}
+export declare function Interface({ children, onClose, onOpen, ...props }: Props): JSX.Element;
+export {};

package/dist/esnext/foundation/DevTools/components/Interface.client.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { CloseIcon, HydrogenIcon } from './icons';
+export function Interface({ children, onClose, onOpen, ...props }) {
+    const open = false || props.open;
+    return (React.createElement("div", { id: "hydrogen-dev-tools", "aria-hidden": true, style: {
+            position: 'fixed',
+            zIndex: 100,
+            display: 'flex',
+            flexDirection: 'column',
+            right: 0,
+            bottom: 0,
+            padding: '1.5em',
+            maxWidth: '100%',
+            flexWrap: 'wrap',
+        } },
+        React.createElement("button", { type: "button", style: {
+                position: 'relative',
+                background: 'white',
+                border: '1px solid',
+                padding: '0em 0.5em 0.25em 1.25em',
+                boxShadow: '10px 10px 0px black',
+                display: 'flex',
+                alignItems: 'center',
+                color: 'black',
+            }, onClick: onOpen },
+            React.createElement("div", { style: { textAlign: 'left', flex: 1 } },
+                React.createElement("span", { style: {
+                        fontFamily: 'monospace',
+                        fontWeight: 'bold',
+                        paddingRight: '0.5em',
+                    } }, "Dev tools")),
+            ' ',
+            open ? React.createElement(CloseIcon, null) : React.createElement(HydrogenIcon, null)),
+        React.createElement("div", { style: {
+                display: open ? 'block' : 'none',
+                position: 'relative',
+                top: '-1px',
+                overflow: 'scroll',
+                color: 'black',
+                background: 'white',
+                border: '1px solid',
+                boxShadow: '10px 10px 0px black',
+                maxWidth: '50em',
+                width: '100vw',
+                height: '50vh',
+            } }, children)));
+}

package/dist/esnext/foundation/DevTools/components/Panels.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react';
+import { Performance } from './Performance.client';
+import { Settings } from './Settings.client';
+export interface Props {
+    settings: ComponentProps<typeof Settings>;
+    performance: ComponentProps<typeof Performance>;
+}
+export declare function Panels({ settings }: Props): JSX.Element;

package/dist/esnext/foundation/DevTools/components/Panels.js

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import { ClientAnalytics } from '../../Analytics';
+import { Performance } from './Performance.client';
+import { Settings } from './Settings.client';
+export function Panels({ settings }) {
+    const [selectedPanel, setSelectedPanel] = useState(0);
+    const [navigations, setNavigations] = useState([]);
+    useEffect(() => {
+        ClientAnalytics.subscribe(ClientAnalytics.eventNames.PERFORMANCE, ({ response_start, navigation_start, first_contentful_paint, largest_contentful_paint, response_end, page_load_type, url, transfer_size, }) => {
+            setNavigations([
+                ...navigations,
+                {
+                    ttfb: response_start - navigation_start,
+                    fcp: first_contentful_paint,
+                    lcp: largest_contentful_paint,
+                    duration: response_end - navigation_start,
+                    type: `${page_load_type} load`,
+                    size: transfer_size,
+                    url,
+                },
+            ]);
+        });
+    }, [setNavigations, navigations]);
+    const panels = getPanels({ settings, performance: { navigations } });
+    const panelComponents = panels.map((obj, index) => (React.createElement("div", { key: obj.content, style: { display: selectedPanel === index ? 'block' : 'none' } }, obj.panel)));
+    return (React.createElement("div", { style: { display: 'flex', height: '100%' } },
+        React.createElement("div", { style: { borderRight: '1px solid', padding: '1em 0em' } }, panels.map(({ content, icon, id }, index) => {
+            const active = selectedPanel === index;
+            return (React.createElement("button", { key: id, type: "button", style: {
+                    lineHeight: 2,
+                    padding: '0em 1.25em',
+                    fontWeight: active ? 'bold' : 'normal',
+                    display: 'flex',
+                    alignItems: 'center',
+                }, onClick: () => setSelectedPanel(index) },
+                React.createElement("span", { style: { paddingRight: '0.4em' } }, icon),
+                React.createElement("span", { style: { fontFamily: 'monospace' } }, content)));
+        })),
+        React.createElement("div", { style: { padding: '1.25em', width: '100%' } }, panelComponents[selectedPanel ? selectedPanel : 0])));
+}
+function Panel({ children }) {
+    return React.createElement("div", null, children);
+}
+function getPanels({ settings, performance }) {
+    const panels = {
+        settings: {
+            content: 'Settings',
+            panel: React.createElement(Settings, { ...settings }),
+            icon: '🎛',
+        },
+        performance: {
+            content: 'Performance',
+            panel: React.createElement(Performance, { ...performance }),
+            icon: '⏱',
+        },
+    };
+    return Object.keys(panels).map((key) => {
+        return { ...panels[key], id: key };
+    });
+}

package/dist/esnext/foundation/DevTools/components/Performance.client.d.ts

@@ -0,0 +1,14 @@
+interface Navigation {
+    url: string;
+    type: string;
+    ttfb: number;
+    fcp: number;
+    lcp: number;
+    duration: number;
+    size: number;
+}
+interface Props {
+    navigations: Navigation[];
+}
+export declare function Performance({ navigations }: Props): JSX.Element;
+export {};

package/dist/esnext/foundation/DevTools/components/Performance.client.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Heading } from './Heading';
+export function Performance({ navigations }) {
+    const navigationsMarkup = navigations.map(({ url, ttfb, fcp, size, duration, type }) => (React.createElement("li", { key: url, style: { padding: '0.5em 0', borderBottom: '1px solid' } },
+        React.createElement(Item, { label: type, value: url.replace('http://localhost:3000', '') }),
+        React.createElement("div", { style: { display: 'flex' } },
+            React.createElement(Item, { label: "TTFB", value: ttfb }),
+            React.createElement(Item, { label: "Duration", value: duration }),
+            React.createElement(Item, { label: "FCP", value: fcp })))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Heading, null, "Performance"),
+        React.createElement("ul", null, navigationsMarkup)));
+}
+const Item = ({ label, value, unit }) => {
+    if (!value) {
+        return null;
+    }
+    const val = typeof value === 'string' ? (React.createElement("span", { style: { fontWeight: 'bold' } }, value)) : (`${Math.round(value)}${unit || 'ms'}`);
+    return (React.createElement("span", { style: {
+            fontFamily: 'monospace',
+            padding: '0 2em 0 0',
+            fontSize: '0.75em',
+        } },
+        label && label.padEnd(10),
+        val));
+};

package/dist/esnext/foundation/DevTools/components/Settings.client.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    locale: string;
+    storeDomain: string;
+    storefrontApiVersion: string;
+}
+export declare function Settings(props: Props): JSX.Element;
+export {};

package/dist/esnext/foundation/DevTools/components/Settings.client.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Heading } from './Heading';
+import { Table } from './Table';
+const KEY_MAP = {
+    locale: 'Locale',
+    storeDomain: 'Domain',
+    storefrontApiVersion: 'API Version',
+};
+export function Settings(props) {
+    const items = Object.entries(props).map(([key, value]) => {
+        return {
+            key: KEY_MAP[key],
+            value,
+            type: typeof value,
+        };
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Heading, null, "Config"),
+        React.createElement(Table, { items: items })));
+}

package/dist/esnext/foundation/DevTools/components/Table.d.ts

@@ -0,0 +1,9 @@
+interface Item {
+    key: string;
+    value: string;
+}
+interface TableProps {
+    items: Item[];
+}
+export declare function Table({ items }: TableProps): JSX.Element;
+export {};

package/dist/esnext/foundation/DevTools/components/Table.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export function Table({ items }) {
+    const itemsMarkup = items.map(({ key, value }) => (React.createElement("div", { key: key, style: { display: 'flex' } },
+        React.createElement("span", { style: { width: '30%', fontFamily: 'monospace', paddingRight: '1em' } }, key),
+        React.createElement("span", { style: { width: '70%', fontFamily: 'monospace', fontWeight: 'bold' } }, value))));
+    return React.createElement("ul", null, itemsMarkup);
+}

package/dist/esnext/foundation/DevTools/components/icons.d.ts

@@ -0,0 +1,2 @@
+export declare const CloseIcon: () => JSX.Element;
+export declare const HydrogenIcon: () => JSX.Element;

package/dist/esnext/foundation/DevTools/components/icons.js

@@ -0,0 +1,13 @@
+import React from 'react';
+export const CloseIcon = () => (React.createElement("svg", { style: {
+        height: '2.75em',
+        width: '2.75em',
+        padding: '1em',
+    }, viewBox: "0 0 460.775 460.775", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { fill: "black", d: "M285.08,230.397L456.218,59.27c6.076-6.077,6.076-15.911,0-21.986L423.511,4.565c-2.913-2.911-6.866-4.55-10.992-4.55\n\tc-4.127,0-8.08,1.639-10.993,4.55l-171.138,171.14L59.25,4.565c-2.913-2.911-6.866-4.55-10.993-4.55\n\tc-4.126,0-8.08,1.639-10.992,4.55L4.558,37.284c-6.077,6.075-6.077,15.909,0,21.986l171.138,171.128L4.575,401.505\n\tc-6.074,6.077-6.074,15.911,0,21.986l32.709,32.719c2.911,2.911,6.865,4.55,10.992,4.55c4.127,0,8.08-1.639,10.994-4.55\n\tl171.117-171.12l171.118,171.12c2.913,2.911,6.866,4.55,10.993,4.55c4.128,0,8.081-1.639,10.992-4.55l32.709-32.719\n\tc6.074-6.075,6.074-15.909,0-21.986L285.08,230.397z" })));
+export const HydrogenIcon = () => (React.createElement("svg", { style: {
+        height: '2.5em',
+        width: '2.5em',
+    }, width: "131", height: "130", viewBox: "0 0 131 130", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M64.9548 106.281L27.1377 86.1894L40.0714 79.3723L54.6329 87.1049L66.851 80.6638L52.2895 72.9313L65.2231 66.0979L103.04 86.1894L90.1065 93.0064L76.35 85.6989L64.114 92.1563L77.8884 99.4638L64.9548 106.281Z", fill: "black" }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M65.2247 25L105.178 46.2267L90.105 54.1716L76.3488 46.8642L66.2525 52.1924L80.028 59.5005L64.9532 67.446L25 46.2196L40.0734 38.2748L54.6349 46.0073L64.713 40.6944L50.1533 32.9628L65.2247 25ZM54.4262 32.9673L68.9896 40.7008L54.6315 48.27L40.0699 40.5374L29.276 46.2267L64.9569 65.1833L75.7495 59.4947L61.9761 52.1878L76.3518 44.6012L90.1087 51.9088L100.902 46.2196L65.2221 27.2634L54.4262 32.9673Z", fill: "black" })));

package/dist/esnext/foundation/DevTools/components/index.d.ts

@@ -0,0 +1,2 @@
+export { Interface } from './Interface.client';
+export { Panels } from './Panels';

package/dist/esnext/foundation/DevTools/components/index.js

@@ -0,0 +1,2 @@
+export { Interface } from './Interface.client';
+export { Panels } from './Panels';