@hero-design/rn 6.7.2 → 6.7.4-1

package/.eslintrc.json

@@ -4,7 +4,12 @@
     "es2021": true,
     "jest": true
   },
-  "extends": ["plugin:react/recommended", "airbnb", "prettier"],
+  "extends": [
+    "plugin:prettier/recommended",
+    "plugin:react/recommended",
+    "airbnb",
+    "prettier"
+  ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
@@ -22,6 +27,8 @@
     }
   },
   "rules": {
+    "react/jsx-props-no-spreading": 0,
+    "react/require-default-props": 0,
     "react/function-component-definition": 0,
     "react/jsx-filename-extension": [
       1,
@@ -35,7 +42,8 @@
       "files": ["*.ts", "*.tsx"],
       "rules": {
         "consistent-return": 0,
-        "default-case": 0
+        "default-case": 0,
+        "no-underscore-dangle": [2, { "allow": ["__hd__"] }]
       }
     }
   ]

package/.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/.expo/packager-info.json

@@ -0,0 +1,10 @@
+{
+  "devToolsPort": 19002,
+  "expoServerPort": null,
+  "packagerPort": null,
+  "packagerPid": null,
+  "expoServerNgrokUrl": null,
+  "packagerNgrokUrl": null,
+  "ngrokPid": null,
+  "webpackServerPort": null
+}

package/.expo/settings.json

@@ -0,0 +1,10 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false,
+  "scheme": null,
+  "devClient": false
+}

package/es/index.js

@@ -9182,7 +9182,7 @@ var addTag = function addTag(arg) {
   return arg;
 };
 
