@blazejkustra/react-native-onboarding 0.1.1

package/lib/module/spill-onboarding/components/OnboardingImageContainer.js

@@ -0,0 +1,117 @@
+"use strict";
+
+import { useMemo } from 'react';
+import { Image, Platform, StyleSheet, useWindowDimensions } from 'react-native';
+import Animated, { interpolate, useDerivedValue, useAnimatedStyle, withTiming, Easing, useSharedValue } from 'react-native-reanimated';
+import { useTheme } from "../../utils/ThemeContext.js";
+import useMeasureHeight from "../hooks/useMeasureHeight.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function OnboardingImageContainer({
+  currentStep,
+  currentStepImage,
+  position,
+  animationDuration,
+  backgroundSpillProgress,
+  introPanel,
+  stepPanel,
+  screenHeight,
+  background
+}) {
+  const {
+    theme
+  } = useTheme();
+  const image = useMeasureHeight();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const extraPadding = Platform.OS === 'web' ? 16 : 0;
+  const {
+    width: screenWidth
+  } = useWindowDimensions();
+
+  // bottom panel height (intro or step)
+  const bottomPanelHeight = (currentStep ? stepPanel : introPanel).height || 0;
+
+  /**
+   * When 0 -> no spill; when 1 -> fully spilled by bottomPanelHeight
+   */
+  const backgroundSpillDistance = useDerivedValue(() => interpolate(backgroundSpillProgress.value, [0, 1], [0, bottomPanelHeight]));
+  const imageWrapperHeight = useDerivedValue(() => screenHeight - bottomPanelHeight + backgroundSpillDistance.value);
+  const imageWrapperAnimation = useAnimatedStyle(() => ({
+    height: imageWrapperHeight.value
+  }));
+  const imageTargetY = useDerivedValue(() => {
+    const topSafe = theme.insets.top + extraPadding + 16;
+    if (position === 'top') {
+      return topSafe;
+    }
+    const imageH = image.height || 0;
+    const modalTop = screenHeight - bottomPanelHeight - 16;
+    const yBottom = modalTop - imageH;
+    const shouldClampTop = !currentStep;
+    return shouldClampTop ? Math.max(yBottom, topSafe) : yBottom;
+  });
+  const hasMounted = useSharedValue(false);
+  const imageAnimation = useAnimatedStyle(() => {
+    const translateY = withTiming(imageTargetY.value, {
+      duration: hasMounted.value ? animationDuration : 0,
+      easing: Easing.out(Easing.cubic)
+    }, () => hasMounted.value = true);
+    const sideEdges = Math.max(32 + 24 - backgroundSpillDistance.value, 0);
+    return {
+      transform: [{
+        translateY
+      }],
+      maxWidth: screenWidth - sideEdges
+    };
+  }, [animationDuration]);
+  const backgroundAnimation = useAnimatedStyle(() => {
+    const topEdge = Math.max(theme.insets.top + extraPadding - backgroundSpillDistance.value, 0);
+    const sideEdge = Math.max(16 - backgroundSpillDistance.value, 0);
+    return {
+      position: 'absolute',
+      top: topEdge,
+      left: sideEdge,
+      right: sideEdge,
+      bottom: screenHeight - imageWrapperHeight.value,
+      borderRadius: Math.max(12 - backgroundSpillDistance.value, 0)
+    };
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [background ? /*#__PURE__*/_jsx(Animated.View, {
+      style: backgroundAnimation,
+      children: background()
+    }) : /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.colorBg, backgroundAnimation]
+    }), currentStepImage && /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.imageWrapper, imageWrapperAnimation],
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.image, imageAnimation],
+        ref: image.ref,
+        children: /*#__PURE__*/_jsx(Image, {
+          source: currentStepImage,
+          resizeMode: "contain",
+          fadeDuration: 0
+        })
+      })
+    })]
+  });
+}
+export default OnboardingImageContainer;
+const createStyles = theme => StyleSheet.create({
+  colorBg: {
+    backgroundColor: theme.bg.primary,
+    overflow: 'hidden'
+  },
+  imageWrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    overflow: 'hidden'
+  },
+  image: {
+    alignSelf: 'center',
+    alignItems: 'center',
+    overflow: 'hidden'
+  }
+});
+//# sourceMappingURL=OnboardingImageContainer.js.map

