@hero-design/rn 7.1.3-alpha2 → 7.1.3-alpha5

package/.expo/packager-info.json

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

package/es/index.js

@@ -9875,7 +9875,7 @@ var systemPalette = {
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 
-var scale = function scale(size) {
+var horizontalScale = function horizontalScale(size) {
   var _Dimensions$get = Dimensions.get('window'),
       width = _Dimensions$get.width,
       height = _Dimensions$get.height;
@@ -9883,6 +9883,10 @@ var scale = function scale(size) {
   var shortDimension = width < height ? width : height;
   return shortDimension / BASE_WIDTH * size;
 };
+var scale = function scale(size) {
+  var factor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
+  return size + (horizontalScale(size) - size) * factor;
+};
 
 var BASE$1 = 8;
 var space = {
@@ -9898,6 +9902,11 @@ var space = {
 };
 
 var BASE = 16;
+var fonts = {
+  light: 'Be Vietnam Pro Light',
+  regular: 'Be Vietnam Pro Regular',
+  semiBold: 'Be Vietnam Pro SemiBold'
+};
 var fontSizes = {
   xxxxxlarge: scale(BASE * 2),
   xxxxlarge: scale(BASE * 1.75),
@@ -9910,12 +9919,6 @@ var fontSizes = {
   xsmall: scale(BASE * 0.625) //      10
 
 };
-var fontWeights = {
-  light: 200,
-  regular: 400,
-  semiBold: 600,
-  bold: 700
-};
 var lineHeights = {
   xxxxxlarge: fontSizes.xxxxxlarge + 8,
   xxxxlarge: fontSizes.xxxxlarge + 8,
@@ -9935,8 +9938,8 @@ var borderWidths = {
 var globalTheme = {
   colors: _objectSpread2({}, systemPalette),
   space: space,
+  fonts: fonts,
   fontSizes: fontSizes,
-  fontWeights: fontWeights,
   lineHeights: lineHeights,
   borderWidths: borderWidths
 };
@@ -9958,12 +9961,12 @@ var getBadgeTheme = function getBadgeTheme(theme) {
   var padding = {
     "default": "".concat(theme.space.xsmall, "px ").concat(theme.space.small, "px")
   };
+  var fonts = {
+    "default": theme.fonts.semiBold
+  };
   var fontSizes = {
     "default": "".concat(theme.fontSizes.small, "px")
   };
-  var fontWeights = {
-    "default": theme.fontWeights.semiBold
-  };
   var radii = {
     "default": "4px"
   };
@@ -9971,8 +9974,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     borderWidths: borderWidths,
     colors: colors,
     padding: padding,
+    fonts: fonts,
     fontSizes: fontSizes,
-    fontWeights: fontWeights,
     radii: radii
   };
 };
@@ -10060,17 +10063,17 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     subdued: theme.colors.disabledText,
     primary: theme.colors.primary
   };
+  var fonts = {
+    light: theme.fonts.light,
+    regular: theme.fonts.regular,
+    semiBold: theme.fonts.semiBold
+  };
   var fontSizes = {
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
     xlarge: theme.fontSizes.xlarge
   };
-  var fontWeights = {
-    light: theme.fontWeights.light,
-    regular: theme.fontWeights.regular,
-    semiBold: theme.fontWeights.semiBold
-  };
   var lineHeights = {
     small: "".concat(theme.lineHeights.small, "px"),
     medium: "".concat(theme.lineHeights.medium, "px"),
@@ -10079,8 +10082,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
   };
   return {
     colors: colors,
+    fonts: fonts,
     fontSizes: fontSizes,
-    fontWeights: fontWeights,
     lineHeights: lineHeights
   };
 };
@@ -10097,15 +10100,15 @@ var getFABTheme = function getFABTheme(theme) {
     width: '64px',
     height: '64px'
   };
+  var fonts = {
+    header: theme.fonts.semiBold,
+    actionItemText: theme.fonts.regular
+  };
   var fontSizes = {
     header: "".concat(theme.fontSizes.xxxlarge, "px"),
     buttonIcon: "".concat(theme.fontSizes.xxxlarge, "px"),
     actionItemText: "".concat(theme.fontSizes.medium, "px")
   };
-  var fontWeights = {
-    header: "".concat(theme.fontWeights.semiBold),
-    actionItemText: "".concat(theme.fontWeights.regular)
-  };
   var lineHeights = {
     header: "".concat(theme.lineHeights.xxxlarge, "px"),
     actionItemText: "".concat(theme.lineHeights.medium, "px")
@@ -10126,11 +10129,11 @@ var getFABTheme = function getFABTheme(theme) {
   };
   return {
     radii: radii,
+    fonts: fonts,
     fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
     lineHeights: lineHeights,
-    fontWeights: fontWeights,
     space: space
   };
 };
@@ -10178,9 +10181,9 @@ var StyledView = styled(View)(_templateObject$9 || (_templateObject$9 = _taggedT
     return theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]];
   });
 });
