be-components 3.4.4 → 3.4.6

package/lib/commonjs/Share/index.js

@@ -5,38 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _Text = _interopRequireDefault(require("../Components/Text"));
 var _reactNative = require("react-native");
+var Clipboard = _interopRequireWildcard(require("expo-clipboard"));
 var _styles = require("../constants/styles");
 var _Components = require("../Components");
-var _colors = _interopRequireDefault(require("../constants/colors"));
 var _api = require("./api");
 var _EmbedPreview = _interopRequireDefault(require("./components/EmbedPreview"));
+var _useColors = require("../constants/useColors");
+var _Themed = require("../Components/Themed");
+var _useContacts = require("../SocialComponents/Contacts/useContacts");
+var SMS = _interopRequireWildcard(require("expo-sms"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const native_share_options = [{
-  name: 'twitter',
-  getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.TwitterXIcon, {
-    size: 18
-  })
-}, {
-  name: 'instagram',
-  getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.InstagramIcon, {
-    size: 18
-  })
-}, {
-  name: 'facebook',
-  getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.FacebookIcon, {
-    size: 18
-  })
-}, {
-  name: 'moare',
-  getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.MoreIcon, {
-    size: 18,
-    color: _colors.default.brand.midnight
-  })
-}];
 const ShareWidget = ({
   generated_link_id,
   title,
@@ -54,6 +35,8 @@ const ShareWidget = ({
   onCancel,
   onShare
 }) => {
+  const Colors = (0, _useColors.useColors)();
+  const Contacts = (0, _useContacts.useContacts)({});
   const [preview_embed, setPreviewEmbed] = (0, _react.useState)(false);
   const [link_height, setLinkHeight] = (0, _react.useState)(0);
   const [active_tab, setActiveTab] = (0, _react.useState)('link');
@@ -75,6 +58,28 @@ const ShareWidget = ({
     update_loading,
     native_share_allowed
   } = link_status;
+  const native_share_options = [{
+    name: 'twitter',
+    getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.TwitterXIcon, {
+      size: 18
+    })
+  }, {
+    name: 'instagram',
+    getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.InstagramIcon, {
+      size: 18
+    })
+  }, {
+    name: 'facebook',
+    getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.FacebookIcon, {
+      size: 18
+    })
+  }, {
+    name: 'more',
+    getIcon: () => /*#__PURE__*/_react.default.createElement(_Components.Icons.MoreIcon, {
+      size: 18,
+      color: Colors.text.h1
+    })
+  }];
   (0, _react.useEffect)(() => {
     if (!redirect_url && !generated_link_id) {
       return;
@@ -134,8 +139,45 @@ const ShareWidget = ({
       url
     });
   };
+  const handleSelectContact = async () => {
+    if (!Contacts.is_available) {
+      return undefined;
+    }
+    if (!Contacts.permission) {
+      return undefined;
+    }
+    if (!Contacts.permission.granted) {
+      if (Contacts.permission.canAskAgain) {
+        Contacts.requestPermissions();
+        return undefined;
+      }
+      return; //We dont have access!!
+    }
+
+    //Ok! Contacts is granted.  Lets select a user
+    const response = await Contacts.getContact();
+    if (!response) {
+      return undefined;
+    } // Sorry we failed
+    let avail = await SMS.isAvailableAsync();
+    if (!avail) {
+      return undefined;
+    }
+    const {
+      player,
+      number
+    } = response;
+    const {
+      result
+    } = await SMS.sendSMSAsync(response.number, `${title} ${url}`, {});
+    return {
+      player,
+      number,
+      sms_result: result
+    };
+  };
   const renderNativeOptions = data => {
-    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    return /*#__PURE__*/_react.default.createElement(_Themed.View, {
       style: {
         padding: 5
       }
@@ -143,91 +185,88 @@ const ShareWidget = ({
   };
   const link_is_changed = JSON.stringify(draft_generated_link) != JSON.stringify(generated_link);
   const needs_verification = link_is_changed && !visible_id_valid;
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  return /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       ..._styles.view_styles.section,
       minWidth: 250,
       maxWidth,
       maxHeight
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    type: "header",
     style: {
-      ..._styles.view_styles.section_header,
-      borderBottomWidth: 1,
-      borderColor: _colors.default.shades.shade600
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       flex: 1
     }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    theme: "header"
-  }, "Share Modal"), /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+    theme: "h1"
+  }, "Share Modal"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     style: {
       marginTop: 3
     },
-    theme: "body"
-  }, title)), /*#__PURE__*/_react.default.createElement(_Components.Button, {
+    theme: "description"
+  }, title)), /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     title: "X",
-    title_weight: "regular",
-    borderRadius: 100,
-    backgroundColor: _colors.default.shades.shade100,
-    padding: 5,
+    type: "close",
     onPress: () => onCancel()