package/lib/module/spill-onboarding/components/OnboardingImageContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","Image","Platform","StyleSheet","useWindowDimensions","Animated","interpolate","useDerivedValue","useAnimatedStyle","withTiming","Easing","useSharedValue","useTheme","useMeasureHeight","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","OnboardingImageContainer","currentStep","currentStepImage","position","animationDuration","backgroundSpillProgress","introPanel","stepPanel","screenHeight","background","theme","image","styles","createStyles","extraPadding","OS","width","screenWidth","bottomPanelHeight","height","backgroundSpillDistance","value","imageWrapperHeight","imageWrapperAnimation","imageTargetY","topSafe","insets","top","imageH","modalTop","yBottom","shouldClampTop","Math","max","hasMounted","imageAnimation","translateY","duration","easing","out","cubic","sideEdges","transform","maxWidth","backgroundAnimation","topEdge","sideEdge","left","right","bottom","borderRadius","children","View","style","colorBg","imageWrapper","ref","source","resizeMode","fadeDuration","create","backgroundColor","bg","primary","overflow","alignSelf","alignItems"],"sourceRoot":"../../../../src","sources":["spill-onboarding/components/OnboardingImageContainer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/spill-onboarding/components/OnboardingIntroPanel.js

@@ -0,0 +1,97 @@
+"use strict";
+
+import { useMemo } from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../utils/ThemeContext.js";
+import PrimaryButton from "../buttons/PrimaryButton.js";
+import { fontSizes, lineHeights } from "../../utils/fontStyles.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function OnboardingIntroPanel({
+  onPressStart,
+  title,
+  subtitle,
+  button,
+  image
+}) {
+  const {
+    theme
+  } = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const renderTitle = () => {
+    if (!title) {
+      return undefined;
+    }
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        style: [styles.text, styles.line1, styles.titleText],
+        children: title
+      });
+    }
+    return title;
+  };
+  const renderSubtitle = () => {
+    if (!subtitle) {
+      return undefined;
+    }
+    if (typeof subtitle === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        style: [styles.text, styles.line2, styles.subtitleText],
+        children: subtitle
+      });
+    }
+    return subtitle;
+  };
+  const renderButton = () => {
+    if (typeof button === 'string') {
+      return /*#__PURE__*/_jsx(PrimaryButton, {
+        text: button,
+        onPress: onPressStart
+      });
+    }
+    return button({
+      onPressStart
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [typeof image === 'function' ? image() : image && /*#__PURE__*/_jsx(Image, {
+      source: image,
+      style: styles.image
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.textContainer,
+      children: [renderTitle(), renderSubtitle()]
+    }), renderButton()]
+  });
+}
+export default OnboardingIntroPanel;
+const createStyles = theme => StyleSheet.create({
+  container: {
+    marginTop: 16
+  },
+  image: {
+    alignSelf: 'center'
+  },
+  textContainer: {
+    alignItems: 'center',
+    marginBottom: 48
+  },
+  text: {
+    fontSize: fontSizes.xxl,
+    lineHeight: lineHeights.xxl,
+    textAlign: 'center'
+  },
+  line1: {
+    marginTop: 20,
+    color: theme.text.primary
+  },
+  line2: {
+    color: theme.bg.primary
+  },
+  titleText: {
+    fontFamily: theme.fonts.introTitle
+  },
+  subtitleText: {
+    fontFamily: theme.fonts.introSubtitle
+  }
+});
+//# sourceMappingURL=OnboardingIntroPanel.js.map

package/lib/module/spill-onboarding/components/OnboardingIntroPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","Image","StyleSheet","Text","View","useTheme","PrimaryButton","fontSizes","lineHeights","jsx","_jsx","jsxs","_jsxs","OnboardingIntroPanel","onPressStart","title","subtitle","button","image","theme","styles","createStyles","renderTitle","undefined","style","text","line1","titleText","children","renderSubtitle","line2","subtitleText","renderButton","onPress","container","source","textContainer","create","marginTop","alignSelf","alignItems","marginBottom","fontSize","xxl","lineHeight","textAlign","color","primary","bg","fontFamily","fonts","introTitle","introSubtitle"],"sourceRoot":"../../../../src","sources":["spill-onboarding/components/OnboardingIntroPanel.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/spill-onboarding/components/OnboardingModal.js