-var StyledText$1 = styled(Text$1)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
+var StyledText$1 = styled(Text$1)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
   var theme = _ref7.theme;
-  return theme.__hd__.badge.fontWeights["default"];
+  return theme.__hd__.badge.fonts["default"];
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.__hd__.badge.fontSizes["default"];
@@ -19900,13 +19903,13 @@ var StyledText = styled(Text$1)(_templateObject$7 || (_templateObject$7 = _tagge
 
   switch (themeFontWeight) {
     case 'light':
-      return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.light);
+      return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.light);
 
     case 'regular':
-      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.regular);
+      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.regular);
 
     case 'semi-bold':
-      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.semiBold);
+      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.semiBold);
   }
 }, function (_ref3) {
   var themeIntent = _ref3.themeIntent,
@@ -20269,7 +20272,7 @@ var StyledActionItem = styled(TouchableOpacity)(_templateObject$1 || (_templateO
   var theme = _ref8.theme;
   return theme.__hd__.fab.radii.actionItem;
 });
-var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_ref9) {
+var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-family: ", ";\n"])), function (_ref9) {
   var theme = _ref9.theme;
   return theme.__hd__.fab.space.actionItemTextPaddingLeft;
 }, function (_ref10) {
@@ -20280,7 +20283,7 @@ var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templ
   return theme.__hd__.fab.lineHeights.actionItemText;
 }, function (_ref12) {
   var theme = _ref12.theme;
-  return theme.__hd__.fab.fontWeights.actionItemText;
+  return theme.__hd__.fab.fonts.actionItemText;
 });
 
 var ActionItem = function ActionItem(_ref) {
@@ -20312,7 +20315,7 @@ var StyledBackdrop = styled(Animated.View)(_templateObject4 || (_templateObject4
   var theme = _ref3.theme;
   return theme.__hd__.fab.colors.backdropBackground;
 });
-var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  text-align: right;\n"])), function (_ref4) {
+var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: ", ";\n  font-family: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  text-align: right;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.__hd__.fab.fontSizes.header;
 }, function (_ref5) {
@@ -20320,7 +20323,7 @@ var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObj
   return theme.__hd__.fab.lineHeights.header;
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme.__hd__.fab.fontWeights.header;
+  return theme.__hd__.fab.fonts.header;
 }, function (_ref7) {
   var theme = _ref7.theme;
   return theme.__hd__.fab.space.headerTextMarginRight;
@@ -20362,7 +20365,7 @@ var ActionGroup = function ActionGroup(_ref2) {
   });
   var interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.5]
