@coorpacademy/components 10.22.2 → 10.22.5

package/lib/atom/html/index.native.js

@@ -0,0 +1,163 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeRenderHtml = _interopRequireDefault(require("react-native-render-html"));
+
+var _theme = require("../../variables/theme.native");
+
+var _templateContext = require("../../template/app-review/template-context");
+
+var _index = _interopRequireWildcard(require("../text/index.native"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Html = props => {
+  const [disableBaseFontStyleColor, setDisableBaseFontStyleColor] = (0, _react.useState)(false);
+  const templateContext = (0, _templateContext.useTemplateContext)();
+  const {
+    theme,
+    vibration
+  } = templateContext;
+  const {
+    children,
+    fontSize,
+    containerStyle,
+    imageStyle,
+    style,
+    testID,
+    anchorTextColor = _theme.HTML_ANCHOR_TEXT_COLOR,
+    isTextCentered,
+    numberOfLines,
+    onLinkPress
+  } = props;
+  const handleLinkPress = (0, _react.useMemo)(() => url => {
+    vibration?.vibrate();
+    onLinkPress && onLinkPress(url);
+  }, [onLinkPress, vibration]); // Don't use StyleSheet there, it's not a react style
+
+  const styles = {
+    p: {
+      marginVertical: 0,
+      textAlign: 'center'
+    },
+    u: {
+      textDecorationLine: 'underline'
+    },
+    i: {
+      fontStyle: 'italic'
+    },
+    b: {
+      fontWeight: theme.fontWeight.bold
+    },
+    s: {
+      textDecorationLine: 'line-through'
+    }
+  };
+
+  const tagsStyles = _extends(_extends({}, styles), {}, {
+    h1: {
+      fontSize
+    },
+    h2: {
+      fontSize
+    },
+    h3: {
+      fontSize
+    },
+    h4: {
+      fontSize
+    },
+    h5: {
+      fontSize
+    },
+    h6: {
+      fontSize
+    },
+    a: {
+      color: anchorTextColor
+    },
+    img: imageStyle
+  });
+
+  let baseFontStyle = _extends(_extends({}, _index.DEFAULT_STYLE), {}, {
+    fontSize,
+    color: theme.colors.black
+  });
+
+  if (style) {
+    if (Array.isArray(style)) {
+      const styleObject = style.reduce((result, child) => _extends(_extends({}, result), child));
+      baseFontStyle = _extends(_extends({}, baseFontStyle), styleObject);
+    } else {
+      baseFontStyle = _extends(_extends({}, baseFontStyle), style);
+    }
+  }
+
+  const renderers = {
+    // eslint-disable-next-line react/display-name
+    font: (htmlAttribs, _children) => {
+      if (htmlAttribs.color) {
+        setDisableBaseFontStyleColor(true);
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        key: 1,
+        style: _extends(_extends({}, baseFontStyle), {}, {
+          color: htmlAttribs.color
+        })
+      }, _children);
+    },
+    span: function Span(_, _children, convertedCSSStyles, {
+      allowFontScaling,
+      key
+    }) {
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        numberOfLines: numberOfLines,
+        allowFontScaling: allowFontScaling,
+        key: key,
+        style: convertedCSSStyles
+      }, _children);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    testID: testID,
+    style: containerStyle
+  }, /*#__PURE__*/_react.default.createElement(_reactNativeRenderHtml.default // to text-align center on android
+  // we have to encapsulate between <p> tag
+  // and use custom style define on <p>
+  // definition in component style doesn't work
+  , {
+    source: {
+      // eslint-disable-next-line no-nested-ternary
+      html: isTextCentered ? `<p>${children}</p>` : numberOfLines ? `<span>${children}</span>` : `${children}`
+    },
+    tagsStyles: tagsStyles,
+    baseFontStyle: _extends(_extends({}, baseFontStyle), {}, {
+      color: disableBaseFontStyleColor ? null : baseFontStyle.color
+    }),
+    onLinkPress: handleLinkPress,
+    renderers: renderers // this is exceptionally for the onboarding course
+    // is the only course that has a gif in the context but the img tag
+    // comes with width & height attr and these makes this lib do not render the gif
+    // so to avoid it, we decided to ignore these attr
+    ,
+    ignoredStyles: ['width', 'height'],
+    testID: "html-base"
+  }));
+};
+
+var _default = Html;
+exports.default = _default;
+//# sourceMappingURL=index.native.js.map