@@ -0,0 +1,69 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View, StyleSheet, Modal, TouchableOpacity, useWindowDimensions } from 'react-native';
+import { useTheme } from "../../utils/ThemeContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function OnboardingModal({
+  onSkip,
+  children
+}) {
+  const {
+    theme
+  } = useTheme();
+  const {
+    height,
+    width
+  } = useWindowDimensions();
+  const styles = useMemo(() => createStyles(theme, height, width), [height, width, theme]);
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: true,
+    transparent: true,
+    onRequestClose: onSkip,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.webOverlay,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.webBackdrop,
+        activeOpacity: 1,
+        onPress: onSkip
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.webModal,
+        children: children
+      })]
+    })
+  });
+}
+const createStyles = (theme, height, width) => StyleSheet.create({
+  webOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  webBackdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  webModal: {
+    width: Math.min(width - 32, 500),
+    height: Math.min(height - 32, 800),
+    borderRadius: 28,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 10
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 20,
+    overflow: 'hidden',
+    backgroundColor: theme.bg.secondary
+  },
+  webContent: {
+    flex: 1,
+    paddingTop: 16
+  }
+});
+//# sourceMappingURL=OnboardingModal.js.map

package/lib/module/spill-onboarding/components/OnboardingModal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","View","StyleSheet","Modal","TouchableOpacity","useWindowDimensions","useTheme","jsx","_jsx","jsxs","_jsxs","OnboardingModal","onSkip","children","theme","height","width","styles","createStyles","visible","transparent","onRequestClose","style","webOverlay","webBackdrop","activeOpacity","onPress","webModal","create","flex","backgroundColor","justifyContent","alignItems","position","top","left","right","bottom","Math","min","borderRadius","shadowColor","shadowOffset","shadowOpacity","shadowRadius","overflow","bg","secondary","webContent","paddingTop"],"sourceRoot":"../../../../src","sources":["spill-onboarding/components/OnboardingModal.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SACEC,IAAI,EACJC,UAAU,EACVC,KAAK,EACLC,gBAAgB,EAChBC,mBAAmB,QACd,cAAc;AACrB,SAASC,QAAQ,QAAQ,6BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQpD,eAAe,SAASC,eAAeA,CAAC;EACtCC,MAAM;EACNC;AACoB,CAAC,EAAE;EACvB,MAAM;IAAEC;EAAM,CAAC,GAAGR,QAAQ,CAAC,CAAC;EAC5B,MAAM;IAAES,MAAM;IAAEC;EAAM,CAAC,GAAGX,mBAAmB,CAAC,CAAC;EAC/C,MAAMY,MAAM,GAAGjB,OAAO,CACpB,MAAMkB,YAAY,CAACJ,KAAK,EAAEC,MAAM,EAAEC,KAAK,CAAC,EACxC,CAACD,MAAM,EAAEC,KAAK,EAAEF,KAAK,CACvB,CAAC;EAED,oBACEN,IAAA,CAACL,KAAK;IAACgB,OAAO;IAACC,WAAW;IAACC,cAAc,EAAET,MAAO;IAAAC,QAAA,eAChDH,KAAA,CAACT,IAAI;MAACqB,KAAK,EAAEL,MAAM,CAACM,UAAW;MAAAV,QAAA,gBAC7BL,IAAA,CAACJ,gBAAgB;QACfkB,KAAK,EAAEL,MAAM,CAACO,WAAY;QAC1BC,aAAa,EAAE,CAAE;QACjBC,OAAO,EAAEd;MAAO,CACjB,CAAC,eACFJ,IAAA,CAACP,IAAI;QAACqB,KAAK,EAAEL,MAAM,CAACU,QAAS;QAAAd,QAAA,EAAEA;MAAQ,CAAO,CAAC;IAAA,CAC3C;EAAC,CACF,CAAC;AAEZ;AAEA,MAAMK,YAAY,GAAGA,CAACJ,KAAY,EAAEC,MAAc,EAAEC,KAAa,KAC/Dd,UAAU,CAAC0B,MAAM,CAAC;EAChBL,UAAU,EAAE;IACVM,IAAI,EAAE,CAAC;IACPC,eAAe,EAAE,oBAAoB;IACrCC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd,CAAC;EACDR,WAAW,EAAE;IACXS,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACV,CAAC;EACDV,QAAQ,EAAE;IACRX,KAAK,EAAEsB,IAAI,CAACC,GAAG,CAACvB,KAAK,GAAG,EAAE,EAAE,GAAG,CAAC;IAChCD,MAAM,EAAEuB,IAAI,CAACC,GAAG,CAACxB,MAAM,GAAG,EAAE,EAAE,GAAG,CAAC;IAClCyB,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAE,MAAM;IACnBC,YAAY,EAAE;MACZ1B,KAAK,EAAE,CAAC;MACRD,MAAM,EAAE;IACV,CAAC;IACD4B,aAAa,EAAE,IAAI;IACnBC,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE,QAAQ;IAClBf,eAAe,EAAEhB,KAAK,CAACgC,EAAE,CAACC;EAC5B,CAAC;EACDC,UAAU,EAAE;IACVnB,IAAI,EAAE,CAAC;IACPoB,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/spill-onboarding/components/OnboardingStepContainer.js

