@zalify/storefront-kit 0.1.0

package/dist/react/engine/settings.js

@@ -0,0 +1,68 @@
+/**
+ * Resolves global theme settings the same way Shopify does: schema
+ * defaults from config/settings_schema.json, overlaid with the current
+ * preset (or flat values) in config/settings_data.json — both provided
+ * at installTheme() time.
+ */
+import { getThemeStore } from './store';
+let cache = null;
+function resolve() {
+    if (cache)
+        return cache;
+    const store = getThemeStore();
+    const { settingsSchema, settingsData } = store.schema;
+    const defaults = {};
+    for (const group of settingsSchema) {
+        for (const setting of group.settings ?? []) {
+            const id = setting.id;
+            if (!id || setting.type === 'color_scheme_group')
+                continue;
+            if ('default' in setting)
+                defaults[id] = setting.default;
+        }
+    }
+    const current = typeof settingsData.current === 'string'
+        ? (settingsData.presets?.[settingsData.current] ?? {})
+        : (settingsData.current ?? {});
+    const settings = {
+        ...defaults,
+        ...current,
+        ...store.settingsOverride,
+    };
+    const rawSchemes = settings.color_schemes;
+    let schemes;
+    if (rawSchemes) {
+        schemes = Object.entries(rawSchemes).map(([id, value]) => ({
+            id,
+            settings: value.settings,
+        }));
+    }
+    else {
+        // Fall back to the schema definition defaults as a single scheme.
+        const group = settingsSchema
+            .flatMap((g) => g.settings ?? [])
+            .find((s) => s.type === 'color_scheme_group');
+        const definition = (group?.definition ?? []);
+        const schemeSettings = Object.fromEntries(definition.map((d) => [d.id, d.default ?? '#000000']));
+        schemes = [{ id: 'scheme-1', settings: schemeSettings }];
+    }
+    cache = { settings, schemes };
+    return cache;
+}
+/**
+ * Global theme settings. A lazy proxy so call sites can keep reading
+ * `themeSettings.card_density` while resolution waits for installTheme().
+ */
+export const themeSettings = new Proxy({}, {
+    get: (_target, key) => resolve().settings[key],
+    has: (_target, key) => key in resolve().settings,
+    ownKeys: () => Reflect.ownKeys(resolve().settings),
+    getOwnPropertyDescriptor: (_target, key) => Object.getOwnPropertyDescriptor(resolve().settings, key),
+});
+export function colorSchemes() {
+    return resolve().schemes;
+}
+export function getColorScheme(id) {
+    const schemes = resolve().schemes;
+    return schemes.find((s) => s.id === id) ?? schemes[0];
+}

package/dist/react/engine/store.d.ts

@@ -0,0 +1,64 @@
+/**
+ * The engine's data store. Apps install the theme schema (the JSON
+ * copied from apps/liquid by `pnpm sync`) plus their component
+ * registries once at startup:
+ *
+ *   // app/lib/theme-setup.ts — imported for side effects by root
+ *   installTheme({schema, sections, blocks, sectionLoaders});
+ *
+ * No import.meta.glob in here — data loading is the app's business
+ * (Vite apps glob, other bundlers can use generated modules), which
+ * keeps this package bundler-agnostic.
+ */
+import type { BlockComponent, SectionComponent, SectionGroupData, SectionLoader, TemplateData } from './types';
+export interface ThemeSchema {
+    /** templates/*.json keyed by name ("index", "product"…). */
+    templates: Record<string, TemplateData>;
+    /** templates/customers/*.json keyed by name ("login"…). */
+    customerTemplates?: Record<string, TemplateData>;
+    /** sections/*-group.json keyed by file name ("header-group"…). */
+    sectionGroups: Record<string, SectionGroupData>;
+    /** config/settings_schema.json. */
+    settingsSchema: Array<{
+        name: string;
+        settings?: Array<Record<string, unknown>>;
+    }>;
+    /** config/settings_data.json. */
+    settingsData: {
+        current: string | Record<string, unknown>;
+        presets?: Record<string, Record<string, unknown>>;
+    };
+    /** locales/*.json keyed by file name ("en.default", "en.default.schema"). */
+    locales: Record<string, Record<string, unknown>>;
+}
+export interface InstallThemeOptions {
+    schema: ThemeSchema;
+    /** Full section registry (spread builtinSections, then app extras). */
+    sections: Record<string, SectionComponent>;
+    /** Full block registry (spread builtinBlocks, then app extras). */
+    blocks: Record<string, BlockComponent>;
+    /** Server loaders keyed by section type (spread builtinSectionLoaders…). */
+    sectionLoaders?: Record<string, SectionLoader>;
+    /**
+     * App-level overrides applied on top of the resolved theme settings
+     * (schema defaults + current preset). The synced schema stays the
+     * shared source of truth; this is the seam for one app to diverge
+     * deliberately (e.g. a different Google font in one storefront).
+     */
+    settingsOverride?: Record<string, unknown>;
+}
+interface ThemeStore extends InstallThemeOptions {
+}
+export declare function installTheme(options: InstallThemeOptions): void;
+export declare function getThemeStore(): ThemeStore;
+/** Look up a page template ("index", "product", "customers/login"…). */
+export declare function getTemplate(name: string): TemplateData;
+/** Look up a section group ("header-group", "footer-group", "overlay-group"). */
+export declare function getSectionGroup(name: string): SectionGroupData;
+/**
+ * Parse theme JSON that may carry Shopify's leading block comment
+ * (templates/*.json are written by the theme editor with a header).
+ * Exposed for apps that load the schema from raw strings.
+ */
+export declare function parseThemeJson<T>(raw: string, name?: string): T;
+export {};