package/lib/atom/html/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/atom/html/index.native.tsx"],"names":["Html","props","disableBaseFontStyleColor","setDisableBaseFontStyleColor","templateContext","theme","vibration","children","fontSize","containerStyle","imageStyle","style","testID","anchorTextColor","HTML_ANCHOR_TEXT_COLOR","isTextCentered","numberOfLines","onLinkPress","handleLinkPress","url","vibrate","styles","p","marginVertical","textAlign","u","textDecorationLine","i","fontStyle","b","fontWeight","bold","s","tagsStyles","h1","h2","h3","h4","h5","h6","a","color","img","baseFontStyle","DEFAULT_TEXT_STYLE","colors","black","Array","isArray","styleObject","reduce","result","child","renderers","font","htmlAttribs","_children","span","Span","_","convertedCSSStyles","allowFontScaling","key","html"],"mappings":"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","sourcesContent":["import React, {useMemo, useState} from 'react';\nimport {View, ViewStyle, ImageStyle, TextStyle} from 'react-native';\nimport HtmlBase from 'react-native-render-html';\n\nimport {HTML_ANCHOR_TEXT_COLOR} from '../../variables/theme.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport Text, {DEFAULT_STYLE as DEFAULT_TEXT_STYLE} from '../text/index.native';\n\nexport type Props = {\n  children: string;\n  fontSize: number;\n  numberOfLines?: number;\n  onLinkPress?: (url: string) => void;\n  containerStyle?: ViewStyle;\n  anchorTextColor?: string;\n  imageStyle?: ImageStyle;\n  style?: TextStyle;\n  testID?: string;\n  isTextCentered?: boolean;\n};\n\nconst Html = (props: Props) => {\n  const [disableBaseFontStyleColor, setDisableBaseFontStyleColor] = useState<boolean>(false);\n  const templateContext = useTemplateContext();\n  const {theme, vibration} = templateContext;\n  const {\n    children,\n    fontSize,\n    containerStyle,\n    imageStyle,\n    style,\n    testID,\n    anchorTextColor = HTML_ANCHOR_TEXT_COLOR,\n    isTextCentered,\n    numberOfLines,\n    onLinkPress\n  } = props;\n\n  const handleLinkPress = useMemo(\n    () => (url: string) => {\n      vibration?.vibrate();\n\n      onLinkPress && onLinkPress(url);\n    },\n    [onLinkPress, vibration]\n  );\n\n  // Don't use StyleSheet there, it's not a react style\n  const styles = {\n    p: {\n      marginVertical: 0,\n      textAlign: 'center'\n    },\n    u: {\n      textDecorationLine: 'underline'\n    },\n    i: {\n      fontStyle: 'italic'\n    },\n    b: {\n      fontWeight: theme.fontWeight.bold\n    },\n    s: {\n      textDecorationLine: 'line-through'\n    }\n  };\n\n  const tagsStyles = {\n    ...styles,\n    h1: {fontSize},\n    h2: {fontSize},\n    h3: {fontSize},\n    h4: {fontSize},\n    h5: {fontSize},\n    h6: {fontSize},\n    a: {color: anchorTextColor},\n    img: imageStyle\n  };\n\n  let baseFontStyle = {...DEFAULT_TEXT_STYLE, fontSize, color: theme.colors.black};\n  if (style) {\n    if (Array.isArray(style)) {\n      const styleObject = style.reduce((result, child) => ({\n        ...result,\n        ...child\n      }));\n      baseFontStyle = {\n        ...baseFontStyle,\n        ...styleObject\n      };\n    } else {\n      baseFontStyle = {\n        ...baseFontStyle,\n        ...style\n      };\n    }\n  }\n\n  const renderers = {\n    // eslint-disable-next-line react/display-name\n    font: (htmlAttribs, _children) => {\n      if (htmlAttribs.color) {\n        setDisableBaseFontStyleColor(true);\n      }\n      return (\n        <Text\n          key={1}\n          style={{\n            ...baseFontStyle,\n            color: htmlAttribs.color\n          }}\n        >\n          {_children}\n        </Text>\n      );\n    },\n    span: function Span(\n      _: any,\n      _children: any,\n      convertedCSSStyles: any,\n      {allowFontScaling, key}: any\n    ) {\n      return (\n        <Text\n          numberOfLines={numberOfLines}\n          allowFontScaling={allowFontScaling}\n          key={key}\n          style={convertedCSSStyles}\n        >\n          {_children}\n        </Text>\n      );\n    }\n  };\n\n  return (\n    <View testID={testID} style={containerStyle}>\n      <HtmlBase\n        // to text-align center on android\n        // we have to encapsulate between <p> tag\n        // and use custom style define on <p>\n        // definition in component style doesn't work\n        source={{\n          // eslint-disable-next-line no-nested-ternary\n          html: isTextCentered\n            ? `<p>${children}</p>`\n            : numberOfLines\n            ? `<span>${children}</span>`\n            : `${children}`\n        }}\n        tagsStyles={tagsStyles}\n        baseFontStyle={{\n          ...baseFontStyle,\n          color: disableBaseFontStyleColor ? null : baseFontStyle.color\n        }}\n        onLinkPress={handleLinkPress}\n        renderers={renderers}\n        // this is exceptionally for the onboarding course\n        // is the only course that has a gif in the context but the img tag\n        // comes with width & height attr and these makes this lib do not render the gif\n        // so to avoid it, we decided to ignore these attr\n        ignoredStyles={['width', 'height']}\n        testID=\"html-base\"\n      />\n    </View>\n  );\n};\n\nexport default Html;\n"],"file":"index.native.js"}

package/lib/atom/input-checkbox/index.js

@@ -50,7 +50,7 @@ const InputCheckbox = props => {
   const titleStyleClassName = titleStylesClassNames[titleStyle];
   const idCheckbox = (0, _uniqueId2.default)('input-checkbox-');
   const title = `${propsTitle}${required ? '*' : ''}`;
-  const handleChange = (0, _react.useMemo)(() => e => onChange(e.target.checked), [onChange]);
+  const handleChange = (0, _react.useCallback)(e => onChange(e.target.checked), [onChange]);
   const modifiedClassName = theme === 'coorpmanager' ? _style.default.coorpManagerModified : _style.default.defaultModified;
   const errorClassName = theme === 'coorpmanager' ? _style.default.coorpManagerError : _style.default.defaultError;
   const defaultContainerClassName = theme === 'coorpmanager' ? _style.default.coorpManager : _style.default.default;
@@ -69,6 +69,7 @@ const InputCheckbox = props => {
     disabled: disabled,
     "data-name": "checkbox-input"
   }), /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": "checkbox-label",
     className: (0, _classnames.default)(_style.default.label, noLabelMargins ? _style.default.noLabelMargins : undefined)
   }, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusValidate, {
     className: _style.default.icon

package/lib/atom/input-checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/input-checkbox/index.js"],"names":["titleStylesClassNames","inherit","style","primary","secondary","tertiary","InputCheckbox","props","checked","onChange","error","disabled","required","titleStyle","modified","theme","title","propsTitle","noLabelMargins","titleStyleClassName","idCheckbox","handleChange","e","target","modifiedClassName","coorpManagerModified","defaultModified","errorClassName","coorpManagerError","defaultError","defaultContainerClassName","coorpManager","default","className","checkbox","label","undefined","icon","propTypes","PropTypes","string","isRequired","bool","func","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {NovaSolidStatusValidate as CheckIcon} from '@coorpacademy/nova-icons';\nimport {keys, noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst titleStylesClassNames = {\n  inherit: style.inherit,\n  primary: style.primary,\n  secondary: style.secondary,\n  tertiary: style.tertiary\n};\n\nconst InputCheckbox = props => {\n  const {\n    checked,\n    onChange = noop,\n    error,\n    disabled,\n    required,\n    titleStyle = 'primary',\n    modified = false,\n    theme = 'default',\n    title: propsTitle,\n    noLabelMargins = false\n  } = props;\n\n  const titleStyleClassName = titleStylesClassNames[titleStyle];\n  const idCheckbox = uniqueId('input-checkbox-');\n  const title = `${propsTitle}${required ? '*' : ''}`;\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  const modifiedClassName =\n    theme === 'coorpmanager' ? style.coorpManagerModified : style.defaultModified;\n  const errorClassName = theme === 'coorpmanager' ? style.coorpManagerError : style.defaultError;\n  const defaultContainerClassName = theme === 'coorpmanager' ? style.coorpManager : style.default;\n\n  const className = getClassState(\n    defaultContainerClassName,\n    modifiedClassName,\n    errorClassName,\n    modified,\n    error\n  );\n\n  return (\n    <label className={className} htmlFor={idCheckbox} data-name=\"checkbox-input-label\">\n      <input\n        type=\"checkbox\"\n        className={style.checkbox}\n        name={title}\n        id={idCheckbox}\n        checked={checked}\n        onChange={handleChange}\n        disabled={disabled}\n        data-name=\"checkbox-input\"\n      />\n      <div className={classnames(style.label, noLabelMargins ? style.noLabelMargins : undefined)}>\n        <CheckIcon className={style.icon} />\n      </div>\n      <span className={titleStyleClassName} title={title}>\n        {title}\n      </span>\n    </label>\n  );\n};\n\nInputCheckbox.propTypes = {\n  title: PropTypes.string.isRequired,\n  disabled: PropTypes.bool,\n  required: PropTypes.bool,\n  checked: PropTypes.bool,\n  error: PropTypes.bool,\n  onChange: PropTypes.func,\n  modified: PropTypes.bool,\n  noLabelMargins: PropTypes.bool,\n  theme: PropTypes.oneOf(['coorpmanager', 'default']),\n  titleStyle: PropTypes.oneOf(keys(titleStylesClassNames))\n};\n\nexport default InputCheckbox;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/input-checkbox/index.js"],"names":["titleStylesClassNames","inherit","style","primary","secondary","tertiary","InputCheckbox","props","checked","onChange","error","disabled","required","titleStyle","modified","theme","title","propsTitle","noLabelMargins","titleStyleClassName","idCheckbox","handleChange","e","target","modifiedClassName","coorpManagerModified","defaultModified","errorClassName","coorpManagerError","defaultError","defaultContainerClassName","coorpManager","default","className","checkbox","label","undefined","icon","propTypes","PropTypes","string","isRequired","bool","func","oneOf"],"mappings":"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","sourcesContent":["import React, {useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {NovaSolidStatusValidate as CheckIcon} from '@coorpacademy/nova-icons';\nimport {keys, noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst titleStylesClassNames = {\n  inherit: style.inherit,\n  primary: style.primary,\n  secondary: style.secondary,\n  tertiary: style.tertiary\n};\n\nconst InputCheckbox = props => {\n  const {\n    checked,\n    onChange = noop,\n    error,\n    disabled,\n    required,\n    titleStyle = 'primary',\n    modified = false,\n    theme = 'default',\n    title: propsTitle,\n    noLabelMargins = false\n  } = props;\n\n  const titleStyleClassName = titleStylesClassNames[titleStyle];\n  const idCheckbox = uniqueId('input-checkbox-');\n  const title = `${propsTitle}${required ? '*' : ''}`;\n  const handleChange = useCallback(e => onChange(e.target.checked), [onChange]);\n\n  const modifiedClassName =\n    theme === 'coorpmanager' ? style.coorpManagerModified : style.defaultModified;\n  const errorClassName = theme === 'coorpmanager' ? style.coorpManagerError : style.defaultError;\n  const defaultContainerClassName = theme === 'coorpmanager' ? style.coorpManager : style.default;\n\n  const className = getClassState(\n    defaultContainerClassName,\n    modifiedClassName,\n    errorClassName,\n    modified,\n    error\n  );\n\n  return (\n    <label className={className} htmlFor={idCheckbox} data-name=\"checkbox-input-label\">\n      <input\n        type=\"checkbox\"\n        className={style.checkbox}\n        name={title}\n        id={idCheckbox}\n        checked={checked}\n        onChange={handleChange}\n        disabled={disabled}\n        data-name=\"checkbox-input\"\n      />\n      <div\n        data-name=\"checkbox-label\"\n        className={classnames(style.label, noLabelMargins ? style.noLabelMargins : undefined)}\n      >\n        <CheckIcon className={style.icon} />\n      </div>\n      <span className={titleStyleClassName} title={title}>\n        {title}\n      </span>\n    </label>\n  );\n};\n\nInputCheckbox.propTypes = {\n  title: PropTypes.string.isRequired,\n  disabled: PropTypes.bool,\n  required: PropTypes.bool,\n  checked: PropTypes.bool,\n  error: PropTypes.bool,\n  onChange: PropTypes.func,\n  modified: PropTypes.bool,\n  noLabelMargins: PropTypes.bool,\n  theme: PropTypes.oneOf(['coorpmanager', 'default']),\n  titleStyle: PropTypes.oneOf(keys(titleStylesClassNames))\n};\n\nexport default InputCheckbox;\n"],"file":"index.js"}

package/lib/atom/input-switch/index.js

@@ -32,7 +32,9 @@ const InputSwitch = props => {
     description,
     modified = false,
     theme = 'default',
-    titlePosition = 'left'
+    titlePosition = 'left',
+    details = '',
+    requiredSelection = false
   } = props;
   const idSwitch = id || (0, _uniqueId2.default)('input-switch-');
   const isDisabled = disabled ? 'disabled' : '';
@@ -43,13 +45,42 @@ const InputSwitch = props => {
   const descriptionView = description ? /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.description
   }, description) : null;
-  const defaultClass = theme === 'coorpmanager' ? _style.default.coorpmanager : _style.default.default;
-  const modifiedClass = theme === 'coorpmanager' ? _style.default.coorpmanagerModified : _style.default.modified;
+
+  const getClass = () => {
+    switch (theme) {
+      case 'coorpmanager':
+        return {
+          defaultClass: _style.default.coorpmanager,
+          modifiedClass: _style.default.coorpmanagerModified
+        };
+
+      case 'mooc':
+        return {
+          defaultClass: _style.default.partielUncheck,
+          modifiedClass: _style.default.coorpmanagerModified
+        };
+
+      default:
+        return {
+          defaultClass: _style.default.default,
+          modifiedClass: _style.default.modified
+        };
+    }
+  };
+
+  const {
+    defaultClass,
+    modifiedClass
+  } = getClass();
   const className = (0, _getClassState.default)(defaultClass, modifiedClass, null, modified);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: className,
     "data-name": `switch-input-${theme}`
-  }, titlePosition === 'left' ? titleView : null, /*#__PURE__*/_react.default.createElement("input", {
+  }, titlePosition === 'left' ? titleView : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: requiredSelection ? _style.default.requiredSelection : null
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.btnSwitchContainer
+  }, /*#__PURE__*/_react.default.createElement("input", {
     type: "checkbox",
     id: idSwitch,
     name: name,
@@ -58,8 +89,13 @@ const InputSwitch = props => {
     disabled: isDisabled,
     className: _style.default.checkbox
   }), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: idSwitch
-  }), titlePosition === 'right' ? titleView : null, descriptionView);
+    htmlFor: idSwitch,
+    "data-name": "input-switch-label"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: !details ? _style.default.alignedTextContainer : null
+  }, titlePosition === 'right' ? titleView : null, details ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.detailsTxt
+  }, details) : null), descriptionView);
 };
 
 InputSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -72,7 +108,9 @@ InputSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
   description: _propTypes.default.string,
   modified: _propTypes.default.bool,
   titlePosition: _propTypes.default.oneOf(['right', 'left']),