@@ -0,0 +1,60 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import Reanimated, { FadeIn, FadeInDown, FadeOut, FadeOutDown } from 'react-native-reanimated';
+import SkipButton from "../buttons/SkipButton.js";
+import { useTheme } from "../../utils/ThemeContext.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function OnboardingStepContainer({
+  currentStep,
+  showCloseButton,
+  animationDuration,
+  onSkip,
+  ref,
+  renderStepContent,
+  skipButton
+}) {
+  const {
+    theme
+  } = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  if (!currentStep) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showCloseButton && onSkip && /*#__PURE__*/_jsx(Reanimated.View, {
+      entering: FadeIn.duration(animationDuration),
+      exiting: FadeOut.duration(animationDuration),
+      style: styles.close,
+      children: skipButton ? skipButton({
+        onPress: onSkip
+      }) : /*#__PURE__*/_jsx(SkipButton, {
+        onPress: onSkip
+      })
+    }), /*#__PURE__*/_jsx(Reanimated.View, {
+      ref: ref,
+      entering: FadeInDown.duration(animationDuration),
+      exiting: FadeOutDown.duration(animationDuration),
+      style: styles.bottomPanel,
+      children: renderStepContent()
+    })]
+  });
+}
+export default OnboardingStepContainer;
+const createStyles = theme => StyleSheet.create({
+  bottomPanel: {
+    paddingHorizontal: 16,
+    paddingBottom: 16 + theme.insets.bottom,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  close: {
+    position: 'absolute',
+    top: theme.insets.top + 16,
+    right: 16
+  }
+});
+//# sourceMappingURL=OnboardingStepContainer.js.map

package/lib/module/spill-onboarding/components/OnboardingStepContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","StyleSheet","Reanimated","FadeIn","FadeInDown","FadeOut","FadeOutDown","SkipButton","useTheme","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","OnboardingStepContainer","currentStep","showCloseButton","animationDuration","onSkip","ref","renderStepContent","skipButton","theme","styles","createStyles","children","View","entering","duration","exiting","style","close","onPress","bottomPanel","create","paddingHorizontal","paddingBottom","insets","bottom","position","left","right","top"],"sourceRoot":"../../../../src","sources":["spill-onboarding/components/OnboardingStepContainer.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAwB,OAAO;AACtD,SAASC,UAAU,QAAQ,cAAc;AACzC,OAAOC,UAAU,IACfC,MAAM,EACNC,UAAU,EACVC,OAAO,EACPC,WAAW,QACN,yBAAyB;AAChC,OAAOC,UAAU,MAAM,0BAAuB;AAC9C,SAASC,QAAQ,QAAQ,6BAA0B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAcpD,SAASC,uBAAuBA,CAAC;EAC/BC,WAAW;EACXC,eAAe;EACfC,iBAAiB;EACjBC,MAAM;EACNC,GAAG;EACHC,iBAAiB;EACjBC;AAC4B,CAAC,EAAE;EAC/B,MAAM;IAAEC;EAAM,CAAC,GAAGf,QAAQ,CAAC,CAAC;EAC5B,MAAMgB,MAAM,GAAGxB,OAAO,CAAC,MAAMyB,YAAY,CAACF,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAE1D,IAAI,CAACP,WAAW,EAAE;IAChB,OAAO,IAAI;EACb;EAEA,oBACEF,KAAA,CAAAF,SAAA;IAAAc,QAAA,GACGT,eAAe,IAAIE,MAAM,iBACxBT,IAAA,CAACR,UAAU,CAACyB,IAAI;MACdC,QAAQ,EAAEzB,MAAM,CAAC0B,QAAQ,CAACX,iBAAiB,CAAE;MAC7CY,OAAO,EAAEzB,OAAO,CAACwB,QAAQ,CAACX,iBAAiB,CAAE;MAC7Ca,KAAK,EAAEP,MAAM,CAACQ,KAAM;MAAAN,QAAA,EAEnBJ,UAAU,GACTA,UAAU,CAAC;QAAEW,OAAO,EAAEd;MAAO,CAAC,CAAC,gBAE/BT,IAAA,CAACH,UAAU;QAAC0B,OAAO,EAAEd;MAAO,CAAE;IAC/B,CACc,CAClB,eAEDT,IAAA,CAACR,UAAU,CAACyB,IAAI;MACdP,GAAG,EAAEA,GAAI;MACTQ,QAAQ,EAAExB,UAAU,CAACyB,QAAQ,CAACX,iBAAiB,CAAE;MACjDY,OAAO,EAAExB,WAAW,CAACuB,QAAQ,CAACX,iBAAiB,CAAE;MACjDa,KAAK,EAAEP,MAAM,CAACU,WAAY;MAAAR,QAAA,EAEzBL,iBAAiB,CAAC;IAAC,CACL,CAAC;EAAA,CAClB,CAAC;AAEP;AAEA,eAAeN,uBAAuB;AAEtC,MAAMU,YAAY,GAAIF,KAAY,IAChCtB,UAAU,CAACkC,MAAM,CAAC;EAChBD,WAAW,EAAE;IACXE,iBAAiB,EAAE,EAAE;IACrBC,aAAa,EAAE,EAAE,GAAGd,KAAK,CAACe,MAAM,CAACC,MAAM;IACvCC,QAAQ,EAAE,UAAU;IACpBD,MAAM,EAAE,CAAC;IACTE,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE;EACT,CAAC;EACDV,KAAK,EAAE;IACLQ,QAAQ,EAAE,UAAU;IACpBG,GAAG,EAAEpB,KAAK,CAACe,MAAM,CAACK,GAAG,GAAG,EAAE;IAC1BD,KAAK,EAAE;EACT;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/spill-onboarding/components/OnboardingStepPanel.js

@@ -0,0 +1,122 @@
+"use strict";
+
+import { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../utils/ThemeContext.js";
+import { fontSizes, lineHeights } from "../../utils/fontStyles.js";
+import PrimaryButton from "../buttons/PrimaryButton.js";
+import SecondaryButton from "../buttons/SecondaryButton.js";
+import ArrowLeftIcon from "../icons/ArrowLeftIcon.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function OnboardingStepPanel({
+  label,
+  title,
+  description,
+  buttonLabel,
+  onBackPress,
+  onNextPress,
+  buttonPrimary,
+  showBackButton = true
+}) {
+  const {
+    theme
+  } = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.textContainer,
+      children: [label && /*#__PURE__*/_jsx(View, {
+        style: styles.labelBadge,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.labelText,
+          children: label
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.title,
+        children: title
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.description,
+        children: description
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.buttonRow,
+      children: [onBackPress && showBackButton && /*#__PURE__*/_jsx(View, {
+        style: styles.backButton,
+        children: /*#__PURE__*/_jsx(SecondaryButton, {
+          text: "",
+          onPress: onBackPress,
+          icon: /*#__PURE__*/_jsx(ArrowLeftIcon, {
+            color: theme.text.primary
+          })
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.nextButton,
+        children: buttonPrimary ? /*#__PURE__*/_jsx(PrimaryButton, {
+          text: buttonLabel,
+          onPress: onNextPress
+        }) : /*#__PURE__*/_jsx(SecondaryButton, {
+          text: buttonLabel,
+          onPress: onNextPress,
+          textStyle: styles.nextButtonText
+        })
+      })]
+    })]
+  });
+}
+export default OnboardingStepPanel;
+const createStyles = theme => StyleSheet.create({
+  container: {
+    backgroundColor: theme.bg.secondary,
+    padding: 16,
+    borderRadius: 18,
+    gap: 24
+  },
+  textContainer: {
+    alignItems: 'center',
+    gap: 16
+  },
+  labelBadge: {
+    backgroundColor: theme.bg.label,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 999
+  },
+  labelText: {
+    fontFamily: theme.fonts.stepLabel,
+    fontSize: fontSizes.xs,
+    lineHeight: lineHeights.xs,
+    textAlign: 'center',
+    color: theme.text.primary
+  },
+  title: {
+    fontFamily: theme.fonts.stepTitle,
+    fontSize: fontSizes.lg,
+    lineHeight: lineHeights.lg,
+    textAlign: 'center',
+    color: theme.text.primary
+  },
+  description: {
+    fontFamily: theme.fonts.stepDescription,
+    fontSize: fontSizes.md,
+    lineHeight: lineHeights.md,
+    textAlign: 'center',
+    color: theme.text.secondary
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    gap: 8
+  },
+  backButton: {
+    width: 48
+  },
+  nextButton: {
+    flex: 1
+  },
+  nextButtonText: {
+    fontFamily: theme.fonts.stepButton,
+    fontSize: fontSizes.md,
+    lineHeight: lineHeights.md
+  }
+});
+//# sourceMappingURL=OnboardingStepPanel.js.map