-  })), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, null, loading || !generated_link ? /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, null, loading || !generated_link ? /*#__PURE__*/_react.default.createElement(_Themed.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
     style: {
       padding: 20,
       alignSelf: 'center'
     },
-    color: _colors.default.brand.midnight,
+    color: Colors.text.h1,
     size: 'large'
-  })) : active_tab == 'link' ? /*#__PURE__*/_react.default.createElement(_reactNative.View, null, editing && draft_generated_link ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  })) : active_tab == 'link' ? /*#__PURE__*/_react.default.createElement(_Themed.View, null, editing && draft_generated_link ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       ..._styles.view_styles.section_body
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       ..._styles.view_styles.body_row
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       flex: 1
     }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     size: 16,
-    color: _colors.default.brand.midnight,
+    theme: "description",
     weight: "regular"
-  }, "Edit This Link"), /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, "Edit This Link"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     style: {
       marginTop: 3
     },
-    theme: "body"
-  }, "Edit the visible Id and query parameters below"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    theme: "description"
+  }, "Edit the visible Id and query parameters below"))), /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
-      backgroundColor: _colors.default.shades.shade100,
       padding: 10
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       ..._styles.view_styles.body_row
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       flex: 1
     }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    theme: "header_2"
-  }, "Short Link"), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+    theme: "h2"
+  }, "Short Link"), /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       flexDirection: 'row',
       alignItems: 'center'
     }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     style: {
       marginTop: 3
     },
-    theme: "body"
-  }, "https://share.mybe.app/id/"), /*#__PURE__*/_react.default.createElement(_Components.TextInput, {
+    theme: "description"
+  }, "https://share.mybe.app/id/"), /*#__PURE__*/_react.default.createElement(_Themed.TextInput, {
     value: draft_generated_link.visible_id,
     style: {
       ..._styles.view_styles.input,
@@ -244,17 +283,17 @@ const ShareWidget = ({
         visible_id_valid: false
       });
     }
-  })))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  })))), /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       ..._styles.view_styles.body_row
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       flex: 1
     }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    theme: "header_2"
-  }, "Link Destination"), /*#__PURE__*/_react.default.createElement(_Components.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+    theme: "h1"
+  }, "Link Destination"), /*#__PURE__*/_react.default.createElement(_Themed.TextInput, {
     value: draft_generated_link.redirect_url,
     multiline: true,
     style: {
@@ -277,33 +316,29 @@ const ShareWidget = ({
         query_params: new_params
       });
     }
-  })))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  })))), /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       ..._styles.view_styles.section_footer
     }
-  }, /*#__PURE__*/_react.default.createElement(_Components.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     title: "Cancel",
-    title_color: _colors.default.shades.white,
-    borderRadius: 4,
-    backgroundColor: _colors.default.utility.error,
+    type: "error",
     onPress: () => setLinkStatus({
       ...link_status,
       editing: false,
       draft_generated_link: generated_link
     })
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }), /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       flex: 1
     }
-  }), needs_verification ? /*#__PURE__*/_react.default.createElement(_Components.Button, {
+  }), needs_verification ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     title: "Check Link Availability",
-    title_color: _colors.default.shades.white,
     style: {
       opacity: update_loading ? 0.5 : 1
     },
-    borderRadius: 4,
     loading: update_loading,
-    backgroundColor: _colors.default.brand.electric,
+    type: "info",
     onPress: async () => {
       setLinkStatus({
         ...link_status,
@@ -323,16 +358,14 @@ const ShareWidget = ({
         visible_id_valid: true
       });
     }
-  }) : /*#__PURE__*/_react.default.createElement(_Components.Button, {
+  }) : /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     title: "Save",
     style: {
       opacity: link_is_changed && !update_loading ? 1 : 0.5
     },
     disabled: !link_is_changed,
     loading: update_loading,
