@hero-design/rn 7.0.2 → 7.0.5

package/es/index.js

@@ -8130,7 +8130,7 @@ Processor$1["default"] = Processor$1;
 Root$2.registerProcessor(Processor$1);
 Document$1.registerProcessor(Processor$1);
 
-var _excluded$1 = ["inputs"],
+var _excluded$3 = ["inputs"],
     _excluded2 = ["inputId"];
 
 var Declaration$1 = declaration;
@@ -8147,7 +8147,7 @@ function fromJSON$1(json, inputs) {
   });
 
   var ownInputs = json.inputs,
-      defaults = _objectWithoutProperties$1(json, _excluded$1);
+      defaults = _objectWithoutProperties$1(json, _excluded$3);
 
   if (ownInputs) {
     inputs = [];
@@ -9983,13 +9983,13 @@ var getDividerTheme = function getDividerTheme(theme) {
     large: "".concat(theme.space.large, "px"),
     xlarge: "".concat(theme.space.xlarge, "px")
   };
-  var borderWiths = {
+  var borderWidths = {
     "default": "".concat(theme.borderWidths.base, "px")
   };
   return {
     colors: colors,
     space: space,
-    borderWiths: borderWiths
+    borderWidths: borderWidths
   };
 };
 
@@ -10100,17 +10100,21 @@ var StyledText$1 = styled(Text$1)(_templateObject3$2 || (_templateObject3$2 = _t
   });
 });
 
+var _excluded$2 = ["content", "intent", "style", "testID"];
+
 var Badge = function Badge(_ref) {
   var content = _ref.content,
       _ref$intent = _ref.intent,
       intent = _ref$intent === void 0 ? 'info' : _ref$intent,
       style = _ref.style,
-      testID = _ref.testID;
-  return /*#__PURE__*/React.createElement(StyledView, {
-    testID: testID,
+      testID = _ref.testID,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$2);
+
+  return /*#__PURE__*/React.createElement(StyledView, _extends$1({
     themeIntent: intent,
-    style: style
-  }, /*#__PURE__*/React.createElement(StyledText$1, {
+    style: style,
+    testID: testID
+  }, nativeProps), /*#__PURE__*/React.createElement(StyledText$1, {
     themeIntent: intent
   }, content));
 };
@@ -10131,7 +10135,7 @@ var Card = function Card(props) {
 var _templateObject$2, _templateObject2$2, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13;
 var StyledDivider = styled(View)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  border-bottom-width: ", ";\n  border-bottom-color: ", ";\n  max-width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme.__hd__.divider.borderWiths["default"];
+  return theme.__hd__.divider.borderWidths["default"];
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.__hd__.divider.colors["default"];
@@ -10183,13 +10187,21 @@ var StyledDivider = styled(View)(_templateObject$2 || (_templateObject$2 = _tagg
   }
 });
 
+var _excluded$1 = ["marginHorizontal", "marginVertical", "style", "testID"];
+
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
-      marginVertical = _ref.marginVertical;
-  return /*#__PURE__*/React.createElement(StyledDivider, {
+      marginVertical = _ref.marginVertical,
+      style = _ref.style,
+      testID = _ref.testID,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$1);
+
+  return /*#__PURE__*/React.createElement(StyledDivider, _extends$1({
     themeMarginHorizontal: marginHorizontal,
-    themeMarginVertical: marginVertical
-  });
+    themeMarginVertical: marginVertical,
+    style: style,
+    testID: testID
+  }, nativeProps));
 };
 
 var dist = {};

package/lib/index.js

@@ -8139,7 +8139,7 @@ Processor$1["default"] = Processor$1;
 Root$2.registerProcessor(Processor$1);
 Document$1.registerProcessor(Processor$1);
 
-var _excluded$1 = ["inputs"],
+var _excluded$3 = ["inputs"],
     _excluded2 = ["inputId"];
 
 var Declaration$1 = declaration;
@@ -8156,7 +8156,7 @@ function fromJSON$1(json, inputs) {
   });
 
   var ownInputs = json.inputs,