+    outputRange: [0, 0.9]
   });
   return /*#__PURE__*/React.createElement(StyledContainer, {
     testID: testID,

package/lib/index.js

@@ -9884,7 +9884,7 @@ var systemPalette = {
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 
-var scale = function scale(size) {
+var horizontalScale = function horizontalScale(size) {
   var _Dimensions$get = require$$0$1.Dimensions.get('window'),
       width = _Dimensions$get.width,
       height = _Dimensions$get.height;
@@ -9892,6 +9892,10 @@ var scale = function scale(size) {
   var shortDimension = width < height ? width : height;
   return shortDimension / BASE_WIDTH * size;
 };
+var scale = function scale(size) {
+  var factor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
+  return size + (horizontalScale(size) - size) * factor;
+};
 
 var BASE$1 = 8;
 var space = {
@@ -9907,6 +9911,11 @@ var space = {
 };
 
 var BASE = 16;
+var fonts = {
+  light: 'Be Vietnam Pro Light',
+  regular: 'Be Vietnam Pro Regular',
+  semiBold: 'Be Vietnam Pro SemiBold'
+};
 var fontSizes = {
   xxxxxlarge: scale(BASE * 2),
   xxxxlarge: scale(BASE * 1.75),
@@ -9919,12 +9928,6 @@ var fontSizes = {
   xsmall: scale(BASE * 0.625) //      10
 
 };
-var fontWeights = {
-  light: 200,
-  regular: 400,
-  semiBold: 600,
-  bold: 700
-};
 var lineHeights = {
   xxxxxlarge: fontSizes.xxxxxlarge + 8,
   xxxxlarge: fontSizes.xxxxlarge + 8,
@@ -9944,8 +9947,8 @@ var borderWidths = {
 var globalTheme = {
   colors: _objectSpread2({}, systemPalette),
   space: space,
+  fonts: fonts,
   fontSizes: fontSizes,
-  fontWeights: fontWeights,
   lineHeights: lineHeights,
   borderWidths: borderWidths
 };
@@ -9967,12 +9970,12 @@ var getBadgeTheme = function getBadgeTheme(theme) {
   var padding = {
     "default": "".concat(theme.space.xsmall, "px ").concat(theme.space.small, "px")
   };
+  var fonts = {
+    "default": theme.fonts.semiBold
+  };
   var fontSizes = {
     "default": "".concat(theme.fontSizes.small, "px")
   };
-  var fontWeights = {
-    "default": theme.fontWeights.semiBold
-  };
   var radii = {
     "default": "4px"
   };
@@ -9980,8 +9983,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     borderWidths: borderWidths,
     colors: colors,
     padding: padding,
+    fonts: fonts,
     fontSizes: fontSizes,
-    fontWeights: fontWeights,
     radii: radii
   };
 };
@@ -10069,17 +10072,17 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     subdued: theme.colors.disabledText,
     primary: theme.colors.primary
   };
+  var fonts = {
+    light: theme.fonts.light,
+    regular: theme.fonts.regular,
+    semiBold: theme.fonts.semiBold
+  };
   var fontSizes = {
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
     xlarge: theme.fontSizes.xlarge
   };
-  var fontWeights = {
-    light: theme.fontWeights.light,
-    regular: theme.fontWeights.regular,
-    semiBold: theme.fontWeights.semiBold
-  };
   var lineHeights = {
     small: "".concat(theme.lineHeights.small, "px"),
     medium: "".concat(theme.lineHeights.medium, "px"),
@@ -10088,8 +10091,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
   };
   return {
     colors: colors,
+    fonts: fonts,
     fontSizes: fontSizes,
-    fontWeights: fontWeights,
     lineHeights: lineHeights
   };
 };
@@ -10106,15 +10109,15 @@ var getFABTheme = function getFABTheme(theme) {
     width: '64px',
     height: '64px'
   };
+  var fonts = {
+    header: theme.fonts.semiBold,
+    actionItemText: theme.fonts.regular
+  };
   var fontSizes = {
     header: "".concat(theme.fontSizes.xxxlarge, "px"),
     buttonIcon: "".concat(theme.fontSizes.xxxlarge, "px"),
     actionItemText: "".concat(theme.fontSizes.medium, "px")
   };
-  var fontWeights = {
-    header: "".concat(theme.fontWeights.semiBold),
-    actionItemText: "".concat(theme.fontWeights.regular)
-  };
   var lineHeights = {
     header: "".concat(theme.lineHeights.xxxlarge, "px"),
     actionItemText: "".concat(theme.lineHeights.medium, "px")
@@ -10135,11 +10138,11 @@ var getFABTheme = function getFABTheme(theme) {
   };
   return {
     radii: radii,
+    fonts: fonts,
     fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
     lineHeights: lineHeights,
-    fontWeights: fontWeights,
     space: space
   };
 };
@@ -10187,9 +10190,9 @@ var StyledView = styled(require$$0$1.View)(_templateObject$9 || (_templateObject
     return theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]];
   });
 });
-var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
+var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
   var theme = _ref7.theme;
-  return theme.__hd__.badge.fontWeights["default"];
+  return theme.__hd__.badge.fonts["default"];
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.__hd__.badge.fontSizes["default"];
@@ -19909,13 +19912,13 @@ var StyledText = styled(require$$0$1.Text)(_templateObject$7 || (_templateObject
 
   switch (themeFontWeight) {
     case 'light':
-      return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.light);
+      return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.light);
 
     case 'regular':
-      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.regular);
+      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.regular);
 
     case 'semi-bold':
-      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.semiBold);
+      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.semiBold);
   }
 }, function (_ref3) {
   var themeIntent = _ref3.themeIntent,
@@ -20278,7 +20281,7 @@ var StyledActionItem = styled(require$$0$1.TouchableOpacity)(_templateObject$1 |
   var theme = _ref8.theme;
   return theme.__hd__.fab.radii.actionItem;
 });
