@hero-design/rn 8.82.2-alpha.0 → 8.82.2-alpha.2

package/CHANGELOG.md

@@ -1,11 +1,5 @@
 # @hero-design/rn
 
-## 8.82.2-alpha.0
-
-### Patch Changes
-
-- [#3542](https://github.com/Thinkei/hero-design/pull/3542) [`5899777f150e534a850ac644212f161880e57805`](https://github.com/Thinkei/hero-design/commit/5899777f150e534a850ac644212f161880e57805) Thanks [@haudao-eh](https://github.com/haudao-eh)! - Add action to release alpha version
-
 ## 8.82.1
 
 ### Patch Changes

package/es/index.js

@@ -2042,15 +2042,25 @@ var getFontSizes = function getFontSizes(baseFontSize) {
   });
   return {
     '7xlarge': scale(fontSizes[10]),
+    // 42
     '6xlarge': scale(fontSizes[9]),
+    //  36
     xxxxxlarge: scale(fontSizes[8]),
+    // 32
     xxxxlarge: scale(fontSizes[7]),
+    //  28
     xxxlarge: scale(fontSizes[6]),
+    //   24
     xxlarge: scale(fontSizes[5]),
+    //    20
     xlarge: scale(fontSizes[4]),
+    //     18
     large: scale(fontSizes[3]),
+    //      16
     medium: scale(fontSizes[2]),
+    //     14
     small: scale(fontSizes[1]),
+    //      12
     xsmall: scale(fontSizes[0]) //     10
   };
 };
