@coorpacademy/components 11.40.20 → 11.40.22-slider.1

package/es/molecule/native-slider/index.native.js

@@ -0,0 +1,151 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useRef, useCallback, useMemo } from 'react';
+import { View, StyleSheet, PanResponder, Animated } from 'react-native';
+const THUMB_SIZE = 28;
+const TRACK_HEIGHT = 4;
+const HIT_SLOP = 20;
+const NativeSlider = props => {
+  const {
+    min,
+    max,
+    value,
+    step = 1,
+    trackColor = '#b3b3b3',
+    activeTrackColor = '#007AFF',
+    thumbColor = '#007AFF',
+    onValueChange,
+    onSlidingStart,
+    onSlidingComplete,
+    style,
+    testID
+  } = props;
+  const trackWidth = useRef(0);
+  const currentValue = useRef(value);
+  const thumbX = useRef(new Animated.Value(0));
+  const activeWidth = useRef(new Animated.Value(0));
+  const clampAndStep = useCallback(raw => {
+    const clamped = Math.min(max, Math.max(min, raw));
+    if (step > 0) {
+      return Math.round((clamped - min) / step) * step + min;
+    }
+    return clamped;
+  }, [min, max, step]);
+  const valueToPosition = useCallback(v => {
+    if (max === min) return 0;
+    return (v - min) / (max - min) * trackWidth.current;
+  }, [min, max]);
+  const positionToValue = useCallback(pos => {
+    if (trackWidth.current === 0) return min;
+    const ratio = pos / trackWidth.current;
+    return ratio * (max - min) + min;
+  }, [min, max]);
+  const updatePosition = useCallback(v => {
+    const pos = valueToPosition(v);
+    thumbX.current.setValue(pos);
+    activeWidth.current.setValue(pos);
+  }, [valueToPosition]);
+  const handleLayout = useCallback(e => {
+    trackWidth.current = e.nativeEvent.layout.width;
+    updatePosition(currentValue.current);
+  }, [updatePosition]);
+  const panResponder = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderGrant: evt => {
+      const touchX = evt.nativeEvent.locationX;
+      const raw = positionToValue(touchX);
+      const stepped = clampAndStep(raw);
+      currentValue.current = stepped;
+      updatePosition(stepped);
+      onSlidingStart?.(stepped);
+      onValueChange?.(stepped);
+    },
+    onPanResponderMove: evt => {
+      const touchX = evt.nativeEvent.locationX;
+      const raw = positionToValue(Math.max(0, Math.min(touchX, trackWidth.current)));
+      const stepped = clampAndStep(raw);
+      currentValue.current = stepped;
+      updatePosition(stepped);
+      onValueChange?.(stepped);
+    },
+    onPanResponderRelease: evt => {
+      const touchX = evt.nativeEvent.locationX;
+      const raw = positionToValue(Math.max(0, Math.min(touchX, trackWidth.current)));
+      const stepped = clampAndStep(raw);
+      currentValue.current = stepped;
+      updatePosition(stepped);
+      onSlidingComplete?.(stepped);
+    }
+  }), [clampAndStep, positionToValue, valueToPosition, updatePosition, onValueChange, onSlidingStart, onSlidingComplete]);
+  const styles = useMemo(() => StyleSheet.create({
+    container: {
+      height: THUMB_SIZE + HIT_SLOP * 2,
+      justifyContent: 'center'
+    },
+    track: {
+      height: TRACK_HEIGHT,
+      borderRadius: TRACK_HEIGHT / 2,
+      backgroundColor: trackColor,
+      width: '100%'
+    },
+    activeTrack: {
+      height: TRACK_HEIGHT,
+      borderRadius: TRACK_HEIGHT / 2,
+      backgroundColor: activeTrackColor,
+      position: 'absolute',
+      left: 0,
+      top: 0
+    },
+    thumbContainer: {
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      justifyContent: 'center'
+    },
+    thumb: {
+      width: THUMB_SIZE,
+      height: THUMB_SIZE,
+      borderRadius: THUMB_SIZE / 2,
+      backgroundColor: thumbColor,
+      marginLeft: -THUMB_SIZE / 2,
+      elevation: 3,
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 2
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 3
+    },
+    hitArea: {
+      position: 'absolute',
+      top: -HIT_SLOP,
+      bottom: -HIT_SLOP,
+      left: 0,
+      right: 0
+    }
+  }), [trackColor, activeTrackColor, thumbColor]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, style],
+    testID: testID
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.track,
+    onLayout: handleLayout
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.activeTrack, {
+      width: activeWidth.current
+    }]
+  })), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.thumbContainer, {
+      transform: [{
+        translateX: thumbX.current
+      }]
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.thumb
+  })), /*#__PURE__*/React.createElement(View, _extends({
+    style: styles.hitArea
+  }, panResponder.panHandlers)));
+};
+export default NativeSlider;
+//# sourceMappingURL=index.native.js.map