-var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_ref9) {
+var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-family: ", ";\n"])), function (_ref9) {
   var theme = _ref9.theme;
   return theme.__hd__.fab.space.actionItemTextPaddingLeft;
 }, function (_ref10) {
@@ -20289,7 +20292,7 @@ var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templ
   return theme.__hd__.fab.lineHeights.actionItemText;
 }, function (_ref12) {
   var theme = _ref12.theme;
-  return theme.__hd__.fab.fontWeights.actionItemText;
+  return theme.__hd__.fab.fonts.actionItemText;
 });
 
 var ActionItem = function ActionItem(_ref) {
@@ -20321,7 +20324,7 @@ var StyledBackdrop = styled(require$$0$1.Animated.View)(_templateObject4 || (_te
   var theme = _ref3.theme;
   return theme.__hd__.fab.colors.backdropBackground;
 });
-var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  text-align: right;\n"])), function (_ref4) {
+var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: ", ";\n  font-family: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  text-align: right;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.__hd__.fab.fontSizes.header;
 }, function (_ref5) {
@@ -20329,7 +20332,7 @@ var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObj
   return theme.__hd__.fab.lineHeights.header;
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme.__hd__.fab.fontWeights.header;
+  return theme.__hd__.fab.fonts.header;
 }, function (_ref7) {
   var theme = _ref7.theme;
   return theme.__hd__.fab.space.headerTextMarginRight;
@@ -20371,7 +20374,7 @@ var ActionGroup = function ActionGroup(_ref2) {
   });
   var interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.5]