package/lib/module/spill-onboarding/components/OnboardingStepPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","StyleSheet","Text","View","useTheme","fontSizes","lineHeights","PrimaryButton","SecondaryButton","ArrowLeftIcon","jsx","_jsx","jsxs","_jsxs","OnboardingStepPanel","label","title","description","buttonLabel","onBackPress","onNextPress","buttonPrimary","showBackButton","theme","styles","createStyles","style","container","children","textContainer","labelBadge","labelText","buttonRow","backButton","text","onPress","icon","color","primary","nextButton","textStyle","nextButtonText","create","backgroundColor","bg","secondary","padding","borderRadius","gap","alignItems","paddingHorizontal","paddingVertical","fontFamily","fonts","stepLabel","fontSize","xs","lineHeight","textAlign","stepTitle","lg","stepDescription","md","flexDirection","width","flex","stepButton"],"sourceRoot":"../../../../src","sources":["spill-onboarding/components/OnboardingStepPanel.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/spill-onboarding/hooks/useMeasureHeight.js

@@ -0,0 +1,18 @@
+"use strict";
+
+import { useLayoutEffect, useRef, useState } from 'react';
+function useMeasureHeight() {
+  const ref = useRef(null);
+  const [height, setHeight] = useState(0);
+  useLayoutEffect(() => {
+    ref.current?.measure?.((_, __, ___, viewHeight) => {
+      setHeight(viewHeight);
+    });
+  });
+  return {
+    ref,
+    height
+  };
+}
+export default useMeasureHeight;
+//# sourceMappingURL=useMeasureHeight.js.map