-  theme: _propTypes.default.oneOf(['default', 'coorpmanager'])
+  theme: _propTypes.default.oneOf(['default', 'coorpmanager', 'mooc']),
+  details: _propTypes.default.string,
+  requiredSelection: _propTypes.default.bool
 } : {};
 var _default = InputSwitch;
 exports.default = _default;

package/lib/atom/input-switch/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/input-switch/index.js"],"names":["InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","idSwitch","isDisabled","handleChange","e","target","checked","titleView","style","descriptionView","defaultClass","coorpmanager","default","modifiedClass","coorpmanagerModified","className","checkbox","propTypes","PropTypes","string","bool","func","oneOf"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAEA,MAAMA,WAAW,GAAGC,KAAK,IAAI;AAC3B,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,IAFI;AAGJC,IAAAA,EAHI;AAIJC,IAAAA,KAJI;AAKJC,IAAAA,QALI;AAMJC,IAAAA,QAAQ,iBANJ;AAOJC,IAAAA,WAPI;AAQJC,IAAAA,QAAQ,GAAG,KARP;AASJC,IAAAA,KAAK,GAAG,SATJ;AAUJC,IAAAA,aAAa,GAAG;AAVZ,MAWFV,KAXJ;AAaA,QAAMW,QAAQ,GAAGR,EAAE,IAAI,wBAAS,eAAT,CAAvB;AACA,QAAMS,UAAU,GAAGP,QAAQ,GAAG,UAAH,GAAgB,EAA3C;AACA,QAAMQ,YAAY,GAAG,oBAAQ,MAAMC,CAAC,IAAIR,QAAQ,CAACQ,CAAC,CAACC,MAAF,CAASC,OAAV,CAA3B,EAA+C,CAACV,QAAD,CAA/C,CAArB;AAEA,QAAMW,SAAS,GAAGhB,KAAK,gBAAG;AAAM,IAAA,SAAS,EAAEiB,eAAMjB;AAAvB,KAAgC,GAAEA,KAAM,GAAxC,CAAH,GAAwD,IAA/E;AAEA,QAAMkB,eAAe,GAAGZ,WAAW,gBACjC;AAAK,IAAA,SAAS,EAAEW,eAAMX;AAAtB,KAAoCA,WAApC,CADiC,GAE/B,IAFJ;AAIA,QAAMa,YAAY,GAAGX,KAAK,KAAK,cAAV,GAA2BS,eAAMG,YAAjC,GAAgDH,eAAMI,OAA3E;AACA,QAAMC,aAAa,GAAGd,KAAK,KAAK,cAAV,GAA2BS,eAAMM,oBAAjC,GAAwDN,eAAMV,QAApF;AACA,QAAMiB,SAAS,GAAG,4BAAcL,YAAd,EAA4BG,aAA5B,EAA2C,IAA3C,EAAiDf,QAAjD,CAAlB;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEiB,SAAhB;AAA2B,iBAAY,gBAAehB,KAAM;AAA5D,KACGC,aAAa,KAAK,MAAlB,GAA2BO,SAA3B,GAAuC,IAD1C,eAEE;AACE,IAAA,IAAI,EAAC,UADP;AAEE,IAAA,EAAE,EAAEN,QAFN;AAGE,IAAA,IAAI,EAAET,IAHR;AAIE,IAAA,QAAQ,EAAEW,YAJZ;AAKE,IAAA,OAAO,EAAET,KALX;AAME,IAAA,QAAQ,EAAEQ,UANZ;AAOE,IAAA,SAAS,EAAEM,eAAMQ;AAPnB,IAFF,eAWE;AAAO,IAAA,OAAO,EAAEf;AAAhB,IAXF,EAYGD,aAAa,KAAK,OAAlB,GAA4BO,SAA5B,GAAwC,IAZ3C,EAaGE,eAbH,CADF;AAiBD,CA7CD;;AA+CApB,WAAW,CAAC4B,SAAZ,2CAAwB;AACtB1B,EAAAA,KAAK,EAAE2B,mBAAUC,MADK;AAEtB3B,EAAAA,IAAI,EAAE0B,mBAAUC,MAFM;AAGtB1B,EAAAA,EAAE,EAAEyB,mBAAUC,MAHQ;AAItBzB,EAAAA,KAAK,EAAEwB,mBAAUE,IAJK;AAKtBzB,EAAAA,QAAQ,EAAEuB,mBAAUE,IALE;AAMtBxB,EAAAA,QAAQ,EAAEsB,mBAAUG,IANE;AAOtBxB,EAAAA,WAAW,EAAEqB,mBAAUC,MAPD;AAQtBrB,EAAAA,QAAQ,EAAEoB,mBAAUE,IARE;AAStBpB,EAAAA,aAAa,EAAEkB,mBAAUI,KAAV,CAAgB,CAAC,OAAD,EAAU,MAAV,CAAhB,CATO;AAUtBvB,EAAAA,KAAK,EAAEmB,mBAAUI,KAAV,CAAgB,CAAC,SAAD,EAAY,cAAZ,CAAhB;AAVe,CAAxB;eAYejC,W","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n  const {\n    title,\n    name,\n    id,\n    value,\n    disabled,\n    onChange = noop,\n    description,\n    modified = false,\n    theme = 'default',\n    titlePosition = 'left'\n  } = props;\n\n  const idSwitch = id || uniqueId('input-switch-');\n  const isDisabled = disabled ? 'disabled' : '';\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  const titleView = title ? <span className={style.title}>{`${title} `}</span> : null;\n\n  const descriptionView = description ? (\n    <div className={style.description}>{description}</div>\n  ) : null;\n\n  const defaultClass = theme === 'coorpmanager' ? style.coorpmanager : style.default;\n  const modifiedClass = theme === 'coorpmanager' ? style.coorpmanagerModified : style.modified;\n  const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n  return (\n    <div className={className} data-name={`switch-input-${theme}`}>\n      {titlePosition === 'left' ? titleView : null}\n      <input\n        type=\"checkbox\"\n        id={idSwitch}\n        name={name}\n        onChange={handleChange}\n        checked={value}\n        disabled={isDisabled}\n        className={style.checkbox}\n      />\n      <label htmlFor={idSwitch} />\n      {titlePosition === 'right' ? titleView : null}\n      {descriptionView}\n    </div>\n  );\n};\n\nInputSwitch.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  id: PropTypes.string,\n  value: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  description: PropTypes.string,\n  modified: PropTypes.bool,\n  titlePosition: PropTypes.oneOf(['right', 'left']),\n  theme: PropTypes.oneOf(['default', 'coorpmanager'])\n};\nexport default InputSwitch;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/input-switch/index.js"],"names":["InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","idSwitch","isDisabled","handleChange","e","target","checked","titleView","style","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","PropTypes","string","bool","func","oneOf"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n  const {\n    title,\n    name,\n    id,\n    value,\n    disabled,\n    onChange = noop,\n    description,\n    modified = false,\n    theme = 'default',\n    titlePosition = 'left',\n    details = '',\n    requiredSelection = false\n  } = props;\n\n  const idSwitch = id || uniqueId('input-switch-');\n  const isDisabled = disabled ? 'disabled' : '';\n  const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n  const titleView = title ? <span className={style.title}>{`${title} `}</span> : null;\n\n  const descriptionView = description ? (\n    <div className={style.description}>{description}</div>\n  ) : null;\n\n  const getClass = () => {\n    switch (theme) {\n      case 'coorpmanager':\n        return {\n          defaultClass: style.coorpmanager,\n          modifiedClass: style.coorpmanagerModified\n        };\n      case 'mooc':\n        return {\n          defaultClass: style.partielUncheck,\n          modifiedClass: style.coorpmanagerModified\n        };\n      default:\n        return {defaultClass: style.default, modifiedClass: style.modified};\n    }\n  };\n  const {defaultClass, modifiedClass} = getClass();\n  const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n  return (\n    <div className={className} data-name={`switch-input-${theme}`}>\n      {titlePosition === 'left' ? titleView : null}\n      <div className={requiredSelection ? style.requiredSelection : null}>\n        <div className={style.btnSwitchContainer}>\n          <input\n            type=\"checkbox\"\n            id={idSwitch}\n            name={name}\n            onChange={handleChange}\n            checked={value}\n            disabled={isDisabled}\n            className={style.checkbox}\n          />\n          <label htmlFor={idSwitch} data-name=\"input-switch-label\" />\n        </div>\n      </div>\n      <div className={!details ? style.alignedTextContainer : null}>\n        {titlePosition === 'right' ? titleView : null}\n        {details ? <div className={style.detailsTxt}>{details}</div> : null}\n      </div>\n      {descriptionView}\n    </div>\n  );\n};\n\nInputSwitch.propTypes = {\n  title: PropTypes.string,\n  name: PropTypes.string,\n  id: PropTypes.string,\n  value: PropTypes.bool,\n  disabled: PropTypes.bool,\n  onChange: PropTypes.func,\n  description: PropTypes.string,\n  modified: PropTypes.bool,\n  titlePosition: PropTypes.oneOf(['right', 'left']),\n  theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n  details: PropTypes.string,\n  requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"file":"index.js"}

package/lib/atom/input-switch/style.css

@@ -8,11 +8,10 @@
 @value cm_grey_200 from colors;
 @value black from colors;
 @value cm_primary_blue from colors;
+@value light_blue from colors;
 
 .default {
   display: flex;
-  align-items: center;
-  align-content: center;
 }
 
 .modified {
@@ -27,6 +26,10 @@
   composes: modified;
 }
 
+.partielUncheck {
+  composes: coorpmanager;
+}
+
 .default label {
   height: 30px;
   position: relative;
@@ -97,12 +100,11 @@
   font-size: 15px;
   text-transform: none;
   color: dark;
-  width: 180px;
   margin-right: 20px;
-  min-height: 50px;
   display: flex;
   align-items: center;
   align-content: center;
+  min-height: 24px;
 }
 
 .description {
@@ -118,7 +120,7 @@
   width: 48px;
   height: 24px;
   border: solid 2px cm_grey_200;
-  margin-right: 8px;
+  margin-right: 16px;
   background: cm_grey_200;
 }
 
@@ -148,4 +150,52 @@
 
 .coorpmanager .checkbox:disabled ~ label::after {
   background: white;
-}
+}
+
+.partielUncheck label::after {
+  width: 19px;
+  height: 19px;
+  border: 3px solid cm_primary_blue;
+  margin-left: 8px;
+}
+.partielUncheck label {
+  width: 50px;
+  height: 26px;
+  background: light_blue;
+  border: 0px;
+}
+.partielUncheck .checkbox:checked ~ label {
+  background-color: cm_primary_blue;
+  border: 0px;
+  width: 50px;
+  height: 26px;
+}
+
+.partielUncheck .checkbox:checked ~ label::after {
+  margin-left: 0px;
+}
+
+.btnSwitchContainer {
+  display: flex;
+  align-items: center;
+}
+.alignedTextContainer {
+  display: flex;
+  align-items: center;
+  align-content: center;
+}
+.detailsTxt {
+  font-family: Gilroy;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+  color: black;
+  font-style: normal;
+  white-space: pre-line;
+  margin-right: 24px;
+}
+.requiredSelection label, .requiredSelection .checkbox:disabled ~ label {
+  background-color: cm_primary_blue;
+  border-color: cm_primary_blue;
+  opacity: 0.4;
+}

package/lib/atom/select-modal/index.native.js

@@ -0,0 +1,135 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _novaIcons = require("@coorpacademy/nova-icons");
+
+var _reactNativeModal = _interopRequireDefault(require("react-native-modal"));
+
+var _index = _interopRequireDefault(require("../../hoc/touchable/index.native"));
+
+var _analytics = require("../../variables/analytics");
+
+var _index2 = _interopRequireDefault(require("../space/index.native"));
+
+var _index3 = _interopRequireDefault(require("../text/index.native"));
+
+var _index4 = _interopRequireDefault(require("../../hoc/modal/select/index.native"));
+
+var _templateContext = require("../../template/app-review/template-context");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ICON_WIDTH = 15;
+
+const createStyleSheet = theme => _reactNative.StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  text: {
+    flex: 1,
+    color: theme.colors.gray.medium,
+    textAlign: 'center'
+  }
+});
+
+const logEvent = (eventName, analyticsID, analytics, questionType) => {
+  analytics && analytics.logEvent(eventName, {
+    id: analyticsID,
+    questionType
+  });
+};
+
+const Select = props => {
+  const templateContext = (0, _templateContext.useTemplateContext)();
+  const {
+    theme,
+    analytics
+  } = templateContext;
+  const [styleSheet, setStylesheet] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    const _stylesheet = createStyleSheet(theme);
+
+    setStylesheet(_stylesheet);
+  }, [theme]);
+  const {
+    analyticsID,
+    onBlur,
+    onFocus,
+    onChange,
+    values,
+    placeholder,
+    value,
+    style,
+    textStyle,
+    color,
+    questionType,
+    isFocused = false,
+    isDisabled = false,
+    testID = 'select'
+  } = props;
+  const handleFocus = (0, _react.useCallback)(() => {
+    if (!onFocus) return;
+    analytics && logEvent(_analytics.ANALYTICS_EVENT_TYPE.OPEN_SELECT, analyticsID, analytics, questionType);
+    onFocus();
+  }, [analytics, analyticsID, onFocus, questionType]);
+  const handleBlur = (0, _react.useCallback)(() => {
+    if (!onBlur) return;
+    analytics && logEvent(_analytics.ANALYTICS_EVENT_TYPE.CLOSE_SELECT, analyticsID, analytics, questionType);
+    onBlur();
+  }, [analytics, analyticsID, onBlur, questionType]);
+  const handleChange = (0, _react.useCallback)(_value => {
+    onChange(_value);
+    handleBlur();
+  }, [onChange, handleBlur]);
+
+  if (!styleSheet) {
+    return null;
+  }
+
+  const selectedItem = values.find(item => item.text === value);
+  const text = selectedItem && selectedItem.text || placeholder || null;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.default, {
+    disabled: isDisabled,
+    onPress: handleFocus,
+    analyticsID: analyticsID,
+    testID: `${testID}-input`
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styleSheet.container, style]
+  }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+    style: [styleSheet.text, textStyle, color && {
+      color
+    }]
+  }, text), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    type: "tiny"
+  }), /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowDown, {
+    color: color || theme.colors.gray.dark,
+    height: ICON_WIDTH,
+    width: ICON_WIDTH
+  }))), /*#__PURE__*/_react.default.createElement(_reactNativeModal.default, {
+    isVisible: isFocused,
+    onSwipeComplete: handleBlur,
+    onBackdropPress: handleBlur,
+    testID: testID
+  }, /*#__PURE__*/_react.default.createElement(_index4.default, {
+    value: value,
+    values: values,
+    onChange: handleChange,
+    onClose: handleBlur,
+    testID: `${testID}-modal`
+  })));
+};
+
+var _default = Select;
+exports.default = _default;
+//# sourceMappingURL=index.native.js.map