+    outputRange: [0, 0.9]
   });
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer, {
     testID: testID,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.1.3-alpha2",
+  "version": "7.1.3-alpha5",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/utils/scale.ts

@@ -2,9 +2,12 @@ import { Dimensions } from 'react-native';
 
 export const BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 
-export const scale = (size: number) => {
+export const horizontalScale = (size: number) => {
   const { width, height } = Dimensions.get('window');
   const shortDimension = width < height ? width : height;
 
   return (shortDimension / BASE_WIDTH) * size;
 };
+
+export const scale = (size: number, factor: number = 0.5) =>
+  size + (horizontalScale(size) - size) * factor;

package/types/components/Card/StyledCard.d.ts

@@ -0,0 +1,3 @@
+import { View } from 'react-native';
+declare const StyledCard: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {}, never>;
+export { StyledCard };

package/types/components/Card/__tests__/StyledCard.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/Card/index.d.ts

@@ -0,0 +1,5 @@
+import { ViewProps } from 'react-native';
+interface CardProps extends ViewProps {
+}
+declare const Card: (props: CardProps) => JSX.Element;
+export default Card;

package/types/components/Divider/StyledDivider.d.ts

@@ -0,0 +1,7 @@
+import { View } from 'react-native';
+declare type MarginSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+declare const StyledDivider: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+    themeMarginHorizontal?: MarginSize | undefined;
+    themeMarginVertical?: MarginSize | undefined;
+}, never>;
+export { StyledDivider };

package/types/components/Divider/__tests__/StyledDivider.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/Divider/index.d.ts

@@ -0,0 +1,12 @@
+interface DividerProps {
+    /**
+     * Horizontal margin size. There is no margin by default.
+     */
+    marginHorizontal?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Vertical margin size. There is no margin by default.
+     */
+    marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+}
+declare const Divider: ({ marginHorizontal, marginVertical }: DividerProps) => JSX.Element;
+export default Divider;

package/types/components/ExampleComponent/StyledView.d.ts

@@ -0,0 +1,7 @@
+import { View } from 'react-native';
+declare const Square: import("styled-components").StyledComponent<typeof View, import("../../theme").Theme, {
+    themeSize: 'small' | 'medium' | 'large';
+    themeMargin: 'small' | 'medium' | 'large';
+    themeBgColor: 'primary' | 'danger' | 'warning';
+}, never>;
+export { Square };

package/types/components/ExampleComponent/__tests__/StyledView.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/ExampleComponent/index.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    /**
+     * Size.
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Margin.
+     */
+    margin: 'small' | 'medium' | 'large';
+    /**
+     * Background color.
+     */
+    bgColor: 'primary' | 'danger' | 'warning';
+}
+declare const ExampleComponent: ({ size, margin, bgColor }: Props) => JSX.Element;
+export default ExampleComponent;

package/types/index.d.ts

@@ -1,4 +1,5 @@
-import { ThemeProvider, useTheme } from './styled-components';
+import { ThemeProvider, useTheme } from 'styled-components-native';
 import theme, { getTheme } from './theme';
-import ExampleComponent from './components/ExampleComponent';
-export { theme, getTheme, useTheme, ThemeProvider, ExampleComponent };
+import Divider from './components/Divider';
+import Card from './components/Card';
+export { theme, getTheme, useTheme, ThemeProvider, Divider, Card };

package/types/src/theme/components/badge.d.ts

@@ -16,11 +16,11 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
     padding: {
         default: string;
     };
-    fontSizes: {
+    fonts: {
         default: string;
     };
-    fontWeights: {
-        default: number;
+    fontSizes: {
+        default: string;
     };
     radii: {
         default: string;

package/types/src/theme/components/fab.d.ts

@@ -3,6 +3,10 @@ declare const getFABTheme: (theme: GlobalTheme) => {
     radii: {
         actionItem: string;
     };
+    fonts: {
+        header: string;
+        actionItemText: string;
+    };
     fontSizes: {
         header: string;
         buttonIcon: string;
@@ -23,10 +27,6 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         header: string;
         actionItemText: string;
     };
-    fontWeights: {
-        header: string;
-        actionItemText: string;
-    };
     space: {
         actionItemPaddingLeft: string;
         actionItemPaddingRight: string;

package/types/src/theme/components/typography.d.ts

@@ -5,17 +5,17 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         subdued: string;
         primary: string;
     };
+    fonts: {
+        light: string;
+        regular: string;
+        semiBold: string;
+    };
     fontSizes: {
         small: number;
         medium: number;
         large: number;
         xlarge: number;
     };
-    fontWeights: {
-        light: number;
-        regular: number;
-        semiBold: number;
-    };
     lineHeights: {
         small: string;
         medium: string;

package/types/src/theme/global/index.d.ts

@@ -34,6 +34,11 @@ declare const globalTheme: {
         xxxlarge: number;
         xxxxlarge: number;
     };
+    fonts: {
+        light: string;
+        regular: string;
+        semiBold: string;
+    };
     fontSizes: {
         xxxxxlarge: number;
         xxxxlarge: number;
@@ -45,12 +50,6 @@ declare const globalTheme: {
         small: number;
         xsmall: number;
     };
-    fontWeights: {
-        light: number;
-        regular: number;
-        semiBold: number;
-        bold: number;
-    };
     lineHeights: {
         xxxxxlarge: number;
         xxxxlarge: number;