@zappie/theme-base 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @zappie/theme-base
 
+## 0.1.4
+
+### Patch Changes
+
+- 9b25eb7: The packages now live in zappie/storefront-packages, and each package's repository, homepage and issues links point there. This release is the first one published from that repository.
+- Updated dependencies [9b25eb7]
+  - @zappie/sdk@0.1.13
+  - @zappie/tokens@0.1.2
+  - @zappie/foundations@0.1.7
+
+## 0.1.3
+
+### Patch Changes
+
+- afb46d4: Add storefront security lint rules, pass outbound hosts from `zappie.config.ts` to ESLint, and provide `safeRedirect` from `@zappie/sdk/redirect` for untrusted navigation targets.
+- Updated dependencies [2b672c9]
+- Updated dependencies [9b5b412]
+- Updated dependencies [a4872fd]
+- Updated dependencies [32ecccf]
+- Updated dependencies [afb46d4]
+- Updated dependencies [6a8e227]
+- Updated dependencies [c0171ae]
+- Updated dependencies [0cbc4da]
+  - @zappie/sdk@0.1.12
+  - @zappie/foundations@0.1.6
+
 ## 0.1.2
 
 ### Patch Changes

package/dist/address.d.ts

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ComponentType, ReactNode } from 'react';
 import { DeliveryAddress } from '@zappie/sdk';
 import { PlacesClient } from '@zappie/sdk/places';
