@nok-integration/storefront-react 0.19.3 → 0.19.5

package/dist/index.d.ts

@@ -3576,12 +3576,25 @@ export declare interface OrderConfirmationViewProps {
     /**
      * The frame's "Done". Omit it and no button renders.
      *
-     * **It leaves the shop entirely.** "Done" goes to the app's own home; the header's
-     * close control goes to the shop home. They are different destinations, and wiring both
-     * to the shop home removes the only way out of the shop at the end of a purchase.
+     * **However you navigate, replace the current history entry rather than pushing a new
+     * one.** A confirmation is a thing that happened once. Push it and the receipt stays in
+     * the browser's history, where Back returns the customer to a confirmation for an order
+     * they have already placed — or, read the wrong way, to an invitation to place it again.
+     * `router.replace(to)`, or `location.replace(url)` for a full page load, takes this
+     * screen out of the history on the way out.
      *
-     * It is a host callback because the app's home is not reachable from the `/v1` surface
-     * and not somewhere `navigate('/')` can go.
+     * Replacement swaps the current entry; it does not delete one. Back therefore lands on
+     * whatever preceded this screen, so where checkout is a page of its own, navigate INTO
+     * the confirmation by replacement too. Otherwise leaving by the front door returns the
+     * customer to the payment step by the back one.
+     *
+     * Neither call can remove an entry already behind you, so both have to happen at the
+     * moment of the navigation. Nothing later can undo a push.
+     *
+     * The destination is yours to choose, and the header's close control is the same exit:
+     * wire the two together unless they genuinely lead to different places. This is a host
+     * callback because it leaves the shop, which is not reachable from the `/v1` surface and
+     * not somewhere `navigate` can go.
      */
     onDone?: () => void;
 }