-    title_color: _colors.default.shades.white,
-    borderRadius: 4,
-    backgroundColor: _colors.default.utility.success,
+    type: "success",
     onPress: async () => {
       setLinkStatus({
         ...link_status,
@@ -351,25 +384,31 @@ const ShareWidget = ({
         url: new_link?.url
       });
     }
-  }))) : /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }))) : /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       ..._styles.view_styles.section_body
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       paddingBottom: 0
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       ..._styles.view_styles.body_row
     }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     size: 16,
-    color: _colors.default.brand.midnight,
+    color: Colors.text.h1,
     weight: "regular"
-  }, "Share this link via")), native_share_allowed ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  }, "Share this link via")), /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
-      ..._styles.view_styles.body_row
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, native_share_allowed ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+    style: {
+      flex: 1,
+      flexDirection: 'row'
     },
     onPress: async () => {
       const share_event = await _api.ShareApi.share(title, body, link_status.url, generated_link.generated_link_id);
@@ -377,87 +416,81 @@ const ShareWidget = ({
         onShare(share_event);
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    float: true,
     style: {
       flexDirection: 'row',
       alignItems: 'center',
       padding: 3,
       paddingRight: 10,
       borderWidth: 1,
-      borderRadius: 22,
-      borderColor: _colors.default.highlights.highlight400Faded,
-      backgroundColor: _colors.default.shades.white,
-      ..._styles.view_styles.float
+      borderRadius: 22
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       height: 36,
       width: 36,
       marginRight: 10,
-      backgroundColor: _colors.default.brand.electric,
       borderRadius: 100,
       justifyContent: 'center',
       alignItems: 'center'
     }
   }, /*#__PURE__*/_react.default.createElement(_Components.Icons.ShareIcon, {
     size: 14,
-    color: _colors.default.shades.white
+    color: Colors.text.h1
   })), /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
     horizontal: true,
     data: native_share_options,
     keyExtractor: item => item.name,
     renderItem: renderNativeOptions
-  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), _reactNative.Platform.OS != 'web' && Contacts.is_available ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
+    onPress: () => handleSelectContact()
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, null, "Contacts!")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))), /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       paddingTop: 0
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       ..._styles.view_styles.body_row
     }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     selectable: true,
     size: 16,
-    color: _colors.default.brand.midnight,
+    color: Colors.text.h1,
     weight: "regular"
-  }, "Copy link")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, "Copy link")), /*#__PURE__*/_react.default.createElement(_Themed.View, {
+    type: "row",
     style: {
-      ..._styles.view_styles.body_row,
-      padding: 10,
-      borderRadius: 4,
-      borderWidth: 1,
-      borderColor: _colors.default.shades.shade600
+      padding: 10
     }
-  }, url ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  }, url ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     style: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: _colors.default.brand.electric,
       padding: 10,
       borderRadius: 4
     },
-    onPress: () => _reactNative.Clipboard.setString(url)
+    onPress: () => Clipboard.setStringAsync(url)
   }, /*#__PURE__*/_react.default.createElement(_Components.Icons.LinkIcon, {
     size: 18,
-    color: _colors.default.shades.white
-  }), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    color: Colors.text.h1
+  }), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     style: {
       marginLeft: 4
     },
     size: 12,
-    color: _colors.default.shades.white,
+    color: Colors.text.h1,
     textAlign: "left"
-  }, "Copy")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, "Copy")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     style: {
       marginLeft: 5,
       flex: 1
     },
-    theme: "body"
-  }, url), allow_edit ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    theme: "description"
+  }, url), allow_edit ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     style: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: _colors.default.brand.electric,
       padding: 10,
       borderRadius: 4
     },
@@ -467,140 +500,132 @@ const ShareWidget = ({
     })
   }, /*#__PURE__*/_react.default.createElement(_Components.Icons.EditIcon, {
     size: 18,
-    color: _colors.default.shades.white
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))))) : active_tab == 'embed' && embed?.embed_code ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    color: Colors.text.h1
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))))) : active_tab == 'embed' && embed?.embed_code ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       ..._styles.view_styles.section_body,
       paddingTop: 0
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       ..._styles.view_styles.body_row
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       flex: 1
     }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     size: 16,
-    color: _colors.default.brand.midnight,
-    weight: "regular"
-  }, "Embed this in your website"), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    theme: "description"
+  }, "Embed this in your website"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     style: {
       marginTop: 3
     },
-    theme: "body_2"
-  }, "Copy and past the code snippet below into the 'body' tag"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    theme: "light"
+  }, "Copy and past the code snippet below into the 'body' tag"))), /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
-      backgroundColor: _colors.default.shades.shade100,
       padding: 10
     }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     selectable: true,
     size: 14,