-      defaults = _objectWithoutProperties$1(json, _excluded$1);
+      defaults = _objectWithoutProperties$1(json, _excluded$3);
 
   if (ownInputs) {
     inputs = [];
@@ -9992,13 +9992,13 @@ var getDividerTheme = function getDividerTheme(theme) {
     large: "".concat(theme.space.large, "px"),
     xlarge: "".concat(theme.space.xlarge, "px")
   };
-  var borderWiths = {
+  var borderWidths = {
     "default": "".concat(theme.borderWidths.base, "px")
   };
   return {
     colors: colors,
     space: space,
-    borderWiths: borderWiths
+    borderWidths: borderWidths
   };
 };
 
@@ -10109,17 +10109,21 @@ var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$2 || (_templateObj
   });
 });
 
+var _excluded$2 = ["content", "intent", "style", "testID"];
+
 var Badge = function Badge(_ref) {
   var content = _ref.content,
       _ref$intent = _ref.intent,
       intent = _ref$intent === void 0 ? 'info' : _ref$intent,
       style = _ref.style,
-      testID = _ref.testID;
-  return /*#__PURE__*/React__default["default"].createElement(StyledView, {
-    testID: testID,
+      testID = _ref.testID,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$2);
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({
     themeIntent: intent,
-    style: style
-  }, /*#__PURE__*/React__default["default"].createElement(StyledText$1, {
+    style: style,
+    testID: testID
+  }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledText$1, {
     themeIntent: intent
   }, content));
 };
@@ -10140,7 +10144,7 @@ var Card = function Card(props) {
 var _templateObject$2, _templateObject2$2, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13;
 var StyledDivider = styled(require$$0$1.View)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  border-bottom-width: ", ";\n  border-bottom-color: ", ";\n  max-width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme.__hd__.divider.borderWiths["default"];
+  return theme.__hd__.divider.borderWidths["default"];
 }, function (_ref2) {
   var theme = _ref2.theme;
   return theme.__hd__.divider.colors["default"];
@@ -10192,13 +10196,21 @@ var StyledDivider = styled(require$$0$1.View)(_templateObject$2 || (_templateObj
   }
 });
 
+var _excluded$1 = ["marginHorizontal", "marginVertical", "style", "testID"];
+
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
-      marginVertical = _ref.marginVertical;
-  return /*#__PURE__*/React__default["default"].createElement(StyledDivider, {
+      marginVertical = _ref.marginVertical,
+      style = _ref.style,
+      testID = _ref.testID,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$1);
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({
     themeMarginHorizontal: marginHorizontal,
-    themeMarginVertical: marginVertical
-  });
+    themeMarginVertical: marginVertical,
+    style: style,
+    testID: testID
+  }, nativeProps));
 };
 
 var dist = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.0.2",
+  "version": "7.0.5",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -9,7 +9,8 @@
     "lint": "eslint src playground --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
     "type-check": "tsc --noEmit",
     "dev": "expo start",
-    "test": "jest --runInBand --watch",
+    "test": "jest --runInBand",
+    "test:watch": "jest --runInBand --watch",
     "test:ci": "jest --runInBand --logHeapUsage",
     "build:js": "rollup -c",
     "build:types": "tsc --noEmit false --emitDeclarationOnly",
@@ -17,7 +18,7 @@
     "publish:npm": "yarn publish --access public"
   },
   "dependencies": {
-    "@hero-design/colors": "7.0.2",
+    "@hero-design/colors": "7.0.5",
     "styled-components": "6.0.0-alpha.5"
   },
   "peerDependencies": {
@@ -67,6 +68,7 @@
     "react-native-vector-icons": "^9.1.0",
     "react-test-renderer": "17.0.2",
     "rollup": "^2.68.0",
+    "rollup-plugin-copy": "^3.4.0",
     "ts-jest": "^27.0.7",
     "typescript": "^4.5.5"
   },

package/playground/components/Card.tsx

@@ -1,51 +1,237 @@
-import React from 'react';
-import { View } from 'react-native';
-import { Card, useTheme } from '../../src/index';
+import React, { ComponentProps } from 'react';
+import { View, ViewProps, StyleSheet } from 'react-native';
+import { palette } from '@hero-design/colors';
+import { Card, useTheme, Typography, Icon, Divider } from '../../src/index';
 