-function css(styles) {
+function css$1(styles) {
   var interpolations = [];
 
   for (var _i = 1; _i < arguments.length; _i++) {
@@ -9225,7 +9225,7 @@ function constructWithOptions(componentConstructor, tag, options) {
       interpolations[_i - 1] = arguments[_i];
     }
 
-    return componentConstructor(tag, options, css.apply(void 0, __spreadArray([initialStyles], __read(interpolations), false)));
+    return componentConstructor(tag, options, css$1.apply(void 0, __spreadArray([initialStyles], __read(interpolations), false)));
   };
   /* Modify/inject new props at runtime */
 
@@ -9272,7 +9272,7 @@ function mergeTheme(theme, outerTheme) {
  */
 
 
-function ThemeProvider(props) {
+function ThemeProvider$1(props) {
   var outerTheme = useContext(ThemeContext);
   var themeContext = useMemo(function () {
     return mergeTheme(props.theme, outerTheme);
@@ -9405,7 +9405,7 @@ function hoistNonReactStatics(targetComponent, sourceComponent, excludelist) {
   return targetComponent;
 }
 
-var useTheme = function useTheme() {
+var useTheme$1 = function useTheme() {
   return useContext(ThemeContext);
 };
 
@@ -9724,21 +9724,26 @@ var baseStyled = function baseStyled(tag) {
 
 
 var aliases = ['ActivityIndicator', 'ActivityIndicatorIOS', 'ART', 'Button', 'DatePickerIOS', 'DrawerLayoutAndroid', 'FlatList', 'Image', 'ImageBackground', 'ImageEditor', 'ImageStore', 'KeyboardAvoidingView', 'ListView', 'MapView', 'Modal', 'NavigatorIOS', 'Picker', 'PickerIOS', 'Pressable', 'ProgressBarAndroid', 'ProgressViewIOS', 'RecyclerViewBackedScrollView', 'RefreshControl', 'SafeAreaView', 'ScrollView', 'SectionList', 'SegmentedControlIOS', 'Slider', 'SliderIOS', 'SnapshotViewIOS', 'StatusBar', 'SwipeableListView', 'Switch', 'SwitchAndroid', 'SwitchIOS', 'TabBarIOS', 'Text', 'TextInput', 'ToastAndroid', 'ToolbarAndroid', 'Touchable', 'TouchableHighlight', 'TouchableNativeFeedback', 'TouchableOpacity', 'TouchableWithoutFeedback', 'View', 'ViewPagerAndroid', 'VirtualizedList', 'WebView'];
-var styled = baseStyled;
+var styled$1 = baseStyled;
 /* Define a getter for each alias which simply gets the reactNative component
  * and passes it to styled */
 
 aliases.forEach(function (alias) {
-  return Object.defineProperty(styled, alias, {
+  return Object.defineProperty(styled$1, alias, {
     enumerable: true,
     configurable: false,
     get: function get() {
       // @ts-expect-error supporting old imports in some cases
-      return styled(reactNative[alias]);
+      return styled$1(reactNative[alias]);
     }
   });
 });
 
+var styled = styled$1,
+    useTheme = useTheme$1,
+    css = css$1,
+    ThemeProvider = ThemeProvider$1;
+
 var palette = {
   black: '#000000',
   blue: '#1dbeee',
@@ -9821,41 +9826,6 @@ var palette = {
   yellowLight60: '#fdf1a1',
   yellowLight90: '#fffbe8'
 };
-({
-  primary: palette.violet,
-  primaryDark: palette.violetDark30,
-  primaryLight: palette.violetLight30,
-  primaryBackground: palette.violetLight90,
-  platformBackground: palette.greyLight85,
-  backgroundDark: palette.black,
-  backgroundLight: palette.white,
-  info: palette.dodgerBlue,
-  infoDark: palette.dodgerBlueDark30,
-  infoLight: palette.dodgerBlueLight30,
-  infoBackground: palette.dodgerBlueLight90,
-  success: palette.green,
-  successDark: palette.greenDark30,
-  successLight: palette.greenLight30,
-  successBackground: palette.greenLight90,
-  danger: palette.red,
-  dangerDark: palette.redDark30,
-  dangerLight: palette.redLight30,
-  dangerBackground: palette.redLight90,
-  warning: palette.orange,
-  warningDark: palette.orangeDark30,
-  warningLight: palette.orangeLight30,
-  warningBackground: palette.orangeLight90,
-  error: palette.pink,
-  errorDark: palette.pinkDark30,
-  errorLight: palette.pinkLight30,
-  errorBackground: palette.pinkLight90,
-  headingText: palette.black,
-  text: palette.greyDark45,
-  subduedText: palette.greyDark30,
-  disabledText: palette.grey,
-  outline: palette.greyLight60,
-  disabledBackground: palette.greyLight60
-});
 
 var systemPalette = {
   primary: palette.violet,
@@ -9916,34 +9886,47 @@ var lineHeights = {
   xsmall: fontSizes.xsmall + 8
 };
 
-var demoStyleColors = {
-  primaryBg: systemPalette.primaryLight,
-  dangerBg: systemPalette.dangerBackground,
-  warningBg: systemPalette.warningBackground
-};
-var demoStyleSpace = {
-  smallMargin: space.xxsmall,
-  mediumMargin: space.medium,
-  largeMargin: space.xxxxlarge
-};
-
-var theme = {
-  colors: _objectSpread2(_objectSpread2(_objectSpread2({}, palette), systemPalette), {}, {
-    demoStyle: demoStyleColors
-  }),
-  space: _objectSpread2(_objectSpread2({}, space), {}, {
-    demoStyle: demoStyleSpace
-  }),
+var globalTheme = {
+  colors: _objectSpread2({}, systemPalette),
+  space: space,
   fontSizes: fontSizes,
   fontWeights: fontWeights,
   lineHeights: lineHeights
 };
 
+var getExampleComponentTheme = function getExampleComponentTheme(theme) {
+  var colors = {
+    primaryBg: theme.colors.primaryLight,
+    dangerBg: theme.colors.dangerBackground,
+    warningBg: theme.colors.warningBackground
+  };
+  var space = {
+    smallMargin: theme.space.xxsmall,
+    mediumMargin: theme.space.medium,
+    largeMargin: theme.space.xxxxlarge
+  };
+  return {
+    colors: colors,
+    space: space
+  };
+};
+
+var getTheme = function getTheme() {
+  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : globalTheme;
+  return _objectSpread2(_objectSpread2({}, theme), {}, {
+    __hd__: {
+      exampleComponent: getExampleComponentTheme(theme)
+    }
+  });
+};
+
+var theme = getTheme();
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 var Square = styled(View)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
-  var boxSize = _ref.boxSize;
+  var themeSize = _ref.themeSize;
 
-  switch (boxSize) {
+  switch (themeSize) {
     case 'small':
       return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          height: 50px;\n          width: 200px;\n        "])));
 
@@ -9954,45 +9937,45 @@ var Square = styled(View)(_templateObject || (_templateObject = _taggedTemplateL
       return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          height: 150px;\n          width: 300px;\n        "])));
   }
 }, function (_ref2) {
-  var boxSpace = _ref2.boxSpace,
+  var themeMargin = _ref2.themeMargin,
       theme = _ref2.theme;
 
-  switch (boxSpace) {
+  switch (themeMargin) {
     case 'small':
-      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.space.demoStyle.smallMargin);
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.__hd__.exampleComponent.space.smallMargin);
 
     case 'medium':
-      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.space.demoStyle.mediumMargin);
+      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.__hd__.exampleComponent.space.mediumMargin);
 
     case 'large':
-      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.space.demoStyle.largeMargin);
+      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.__hd__.exampleComponent.space.largeMargin);
   }
 }, function (_ref3) {
-  var bgColor = _ref3.bgColor,
+  var themeBgColor = _ref3.themeBgColor,
       theme = _ref3.theme;
 
-  switch (bgColor) {
+  switch (themeBgColor) {
     case 'primary':
-      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.colors.demoStyle.primaryBg);
+      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.__hd__.exampleComponent.colors.primaryBg);
 
     case 'danger':
-      return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.colors.demoStyle.dangerBg);
+      return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.__hd__.exampleComponent.colors.dangerBg);
 
     case 'warning':
-      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.colors.demoStyle.warningBg);
+      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.__hd__.exampleComponent.colors.warningBg);
   }
 });
 
 var ExampleComponent = function ExampleComponent(_ref) {
-  var _ref$boxSize = _ref.boxSize,
-      boxSize = _ref$boxSize === void 0 ? "small" : _ref$boxSize,
-      boxSpace = _ref.boxSpace,
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size,
+      margin = _ref.margin,
       bgColor = _ref.bgColor;
   return /*#__PURE__*/React.createElement(Square, {
-    boxSize: boxSize,
-    boxSpace: boxSpace,
-    bgColor: bgColor
-  }, /*#__PURE__*/React.createElement(Text, null, "Square with ".concat(boxSize, " size, ").concat(boxSpace, " margin and ").concat(bgColor, " background.")));
+    themeSize: size,
+    themeMargin: margin,
+    themeBgColor: bgColor
+  }, /*#__PURE__*/React.createElement(Text, null, "Square with ".concat(size, " size, ").concat(margin, " margin and ").concat(bgColor, " background.")));
 };
 
-export { ExampleComponent, ThemeProvider, theme, useTheme };
+export { ExampleComponent, ThemeProvider, getTheme, theme, useTheme };

package/lib/index.js

@@ -9190,7 +9190,7 @@ var addTag = function addTag(arg) {
   return arg;
 };
 
-function css(styles) {
+function css$1(styles) {
   var interpolations = [];
 
   for (var _i = 1; _i < arguments.length; _i++) {
@@ -9233,7 +9233,7 @@ function constructWithOptions(componentConstructor, tag, options) {
       interpolations[_i - 1] = arguments[_i];
     }
 
-    return componentConstructor(tag, options, css.apply(void 0, __spreadArray([initialStyles], __read(interpolations), false)));
+    return componentConstructor(tag, options, css$1.apply(void 0, __spreadArray([initialStyles], __read(interpolations), false)));
   };
   /* Modify/inject new props at runtime */
 
@@ -9280,7 +9280,7 @@ function mergeTheme(theme, outerTheme) {
  */
 
 
-function ThemeProvider(props) {
+function ThemeProvider$1(props) {
   var outerTheme = React.useContext(ThemeContext);
   var themeContext = React.useMemo(function () {
     return mergeTheme(props.theme, outerTheme);
@@ -9413,7 +9413,7 @@ function hoistNonReactStatics(targetComponent, sourceComponent, excludelist) {
   return targetComponent;
 }
 
-var useTheme = function useTheme() {
+var useTheme$1 = function useTheme() {
   return React.useContext(ThemeContext);
 };
 
@@ -9732,21 +9732,26 @@ var baseStyled = function baseStyled(tag) {
 
 
 var aliases = ['ActivityIndicator', 'ActivityIndicatorIOS', 'ART', 'Button', 'DatePickerIOS', 'DrawerLayoutAndroid', 'FlatList', 'Image', 'ImageBackground', 'ImageEditor', 'ImageStore', 'KeyboardAvoidingView', 'ListView', 'MapView', 'Modal', 'NavigatorIOS', 'Picker', 'PickerIOS', 'Pressable', 'ProgressBarAndroid', 'ProgressViewIOS', 'RecyclerViewBackedScrollView', 'RefreshControl', 'SafeAreaView', 'ScrollView', 'SectionList', 'SegmentedControlIOS', 'Slider', 'SliderIOS', 'SnapshotViewIOS', 'StatusBar', 'SwipeableListView', 'Switch', 'SwitchAndroid', 'SwitchIOS', 'TabBarIOS', 'Text', 'TextInput', 'ToastAndroid', 'ToolbarAndroid', 'Touchable', 'TouchableHighlight', 'TouchableNativeFeedback', 'TouchableOpacity', 'TouchableWithoutFeedback', 'View', 'ViewPagerAndroid', 'VirtualizedList', 'WebView'];
-var styled = baseStyled;
+var styled$1 = baseStyled;
 /* Define a getter for each alias which simply gets the reactNative component
  * and passes it to styled */
 
 aliases.forEach(function (alias) {
-  return Object.defineProperty(styled, alias, {
+  return Object.defineProperty(styled$1, alias, {
     enumerable: true,
     configurable: false,
     get: function get() {
       // @ts-expect-error supporting old imports in some cases
-      return styled(reactNative[alias]);
+      return styled$1(reactNative[alias]);
     }
   });
 });
 
+var styled = styled$1,
+    useTheme = useTheme$1,
+    css = css$1,
+    ThemeProvider = ThemeProvider$1;
+
 var palette = {
   black: '#000000',
   blue: '#1dbeee',
@@ -9829,41 +9834,6 @@ var palette = {
   yellowLight60: '#fdf1a1',
   yellowLight90: '#fffbe8'
 };
-({
-  primary: palette.violet,
-  primaryDark: palette.violetDark30,
-  primaryLight: palette.violetLight30,
-  primaryBackground: palette.violetLight90,
-  platformBackground: palette.greyLight85,
-  backgroundDark: palette.black,
-  backgroundLight: palette.white,
-  info: palette.dodgerBlue,
-  infoDark: palette.dodgerBlueDark30,
-  infoLight: palette.dodgerBlueLight30,
-  infoBackground: palette.dodgerBlueLight90,
-  success: palette.green,
-  successDark: palette.greenDark30,
-  successLight: palette.greenLight30,
-  successBackground: palette.greenLight90,
-  danger: palette.red,
-  dangerDark: palette.redDark30,
-  dangerLight: palette.redLight30,
-  dangerBackground: palette.redLight90,
-  warning: palette.orange,
-  warningDark: palette.orangeDark30,
-  warningLight: palette.orangeLight30,
-  warningBackground: palette.orangeLight90,
-  error: palette.pink,
-  errorDark: palette.pinkDark30,
-  errorLight: palette.pinkLight30,
-  errorBackground: palette.pinkLight90,
-  headingText: palette.black,
-  text: palette.greyDark45,
-  subduedText: palette.greyDark30,
-  disabledText: palette.grey,
-  outline: palette.greyLight60,
-  disabledBackground: palette.greyLight60
-});
 
 var systemPalette = {
   primary: palette.violet,
@@ -9924,34 +9894,47 @@ var lineHeights = {
   xsmall: fontSizes.xsmall + 8
 };
 
-var demoStyleColors = {
-  primaryBg: systemPalette.primaryLight,
-  dangerBg: systemPalette.dangerBackground,
-  warningBg: systemPalette.warningBackground
-};
-var demoStyleSpace = {
-  smallMargin: space.xxsmall,
-  mediumMargin: space.medium,
-  largeMargin: space.xxxxlarge
-};
-
-var theme = {
-  colors: _objectSpread2(_objectSpread2(_objectSpread2({}, palette), systemPalette), {}, {
-    demoStyle: demoStyleColors
-  }),
-  space: _objectSpread2(_objectSpread2({}, space), {}, {
-    demoStyle: demoStyleSpace
-  }),
+var globalTheme = {
+  colors: _objectSpread2({}, systemPalette),
+  space: space,
   fontSizes: fontSizes,
   fontWeights: fontWeights,
   lineHeights: lineHeights
 };
 
+var getExampleComponentTheme = function getExampleComponentTheme(theme) {
+  var colors = {
+    primaryBg: theme.colors.primaryLight,
+    dangerBg: theme.colors.dangerBackground,
+    warningBg: theme.colors.warningBackground
+  };
+  var space = {
+    smallMargin: theme.space.xxsmall,
+    mediumMargin: theme.space.medium,
+    largeMargin: theme.space.xxxxlarge
+  };
+  return {
+    colors: colors,
+    space: space
+  };
+};
+
+var getTheme = function getTheme() {
+  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : globalTheme;
+  return _objectSpread2(_objectSpread2({}, theme), {}, {
+    __hd__: {
+      exampleComponent: getExampleComponentTheme(theme)
+    }
+  });
+};
+
+var theme = getTheme();
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 var Square = styled(reactNative$1.View)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
-  var boxSize = _ref.boxSize;
+  var themeSize = _ref.themeSize;
 
-  switch (boxSize) {
+  switch (themeSize) {
     case 'small':
       return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          height: 50px;\n          width: 200px;\n        "])));
 
@@ -9962,48 +9945,49 @@ var Square = styled(reactNative$1.View)(_templateObject || (_templateObject = _t
       return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          height: 150px;\n          width: 300px;\n        "])));
   }
 }, function (_ref2) {
-  var boxSpace = _ref2.boxSpace,
+  var themeMargin = _ref2.themeMargin,
       theme = _ref2.theme;
 
-  switch (boxSpace) {
+  switch (themeMargin) {
     case 'small':
-      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.space.demoStyle.smallMargin);
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.__hd__.exampleComponent.space.smallMargin);
 
     case 'medium':
-      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.space.demoStyle.mediumMargin);
+      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.__hd__.exampleComponent.space.mediumMargin);
 
     case 'large':
-      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.space.demoStyle.largeMargin);
+      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          margin: ", "px;\n        "])), theme.__hd__.exampleComponent.space.largeMargin);
   }
 }, function (_ref3) {
-  var bgColor = _ref3.bgColor,
+  var themeBgColor = _ref3.themeBgColor,
       theme = _ref3.theme;
 
-  switch (bgColor) {
+  switch (themeBgColor) {
     case 'primary':
-      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.colors.demoStyle.primaryBg);
+      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.__hd__.exampleComponent.colors.primaryBg);
 
     case 'danger':
-      return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.colors.demoStyle.dangerBg);
+      return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.__hd__.exampleComponent.colors.dangerBg);
 
     case 'warning':
-      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.colors.demoStyle.warningBg);
+      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          background-color: ", ";\n        "])), theme.__hd__.exampleComponent.colors.warningBg);
   }
 });
 
 var ExampleComponent = function ExampleComponent(_ref) {
-  var _ref$boxSize = _ref.boxSize,
-      boxSize = _ref$boxSize === void 0 ? "small" : _ref$boxSize,
-      boxSpace = _ref.boxSpace,
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size,
+      margin = _ref.margin,
       bgColor = _ref.bgColor;
   return /*#__PURE__*/React__default["default"].createElement(Square, {
-    boxSize: boxSize,
-    boxSpace: boxSpace,
-    bgColor: bgColor
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative$1.Text, null, "Square with ".concat(boxSize, " size, ").concat(boxSpace, " margin and ").concat(bgColor, " background.")));
+    themeSize: size,
+    themeMargin: margin,
+    themeBgColor: bgColor
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative$1.Text, null, "Square with ".concat(size, " size, ").concat(margin, " margin and ").concat(bgColor, " background.")));
 };
 
 exports.ExampleComponent = ExampleComponent;
 exports.ThemeProvider = ThemeProvider;
+exports.getTheme = getTheme;
 exports.theme = theme;
 exports.useTheme = useTheme;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@hero-design/rn",
-  "version": "6.7.2",
+  "version": "6.7.4-1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "types/index.d.ts",
   "scripts": {
-    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
+    "lint": "eslint src playground --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
     "type-check": "tsc --noEmit",
     "dev": "expo start",
     "test": "jest --runInBand",
@@ -16,7 +16,7 @@
     "publish:npm": "yarn publish --access public"
   },
   "dependencies": {
-    "@hero-design/colors": "6.7.2",
+    "@hero-design/colors": "6.7.4-1",
     "styled-components": "6.0.0-alpha.5"
   },
   "peerDependencies": {
@@ -28,6 +28,8 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
+    "@react-navigation/native": "^6.0.10",
+    "@react-navigation/native-stack": "^6.6.2",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
@@ -56,6 +58,8 @@
     "prettier": "^2.5.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
+    "react-native-safe-area-context": "^4.2.5",
+    "react-native-screens": "^3.13.1",
     "react-test-renderer": "17.0.2",
     "rollup": "^2.68.0",
     "ts-jest": "^27.0.7",

package/playground/components/ExampleComponent.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ExampleComponent } from '../../src/index';
+
+const ExampleComponentPlayground = () => (
+  <ExampleComponent size="large" margin="large" bgColor="primary" />
+);
+
+export default ExampleComponentPlayground;