package/es/molecule/native-slider/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.js","names":["React","useRef","useCallback","useMemo","View","StyleSheet","PanResponder","Animated","THUMB_SIZE","TRACK_HEIGHT","HIT_SLOP","NativeSlider","props","min","max","value","step","trackColor","activeTrackColor","thumbColor","onValueChange","onSlidingStart","onSlidingComplete","style","testID","trackWidth","currentValue","thumbX","Value","activeWidth","clampAndStep","raw","clamped","Math","round","valueToPosition","v","current","positionToValue","pos","ratio","updatePosition","setValue","handleLayout","e","nativeEvent","layout","width","panResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","onPanResponderGrant","evt","touchX","locationX","stepped","onPanResponderMove","onPanResponderRelease","styles","container","height","justifyContent","track","borderRadius","backgroundColor","activeTrack","position","left","top","thumbContainer","bottom","thumb","marginLeft","elevation","shadowColor","shadowOffset","shadowOpacity","shadowRadius","hitArea","right","createElement","onLayout","transform","translateX","_extends","panHandlers"],"sources":["../../../src/molecule/native-slider/index.native.tsx"],"sourcesContent":["import React, {useRef, useCallback, useMemo} from 'react';\nimport {View, StyleSheet, PanResponder, Animated, ViewStyle, LayoutChangeEvent} from 'react-native';\n\nconst THUMB_SIZE = 28;\nconst TRACK_HEIGHT = 4;\nconst HIT_SLOP = 20;\n\nexport type NativeSliderProps = {\n  min: number;\n  max: number;\n  value: number;\n  step?: number;\n  trackColor?: string;\n  activeTrackColor?: string;\n  thumbColor?: string;\n  onValueChange?: (value: number) => void;\n  onSlidingStart?: (value: number) => void;\n  onSlidingComplete?: (value: number) => void;\n  style?: ViewStyle;\n  testID?: string;\n};\n\ntype StyleSheetType = {\n  container: ViewStyle;\n  track: ViewStyle;\n  activeTrack: ViewStyle;\n  thumbContainer: ViewStyle;\n  thumb: ViewStyle;\n  hitArea: ViewStyle;\n};\n\nconst NativeSlider = (props: NativeSliderProps) => {\n  const {\n    min,\n    max,\n    value,\n    step = 1,\n    trackColor = '#b3b3b3',\n    activeTrackColor = '#007AFF',\n    thumbColor = '#007AFF',\n    onValueChange,\n    onSlidingStart,\n    onSlidingComplete,\n    style,\n    testID\n  } = props;\n\n  const trackWidth = useRef(0);\n  const currentValue = useRef(value);\n  const thumbX = useRef(new Animated.Value(0));\n  const activeWidth = useRef(new Animated.Value(0));\n\n  const clampAndStep = useCallback(\n    (raw: number): number => {\n      const clamped = Math.min(max, Math.max(min, raw));\n      if (step > 0) {\n        return Math.round((clamped - min) / step) * step + min;\n      }\n      return clamped;\n    },\n    [min, max, step]\n  );\n\n  const valueToPosition = useCallback(\n    (v: number): number => {\n      if (max === min) return 0;\n      return ((v - min) / (max - min)) * trackWidth.current;\n    },\n    [min, max]\n  );\n\n  const positionToValue = useCallback(\n    (pos: number): number => {\n      if (trackWidth.current === 0) return min;\n      const ratio = pos / trackWidth.current;\n      return ratio * (max - min) + min;\n    },\n    [min, max]\n  );\n\n  const updatePosition = useCallback(\n    (v: number) => {\n      const pos = valueToPosition(v);\n      thumbX.current.setValue(pos);\n      activeWidth.current.setValue(pos);\n    },\n    [valueToPosition]\n  );\n\n  const handleLayout = useCallback(\n    (e: LayoutChangeEvent) => {\n      trackWidth.current = e.nativeEvent.layout.width;\n      updatePosition(currentValue.current);\n    },\n    [updatePosition]\n  );\n\n  const panResponder = useMemo(\n    () =>\n      PanResponder.create({\n        onStartShouldSetPanResponder: () => true,\n        onMoveShouldSetPanResponder: () => true,\n        onPanResponderGrant: (evt) => {\n          const touchX = evt.nativeEvent.locationX;\n          const raw = positionToValue(touchX);\n          const stepped = clampAndStep(raw);\n          currentValue.current = stepped;\n          updatePosition(stepped);\n          onSlidingStart?.(stepped);\n          onValueChange?.(stepped);\n        },\n        onPanResponderMove: (evt) => {\n          const touchX = evt.nativeEvent.locationX;\n          const raw = positionToValue(Math.max(0, Math.min(touchX, trackWidth.current)));\n          const stepped = clampAndStep(raw);\n          currentValue.current = stepped;\n          updatePosition(stepped);\n          onValueChange?.(stepped);\n        },\n        onPanResponderRelease: (evt) => {\n          const touchX = evt.nativeEvent.locationX;\n          const raw = positionToValue(Math.max(0, Math.min(touchX, trackWidth.current)));\n          const stepped = clampAndStep(raw);\n          currentValue.current = stepped;\n          updatePosition(stepped);\n          onSlidingComplete?.(stepped);\n        }\n      }),\n    [clampAndStep, positionToValue, valueToPosition, updatePosition, onValueChange, onSlidingStart, onSlidingComplete]\n  );\n\n  const styles = useMemo(\n    (): StyleSheetType =>\n      StyleSheet.create({\n        container: {\n          height: THUMB_SIZE + HIT_SLOP * 2,\n          justifyContent: 'center'\n        },\n        track: {\n          height: TRACK_HEIGHT,\n          borderRadius: TRACK_HEIGHT / 2,\n          backgroundColor: trackColor,\n          width: '100%'\n        },\n        activeTrack: {\n          height: TRACK_HEIGHT,\n          borderRadius: TRACK_HEIGHT / 2,\n          backgroundColor: activeTrackColor,\n          position: 'absolute',\n          left: 0,\n          top: 0\n        },\n        thumbContainer: {\n          position: 'absolute',\n          top: 0,\n          bottom: 0,\n          justifyContent: 'center'\n        },\n        thumb: {\n          width: THUMB_SIZE,\n          height: THUMB_SIZE,\n          borderRadius: THUMB_SIZE / 2,\n          backgroundColor: thumbColor,\n          marginLeft: -THUMB_SIZE / 2,\n          elevation: 3,\n          shadowColor: '#000',\n          shadowOffset: {width: 0, height: 2},\n          shadowOpacity: 0.25,\n          shadowRadius: 3\n        },\n        hitArea: {\n          position: 'absolute',\n          top: -HIT_SLOP,\n          bottom: -HIT_SLOP,\n          left: 0,\n          right: 0\n        }\n      }),\n    [trackColor, activeTrackColor, thumbColor]\n  );\n\n  return (\n    <View style={[styles.container, style]} testID={testID}>\n      <View style={styles.track} onLayout={handleLayout}>\n        <Animated.View style={[styles.activeTrack, {width: activeWidth.current}]} />\n      </View>\n      <Animated.View\n        style={[styles.thumbContainer, {transform: [{translateX: thumbX.current}]}]}\n      >\n        <View style={styles.thumb} />\n      </Animated.View>\n      <View style={styles.hitArea} {...panResponder.panHandlers} />\n    </View>\n  );\n};\n\nexport default NativeSlider;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/news/index.d.ts