-const CardPlayground = () => {
+const TextBox = (props: ViewProps) => (
+  <View
+    style={{
+      flex: 1,
+      justifyContent: 'flex-end',
+    }}
+    {...props}
+  />
+);
+
+const Screen = View;
+type DashboardCardProps = ViewProps & {
+  icon: ComponentProps<typeof Icon>['icon'];
+  title: string;
+  subtitle: string;
+};
+
+const DashboardCard = ({
+  style,
+  icon,
+  title,
+  subtitle,
+}: DashboardCardProps) => (
+  <Card testID="inductionContent" style={style}>
+    <View style={{ flex: 1, alignItems: 'flex-end' }}>
+      <Icon icon={icon} />
+    </View>
+    <TextBox>
+      <Typography.Text fontSize="xlarge" fontWeight="semi-bold">
+        {title}
+      </Typography.Text>
+      <Typography.Text fontSize="medium">{subtitle}</Typography.Text>
+    </TextBox>
+  </Card>
+);
+
+const InductionCard = (props: ViewProps) => (
+  <DashboardCard
+    icon="file-verified"
+    title="Induction Content"
+    subtitle="2 files to acknowledge"
+    {...props}
+  />
+);
+const PoliciesCard = (props: ViewProps) => (
+  <DashboardCard
+    icon="file-secured"
+    title="Policies"
+    subtitle="1 to acknowledge"
+    {...props}
+  />
+);
+
+const CertificationsCard = (props: ViewProps) => (
+  <DashboardCard
+    icon="file-certified"
+    title="Certification"
+    subtitle="1 to update"
+    {...props}
+  />
+);
+
+const Payslip = (props: ViewProps) => {
   const theme = useTheme();
+  const { style, ...otherProps } = props;
   return (
-    <View
-      style={{
-        flex: 1,
-        marginVertical: theme.space.xxxxlarge,
-        marginHorizontal: theme.space.xxxxlarge,
-      }}
+    <Card
+      {...otherProps}
+      style={StyleSheet.flatten([
+        {
+          flexDirection: 'row',
+          alignItems: 'stretch',
+          backgroundColor: palette.greyLight75,
+        },
+        style,
+      ])}
     >
-      <Card
+      <View>
+        <View
+          style={{
+            padding: theme.space.small,
+            backgroundColor: '#C0ECE6',
+            borderRadius: 999,
+            alignContent: 'stretch',
+          }}
+        >
+          <Icon icon="coin" />
+        </View>
+      </View>
+      <View style={{ flex: 1, marginLeft: theme.space.small }}>
+        <Typography.Text fontSize="large" fontWeight="semi-bold">
+          Rosters
+        </Typography.Text>
+        <Typography.Text fontSize="medium">3 shifts this week</Typography.Text>
+      </View>
+      <View
         style={{
-          flex: 1,
-          backgroundColor: theme.colors.backgroundDark,
-          padding: theme.space.medium,
+          alignItems: 'center',
+          alignContent: 'center',
+          justifyContent: 'center',
         }}
       >
-        <Card
-          style={{ flex: 1, backgroundColor: theme.colors.backgroundLight }}
-        />
-        <Card
-          style={{ flex: 1, backgroundColor: theme.colors.infoBackground }}
-        />
-        <Card style={{ flex: 1, backgroundColor: theme.colors.primaryLight }} />
-      </Card>
-
-      <Card
+        <Icon icon="arrow-right" />
+      </View>
+    </Card>
+  );
+};
+
+const MyLeaveCard = (props: ViewProps) => {
+  const theme = useTheme();
+  const { style, ...otherProps } = props;
+  return (
+    <Card
+      {...otherProps}
+      style={StyleSheet.flatten([
+        {
+          backgroundColor: palette.greyLight90,
+          paddingBottom: 0,
+          paddingTop: 0,
+          paddingRight: 0,
+          paddingLeft: 0,
+        },
+        style,
+      ])}
+    >
+      <View
+        testID="header"
         style={{
-          flex: 1,
-          backgroundColor: theme.colors.backgroundDark,
-          padding: theme.space.medium,
+          marginHorizontal: theme.space.small,
+          marginTop: theme.space.small,
+          justifyContent: 'space-between',
           flexDirection: 'row',
-          marginTop: theme.space.large,
         }}
       >
-        <Card
-          style={{ flex: 1, backgroundColor: theme.colors.backgroundLight }}
-        />
-        <Card
-          style={{ flex: 1, backgroundColor: theme.colors.infoBackground }}
-        />
-        <Card style={{ flex: 1, backgroundColor: theme.colors.primaryLight }} />
-      </Card>
-    </View>
+        <Typography.Text fontSize="large" fontWeight="semi-bold">
+          My Leave
+        </Typography.Text>
+
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <Typography.Text fontWeight="semi-bold">Add / view</Typography.Text>
+          <Icon
+            icon="circle-add-outlined"
+            size="xsmall"
+            style={{ margin: theme.space.xxsmall }}
+          />
+        </View>
+      </View>
+      <Divider marginVertical="small" />
+      <View testID="content" style={{ margin: theme.space.small }}>
+        <Typography.Text fontSize="medium" fontWeight="semi-bold">
+          Leave Balances
+        </Typography.Text>
+        <View
+          testID="listItem1"
+          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
+        >
+          <Typography.Text>Jury Duty</Typography.Text>
+          <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
+        </View>
+        <View
+          testID="listItem1"
+          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
+        >
+          <Typography.Text>Annual Leave</Typography.Text>
+          <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
+        </View>
+        <View
+          testID="listItem1"
+          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
+        >
+          <Typography.Text>Values Champion Award</Typography.Text>
+          <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
+        </View>
+        <View
+          testID="listItem1"
+          style={{ flexDirection: 'row', justifyContent: 'space-between' }}
+        >
+          <Typography.Text>Family and Domestic</Typography.Text>
+          <Typography.Text fontWeight="semi-bold">12.06 hrs</Typography.Text>
+        </View>
+      </View>
+    </Card>
+  );
+};
+
+const CardPlayground = () => {
+  const theme = useTheme();
+  return (
+    <Screen>
+      <View style={{ flexDirection: 'row', height: 250 }}>
+        <View style={{ flex: 1 }}>
+          <InductionCard
+            style={{
+              flex: 1,
+              margin: theme.space.small,
+              backgroundColor: theme.colors.primaryLight,
+            }}
+          />
+        </View>
+        <View style={{ flex: 1 }}>
+          <PoliciesCard
+            style={{
+              flex: 1,
+              backgroundColor: palette.dodgerBlueLight75,
+              margin: theme.space.small,
+            }}
+            testID="policies"
+          />
+          <CertificationsCard
+            style={{
+              flex: 1,
+              margin: theme.space.small,
+              backgroundColor: palette.dodgerBlueLight75,
+            }}
+            testID="certifications"
+          />
+        </View>
+      </View>
+      <Payslip
+        style={{
+          margin: theme.space.small,
+        }}
+      />
+      <MyLeaveCard
+        style={{
+          margin: theme.space.small,
+        }}
+      />
+    </Screen>
   );
 };
 

package/rollup.config.js

@@ -4,6 +4,7 @@ import { babel } from '@rollup/plugin-babel';
 import typescript from '@rollup/plugin-typescript';
 import json from '@rollup/plugin-json';
 import replace from '@rollup/plugin-replace';
+import copy from 'rollup-plugin-copy';
 
 import pkg from './package.json';
 
@@ -23,13 +24,21 @@ export default {
   ],
   external: ['react', 'react-native'],
   plugins: [
-    replace(({
+    replace({
       'process.env.NODE_ENV': JSON.stringify('production'),
-    })),
+    }),
     nodeResolve({ extensions, browser: true }),
     commonjs(),
     json(),
     typescript(),
     babel({ extensions, babelHelpers: 'bundled' }),
+    copy({
+      targets: [
+        {
+          src: 'assets/fonts/hero-icons.ttf',
+          dest: 'lib/assets/fonts',
+        },
+      ],
+    }),
   ],
 };