package/lib/module/spill-onboarding/hooks/useMeasureHeight.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useLayoutEffect","useRef","useState","useMeasureHeight","ref","height","setHeight","current","measure","_","__","___","viewHeight"],"sourceRoot":"../../../../src","sources":["spill-onboarding/hooks/useMeasureHeight.ts"],"mappings":";;AAAA,SAASA,eAAe,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAOzD,SAASC,gBAAgBA,CAAA,EAAG;EAC1B,MAAMC,GAAG,GAAGH,MAAM,CAAU,IAAI,CAAC;EACjC,MAAM,CAACI,MAAM,EAAEC,SAAS,CAAC,GAAGJ,QAAQ,CAAC,CAAC,CAAC;EAEvCF,eAAe,CAAC,MAAM;IACpBI,GAAG,CAACG,OAAO,EAAEC,OAAO,GAAG,CAACC,CAAC,EAAEC,EAAE,EAAEC,GAAG,EAAEC,UAAU,KAAK;MACjDN,SAAS,CAACM,UAAU,CAAC;IACvB,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,OAAO;IAAER,GAAG;IAAEC;EAAO,CAAC;AACxB;AAEA,eAAeF,gBAAgB","ignoreList":[]}

package/lib/module/spill-onboarding/icons/ArrowLeftIcon.js