@@ -2075,15 +2085,25 @@ var getLineHeights = function getLineHeights(fontSizes) {
 var getSpace = function getSpace(baseSpace) {
   return {
     xxsmall: scale(baseSpace * 0.25),
+    // 2
     xsmall: scale(baseSpace * 0.5),
+    // 4
     small: scale(baseSpace),
+    // 8
     smallMedium: scale(baseSpace) * 1.5,
+    // 12
     medium: scale(baseSpace * 2),
+    // 16
     large: scale(baseSpace * 3),
+    // 24
     xlarge: scale(baseSpace * 4),
+    // 32
     xxlarge: scale(baseSpace * 5),
+    // 40
     xxxlarge: scale(baseSpace * 6),
+    // 48
     xxxxlarge: scale(baseSpace * 7),
+    // 56
     '5xlarge': scale(baseSpace * 8) // 64
   };
 };
@@ -2091,12 +2111,19 @@ var getSpace = function getSpace(baseSpace) {
 var getSizes = function getSizes(baseSize) {
   return _objectSpread2(_objectSpread2({}, getSpace(baseSize)), {}, {
     xxxxxlarge: scale(baseSize * 8),
+    // 64
     '6xlarge': scale(baseSize * 9),
+    // 72
     '7xlarge': scale(baseSize * 10),
+    // 80
     '9xlarge': scale(baseSize * 12),
+    // 96
     '14xlarge': scale(baseSize * 17),
+    // 136
     '15xlarge': scale(baseSize * 18),
+    // 144
     '18xlarge': scale(baseSize * 21),
+    // 168
     '19xlarge': scale(baseSize * 22) // 176
   });
 };
@@ -2104,6 +2131,7 @@ var getSizes = function getSizes(baseSize) {
 var getBorderWidths = function getBorderWidths(baseBorderWidth) {
   return {
     base: baseBorderWidth,
+    // 1
     medium: baseBorderWidth * 2 // 2
   };
 };
@@ -2112,11 +2140,17 @@ var getRadii = function getRadii(baseRadius) {
   return {
     rounded: 999,
     base: baseRadius,
+    // 4
     medium: baseRadius * 2,
+    // 8
     large: baseRadius * 3,
+    // 12
     xlarge: baseRadius * 4,
+    // 16
     xxlarge: baseRadius * 5,
+    // 20
     xxxlarge: baseRadius * 6,
+    // 24
     '5xlarge': baseRadius * 8 // 32
   };
 };
@@ -3066,6 +3100,7 @@ var getProgressTheme = function getProgressTheme(theme) {
     completeness: {
       primary: theme.colors.primary,
       success: theme.colors.success,
+      // should be emerald dark 15
       warning: theme.colors.warning,
       danger: theme.colors.error,
       info: theme.colors.info,
@@ -8276,6 +8311,7 @@ var StyledText$2 = index$a(Typography.Text)(function (_ref2) {
 
     android: {
       lineHeight: null,
+      // center on android
       marginTop: theme.__hd__.avatar.spaces.titleMarginTopForAndroid[themeSize]
     },
     web: {
@@ -9419,6 +9455,7 @@ var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
   return _objectSpread2({
     flexShrink: 1,
     lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant,
+    // align text on Android
     textAlign: 'center'
   }, themeStyling());
 });
@@ -14261,6 +14298,7 @@ var calculateSnapPointsData = function calculateSnapPointsData(minimumHeight, he
   return {
     list: uniqSnapPointOffsetValues,
     minHeightOffset: Math.max.apply(Math, uniqSnapPointOffsetValues),
+    // Furthest from max height
     maxHeightOffset: 0 // Max height
   };
 };
@@ -16588,6 +16626,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   });
   var interpolateOpacityRightHalf = progressAnimatedValue.current.interpolate({
     inputRange: [50, 51],
+    // Transition between left and right half
     outputRange: [1, 0],
     extrapolate: 'clamp'
   });
@@ -16712,6 +16751,7 @@ var ProgressBar = function ProgressBar(_ref) {
   });
   var interpolateBorderRadius = progressAnimatedValue.current.interpolate({
     inputRange: [99, 100],
+    // Transition range to remove bother when reached 100%
     outputRange: [999, 0],
     extrapolate: 'clamp'
   });

package/eslint.config.js

@@ -15,19 +15,16 @@ module.exports = [
   includeIgnoreFile(gitignorePath),
   {
     files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
-
     plugins: {
       '@hero-design': heroDesign,
       import: _import,
     },
-
     languageOptions: {
       parserOptions: {
         tsconfigRootDir: __dirname,
         project: ['./tsconfig.json'],
       },
     },
-
     rules: {
       'no-underscore-dangle': [
         'error',
@@ -35,8 +32,9 @@ module.exports = [
           allow: ['__hd__'],
         },
       ],
-
       'import/no-cycle': 'error',
+      'react/no-unused-prop-types': 'warn',
+      'react/no-array-index-key': 'warn',
     },
   },
 ];

package/lib/index.js

@@ -2069,15 +2069,25 @@ var getFontSizes = function getFontSizes(baseFontSize) {
   });
   return {
     '7xlarge': scale(fontSizes[10]),
+    // 42
     '6xlarge': scale(fontSizes[9]),
+    //  36
     xxxxxlarge: scale(fontSizes[8]),
+    // 32
     xxxxlarge: scale(fontSizes[7]),
+    //  28
     xxxlarge: scale(fontSizes[6]),
+    //   24
     xxlarge: scale(fontSizes[5]),
+    //    20
     xlarge: scale(fontSizes[4]),
+    //     18
     large: scale(fontSizes[3]),
+    //      16
     medium: scale(fontSizes[2]),
+    //     14
     small: scale(fontSizes[1]),
+    //      12
     xsmall: scale(fontSizes[0]) //     10
   };
 };
@@ -2102,15 +2112,25 @@ var getLineHeights = function getLineHeights(fontSizes) {
 var getSpace = function getSpace(baseSpace) {
   return {
     xxsmall: scale(baseSpace * 0.25),
+    // 2
     xsmall: scale(baseSpace * 0.5),
+    // 4
     small: scale(baseSpace),
+    // 8
     smallMedium: scale(baseSpace) * 1.5,
+    // 12
     medium: scale(baseSpace * 2),
+    // 16
     large: scale(baseSpace * 3),
+    // 24
     xlarge: scale(baseSpace * 4),
+    // 32
     xxlarge: scale(baseSpace * 5),
+    // 40
     xxxlarge: scale(baseSpace * 6),
+    // 48
     xxxxlarge: scale(baseSpace * 7),
+    // 56
     '5xlarge': scale(baseSpace * 8) // 64
   };
 };
@@ -2118,12 +2138,19 @@ var getSpace = function getSpace(baseSpace) {
 var getSizes = function getSizes(baseSize) {
   return _objectSpread2(_objectSpread2({}, getSpace(baseSize)), {}, {
     xxxxxlarge: scale(baseSize * 8),
+    // 64
     '6xlarge': scale(baseSize * 9),
+    // 72
     '7xlarge': scale(baseSize * 10),
+    // 80
     '9xlarge': scale(baseSize * 12),
+    // 96
     '14xlarge': scale(baseSize * 17),
+    // 136
     '15xlarge': scale(baseSize * 18),
+    // 144
     '18xlarge': scale(baseSize * 21),
+    // 168
     '19xlarge': scale(baseSize * 22) // 176
   });
 };
@@ -2131,6 +2158,7 @@ var getSizes = function getSizes(baseSize) {
 var getBorderWidths = function getBorderWidths(baseBorderWidth) {
   return {
     base: baseBorderWidth,
+    // 1
     medium: baseBorderWidth * 2 // 2
   };
 };
@@ -2139,11 +2167,17 @@ var getRadii = function getRadii(baseRadius) {
   return {
     rounded: 999,
     base: baseRadius,
+    // 4
     medium: baseRadius * 2,
+    // 8
     large: baseRadius * 3,
+    // 12
     xlarge: baseRadius * 4,
+    // 16
     xxlarge: baseRadius * 5,
+    // 20
     xxxlarge: baseRadius * 6,
+    // 24
     '5xlarge': baseRadius * 8 // 32
   };
 };
@@ -3093,6 +3127,7 @@ var getProgressTheme = function getProgressTheme(theme) {
     completeness: {
       primary: theme.colors.primary,
       success: theme.colors.success,
+      // should be emerald dark 15
       warning: theme.colors.warning,
       danger: theme.colors.error,
       info: theme.colors.info,
@@ -8303,6 +8338,7 @@ var StyledText$2 = index$a(Typography.Text)(function (_ref2) {
 
     android: {
       lineHeight: null,
+      // center on android
       marginTop: theme.__hd__.avatar.spaces.titleMarginTopForAndroid[themeSize]
     },
     web: {
@@ -9446,6 +9482,7 @@ var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
   return _objectSpread2({
     flexShrink: 1,
     lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant,
+    // align text on Android
     textAlign: 'center'
   }, themeStyling());
 });
@@ -14288,6 +14325,7 @@ var calculateSnapPointsData = function calculateSnapPointsData(minimumHeight, he
   return {
     list: uniqSnapPointOffsetValues,
     minHeightOffset: Math.max.apply(Math, uniqSnapPointOffsetValues),
+    // Furthest from max height
     maxHeightOffset: 0 // Max height
   };
 };
@@ -16615,6 +16653,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   });
   var interpolateOpacityRightHalf = progressAnimatedValue.current.interpolate({
     inputRange: [50, 51],
+    // Transition between left and right half
     outputRange: [1, 0],
     extrapolate: 'clamp'
   });
@@ -16739,6 +16778,7 @@ var ProgressBar = function ProgressBar(_ref) {
   });
   var interpolateBorderRadius = progressAnimatedValue.current.interpolate({
     inputRange: [99, 100],
+    // Transition range to remove bother when reached 100%
     outputRange: [999, 0],
     extrapolate: 'clamp'
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.82.2-alpha.0",
+  "version": "8.82.2-alpha.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -70,7 +70,7 @@
     "babel-preset-expo": "^11.0.15",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
-    "eslint-config-hd": "8.42.4",
+    "eslint-config-hd": "8.42.5",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
@@ -91,7 +91,7 @@
     "rollup-plugin-flow": "^1.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "ts-jest": "^29.1.1",
-    "typescript": "4.8.4"
+    "typescript": "^5.7.3"
   },
   "prettier": "prettier-config-hd"
 }

package/types/components/Accordion/AccordionItem.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { Variant } from './StyledAccordion';
-export declare type AccordionItemProps = {
+export type AccordionItemProps = {
     header: string | ReactElement;
     content: ReactElement;
     open?: boolean;

package/types/components/Accordion/StyledAccordion.d.ts

@@ -1,32 +1,32 @@
 import { TouchableOpacity, View } from 'react-native';
-export declare type Variant = 'default' | 'card';
+export type Variant = 'default' | 'card';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledItemWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     themeVariant: Variant;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
 export declare const StyledCollapse: import("@emotion/native").StyledComponent<import("../Collapse").CollapseProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, {}, {}>;
 export declare const Spacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;

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

@@ -35,5 +35,5 @@ export interface AccordionProps<K extends Key> {
      */
     testID?: string;
 }
-declare const Accordion: <K extends React.Key>({ items, activeItemKey, onItemPress, variant, style, testID, }: AccordionProps<K>) => React.JSX.Element;
+declare const Accordion: <K extends Key>({ items, activeItemKey, onItemPress, variant, style, testID, }: AccordionProps<K>) => React.JSX.Element;
 export default Accordion;

package/types/components/Alert/StyledAlert.d.ts

@@ -2,51 +2,51 @@ import { TouchableOpacity, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 import { TextProps } from '../Typography/Text';
 import { IconProps } from '../Icon';
-declare type ThemeIntent = 'success' | 'info' | 'warning' | 'error' | 'notification';
+type ThemeIntent = 'success' | 'info' | 'warning' | 'error' | 'notification';
 declare const Container: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
-    themeVariant: 'rounded' | 'unrounded';
+    themeVariant: "rounded" | "unrounded";
     themeIntent: ThemeIntent;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const IconContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledIcon: import("@emotion/native").StyledComponent<IconProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     themeIntent: ThemeIntent;
 }, {}, {}>;
 declare const TextContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledBody: import("@emotion/native").StyledComponent<import("../Typography/Body").BodyProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & TextProps & {
     themeIntent: ThemeIntent;
 }, {}, {}>;
 declare const ContentContainer: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     showDivider: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const CTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;

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

@@ -44,7 +44,7 @@ interface BasicAlertProps {
      */
     actionLabel?: string;
 }
-declare type AlertProps = (BasicAlertProps & {
+type AlertProps = (BasicAlertProps & {
     actionLabel?: undefined;
 }) | (BasicAlertProps & {
     onClose: () => void;

package/types/components/Attachment/StyledAttachment.d.ts

@@ -1,27 +1,27 @@
 import { TouchableOpacity, View } from 'react-native';
 declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledContentContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     themeHighlighted: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledTextContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledCTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;

package/types/components/Avatar/AvatarStack/StyledAvatarStack.d.ts

@@ -1,11 +1,11 @@
 import { View } from 'react-native';
 import { AvatarProps } from '../Avatar';
-declare type ThemeVariant = 'horizontal' | 'vertical';
+type ThemeVariant = 'horizontal' | 'vertical';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
-    themeSize: Required<AvatarProps>['size'];
+    themeSize: Required<AvatarProps>["size"];
     themeAvatarCount: number;
     themeVariant: ThemeVariant;
     themeHasSurplus: boolean;
@@ -13,18 +13,18 @@ export declare const StyledWrapper: import("@emotion/native").StyledComponent<im
     ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledAvatar: import("@emotion/native").StyledComponent<AvatarProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     themeIndex: number;
     themeVariant: ThemeVariant;
 }, {}, {}>;
 export declare const StyledSurplusContainer: import("@emotion/native").StyledComponent<import("../../Box").BoxProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     themeIndex: number;
-    themeSize: AvatarProps['size'];
+    themeSize: AvatarProps["size"];
     themeVariant: ThemeVariant;
 }, {}, {}>;
 export {};

package/types/components/Avatar/StyledAvatar.d.ts

@@ -1,10 +1,10 @@
 import { View, Image, TouchableOpacity } from 'react-native';
 import { TextProps } from '../Typography/Text';
-declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
-declare type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
+type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
+type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     themeSize: ThemeSize;
     themeIntent: ThemeIntent;
@@ -12,20 +12,20 @@ declare const StyledWrapper: import("@emotion/native").StyledComponent<import("r
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
 declare const StyledTextWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledText: import("@emotion/native").StyledComponent<TextProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     themeSize: ThemeSize;
 }, {}, {}>;
 declare const StyledImage: import("@emotion/native").StyledComponent<import("react-native").ImageProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     themeSize: ThemeSize;
 }, {}, {

package/types/components/Badge/StyledBadge.d.ts

@@ -1,11 +1,11 @@
 import { Animated } from 'react-native';
-declare type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
-declare type ThemePadding = 'narrowContent' | 'wideContent';
-declare type ThemeSize = 'medium' | 'small';
-declare type ThemeVariant = 'filled' | 'outlined';
+type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
+type ThemePadding = 'narrowContent' | 'wideContent';
+type ThemeSize = 'medium' | 'small';
+type ThemeVariant = 'filled' | 'outlined';
 declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     themeIntent: ThemeIntent;
     themePadding: ThemePadding;
@@ -13,20 +13,20 @@ declare const StyledView: import("@emotion/native").StyledComponent<Animated.Ani
     themeVariant: ThemeVariant;
 }, {}, {}>;
 declare const StyledText: import("@emotion/native").StyledComponent<import("../Typography/Caption").CaptionProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     themeSize: ThemeSize;
 }, {}, {}>;
 declare const StyledStatus: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     themeIntent: ThemeIntent;
 }, {}, {}>;
 declare const StyledIcon: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     themeSize: ThemeSize;
 }, {}, {}>;