package/src/components/Badge/index.tsx

@@ -1,18 +1,18 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import React, { ReactElement } from 'react';
 import { StyledView, StyledText } from './StyledBadge';
 
-interface BadgeProps {
+interface BadgeProps extends ViewProps {
   /**
-   * Content of the `Badge`.
+   * Content of the Badge.
    */
   content: string;
   /**
-   * Visual intent color to apply to `Badge`.
+   * Visual intent color to apply to Badge.
    */
   intent?: 'success' | 'warning' | 'danger' | 'info';
   /**
-   * Addditional style to be applied for `Badge`.
+   * Addditional style.
    */
   style?: StyleProp<ViewStyle>;
   /**
@@ -26,8 +26,14 @@ const Badge = ({
   intent = 'info',
   style,
   testID,
+  ...nativeProps
 }: BadgeProps): ReactElement => (
-  <StyledView testID={testID} themeIntent={intent} style={style}>
+  <StyledView
+    themeIntent={intent}
+    style={style}
+    testID={testID}
+    {...nativeProps}
+  >
     <StyledText themeIntent={intent}>{content}</StyledText>
   </StyledView>
 );

package/src/components/Card/index.tsx

@@ -1,8 +1,21 @@
-import React from 'react';
-import { ViewProps } from 'react-native';
+import React, { ReactNode } from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledCard } from './StyledCard';
 
-interface CardProps extends ViewProps {}
+interface CardProps extends ViewProps {
+  /**
+   * Card's content.
+   */
+  children?: ReactNode;
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
 
 const Card = (props: CardProps): JSX.Element => <StyledCard {...props} />;
 

package/src/components/Divider/StyledDivider.tsx

@@ -8,7 +8,7 @@ const StyledDivider = styled(View)<{
   themeMarginVertical?: MarginSize;
 }>`
   border-bottom-width: ${({ theme }) =>
-    theme.__hd__.divider.borderWiths.default};
+    theme.__hd__.divider.borderWidths.default};
   border-bottom-color: ${({ theme }) => theme.__hd__.divider.colors.default};
   max-width: 100%;
 

package/src/components/Divider/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledDivider } from './StyledDivider';
 
-interface DividerProps {
+interface DividerProps extends ViewProps {
   /**
    * Horizontal margin size. There is no margin by default.
    */
@@ -10,12 +11,29 @@ interface DividerProps {
    * Vertical margin size. There is no margin by default.
    */
   marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
 }
 
-const Divider = ({ marginHorizontal, marginVertical }: DividerProps) => (
+const Divider = ({
+  marginHorizontal,
+  marginVertical,
+  style,
+  testID,
+  ...nativeProps
+}: DividerProps) => (
   <StyledDivider
     themeMarginHorizontal={marginHorizontal}
     themeMarginVertical={marginVertical}
+    style={style}
+    testID={testID}
+    {...nativeProps}
   />
 );
 

package/src/components/Icon/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 import HeroIcon from './HeroIcon';
 
@@ -7,21 +7,21 @@ type IconName = typeof IconList[number];
 
 interface IconProps {
   /**
-   * Name of the `Icon`.
+   * Name of the Icon.
    */
   icon: IconName;
   /**
-   * Addditional style to be applied for `Icon`.
+   * Intent of the Icon.
    */
-  style?: StyleProp<ViewStyle>;
+  intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
   /**
-   * Size of the `Icon`.
+   * Size of the Icon.
    */
   size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
   /**
-   * Intent of the `Icon`.
+   * Addditional style.
    */
-  intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
+  style?: StyleProp<TextStyle>;
   /**
    * Testing id of the component.
    */

package/src/components/Typography/Text/index.tsx

@@ -1,5 +1,9 @@
 import React, { ReactNode } from 'react';
-import { TextProps as NativeTextProps } from 'react-native';
+import {
+  TextProps as NativeTextProps,
+  StyleProp,
+  TextStyle,
+} from 'react-native';
 import { StyledText } from './StyledText';
 
 interface TextProps extends NativeTextProps {
@@ -19,6 +23,14 @@ interface TextProps extends NativeTextProps {
    * Visual intent color to apply to the text.
    */
   intent?: 'body' | 'subdued';
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<TextStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
 }
 
 const Text = ({

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -39,7 +39,7 @@ Object {
       },
     },
     "divider": Object {
-      "borderWiths": Object {
+      "borderWidths": Object {
         "default": "1px",
       },
       "colors": Object {

package/src/theme/components/divider.ts

@@ -13,11 +13,11 @@ const getDividerTheme = (theme: GlobalTheme) => {
     xlarge: `${theme.space.xlarge}px`,
   };
 
-  const borderWiths = {
+  const borderWidths = {
     default: `${theme.borderWidths.base}px`,
   };
 
-  return { colors, space, borderWiths };
+  return { colors, space, borderWidths };
 };
 
 export default getDividerTheme;

package/types/src/components/Badge/index.d.ts

@@ -1,16 +1,16 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { ReactElement } from 'react';
-interface BadgeProps {
+interface BadgeProps extends ViewProps {
     /**
-     * Content of the `Badge`.
+     * Content of the Badge.
      */
     content: string;
     /**
-     * Visual intent color to apply to `Badge`.
+     * Visual intent color to apply to Badge.
      */
     intent?: 'success' | 'warning' | 'danger' | 'info';
     /**
-     * Addditional style to be applied for `Badge`.
+     * Addditional style.
      */
     style?: StyleProp<ViewStyle>;
     /**
@@ -18,5 +18,5 @@ interface BadgeProps {
      */
     testID?: string;
 }
-declare const Badge: ({ content, intent, style, testID, }: BadgeProps) => ReactElement;
+declare const Badge: ({ content, intent, style, testID, ...nativeProps }: BadgeProps) => ReactElement;
 export default Badge;

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

@@ -1,5 +1,18 @@
-import { ViewProps } from 'react-native';
+import { ReactNode } from 'react';
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
 interface CardProps extends ViewProps {
+    /**
+     * Card's content.
+     */
+    children?: ReactNode;
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
 }
 declare const Card: (props: CardProps) => JSX.Element;
 export default Card;

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

@@ -1,4 +1,5 @@
-interface DividerProps {
+import { StyleProp, ViewStyle, ViewProps } from 'react-native';
+interface DividerProps extends ViewProps {
     /**
      * Horizontal margin size. There is no margin by default.
      */
@@ -7,6 +8,14 @@ interface DividerProps {
      * Vertical margin size. There is no margin by default.
      */
     marginVertical?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
 }
-declare const Divider: ({ marginHorizontal, marginVertical }: DividerProps) => JSX.Element;
+declare const Divider: ({ marginHorizontal, marginVertical, style, testID, ...nativeProps }: DividerProps) => JSX.Element;
 export default Divider;

package/types/src/components/Icon/index.d.ts

@@ -1,23 +1,23 @@
-import { StyleProp, ViewStyle } from 'react-native';
+import { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 declare type IconName = typeof IconList[number];
 interface IconProps {
     /**
-     * Name of the `Icon`.
+     * Name of the Icon.
      */
     icon: IconName;
     /**
-     * Addditional style to be applied for `Icon`.
+     * Intent of the Icon.
      */
-    style?: StyleProp<ViewStyle>;
+    intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
     /**
-     * Size of the `Icon`.
+     * Size of the Icon.
      */
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
     /**
-     * Intent of the `Icon`.
+     * Addditional style.
      */
-    intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
+    style?: StyleProp<TextStyle>;
     /**
      * Testing id of the component.
      */

package/types/src/components/Typography/Text/__tests__/StyledText.spec.d.ts

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

package/types/src/components/Typography/Text/__tests__/index.spec.d.ts

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

package/types/src/components/Typography/Text/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TextProps as NativeTextProps } from 'react-native';
+import { TextProps as NativeTextProps, StyleProp, TextStyle } from 'react-native';
 interface TextProps extends NativeTextProps {
     /**
      * Text content.
@@ -17,6 +17,14 @@ interface TextProps extends NativeTextProps {
      * Visual intent color to apply to the text.
      */
     intent?: 'body' | 'subdued';
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
 }
 declare const Text: ({ children, fontSize, fontWeight, intent, ...nativeProps }: TextProps) => JSX.Element;
 export default Text;

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

@@ -10,7 +10,7 @@ declare const getDividerTheme: (theme: GlobalTheme) => {
         large: string;
         xlarge: string;
     };
-    borderWiths: {
+    borderWidths: {
         default: string;
     };
 };