@quantaroute/checkout 1.2.0 → 1.3.0

package/README.md

@@ -6,7 +6,7 @@
 
 [![Made in India](https://img.shields.io/badge/Made%20in-India%20🇮🇳-orange)](https://quantaroute.com)
 [![DigiPin](https://img.shields.io/badge/DigiPin-India%20Post-blue)](https://www.indiapost.gov.in)
-[![Map](https://img.shields.io/badge/Map-Carto%20Positron%20(free)-green)](https://carto.com)
+[![Map](https://img.shields.io/badge/Map-MapLibre%20%2B%20OpenFreeMap%20%2F%20Carto-green)](https://openfreemap.org)
 [![License](https://img.shields.io/badge/License-MIT-lightgrey)](./LICENSE)
 
 ---
@@ -32,7 +32,7 @@ Step 1 – Map Pin                    Step 2 – Auto-fill + Details
 **Key features:**
 
 - DigiPin shown **offline** in real-time as the user drags the pin (~4 m × 4 m precision)
-- **No Google Maps.** Free Carto Positron vector basemap
+- **No Google Maps.** Free vector basemap — choose from Carto Positron or OpenFreeMap styles (no API key for either)
 - Auto-fills State, District, Locality, Pincode, Delivery status from QuantaRoute API
 - Manual fields: Flat no., Floor, Building (OSM pre-filled), Street/Area (OSM pre-filled)
 - Mobile-first (full-screen on phones, card on desktop/tablet)
@@ -297,6 +297,7 @@ npx expo run:android
 | `theme` | `'light' \| 'dark'` | `'light'` | all |
 | `mapHeight` | `string \| number` | `'380px'` / `380` | all |
 | `title` | `string` | `'Add Delivery Address'` | all |
+| `mapStyle` | `BuiltInMapStyle \| string` | `'carto-positron'` | all |
 | `className` | `string` | – | web only |
 | `style` | `CSSProperties \| StyleProp<ViewStyle>` | – | all |
 | `indiaBoundaryUrl` | `string` | – | web only |
@@ -377,6 +378,25 @@ function MyCheckout() {
 }
 ```
 
+### Choose a basemap style
+
+Pass a built-in preset name or any MapLibre-compatible style URL:
+
+```tsx
+// Built-in presets (no API key required for any of them)
+<CheckoutWidget apiKey="..." mapStyle="carto-positron"       onComplete={...} />  {/* default */}
+<CheckoutWidget apiKey="..." mapStyle="openfreemap-liberty"  onComplete={...} />  {/* colorful OSM */}
+<CheckoutWidget apiKey="..." mapStyle="openfreemap-positron" onComplete={...} />  {/* clean light */}
+<CheckoutWidget apiKey="..." mapStyle="openfreemap-bright"   onComplete={...} />  {/* vibrant */}
+
+// Custom style URL (your own MapLibre server)
+<CheckoutWidget apiKey="..." mapStyle="https://my-tiles.example.com/style.json" onComplete={...} />
+```
+
+Attribution is applied automatically for each built-in preset.
+
+> OpenFreeMap is a free, open-source tile hosting service. If you use the `openfreemap-*` presets in production, consider [sponsoring the project](https://github.com/sponsors/hyperknot) to keep the public instance running.
+
 ### India boundary overlay (web only)
 
 ```tsx
@@ -404,6 +424,7 @@ function MyCheckout() {
 │   ├── core/
 │   │   ├── digipin.ts     ← offline DigiPin algorithm (shared, no DOM)
 │   │   ├── api.ts         ← QuantaRoute API client (shared, fetch)
+│   │   ├── mapStyles.ts   ← basemap preset registry + resolver (shared)
 │   │   └── types.ts       ← TypeScript types (shared)
 │   ├── hooks/
 │   │   ├── useGeolocation.ts            ← web  (navigator.geolocation)
@@ -433,11 +454,16 @@ Vite / Webpack / Next.js  → "import" export → dist/lib/quantaroute-checkout.
 
 ## Map tile license
 
-Uses **Carto Positron** vector tiles (Carto Voyager on native):
+| Preset | Provider | Attribution | API key |
+|---|---|---|---|
+| `carto-positron` (default) | [Carto](https://carto.com/attributions) | `© OpenStreetMap contributors © CARTO` | None |
+| `openfreemap-liberty` | [OpenFreeMap](https://openfreemap.org) | `© OpenStreetMap contributors © OpenMapTiles · OpenFreeMap` | None |
+| `openfreemap-positron` | [OpenFreeMap](https://openfreemap.org) | `© OpenStreetMap contributors © OpenMapTiles · OpenFreeMap` | None |
+| `openfreemap-bright` | [OpenFreeMap](https://openfreemap.org) | `© OpenStreetMap contributors © OpenMapTiles · OpenFreeMap` | None |
+
+Attribution is injected automatically for all built-in presets. When using a custom style URL you are responsible for correct attribution per your tile provider's terms.
 
-- Free for commercial use — attribution required
-- Attribution: `© OpenStreetMap contributors © CARTO`
-- No API key required for Carto basemaps
+OpenFreeMap is fully open-source (MIT). If you use `openfreemap-*` presets in production, please consider [sponsoring their public instance](https://github.com/sponsors/hyperknot).
 
 ---
 
@@ -483,6 +509,17 @@ npx expo run:android     # requires Android Studio
 
 ## Changelog
 
+### v1.3.0
+
+- **`mapStyle` prop** — choose a basemap preset or pass any MapLibre-compatible style URL
+  - `'carto-positron'` (default, unchanged — fully backward-compatible)
+  - `'openfreemap-liberty'` — colorful OSM-flavored style via [OpenFreeMap](https://openfreemap.org)
+  - `'openfreemap-positron'` — clean light style via OpenFreeMap
+  - `'openfreemap-bright'` — vibrant high-contrast style via OpenFreeMap
+  - Custom URL string — pass any MapLibre style JSON endpoint
+- Attribution text is resolved automatically per provider (no manual setup needed)
+- New `src/core/mapStyles.ts` — shared preset registry used by both web and native components
+
 ### v1.2.0
 
 - **iOS & Android support** via `expo-osm-sdk` (MapLibre GL Native)

package/dist/lib/index.d.ts

@@ -50,6 +50,23 @@ export declare interface AdministrativeInfo {
 
 declare type AnyStyle = any;
 
+/**
+ * Built-in basemap style presets.
+ *
+ * | Preset                   | Provider      | Character                        |
+ * |--------------------------|---------------|----------------------------------|
+ * | `'carto-positron'`       | Carto         | Clean, minimal, light (default)  |
+ * | `'openfreemap-liberty'`  | OpenFreeMap   | Colorful OSM-flavored            |
+ * | `'openfreemap-positron'` | OpenFreeMap   | Clean light, open-source         |
+ * | `'openfreemap-bright'`   | OpenFreeMap   | Vibrant, high contrast           |
+ *
+ * You can also pass any MapLibre-compatible style URL string directly.
+ *
+ * OpenFreeMap is free and open-source with no API key or rate limits.
+ * See https://openfreemap.org
+ */
+declare type BuiltInMapStyle = 'carto-positron' | 'openfreemap-liberty' | 'openfreemap-positron' | 'openfreemap-bright';
+
 /**
  * QuantaRoute Checkout Widget
  *
@@ -90,6 +107,13 @@ export declare interface CheckoutWidgetProps {
     mapHeight?: string | number;
     /** Widget header title. Defaults to 'Add Delivery Address'. */
     title?: string;
+    /**
+     * Basemap style. Pass a preset name or any MapLibre-compatible style URL.
+     * Defaults to `'carto-positron'`.
+     * @example mapStyle="openfreemap-liberty"
+     * @example mapStyle="https://my-server.com/style.json"
+     */
+    mapStyle?: BuiltInMapStyle | string;
     /**
      * URL to an India boundary GeoJSON file (FeatureCollection).
      * When provided, a thin grey outline is drawn on the map for legal compliance.
@@ -215,6 +239,13 @@ export declare interface MapPinSelectorProps {
     /** Map height. String on web ('380px'), number on native (380). */
     mapHeight?: string | number;
     theme?: 'light' | 'dark';
+    /**
+     * Basemap style. Pass a preset name or any MapLibre-compatible style URL.
+     * Defaults to `'carto-positron'`.
+     * @example mapStyle="openfreemap-liberty"
+     * @example mapStyle="https://my-server.com/style.json"
+     */
+    mapStyle?: BuiltInMapStyle | string;
     /**
      * URL to an India boundary GeoJSON file (FeatureCollection).
      * When provided, a thin grey outline of India's border is drawn on the map

package/dist/lib/quantaroute-checkout.es.js

@@ -154,11 +154,49 @@ function useGeolocation() {
   }, []);
   return { ...state, locate, clearError };
 }
+const STYLE_REGISTRY = {
+  "carto-positron": {
+    url: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
+    attributionHtml: '© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors &nbsp;© <a href="https://carto.com/attributions" target="_blank" rel="noopener">CARTO</a>',
+    attributionPlain: "© OpenStreetMap contributors © CARTO"
+  },
+  "openfreemap-liberty": {
+    url: "https://tiles.openfreemap.org/styles/liberty",
+    attributionHtml: '© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors &nbsp;© <a href="https://openmaptiles.org" target="_blank" rel="noopener">OpenMapTiles</a> &nbsp;<a href="https://openfreemap.org" target="_blank" rel="noopener">OpenFreeMap</a>',
+    attributionPlain: "© OpenStreetMap contributors © OpenMapTiles · OpenFreeMap"
+  },
+  "openfreemap-positron": {
+    url: "https://tiles.openfreemap.org/styles/positron",
+    attributionHtml: '© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors &nbsp;© <a href="https://openmaptiles.org" target="_blank" rel="noopener">OpenMapTiles</a> &nbsp;<a href="https://openfreemap.org" target="_blank" rel="noopener">OpenFreeMap</a>',
+    attributionPlain: "© OpenStreetMap contributors © OpenMapTiles · OpenFreeMap"
+  },
+  "openfreemap-bright": {
+    url: "https://tiles.openfreemap.org/styles/bright",
+    attributionHtml: '© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors &nbsp;© <a href="https://openmaptiles.org" target="_blank" rel="noopener">OpenMapTiles</a> &nbsp;<a href="https://openfreemap.org" target="_blank" rel="noopener">OpenFreeMap</a>',
+    attributionPlain: "© OpenStreetMap contributors © OpenMapTiles · OpenFreeMap"
+  }
+};
+const DEFAULT_STYLE = "carto-positron";
+function isBuiltIn(value) {
+  return value in STYLE_REGISTRY;
+}
+function resolveMapStyle(mapStyle) {
+  if (!mapStyle || mapStyle === DEFAULT_STYLE) {
+    return STYLE_REGISTRY[DEFAULT_STYLE];
+  }
+  if (isBuiltIn(mapStyle)) {
+    return STYLE_REGISTRY[mapStyle];
+  }
+  return {
+    url: mapStyle,
+    attributionHtml: '© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors',
+    attributionPlain: "© OpenStreetMap contributors"
+  };
+}
 const INDIA_CENTER = { lat: 13.00427, lng: 77.589291 };
 const MIN_ZOOM = 6;
 const OVERVIEW_ZOOM = 9;
 const STREET_ZOOM = 18;
-const CARTO_STYLE_URL = "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
 const PIN_W = 40;
 const PIN_H = 52;
 function computeDigiPinSafe(la, lo) {
@@ -225,6 +263,7 @@ const MapPinSelector = ({
   mapHeight = "380px",
   theme: _theme = "light",
   // kept for future dark-mode pin tint; unused for now
+  mapStyle,
   indiaBoundaryUrl
 }) => {
   const containerRef = useRef(null);
@@ -247,9 +286,10 @@ const MapPinSelector = ({
     if (!containerRef.current) return;
     const boundaryPromise = indiaBoundaryUrl ? fetch(indiaBoundaryUrl).then((r) => r.ok ? r.json() : null).catch(() => null) : Promise.resolve(null);
     const initZoom = hasDefault ? STREET_ZOOM : OVERVIEW_ZOOM;
+    const { url: styleUrl, attributionHtml } = resolveMapStyle(mapStyle);
     const map = new maplibregl.Map({
       container: containerRef.current,
-      style: CARTO_STYLE_URL,
+      style: styleUrl,
       center: [initLng, initLat],
       zoom: initZoom,
       minZoom: MIN_ZOOM,
@@ -261,7 +301,7 @@ const MapPinSelector = ({
     map.addControl(
       new maplibregl.AttributionControl({
         compact: true,
-        customAttribution: '© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors &nbsp;© <a href="https://carto.com/attributions" target="_blank" rel="noopener">CARTO</a>'
+        customAttribution: attributionHtml
       }),
       "bottom-right"
     );
@@ -451,6 +491,14 @@ const MapPinSelector = ({
   ] });
 };
 const DEFAULT_BASE_URL = "https://api.quantaroute.com";
+function makeTimeoutSignal(ms) {
+  if (typeof AbortSignal !== "undefined" && typeof AbortSignal.timeout === "function") {
+    return AbortSignal.timeout(ms);
+  }
+  const ctrl = new AbortController();
+  setTimeout(() => ctrl.abort(), ms);
+  return ctrl.signal;
+}
 async function lookupLocation(lat, lng, apiKey, baseUrl = DEFAULT_BASE_URL) {
   const url = `${baseUrl.replace(/\/$/, "")}/v1/location/lookup`;
   let res;
@@ -462,11 +510,10 @@ async function lookupLocation(lat, lng, apiKey, baseUrl = DEFAULT_BASE_URL) {
         "x-api-key": apiKey
       },
       body: JSON.stringify({ latitude: lat, longitude: lng }),
-      signal: AbortSignal.timeout(15e3)
-      // 15s timeout
+      signal: makeTimeoutSignal(15e3)
     });
   } catch (err) {
-    if (err instanceof Error && err.name === "TimeoutError") {
+    if (err instanceof Error && (err.name === "TimeoutError" || err.name === "AbortError")) {
       throw new Error("Request timed out. Check your internet connection.");
     }
     throw new Error(`Network error: ${err instanceof Error ? err.message : String(err)}`);
@@ -502,11 +549,10 @@ async function reverseGeocode(digipin, apiKey, baseUrl = DEFAULT_BASE_URL) {
         "x-api-key": apiKey
       },
       body: JSON.stringify({ digipin }),
-      signal: AbortSignal.timeout(15e3)
-      // 15s timeout
+      signal: makeTimeoutSignal(15e3)
     });
   } catch (err) {
-    if (err instanceof Error && err.name === "TimeoutError") {
+    if (err instanceof Error && (err.name === "TimeoutError" || err.name === "AbortError")) {
       throw new Error("Request timed out. Check your internet connection.");
     }
     throw new Error(`Network error: ${err instanceof Error ? err.message : String(err)}`);
@@ -940,6 +986,7 @@ const CheckoutWidget = ({
   style,
   mapHeight = "380px",
   title = "Add Delivery Address",
+  mapStyle,
   indiaBoundaryUrl
 }) => {
   const [step, setStep] = useState("map");
@@ -1005,6 +1052,7 @@ const CheckoutWidget = ({
             defaultLng,
             mapHeight,
             theme,
+            mapStyle,
             indiaBoundaryUrl
           }
         ),

package/dist/lib/quantaroute-checkout.umd.js

@@ -1,4 +1,4 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react/jsx-runtime"),require("react"),require("maplibre-gl")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react","maplibre-gl"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).QuantaRouteCheckout={},e.ReactJSXRuntime,e.React,e.maplibregl)}(this,function(e,r,a,n){"use strict"
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react/jsx-runtime"),require("react"),require("maplibre-gl")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react","maplibre-gl"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).QuantaRouteCheckout={},e.ReactJSXRuntime,e.React,e.maplibregl)}(this,function(e,r,t,n){"use strict"
 
 ;/*!
  * @quantaroute/checkout v1.2.0
@@ -19,76 +19,79 @@
  *   expo >= 49.0.0
  *   expo-osm-sdk >= 2.0.0
  *   expo-location >= 17.0.0
- */const t=[["F","C","9","8"],["J","3","2","7"],["K","4","5","6"],["L","M","P","T"]],i={minLat:2.5,maxLat:38.5,minLon:63.5,maxLon:99.5}
+ */const a=[["F","C","9","8"],["J","3","2","7"],["K","4","5","6"],["L","M","P","T"]],i={minLat:2.5,maxLat:38.5,minLon:63.5,maxLon:99.5}
 function o(e,r){if(e<i.minLat||e>i.maxLat)throw new Error(`Latitude ${e} out of range. Must be between ${i.minLat} and ${i.maxLat}`)
 if(r<i.minLon||r>i.maxLon)throw new Error(`Longitude ${r} out of range. Must be between ${i.minLon} and ${i.maxLon}`)
-let a=i.minLat,n=i.maxLat,o=i.minLon,l=i.maxLon,s=""
-for(let i=1;i<=10;i++){const d=(n-a)/4,c=(l-o)/4
-let u=3-Math.floor((e-a)/d),h=Math.floor((r-o)/c)
-u=Math.max(0,Math.min(u,3)),h=Math.max(0,Math.min(h,3)),s+=t[u][h],3!==i&&6!==i||(s+="-"),n=a+d*(4-u),a+=d*(3-u),o+=c*h,l=o+c}return s}function l(e){const r=e.replace(/-/g,"")
+let t=i.minLat,n=i.maxLat,o=i.minLon,l=i.maxLon,s=""
+for(let i=1;i<=10;i++){const c=(n-t)/4,d=(l-o)/4
+let p=3-Math.floor((e-t)/c),u=Math.floor((r-o)/d)
+p=Math.max(0,Math.min(p,3)),u=Math.max(0,Math.min(u,3)),s+=a[p][u],3!==i&&6!==i||(s+="-"),n=t+c*(4-p),t+=c*(3-p),o+=d*u,l=o+d}return s}function l(e){const r=e.replace(/-/g,"")
 if(10!==r.length)throw new Error("Invalid DIGIPIN: must be 10 characters (excluding dashes)")
-let a=i.minLat,n=i.maxLat,o=i.minLon,l=i.maxLon
+let t=i.minLat,n=i.maxLat,o=i.minLon,l=i.maxLon
 for(let i=0;i<10;i++){const e=r[i]
-let s=!1,d=-1,c=-1
-for(let r=0;r<4;r++){for(let a=0;a<4;a++)if(t[r][a]===e){d=r,c=a,s=!0
+let s=!1,c=-1,d=-1
+for(let r=0;r<4;r++){for(let t=0;t<4;t++)if(a[r][t]===e){c=r,d=t,s=!0
 break}if(s)break}if(!s)throw new Error(`Invalid character in DIGIPIN: '${e}'`)
-const u=(n-a)/4,h=(l-o)/4,p=o+h*(c+1)
-a=n-u*(d+1),n-=u*d,o+=h*c,l=p}return{latitude:((a+n)/2).toFixed(6),longitude:((o+l)/2).toFixed(6)}}function s(e,r){return e>=i.minLat&&e<=i.maxLat&&r>=i.minLon&&r<=i.maxLon}function d(){const[e,r]=a.useState({loading:!1,error:null})
-return{...e,locate:a.useCallback(e=>{navigator.geolocation?(r({loading:!0,error:null}),navigator.geolocation.getCurrentPosition(({coords:a})=>{r({loading:!1,error:null}),e(a.latitude,a.longitude)},e=>{let a="Unable to get location."
-e.code===e.PERMISSION_DENIED?a="Location permission denied. Please enable it in browser settings.":e.code===e.POSITION_UNAVAILABLE?a="Location unavailable. Try again or place the pin manually.":e.code===e.TIMEOUT&&(a="Location request timed out. Try again."),r({loading:!1,error:a})},{enableHighAccuracy:!0,timeout:12e3,maximumAge:0})):r({loading:!1,error:"Geolocation is not supported by your browser."})},[]),clearError:a.useCallback(()=>{r(e=>({...e,error:null}))},[])}}function c(e,r){if(!s(e,r))return null
-try{return o(e,r)}catch{return null}}const u=({onLocationConfirm:e,defaultLat:t,defaultLng:i,mapHeight:o="380px",theme:l="light",indiaBoundaryUrl:s})=>{const u=a.useRef(null),h=a.useRef(null),p=a.useRef(null),m=t??13.00427,g=i??77.589291,f=void 0!==t&&void 0!==i,[q,b]=a.useState(m),[y,N]=a.useState(g),[v,_]=a.useState(()=>c(m,g)),[w,k]=a.useState(!1),{loading:x,error:L,locate:C,clearError:E}=d(),S=a.useCallback((e,r)=>{_(c(e,r))},[])
-a.useEffect(()=>{if(!u.current)return
-const e=s?fetch(s).then(e=>e.ok?e.json():null).catch(()=>null):Promise.resolve(null),r=f?18:9,a=new n.Map({container:u.current,style:"https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",center:[g,m],zoom:r,minZoom:6,attributionControl:!1,touchZoomRotate:!0})
-return a.addControl(new n.AttributionControl({compact:!0,customAttribution:'© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors &nbsp;© <a href="https://carto.com/attributions" target="_blank" rel="noopener">CARTO</a>'}),"bottom-right"),a.addControl(new n.NavigationControl({showCompass:!1}),"top-right"),a.on("load",()=>{k(!0),e.then(e=>{if(e&&a.isStyleLoaded())try{a.addSource("india-boundary",{type:"geojson",data:e}),a.addLayer({id:"india-boundary-line",type:"line",source:"india-boundary",paint:{"line-color":"#94a3b8","line-width":1.5,"line-opacity":.65}})}catch{}})
+const p=(n-t)/4,u=(l-o)/4,h=o+u*(d+1)
+t=n-p*(c+1),n-=p*c,o+=u*d,l=h}return{latitude:((t+n)/2).toFixed(6),longitude:((o+l)/2).toFixed(6)}}function s(e,r){return e>=i.minLat&&e<=i.maxLat&&r>=i.minLon&&r<=i.maxLon}function c(){const[e,r]=t.useState({loading:!1,error:null})
+return{...e,locate:t.useCallback(e=>{navigator.geolocation?(r({loading:!0,error:null}),navigator.geolocation.getCurrentPosition(({coords:t})=>{r({loading:!1,error:null}),e(t.latitude,t.longitude)},e=>{let t="Unable to get location."
+e.code===e.PERMISSION_DENIED?t="Location permission denied. Please enable it in browser settings.":e.code===e.POSITION_UNAVAILABLE?t="Location unavailable. Try again or place the pin manually.":e.code===e.TIMEOUT&&(t="Location request timed out. Try again."),r({loading:!1,error:t})},{enableHighAccuracy:!0,timeout:12e3,maximumAge:0})):r({loading:!1,error:"Geolocation is not supported by your browser."})},[]),clearError:t.useCallback(()=>{r(e=>({...e,error:null}))},[])}}const d={"carto-positron":{url:"https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",attributionHtml:'© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors &nbsp;© <a href="https://carto.com/attributions" target="_blank" rel="noopener">CARTO</a>',attributionPlain:"© OpenStreetMap contributors © CARTO"},"openfreemap-liberty":{url:"https://tiles.openfreemap.org/styles/liberty",attributionHtml:'© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors &nbsp;© <a href="https://openmaptiles.org" target="_blank" rel="noopener">OpenMapTiles</a> &nbsp;<a href="https://openfreemap.org" target="_blank" rel="noopener">OpenFreeMap</a>',attributionPlain:"© OpenStreetMap contributors © OpenMapTiles · OpenFreeMap"},"openfreemap-positron":{url:"https://tiles.openfreemap.org/styles/positron",attributionHtml:'© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors &nbsp;© <a href="https://openmaptiles.org" target="_blank" rel="noopener">OpenMapTiles</a> &nbsp;<a href="https://openfreemap.org" target="_blank" rel="noopener">OpenFreeMap</a>',attributionPlain:"© OpenStreetMap contributors © OpenMapTiles · OpenFreeMap"},"openfreemap-bright":{url:"https://tiles.openfreemap.org/styles/bright",attributionHtml:'© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors &nbsp;© <a href="https://openmaptiles.org" target="_blank" rel="noopener">OpenMapTiles</a> &nbsp;<a href="https://openfreemap.org" target="_blank" rel="noopener">OpenFreeMap</a>',attributionPlain:"© OpenStreetMap contributors © OpenMapTiles · OpenFreeMap"}},p="carto-positron"
+function u(e,r){if(!s(e,r))return null
+try{return o(e,r)}catch{return null}}const h=({onLocationConfirm:e,defaultLat:a,defaultLng:i,mapHeight:o="380px",theme:l="light",mapStyle:s,indiaBoundaryUrl:h})=>{const m=t.useRef(null),g=t.useRef(null),f=t.useRef(null),b=a??13.00427,q=i??77.589291,y=void 0!==a&&void 0!==i,[_,N]=t.useState(b),[v,w]=t.useState(q),[k,x]=t.useState(()=>u(b,q)),[S,L]=t.useState(!1),{loading:M,error:C,locate:E,clearError:A}=c(),T=t.useCallback((e,r)=>{x(u(e,r))},[])
+t.useEffect(()=>{if(!m.current)return
+const e=h?fetch(h).then(e=>e.ok?e.json():null).catch(()=>null):Promise.resolve(null),r=y?18:9,{url:t,attributionHtml:a}=function(e){return e&&e!==p?e in d?d[e]:{url:e,attributionHtml:'© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors',attributionPlain:"© OpenStreetMap contributors"}:d[p]}(s),i=new n.Map({container:m.current,style:t,center:[q,b],zoom:r,minZoom:6,attributionControl:!1,touchZoomRotate:!0})
+return i.addControl(new n.AttributionControl({compact:!0,customAttribution:a}),"bottom-right"),i.addControl(new n.NavigationControl({showCompass:!1}),"top-right"),i.on("load",()=>{L(!0),e.then(e=>{if(e&&i.isStyleLoaded())try{i.addSource("india-boundary",{type:"geojson",data:e}),i.addLayer({id:"india-boundary-line",type:"line",source:"india-boundary",paint:{"line-color":"#94a3b8","line-width":1.5,"line-opacity":.65}})}catch{}})
 const r=function(){const e=document.createElement("div")
-return e.className="qr-pin",e.setAttribute("aria-label","Drag to adjust your location"),e.style.width="40px",e.style.height="52px",e.innerHTML='\n    <svg\n      class="qr-pin__svg"\n      width="40"\n      height="52"\n      viewBox="0 0 40 52"\n      overflow="visible"\n      fill="none"\n      xmlns="http://www.w3.org/2000/svg"\n      aria-hidden="true"\n    >\n      <defs>\n        \x3c!--\n          The filter region must be generous enough to contain the shadow blur.\n          stdDeviation=3 → ~9px blur radius; our region extends 50% on each side.\n          overflow="visible" on the <svg> lets it paint outside the viewport.\n        --\x3e\n        <filter id="qr-pin-shadow" x="-60%" y="-40%" width="220%" height="220%">\n          <feDropShadow dx="0" dy="3" stdDeviation="3.5"\n            flood-color="#000" flood-opacity="0.28"/>\n        </filter>\n      </defs>\n\n      \x3c!-- Teardrop body — tip is at (20, 52) = bottom-center of the SVG --\x3e\n      <path\n        d="M20 0C9.402 0 0 9.402 0 20C0 34 20 52 20 52S40 34 40 20C40 9.402 30.598 0 20 0Z"\n        fill="#0ea5e9"\n        filter="url(#qr-pin-shadow)"\n      />\n      \x3c!-- Dot inside the pin --\x3e\n      <circle cx="20" cy="20" r="9" fill="white"/>\n      <circle cx="20" cy="20" r="5" fill="#0ea5e9"/>\n    </svg>\n\n    \x3c!--\n      Pulse ring — position: absolute inside .qr-pin (position: relative).\n      bottom: -(height/2)  →  bottom: -10px  centres the 20×20 circle\n      exactly at y = PIN_H = 52px = the pin tip coordinate.\n    --\x3e\n    <div class="qr-pin__pulse" aria-hidden="true"></div>\n  ',e}(),t=new n.Marker({element:r,draggable:!0,anchor:"bottom"}).setLngLat([g,m]).addTo(a)
+return e.className="qr-pin",e.setAttribute("aria-label","Drag to adjust your location"),e.style.width="40px",e.style.height="52px",e.innerHTML='\n    <svg\n      class="qr-pin__svg"\n      width="40"\n      height="52"\n      viewBox="0 0 40 52"\n      overflow="visible"\n      fill="none"\n      xmlns="http://www.w3.org/2000/svg"\n      aria-hidden="true"\n    >\n      <defs>\n        \x3c!--\n          The filter region must be generous enough to contain the shadow blur.\n          stdDeviation=3 → ~9px blur radius; our region extends 50% on each side.\n          overflow="visible" on the <svg> lets it paint outside the viewport.\n        --\x3e\n        <filter id="qr-pin-shadow" x="-60%" y="-40%" width="220%" height="220%">\n          <feDropShadow dx="0" dy="3" stdDeviation="3.5"\n            flood-color="#000" flood-opacity="0.28"/>\n        </filter>\n      </defs>\n\n      \x3c!-- Teardrop body — tip is at (20, 52) = bottom-center of the SVG --\x3e\n      <path\n        d="M20 0C9.402 0 0 9.402 0 20C0 34 20 52 20 52S40 34 40 20C40 9.402 30.598 0 20 0Z"\n        fill="#0ea5e9"\n        filter="url(#qr-pin-shadow)"\n      />\n      \x3c!-- Dot inside the pin --\x3e\n      <circle cx="20" cy="20" r="9" fill="white"/>\n      <circle cx="20" cy="20" r="5" fill="#0ea5e9"/>\n    </svg>\n\n    \x3c!--\n      Pulse ring — position: absolute inside .qr-pin (position: relative).\n      bottom: -(height/2)  →  bottom: -10px  centres the 20×20 circle\n      exactly at y = PIN_H = 52px = the pin tip coordinate.\n    --\x3e\n    <div class="qr-pin__pulse" aria-hidden="true"></div>\n  ',e}(),t=new n.Marker({element:r,draggable:!0,anchor:"bottom"}).setLngLat([q,b]).addTo(i)
 t.on("drag",()=>{const e=t.getLngLat()
-b(e.lat),N(e.lng),S(e.lat,e.lng)}),t.on("dragend",()=>{const e=t.getLngLat()
-a.easeTo({center:[e.lng,e.lat],duration:250})}),p.current=t}),a.on("click",e=>{var r
-const n=e.lngLat
-null==(r=p.current)||r.setLngLat([n.lng,n.lat]),b(n.lat),N(n.lng),S(n.lat,n.lng),a.easeTo({center:[n.lng,n.lat],duration:200})}),h.current=a,()=>{a.remove(),h.current=null,p.current=null}},[])
-const A=a.useCallback(()=>{E(),C((e,r)=>{var a
-b(e),N(r),S(e,r),h.current&&h.current.flyTo({center:[r,e],zoom:18,duration:1400,essential:!0}),null==(a=p.current)||a.setLngLat([r,e])})},[C,E,S]),T=a.useCallback(()=>{v&&e(q,y,v)},[q,y,v,e]),I=null!==v,M=I&&w
-return r.jsxs("div",{className:"qr-map-wrapper",children:[r.jsxs("div",{className:"qr-step-header",children:[r.jsx("div",{className:"qr-step-badge",children:"1"}),r.jsxs("div",{className:"qr-step-text",children:[r.jsx("span",{className:"qr-step-title",children:"Pin Your Location"}),r.jsx("span",{className:"qr-step-sub",children:"Tap the map or drag the pin to your exact home / office"})]})]}),r.jsxs("div",{className:"qr-map-outer",style:{height:o},children:[r.jsx("div",{ref:u,className:"qr-map-canvas"}),v&&r.jsxs("div",{className:"qr-digipin-badge","aria-live":"polite","aria-label":`DigiPin: ${v}`,children:[r.jsx("span",{className:"qr-digipin-badge__label",children:"DigiPin"}),r.jsx("span",{className:"qr-digipin-badge__code",children:v})]}),!I&&w&&r.jsx("div",{className:"qr-map-notice",role:"status",children:"Move map to India to get a DigiPin"}),r.jsx("button",{className:"qr-locate-btn"+(x?" qr-locate-btn--loading":""),onClick:A,disabled:x,title:"Use my current location","aria-label":"Use my current location",type:"button",children:x?r.jsx("span",{className:"qr-spinner","aria-hidden":"true"}):r.jsxs("svg",{"aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[r.jsx("circle",{cx:"12",cy:"12",r:"3",fill:"currentColor",stroke:"none"}),r.jsx("circle",{cx:"12",cy:"12",r:"7"}),r.jsx("path",{d:"M12 2v3M12 19v3M2 12h3M19 12h3"})]})}),L&&r.jsxs("div",{className:"qr-geo-error",role:"alert",children:[r.jsx("span",{children:L}),r.jsx("button",{type:"button",className:"qr-geo-error__dismiss",onClick:E,"aria-label":"Dismiss error",children:"×"})]})]}),w&&r.jsxs("div",{className:"qr-coords-strip","aria-label":"Current pin coordinates",children:[r.jsxs("span",{children:[q.toFixed(5),"° N"]}),r.jsx("span",{className:"qr-coords-sep",children:"·"}),r.jsxs("span",{children:[y.toFixed(5),"° E"]})]}),r.jsxs("div",{className:"qr-map-actions",children:[r.jsxs("button",{type:"button",className:"qr-btn qr-btn--primary qr-btn--full",onClick:T,disabled:!M,children:["Confirm Location",r.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:r.jsx("path",{d:"M5 12h14M12 5l7 7-7 7"})})]}),!I&&w&&r.jsx("p",{className:"qr-map-hint",children:"Move the pin to a location in India to continue"})]})]})},h="https://api.quantaroute.com"
-async function p(e,r,a,n=h){const t=`${n.replace(/\/$/,"")}/v1/location/lookup`
+N(e.lat),w(e.lng),T(e.lat,e.lng)}),t.on("dragend",()=>{const e=t.getLngLat()
+i.easeTo({center:[e.lng,e.lat],duration:250})}),f.current=t}),i.on("click",e=>{var r
+const t=e.lngLat
+null==(r=f.current)||r.setLngLat([t.lng,t.lat]),N(t.lat),w(t.lng),T(t.lat,t.lng),i.easeTo({center:[t.lng,t.lat],duration:200})}),g.current=i,()=>{i.remove(),g.current=null,f.current=null}},[])
+const O=t.useCallback(()=>{A(),E((e,r)=>{var t
+N(e),w(r),T(e,r),g.current&&g.current.flyTo({center:[r,e],zoom:18,duration:1400,essential:!0}),null==(t=f.current)||t.setLngLat([r,e])})},[E,A,T]),I=t.useCallback(()=>{k&&e(_,v,k)},[_,v,k,e]),D=null!==k,P=D&&S
+return r.jsxs("div",{className:"qr-map-wrapper",children:[r.jsxs("div",{className:"qr-step-header",children:[r.jsx("div",{className:"qr-step-badge",children:"1"}),r.jsxs("div",{className:"qr-step-text",children:[r.jsx("span",{className:"qr-step-title",children:"Pin Your Location"}),r.jsx("span",{className:"qr-step-sub",children:"Tap the map or drag the pin to your exact home / office"})]})]}),r.jsxs("div",{className:"qr-map-outer",style:{height:o},children:[r.jsx("div",{ref:m,className:"qr-map-canvas"}),k&&r.jsxs("div",{className:"qr-digipin-badge","aria-live":"polite","aria-label":`DigiPin: ${k}`,children:[r.jsx("span",{className:"qr-digipin-badge__label",children:"DigiPin"}),r.jsx("span",{className:"qr-digipin-badge__code",children:k})]}),!D&&S&&r.jsx("div",{className:"qr-map-notice",role:"status",children:"Move map to India to get a DigiPin"}),r.jsx("button",{className:"qr-locate-btn"+(M?" qr-locate-btn--loading":""),onClick:O,disabled:M,title:"Use my current location","aria-label":"Use my current location",type:"button",children:M?r.jsx("span",{className:"qr-spinner","aria-hidden":"true"}):r.jsxs("svg",{"aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[r.jsx("circle",{cx:"12",cy:"12",r:"3",fill:"currentColor",stroke:"none"}),r.jsx("circle",{cx:"12",cy:"12",r:"7"}),r.jsx("path",{d:"M12 2v3M12 19v3M2 12h3M19 12h3"})]})}),C&&r.jsxs("div",{className:"qr-geo-error",role:"alert",children:[r.jsx("span",{children:C}),r.jsx("button",{type:"button",className:"qr-geo-error__dismiss",onClick:A,"aria-label":"Dismiss error",children:"×"})]})]}),S&&r.jsxs("div",{className:"qr-coords-strip","aria-label":"Current pin coordinates",children:[r.jsxs("span",{children:[_.toFixed(5),"° N"]}),r.jsx("span",{className:"qr-coords-sep",children:"·"}),r.jsxs("span",{children:[v.toFixed(5),"° E"]})]}),r.jsxs("div",{className:"qr-map-actions",children:[r.jsxs("button",{type:"button",className:"qr-btn qr-btn--primary qr-btn--full",onClick:I,disabled:!P,children:["Confirm Location",r.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:r.jsx("path",{d:"M5 12h14M12 5l7 7-7 7"})})]}),!D&&S&&r.jsx("p",{className:"qr-map-hint",children:"Move the pin to a location in India to continue"})]})]})},m="https://api.quantaroute.com"
+function g(e){if("undefined"!=typeof AbortSignal&&"function"==typeof AbortSignal.timeout)return AbortSignal.timeout(e)
+const r=new AbortController
+return setTimeout(()=>r.abort(),e),r.signal}async function f(e,r,t,n=m){const a=`${n.replace(/\/$/,"")}/v1/location/lookup`
 let i
-try{i=await fetch(t,{method:"POST",headers:{"Content-Type":"application/json","x-api-key":a},body:JSON.stringify({latitude:e,longitude:r}),signal:AbortSignal.timeout(15e3)})}catch(l){if(l instanceof Error&&"TimeoutError"===l.name)throw new Error("Request timed out. Check your internet connection.")
+try{i=await fetch(a,{method:"POST",headers:{"Content-Type":"application/json","x-api-key":t},body:JSON.stringify({latitude:e,longitude:r}),signal:g(15e3)})}catch(l){if(l instanceof Error&&("TimeoutError"===l.name||"AbortError"===l.name))throw new Error("Request timed out. Check your internet connection.")
 throw new Error(`Network error: ${l instanceof Error?l.message:String(l)}`)}if(!i.ok){let e=""
 try{e=await i.text()}catch{}if(401===i.status||403===i.status)throw new Error("Invalid API key. Check your QuantaRoute API key.")
 if(429===i.status)throw new Error("Rate limit exceeded. Upgrade your plan or try again later.")
 throw new Error(`API error ${i.status}: ${e||i.statusText}`)}const o=await i.json()
 if(!o.success)throw new Error(o.message??"Location lookup failed")
-return o}async function m(e,r,a=h){const n=`${a.replace(/\/$/,"")}/v1/digipin/reverse`
-let t
-try{t=await fetch(n,{method:"POST",headers:{"Content-Type":"application/json","x-api-key":r},body:JSON.stringify({digipin:e}),signal:AbortSignal.timeout(15e3)})}catch(o){if(o instanceof Error&&"TimeoutError"===o.name)throw new Error("Request timed out. Check your internet connection.")
-throw new Error(`Network error: ${o instanceof Error?o.message:String(o)}`)}if(!t.ok){let e=""
-try{e=await t.text()}catch{}if(401===t.status||403===t.status)throw new Error("Invalid API key. Check your QuantaRoute API key.")
-if(429===t.status)throw new Error("Rate limit exceeded. Upgrade your plan or try again later.")
-throw new Error(`API error ${t.status}: ${e||t.statusText}`)}const i=await t.json()
+return o}async function b(e,r,t=m){const n=`${t.replace(/\/$/,"")}/v1/digipin/reverse`
+let a
+try{a=await fetch(n,{method:"POST",headers:{"Content-Type":"application/json","x-api-key":r},body:JSON.stringify({digipin:e}),signal:g(15e3)})}catch(o){if(o instanceof Error&&("TimeoutError"===o.name||"AbortError"===o.name))throw new Error("Request timed out. Check your internet connection.")
+throw new Error(`Network error: ${o instanceof Error?o.message:String(o)}`)}if(!a.ok){let e=""
+try{e=await a.text()}catch{}if(401===a.status||403===a.status)throw new Error("Invalid API key. Check your QuantaRoute API key.")
+if(429===a.status)throw new Error("Rate limit exceeded. Upgrade your plan or try again later.")
+throw new Error(`API error ${a.status}: ${e||a.statusText}`)}const i=await a.json()
 if(!i.success)throw new Error(i.message??"Reverse geocoding failed")
-return i}const g={flatNumber:"",floorNumber:"",buildingName:"",streetName:""}
-function f(e,r){switch(r.type){case"LOAD_START":return{status:"loading"}
+return i}const q={flatNumber:"",floorNumber:"",buildingName:"",streetName:""}
+function y(e,r){switch(r.type){case"LOAD_START":return{status:"loading"}
 case"LOAD_SUCCESS":{const e=function(e){const r={}
 e.name?r.buildingName=e.name:e.building_name?r.buildingName=e.building_name:e.addr_housename&&(r.buildingName=e.addr_housename)
-const a=[]
-return e.road&&a.push(e.road),e.suburb&&a.push(e.suburb),a.length>0&&(r.streetName=a.join(", ")),r}(r.addressComponents)
-return{status:"ready",adminInfo:r.adminInfo,alternatives:r.alternatives||[],selectedLocality:r.adminInfo.locality,fields:{...g,...e},submitting:!1}}case"LOAD_ERROR":return{status:"error",message:r.message}
+const t=[]
+return e.road&&t.push(e.road),e.suburb&&t.push(e.suburb),t.length>0&&(r.streetName=t.join(", ")),r}(r.addressComponents)
+return{status:"ready",adminInfo:r.adminInfo,alternatives:r.alternatives||[],selectedLocality:r.adminInfo.locality,fields:{...q,...e},submitting:!1}}case"LOAD_ERROR":return{status:"error",message:r.message}
 case"SET_FIELD":return"ready"!==e.status?e:{...e,fields:{...e.fields,[r.key]:r.value}}
 case"SET_LOCALITY":return"ready"!==e.status?e:{...e,selectedLocality:r.locality}
 case"SUBMIT_START":return"ready"!==e.status?e:{...e,submitting:!0}
 case"SUBMIT_END":return"ready"!==e.status?e:{...e,submitting:!1}
-default:return e}}const q=({digipin:e,lat:n,lng:t,apiKey:i,apiBaseUrl:o,onAddressComplete:l,onBack:s,onError:d})=>{const[c,u]=a.useReducer(f,{status:"loading"}),h=a.useCallback(async()=>{u({type:"LOAD_START"})
-try{const[r,a]=await Promise.all([p(n,t,i,o),m(e,i,o)])
-u({type:"LOAD_SUCCESS",adminInfo:r.data.administrative_info,alternatives:r.data.alternatives||[],addressComponents:a.data.addressComponents})}catch(r){const e=r instanceof Error?r.message:"Failed to fetch address data."
-u({type:"LOAD_ERROR",message:e}),null==d||d(r instanceof Error?r:new Error(e))}},[e,n,t,i,o,d])
-a.useEffect(()=>{h()},[h])
-const g=a.useCallback(r=>{if(r.preventDefault(),"ready"!==c.status)return
-const{adminInfo:a,selectedLocality:i,fields:o}=c,s=[o.flatNumber,o.floorNumber?`Floor ${o.floorNumber}`:"",o.buildingName,o.streetName,i,a.district,a.state,a.pincode].filter(Boolean),d={digipin:e,lat:n,lng:t,state:a.state,district:a.district,division:a.division,locality:i,pincode:a.pincode,delivery:a.delivery,country:a.country??"India",...o,formattedAddress:s.join(", ")}
-u({type:"SUBMIT_START"})
-try{l(d)}finally{u({type:"SUBMIT_END"})}},[c,e,n,t,l])
-return r.jsxs("div",{className:"qr-form-wrapper",children:[r.jsxs("div",{className:"qr-step-header",children:[r.jsx("button",{type:"button",className:"qr-back-btn",onClick:s,"aria-label":"Back to map",children:r.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:r.jsx("path",{d:"M19 12H5M12 19l-7-7 7-7"})})}),r.jsx("div",{className:"qr-step-badge",children:"2"}),r.jsxs("div",{className:"qr-step-text",children:[r.jsx("span",{className:"qr-step-title",children:"Add Address Details"}),r.jsx("span",{className:"qr-step-sub",children:"Flat number and building info"})]})]}),r.jsxs("div",{className:"qr-form-digipin-strip",children:[r.jsxs("svg",{"aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[r.jsx("path",{d:"M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0118 0z"}),r.jsx("circle",{cx:"12",cy:"10",r:"3"})]}),r.jsx("span",{className:"qr-form-digipin-strip__label",children:"DigiPin"}),r.jsx("span",{className:"qr-form-digipin-strip__code",children:e})]}),"loading"===c.status&&r.jsxs("div",{className:"qr-loading-state","aria-busy":"true","aria-label":"Fetching address details",children:[r.jsx("div",{className:"qr-spinner qr-spinner--lg","aria-hidden":"true"}),r.jsx("p",{className:"qr-loading-state__text",children:"Fetching address details…"})]}),"error"===c.status&&r.jsxs("div",{className:"qr-error-state",role:"alert",children:[r.jsx("div",{className:"qr-error-state__icon","aria-hidden":"true",children:"⚠"}),r.jsx("p",{className:"qr-error-state__msg",children:c.message}),r.jsx("button",{type:"button",className:"qr-btn qr-btn--secondary qr-btn--sm",onClick:()=>{h()},children:"Retry"})]}),"ready"===c.status&&r.jsxs("form",{onSubmit:g,className:"qr-form",noValidate:!0,children:[r.jsxs("fieldset",{className:"qr-fieldset",children:[r.jsxs("legend",{className:"qr-fieldset__legend",children:[r.jsx("span",{className:"qr-fieldset__icon","aria-hidden":"true",children:"📍"}),"Auto-detected from your pin"]}),r.jsxs("div",{className:"qr-auto-grid",children:[r.jsxs("div",{className:"qr-auto-row",children:[r.jsx("span",{className:"qr-auto-row__label",children:"State"}),r.jsx("span",{className:"qr-auto-row__value",children:c.adminInfo.state})]}),r.jsxs("div",{className:"qr-auto-row",children:[r.jsx("span",{className:"qr-auto-row__label",children:"District"}),r.jsx("span",{className:"qr-auto-row__value",children:c.adminInfo.district})]}),r.jsxs("div",{className:"qr-auto-row qr-auto-row--full",children:[r.jsx("span",{className:"qr-auto-row__label",children:"Locality"}),c.alternatives.length>0?r.jsxs("select",{className:"qr-auto-row__select",value:c.selectedLocality,onChange:e=>u({type:"SET_LOCALITY",locality:e.target.value}),"aria-label":"Select locality",children:[r.jsx("option",{value:c.adminInfo.locality,children:c.adminInfo.locality}),c.alternatives.map((e,a)=>r.jsx("option",{value:e.name,children:e.name},a))]}):r.jsx("span",{className:"qr-auto-row__value",children:c.selectedLocality})]}),r.jsxs("div",{className:"qr-auto-row",children:[r.jsx("span",{className:"qr-auto-row__label",children:"Pincode"}),r.jsx("span",{className:"qr-auto-row__value qr-auto-row__value--pin",children:c.adminInfo.pincode})]})]})]}),r.jsxs("fieldset",{className:"qr-fieldset",children:[r.jsxs("legend",{className:"qr-fieldset__legend",children:[r.jsx("span",{className:"qr-fieldset__icon","aria-hidden":"true",children:"🏠"}),"Your details"]}),r.jsxs("div",{className:"qr-fields-grid",children:[r.jsxs("div",{className:"qr-field qr-field--full",children:[r.jsxs("label",{className:"qr-field__label",htmlFor:"qr-flatNumber",children:["Flat / House Number",r.jsx("span",{className:"qr-required","aria-hidden":"true",children:"*"})]}),r.jsx("input",{id:"qr-flatNumber",type:"text",className:"qr-field__input",placeholder:"e.g. 4B, Flat 201, House No. 12",value:c.fields.flatNumber,onChange:e=>u({type:"SET_FIELD",key:"flatNumber",value:e.target.value}),autoComplete:"address-line1",required:!0,"aria-required":"true"})]}),r.jsxs("div",{className:"qr-field",children:[r.jsxs("label",{className:"qr-field__label",htmlFor:"qr-floorNumber",children:["Floor",r.jsx("span",{className:"qr-optional",children:"optional"})]}),r.jsx("input",{id:"qr-floorNumber",type:"text",className:"qr-field__input",placeholder:"e.g. 3rd, Ground",value:c.fields.floorNumber,onChange:e=>u({type:"SET_FIELD",key:"floorNumber",value:e.target.value})})]}),r.jsxs("div",{className:"qr-field",children:[r.jsxs("label",{className:"qr-field__label",htmlFor:"qr-buildingName",children:["Building / Society",r.jsx("span",{className:"qr-optional",children:"optional"})]}),r.jsx("input",{id:"qr-buildingName",type:"text",className:"qr-field__input",placeholder:"e.g. Sunshine Apts, DDA Colony",value:c.fields.buildingName,onChange:e=>u({type:"SET_FIELD",key:"buildingName",value:e.target.value}),autoComplete:"address-line2"})]}),r.jsxs("div",{className:"qr-field qr-field--full",children:[r.jsxs("label",{className:"qr-field__label",htmlFor:"qr-streetName",children:["Street / Area",r.jsx("span",{className:"qr-optional",children:"optional"})]}),r.jsx("input",{id:"qr-streetName",type:"text",className:"qr-field__input",placeholder:"e.g. MG Road, Sector 12",value:c.fields.streetName,onChange:e=>u({type:"SET_FIELD",key:"streetName",value:e.target.value}),autoComplete:"address-level3"})]})]})]}),r.jsxs("div",{className:"qr-form-actions",children:[r.jsxs("button",{type:"button",className:"qr-btn qr-btn--ghost",onClick:s,children:[r.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:r.jsx("path",{d:"M19 12H5M12 19l-7-7 7-7"})}),"Adjust Pin"]}),r.jsx("button",{type:"submit",className:"qr-btn qr-btn--primary qr-btn--grow",disabled:c.submitting||!c.fields.flatNumber.trim(),children:c.submitting?r.jsxs(r.Fragment,{children:[r.jsx("span",{className:"qr-spinner qr-spinner--sm","aria-hidden":"true"}),"Saving…"]}):r.jsxs(r.Fragment,{children:["Save Address",r.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:r.jsx("path",{d:"M20 6L9 17l-5-5"})})]})})]})]})]})},b=({address:e,onEditAddress:a})=>r.jsxs("div",{className:"qr-success",children:[r.jsx("div",{className:"qr-success__icon","aria-hidden":"true",children:r.jsxs("svg",{viewBox:"0 0 52 52",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[r.jsx("circle",{cx:"26",cy:"26",r:"26",fill:"var(--qr-success, #10b981)",opacity:"0.12"}),r.jsx("circle",{cx:"26",cy:"26",r:"20",fill:"var(--qr-success, #10b981)"}),r.jsx("path",{d:"M15 26l8 8 14-16",stroke:"white",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round"})]})}),r.jsx("h3",{className:"qr-success__title",children:"Address Saved!"}),r.jsx("p",{className:"qr-success__address",children:e.formattedAddress}),r.jsx("div",{className:"qr-success__meta",children:r.jsxs("span",{className:"qr-digipin-badge qr-digipin-badge--inline",children:[r.jsx("span",{className:"qr-digipin-badge__label",children:"DigiPin"}),r.jsx("span",{className:"qr-digipin-badge__code",children:e.digipin})]})}),r.jsx("button",{type:"button",className:"qr-btn qr-btn--ghost qr-btn--sm",onClick:a,children:"Change Address"})]}),y=({apiKey:e,apiBaseUrl:n="https://api.quantaroute.com",onComplete:t,onError:i,defaultLat:o,defaultLng:l,theme:s="light",className:d="",style:c,mapHeight:h="380px",title:p="Add Delivery Address",indiaBoundaryUrl:m})=>{const[g,f]=a.useState("map"),[y,N]=a.useState(null),[v,_]=a.useState(null)
-return r.jsxs("div",{className:`qr-checkout qr-checkout--${s} ${d}`,style:c,"data-testid":"quantaroute-checkout",children:["done"!==g&&r.jsxs("div",{className:"qr-header",children:[r.jsxs("div",{className:"qr-header__brand",children:[r.jsxs("svg",{className:"qr-header__logo","aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[r.jsx("path",{d:"M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0118 0z"}),r.jsx("circle",{cx:"12",cy:"10",r:"3"})]}),r.jsx("span",{className:"qr-header__title",children:p})]}),r.jsxs("div",{className:"qr-progress","aria-label":"Progress: step ${ step === 'map' ? 1 : 2 } of 2",role:"progressbar",children:[r.jsx("div",{className:"qr-progress__dot "+("map"===g||"form"===g||"done"===g?"qr-progress__dot--active":"")}),r.jsx("div",{className:"qr-progress__line "+("form"===g||"done"===g?"qr-progress__line--active":"")}),r.jsx("div",{className:"qr-progress__dot "+("form"===g||"done"===g?"qr-progress__dot--active":"")})]})]}),"map"===g&&r.jsx(u,{onLocationConfirm:(e,r,a)=>{N({lat:e,lng:r,digipin:a}),f("form")},defaultLat:o,defaultLng:l,mapHeight:h,theme:s,indiaBoundaryUrl:m}),"form"===g&&y&&r.jsx(q,{digipin:y.digipin,lat:y.lat,lng:y.lng,apiKey:e,apiBaseUrl:n,onAddressComplete:e=>{_(e),f("done"),t(e)},onBack:()=>{f("map")},onError:i,theme:s}),"done"===g&&v&&r.jsx(b,{address:v,onEditAddress:()=>{f("map"),N(null),_(null)}}),r.jsxs("div",{className:"qr-footer",children:[r.jsx("span",{children:"Powered by"}),r.jsx("a",{href:"https://quantaroute.com",target:"_blank",rel:"noopener noreferrer",className:"qr-footer__link",children:"QuantaRoute"}),r.jsx("span",{className:"qr-footer__flag","aria-label":"Made in India",children:"🇮🇳"})]})]})}
-e.AddressForm=q,e.CheckoutWidget=y,e.DIGIPIN_BOUNDS=i,e.MapPinSelector=u,e.default=y,e.getDigiPin=o,e.getLatLngFromDigiPin=l,e.isValidDigiPin=function(e){if(!e||"string"!=typeof e)return!1
+default:return e}}const _=({digipin:e,lat:n,lng:a,apiKey:i,apiBaseUrl:o,onAddressComplete:l,onBack:s,onError:c})=>{const[d,p]=t.useReducer(y,{status:"loading"}),u=t.useCallback(async()=>{p({type:"LOAD_START"})
+try{const[r,t]=await Promise.all([f(n,a,i,o),b(e,i,o)])
+p({type:"LOAD_SUCCESS",adminInfo:r.data.administrative_info,alternatives:r.data.alternatives||[],addressComponents:t.data.addressComponents})}catch(r){const e=r instanceof Error?r.message:"Failed to fetch address data."
+p({type:"LOAD_ERROR",message:e}),null==c||c(r instanceof Error?r:new Error(e))}},[e,n,a,i,o,c])
+t.useEffect(()=>{u()},[u])
+const h=t.useCallback(r=>{if(r.preventDefault(),"ready"!==d.status)return
+const{adminInfo:t,selectedLocality:i,fields:o}=d,s=[o.flatNumber,o.floorNumber?`Floor ${o.floorNumber}`:"",o.buildingName,o.streetName,i,t.district,t.state,t.pincode].filter(Boolean),c={digipin:e,lat:n,lng:a,state:t.state,district:t.district,division:t.division,locality:i,pincode:t.pincode,delivery:t.delivery,country:t.country??"India",...o,formattedAddress:s.join(", ")}
+p({type:"SUBMIT_START"})
+try{l(c)}finally{p({type:"SUBMIT_END"})}},[d,e,n,a,l])
+return r.jsxs("div",{className:"qr-form-wrapper",children:[r.jsxs("div",{className:"qr-step-header",children:[r.jsx("button",{type:"button",className:"qr-back-btn",onClick:s,"aria-label":"Back to map",children:r.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:r.jsx("path",{d:"M19 12H5M12 19l-7-7 7-7"})})}),r.jsx("div",{className:"qr-step-badge",children:"2"}),r.jsxs("div",{className:"qr-step-text",children:[r.jsx("span",{className:"qr-step-title",children:"Add Address Details"}),r.jsx("span",{className:"qr-step-sub",children:"Flat number and building info"})]})]}),r.jsxs("div",{className:"qr-form-digipin-strip",children:[r.jsxs("svg",{"aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[r.jsx("path",{d:"M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0118 0z"}),r.jsx("circle",{cx:"12",cy:"10",r:"3"})]}),r.jsx("span",{className:"qr-form-digipin-strip__label",children:"DigiPin"}),r.jsx("span",{className:"qr-form-digipin-strip__code",children:e})]}),"loading"===d.status&&r.jsxs("div",{className:"qr-loading-state","aria-busy":"true","aria-label":"Fetching address details",children:[r.jsx("div",{className:"qr-spinner qr-spinner--lg","aria-hidden":"true"}),r.jsx("p",{className:"qr-loading-state__text",children:"Fetching address details…"})]}),"error"===d.status&&r.jsxs("div",{className:"qr-error-state",role:"alert",children:[r.jsx("div",{className:"qr-error-state__icon","aria-hidden":"true",children:"⚠"}),r.jsx("p",{className:"qr-error-state__msg",children:d.message}),r.jsx("button",{type:"button",className:"qr-btn qr-btn--secondary qr-btn--sm",onClick:()=>{u()},children:"Retry"})]}),"ready"===d.status&&r.jsxs("form",{onSubmit:h,className:"qr-form",noValidate:!0,children:[r.jsxs("fieldset",{className:"qr-fieldset",children:[r.jsxs("legend",{className:"qr-fieldset__legend",children:[r.jsx("span",{className:"qr-fieldset__icon","aria-hidden":"true",children:"📍"}),"Auto-detected from your pin"]}),r.jsxs("div",{className:"qr-auto-grid",children:[r.jsxs("div",{className:"qr-auto-row",children:[r.jsx("span",{className:"qr-auto-row__label",children:"State"}),r.jsx("span",{className:"qr-auto-row__value",children:d.adminInfo.state})]}),r.jsxs("div",{className:"qr-auto-row",children:[r.jsx("span",{className:"qr-auto-row__label",children:"District"}),r.jsx("span",{className:"qr-auto-row__value",children:d.adminInfo.district})]}),r.jsxs("div",{className:"qr-auto-row qr-auto-row--full",children:[r.jsx("span",{className:"qr-auto-row__label",children:"Locality"}),d.alternatives.length>0?r.jsxs("select",{className:"qr-auto-row__select",value:d.selectedLocality,onChange:e=>p({type:"SET_LOCALITY",locality:e.target.value}),"aria-label":"Select locality",children:[r.jsx("option",{value:d.adminInfo.locality,children:d.adminInfo.locality}),d.alternatives.map((e,t)=>r.jsx("option",{value:e.name,children:e.name},t))]}):r.jsx("span",{className:"qr-auto-row__value",children:d.selectedLocality})]}),r.jsxs("div",{className:"qr-auto-row",children:[r.jsx("span",{className:"qr-auto-row__label",children:"Pincode"}),r.jsx("span",{className:"qr-auto-row__value qr-auto-row__value--pin",children:d.adminInfo.pincode})]})]})]}),r.jsxs("fieldset",{className:"qr-fieldset",children:[r.jsxs("legend",{className:"qr-fieldset__legend",children:[r.jsx("span",{className:"qr-fieldset__icon","aria-hidden":"true",children:"🏠"}),"Your details"]}),r.jsxs("div",{className:"qr-fields-grid",children:[r.jsxs("div",{className:"qr-field qr-field--full",children:[r.jsxs("label",{className:"qr-field__label",htmlFor:"qr-flatNumber",children:["Flat / House Number",r.jsx("span",{className:"qr-required","aria-hidden":"true",children:"*"})]}),r.jsx("input",{id:"qr-flatNumber",type:"text",className:"qr-field__input",placeholder:"e.g. 4B, Flat 201, House No. 12",value:d.fields.flatNumber,onChange:e=>p({type:"SET_FIELD",key:"flatNumber",value:e.target.value}),autoComplete:"address-line1",required:!0,"aria-required":"true"})]}),r.jsxs("div",{className:"qr-field",children:[r.jsxs("label",{className:"qr-field__label",htmlFor:"qr-floorNumber",children:["Floor",r.jsx("span",{className:"qr-optional",children:"optional"})]}),r.jsx("input",{id:"qr-floorNumber",type:"text",className:"qr-field__input",placeholder:"e.g. 3rd, Ground",value:d.fields.floorNumber,onChange:e=>p({type:"SET_FIELD",key:"floorNumber",value:e.target.value})})]}),r.jsxs("div",{className:"qr-field",children:[r.jsxs("label",{className:"qr-field__label",htmlFor:"qr-buildingName",children:["Building / Society",r.jsx("span",{className:"qr-optional",children:"optional"})]}),r.jsx("input",{id:"qr-buildingName",type:"text",className:"qr-field__input",placeholder:"e.g. Sunshine Apts, DDA Colony",value:d.fields.buildingName,onChange:e=>p({type:"SET_FIELD",key:"buildingName",value:e.target.value}),autoComplete:"address-line2"})]}),r.jsxs("div",{className:"qr-field qr-field--full",children:[r.jsxs("label",{className:"qr-field__label",htmlFor:"qr-streetName",children:["Street / Area",r.jsx("span",{className:"qr-optional",children:"optional"})]}),r.jsx("input",{id:"qr-streetName",type:"text",className:"qr-field__input",placeholder:"e.g. MG Road, Sector 12",value:d.fields.streetName,onChange:e=>p({type:"SET_FIELD",key:"streetName",value:e.target.value}),autoComplete:"address-level3"})]})]})]}),r.jsxs("div",{className:"qr-form-actions",children:[r.jsxs("button",{type:"button",className:"qr-btn qr-btn--ghost",onClick:s,children:[r.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:r.jsx("path",{d:"M19 12H5M12 19l-7-7 7-7"})}),"Adjust Pin"]}),r.jsx("button",{type:"submit",className:"qr-btn qr-btn--primary qr-btn--grow",disabled:d.submitting||!d.fields.flatNumber.trim(),children:d.submitting?r.jsxs(r.Fragment,{children:[r.jsx("span",{className:"qr-spinner qr-spinner--sm","aria-hidden":"true"}),"Saving…"]}):r.jsxs(r.Fragment,{children:["Save Address",r.jsx("svg",{"aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:r.jsx("path",{d:"M20 6L9 17l-5-5"})})]})})]})]})]})},N=({address:e,onEditAddress:t})=>r.jsxs("div",{className:"qr-success",children:[r.jsx("div",{className:"qr-success__icon","aria-hidden":"true",children:r.jsxs("svg",{viewBox:"0 0 52 52",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[r.jsx("circle",{cx:"26",cy:"26",r:"26",fill:"var(--qr-success, #10b981)",opacity:"0.12"}),r.jsx("circle",{cx:"26",cy:"26",r:"20",fill:"var(--qr-success, #10b981)"}),r.jsx("path",{d:"M15 26l8 8 14-16",stroke:"white",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round"})]})}),r.jsx("h3",{className:"qr-success__title",children:"Address Saved!"}),r.jsx("p",{className:"qr-success__address",children:e.formattedAddress}),r.jsx("div",{className:"qr-success__meta",children:r.jsxs("span",{className:"qr-digipin-badge qr-digipin-badge--inline",children:[r.jsx("span",{className:"qr-digipin-badge__label",children:"DigiPin"}),r.jsx("span",{className:"qr-digipin-badge__code",children:e.digipin})]})}),r.jsx("button",{type:"button",className:"qr-btn qr-btn--ghost qr-btn--sm",onClick:t,children:"Change Address"})]}),v=({apiKey:e,apiBaseUrl:n="https://api.quantaroute.com",onComplete:a,onError:i,defaultLat:o,defaultLng:l,theme:s="light",className:c="",style:d,mapHeight:p="380px",title:u="Add Delivery Address",mapStyle:m,indiaBoundaryUrl:g})=>{const[f,b]=t.useState("map"),[q,y]=t.useState(null),[v,w]=t.useState(null)
+return r.jsxs("div",{className:`qr-checkout qr-checkout--${s} ${c}`,style:d,"data-testid":"quantaroute-checkout",children:["done"!==f&&r.jsxs("div",{className:"qr-header",children:[r.jsxs("div",{className:"qr-header__brand",children:[r.jsxs("svg",{className:"qr-header__logo","aria-hidden":"true",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[r.jsx("path",{d:"M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0118 0z"}),r.jsx("circle",{cx:"12",cy:"10",r:"3"})]}),r.jsx("span",{className:"qr-header__title",children:u})]}),r.jsxs("div",{className:"qr-progress","aria-label":"Progress: step ${ step === 'map' ? 1 : 2 } of 2",role:"progressbar",children:[r.jsx("div",{className:"qr-progress__dot "+("map"===f||"form"===f||"done"===f?"qr-progress__dot--active":"")}),r.jsx("div",{className:"qr-progress__line "+("form"===f||"done"===f?"qr-progress__line--active":"")}),r.jsx("div",{className:"qr-progress__dot "+("form"===f||"done"===f?"qr-progress__dot--active":"")})]})]}),"map"===f&&r.jsx(h,{onLocationConfirm:(e,r,t)=>{y({lat:e,lng:r,digipin:t}),b("form")},defaultLat:o,defaultLng:l,mapHeight:p,theme:s,mapStyle:m,indiaBoundaryUrl:g}),"form"===f&&q&&r.jsx(_,{digipin:q.digipin,lat:q.lat,lng:q.lng,apiKey:e,apiBaseUrl:n,onAddressComplete:e=>{w(e),b("done"),a(e)},onBack:()=>{b("map")},onError:i,theme:s}),"done"===f&&v&&r.jsx(N,{address:v,onEditAddress:()=>{b("map"),y(null),w(null)}}),r.jsxs("div",{className:"qr-footer",children:[r.jsx("span",{children:"Powered by"}),r.jsx("a",{href:"https://quantaroute.com",target:"_blank",rel:"noopener noreferrer",className:"qr-footer__link",children:"QuantaRoute"}),r.jsx("span",{className:"qr-footer__flag","aria-label":"Made in India",children:"🇮🇳"})]})]})}
+e.AddressForm=_,e.CheckoutWidget=v,e.DIGIPIN_BOUNDS=i,e.MapPinSelector=h,e.default=v,e.getDigiPin=o,e.getLatLngFromDigiPin=l,e.isValidDigiPin=function(e){if(!e||"string"!=typeof e)return!1
 if(!/^[A-Z0-9]{3}-[A-Z0-9]{3}-[A-Z0-9]{4}$/i.test(e.trim()))return!1
-try{return l(e.trim().toUpperCase()),!0}catch{return!1}},e.isWithinIndia=s,e.lookupLocation=p,e.reverseGeocode=m,e.useDigiPin=function(e,r){return a.useMemo(()=>{if(!s(e,r))return null
-try{return o(e,r)}catch{return null}},[e,r])},e.useGeolocation=d,Object.defineProperties(e,{t:{value:!0},[Symbol.toStringTag]:{value:"Module"}})})
+try{return l(e.trim().toUpperCase()),!0}catch{return!1}},e.isWithinIndia=s,e.lookupLocation=f,e.reverseGeocode=b,e.useDigiPin=function(e,r){return t.useMemo(()=>{if(!s(e,r))return null
+try{return o(e,r)}catch{return null}},[e,r])},e.useGeolocation=c,Object.defineProperties(e,{t:{value:!0},[Symbol.toStringTag]:{value:"Module"}})})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quantaroute/checkout",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Embeddable DigiPin-powered smart address checkout widget — React (web), React Native & Expo (iOS/Android)",
   "main": "./dist/lib/quantaroute-checkout.umd.js",
   "module": "./dist/lib/quantaroute-checkout.es.js",

package/src/components/CheckoutWidget.tsx

@@ -74,6 +74,7 @@ const CheckoutWidget: React.FC<CheckoutWidgetProps> = ({
   style,
   mapHeight = '380px',
   title = 'Add Delivery Address',
+  mapStyle,
   indiaBoundaryUrl,
 }) => {
   const [step, setStep] = useState<Step>('map');
@@ -152,6 +153,7 @@ const CheckoutWidget: React.FC<CheckoutWidgetProps> = ({
           defaultLng={defaultLng}
           mapHeight={mapHeight}
           theme={theme}
+          mapStyle={mapStyle}
           indiaBoundaryUrl={indiaBoundaryUrl}
         />
       )}

package/src/components/MapPinSelector.native.tsx

@@ -3,13 +3,13 @@ import {
   View,
   Text,
   TouchableOpacity,
-  ActivityIndicator,
 } from 'react-native';
-import { OSMView } from 'expo-osm-sdk';
+import { OSMView, LocationButton } from 'expo-osm-sdk';
 import type { OSMViewRef, MarkerConfig } from 'expo-osm-sdk';
+import * as Location from 'expo-location';
 import { getDigiPin, isWithinIndia } from '../core/digipin';
-import { useGeolocation } from '../hooks/useGeolocation.native';
 import type { MapPinSelectorProps } from '../core/types';
+import { resolveMapStyle } from '../core/mapStyles';
 import { styles, COLORS } from '../styles/checkout.native';
 
 // ─── Constants ────────────────────────────────────────────────────────────────
@@ -18,12 +18,7 @@ const INDIA_CENTER = { latitude: 20.5937, longitude: 78.9629 };
 const OVERVIEW_ZOOM = 5;
 const STREET_ZOOM = 16;
 
-/**
- * Carto Positron vector basemap — same source as the web version.
- * Free, no API key required. Attribution required (shown by OSMView natively).
- */
-const CARTO_STYLE_URL =
-  'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
+// Style URL is resolved per-instance from the mapStyle prop (see resolveMapStyle).
 
 /**
  * Custom pin SVG as a data URI — matches the web pin colour (#0ea5e9).
@@ -63,6 +58,7 @@ const MapPinSelector: React.FC<MapPinSelectorProps> = ({
   defaultLng,
   mapHeight = 380,
   theme = 'light',
+  mapStyle,
 }) => {
   const mapRef = useRef<OSMViewRef>(null);
 
@@ -75,10 +71,10 @@ const MapPinSelector: React.FC<MapPinSelectorProps> = ({
     computeDigiPinSafe(initLat, initLng)
   );
   const [mapReady, setMapReady] = useState(false);
-
-  const { loading: geoLoading, error: geoError, locate, clearError } = useGeolocation();
+  const [locateError, setLocateError] = useState<string | null>(null);
 
   const isDark = theme === 'dark';
+  const { url: styleUrl } = resolveMapStyle(mapStyle);
 
   // Resolve numeric height: web passes '380px', native should pass 380 or a number
   const mapHeightNum =
@@ -107,14 +103,18 @@ const MapPinSelector: React.FC<MapPinSelectorProps> = ({
     },
   ];
 
-  // ── Locate-me handler ────────────────────────────────────────────────────────
-  const handleLocateMe = useCallback(() => {
-    clearError();
-    locate((lat, lng) => {
-      handleCoordChange(lat, lng);
-      void mapRef.current?.animateToLocation(lat, lng, STREET_ZOOM);
+  // ── Locate-me: delegate to expo-osm-sdk's LocationButton via getCurrentLocation ──
+  const getCurrentLocation = useCallback(async () => {
+    setLocateError(null);
+    const { status } = await Location.requestForegroundPermissionsAsync();
+    if (status !== Location.PermissionStatus.GRANTED) {
+      throw new Error('Location permission denied');
+    }
+    const loc = await Location.getCurrentPositionAsync({
+      accuracy: Location.Accuracy.High,
     });
-  }, [locate, clearError, handleCoordChange]);
+    return { latitude: loc.coords.latitude, longitude: loc.coords.longitude };
+  }, []);
 
   // ── Confirm handler ──────────────────────────────────────────────────────────
   const handleConfirm = useCallback(() => {
@@ -151,7 +151,7 @@ const MapPinSelector: React.FC<MapPinSelectorProps> = ({
           style={{ flex: 1 }}
           initialCenter={{ latitude: initLat, longitude: initLng }}
           initialZoom={hasDefault ? STREET_ZOOM : OVERVIEW_ZOOM}
-          styleUrl={CARTO_STYLE_URL}
+          styleUrl={styleUrl}
           markers={pinMarkers}
           showUserLocation={false}
           scrollEnabled
@@ -186,31 +186,26 @@ const MapPinSelector: React.FC<MapPinSelectorProps> = ({
           </View>
         ) : null}
 
-        {/* Locate-me button */}
-        <TouchableOpacity
-          style={[styles.locateBtn, isDark && styles.locateBtnDark]}
-          onPress={handleLocateMe}
-          disabled={geoLoading}
-          activeOpacity={0.7}
-          accessibilityLabel="Use my current location"
-          accessibilityRole="button"
-        >
-          {geoLoading ? (
-            <ActivityIndicator size="small" color={COLORS.primary} />
-          ) : (
-            <Text style={{ fontSize: 20, color: isDark ? COLORS.textDark : COLORS.text }}>
-              ⊕
-            </Text>
-          )}
-        </TouchableOpacity>
+        {/* Locate-me button — expo-osm-sdk's built-in LocationButton */}
+        <LocationButton
+          style={styles.locateBtn}
+          color={COLORS.primary}
+          size={44}
+          getCurrentLocation={getCurrentLocation}
+          onLocationFound={({ latitude, longitude }) => {
+            handleCoordChange(latitude, longitude);
+            void mapRef.current?.animateToLocation(latitude, longitude, STREET_ZOOM);
+          }}
+          onLocationError={(err) => setLocateError(err)}
+        />
 
         {/* Geo error toast */}
-        {geoError ? (
+        {locateError ? (
           <View style={styles.geoError}>
-            <Text style={styles.geoErrorText}>{geoError}</Text>
+            <Text style={styles.geoErrorText}>{locateError}</Text>
             <TouchableOpacity
               style={styles.geoErrorDismiss}
-              onPress={clearError}
+              onPress={() => setLocateError(null)}
               accessibilityLabel="Dismiss error"
             >
               <Text style={styles.geoErrorDismissText}>×</Text>

package/src/components/MapPinSelector.tsx

@@ -4,6 +4,7 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 import { getDigiPin, isWithinIndia } from '../core/digipin';
 import { useGeolocation } from '../hooks/useGeolocation';
 import type { MapPinSelectorProps } from '../core/types';
+import { resolveMapStyle } from '../core/mapStyles';
 
 // ─── Constants ───────────────────────────────────────────────────────────────
 
@@ -13,13 +14,7 @@ const MIN_ZOOM     = 6;   // users cannot zoom out beyond a useful India-level v
 const OVERVIEW_ZOOM = 9;
 const STREET_ZOOM = 18;
 
-/**
- * Carto Positron – free vector basemap, no API key required.
- * Attribution: © OpenStreetMap contributors © CARTO
- * Terms: https://carto.com/legal/
- */
-const CARTO_STYLE_URL =
-  'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json';
+// Style URL is resolved per-instance from the mapStyle prop (see resolveMapStyle).
 
 // ─── Pin dimensions ───────────────────────────────────────────────────────────
 // MUST match the SVG width/height exactly.
@@ -103,6 +98,7 @@ const MapPinSelector: React.FC<MapPinSelectorProps> = ({
   defaultLng,
   mapHeight = '380px',
   theme: _theme = 'light',   // kept for future dark-mode pin tint; unused for now
+  mapStyle,
   indiaBoundaryUrl,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -144,10 +140,11 @@ const MapPinSelector: React.FC<MapPinSelectorProps> = ({
       : Promise.resolve(null);
 
     const initZoom = hasDefault ? STREET_ZOOM : OVERVIEW_ZOOM;
+    const { url: styleUrl, attributionHtml } = resolveMapStyle(mapStyle);
 
     const map = new maplibregl.Map({
       container: containerRef.current,
-      style: CARTO_STYLE_URL,
+      style: styleUrl,
       center: [initLng, initLat],
       zoom: initZoom,
       minZoom: MIN_ZOOM,   // lock: cannot zoom out past level 7
@@ -156,12 +153,11 @@ const MapPinSelector: React.FC<MapPinSelectorProps> = ({
       touchZoomRotate: true,
     });
 
-    // Attribution (required by Carto & OSM terms)
+    // Attribution (required by OSM + each basemap provider's terms)
     map.addControl(
       new maplibregl.AttributionControl({
         compact: true,
-        customAttribution:
-          '© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors &nbsp;© <a href="https://carto.com/attributions" target="_blank" rel="noopener">CARTO</a>',
+        customAttribution: attributionHtml,
       }),
       'bottom-right'
     );

package/src/core/api.ts

@@ -2,6 +2,23 @@ import type { LocationLookupResponse } from './types';
 
 const DEFAULT_BASE_URL = 'https://api.quantaroute.com';
 
+/**
+ * Cross-platform timeout signal.
+ * AbortSignal.timeout() is not available in React Native / Hermes — fall back
+ * to a manual AbortController + setTimeout when it is missing.
+ */
+function makeTimeoutSignal(ms: number): AbortSignal {
+  if (
+    typeof AbortSignal !== 'undefined' &&
+    typeof (AbortSignal as { timeout?: unknown }).timeout === 'function'
+  ) {
+    return AbortSignal.timeout(ms);
+  }
+  const ctrl = new AbortController();
+  setTimeout(() => ctrl.abort(), ms);
+  return ctrl.signal;
+}
+
 /**
  * Address components from Nominatim/OpenStreetMap (via reverse geocoding).
  */
@@ -61,10 +78,10 @@ export async function lookupLocation(
         'x-api-key': apiKey,
       },
       body: JSON.stringify({ latitude: lat, longitude: lng }),
-      signal: AbortSignal.timeout(15_000), // 15s timeout
+      signal: makeTimeoutSignal(15_000),
     });
   } catch (err) {
-    if (err instanceof Error && err.name === 'TimeoutError') {
+    if (err instanceof Error && (err.name === 'TimeoutError' || err.name === 'AbortError')) {
       throw new Error('Request timed out. Check your internet connection.');
     }
     throw new Error(`Network error: ${err instanceof Error ? err.message : String(err)}`);
@@ -115,10 +132,10 @@ export async function reverseGeocode(
         'x-api-key': apiKey,
       },
       body: JSON.stringify({ digipin }),
-      signal: AbortSignal.timeout(15_000), // 15s timeout
+      signal: makeTimeoutSignal(15_000),
     });
   } catch (err) {
-    if (err instanceof Error && err.name === 'TimeoutError') {
+    if (err instanceof Error && (err.name === 'TimeoutError' || err.name === 'AbortError')) {
       throw new Error('Request timed out. Check your internet connection.');
     }
     throw new Error(`Network error: ${err instanceof Error ? err.message : String(err)}`);

package/src/core/mapStyles.ts

@@ -0,0 +1,74 @@
+import type { BuiltInMapStyle } from './types';
+
+// ─── Style registry ───────────────────────────────────────────────────────────
+
+interface StyleEntry {
+  url: string;
+  /** HTML attribution string (web). Plain text for native. */
+  attributionHtml: string;
+  attributionPlain: string;
+}
+
+const STYLE_REGISTRY: Record<BuiltInMapStyle, StyleEntry> = {
+  'carto-positron': {
+    url: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
+    attributionHtml:
+      '© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors' +
+      ' &nbsp;© <a href="https://carto.com/attributions" target="_blank" rel="noopener">CARTO</a>',
+    attributionPlain: '© OpenStreetMap contributors © CARTO',
+  },
+  'openfreemap-liberty': {
+    url: 'https://tiles.openfreemap.org/styles/liberty',
+    attributionHtml:
+      '© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors' +
+      ' &nbsp;© <a href="https://openmaptiles.org" target="_blank" rel="noopener">OpenMapTiles</a>' +
+      ' &nbsp;<a href="https://openfreemap.org" target="_blank" rel="noopener">OpenFreeMap</a>',
+    attributionPlain: '© OpenStreetMap contributors © OpenMapTiles · OpenFreeMap',
+  },
+  'openfreemap-positron': {
+    url: 'https://tiles.openfreemap.org/styles/positron',
+    attributionHtml:
+      '© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors' +
+      ' &nbsp;© <a href="https://openmaptiles.org" target="_blank" rel="noopener">OpenMapTiles</a>' +
+      ' &nbsp;<a href="https://openfreemap.org" target="_blank" rel="noopener">OpenFreeMap</a>',
+    attributionPlain: '© OpenStreetMap contributors © OpenMapTiles · OpenFreeMap',
+  },
+  'openfreemap-bright': {
+    url: 'https://tiles.openfreemap.org/styles/bright',
+    attributionHtml:
+      '© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors' +
+      ' &nbsp;© <a href="https://openmaptiles.org" target="_blank" rel="noopener">OpenMapTiles</a>' +
+      ' &nbsp;<a href="https://openfreemap.org" target="_blank" rel="noopener">OpenFreeMap</a>',
+    attributionPlain: '© OpenStreetMap contributors © OpenMapTiles · OpenFreeMap',
+  },
+};
+
+// ─── Resolver ─────────────────────────────────────────────────────────────────
+
+const DEFAULT_STYLE: BuiltInMapStyle = 'carto-positron';
+
+function isBuiltIn(value: string): value is BuiltInMapStyle {
+  return value in STYLE_REGISTRY;
+}
+
+/**
+ * Resolves a mapStyle prop value to its concrete style URL and attribution.
+ * If the value is a preset name, returns the registered entry.
+ * If the value is a custom URL string, returns that URL with generic OSM attribution.
+ * If undefined, falls back to the default preset (carto-positron).
+ */
+export function resolveMapStyle(mapStyle: BuiltInMapStyle | string | undefined): StyleEntry {
+  if (!mapStyle || mapStyle === DEFAULT_STYLE) {
+    return STYLE_REGISTRY[DEFAULT_STYLE];
+  }
+  if (isBuiltIn(mapStyle)) {
+    return STYLE_REGISTRY[mapStyle];
+  }
+  // Custom URL — caller is responsible for setting correct attribution via their style JSON
+  return {
+    url: mapStyle,
+    attributionHtml:
+      '© <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a> contributors',
+    attributionPlain: '© OpenStreetMap contributors',
+  };
+}

package/src/core/types.ts

@@ -83,6 +83,29 @@ export interface CompleteAddress {
   formattedAddress: string;
 }
 
+// ─── Map Style ───────────────────────────────────────────────────────────────
+
+/**
+ * Built-in basemap style presets.
+ *
+ * | Preset                   | Provider      | Character                        |
+ * |--------------------------|---------------|----------------------------------|
+ * | `'carto-positron'`       | Carto         | Clean, minimal, light (default)  |
+ * | `'openfreemap-liberty'`  | OpenFreeMap   | Colorful OSM-flavored            |
+ * | `'openfreemap-positron'` | OpenFreeMap   | Clean light, open-source         |
+ * | `'openfreemap-bright'`   | OpenFreeMap   | Vibrant, high contrast           |
+ *
+ * You can also pass any MapLibre-compatible style URL string directly.
+ *
+ * OpenFreeMap is free and open-source with no API key or rate limits.
+ * See https://openfreemap.org
+ */
+export type BuiltInMapStyle =
+  | 'carto-positron'
+  | 'openfreemap-liberty'
+  | 'openfreemap-positron'
+  | 'openfreemap-bright';
+
 // ─── Component Props ─────────────────────────────────────────────────────────
 
 export interface MapPinSelectorProps {
@@ -92,6 +115,13 @@ export interface MapPinSelectorProps {
   /** Map height. String on web ('380px'), number on native (380). */
   mapHeight?: string | number;
   theme?: 'light' | 'dark';
+  /**
+   * Basemap style. Pass a preset name or any MapLibre-compatible style URL.
+   * Defaults to `'carto-positron'`.
+   * @example mapStyle="openfreemap-liberty"
+   * @example mapStyle="https://my-server.com/style.json"
+   */
+  mapStyle?: BuiltInMapStyle | string;
   /**
    * URL to an India boundary GeoJSON file (FeatureCollection).
    * When provided, a thin grey outline of India's border is drawn on the map
@@ -140,6 +170,13 @@ export interface CheckoutWidgetProps {
   mapHeight?: string | number;
   /** Widget header title. Defaults to 'Add Delivery Address'. */
   title?: string;
+  /**
+   * Basemap style. Pass a preset name or any MapLibre-compatible style URL.
+   * Defaults to `'carto-positron'`.
+   * @example mapStyle="openfreemap-liberty"
+   * @example mapStyle="https://my-server.com/style.json"
+   */
+  mapStyle?: BuiltInMapStyle | string;
   /**
    * URL to an India boundary GeoJSON file (FeatureCollection).
    * When provided, a thin grey outline is drawn on the map for legal compliance.