package/dist/react/engine/store.js

@@ -0,0 +1,42 @@
+let store = null;
+export function installTheme(options) {
+    store = options;
+}
+export function getThemeStore() {
+    if (!store) {
+        throw new Error('[storefront-kit] installTheme() has not been called. Import your app\'s ' +
+            'theme-setup module (which calls installTheme) before rendering.');
+    }
+    return store;
+}
+/** Look up a page template ("index", "product", "customers/login"…). */
+export function getTemplate(name) {
+    const { schema } = getThemeStore();
+    const template = name.startsWith('customers/')
+        ? schema.customerTemplates?.[name.slice('customers/'.length)]
+        : schema.templates[name];
+    if (!template)
+        throw new Error(`Unknown theme template: ${name}`);
+    return template;
+}
+/** Look up a section group ("header-group", "footer-group", "overlay-group"). */
+export function getSectionGroup(name) {
+    const group = getThemeStore().schema.sectionGroups[name];
+    if (!group)
+        throw new Error(`Unknown section group: ${name}`);
+    return group;
+}
+/**
+ * Parse theme JSON that may carry Shopify's leading block comment
+ * (templates/*.json are written by the theme editor with a header).
+ * Exposed for apps that load the schema from raw strings.
+ */
+export function parseThemeJson(raw, name = 'theme JSON') {
+    const stripped = raw.replace(/^\s*\/\*[\s\S]*?\*\//, '').trim();
+    try {
+        return JSON.parse(stripped);
+    }
+    catch (error) {
+        throw new Error(`Failed to parse ${name}: ${String(error)}`);
+    }
+}

package/dist/react/engine/translate.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Translate a locale key with `{{ var }}` interpolation.
+ *
+ *   t('general.go_to_slide', {number: 2}) // "Go to slide 2"
+ *   t('t:general.hero')                   // schema label
+ */
+export declare function t(key: string, vars?: Record<string, string | number>): string;

package/dist/react/engine/translate.js

@@ -0,0 +1,33 @@
+/**
+ * Mirror of Liquid's `| t` filter over the theme's locale files
+ * (locales/en.default.json, provided at installTheme() time). Keys
+ * prefixed with "t:" resolve against the schema locale file
+ * (en.default.schema.json), matching the theme editor.
+ */
+import { getThemeStore } from './store';
+function lookup(tree, key) {
+    let node = tree;
+    for (const part of key.split('.')) {
+        if (node == null || typeof node !== 'object')
+            return undefined;
+        node = node[part];
+    }
+    return typeof node === 'string' ? node : undefined;
+}
+/**
+ * Translate a locale key with `{{ var }}` interpolation.
+ *
+ *   t('general.go_to_slide', {number: 2}) // "Go to slide 2"
+ *   t('t:general.hero')                   // schema label
+ */
+export function t(key, vars) {
+    const { locales } = getThemeStore().schema;
+    const isSchemaKey = key.startsWith('t:');
+    const cleanKey = isSchemaKey ? key.slice(2) : key;
+    const tree = (locales[isSchemaKey ? 'en.default.schema' : 'en.default'] ??
+        {});
+    const raw = lookup(tree, cleanKey) ?? cleanKey.split('.').pop() ?? cleanKey;
+    if (!vars)
+        return raw;
+    return raw.replace(/\{\{\s*(\w+)\s*\}\}/g, (match, name) => name in vars ? String(vars[name]) : match);
+}

package/dist/react/engine/types.d.ts

@@ -0,0 +1,128 @@
+/**
+ * Data shapes mirrored from the Zalify Liquid theme's JSON schema
+ * (templates/*.json, sections/*-group.json, config/settings_data.json).
+ * Those files are copied verbatim from the theme and are the source of
+ * truth for page structure; these types describe them.
+ */
+import type { ComponentType, ReactNode } from 'react';
+export type SettingsBag = Record<string, unknown>;
+export interface BlockData {
+    type: string;
+    settings?: SettingsBag;
+    blocks?: Record<string, BlockData>;
+    block_order?: string[];
+    disabled?: boolean;
+}
+export interface SectionData {
+    type: string;
+    settings?: SettingsBag;
+    blocks?: Record<string, BlockData>;
+    block_order?: string[];
+    disabled?: boolean;
+    custom_css?: string[];
+}
+export interface TemplateData {
+    layout?: string | false;
+    wrapper?: string;
+    sections: Record<string, SectionData>;
+    order: string[];
+}
+export interface SectionGroupData extends TemplateData {
+    type: string;
+    name: string;
+}
+/** One color scheme from the color_scheme_group setting. */
+export interface ColorScheme {
+    id: string;
+    settings: {
+        background: string;
+        text: string;
+        accent: string;
+        button: string;
+        button_label: string;
+    };
+}
+/**
+ * Global theme settings: schema defaults from config/settings_schema.json
+ * overlaid with the current preset in config/settings_data.json.
+ * Individual ids are looked up loosely; well-known ones are typed below.
+ */
+export interface ThemeSettings extends SettingsBag {
+    type_body_font?: string;
+    type_body_google?: string;
+    type_heading_font?: string;
+    type_heading_google?: string;
+    type_mono_google?: string;
+    max_page_width?: string;
+    min_page_margin?: number;
+    button_corner_radius?: number;
+    input_corner_radius?: number;
+    card_corner_radius?: number;
+    card_swatch_style?: 'swatch' | 'variant_image' | 'none';
+    card_density?: 'comfortable' | 'compact';
+    card_show_quick_add?: boolean;
+    card_show_secondary_image?: boolean;
+    card_show_rating?: boolean;
+    card_badge_position?: 'corner' | 'below';
+    card_badge_background?: string;
+    card_badge_text?: string;
+    card_badge_sale_background?: string;
+    card_badge_sale_text?: string;
+    badge_style_1_labels?: string;
+    badge_style_1_background?: string;
+    badge_style_1_text?: string;
+    badge_style_2_labels?: string;
+    badge_style_2_background?: string;
+    badge_style_2_text?: string;
+    favicon?: string;
+    social_instagram?: string;
+    social_tiktok?: string;
+    social_x?: string;
+    social_facebook?: string;
+    social_youtube?: string;
+    social_pinterest?: string;
+}
+/** Props every ported section component (app/sections/*.tsx) receives. */
+export interface SectionProps<S extends object = SettingsBag> {
+    /** Section key inside its template, e.g. "hero" or "main". */
+    id: string;
+    section: SectionData;
+    /** section.settings (defaults are applied by the component itself). */
+    settings: S;
+    /** Pre-rendered child blocks — the mirror of `{% content_for 'blocks' %}`. */
+    children?: ReactNode;
+}
+/** Props every ported block component (app/blocks/*.tsx) receives. */
+export interface BlockProps<S extends object = SettingsBag> {
+    id: string;
+    block: BlockData;
+    settings: S;
+    /** Position among siblings — mirror of forloop/find_index tricks. */
+    index: number;
+    total: number;
+    /** Key of the section this block ultimately lives in. */
+    sectionId: string;
+    /** Pre-rendered nested blocks. */
+    children?: ReactNode;
+}
+export type SectionComponent = ComponentType<SectionProps>;
+export type BlockComponent = ComponentType<BlockProps>;
+/**
+ * Optional per-section server loader (app/sections/<type>.server.ts).
+ * Runs from route loaders for every instance of the section in the
+ * page's template; its result is delivered to the component via
+ * useSectionData().
+ */
+export interface SectionLoaderArgs {
+    settings: SettingsBag;
+    section: SectionData;
+    sectionId: string;
+    storefront: {
+        query: (query: string, options?: Record<string, unknown>) => Promise<any>;
+        CacheLong?: () => unknown;
+        CacheShort?: () => unknown;
+    };
+    params: Record<string, string | undefined>;
+    request: Request;
+}
+export type SectionLoader = (args: SectionLoaderArgs) => Promise<unknown>;

package/dist/react/engine/types.js

@@ -0,0 +1 @@
+export {};

package/dist/react/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @zalify/storefront-kit/react — the Zalify theme engine and shared React
+ * components, host-framework-agnostic. An app:
+ *
+ *   1. installTheme({schema, sections, blocks, sectionLoaders}) at
+ *      startup, merging builtinSections/builtinBlocks with its own
+ *      app-local components;
+ *   2. wraps the tree in <AdapterProvider adapter={…}> injecting its
+ *      router/cart primitives;
+ *   3. renders pages with <ThemeTemplate>/<SectionGroup> and
+ *      <CssVariables/> in <head>.
+ *
+ * Server loaders: import {loadSectionData} from '@zalify/storefront-kit/react/server'.
+ */
+export * from './engine/types';
+export { installTheme, getTemplate, getSectionGroup, parseThemeJson, } from './engine/store';
+export type { ThemeSchema, InstallThemeOptions } from './engine/store';
+export { themeSettings, colorSchemes, getColorScheme } from './engine/settings';
+export { t } from './engine/translate';
+export { ThemeTemplate, SectionGroup, RenderSection, RenderSections, } from './engine/render';
+export { ThemeDataProvider, TemplateProvider, useThemeGlobals, useResource, useSectionData, useTemplateScope, } from './engine/context';
+export { CssVariables } from './engine/CssVariables';
+export { parseFontHandle, googleFontsHref } from './engine/fonts';
+export { settingImageUrl, imageUrl, imageSrcSet, PlaceholderSvg, } from './engine/images';
+export { AdapterProvider, useAdapter } from './adapter';
+export type { ThemeAdapter, AdapterLinkProps, CartAddFormProps, CartLineInput, } from './adapter';
+export { Icon } from './components/Icon';
+export type { IconName } from './components/Icon';
+export { PaymentIcons } from './components/PaymentIcons';
+export type { PaymentType } from './components/PaymentIcons';
+export { Price } from './components/Price';
+export { Rating } from './components/Rating';
+export { ProductBadges, hasProductBadges } from './components/ProductBadges';
+export { swatchStyle } from './components/SwatchStyle';
+export { ProductCard, PRODUCT_CARD_FRAGMENT } from './components/ProductCard';
+export * from './components/VideoModal';
+export { Facets, COLLECTION_SORT_OPTIONS, SEARCH_SORT_OPTIONS, } from './components/Facets';
+export { builtinSections, builtinBlocks } from './registries';

package/dist/react/index.js

@@ -0,0 +1,39 @@
+/**
+ * @zalify/storefront-kit/react — the Zalify theme engine and shared React
+ * components, host-framework-agnostic. An app:
+ *
+ *   1. installTheme({schema, sections, blocks, sectionLoaders}) at
+ *      startup, merging builtinSections/builtinBlocks with its own
+ *      app-local components;
+ *   2. wraps the tree in <AdapterProvider adapter={…}> injecting its
+ *      router/cart primitives;
+ *   3. renders pages with <ThemeTemplate>/<SectionGroup> and
+ *      <CssVariables/> in <head>.
+ *
+ * Server loaders: import {loadSectionData} from '@zalify/storefront-kit/react/server'.
+ */
+// Engine
+export * from './engine/types';
+export { installTheme, getTemplate, getSectionGroup, parseThemeJson, } from './engine/store';
+export { themeSettings, colorSchemes, getColorScheme } from './engine/settings';
+export { t } from './engine/translate';
+export { ThemeTemplate, SectionGroup, RenderSection, RenderSections, } from './engine/render';
+export { ThemeDataProvider, TemplateProvider, useThemeGlobals, useResource, useSectionData, useTemplateScope, } from './engine/context';
+export { CssVariables } from './engine/CssVariables';
+export { parseFontHandle, googleFontsHref } from './engine/fonts';
+export { settingImageUrl, imageUrl, imageSrcSet, PlaceholderSvg, } from './engine/images';
+// Adapter seam
+export { AdapterProvider, useAdapter } from './adapter';
+// Shared components
+export { Icon } from './components/Icon';
+export { PaymentIcons } from './components/PaymentIcons';
+export { Price } from './components/Price';
+export { Rating } from './components/Rating';
+export { ProductBadges, hasProductBadges } from './components/ProductBadges';
+export { swatchStyle } from './components/SwatchStyle';
+export { ProductCard, PRODUCT_CARD_FRAGMENT } from './components/ProductCard';
+export * from './components/VideoModal';
+export { Facets, COLLECTION_SORT_OPTIONS, SEARCH_SORT_OPTIONS, } from './components/Facets';
+// Built-in registries (spread into installTheme with app extras).
+// Server-only loaders live in '@zalify/storefront-kit/react/server'.
+export { builtinSections, builtinBlocks } from './registries';

package/dist/react/registries.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Built-in component registries. Keys are the theme type names — the
+ * section/block `type` values in templates/*.json, which equal the old
+ * app/sections/*.tsx and app/blocks/*.tsx file names (including leading
+ * underscores and '404'). Apps spread these into installTheme() and add
+ * their own app-local sections/blocks on top.
+ */
+import type { BlockComponent, SectionComponent } from './engine/types';
+export declare const builtinSections: Record<string, SectionComponent>;
+export declare const builtinBlocks: Record<string, BlockComponent>;

package/dist/react/registries.js

@@ -0,0 +1,68 @@
+// Blocks
+import text from './blocks/text';
+import button from './blocks/button';
+import group from './blocks/group';
+import spacer from './blocks/spacer';
+import image from './blocks/image';
+import box from './blocks/_box';
+import slide from './blocks/_slide';
+import story from './blocks/story';
+import message from './blocks/message';
+import quote from './blocks/quote';
+import accordion from './blocks/accordion';
+import countdown from './blocks/countdown';
+import customLiquidBlock from './blocks/custom-liquid';
+import video from './blocks/video';
+import videoCard from './blocks/_video-card';
+// Sections
+import hero from './sections/hero';
+import stories from './sections/stories';
+import featuredCollection from './sections/featured-collection';
+import multicolumn from './sections/multicolumn';
+import imageWithText from './sections/image-with-text';
+import richText from './sections/rich-text';
+import customSection from './sections/custom-section';
+import customLiquidSection from './sections/custom-liquid';
+import announcementBar from './sections/announcement-bar';
+import notFound from './sections/404';
+import page from './sections/page';
+import article from './sections/article';
+import password from './sections/password';
+import contactForm from './sections/contact-form';
+import videoCarousel from './sections/video-carousel';
+import videoBubble from './sections/video-bubble';
+export const builtinSections = {
+    hero,
+    stories,
+    'featured-collection': featuredCollection,
+    multicolumn,
+    'image-with-text': imageWithText,
+    'rich-text': richText,
+    'custom-section': customSection,
+    'custom-liquid': customLiquidSection,
+    'announcement-bar': announcementBar,
+    '404': notFound,
+    page,
+    article,
+    password,
+    'contact-form': contactForm,
+    'video-carousel': videoCarousel,
+    'video-bubble': videoBubble,
+};
+export const builtinBlocks = {
+    text,
+    button,
+    group,
+    spacer,
+    image,
+    _box: box,
+    _slide: slide,
+    story,
+    message,
+    quote,
+    accordion,
+    countdown,
+    'custom-liquid': customLiquidBlock,
+    video,
+    '_video-card': videoCard,
+};

package/dist/react/registries.server.d.ts

@@ -0,0 +1,2 @@
+import type { SectionLoader } from './engine/types';
+export declare const builtinSectionLoaders: Record<string, SectionLoader>;

package/dist/react/registries.server.js

@@ -0,0 +1,98 @@
+/**
+ * Built-in server loaders, keyed by section type (import from
+ * '@zalify/storefront-kit/react/server'). Apps spread these into installTheme()
+ * alongside their own app-local loaders.
+ *
+ * featured-collection: server loader for sections/featured-collection
+ * .liquid's data needs — the Liquid `section.settings.collection
+ * .products` lookup becomes a Storefront API query. When the collection
+ * setting is blank (fresh install), fall back to the first available
+ * collection so the section still merchandises real products; if
+ * nothing resolves the component renders its placeholder cards (the
+ * Liquid onboarding state).
+ */
+import { PRODUCT_CARD_FRAGMENT } from './components/ProductCard';
+const FEATURED_COLLECTION_QUERY = `#graphql
+  query ThemeFeaturedCollection($handle: String!, $first: Int!) {
+    collection(handle: $handle) {
+      id
+      handle
+      title
+      products(first: $first) {
+        nodes {
+          ...ProductCard
+        }
+      }
+    }
+  }
+  ${PRODUCT_CARD_FRAGMENT}
+`;
+const FIRST_COLLECTIONS_QUERY = `#graphql
+  query ThemeFirstCollections($first: Int!) {
+    collections(first: 10) {
+      nodes {
+        id
+        handle
+        title
+        products(first: $first) {
+          nodes {
+            ...ProductCard
+          }
+        }
+      }
+    }
+  }
+  ${PRODUCT_CARD_FRAGMENT}
+`;
+const LATEST_PRODUCTS_QUERY = `#graphql
+  query ThemeLatestProducts($first: Int!) {
+    products(first: $first, sortKey: CREATED_AT, reverse: true) {
+      nodes {
+        ...ProductCard
+      }
+    }
+  }
+  ${PRODUCT_CARD_FRAGMENT}
+`;
+const featuredCollectionLoader = async ({ settings, storefront, }) => {
+    const first = Number(settings.products_to_show ?? 4) || 4;
+    const handle = typeof settings.collection === 'string' && settings.collection
+        ? settings.collection
+        : null;
+    if (handle) {
+        const data = await storefront.query(FEATURED_COLLECTION_QUERY, {
+            variables: { handle, first },
+            cache: storefront.CacheLong?.(),
+        });
+        if (data?.collection)
+            return { collection: data.collection };
+    }
+    // Fresh-install fallback: first collection that actually has
+    // products, then the latest products as a synthetic collection —
+    // placeholders only when the store is truly empty.
+    const data = await storefront.query(FIRST_COLLECTIONS_QUERY, {
+        variables: { first },
+        cache: storefront.CacheLong?.(),
+    });
+    const nonEmpty = (data?.collections?.nodes ?? []).find((node) => node.products?.nodes?.length);
+    if (nonEmpty)
+        return { collection: nonEmpty };
+    const latest = await storefront.query(LATEST_PRODUCTS_QUERY, {
+        variables: { first },
+        cache: storefront.CacheLong?.(),
+    });
+    const products = latest?.products?.nodes ?? [];
+    if (!products.length)
+        return { collection: null };
+    return {
+        collection: {
+            id: 'latest',
+            handle: 'all',
+            title: 'Featured products',
+            products: { nodes: products },
+        },
+    };
+};
+export const builtinSectionLoaders = {
+    'featured-collection': featuredCollectionLoader,
+};

package/dist/react/sections/404.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Port of sections/404.liquid. CSS: app/styles/components/sections-404.css
+ */
+import type { SectionProps } from '../engine/types';
+interface NotFoundSettings {
+    color_scheme?: string;
+    section_spacing?: string;
+}
+export default function NotFoundSection({ settings, }: SectionProps<NotFoundSettings>): import("react").JSX.Element;
+export {};

package/dist/react/sections/404.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '../engine/translate';
+import { useAdapter } from '../adapter';
+export default function NotFoundSection({ settings, }) {
+    const { Link } = useAdapter();
+    const { color_scheme: colorScheme = 'scheme-1', section_spacing: spacing = 'md' } = settings;
+    return (_jsx("div", { className: `not-found section color-${colorScheme} full-width`, style: {
+            '--section-spacing': `var(--space-section-${spacing})`,
+        }, children: _jsxs("div", { className: "not-found__inner stack", children: [_jsx("h1", { className: "not-found__title", children: t('404.title') }), _jsx("p", { children: t('404.not_found') }), _jsx(Link, { to: "/collections/all", className: "button", children: t('404.back_to_shopping') })] }) }));
+}

package/dist/react/sections/announcement-bar.d.ts

@@ -0,0 +1,14 @@
+import type { SectionProps } from '../engine/types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'announcement-bar': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+interface AnnouncementBarSettings {
+    rotation_speed?: number;
+    color_scheme?: string;
+}
+export default function AnnouncementBarSection({ section, settings, children, }: SectionProps<AnnouncementBarSettings>): import("react").JSX.Element;
+export {};