@@ -0,0 +1,57 @@
+"use strict";
+
+import { Text, StyleSheet } from 'react-native';
+import { ExpoImage } from "../adapters/expo-image.js";
+import { ReactNativeSVG, ReactNativeSVGPath } from "../adapters/react-native-svg.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SVG_ARROW_LEFT_STRING = 'M10.7071 5.29289C11.0976 5.68342 11.0976 6.31658 10.7071 6.70711L6.41421 11L20 11C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13L6.41421 13L10.7071 17.2929C11.0976 17.6834 11.0976 18.3166 10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071L3.29289 12.7071C3.10536 12.5196 3 12.2652 3 12C3 11.7348 3.10536 11.4804 3.29289 11.2929L9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289Z';
+export default function ArrowLeftIcon({
+  size = 24,
+  color = '#000'
+}) {
+  // Use expo-image with dynamic SVG string (includes color)
+  if (ExpoImage) {
+    const svgString = `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="${SVG_ARROW_LEFT_STRING}" fill="${color}"/>
+    </svg>`;
+    return /*#__PURE__*/_jsx(ExpoImage, {
+      source: {
+        uri: `data:image/svg+xml;base64,${btoa(svgString)}`
+      },
+      style: {
+        width: size,
+        height: size
+      },
+      contentFit: "contain"
+    });
+  }
+
+  // Use SVG if available
+  if (ReactNativeSVG && ReactNativeSVGPath) {
+    return /*#__PURE__*/_jsx(ReactNativeSVG, {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      children: /*#__PURE__*/_jsx(ReactNativeSVGPath, {
+        d: SVG_ARROW_LEFT_STRING,
+        fill: color
+      })
+    });
+  }
+
+  // Fallback to text arrow
+  return /*#__PURE__*/_jsx(Text, {
+    style: [styles.arrow, {
+      fontSize: size,
+      color
+    }],
+    children: "Go Back"
+  });
+}
+const styles = StyleSheet.create({
+  arrow: {
+    textAlign: 'center'
+  }
+});
+//# sourceMappingURL=ArrowLeftIcon.js.map

package/lib/module/spill-onboarding/icons/ArrowLeftIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Text","StyleSheet","ExpoImage","ReactNativeSVG","ReactNativeSVGPath","jsx","_jsx","SVG_ARROW_LEFT_STRING","ArrowLeftIcon","size","color","svgString","source","uri","btoa","style","width","height","contentFit","viewBox","fill","children","d","styles","arrow","fontSize","create","textAlign"],"sourceRoot":"../../../../src","sources":["spill-onboarding/icons/ArrowLeftIcon.tsx"],"mappings":";;AAAA,SAASA,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,SAAS,QAAQ,2BAAwB;AAClD,SACEC,cAAc,EACdC,kBAAkB,QACb,iCAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOtC,MAAMC,qBAAqB,GACzB,gaAAga;AAEla,eAAe,SAASC,aAAaA,CAAC;EACpCC,IAAI,GAAG,EAAE;EACTC,KAAK,GAAG;AACU,CAAC,EAAE;EACrB;EACA,IAAIR,SAAS,EAAE;IACb,MAAMS,SAAS,GAAG,eAAeF,IAAI,aAAaA,IAAI;AAC1D,yDAAyDF,qBAAqB,WAAWG,KAAK;AAC9F,WAAW;IAEP,oBACEJ,IAAA,CAACJ,SAAS;MACRU,MAAM,EAAE;QAAEC,GAAG,EAAE,6BAA6BC,IAAI,CAACH,SAAS,CAAC;MAAG,CAAE;MAChEI,KAAK,EAAE;QAAEC,KAAK,EAAEP,IAAI;QAAEQ,MAAM,EAAER;MAAK,CAAE;MACrCS,UAAU,EAAC;IAAS,CACrB,CAAC;EAEN;;EAEA;EACA,IAAIf,cAAc,IAAIC,kBAAkB,EAAE;IACxC,oBACEE,IAAA,CAACH,cAAc;MACba,KAAK,EAAEP,IAAK;MACZQ,MAAM,EAAER,IAAK;MACbU,OAAO,EAAC,WAAW;MACnBC,IAAI,EAAC,MAAM;MAAAC,QAAA,eAEXf,IAAA,CAACF,kBAAkB;QAACkB,CAAC,EAAEf,qBAAsB;QAACa,IAAI,EAAEV;MAAM,CAAE;IAAC,CAC/C,CAAC;EAErB;;EAEA;EACA,oBACEJ,IAAA,CAACN,IAAI;IACHe,KAAK,EAAE,CACLQ,MAAM,CAACC,KAAK,EACZ;MACEC,QAAQ,EAAEhB,IAAI;MACdC;IACF,CAAC,CACD;IAAAW,QAAA,EACH;EAED,CAAM,CAAC;AAEX;AAEA,MAAME,MAAM,GAAGtB,UAAU,CAACyB,MAAM,CAAC;EAC/BF,KAAK,EAAE;IACLG,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/spill-onboarding/icons/CloseIcon.js