@@ -1,5 +1,5 @@
 export default News;
-declare function News(props: any, context: any): JSX.Element;
+declare function News(props: any, context: any): React.JSX.Element;
 declare namespace News {
     namespace propTypes {
         const image: PropTypes.Requireable<string>;
@@ -27,5 +27,6 @@ declare namespace News {
         }>>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/molecule/news/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/news/index.js"],"names":[],"mappings":";AAOA,6DA6CC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/news/index.js"],"names":[],"mappings":";AAOA,mEA6CC"}

package/es/molecule/notification-banner/index.d.ts

@@ -1,5 +1,5 @@
 export default NotificationBanner;
-declare function NotificationBanner(props: any, context: any): JSX.Element;
+declare function NotificationBanner(props: any, context: any): React.JSX.Element;
 declare namespace NotificationBanner {
     namespace contextTypes {
         const skin: PropTypes.Requireable<PropTypes.InferProps<{
@@ -33,5 +33,6 @@ declare namespace NotificationBanner {
         const closeOnClick: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/molecule/notification-banner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/notification-banner/index.js"],"names":[],"mappings":";AA8BA,2EAsDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/notification-banner/index.js"],"names":[],"mappings":";AA8BA,iFAsDC"}

package/es/molecule/pagination/index.d.ts

@@ -1,5 +1,5 @@
 export default Pagination;
-declare function Pagination(props: any): JSX.Element;
+declare function Pagination(props: any): React.JSX.Element;
 declare namespace Pagination {
     namespace propTypes {
         const value: PropTypes.Validator<string>;
@@ -7,5 +7,6 @@ declare namespace Pagination {
         const previousHref: PropTypes.Requireable<string>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/molecule/pagination/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/pagination/index.js"],"names":[],"mappings":";AAKA,qDAgBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/pagination/index.js"],"names":[],"mappings":";AAKA,2DAgBC"}

package/es/molecule/payment-form/index.d.ts

@@ -38,7 +38,7 @@ declare class PaymentForm extends React.Component<any, any, any> {
     cardExpiry: any;
     cardCvc: any;
     componentWillUnmount(): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 import React from "react";
 import PropTypes from "prop-types";

package/es/molecule/payment-form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/payment-form/index.js"],"names":[],"mappings":";AAKA;IACE;;;;;;;;;;;;;;;;;MAiBE;IAEF;;MAEE;IAEF,wBAOC;IALC,YAAuF;IAiEzF;;aAGC;IAED;;aAGC;IAED;;aAGC;IAtBD,oBAOC;IAxDD,0BAgCC;IAZG,gBAA+D;IAC/D,gBAA+D;IAC/D,aAAyD;IAY7D,6BAaC;IA0BD,sBA+DC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/payment-form/index.js"],"names":[],"mappings":";AAKA;IACE;;;;;;;;;;;;;;;;;MAiBE;IAEF;;MAEE;IAEF,wBAOC;IALC,YAAuF;IAiEzF;;aAGC;IAED;;aAGC;IAED;;aAGC;IAtBD,oBAOC;IAxDD,0BAgCC;IAZG,gBAA+D;IAC/D,gBAA+D;IAC/D,aAAyD;IAY7D,6BAaC;IA0BD,4BA+DC;CACF"}

package/es/molecule/pdf/index.d.ts

@@ -1,5 +1,5 @@
 export default PDF;
-declare function PDF(props: any, context: any): JSX.Element;
+declare function PDF(props: any, context: any): React.JSX.Element;
 declare namespace PDF {
     namespace contextTypes {
         const translate: PropTypes.Requireable<(...args: any[]) => any>;
@@ -32,5 +32,6 @@ declare namespace PDF {
         const onPlay: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/molecule/pdf/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/pdf/index.js"],"names":[],"mappings":";AASA,4DA8BC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/pdf/index.js"],"names":[],"mappings":";AASA,kEA8BC"}

package/es/molecule/playlist-card/index.d.ts

@@ -1,5 +1,5 @@
 export default PlaylistCard;
-declare function PlaylistCard(props: any, context: any): JSX.Element | null;
+declare function PlaylistCard(props: any, context: any): React.JSX.Element;
 declare namespace PlaylistCard {
     namespace contextTypes {
         const translate: PropTypes.Requireable<(...args: any[]) => any>;
@@ -9,10 +9,10 @@ declare namespace PlaylistCard {
         const label: PropTypes.Requireable<string>;
         const title: PropTypes.Validator<string>;
         const progress: PropTypes.Requireable<number>;
-        const coverImages: PropTypes.Validator<(PropTypes.InferProps<{
+        const coverImages: PropTypes.Validator<PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             image: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
+        }>[]>;
         const onClick: PropTypes.Requireable<(...args: any[]) => any>;
         const locales: PropTypes.Requireable<PropTypes.InferProps<{
             playlistTag: PropTypes.Requireable<string>;
@@ -27,5 +27,6 @@ declare namespace PlaylistCard {
         export { locales_1 as locales };
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/molecule/playlist-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/playlist-card/index.js"],"names":[],"mappings":";AASA,4EAwCC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/playlist-card/index.js"],"names":[],"mappings":";AASA,2EAwCC"}

package/es/molecule/playlist-detail-cover/index.d.ts

@@ -2,15 +2,16 @@ export default PlaylistDetailCover;
 declare function PlaylistDetailCover({ images, className }: {
     images: any;
     className: any;
-}): JSX.Element;
+}): React.JSX.Element;
 declare namespace PlaylistDetailCover {
     namespace propTypes {
-        const images: PropTypes.Validator<(PropTypes.InferProps<{
+        const images: PropTypes.Validator<PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             image: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
+        }>[]>;
         const className: PropTypes.Requireable<string>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/molecule/playlist-detail-cover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/playlist-detail-cover/index.js"],"names":[],"mappings":";AASA;;;gBAoCC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/playlist-detail-cover/index.js"],"names":[],"mappings":";AASA;;;sBAoCC"}

package/es/molecule/popin/index.d.ts

@@ -1,5 +1,5 @@
 export default Popin;
-declare function Popin(props: any, context: any): JSX.Element;
+declare function Popin(props: any, context: any): React.JSX.Element;
 declare namespace Popin {
     namespace propTypes {
         const header: PropTypes.Requireable<string>;
@@ -14,5 +14,6 @@ declare namespace Popin {
         const backgroundImageUrl: PropTypes.Requireable<string>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/molecule/popin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/popin/index.js"],"names":[],"mappings":";AAcA,8DAgIC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/popin/index.js"],"names":[],"mappings":";AAcA,oEAgIC"}

package/es/molecule/privacy-policy-contact/index.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import { Props } from './types';
 export declare const ICONS: {
     arrow: any;
 };
 declare const PrivacyPolicyContact: {
-    ({ title, content }: Props): JSX.Element;
+    ({ title, content }: Props): React.JSX.Element;
     propTypes: {
         title: import("prop-types").Requireable<string>;
         content: import("prop-types").Requireable<string>;

package/es/molecule/privacy-policy-contact/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/privacy-policy-contact/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAY,KAAK,EAAC,MAAM,SAAS,CAAC;AAGzC,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,QAAA,MAAM,oBAAoB;yBAAsB,KAAK;;;;;CAWpD,CAAC;AAIF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/privacy-policy-contact/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAY,KAAK,EAAC,MAAM,SAAS,CAAC;AAGzC,eAAO,MAAM,KAAK;;CAEjB,CAAC;AAEF,QAAA,MAAM,oBAAoB;yBAAsB,KAAK;;;;;CAWpD,CAAC;AAIF,eAAe,oBAAoB,CAAC"}

package/es/molecule/product-card/index.d.ts

@@ -1,5 +1,5 @@
 export default ProductCard;
-declare function ProductCard(props: any, context: any): JSX.Element;
+declare function ProductCard(props: any, context: any): React.JSX.Element;
 declare namespace ProductCard {
     namespace contextTypes {
         const translate: PropTypes.Requireable<(...args: any[]) => any>;
@@ -12,5 +12,6 @@ declare namespace ProductCard {
         const checkImage: PropTypes.Validator<string>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/molecule/product-card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/product-card/index.js"],"names":[],"mappings":";AAMA,oEA0CC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/product-card/index.js"],"names":[],"mappings":";AAMA,0EA0CC"}

package/es/molecule/progress-bar/index.d.ts

@@ -1,5 +1,5 @@
 export default ProgressBar;
-declare function ProgressBar(props: any): JSX.Element;
+declare function ProgressBar(props: any): React.JSX.Element;
 declare namespace ProgressBar {
     namespace propTypes {
         const className: PropTypes.Requireable<string>;
@@ -8,10 +8,11 @@ declare namespace ProgressBar {
         const desc: PropTypes.Requireable<string>;
         const steps: PropTypes.Requireable<number>;
         const style: PropTypes.Requireable<{
-            [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
+            [x: string]: NonNullable<string | number>;
         }>;
         const displayInfo: PropTypes.Requireable<boolean>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/molecule/progress-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-bar/index.js"],"names":[],"mappings":";AAMA,sDAqCC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-bar/index.js"],"names":[],"mappings":";AAMA,4DAqCC"}

package/es/molecule/progress-wrapper/index.d.ts

@@ -6,7 +6,7 @@ declare function ProgressWrapper({ completedModules, mandatoryModules, title, su
     subtitle: any;
     progression: any;
     sections: any;
-}, context: any): JSX.Element;
+}, context: any): React.JSX.Element;
 declare namespace ProgressWrapper {
     namespace contextTypes {
         const translate: PropTypes.Requireable<(...args: any[]) => any>;
@@ -17,12 +17,13 @@ declare namespace ProgressWrapper {
         const completedModules: PropTypes.Requireable<number>;
         const mandatoryModules: PropTypes.Requireable<number>;
         const progression: PropTypes.Requireable<number>;
-        const sections: PropTypes.Requireable<(PropTypes.InferProps<{
+        const sections: PropTypes.Requireable<PropTypes.InferProps<{
             type: PropTypes.Requireable<string>;
             downloadUrl: PropTypes.Requireable<string>;
             stars: PropTypes.Requireable<number>;
-        }> | null | undefined)[]>;
+        }>[]>;
     }
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/molecule/progress-wrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-wrapper/index.js"],"names":[],"mappings":";AAgGA;;;;;;;8BAsGC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-wrapper/index.js"],"names":[],"mappings":";AAgGA;;;;;;;oCAsGC"}

package/es/molecule/questions/drop-down/index.d.ts

@@ -1,18 +1,19 @@
 export default DropDown;
-declare function DropDown(props: any): JSX.Element;
+declare function DropDown(props: any): React.JSX.Element;
 declare namespace DropDown {
     const propTypes: {
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        options: PropTypes.Requireable<(PropTypes.InferProps<{
+        options: PropTypes.Requireable<PropTypes.InferProps<{
             name: PropTypes.Validator<string>;
-            value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+            value: PropTypes.Requireable<NonNullable<string | number>>;
             selected: PropTypes.Requireable<boolean>;
             validOption: PropTypes.Requireable<boolean>;
-        }> | null | undefined)[]>;
+        }>[]>;
         theme: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
         groupAriaLabel: PropTypes.Requireable<string>;
     };
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/molecule/questions/drop-down/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/drop-down/index.js"],"names":[],"mappings":";AAMA,mDAcC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/drop-down/index.js"],"names":[],"mappings":";AAMA,yDAcC"}

package/es/molecule/questions/free-text/index.d.ts

@@ -1,5 +1,5 @@
 export default FreeText;
-declare function FreeText(props: any, legacyContext: any): JSX.Element;
+declare function FreeText(props: any, legacyContext: any): React.JSX.Element;
 declare namespace FreeText {
     namespace contextTypes {
         const skin: PropTypes.Requireable<PropTypes.InferProps<{
@@ -31,5 +31,6 @@ declare namespace FreeText {
         'aria-label': PropTypes.Requireable<string>;
     };
 }
+import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/es/molecule/questions/free-text/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/free-text/index.js"],"names":[],"mappings":";AAOA,uEAmDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/free-text/index.js"],"names":[],"mappings":";AAOA,6EAmDC"}

package/es/molecule/questions/free-text/index.native.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Analytics } from '../../../variables/analytics';
 declare type QuestionType = 'basic' | 'template';
 interface Props {
@@ -10,6 +10,6 @@ interface Props {
     isDisabled?: boolean;
     value?: string;
 }
-declare const FreeText: (props: Props) => JSX.Element | null;
+declare const FreeText: (props: Props) => React.JSX.Element;
 export default FreeText;
 //# sourceMappingURL=index.native.d.ts.map

package/es/molecule/questions/free-text/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/free-text/index.native.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAuB,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAK7E,aAAK,YAAY,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzC,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,YAAY,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CD,QAAA,MAAM,QAAQ,UAAW,KAAK,uBA2D7B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../src/molecule/questions/free-text/index.native.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAuB,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAK7E,aAAK,YAAY,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzC,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,YAAY,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CD,QAAA,MAAM,QAAQ,UAAW,KAAK,sBA6D7B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/es/molecule/questions/free-text/index.native.js

@@ -76,8 +76,10 @@ const FreeText = props => {
   }
   return /*#__PURE__*/React.createElement(View, {
     style: [styleSheet.spaced, fullWidth && styleSheet.fullWitdh]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styleSheet.input
   }, /*#__PURE__*/React.createElement(TextInput, {
-    style: [styleSheet.input, styleSheet.text],
+    style: styleSheet.text,
     onFocus: handleFocus,
     onBlur: handleBlur,
     onChangeText: onChange,
@@ -87,7 +89,7 @@ const FreeText = props => {
     testID: testID,
     editable: !isDisabled,
     selectTextOnFocus: !isDisabled
-  }));
+  })));
 };
 export default FreeText;
 //# sourceMappingURL=index.native.js.map

package/es/molecule/questions/free-text/index.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.js","names":["View","StyleSheet","TextInput","React","useState","useEffect","useCallback","useTemplateContext","ANALYTICS_EVENT_TYPE","BOX_STYLE","createStyleSheet","brandTheme","theme","create","input","padding","spacing","tiny","borderColor","colors","gray","lightMedium","borderRadius","radius","regular","minWidth","marginHorizontal","paddingVertical","backgroundColor","white","text","primary","color","medium","fontWeight","bold","fontSize","textAlign","spaced","fullWitdh","width","logEvent","eventName","analytics","questionType","id","FreeText","props","templateContext","styleSheet","setStylesheet","translations","PLACEHOLDER_COLOR","fullWidth","testID","onChange","isDisabled","value","handleFocus","INPUT_FOCUS","handleBlur","INPUT_BLUR","_stylesheet","createElement","style","onFocus","onBlur","onChangeText","placeholder","typeHere","placeholderTextColor","editable","selectTextOnFocus"],"sources":["../../../../src/molecule/questions/free-text/index.native.tsx"],"sourcesContent":["import {View, StyleSheet, TextInput, ViewStyle} from 'react-native';\nimport React, {useState, useEffect, useCallback} from 'react';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE, Analytics} from '../../../variables/analytics';\nimport {Theme} from '../../../variables/theme.native';\nimport {BOX_STYLE} from '../../../variables/shadow';\nimport {Brand} from '../../../variables/brand.native';\n\ntype QuestionType = 'basic' | 'template';\n\ninterface Props {\n  fullWidth?: boolean;\n  testID: string;\n  questionType: QuestionType;\n  analytics?: Analytics;\n  onChange: (text: string) => void;\n  isDisabled?: boolean;\n  value?: string; // when value is undefined, TextInput acts as not controlled\n}\n\ntype StyleSheetType = {\n  input: ViewStyle;\n  text: ViewStyle;\n  spaced: ViewStyle;\n  fullWitdh: ViewStyle;\n};\n\nconst createStyleSheet = (brandTheme: Brand, theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread\n    input: {\n      padding: theme.spacing.tiny,\n      borderColor: theme.colors.gray.lightMedium,\n      borderRadius: theme.radius.regular,\n      minWidth: 175,\n      marginHorizontal: 12,\n      paddingVertical: 16,\n      ...BOX_STYLE,\n      backgroundColor: theme.colors.white\n    },\n    text: {\n      borderColor: brandTheme?.colors?.primary,\n      color: brandTheme?.colors?.primary || theme.colors.gray.medium,\n      fontWeight: theme.fontWeight.bold,\n      fontSize: theme.fontSize.regular,\n      textAlign: 'center'\n    },\n    spaced: {\n      paddingVertical: theme.spacing.tiny\n    },\n    fullWitdh: {\n      width: '100%'\n    }\n  });\n\nconst logEvent = (eventName: string, analytics: Analytics, questionType: QuestionType) => {\n  analytics &&\n    analytics.logEvent(eventName, {\n      id: `question-input-text`,\n      questionType\n    });\n};\n\nconst FreeText = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme, translations} = templateContext;\n  const PLACEHOLDER_COLOR = theme.colors.gray.medium;\n\n  // ------------------------------------\n\n  const {\n    analytics,\n    questionType,\n    fullWidth = false,\n    testID,\n    onChange,\n    isDisabled = false,\n    value\n  } = props;\n\n  // ------------------------------------\n\n  const handleFocus = useCallback(\n    () => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_FOCUS, analytics, questionType),\n    [analytics, questionType]\n  );\n\n  const handleBlur = useCallback(\n    () => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_BLUR, analytics, questionType),\n    [analytics, questionType]\n  );\n\n  // ------------------------------------\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [brandTheme, theme]);\n\n  // ------------------------------------\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={[styleSheet.spaced, fullWidth && styleSheet.fullWitdh]}>\n      <TextInput\n        style={[styleSheet.input, styleSheet.text]}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onChangeText={onChange}\n        placeholder={translations.typeHere}\n        placeholderTextColor={PLACEHOLDER_COLOR}\n        value={value}\n        testID={testID}\n        editable={!isDisabled}\n        selectTextOnFocus={!isDisabled}\n      />\n    </View>\n  );\n};\n\nexport default FreeText;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.native.js","names":["View","StyleSheet","TextInput","React","useState","useEffect","useCallback","useTemplateContext","ANALYTICS_EVENT_TYPE","BOX_STYLE","createStyleSheet","brandTheme","theme","create","input","padding","spacing","tiny","borderColor","colors","gray","lightMedium","borderRadius","radius","regular","minWidth","marginHorizontal","paddingVertical","backgroundColor","white","text","primary","color","medium","fontWeight","bold","fontSize","textAlign","spaced","fullWitdh","width","logEvent","eventName","analytics","questionType","id","FreeText","props","templateContext","styleSheet","setStylesheet","translations","PLACEHOLDER_COLOR","fullWidth","testID","onChange","isDisabled","value","handleFocus","INPUT_FOCUS","handleBlur","INPUT_BLUR","_stylesheet","createElement","style","onFocus","onBlur","onChangeText","placeholder","typeHere","placeholderTextColor","editable","selectTextOnFocus"],"sources":["../../../../src/molecule/questions/free-text/index.native.tsx"],"sourcesContent":["import {View, StyleSheet, TextInput, ViewStyle, TextStyle} from 'react-native';\nimport React, {useState, useEffect, useCallback} from 'react';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE, Analytics} from '../../../variables/analytics';\nimport {Theme} from '../../../variables/theme.native';\nimport {BOX_STYLE} from '../../../variables/shadow';\nimport {Brand} from '../../../variables/brand.native';\n\ntype QuestionType = 'basic' | 'template';\n\ninterface Props {\n  fullWidth?: boolean;\n  testID: string;\n  questionType: QuestionType;\n  analytics?: Analytics;\n  onChange: (text: string) => void;\n  isDisabled?: boolean;\n  value?: string; // when value is undefined, TextInput acts as not controlled\n}\n\ntype StyleSheetType = {\n  input: ViewStyle;\n  text: TextStyle;\n  spaced: ViewStyle;\n  fullWitdh: ViewStyle;\n};\n\nconst createStyleSheet = (brandTheme: Brand, theme: Theme): StyleSheetType =>\n  StyleSheet.create({\n    // eslint-disable-next-line @coorpacademy/coorpacademy/no-overwriting-spread\n    input: {\n      padding: theme.spacing.tiny,\n      borderColor: theme.colors.gray.lightMedium,\n      borderRadius: theme.radius.regular,\n      minWidth: 175,\n      marginHorizontal: 12,\n      paddingVertical: 16,\n      ...BOX_STYLE,\n      backgroundColor: theme.colors.white\n    },\n    text: {\n      borderColor: brandTheme?.colors?.primary,\n      color: brandTheme?.colors?.primary || theme.colors.gray.medium,\n      fontWeight: theme.fontWeight.bold,\n      fontSize: theme.fontSize.regular,\n      textAlign: 'center'\n    },\n    spaced: {\n      paddingVertical: theme.spacing.tiny\n    },\n    fullWitdh: {\n      width: '100%'\n    }\n  });\n\nconst logEvent = (eventName: string, analytics: Analytics, questionType: QuestionType) => {\n  analytics &&\n    analytics.logEvent(eventName, {\n      id: `question-input-text`,\n      questionType\n    });\n};\n\nconst FreeText = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n  const {brandTheme, theme, translations} = templateContext;\n  const PLACEHOLDER_COLOR = theme.colors.gray.medium;\n\n  // ------------------------------------\n\n  const {\n    analytics,\n    questionType,\n    fullWidth = false,\n    testID,\n    onChange,\n    isDisabled = false,\n    value\n  } = props;\n\n  // ------------------------------------\n\n  const handleFocus = useCallback(\n    () => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_FOCUS, analytics, questionType),\n    [analytics, questionType]\n  );\n\n  const handleBlur = useCallback(\n    () => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_BLUR, analytics, questionType),\n    [analytics, questionType]\n  );\n\n  // ------------------------------------\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(brandTheme, theme);\n    setStylesheet(_stylesheet);\n  }, [brandTheme, theme]);\n\n  // ------------------------------------\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  return (\n    <View style={[styleSheet.spaced, fullWidth && styleSheet.fullWitdh]}>\n      <View style={styleSheet.input}>\n        <TextInput\n          style={styleSheet.text}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onChangeText={onChange}\n          placeholder={translations.typeHere}\n          placeholderTextColor={PLACEHOLDER_COLOR}\n          value={value}\n          testID={testID}\n          editable={!isDisabled}\n          selectTextOnFocus={!isDisabled}\n        />\n      </View>\n    </View>\n  );\n};\n\nexport default FreeText;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/questions/mobile/draggable/index.native.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { SelectableChoice } from '../../types';
 export interface DropZoneProps {
     choices: Array<SelectableChoice>;
@@ -9,6 +9,6 @@ export interface Props {
     testID?: string;
     onPress: (item: SelectableChoice) => () => void;
 }
-declare const QuestionDraggable: (props: Props) => JSX.Element | null;
+declare const QuestionDraggable: (props: Props) => React.JSX.Element;
 export default QuestionDraggable;
 //# sourceMappingURL=index.native.d.ts.map

package/es/molecule/questions/mobile/draggable/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/draggable/index.native.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,MAAM,IAAI,CAAC;CACjD;AAwDD,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,MAAM,IAAI,CAAC;CACjD;AAgCD,QAAA,MAAM,iBAAiB,UAAW,KAAK,uBAwCtC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/draggable/index.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,MAAM,IAAI,CAAC;CACjD;AAwDD,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,MAAM,IAAI,CAAC;CACjD;AAgCD,QAAA,MAAM,iBAAiB,UAAW,KAAK,sBAwCtC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/es/molecule/questions/mobile/draggable/index.native.js

@@ -38,7 +38,7 @@ const Selection = props => {
     key: item._id,
     squeezed: true,
     isSelected: true,
-    testID: `choice-${item._id}`,
+    testID: `choice-${item._id}-selected`,
     onPress: onPress(item),
     questionType: "qcmDrag"
   }, item.label));