package/lib/atom/select-modal/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/atom/select-modal/index.native.tsx"],"names":["ICON_WIDTH","createStyleSheet","theme","StyleSheet","create","container","alignItems","flexDirection","text","flex","color","colors","gray","medium","textAlign","logEvent","eventName","analyticsID","analytics","questionType","id","Select","props","templateContext","styleSheet","setStylesheet","_stylesheet","onBlur","onFocus","onChange","values","placeholder","value","style","textStyle","isFocused","isDisabled","testID","handleFocus","ANALYTICS_EVENT_TYPE","OPEN_SELECT","handleBlur","CLOSE_SELECT","handleChange","_value","selectedItem","find","item","dark"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useCallback} from 'react';\nimport {View, StyleSheet, ViewStyle, FlexAlignType} from 'react-native';\nimport {NovaCompositionNavigationArrowDown as ArrowDown} from '@coorpacademy/nova-icons';\nimport Modal from 'react-native-modal';\nimport Touchable from '../../hoc/touchable/index.native';\nimport type {ChoiceItem, QuestionType} from '../../types/progression-engine.d';\nimport {Theme} from '../../variables/theme.native';\n\nimport {ANALYTICS_EVENT_TYPE, Analytics} from '../../variables/analytics';\nimport Space from '../space/index.native';\nimport Text from '../text/index.native';\nimport ModalSelect, {OnChangeFunction} from '../../hoc/modal/select/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\n\nexport type Props = {\n  analyticsID: string;\n  questionType: QuestionType;\n  isDisabled?: boolean;\n  isFocused?: boolean;\n  values: Array<ChoiceItem>;\n  value?: string;\n  placeholder?: string;\n  color?: string;\n  onChange: OnChangeFunction;\n  onFocus: () => void;\n  onBlur: () => void;\n  style?: ViewStyle;\n  textStyle?: ViewStyle;\n  testID?: string;\n};\n\ntype StyleSheetType = {\n  container: {\n    alignItems: FlexAlignType;\n    flexDirection: 'row' | 'column' | 'row-reverse' | 'column-reverse' | undefined;\n  };\n  text: {\n    flex: number;\n    color: string;\n    textAlign: string;\n  };\n};\n\nconst ICON_WIDTH = 15;\n\nconst createStyleSheet = (theme: Theme) =>\n  StyleSheet.create({\n    container: {\n      alignItems: 'center',\n      flexDirection: 'row'\n    },\n    text: {\n      flex: 1,\n      color: theme.colors.gray.medium,\n      textAlign: 'center'\n    }\n  });\n\nconst logEvent = (\n  eventName: string,\n  analyticsID: String,\n  analytics: Analytics,\n  questionType: QuestionType\n) => {\n  analytics &&\n    analytics.logEvent(eventName, {\n      id: analyticsID,\n      questionType\n    });\n};\n\nconst Select = (props: Props) => {\n  const templateContext = useTemplateContext();\n  const {theme, analytics} = templateContext;\n  const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n  useEffect(() => {\n    const _stylesheet = createStyleSheet(theme);\n    setStylesheet(_stylesheet);\n  }, [theme]);\n\n  const {\n    analyticsID,\n    onBlur,\n    onFocus,\n    onChange,\n    values,\n    placeholder,\n    value,\n    style,\n    textStyle,\n    color,\n    questionType,\n    isFocused = false,\n    isDisabled = false,\n    testID = 'select'\n  } = props;\n\n  const handleFocus = useCallback(() => {\n    if (!onFocus) return;\n\n    analytics && logEvent(ANALYTICS_EVENT_TYPE.OPEN_SELECT, analyticsID, analytics, questionType);\n    onFocus();\n  }, [analytics, analyticsID, onFocus, questionType]);\n\n  const handleBlur = useCallback(() => {\n    if (!onBlur) return;\n\n    analytics && logEvent(ANALYTICS_EVENT_TYPE.CLOSE_SELECT, analyticsID, analytics, questionType);\n    onBlur();\n  }, [analytics, analyticsID, onBlur, questionType]);\n\n  const handleChange = useCallback(\n    _value => {\n      onChange(_value);\n      handleBlur();\n    },\n    [onChange, handleBlur]\n  );\n\n  if (!styleSheet) {\n    return null;\n  }\n\n  const selectedItem = values.find(item => item.text === value);\n  const text = (selectedItem && selectedItem.text) || placeholder || null;\n\n  return (\n    <>\n      <Touchable\n        disabled={isDisabled}\n        onPress={handleFocus}\n        analyticsID={analyticsID}\n        testID={`${testID}-input`}\n      >\n        <View style={[styleSheet.container, style]}>\n          <Text style={[styleSheet.text, textStyle, color && {color}]}>{text}</Text>\n          <Space type=\"tiny\" />\n          <ArrowDown\n            color={color || theme.colors.gray.dark}\n            height={ICON_WIDTH}\n            width={ICON_WIDTH}\n          />\n        </View>\n      </Touchable>\n      <Modal\n        isVisible={isFocused}\n        onSwipeComplete={handleBlur}\n        onBackdropPress={handleBlur}\n        testID={testID}\n      >\n        <ModalSelect\n          value={value}\n          values={values}\n          onChange={handleChange}\n          onClose={handleBlur}\n          testID={`${testID}-modal`}\n        />\n      </Modal>\n    </>\n  );\n};\n\nexport default Select;\n"],"file":"index.native.js"}