@@ -0,0 +1,49 @@
+"use strict";
+
+import { View, StyleSheet } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function CloseIcon({
+  size = 24,
+  color = '#000'
+}) {
+  const lineWidth = Math.max(2, size * 0.1);
+  const lineLength = size * 0.7;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, {
+      width: size,
+      height: size
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.line, {
+        width: lineLength,
+        height: lineWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '45deg'
+        }]
+      }]
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.line,
+      // eslint-disable-next-line react-native/no-inline-styles
+      {
+        width: lineLength,
+        height: lineWidth,
+        backgroundColor: color,
+        transform: [{
+          rotate: '-45deg'
+        }],
+        position: 'absolute'
+      }]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  line: {
+    position: 'absolute'
+  }
+});
+//# sourceMappingURL=CloseIcon.js.map

package/lib/module/spill-onboarding/icons/CloseIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","StyleSheet","jsx","_jsx","jsxs","_jsxs","CloseIcon","size","color","lineWidth","Math","max","lineLength","style","styles","container","width","height","children","line","backgroundColor","transform","rotate","position","create","justifyContent","alignItems"],"sourceRoot":"../../../../src","sources":["spill-onboarding/icons/CloseIcon.tsx"],"mappings":";;AAAA,SAASA,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOhD,eAAe,SAASC,SAASA,CAAC;EAChCC,IAAI,GAAG,EAAE;EACTC,KAAK,GAAG;AACM,CAAC,EAAE;EACjB,MAAMC,SAAS,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEJ,IAAI,GAAG,GAAG,CAAC;EACzC,MAAMK,UAAU,GAAGL,IAAI,GAAG,GAAG;EAE7B,oBACEF,KAAA,CAACL,IAAI;IAACa,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAE;MAAEC,KAAK,EAAET,IAAI;MAAEU,MAAM,EAAEV;IAAK,CAAC,CAAE;IAAAW,QAAA,gBAE7Df,IAAA,CAACH,IAAI;MACHa,KAAK,EAAE,CACLC,MAAM,CAACK,IAAI,EACX;QACEH,KAAK,EAAEJ,UAAU;QACjBK,MAAM,EAAER,SAAS;QACjBW,eAAe,EAAEZ,KAAK;QACtBa,SAAS,EAAE,CAAC;UAAEC,MAAM,EAAE;QAAQ,CAAC;MACjC,CAAC;IACD,CACH,CAAC,eAEFnB,IAAA,CAACH,IAAI;MACHa,KAAK,EAAE,CACLC,MAAM,CAACK,IAAI;MACX;MACA;QACEH,KAAK,EAAEJ,UAAU;QACjBK,MAAM,EAAER,SAAS;QACjBW,eAAe,EAAEZ,KAAK;QACtBa,SAAS,EAAE,CAAC;UAAEC,MAAM,EAAE;QAAS,CAAC,CAAC;QACjCC,QAAQ,EAAE;MACZ,CAAC;IACD,CACH,CAAC;EAAA,CACE,CAAC;AAEX;AAEA,MAAMT,MAAM,GAAGb,UAAU,CAACuB,MAAM,CAAC;EAC/BT,SAAS,EAAE;IACTU,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd,CAAC;EACDP,IAAI,EAAE;IACJI,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}