@hero-design/rn 6.7.0 → 6.7.3

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/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',
@@ -9750,6 +9755,7 @@ var palette = {
   dodgerBlue: '#4568fb',
   dodgerBlueDark30: '#3049b0',
   dodgerBlueLight30: '#7d95fc',
+  dodgerBlueLight75: '#d1d9fe',
   dodgerBlueLight90: '#ecf0ff',
   green: '#01b39c',
   greenDark15: '#019885',
@@ -9758,6 +9764,7 @@ var palette = {
   greenLight30: '#4dcaba',
   greenLight90: '#e6f7f5',
   grey: '#a3a6ac',
+  greyDark15: '#8b8d92',
   greyDark30: '#727478',
   greyDark45: '#5a5b5f',
   greyDark60: '#414245',
@@ -9767,6 +9774,7 @@ var palette = {
   greyLight75: '#e8e9ea',
   greyLight85: '#f1f2f3',
   greyLight90: '#f6f6f7',
+  greyLight95: '#fafbfb',
   grotesqueGreen: '#6af293',
   grotesqueGreenDark45: '#3a8551',
   grotesqueGreenLight60: '#c3fad4',
@@ -9794,6 +9802,7 @@ var palette = {
   redDark30: '#9b2508',
   redDark75: '#380d03',
   redLight30: '#e87254',
+  redLight60: '#f2ae9d',
   redLight75: '#f7cdc2',
   redLight90: '#fcebe7',
   smalt: '#003580',
@@ -9817,80 +9826,107 @@ var palette = {
   yellowLight60: '#fdf1a1',
   yellowLight90: '#fffbe8'
 };
+
 var systemPalette = {
   primary: palette.violet,
-  primaryDark: palette.violetDark30,
-  primaryLight: palette.violetLight30,
-  primaryBackground: palette.violetLight90,
-  platformBackground: palette.greyLight85,
-  backgroundDark: palette.black,
-  backgroundLight: palette.white,
+  primaryLight: palette.violetLight60,
   info: palette.dodgerBlue,
-  infoDark: palette.dodgerBlueDark30,
-  infoLight: palette.dodgerBlueLight30,
+  infoLight: palette.dodgerBlueLight75,
   infoBackground: palette.dodgerBlueLight90,
   success: palette.green,
   successDark: palette.greenDark30,
-  successLight: palette.greenLight30,
-  successBackground: palette.greenLight90,
+  successLight: palette.greenDark75,
+  successBackground: palette.grotesqueGreenLight90,
   danger: palette.red,
-  dangerDark: palette.redDark30,
-  dangerLight: palette.redLight30,
+  dangerLight: palette.redLight60,
   dangerBackground: palette.redLight90,
   warning: palette.orange,
-  warningDark: palette.orangeDark30,
-  warningLight: palette.orangeLight30,
+  warningDark: palette.orangeDark15,
   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
+  platformBackground: palette.greyLight95,
+  backgroundDark: palette.greyDark75,
+  text: palette.greyDark75,
+  disabledText: palette.greyDark15,
+  invertedText: palette.white
 };
 
-var BASE = 8;
+var BASE$1 = 8;
 var space = {
-  xxsmall: BASE * 0.25,
-  xsmall: BASE * 0.5,
-  small: BASE,
-  medium: BASE * 2,
-  large: BASE * 3,
-  xlarge: BASE * 4,
-  xxlarge: BASE * 5,
-  xxxlarge: BASE * 6,
-  xxxxlarge: BASE * 7
+  xxsmall: BASE$1 * 0.25,
+  xsmall: BASE$1 * 0.5,
+  small: BASE$1,
+  medium: BASE$1 * 2,
+  large: BASE$1 * 3,
+  xlarge: BASE$1 * 4,
+  xxlarge: BASE$1 * 5,
+  xxxlarge: BASE$1 * 6,
+  xxxxlarge: BASE$1 * 7
 };
 
-var demoStyleColors = {
-  primaryBg: systemPalette.primaryBackground,
-  dangerBg: systemPalette.dangerBackground,
-  warningBg: systemPalette.warningBackground
+var BASE = 16;
+var fontSizes = {
+  xlarge: BASE * 1.125,
+  large: BASE,
+  medium: BASE * 0.875,
+  small: BASE * 0.75,
+  xsmall: BASE * 0.625 // 10
+
+};
+var fontWeights = {
+  light: 200,
+  regular: 400,
+  semiBold: 600,
+  bold: 700
 };
-var demoStyleSpace = {
-  smallMargin: space.xxsmall,
-  mediumMargin: space.medium,
-  largeMargin: space.xxxxlarge
+var lineHeights = {
+  xlarge: fontSizes.xlarge + 8,
+  large: fontSizes.large + 8,
+  medium: fontSizes.medium + 8,
+  small: fontSizes.small + 8,
+  xsmall: fontSizes.xsmall + 8
 };
 
-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        "])));
 
@@ -9901,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',
@@ -9758,6 +9763,7 @@ var palette = {
   dodgerBlue: '#4568fb',
   dodgerBlueDark30: '#3049b0',
   dodgerBlueLight30: '#7d95fc',
+  dodgerBlueLight75: '#d1d9fe',
   dodgerBlueLight90: '#ecf0ff',
   green: '#01b39c',
   greenDark15: '#019885',
@@ -9766,6 +9772,7 @@ var palette = {
   greenLight30: '#4dcaba',
   greenLight90: '#e6f7f5',
   grey: '#a3a6ac',
+  greyDark15: '#8b8d92',
   greyDark30: '#727478',
   greyDark45: '#5a5b5f',
   greyDark60: '#414245',
@@ -9775,6 +9782,7 @@ var palette = {
   greyLight75: '#e8e9ea',
   greyLight85: '#f1f2f3',
   greyLight90: '#f6f6f7',
+  greyLight95: '#fafbfb',
   grotesqueGreen: '#6af293',
   grotesqueGreenDark45: '#3a8551',
   grotesqueGreenLight60: '#c3fad4',
@@ -9802,6 +9810,7 @@ var palette = {
   redDark30: '#9b2508',
   redDark75: '#380d03',
   redLight30: '#e87254',
+  redLight60: '#f2ae9d',
   redLight75: '#f7cdc2',
   redLight90: '#fcebe7',
   smalt: '#003580',
@@ -9825,80 +9834,107 @@ var palette = {
   yellowLight60: '#fdf1a1',
   yellowLight90: '#fffbe8'
 };
+
 var systemPalette = {
   primary: palette.violet,
-  primaryDark: palette.violetDark30,
-  primaryLight: palette.violetLight30,
-  primaryBackground: palette.violetLight90,
-  platformBackground: palette.greyLight85,
-  backgroundDark: palette.black,
-  backgroundLight: palette.white,
+  primaryLight: palette.violetLight60,
   info: palette.dodgerBlue,
-  infoDark: palette.dodgerBlueDark30,
-  infoLight: palette.dodgerBlueLight30,
+  infoLight: palette.dodgerBlueLight75,
   infoBackground: palette.dodgerBlueLight90,
   success: palette.green,
   successDark: palette.greenDark30,
-  successLight: palette.greenLight30,
-  successBackground: palette.greenLight90,
+  successLight: palette.greenDark75,
+  successBackground: palette.grotesqueGreenLight90,
   danger: palette.red,
-  dangerDark: palette.redDark30,
-  dangerLight: palette.redLight30,
+  dangerLight: palette.redLight60,
   dangerBackground: palette.redLight90,
   warning: palette.orange,
-  warningDark: palette.orangeDark30,
-  warningLight: palette.orangeLight30,
+  warningDark: palette.orangeDark15,
   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
+  platformBackground: palette.greyLight95,
+  backgroundDark: palette.greyDark75,
+  text: palette.greyDark75,
+  disabledText: palette.greyDark15,
+  invertedText: palette.white
 };
 
-var BASE = 8;
+var BASE$1 = 8;
 var space = {
-  xxsmall: BASE * 0.25,
-  xsmall: BASE * 0.5,
-  small: BASE,
-  medium: BASE * 2,
-  large: BASE * 3,
-  xlarge: BASE * 4,
-  xxlarge: BASE * 5,
-  xxxlarge: BASE * 6,
-  xxxxlarge: BASE * 7
+  xxsmall: BASE$1 * 0.25,
+  xsmall: BASE$1 * 0.5,
+  small: BASE$1,
+  medium: BASE$1 * 2,
+  large: BASE$1 * 3,
+  xlarge: BASE$1 * 4,
+  xxlarge: BASE$1 * 5,
+  xxxlarge: BASE$1 * 6,
+  xxxxlarge: BASE$1 * 7
 };
 
-var demoStyleColors = {
-  primaryBg: systemPalette.primaryBackground,
-  dangerBg: systemPalette.dangerBackground,
-  warningBg: systemPalette.warningBackground
+var BASE = 16;
+var fontSizes = {
+  xlarge: BASE * 1.125,
+  large: BASE,
+  medium: BASE * 0.875,
+  small: BASE * 0.75,
+  xsmall: BASE * 0.625 // 10
+
+};
+var fontWeights = {
+  light: 200,
+  regular: 400,
+  semiBold: 600,
+  bold: 700
 };
-var demoStyleSpace = {
-  smallMargin: space.xxsmall,
-  mediumMargin: space.medium,
-  largeMargin: space.xxxxlarge
+var lineHeights = {
+  xlarge: fontSizes.xlarge + 8,
+  large: fontSizes.large + 8,
+  medium: fontSizes.medium + 8,
+  small: fontSizes.small + 8,
+  xsmall: fontSizes.xsmall + 8
 };
 
-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        "])));
 
@@ -9909,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;