@@ -5545,7 +5558,14 @@ export declare interface ShopHeaderProps {
      * fetch for a badge that is not drawn.
      */
     context?: 'shop' | 'checkout';
-    /** The close control, in `checkout` context. Omit it and the slot stays reserved. */
+    /**
+     * The close control, in `checkout` context. Omit it and the slot stays reserved.
+     *
+     * On a confirmation this is the same exit as that screen's own "Done" button, and it
+     * carries the same requirement: **replace the current history entry, do not push a new
+     * one.** A pushed receipt stays in the browser's history and Back brings it back. See
+     * `OrderConfirmationViewProps.onDone`.
+     */
     onClose?: () => void;
     /** Accessible name for the back control, for a host that is not in English. */
     backLabel?: string;

package/dist/index.mjs

@@ -5410,6 +5410,7 @@ const styles$M = {
   surface: surface$1,
   fill
 };
+const SETTLE_MS$1 = 150;
 function offsetFromViewportTop(el) {
   let top = el.getBoundingClientRect().top;
   for (let node = el.parentElement; node; node = node.parentElement) {
@@ -5423,17 +5424,30 @@ function useTopOffset(ref, property, enabled = true) {
   useEffect(() => {
     const el = ref.current;
     if (!el || !enabled) return;
+    let timer2;
     const measure = () => {
       el.style.setProperty(property, `${offsetFromViewportTop(el)}px`);
     };
+    const settle = () => {
+      if (timer2) clearTimeout(timer2);
+      timer2 = setTimeout(measure, SETTLE_MS$1);
+    };
     measure();
     window.addEventListener("resize", measure);
     window.addEventListener("orientationchange", measure);
+    document.addEventListener("scroll", settle, {
+      capture: true,
+      passive: true
+    });
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
     if (observer && el.parentElement) observer.observe(el.parentElement);
     return () => {
+      if (timer2) clearTimeout(timer2);
       window.removeEventListener("resize", measure);
       window.removeEventListener("orientationchange", measure);
+      document.removeEventListener("scroll", settle, {
+        capture: true
+      });
       observer?.disconnect();
     };
   }, [ref, property, enabled]);
@@ -10545,24 +10559,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
   }
   return unavailable;
 }
-const showcase = "_showcase_1sarz_31";
-const panel = "_panel_1sarz_50";
-const image = "_image_1sarz_60";
-const heroImageBox = "_heroImageBox_1sarz_108";
-const hero = "_hero_1sarz_108";
-const heroContent = "_heroContent_1sarz_179";
-const heroText = "_heroText_1sarz_196";
-const logo = "_logo_1sarz_205";
-const heroTitle = "_heroTitle_1sarz_225";
-const heroSub = "_heroSub_1sarz_249";
-const swipe = "_swipe_1sarz_262";
-const swipeLabel = "_swipeLabel_1sarz_270";
-const chevron$1 = "_chevron_1sarz_276";
-const overlay$1 = "_overlay_1sarz_293";
-const copy = "_copy_1sarz_304";
-const title$2 = "_title_1sarz_309";
-const subtitle$1 = "_subtitle_1sarz_316";
-const cta = "_cta_1sarz_322";
+const showcase = "_showcase_12z2a_40";
+const panel = "_panel_12z2a_59";
+const image = "_image_12z2a_69";
+const heroImageBox = "_heroImageBox_12z2a_117";
+const hero = "_hero_12z2a_117";
+const heroContent = "_heroContent_12z2a_188";
+const heroText = "_heroText_12z2a_205";
+const logo = "_logo_12z2a_214";
+const heroTitle = "_heroTitle_12z2a_234";
+const heroSub = "_heroSub_12z2a_258";
+const swipe = "_swipe_12z2a_271";
+const swipeLabel = "_swipeLabel_12z2a_279";
+const chevron$1 = "_chevron_12z2a_285";
+const overlay$1 = "_overlay_12z2a_302";
+const copy = "_copy_12z2a_313";
+const title$2 = "_title_12z2a_318";
+const subtitle$1 = "_subtitle_12z2a_325";
+const cta = "_cta_12z2a_331";
 const styles$2 = {
   showcase,
   panel,
@@ -10583,6 +10597,42 @@ const styles$2 = {
   subtitle: subtitle$1,
   cta
 };
+const SETTLE_MS = 250;
+function useViewportHeight(ref, property, enabled = true) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+    let timer2;
+    const read = () => Math.round(window.visualViewport?.height ?? window.innerHeight);
+    const apply = () => {
+      const height = read();
+      if (height > 0) el.style.setProperty(property, `${height}px`);
+    };
+    const applySettled = () => {
+      const previous = el.clientHeight;
+      const index = previous > 0 ? Math.round(el.scrollTop / previous) : 0;
+      apply();
+      if (el.clientHeight > 0) el.scrollTo({
+        top: index * el.clientHeight,
+        behavior: "auto"
+      });
+    };
+    const schedule = () => {
+      if (timer2) clearTimeout(timer2);
+      timer2 = setTimeout(applySettled, SETTLE_MS);
+    };
+    apply();
+    window.addEventListener("resize", schedule);
+    window.addEventListener("orientationchange", schedule);
+    window.visualViewport?.addEventListener("resize", schedule);
+    return () => {
+      if (timer2) clearTimeout(timer2);
+      window.removeEventListener("resize", schedule);
+      window.removeEventListener("orientationchange", schedule);
+      window.visualViewport?.removeEventListener("resize", schedule);
+    };
+  }, [ref, property, enabled]);
+}
 const FALLBACK_PANELS = [{
   key: "all-items",
   title: "All items",
@@ -10687,6 +10737,7 @@ function HomeShowcase() {
   const panels = useSlides();
   const showcaseRef = useRef(null);
   useTopOffset(showcaseRef, "--showcase-top");
+  useViewportHeight(showcaseRef, "--showcase-vh");
   return jsx(ShopSurface, {
     tone: "dark",
     children: jsxs("div", {

package/dist/standalone/storefront.mjs

@@ -5410,6 +5410,7 @@ const styles$M = {
   surface: surface$1,
   fill
 };
+const SETTLE_MS$1 = 150;
 function offsetFromViewportTop(el) {
   let top = el.getBoundingClientRect().top;
   for (let node = el.parentElement; node; node = node.parentElement) {
@@ -5423,17 +5424,30 @@ function useTopOffset(ref, property, enabled = true) {
   useEffect(() => {
     const el = ref.current;
     if (!el || !enabled) return;
+    let timer2;
     const measure = () => {
       el.style.setProperty(property, `${offsetFromViewportTop(el)}px`);
     };
+    const settle = () => {
+      if (timer2) clearTimeout(timer2);
+      timer2 = setTimeout(measure, SETTLE_MS$1);
+    };
     measure();
     window.addEventListener("resize", measure);
     window.addEventListener("orientationchange", measure);
+    document.addEventListener("scroll", settle, {
+      capture: true,
+      passive: true
+    });
     const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
     if (observer && el.parentElement) observer.observe(el.parentElement);
     return () => {
+      if (timer2) clearTimeout(timer2);
       window.removeEventListener("resize", measure);
       window.removeEventListener("orientationchange", measure);
+      document.removeEventListener("scroll", settle, {
+        capture: true
+      });
       observer?.disconnect();
     };
   }, [ref, property, enabled]);
@@ -10545,24 +10559,24 @@ function ProductView({ sku, initialData, showRecommendations = true, onNotFound
   }
   return unavailable;
 }
-const showcase = "_showcase_1sarz_31";
-const panel = "_panel_1sarz_50";
-const image = "_image_1sarz_60";
-const heroImageBox = "_heroImageBox_1sarz_108";
-const hero = "_hero_1sarz_108";
-const heroContent = "_heroContent_1sarz_179";
-const heroText = "_heroText_1sarz_196";
-const logo = "_logo_1sarz_205";
-const heroTitle = "_heroTitle_1sarz_225";
-const heroSub = "_heroSub_1sarz_249";
-const swipe = "_swipe_1sarz_262";
-const swipeLabel = "_swipeLabel_1sarz_270";
-const chevron$1 = "_chevron_1sarz_276";
-const overlay$1 = "_overlay_1sarz_293";
-const copy = "_copy_1sarz_304";
-const title$2 = "_title_1sarz_309";
-const subtitle$1 = "_subtitle_1sarz_316";
-const cta = "_cta_1sarz_322";
+const showcase = "_showcase_12z2a_40";
+const panel = "_panel_12z2a_59";
+const image = "_image_12z2a_69";
+const heroImageBox = "_heroImageBox_12z2a_117";
+const hero = "_hero_12z2a_117";
+const heroContent = "_heroContent_12z2a_188";
+const heroText = "_heroText_12z2a_205";
+const logo = "_logo_12z2a_214";
+const heroTitle = "_heroTitle_12z2a_234";
+const heroSub = "_heroSub_12z2a_258";
+const swipe = "_swipe_12z2a_271";
+const swipeLabel = "_swipeLabel_12z2a_279";
+const chevron$1 = "_chevron_12z2a_285";
+const overlay$1 = "_overlay_12z2a_302";
+const copy = "_copy_12z2a_313";
+const title$2 = "_title_12z2a_318";
+const subtitle$1 = "_subtitle_12z2a_325";
+const cta = "_cta_12z2a_331";
 const styles$2 = {
   showcase,
   panel,
@@ -10583,6 +10597,42 @@ const styles$2 = {
   subtitle: subtitle$1,
   cta
 };
+const SETTLE_MS = 250;
+function useViewportHeight(ref, property, enabled = true) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+    let timer2;
+    const read = () => Math.round(window.visualViewport?.height ?? window.innerHeight);
+    const apply = () => {
+      const height = read();
+      if (height > 0) el.style.setProperty(property, `${height}px`);
+    };
+    const applySettled = () => {
+      const previous = el.clientHeight;
+      const index = previous > 0 ? Math.round(el.scrollTop / previous) : 0;
+      apply();
+      if (el.clientHeight > 0) el.scrollTo({
+        top: index * el.clientHeight,
+        behavior: "auto"
+      });
+    };
+    const schedule = () => {
+      if (timer2) clearTimeout(timer2);
+      timer2 = setTimeout(applySettled, SETTLE_MS);
+    };
+    apply();
+    window.addEventListener("resize", schedule);
+    window.addEventListener("orientationchange", schedule);
+    window.visualViewport?.addEventListener("resize", schedule);
+    return () => {
+      if (timer2) clearTimeout(timer2);
+      window.removeEventListener("resize", schedule);
+      window.removeEventListener("orientationchange", schedule);
+      window.visualViewport?.removeEventListener("resize", schedule);
+    };
+  }, [ref, property, enabled]);
+}
 const FALLBACK_PANELS = [{
   key: "all-items",
   title: "All items",
@@ -10687,6 +10737,7 @@ function HomeShowcase() {
   const panels = useSlides();
   const showcaseRef = useRef(null);
   useTopOffset(showcaseRef, "--showcase-top");
+  useViewportHeight(showcaseRef, "--showcase-vh");
   return jsx(ShopSurface, {
     tone: "dark",
     children: jsxs("div", {

package/dist/standalone/styles.css

@@ -3384,8 +3384,8 @@
   column-gap: var(--space-12);
   row-gap: var(--space-24);
 }
-._showcase_1sarz_31 {
-  height: calc(100svh - var(--showcase-top, 0px));
+._showcase_12z2a_40 {
+  height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
   overflow-y: auto;
   scroll-snap-type: y mandatory;
   overscroll-behavior-y: contain;
@@ -3393,22 +3393,22 @@
   background: #080e12;
   scrollbar-width: none;
 }
-._showcase_1sarz_31::-webkit-scrollbar {
+._showcase_12z2a_40::-webkit-scrollbar {
   display: none;
 }
-._panel_1sarz_50 {
+._panel_12z2a_59 {
   position: relative;
-  height: calc(100svh - var(--showcase-top, 0px));
+  height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overflow: hidden;
   background: #080e12;
 }
-._image_1sarz_60 {
+._image_12z2a_69 {
   object-fit: cover;
   object-position: center;
 }
-._heroImageBox_1sarz_108 {
+._heroImageBox_12z2a_117 {
   position: absolute;
   top: 31px;
   left: 0;
@@ -3416,7 +3416,7 @@
   aspect-ratio: 750 / 1348;
   overflow: hidden;
 }
-._hero_1sarz_108::after {
+._hero_12z2a_117::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3431,10 +3431,10 @@
       rgba(8, 14, 18, 1) 90%);
   pointer-events: none;
 }
-._hero_1sarz_108 ._image_1sarz_60 {
+._hero_12z2a_117 ._image_12z2a_69 {
   object-position: top;
 }
-._hero_1sarz_108 ._heroContent_1sarz_179 {
+._hero_12z2a_117 ._heroContent_12z2a_188 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -3445,7 +3445,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_1sarz_196 {
+._heroText_12z2a_205 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3453,11 +3453,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_1sarz_196 ._logo_1sarz_205 {
+._heroText_12z2a_205 ._logo_12z2a_214 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_1sarz_225 {
+._heroTitle_12z2a_234 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3472,14 +3472,14 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_1sarz_249 {
+._heroSub_12z2a_258 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_1sarz_262 {
+._swipe_12z2a_271 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3487,19 +3487,19 @@
   padding: 8px 0;
   background: #080e12;
 }
-._swipeLabel_1sarz_270 {
+._swipeLabel_12z2a_279 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_1sarz_276 {
+._chevron_12z2a_285 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_1sarz_1 1.8s ease-in-out infinite;
+  animation: _bob_12z2a_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_1sarz_1 {
+@keyframes _bob_12z2a_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3507,7 +3507,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_1sarz_293 {
+._overlay_12z2a_302 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3518,25 +3518,25 @@
   align-items: flex-start;
   padding: 0 24px 24px;
 }
-._copy_1sarz_304 {
+._copy_12z2a_313 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_1sarz_309 {
+._title_12z2a_318 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_1sarz_316 {
+._subtitle_12z2a_325 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_1sarz_322 {
+._cta_12z2a_331 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3550,15 +3550,15 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_1sarz_322::after {
+._cta_12z2a_331::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_1sarz_322:active {
+._cta_12z2a_331:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_1sarz_322:focus-visible {
+._cta_12z2a_331:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }

package/dist/styles.css

@@ -3384,8 +3384,8 @@
   column-gap: var(--space-12);
   row-gap: var(--space-24);
 }
-._showcase_1sarz_31 {
-  height: calc(100svh - var(--showcase-top, 0px));
+._showcase_12z2a_40 {
+  height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
   overflow-y: auto;
   scroll-snap-type: y mandatory;
   overscroll-behavior-y: contain;
@@ -3393,22 +3393,22 @@
   background: #080e12;
   scrollbar-width: none;
 }
-._showcase_1sarz_31::-webkit-scrollbar {
+._showcase_12z2a_40::-webkit-scrollbar {
   display: none;
 }
-._panel_1sarz_50 {
+._panel_12z2a_59 {
   position: relative;
-  height: calc(100svh - var(--showcase-top, 0px));
+  height: calc(var(--showcase-vh, 100svh) - var(--showcase-top, 0px));
   scroll-snap-align: start;
   scroll-snap-stop: always;
   overflow: hidden;
   background: #080e12;
 }
-._image_1sarz_60 {
+._image_12z2a_69 {
   object-fit: cover;
   object-position: center;
 }
-._heroImageBox_1sarz_108 {
+._heroImageBox_12z2a_117 {
   position: absolute;
   top: 31px;
   left: 0;
@@ -3416,7 +3416,7 @@
   aspect-ratio: 750 / 1348;
   overflow: hidden;
 }
-._hero_1sarz_108::after {
+._hero_12z2a_117::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3431,10 +3431,10 @@
       rgba(8, 14, 18, 1) 90%);
   pointer-events: none;
 }
-._hero_1sarz_108 ._image_1sarz_60 {
+._hero_12z2a_117 ._image_12z2a_69 {
   object-position: top;
 }
-._hero_1sarz_108 ._heroContent_1sarz_179 {
+._hero_12z2a_117 ._heroContent_12z2a_188 {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -3445,7 +3445,7 @@
   gap: 24px;
   align-items: stretch;
 }
-._heroText_1sarz_196 {
+._heroText_12z2a_205 {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -3453,11 +3453,11 @@
   padding: 0 24px;
   text-align: center;
 }
-._heroText_1sarz_196 ._logo_1sarz_205 {
+._heroText_12z2a_205 ._logo_12z2a_214 {
   width: 48px;
   height: 48px;
 }
-._heroTitle_1sarz_225 {
+._heroTitle_12z2a_234 {
   width: 100%;
   margin: 0;
   font-family:
@@ -3472,14 +3472,14 @@
   letter-spacing: -1.12px;
   color: #f9fafa;
 }
-._heroSub_1sarz_249 {
+._heroSub_12z2a_258 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
   max-width: 327px;
 }
-._swipe_1sarz_262 {
+._swipe_12z2a_271 {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3487,19 +3487,19 @@
   padding: 8px 0;
   background: #080e12;
 }
-._swipeLabel_1sarz_270 {
+._swipeLabel_12z2a_279 {
   margin: 0;
   font-size: 14px;
   line-height: 1;
   color: rgba(255, 255, 255, 0.54);
 }
-._chevron_1sarz_276 {
+._chevron_12z2a_285 {
   width: 24px;
   height: 24px;
   color: rgba(255, 255, 255, 0.54);
-  animation: _bob_1sarz_1 1.8s ease-in-out infinite;
+  animation: _bob_12z2a_1 1.8s ease-in-out infinite;
 }
-@keyframes _bob_1sarz_1 {
+@keyframes _bob_12z2a_1 {
   0%, 100% {
     transform: translateY(0);
   }
@@ -3507,7 +3507,7 @@
     transform: translateY(4px);
   }
 }
-._overlay_1sarz_293 {
+._overlay_12z2a_302 {
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -3518,25 +3518,25 @@
   align-items: flex-start;
   padding: 0 24px 24px;
 }
-._copy_1sarz_304 {
+._copy_12z2a_313 {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-._title_1sarz_309 {
+._title_12z2a_318 {
   margin: 0;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
   color: #f9fafa;
 }
-._subtitle_1sarz_316 {
+._subtitle_12z2a_325 {
   margin: 0;
   font-size: 16px;
   line-height: 1.55;
   color: #f9fafa;
 }
-._cta_1sarz_322 {
+._cta_12z2a_331 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -3550,15 +3550,15 @@
   font-weight: 700;
   text-decoration: none;
 }
-._cta_1sarz_322::after {
+._cta_12z2a_331::after {
   content: "";
   position: absolute;
   inset: 0;
 }
-._cta_1sarz_322:active {
+._cta_12z2a_331:active {
   background: rgba(249, 250, 250, 0.12);
 }
-._cta_1sarz_322:focus-visible {
+._cta_12z2a_331:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.19.3",
+  "version": "0.19.5",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "type": "module",
   "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
@@ -20,18 +23,34 @@
     "dist",
     "!dist/**/*.map"
   ],
-  "sideEffects": [
-    "*.css"
-  ],
+  "scripts": {
+    "build": "pnpm build:package && pnpm build:standalone",
+    "build:package": "vite build",
+    "build:standalone": "BUILD_TARGET=standalone vite build",
+    "typecheck": "tsc --noEmit",
+    "build:partner": "PARTNER_DROP=1 pnpm build && pnpm pack"
+  },
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.58.12",
+    "@raqmix/contracts": "^2.0.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "esbuild": "^0.28.1",
+    "terser": "^5.50.0",
+    "typescript": "^5.7.3",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^5.0.3"
+  },
+  "module": "./dist/index.mjs",
+  "sideEffects": [
+    "*.css"
+  ],
   "dependencies": {
     "zod": "^3.24.1"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
   }
 }