-    color: _colors.default.brand.midnight
-  }, embed.embed_code), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    theme: "description"
+  }, embed.embed_code), /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       ..._styles.view_styles.body_row
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     style: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: _colors.default.brand.electric,
       padding: 10,
       borderRadius: 4
     },
-    onPress: () => _reactNative.Clipboard.setString(embed.embed_code)
+    onPress: () => Clipboard.setStringAsync(embed.embed_code)
   }, /*#__PURE__*/_react.default.createElement(_Components.Icons.LinkIcon, {
     size: 18,
-    color: _colors.default.shades.white
-  }), /*#__PURE__*/_react.default.createElement(_Text.default, {
+    color: Colors.text.h1
+  }), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     style: {
       marginLeft: 4
     },
     size: 12,
-    color: _colors.default.shades.white,
+    color: Colors.text.h1,
     textAlign: "left"
-  }, "Copy")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, "Copy")), /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       flex: 1
     }
-  }), embed.widget_element && embed.script_source && embed.div_id && _reactNative.Platform.OS == 'web' ? /*#__PURE__*/_react.default.createElement(_Components.Button, {
+  }), embed.widget_element && embed.script_source && embed.div_id && _reactNative.Platform.OS == 'web' ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     title: preview_embed ? 'Hide Preview' : 'Show Preview',
-    title_color: _colors.default.shades.white,
-    borderRadius: 4,
-    padding: 10,
+    title_color: Colors.text.white,
     disabled: _reactNative.Platform.OS != 'web' ? true : false,
-    backgroundColor: preview_embed ? _colors.default.utility.error : _colors.default.brand.cyan,
+    backgroundColor: preview_embed ? Colors.text.error : Colors.text.action,
     onPress: () => setPreviewEmbed(!preview_embed)
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))), preview_embed && embed.widget_element && embed.script_source && embed.div_id ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null))), preview_embed && embed.widget_element && embed.script_source && embed.div_id ? /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       borderWidth: 1,
-      borderRadius: 4,
-      borderColor: _colors.default.brand.slate
+      borderRadius: 4
     }
   }, /*#__PURE__*/_react.default.createElement(_EmbedPreview.default, {
     script_source: embed.script_source,
     widget_element: embed.widget_element,
     div_id: embed.div_id
-  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), active_tab == 'embed' ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), active_tab == 'embed' ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     style: {
       ..._styles.view_styles.section_footer
     },
     onPress: () => setActiveTab('link')
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       flex: 1,
       marginRight: 10
     }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    theme: "header"
-  }, "Share Link Options"), /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+    theme: "h1"
+  }, "Share Link Options"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     style: {
       marginTop: 3
     },
-    theme: "body"
-  }, "Customize the link and share")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    theme: "description"
+  }, "Customize the link and share")), /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       height: 30,
       width: 30,
       borderRadius: 100,
-      backgroundColor: _colors.default.shades.white,
       justifyContent: 'center',
       alignItems: 'center'
     }
   }, /*#__PURE__*/_react.default.createElement(_Components.Icons.LinkIcon, {
-    color: _colors.default.brand.midnight,
+    color: Colors.text.h1,
     size: 18
-  }))) : active_tab == 'link' && embed?.embed_code ? /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  }))) : active_tab == 'link' && embed?.embed_code ? /*#__PURE__*/_react.default.createElement(_Themed.Button, {
     style: {
       ..._styles.view_styles.section_footer
     },
     onPress: () => setActiveTab('embed')
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       flex: 1,
       marginRight: 10
     }
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-    theme: "header"
-  }, "Available For Embed"), /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Themed.Text, {
+    theme: "h1"
+  }, "Available For Embed"), /*#__PURE__*/_react.default.createElement(_Themed.Text, {
     style: {
       marginTop: 3
     },
-    theme: "body"
-  }, "Copy code snippet and paste into the html of your website")), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    theme: "description"
+  }, "Copy code snippet and paste into the html of your website")), /*#__PURE__*/_react.default.createElement(_Themed.View, {
     style: {
       height: 30,
       width: 30,
       borderRadius: 100,
-      backgroundColor: _colors.default.shades.white,
       justifyContent: 'center',
       alignItems: 'center'
     }
   }, /*#__PURE__*/_react.default.createElement(_Components.Icons.EmbedIcon, {
-    color: _colors.default.brand.midnight,
+    color: Colors.text.h1,
     size: 18
   }))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)));
 };