package/lib/atom/space/index.native.js

@@ -0,0 +1,33 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _templateContext = require("../../template/app-review/template-context");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Space = ({
+  type = 'tiny'
+}) => {
+  const templateContext = (0, _templateContext.useTemplateContext)();
+  const {
+    theme
+  } = templateContext;
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: {
+      width: theme.spacing[type],
+      height: theme.spacing[type]
+    }
+  });
+};
+
+var _default = Space;
+exports.default = _default;
+//# sourceMappingURL=index.native.js.map

package/lib/atom/space/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/atom/space/index.native.tsx"],"names":["Space","type","templateContext","theme","width","spacing","height"],"mappings":";;;;;AAAA;;AACA;;AAEA;;;;;;AAMA,MAAMA,KAAK,GAAG,CAAC;AAACC,EAAAA,IAAI,GAAG;AAAR,CAAD,KAA4B;AACxC,QAAMC,eAAe,GAAG,0CAAxB;AAEA,QAAM;AAACC,IAAAA;AAAD,MAAUD,eAAhB;AAEA,sBAAO,oBAAC,iBAAD;AAAM,IAAA,KAAK,EAAE;AAACE,MAAAA,KAAK,EAAED,KAAK,CAACE,OAAN,CAAcJ,IAAd,CAAR;AAA6BK,MAAAA,MAAM,EAAEH,KAAK,CAACE,OAAN,CAAcJ,IAAd;AAArC;AAAb,IAAP;AACD,CAND;;eAQeD,K","sourcesContent":["import * as React from 'react';\nimport {View} from 'react-native';\nimport type {SpaceType} from '../../variables/theme.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\n\ninterface Props {\n  type?: SpaceType;\n}\n\nconst Space = ({type = 'tiny'}: Props) => {\n  const templateContext = useTemplateContext();\n\n  const {theme} = templateContext;\n\n  return <View style={{width: theme.spacing[type], height: theme.spacing[type]}} />;\n};\n\nexport default Space;\n"],"file":"index.native.js"}