-import { ComponentType, ReactNode } from 'react';
 
 type AddressSuggestion = {
     placeId: string;
@@ -22,7 +22,7 @@ type AddressLookup = {
 declare function AddressLookupProvider({ lookup, children, }: {
     lookup: AddressLookup;
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 declare function useAddressLookup(): AddressLookup;
 declare function createSdkAddressLookup({ places, branchId, }: {
     places: PlacesClient;

package/dist/address.js

@@ -48,7 +48,6 @@ function createSdkAddressLookup({
     }
     return (
       // The theme can't use next/image; the map's size is fixed by the API.
-      // eslint-disable-next-line @next/next/no-img-element
       /* @__PURE__ */ jsx(
         "img",
         {

package/dist/address.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/address.tsx"],
-  "sourcesContent": ["\"use client\";\n\nimport type { DeliveryAddress } from \"@zappie/sdk\";\nimport type { Place, PlacesClient } from \"@zappie/sdk/places\";\nimport {\n  createContext,\n  useContext,\n  type ComponentType,\n  type ReactNode,\n} from \"react\";\n\nexport type AddressSuggestion = {\n  placeId: string;\n  address: string;\n  sessionToken?: string;\n};\n\nexport type AddressLookup = {\n  suggest(query: string): Promise<AddressSuggestion[]>;\n  reverse?(coordinates: { lat: number; lng: number }): Promise<DeliveryAddress>;\n  resolve?(\n    address: DeliveryAddress,\n    sessionToken?: string,\n  ): Promise<DeliveryAddress>;\n  Map?: ComponentType<{ address: DeliveryAddress }>;\n};\n\nfunction deliveryAddress(\n  place: Place,\n  source?: DeliveryAddress,\n): DeliveryAddress {\n  const result: DeliveryAddress = {\n    line1: place.line1,\n    placeId: place.place_id,\n    coordinates: { lat: place.lat, lng: place.lng },\n  };\n  if (place.city !== undefined) {\n    result.city = place.city;\n  }\n  if (source?.line2 !== undefined) {\n    result.line2 = source.line2;\n  }\n  if (source?.instructions !== undefined) {\n    result.instructions = source.instructions;\n  }\n  return result;\n}\n\nconst Context = createContext<AddressLookup | null>(null);\n\nexport function AddressLookupProvider({\n  lookup,\n  children,\n}: {\n  lookup: AddressLookup;\n  children: ReactNode;\n}) {\n  return <Context.Provider value={lookup}>{children}</Context.Provider>;\n}\n\nexport function useAddressLookup() {\n  const lookup = useContext(Context);\n  if (!lookup) {\n    throw new Error(\"useAddressLookup requires AddressLookupProvider\");\n  }\n  return lookup;\n}\n\nexport function createSdkAddressLookup({\n  places,\n  branchId,\n}: {\n  places: PlacesClient;\n  branchId: string;\n}): AddressLookup {\n  let sessionToken = crypto.randomUUID();\n  const Map = ({ address }: { address: DeliveryAddress }) => {\n    if (!address.coordinates) {\n      return null;\n    }\n    return (\n      // The theme can't use next/image; the map's size is fixed by the API.\n      // eslint-disable-next-line @next/next/no-img-element\n      <img\n        className=\"z-base-address-map\"\n        src={places.staticMapUrl(\n          address.coordinates.lat,\n          address.coordinates.lng,\n          branchId,\n        )}\n        alt={`Map of ${address.line1}`}\n        width={640}\n        height={320}\n        loading=\"lazy\"\n      />\n    );\n  };\n  return {\n    async suggest(query) {\n      const suggestions = await places.autocomplete(query, sessionToken);\n      return suggestions.map((suggestion) => ({\n        placeId: suggestion.place_id,\n        address: suggestion.secondary\n          ? `${suggestion.text}, ${suggestion.secondary}`\n          : suggestion.text,\n        sessionToken,\n      }));\n    },\n    async resolve(address, token) {\n      if (!address.placeId) {\n        throw new Error(\"Choose a suggested delivery address\");\n      }\n      const place = await places.place(address.placeId, {\n        branchId,\n        sessionToken: token ?? sessionToken,\n      });\n      sessionToken = crypto.randomUUID();\n      return deliveryAddress(place, address);\n    },\n    async reverse({ lat, lng }) {\n      const place = await places.reverse(lat, lng);\n      return deliveryAddress(place);\n    },\n    Map,\n  };\n}\n"],
-  "mappings": ";;;AAIA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAgDE;AA9BT,SAAS,gBACP,OACA,QACiB;AACjB,QAAM,SAA0B;AAAA,IAC9B,OAAO,MAAM;AAAA,IACb,SAAS,MAAM;AAAA,IACf,aAAa,EAAE,KAAK,MAAM,KAAK,KAAK,MAAM,IAAI;AAAA,EAChD;AACA,MAAI,MAAM,SAAS,QAAW;AAC5B,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,MAAI,QAAQ,UAAU,QAAW;AAC/B,WAAO,QAAQ,OAAO;AAAA,EACxB;AACA,MAAI,QAAQ,iBAAiB,QAAW;AACtC,WAAO,eAAe,OAAO;AAAA,EAC/B;AACA,SAAO;AACT;AAEA,IAAM,UAAU,cAAoC,IAAI;AAEjD,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AACF,GAGG;AACD,SAAO,oBAAC,QAAQ,UAAR,EAAiB,OAAO,QAAS,UAAS;AACpD;AAEO,SAAS,mBAAmB;AACjC,QAAM,SAAS,WAAW,OAAO;AACjC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,iDAAiD;AAAA,EACnE;AACA,SAAO;AACT;AAEO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AACF,GAGkB;AAChB,MAAI,eAAe,OAAO,WAAW;AACrC,QAAM,MAAM,CAAC,EAAE,QAAQ,MAAoC;AACzD,QAAI,CAAC,QAAQ,aAAa;AACxB,aAAO;AAAA,IACT;AACA;AAAA;AAAA;AAAA,MAGE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK,OAAO;AAAA,YACV,QAAQ,YAAY;AAAA,YACpB,QAAQ,YAAY;AAAA,YACpB;AAAA,UACF;AAAA,UACA,KAAK,UAAU,QAAQ,KAAK;AAAA,UAC5B,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAQ;AAAA;AAAA,MACV;AAAA;AAAA,EAEJ;AACA,SAAO;AAAA,IACL,MAAM,QAAQ,OAAO;AACnB,YAAM,cAAc,MAAM,OAAO,aAAa,OAAO,YAAY;AACjE,aAAO,YAAY,IAAI,CAAC,gBAAgB;AAAA,QACtC,SAAS,WAAW;AAAA,QACpB,SAAS,WAAW,YAChB,GAAG,WAAW,IAAI,KAAK,WAAW,SAAS,KAC3C,WAAW;AAAA,QACf;AAAA,MACF,EAAE;AAAA,IACJ;AAAA,IACA,MAAM,QAAQ,SAAS,OAAO;AAC5B,UAAI,CAAC,QAAQ,SAAS;AACpB,cAAM,IAAI,MAAM,qCAAqC;AAAA,MACvD;AACA,YAAM,QAAQ,MAAM,OAAO,MAAM,QAAQ,SAAS;AAAA,QAChD;AAAA,QACA,cAAc,SAAS;AAAA,MACzB,CAAC;AACD,qBAAe,OAAO,WAAW;AACjC,aAAO,gBAAgB,OAAO,OAAO;AAAA,IACvC;AAAA,IACA,MAAM,QAAQ,EAAE,KAAK,IAAI,GAAG;AAC1B,YAAM,QAAQ,MAAM,OAAO,QAAQ,KAAK,GAAG;AAC3C,aAAO,gBAAgB,KAAK;AAAA,IAC9B;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["\"use client\";\n\nimport type { DeliveryAddress } from \"@zappie/sdk\";\nimport type { Place, PlacesClient } from \"@zappie/sdk/places\";\nimport {\n  createContext,\n  useContext,\n  type ComponentType,\n  type ReactNode,\n} from \"react\";\n\nexport type AddressSuggestion = {\n  placeId: string;\n  address: string;\n  sessionToken?: string;\n};\n\nexport type AddressLookup = {\n  suggest(query: string): Promise<AddressSuggestion[]>;\n  reverse?(coordinates: { lat: number; lng: number }): Promise<DeliveryAddress>;\n  resolve?(\n    address: DeliveryAddress,\n    sessionToken?: string,\n  ): Promise<DeliveryAddress>;\n  Map?: ComponentType<{ address: DeliveryAddress }>;\n};\n\nfunction deliveryAddress(\n  place: Place,\n  source?: DeliveryAddress,\n): DeliveryAddress {\n  const result: DeliveryAddress = {\n    line1: place.line1,\n    placeId: place.place_id,\n    coordinates: { lat: place.lat, lng: place.lng },\n  };\n  if (place.city !== undefined) {\n    result.city = place.city;\n  }\n  if (source?.line2 !== undefined) {\n    result.line2 = source.line2;\n  }\n  if (source?.instructions !== undefined) {\n    result.instructions = source.instructions;\n  }\n  return result;\n}\n\nconst Context = createContext<AddressLookup | null>(null);\n\nexport function AddressLookupProvider({\n  lookup,\n  children,\n}: {\n  lookup: AddressLookup;\n  children: ReactNode;\n}) {\n  return <Context.Provider value={lookup}>{children}</Context.Provider>;\n}\n\nexport function useAddressLookup() {\n  const lookup = useContext(Context);\n  if (!lookup) {\n    throw new Error(\"useAddressLookup requires AddressLookupProvider\");\n  }\n  return lookup;\n}\n\nexport function createSdkAddressLookup({\n  places,\n  branchId,\n}: {\n  places: PlacesClient;\n  branchId: string;\n}): AddressLookup {\n  let sessionToken = crypto.randomUUID();\n  const Map = ({ address }: { address: DeliveryAddress }) => {\n    if (!address.coordinates) {\n      return null;\n    }\n    return (\n      // The theme can't use next/image; the map's size is fixed by the API.\n      <img\n        className=\"z-base-address-map\"\n        src={places.staticMapUrl(\n          address.coordinates.lat,\n          address.coordinates.lng,\n          branchId,\n        )}\n        alt={`Map of ${address.line1}`}\n        width={640}\n        height={320}\n        loading=\"lazy\"\n      />\n    );\n  };\n  return {\n    async suggest(query) {\n      const suggestions = await places.autocomplete(query, sessionToken);\n      return suggestions.map((suggestion) => ({\n        placeId: suggestion.place_id,\n        address: suggestion.secondary\n          ? `${suggestion.text}, ${suggestion.secondary}`\n          : suggestion.text,\n        sessionToken,\n      }));\n    },\n    async resolve(address, token) {\n      if (!address.placeId) {\n        throw new Error(\"Choose a suggested delivery address\");\n      }\n      const place = await places.place(address.placeId, {\n        branchId,\n        sessionToken: token ?? sessionToken,\n      });\n      sessionToken = crypto.randomUUID();\n      return deliveryAddress(place, address);\n    },\n    async reverse({ lat, lng }) {\n      const place = await places.reverse(lat, lng);\n      return deliveryAddress(place);\n    },\n    Map,\n  };\n}\n"],
+  "mappings": ";;;AAIA;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAgDE;AA9BT,SAAS,gBACP,OACA,QACiB;AACjB,QAAM,SAA0B;AAAA,IAC9B,OAAO,MAAM;AAAA,IACb,SAAS,MAAM;AAAA,IACf,aAAa,EAAE,KAAK,MAAM,KAAK,KAAK,MAAM,IAAI;AAAA,EAChD;AACA,MAAI,MAAM,SAAS,QAAW;AAC5B,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,MAAI,QAAQ,UAAU,QAAW;AAC/B,WAAO,QAAQ,OAAO;AAAA,EACxB;AACA,MAAI,QAAQ,iBAAiB,QAAW;AACtC,WAAO,eAAe,OAAO;AAAA,EAC/B;AACA,SAAO;AACT;AAEA,IAAM,UAAU,cAAoC,IAAI;AAEjD,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AACF,GAGG;AACD,SAAO,oBAAC,QAAQ,UAAR,EAAiB,OAAO,QAAS,UAAS;AACpD;AAEO,SAAS,mBAAmB;AACjC,QAAM,SAAS,WAAW,OAAO;AACjC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,iDAAiD;AAAA,EACnE;AACA,SAAO;AACT;AAEO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AACF,GAGkB;AAChB,MAAI,eAAe,OAAO,WAAW;AACrC,QAAM,MAAM,CAAC,EAAE,QAAQ,MAAoC;AACzD,QAAI,CAAC,QAAQ,aAAa;AACxB,aAAO;AAAA,IACT;AACA;AAAA;AAAA,MAEE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK,OAAO;AAAA,YACV,QAAQ,YAAY;AAAA,YACpB,QAAQ,YAAY;AAAA,YACpB;AAAA,UACF;AAAA,UACA,KAAK,UAAU,QAAQ,KAAK;AAAA,UAC5B,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,SAAQ;AAAA;AAAA,MACV;AAAA;AAAA,EAEJ;AACA,SAAO;AAAA,IACL,MAAM,QAAQ,OAAO;AACnB,YAAM,cAAc,MAAM,OAAO,aAAa,OAAO,YAAY;AACjE,aAAO,YAAY,IAAI,CAAC,gBAAgB;AAAA,QACtC,SAAS,WAAW;AAAA,QACpB,SAAS,WAAW,YAChB,GAAG,WAAW,IAAI,KAAK,WAAW,SAAS,KAC3C,WAAW;AAAA,QACf;AAAA,MACF,EAAE;AAAA,IACJ;AAAA,IACA,MAAM,QAAQ,SAAS,OAAO;AAC5B,UAAI,CAAC,QAAQ,SAAS;AACpB,cAAM,IAAI,MAAM,qCAAqC;AAAA,MACvD;AACA,YAAM,QAAQ,MAAM,OAAO,MAAM,QAAQ,SAAS;AAAA,QAChD;AAAA,QACA,cAAc,SAAS;AAAA,MACzB,CAAC;AACD,qBAAe,OAAO,WAAW;AACjC,aAAO,gBAAgB,OAAO,OAAO;AAAA,IACvC;AAAA,IACA,MAAM,QAAQ,EAAE,KAAK,IAAI,GAAG;AAC1B,YAAM,QAAQ,MAAM,OAAO,QAAQ,KAAK,GAAG;AAC3C,aAAO,gBAAgB,KAAK;AAAA,IAC9B;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cart/totals.js

@@ -2,14 +2,12 @@
 import { Totals as FoundationTotals, Money } from "@zappie/foundations";
 import { useCart } from "@zappie/sdk/react";
 import { Fragment, useState } from "react";
-import { useBaseHostBridge } from "../host-bridge.js";
 import { CheckoutCta } from "./checkout-cta.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Totals({
   contactPhone
 } = {}) {
   const cart = useCart();
-  const bridge = useBaseHostBridge();
   const [error, setError] = useState(null);
   const blocked = cart.issues.some((issue) => issue.severity === "blocking");
   const refresh = async () => {

package/dist/cart/totals.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/cart/totals.tsx"],
-  "sourcesContent": ["import { Totals as FoundationTotals, Money } from \"@zappie/foundations\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { Fragment, useState } from \"react\";\nimport { useBaseHostBridge } from \"../host-bridge\";\nimport { CheckoutCta } from \"./checkout-cta\";\nimport type { ContactPhoneState } from \"./customer-details\";\nexport function Totals({\n  contactPhone,\n}: {\n  contactPhone?: ContactPhoneState;\n} = {}) {\n  const cart = useCart();\n  const bridge = useBaseHostBridge();\n  const [error, setError] = useState<string | null>(null);\n  const blocked = cart.issues.some((issue) => issue.severity === \"blocking\");\n  const refresh = async () => {\n    setError(null);\n    try {\n      await cart.actions.quote({ force: true });\n    } catch (error) {\n      setError(\n        error instanceof Error ? error.message : \"Unable to update totals\",\n      );\n    }\n  };\n  return (\n    <FoundationTotals className=\"z-base-summary\">\n      {({ quote, status }) => {\n        // Under a blocking issue the store may not have priced the cart at\n        // all (a closed branch without a time, a refused preview): its zero\n        // totals would read as \u20A60. A priced cart still shows its figures, for\n        // example before the customer signs in or chooses an address.\n        const unpriced =\n          blocked && (!quote || quote.subtotal.amountMinor === 0);\n        return (\n          <Fragment>\n            <h2>Order summary</h2>\n            {status === \"loading\" && <p role=\"status\">Updating totals\u2026</p>}\n            {status === \"offline\" && (\n              <p role=\"alert\">\n                Unable to connect. Try updating your totals again.\n              </p>\n            )}\n            {status === \"stale\" && !blocked && (\n              <p>Update totals before continuing.</p>\n            )}\n            {error && <p role=\"alert\">{error}</p>}\n            {unpriced && (\n              <p>Totals appear once the issues above are resolved.</p>\n            )}\n            {blocked && !unpriced && (\n              <p>Your total may change once the issues above are resolved.</p>\n            )}\n            {quote && !unpriced && (\n              <dl className=\"z-base-totals\">\n                <div>\n                  <dt>Subtotal</dt>\n                  <dd>\n                    <Money value={quote.subtotal} />\n                  </dd>\n                </div>\n                {quote.fees.map((fee, index) => (\n                  <div key={`${fee.code}:${index}`}>\n                    <dt>{fee.label}</dt>\n                    <dd>\n                      <Money value={fee.amount} />\n                    </dd>\n                  </div>\n                ))}\n                {quote.delivery && (\n                  <div>\n                    <dt>Delivery</dt>\n                    <dd>\n                      <Money value={quote.delivery} />\n                    </dd>\n                  </div>\n                )}\n                {quote.discounts.map((discount, index) => (\n                  <div key={`${discount.code}:${index}`}>\n                    <dt>{discount.label}</dt>\n                    <dd>\n                      <Money value={discount.amount} />\n                    </dd>\n                  </div>\n                ))}\n                <div className=\"z-base-total\">\n                  <dt>Total</dt>\n                  <dd>\n                    <Money value={quote.total} />\n                  </dd>\n                </div>\n              </dl>\n            )}\n            {(status === \"stale\" || status === \"offline\") && !blocked && (\n              <button\n                type=\"button\"\n                className=\"z-base-button-secondary\"\n                onClick={() => {\n                  void refresh();\n                }}\n              >\n                Update totals\n              </button>\n            )}\n            <CheckoutCta\n              totalsStatus={status}\n              {...(contactPhone ? { contactPhone } : {})}\n            />\n          </Fragment>\n        );\n      }}\n    </FoundationTotals>\n  );\n}\n"],
-  "mappings": ";AAAA,SAAS,UAAU,kBAAkB,aAAa;AAClD,SAAS,eAAe;AACxB,SAAS,UAAU,gBAAgB;AACnC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAgChB,cAmBI,YAnBJ;AA9BL,SAAS,OAAO;AAAA,EACrB;AACF,IAEI,CAAC,GAAG;AACN,QAAM,OAAO,QAAQ;AACrB,QAAM,SAAS,kBAAkB;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,UAAU,KAAK,OAAO,KAAK,CAAC,UAAU,MAAM,aAAa,UAAU;AACzE,QAAM,UAAU,YAAY;AAC1B,aAAS,IAAI;AACb,QAAI;AACF,YAAM,KAAK,QAAQ,MAAM,EAAE,OAAO,KAAK,CAAC;AAAA,IAC1C,SAASA,QAAO;AACd;AAAA,QACEA,kBAAiB,QAAQA,OAAM,UAAU;AAAA,MAC3C;AAAA,IACF;AAAA,EACF;AACA,SACE,oBAAC,oBAAiB,WAAU,kBACzB,WAAC,EAAE,OAAO,OAAO,MAAM;AAKtB,UAAM,WACJ,YAAY,CAAC,SAAS,MAAM,SAAS,gBAAgB;AACvD,WACE,qBAAC,YACC;AAAA,0BAAC,QAAG,2BAAa;AAAA,MAChB,WAAW,aAAa,oBAAC,OAAE,MAAK,UAAS,mCAAgB;AAAA,MACzD,WAAW,aACV,oBAAC,OAAE,MAAK,SAAQ,gEAEhB;AAAA,MAED,WAAW,WAAW,CAAC,WACtB,oBAAC,OAAE,8CAAgC;AAAA,MAEpC,SAAS,oBAAC,OAAE,MAAK,SAAS,iBAAM;AAAA,MAChC,YACC,oBAAC,OAAE,+DAAiD;AAAA,MAErD,WAAW,CAAC,YACX,oBAAC,OAAE,uEAAyD;AAAA,MAE7D,SAAS,CAAC,YACT,qBAAC,QAAG,WAAU,iBACZ;AAAA,6BAAC,SACC;AAAA,8BAAC,QAAG,sBAAQ;AAAA,UACZ,oBAAC,QACC,8BAAC,SAAM,OAAO,MAAM,UAAU,GAChC;AAAA,WACF;AAAA,QACC,MAAM,KAAK,IAAI,CAAC,KAAK,UACpB,qBAAC,SACC;AAAA,8BAAC,QAAI,cAAI,OAAM;AAAA,UACf,oBAAC,QACC,8BAAC,SAAM,OAAO,IAAI,QAAQ,GAC5B;AAAA,aAJQ,GAAG,IAAI,IAAI,IAAI,KAAK,EAK9B,CACD;AAAA,QACA,MAAM,YACL,qBAAC,SACC;AAAA,8BAAC,QAAG,sBAAQ;AAAA,UACZ,oBAAC,QACC,8BAAC,SAAM,OAAO,MAAM,UAAU,GAChC;AAAA,WACF;AAAA,QAED,MAAM,UAAU,IAAI,CAAC,UAAU,UAC9B,qBAAC,SACC;AAAA,8BAAC,QAAI,mBAAS,OAAM;AAAA,UACpB,oBAAC,QACC,8BAAC,SAAM,OAAO,SAAS,QAAQ,GACjC;AAAA,aAJQ,GAAG,SAAS,IAAI,IAAI,KAAK,EAKnC,CACD;AAAA,QACD,qBAAC,SAAI,WAAU,gBACb;AAAA,8BAAC,QAAG,mBAAK;AAAA,UACT,oBAAC,QACC,8BAAC,SAAM,OAAO,MAAM,OAAO,GAC7B;AAAA,WACF;AAAA,SACF;AAAA,OAEA,WAAW,WAAW,WAAW,cAAc,CAAC,WAChD;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM;AACb,iBAAK,QAAQ;AAAA,UACf;AAAA,UACD;AAAA;AAAA,MAED;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,cAAc;AAAA,UACb,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;AAAA;AAAA,MAC1C;AAAA,OACF;AAAA,EAEJ,GACF;AAEJ;",
+  "sourcesContent": ["import { Totals as FoundationTotals, Money } from \"@zappie/foundations\";\nimport { useCart } from \"@zappie/sdk/react\";\nimport { Fragment, useState } from \"react\";\nimport { CheckoutCta } from \"./checkout-cta\";\nimport type { ContactPhoneState } from \"./customer-details\";\nexport function Totals({\n  contactPhone,\n}: {\n  contactPhone?: ContactPhoneState;\n} = {}) {\n  const cart = useCart();\n  const [error, setError] = useState<string | null>(null);\n  const blocked = cart.issues.some((issue) => issue.severity === \"blocking\");\n  const refresh = async () => {\n    setError(null);\n    try {\n      await cart.actions.quote({ force: true });\n    } catch (error) {\n      setError(\n        error instanceof Error ? error.message : \"Unable to update totals\",\n      );\n    }\n  };\n  return (\n    <FoundationTotals className=\"z-base-summary\">\n      {({ quote, status }) => {\n        // Under a blocking issue the store may not have priced the cart at\n        // all (a closed branch without a time, a refused preview): its zero\n        // totals would read as \u20A60. A priced cart still shows its figures, for\n        // example before the customer signs in or chooses an address.\n        const unpriced =\n          blocked && (!quote || quote.subtotal.amountMinor === 0);\n        return (\n          <Fragment>\n            <h2>Order summary</h2>\n            {status === \"loading\" && <p role=\"status\">Updating totals\u2026</p>}\n            {status === \"offline\" && (\n              <p role=\"alert\">\n                Unable to connect. Try updating your totals again.\n              </p>\n            )}\n            {status === \"stale\" && !blocked && (\n              <p>Update totals before continuing.</p>\n            )}\n            {error && <p role=\"alert\">{error}</p>}\n            {unpriced && (\n              <p>Totals appear once the issues above are resolved.</p>\n            )}\n            {blocked && !unpriced && (\n              <p>Your total may change once the issues above are resolved.</p>\n            )}\n            {quote && !unpriced && (\n              <dl className=\"z-base-totals\">\n                <div>\n                  <dt>Subtotal</dt>\n                  <dd>\n                    <Money value={quote.subtotal} />\n                  </dd>\n                </div>\n                {quote.fees.map((fee, index) => (\n                  <div key={`${fee.code}:${index}`}>\n                    <dt>{fee.label}</dt>\n                    <dd>\n                      <Money value={fee.amount} />\n                    </dd>\n                  </div>\n                ))}\n                {quote.delivery && (\n                  <div>\n                    <dt>Delivery</dt>\n                    <dd>\n                      <Money value={quote.delivery} />\n                    </dd>\n                  </div>\n                )}\n                {quote.discounts.map((discount, index) => (\n                  <div key={`${discount.code}:${index}`}>\n                    <dt>{discount.label}</dt>\n                    <dd>\n                      <Money value={discount.amount} />\n                    </dd>\n                  </div>\n                ))}\n                <div className=\"z-base-total\">\n                  <dt>Total</dt>\n                  <dd>\n                    <Money value={quote.total} />\n                  </dd>\n                </div>\n              </dl>\n            )}\n            {(status === \"stale\" || status === \"offline\") && !blocked && (\n              <button\n                type=\"button\"\n                className=\"z-base-button-secondary\"\n                onClick={() => {\n                  void refresh();\n                }}\n              >\n                Update totals\n              </button>\n            )}\n            <CheckoutCta\n              totalsStatus={status}\n              {...(contactPhone ? { contactPhone } : {})}\n            />\n          </Fragment>\n        );\n      }}\n    </FoundationTotals>\n  );\n}\n"],
+  "mappings": ";AAAA,SAAS,UAAU,kBAAkB,aAAa;AAClD,SAAS,eAAe;AACxB,SAAS,UAAU,gBAAgB;AACnC,SAAS,mBAAmB;AA+BhB,cAmBI,YAnBJ;AA7BL,SAAS,OAAO;AAAA,EACrB;AACF,IAEI,CAAC,GAAG;AACN,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,UAAU,KAAK,OAAO,KAAK,CAAC,UAAU,MAAM,aAAa,UAAU;AACzE,QAAM,UAAU,YAAY;AAC1B,aAAS,IAAI;AACb,QAAI;AACF,YAAM,KAAK,QAAQ,MAAM,EAAE,OAAO,KAAK,CAAC;AAAA,IAC1C,SAASA,QAAO;AACd;AAAA,QACEA,kBAAiB,QAAQA,OAAM,UAAU;AAAA,MAC3C;AAAA,IACF;AAAA,EACF;AACA,SACE,oBAAC,oBAAiB,WAAU,kBACzB,WAAC,EAAE,OAAO,OAAO,MAAM;AAKtB,UAAM,WACJ,YAAY,CAAC,SAAS,MAAM,SAAS,gBAAgB;AACvD,WACE,qBAAC,YACC;AAAA,0BAAC,QAAG,2BAAa;AAAA,MAChB,WAAW,aAAa,oBAAC,OAAE,MAAK,UAAS,mCAAgB;AAAA,MACzD,WAAW,aACV,oBAAC,OAAE,MAAK,SAAQ,gEAEhB;AAAA,MAED,WAAW,WAAW,CAAC,WACtB,oBAAC,OAAE,8CAAgC;AAAA,MAEpC,SAAS,oBAAC,OAAE,MAAK,SAAS,iBAAM;AAAA,MAChC,YACC,oBAAC,OAAE,+DAAiD;AAAA,MAErD,WAAW,CAAC,YACX,oBAAC,OAAE,uEAAyD;AAAA,MAE7D,SAAS,CAAC,YACT,qBAAC,QAAG,WAAU,iBACZ;AAAA,6BAAC,SACC;AAAA,8BAAC,QAAG,sBAAQ;AAAA,UACZ,oBAAC,QACC,8BAAC,SAAM,OAAO,MAAM,UAAU,GAChC;AAAA,WACF;AAAA,QACC,MAAM,KAAK,IAAI,CAAC,KAAK,UACpB,qBAAC,SACC;AAAA,8BAAC,QAAI,cAAI,OAAM;AAAA,UACf,oBAAC,QACC,8BAAC,SAAM,OAAO,IAAI,QAAQ,GAC5B;AAAA,aAJQ,GAAG,IAAI,IAAI,IAAI,KAAK,EAK9B,CACD;AAAA,QACA,MAAM,YACL,qBAAC,SACC;AAAA,8BAAC,QAAG,sBAAQ;AAAA,UACZ,oBAAC,QACC,8BAAC,SAAM,OAAO,MAAM,UAAU,GAChC;AAAA,WACF;AAAA,QAED,MAAM,UAAU,IAAI,CAAC,UAAU,UAC9B,qBAAC,SACC;AAAA,8BAAC,QAAI,mBAAS,OAAM;AAAA,UACpB,oBAAC,QACC,8BAAC,SAAM,OAAO,SAAS,QAAQ,GACjC;AAAA,aAJQ,GAAG,SAAS,IAAI,IAAI,KAAK,EAKnC,CACD;AAAA,QACD,qBAAC,SAAI,WAAU,gBACb;AAAA,8BAAC,QAAG,mBAAK;AAAA,UACT,oBAAC,QACC,8BAAC,SAAM,OAAO,MAAM,OAAO,GAC7B;AAAA,WACF;AAAA,SACF;AAAA,OAEA,WAAW,WAAW,WAAW,cAAc,CAAC,WAChD;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM;AACb,iBAAK,QAAQ;AAAA,UACf;AAAA,UACD;AAAA;AAAA,MAED;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,cAAc;AAAA,UACb,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;AAAA;AAAA,MAC1C;AAAA,OACF;AAAA,EAEJ,GACF;AAEJ;",
   "names": ["error"]
 }

package/dist/cart.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 
 /**
  * `themeClass` lets a template reuse this cart under its own design: the class
@@ -7,6 +7,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  */
 declare function CartReview({ themeClass }?: {
     themeClass?: string;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 export { CartReview };

package/dist/catalogue/info-banners.js

@@ -18,7 +18,9 @@ function InfoBanners({ value }) {
   const interacted = useRef(false);
   useEffect(() => {
     setBanners(
-      splitInfoBanner(value).map(sanitize).filter((banner) => banner.replace(/<[^>]*>/g, "").trim())
+      splitInfoBanner(value).filter(
+        (banner) => banner.replace(/<[^>]*>/g, "").trim()
+      )
     );
     setIndex(0);
     setExpanded({});
@@ -84,7 +86,7 @@ function InfoBanners({ value }) {
                 {
                   className: "z-base-info-copy",
                   "data-expanded": Boolean(expanded[position]),
-                  dangerouslySetInnerHTML: { __html: banner }
+                  dangerouslySetInnerHTML: { __html: sanitize(banner) }
                 }
               ),
               /* @__PURE__ */ jsxs(

package/dist/catalogue/info-banners.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/catalogue/info-banners.tsx"],
-  "sourcesContent": ["\"use client\";\nimport {\n  createSanitizeRichText,\n  splitInfoBanner,\n} from \"@zappie/foundations/rich-text\";\nimport { parseRichText } from \"@zappie/foundations/rich-text/browser\";\nimport { useEffect, useRef, useState } from \"react\";\nconst sanitize = createSanitizeRichText(parseRichText);\n/** Safe rich text with touch scrolling, explicit controls and pausable rotation. */\nexport function InfoBanners({ value }: { value?: string }) {\n  const [banners, setBanners] = useState<string[]>([]);\n  const [index, setIndex] = useState(0);\n  const [expanded, setExpanded] = useState<Record<number, boolean>>({});\n  const [paused, setPaused] = useState(false);\n  const viewport = useRef<HTMLDivElement>(null);\n  const interacted = useRef(false);\n  useEffect(() => {\n    setBanners(\n      splitInfoBanner(value)\n        .map(sanitize)\n        .filter((banner) => banner.replace(/<[^>]*>/g, \"\").trim()),\n    );\n    setIndex(0);\n    setExpanded({});\n    interacted.current = false;\n  }, [value]);\n  function select(next: number, interaction = true) {\n    interacted.current ||= interaction;\n    setExpanded({});\n    viewport.current?.children[next]?.scrollIntoView({\n      block: \"nearest\",\n      inline: \"start\",\n      behavior: \"instant\",\n    });\n    setIndex(next);\n  }\n  const isExpanded = Object.values(expanded).some(Boolean);\n  useEffect(() => {\n    if (paused || isExpanded || banners.length < 2) {\n      return;\n    }\n    const interval = setInterval(() => {\n      const node = viewport.current;\n      if (\n        !node ||\n        interacted.current ||\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ||\n        node.scrollWidth <= node.clientWidth\n      ) {\n        return;\n      }\n      select((index + 1) % banners.length, false);\n    }, 5000);\n    return () => clearInterval(interval);\n  }, [index, paused, isExpanded, banners.length]);\n  if (!banners.length) {\n    return null;\n  }\n  return (\n    <section\n      aria-label=\"Menu information\"\n      onMouseEnter={() => setPaused(true)}\n      onMouseLeave={() => setPaused(false)}\n      onFocus={() => setPaused(true)}\n      onBlur={() => setPaused(false)}\n    >\n      <div\n        className=\"z-base-info-banners\"\n        ref={viewport}\n        onPointerDown={() => {\n          interacted.current = true;\n        }}\n        onScroll={() => {\n          const node = viewport.current;\n          if (node?.children[0]) {\n            setIndex(\n              Math.round(\n                node.scrollLeft /\n                  node.children[0].getBoundingClientRect().width,\n              ),\n            );\n          }\n        }}\n      >\n        {banners.map((banner, position) => (\n          <article key={banner + position}>\n            <div\n              className=\"z-base-info-copy\"\n              data-expanded={Boolean(expanded[position])}\n              dangerouslySetInnerHTML={{ __html: banner }}\n            />\n            <button\n              type=\"button\"\n              aria-expanded={Boolean(expanded[position])}\n              onClick={() =>\n                setExpanded((current) => ({\n                  ...current,\n                  [position]: !current[position],\n                }))\n              }\n            >\n              Show {expanded[position] ? \"less\" : \"more\"}\n            </button>\n          </article>\n        ))}\n      </div>\n      {banners.length > 1 && (\n        <div>\n          <button\n            type=\"button\"\n            aria-label=\"Previous information\"\n            disabled={index === 0}\n            onClick={() => select(index - 1)}\n          >\n            Previous\n          </button>\n          <button\n            type=\"button\"\n            aria-label=\"Next information\"\n            disabled={index >= banners.length - 1}\n            onClick={() => select(index + 1)}\n          >\n            Next\n          </button>\n          {banners.map((_, position) => (\n            <button\n              key={position}\n              type=\"button\"\n              aria-label={`Go to banner ${position + 1}`}\n              aria-current={index === position ? \"true\" : undefined}\n              onClick={() => select(position)}\n            >\n              {position + 1}\n            </button>\n          ))}\n        </div>\n      )}\n    </section>\n  );\n}\n"],
-  "mappings": ";;;AACA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,qBAAqB;AAC9B,SAAS,WAAW,QAAQ,gBAAgB;AAgFhC,cAKA,YALA;AA/EZ,IAAM,WAAW,uBAAuB,aAAa;AAE9C,SAAS,YAAY,EAAE,MAAM,GAAuB;AACzD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAmB,CAAC,CAAC;AACnD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkC,CAAC,CAAC;AACpE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,aAAa,OAAO,KAAK;AAC/B,YAAU,MAAM;AACd;AAAA,MACE,gBAAgB,KAAK,EAClB,IAAI,QAAQ,EACZ,OAAO,CAAC,WAAW,OAAO,QAAQ,YAAY,EAAE,EAAE,KAAK,CAAC;AAAA,IAC7D;AACA,aAAS,CAAC;AACV,gBAAY,CAAC,CAAC;AACd,eAAW,UAAU;AAAA,EACvB,GAAG,CAAC,KAAK,CAAC;AACV,WAAS,OAAO,MAAc,cAAc,MAAM;AAChD,eAAW,YAAX,WAAW,UAAY;AACvB,gBAAY,CAAC,CAAC;AACd,aAAS,SAAS,SAAS,IAAI,GAAG,eAAe;AAAA,MAC/C,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IACZ,CAAC;AACD,aAAS,IAAI;AAAA,EACf;AACA,QAAM,aAAa,OAAO,OAAO,QAAQ,EAAE,KAAK,OAAO;AACvD,YAAU,MAAM;AACd,QAAI,UAAU,cAAc,QAAQ,SAAS,GAAG;AAC9C;AAAA,IACF;AACA,UAAM,WAAW,YAAY,MAAM;AACjC,YAAM,OAAO,SAAS;AACtB,UACE,CAAC,QACD,WAAW,WACX,OAAO,WAAW,kCAAkC,EAAE,WACtD,KAAK,eAAe,KAAK,aACzB;AACA;AAAA,MACF;AACA,cAAQ,QAAQ,KAAK,QAAQ,QAAQ,KAAK;AAAA,IAC5C,GAAG,GAAI;AACP,WAAO,MAAM,cAAc,QAAQ;AAAA,EACrC,GAAG,CAAC,OAAO,QAAQ,YAAY,QAAQ,MAAM,CAAC;AAC9C,MAAI,CAAC,QAAQ,QAAQ;AACnB,WAAO;AAAA,EACT;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,cAAc,MAAM,UAAU,IAAI;AAAA,MAClC,cAAc,MAAM,UAAU,KAAK;AAAA,MACnC,SAAS,MAAM,UAAU,IAAI;AAAA,MAC7B,QAAQ,MAAM,UAAU,KAAK;AAAA,MAE7B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK;AAAA,YACL,eAAe,MAAM;AACnB,yBAAW,UAAU;AAAA,YACvB;AAAA,YACA,UAAU,MAAM;AACd,oBAAM,OAAO,SAAS;AACtB,kBAAI,MAAM,SAAS,CAAC,GAAG;AACrB;AAAA,kBACE,KAAK;AAAA,oBACH,KAAK,aACH,KAAK,SAAS,CAAC,EAAE,sBAAsB,EAAE;AAAA,kBAC7C;AAAA,gBACF;AAAA,cACF;AAAA,YACF;AAAA,YAEC,kBAAQ,IAAI,CAAC,QAAQ,aACpB,qBAAC,aACC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,iBAAe,QAAQ,SAAS,QAAQ,CAAC;AAAA,kBACzC,yBAAyB,EAAE,QAAQ,OAAO;AAAA;AAAA,cAC5C;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,iBAAe,QAAQ,SAAS,QAAQ,CAAC;AAAA,kBACzC,SAAS,MACP,YAAY,CAAC,aAAa;AAAA,oBACxB,GAAG;AAAA,oBACH,CAAC,QAAQ,GAAG,CAAC,QAAQ,QAAQ;AAAA,kBAC/B,EAAE;AAAA,kBAEL;AAAA;AAAA,oBACO,SAAS,QAAQ,IAAI,SAAS;AAAA;AAAA;AAAA,cACtC;AAAA,iBAjBY,SAAS,QAkBvB,CACD;AAAA;AAAA,QACH;AAAA,QACC,QAAQ,SAAS,KAChB,qBAAC,SACC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,UAAU,UAAU;AAAA,cACpB,SAAS,MAAM,OAAO,QAAQ,CAAC;AAAA,cAChC;AAAA;AAAA,UAED;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,UAAU,SAAS,QAAQ,SAAS;AAAA,cACpC,SAAS,MAAM,OAAO,QAAQ,CAAC;AAAA,cAChC;AAAA;AAAA,UAED;AAAA,UACC,QAAQ,IAAI,CAAC,GAAG,aACf;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,cAAY,gBAAgB,WAAW,CAAC;AAAA,cACxC,gBAAc,UAAU,WAAW,SAAS;AAAA,cAC5C,SAAS,MAAM,OAAO,QAAQ;AAAA,cAE7B,qBAAW;AAAA;AAAA,YANP;AAAA,UAOP,CACD;AAAA,WACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["\"use client\";\nimport {\n  createSanitizeRichText,\n  splitInfoBanner,\n} from \"@zappie/foundations/rich-text\";\nimport { parseRichText } from \"@zappie/foundations/rich-text/browser\";\nimport { useEffect, useRef, useState } from \"react\";\nconst sanitize = createSanitizeRichText(parseRichText);\n/** Safe rich text with touch scrolling, explicit controls and pausable rotation. */\nexport function InfoBanners({ value }: { value?: string }) {\n  const [banners, setBanners] = useState<string[]>([]);\n  const [index, setIndex] = useState(0);\n  const [expanded, setExpanded] = useState<Record<number, boolean>>({});\n  const [paused, setPaused] = useState(false);\n  const viewport = useRef<HTMLDivElement>(null);\n  const interacted = useRef(false);\n  useEffect(() => {\n    setBanners(\n      splitInfoBanner(value).filter((banner) =>\n        banner.replace(/<[^>]*>/g, \"\").trim(),\n      ),\n    );\n    setIndex(0);\n    setExpanded({});\n    interacted.current = false;\n  }, [value]);\n  function select(next: number, interaction = true) {\n    interacted.current ||= interaction;\n    setExpanded({});\n    viewport.current?.children[next]?.scrollIntoView({\n      block: \"nearest\",\n      inline: \"start\",\n      behavior: \"instant\",\n    });\n    setIndex(next);\n  }\n  const isExpanded = Object.values(expanded).some(Boolean);\n  useEffect(() => {\n    if (paused || isExpanded || banners.length < 2) {\n      return;\n    }\n    const interval = setInterval(() => {\n      const node = viewport.current;\n      if (\n        !node ||\n        interacted.current ||\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ||\n        node.scrollWidth <= node.clientWidth\n      ) {\n        return;\n      }\n      select((index + 1) % banners.length, false);\n    }, 5000);\n    return () => clearInterval(interval);\n  }, [index, paused, isExpanded, banners.length]);\n  if (!banners.length) {\n    return null;\n  }\n  return (\n    <section\n      aria-label=\"Menu information\"\n      onMouseEnter={() => setPaused(true)}\n      onMouseLeave={() => setPaused(false)}\n      onFocus={() => setPaused(true)}\n      onBlur={() => setPaused(false)}\n    >\n      <div\n        className=\"z-base-info-banners\"\n        ref={viewport}\n        onPointerDown={() => {\n          interacted.current = true;\n        }}\n        onScroll={() => {\n          const node = viewport.current;\n          if (node?.children[0]) {\n            setIndex(\n              Math.round(\n                node.scrollLeft /\n                  node.children[0].getBoundingClientRect().width,\n              ),\n            );\n          }\n        }}\n      >\n        {banners.map((banner, position) => (\n          <article key={banner + position}>\n            <div\n              className=\"z-base-info-copy\"\n              data-expanded={Boolean(expanded[position])}\n              dangerouslySetInnerHTML={{ __html: sanitize(banner) }}\n            />\n            <button\n              type=\"button\"\n              aria-expanded={Boolean(expanded[position])}\n              onClick={() =>\n                setExpanded((current) => ({\n                  ...current,\n                  [position]: !current[position],\n                }))\n              }\n            >\n              Show {expanded[position] ? \"less\" : \"more\"}\n            </button>\n          </article>\n        ))}\n      </div>\n      {banners.length > 1 && (\n        <div>\n          <button\n            type=\"button\"\n            aria-label=\"Previous information\"\n            disabled={index === 0}\n            onClick={() => select(index - 1)}\n          >\n            Previous\n          </button>\n          <button\n            type=\"button\"\n            aria-label=\"Next information\"\n            disabled={index >= banners.length - 1}\n            onClick={() => select(index + 1)}\n          >\n            Next\n          </button>\n          {banners.map((_, position) => (\n            <button\n              key={position}\n              type=\"button\"\n              aria-label={`Go to banner ${position + 1}`}\n              aria-current={index === position ? \"true\" : undefined}\n              onClick={() => select(position)}\n            >\n              {position + 1}\n            </button>\n          ))}\n        </div>\n      )}\n    </section>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/catalogue/presentation.js

@@ -30,7 +30,6 @@ function ItemImage({
   return /* @__PURE__ */ jsx("div", { className: "z-base-item-image", children: image && !failed ? (
     // Public themes remain framework independent; the host may optimise
     // image URLs through the bridge.
-    // eslint-disable-next-line @next/next/no-img-element
     /* @__PURE__ */ jsx(
       "img",
       {

package/dist/catalogue/presentation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/catalogue/presentation.tsx"],
-  "sourcesContent": ["\"use client\";\nimport { createSanitizeRichText } from \"@zappie/foundations/rich-text\";\nimport { parseRichText } from \"@zappie/foundations/rich-text/browser\";\nimport { useEffect, useState } from \"react\";\nimport { useBaseHostBridge } from \"../host-bridge\";\nconst sanitize = createSanitizeRichText(parseRichText);\nexport function Description({ value }: { value: string }) {\n  const [html, setHtml] = useState(\"\");\n  useEffect(() => setHtml(sanitize(value)), [value]);\n  return (\n    <div\n      className=\"z-base-description\"\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  );\n}\nexport function ItemImage({\n  src,\n  sizes,\n  priority = false,\n}: {\n  src?: string | undefined;\n  /** Rendered width hint for responsive host images. */\n  sizes: string;\n  /** Tiles likely to be the largest paint load first instead of lazily. */\n  priority?: boolean;\n}) {\n  const bridge = useBaseHostBridge();\n  const [failed, setFailed] = useState(false);\n  useEffect(() => setFailed(false), [src]);\n  const image = src ? (bridge.imageProps?.(src, sizes) ?? { src }) : undefined;\n  return (\n    <div className=\"z-base-item-image\">\n      {image && !failed ? (\n        // Public themes remain framework independent; the host may optimise\n        // image URLs through the bridge.\n        // eslint-disable-next-line @next/next/no-img-element\n        <img\n          {...image}\n          loading={priority ? \"eager\" : \"lazy\"}\n          fetchPriority={priority ? \"high\" : \"auto\"}\n          decoding=\"async\"\n          alt=\"\"\n          onError={() => setFailed(true)}\n        />\n      ) : (\n        <span aria-hidden=\"true\">Image unavailable</span>\n      )}\n    </div>\n  );\n}\n"],
-  "mappings": ";;;AACA,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,WAAW,gBAAgB;AACpC,SAAS,yBAAyB;AAM9B;AALJ,IAAM,WAAW,uBAAuB,aAAa;AAC9C,SAAS,YAAY,EAAE,MAAM,GAAsB;AACxD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,YAAU,MAAM,QAAQ,SAAS,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,yBAAyB,EAAE,QAAQ,KAAK;AAAA;AAAA,EAC1C;AAEJ;AACO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAMG;AACD,QAAM,SAAS,kBAAkB;AACjC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,YAAU,MAAM,UAAU,KAAK,GAAG,CAAC,GAAG,CAAC;AACvC,QAAM,QAAQ,MAAO,OAAO,aAAa,KAAK,KAAK,KAAK,EAAE,IAAI,IAAK;AACnE,SACE,oBAAC,SAAI,WAAU,qBACZ,mBAAS,CAAC;AAAA;AAAA;AAAA;AAAA,IAIT;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS,WAAW,UAAU;AAAA,QAC9B,eAAe,WAAW,SAAS;AAAA,QACnC,UAAS;AAAA,QACT,KAAI;AAAA,QACJ,SAAS,MAAM,UAAU,IAAI;AAAA;AAAA,IAC/B;AAAA,MAEA,oBAAC,UAAK,eAAY,QAAO,+BAAiB,GAE9C;AAEJ;",
+  "sourcesContent": ["\"use client\";\nimport { createSanitizeRichText } from \"@zappie/foundations/rich-text\";\nimport { parseRichText } from \"@zappie/foundations/rich-text/browser\";\nimport { useEffect, useState } from \"react\";\nimport { useBaseHostBridge } from \"../host-bridge\";\nconst sanitize = createSanitizeRichText(parseRichText);\nexport function Description({ value }: { value: string }) {\n  const [html, setHtml] = useState(\"\");\n  useEffect(() => setHtml(sanitize(value)), [value]);\n  return (\n    <div\n      className=\"z-base-description\"\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  );\n}\nexport function ItemImage({\n  src,\n  sizes,\n  priority = false,\n}: {\n  src?: string | undefined;\n  /** Rendered width hint for responsive host images. */\n  sizes: string;\n  /** Tiles likely to be the largest paint load first instead of lazily. */\n  priority?: boolean;\n}) {\n  const bridge = useBaseHostBridge();\n  const [failed, setFailed] = useState(false);\n  useEffect(() => setFailed(false), [src]);\n  const image = src ? (bridge.imageProps?.(src, sizes) ?? { src }) : undefined;\n  return (\n    <div className=\"z-base-item-image\">\n      {image && !failed ? (\n        // Public themes remain framework independent; the host may optimise\n        // image URLs through the bridge.\n        <img\n          {...image}\n          loading={priority ? \"eager\" : \"lazy\"}\n          fetchPriority={priority ? \"high\" : \"auto\"}\n          decoding=\"async\"\n          alt=\"\"\n          onError={() => setFailed(true)}\n        />\n      ) : (\n        <span aria-hidden=\"true\">Image unavailable</span>\n      )}\n    </div>\n  );\n}\n"],
+  "mappings": ";;;AACA,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,WAAW,gBAAgB;AACpC,SAAS,yBAAyB;AAM9B;AALJ,IAAM,WAAW,uBAAuB,aAAa;AAC9C,SAAS,YAAY,EAAE,MAAM,GAAsB;AACxD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,YAAU,MAAM,QAAQ,SAAS,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,yBAAyB,EAAE,QAAQ,KAAK;AAAA;AAAA,EAC1C;AAEJ;AACO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAMG;AACD,QAAM,SAAS,kBAAkB;AACjC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,YAAU,MAAM,UAAU,KAAK,GAAG,CAAC,GAAG,CAAC;AACvC,QAAM,QAAQ,MAAO,OAAO,aAAa,KAAK,KAAK,KAAK,EAAE,IAAI,IAAK;AACnE,SACE,oBAAC,SAAI,WAAU,qBACZ,mBAAS,CAAC;AAAA;AAAA;AAAA,IAGT;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS,WAAW,UAAU;AAAA,QAC9B,eAAe,WAAW,SAAS;AAAA,QACnC,UAAS;AAAA,QACT,KAAI;AAAA,QACJ,SAAS,MAAM,UAAU,IAAI;AAAA;AAAA,IAC/B;AAAA,MAEA,oBAAC,UAAK,eAAY,QAAO,+BAAiB,GAE9C;AAEJ;",
   "names": []
 }

package/dist/catalogue.d.ts

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Menu, Item, Category } from '@zappie/sdk';
+import * as react from 'react';
 import { ComponentType } from 'react';
+import { Menu, Item, Category } from '@zappie/sdk';
 
 type CatalogueStrategy = (metadata: Menu, sample?: Menu) => "eager" | "progressive" | null;
 
@@ -55,6 +55,6 @@ type CatalogueSlots = {
     layout?: CatalogueLayout;
 };
 
-declare function Catalogue({ initialMenu, resolveStrategy, themeClass, orderAction, menuNotice, revision, slots, }: CatalogueProps): react_jsx_runtime.JSX.Element;
+declare function Catalogue({ initialMenu, resolveStrategy, themeClass, orderAction, menuNotice, revision, slots, }: CatalogueProps): react.JSX.Element;
 
 export { Catalogue, type CatalogueCategoryHeaderProps, type CatalogueCategoryTabProps, type CatalogueColumnCount, type CatalogueLayout, type CatalogueLayoutMode, type CatalogueMenuSlotProps, type CatalogueProps, type CatalogueSlots, type CatalogueTileProps, type CatalogueToolbarActionProps };

package/dist/checkout.d.ts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
 import { CartModule } from '@zappie/sdk';
 import { CheckoutClient } from '@zappie/sdk/checkout';
 import { CustomerClient } from '@zappie/sdk/customer';
-import { ReactNode } from 'react';
 
 type CheckoutPayload = ReturnType<CartModule["toCheckoutPayload"]>;
 type CheckoutHandoff = {
@@ -19,7 +19,7 @@ type CheckoutHandoff = {
 declare function CheckoutHandoffProvider({ handoff, children, }: {
     handoff: CheckoutHandoff;
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 declare function useCheckoutHandoff(): CheckoutHandoff;
 declare function createSdkCheckoutHandoff({ customer, checkout, branchId, returnUrl, cancelUrl, attribution, }: {
     customer: CustomerClient;

package/dist/host-bridge.d.ts

@@ -1,6 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Money, OpeningTime, CartFulfilment } from '@zappie/sdk';
+import * as react from 'react';
 import { ReactNode } from 'react';
+import { Money, OpeningTime, CartFulfilment } from '@zappie/sdk';
 export { AddressSuggestion } from './address.js';
 import '@zappie/sdk/places';
 
@@ -94,7 +94,7 @@ type CustomerDetailsValues = {
 declare function BaseHostBridgeProvider({ bridge, children, }: {
     bridge: BaseHostBridge;
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 declare function useBaseHostBridge(): BaseHostBridge;
 
 export { type BaseHostBridge, BaseHostBridgeProvider, type CustomerDetailsValues, type HostAppliedReward, type HostPromo, type HostReward, useBaseHostBridge };

package/dist/item-frame.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { RefObject, ReactNode } from 'react';
 
@@ -15,6 +14,6 @@ declare function ItemFrame({ id, name, hasImages, navigation, themeClass, childr
         open(): void;
         close(): void;
     };
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 
 export { ItemEscapeContext, ItemFrame };

package/dist/item.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { Item } from '@zappie/sdk';
 
 type ItemDetailProps = {
@@ -14,7 +14,7 @@ type ItemDetailProps = {
     };
 };
 /** Framework-independent SDK item screen, reusable through themeClass. */
-declare function ItemDetail(props: ItemDetailProps): react_jsx_runtime.JSX.Element;
-declare function ItemContent({ item, menuId, scope, href, navigation, }: ItemDetailProps): react_jsx_runtime.JSX.Element;
+declare function ItemDetail(props: ItemDetailProps): react.JSX.Element;
+declare function ItemContent({ item, menuId, scope, href, navigation, }: ItemDetailProps): react.JSX.Element;
 
 export { ItemContent, ItemDetail, type ItemDetailProps };

package/dist/navigation.d.ts

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
 import { Item } from '@zappie/sdk';
 import { StorefrontUrlOptions } from '@zappie/sdk/url';
-import { ReactNode } from 'react';
 
 declare function createUrlNavigation(options?: UrlNavigationOptions): CatalogueNavigation;
 
@@ -58,7 +58,7 @@ type UrlNavigationOptions = StorefrontUrlOptions & {
 declare function CatalogueNavigationProvider({ navigation, children, }: {
     navigation: CatalogueNavigation;
     children: ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): react.JSX.Element;
 declare function useCatalogueNavigation(): CatalogueNavigation;
 
 export { type CatalogueFocusTarget, type CatalogueLocation, type CatalogueNavigation, CatalogueNavigationProvider, type CatalogueNavigationTarget, type UrlNavigationOptions, createUrlNavigation, useCatalogueNavigation };

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* Generated by scripts/build-base-next-theme.mjs. */
+/* Generated by pnpm base-next:tokens. */
 @layer zappie-base-tokens {
   [data-zappie-theme="base"] {
     --z-bg: #f9fafb;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zappie/theme-base",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "The base storefront theme Zappie's own storefront app renders, built only from Zappie's public packages.",
   "type": "module",
   "sideEffects": [
@@ -54,22 +54,22 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@zappie/foundations": "^0.1.2",
-    "@zappie/sdk": "^0.1.2",
-    "@zappie/tokens": "^0.1.1"
+    "@zappie/foundations": "^0.1.7",
+    "@zappie/sdk": "^0.1.13",
+    "@zappie/tokens": "^0.1.2"
   },
   "peerDependencies": {
     "react": "^19.2.0"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/zappie/storefront.git",
+    "url": "git+https://github.com/zappie/storefront-packages.git",
     "directory": "themes/base"
   },
   "license": "MIT",
-  "homepage": "https://github.com/zappie/storefront#readme",
+  "homepage": "https://github.com/zappie/storefront-packages#readme",
   "bugs": {
-    "url": "https://github.com/zappie/storefront/issues"
+    "url": "https://github.com/zappie/storefront-packages/issues"
   },
   "scripts": {
     "build": "tsup && node ../../scripts/release-packages/build-modules.mjs"