@fountain-ui/core 3.0.0-alpha.42 → 3.0.0-alpha.44

package/build/typescript/internal/icons/Search.d.ts

@@ -6,33 +6,115 @@ declare const _default: React.MemoExoticComponent<{
         fontSize?: import("react-native-svg").NumberProp | undefined;
         fontWeight?: import("react-native-svg").FontWeight | undefined;
         letterSpacing?: import("react-native-svg").NumberProp | undefined;
-        readonly fill?: import("react-native").ColorValue | undefined;
+        readonly fill?: import("react-native/types").ColorValue | undefined;
         fontStyle?: import("react-native-svg").FontStyle | undefined;
-        testID?: string | undefined;
         fontVariant?: import("react-native-svg").FontVariant | undefined;
-        opacity?: import("react-native-svg").NumberProp | undefined;
+        pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
+        filter?: string | undefined;
+        readonly style?: import("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
+        onLayout?: ((event: import("react-native/types").LayoutChangeEvent) => void) | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
-        readonly width?: import("react-native-svg").NumberProp | undefined;
-        transform?: string | (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
-        rotation?: import("react-native-svg").NumberProp | undefined;
+        scale?: import("react-native-svg").NumberArray | undefined;
         scaleX?: import("react-native-svg").NumberProp | undefined;
         scaleY?: import("react-native-svg").NumberProp | undefined;
         translateX?: import("react-native-svg").NumberProp | undefined;
         translateY?: import("react-native-svg").NumberProp | undefined;
-        readonly style?: import("@fountain-ui/styles").FountainUiStyle | import("@fountain-ui/styles").FountainUiStyle[] | undefined;
-        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
-        title?: string | undefined;
-        clipPath?: string | undefined;
-        marker?: string | undefined;
-        mask?: string | undefined;
-        scale?: import("react-native-svg").NumberArray | undefined;
         skewX?: import("react-native-svg").NumberProp | undefined;
         skewY?: import("react-native-svg").NumberProp | undefined;
+        readonly width?: import("react-native-svg").NumberProp | undefined;
+        title?: string | undefined;
+        hitSlop?: number | import("react-native/types").Insets | undefined;
+        id?: string | undefined;
+        needsOffscreenAlphaCompositing?: boolean | undefined;
+        removeClippedSubviews?: boolean | undefined;
+        testID?: string | undefined;
+        nativeID?: string | undefined;
+        experimental_layoutConformance?: "strict" | "classic" | undefined;
+        collapsable?: boolean | undefined;
+        collapsableChildren?: boolean | undefined;
+        renderToHardwareTextureAndroid?: boolean | undefined;
+        focusable?: boolean | undefined;
+        tabIndex?: 0 | -1 | undefined;
+        shouldRasterizeIOS?: boolean | undefined;
+        isTVSelectable?: boolean | undefined;
+        hasTVPreferredFocus?: boolean | undefined;
+        tvParallaxShiftDistanceX?: number | undefined;
+        tvParallaxShiftDistanceY?: number | undefined;
+        tvParallaxTiltAngle?: number | undefined;
+        tvParallaxMagnification?: number | undefined;
+        onStartShouldSetResponder?: ((event: import("react-native/types").GestureResponderEvent) => boolean) | undefined;
+        onMoveShouldSetResponder?: ((event: import("react-native/types").GestureResponderEvent) => boolean) | undefined;
+        onResponderEnd?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onResponderGrant?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onResponderReject?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onResponderMove?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onResponderRelease?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onResponderStart?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onResponderTerminationRequest?: ((event: import("react-native/types").GestureResponderEvent) => boolean) | undefined;
+        onResponderTerminate?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onStartShouldSetResponderCapture?: ((event: import("react-native/types").GestureResponderEvent) => boolean) | undefined;
+        onMoveShouldSetResponderCapture?: ((event: import("react-native/types").GestureResponderEvent) => boolean) | undefined;
+        onTouchStart?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onTouchMove?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onTouchEnd?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onTouchCancel?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onTouchEndCapture?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onPointerEnter?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+        onPointerEnterCapture?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+        onPointerLeave?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+        onPointerLeaveCapture?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+        onPointerMove?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+        onPointerMoveCapture?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+        onPointerCancel?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+        onPointerCancelCapture?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+        onPointerDown?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+        onPointerDownCapture?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+        onPointerUp?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+        onPointerUpCapture?: ((event: import("react-native/types").PointerEvent) => void) | undefined;
+        accessible?: boolean | undefined;
+        accessibilityActions?: readonly Readonly<{
+            name: string;
+            label?: string | undefined;
+        }>[] | undefined;
+        accessibilityLabel?: string | undefined;
+        'aria-label'?: string | undefined;
+        accessibilityRole?: import("react-native/types").AccessibilityRole | undefined;
+        accessibilityState?: import("react-native/types").AccessibilityState | undefined;
+        'aria-busy'?: boolean | undefined;
+        'aria-checked'?: boolean | "mixed" | undefined;
+        'aria-disabled'?: boolean | undefined;
+        'aria-expanded'?: boolean | undefined;
+        'aria-selected'?: boolean | undefined;
+        accessibilityHint?: string | undefined;
+        accessibilityValue?: import("react-native/types").AccessibilityValue | undefined;
+        'aria-valuemax'?: number | undefined;
+        'aria-valuemin'?: number | undefined;
+        'aria-valuenow'?: number | undefined;
+        'aria-valuetext'?: string | undefined;
+        onAccessibilityAction?: ((event: import("react-native/types").AccessibilityActionEvent) => void) | undefined;
+        importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+        'aria-hidden'?: boolean | undefined;
+        'aria-modal'?: boolean | undefined;
+        role?: import("react-native/types").Role | undefined;
+        accessibilityLabelledBy?: string | string[] | undefined;
+        'aria-labelledby'?: string | undefined;
+        accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+        'aria-live'?: "polite" | "assertive" | "off" | undefined;
+        accessibilityElementsHidden?: boolean | undefined;
+        accessibilityViewIsModal?: boolean | undefined;
+        onAccessibilityEscape?: (() => void) | undefined;
+        onAccessibilityTap?: (() => void) | undefined;
+        onMagicTap?: (() => void) | undefined;
+        accessibilityIgnoresInvertColors?: boolean | undefined;
+        accessibilityLanguage?: string | undefined;
+        accessibilityShowsLargeContentViewer?: boolean | undefined;
+        accessibilityLargeContentTitle?: string | undefined;
         readonly viewBox?: string | undefined;
         preserveAspectRatio?: string | undefined;
+        opacity?: import("react-native-svg").NumberProp | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
-        stroke?: import("react-native").ColorValue | undefined;
+        stroke?: import("react-native/types").ColorValue | undefined;
         strokeWidth?: import("react-native-svg").NumberProp | undefined;
         strokeOpacity?: import("react-native-svg").NumberProp | undefined;
         strokeDasharray?: import("react-native-svg").NumberProp | readonly import("react-native-svg").NumberProp[] | undefined;
@@ -42,40 +124,224 @@ declare const _default: React.MemoExoticComponent<{
         strokeMiterlimit?: import("react-native-svg").NumberProp | undefined;
         vectorEffect?: import("react-native-svg").VectorEffect | undefined;
         clipRule?: import("react-native-svg").FillRule | undefined;
+        clipPath?: string | undefined;
         translate?: import("react-native-svg").NumberArray | undefined;
         origin?: import("react-native-svg").NumberArray | undefined;
         originX?: import("react-native-svg").NumberProp | undefined;
         originY?: import("react-native-svg").NumberProp | undefined;
         skew?: import("react-native-svg").NumberArray | undefined;
+        rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
-        onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
-        onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
-        onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
-        onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
-        onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+        transform?: string | readonly (({
+            perspective: import("react-native/types").AnimatableNumericValue;
+        } & {
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            rotate: import("react-native/types").AnimatableStringValue;
+        } & {
+            perspective?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            rotateX: import("react-native/types").AnimatableStringValue;
+        } & {
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            rotateY: import("react-native/types").AnimatableStringValue;
+        } & {
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            rotateZ: import("react-native/types").AnimatableStringValue;
+        } & {
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            scale?: undefined;
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            scale: import("react-native/types").AnimatableNumericValue;
+        } & {
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            scaleX: import("react-native/types").AnimatableNumericValue;
+        } & {
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            scaleY: import("react-native/types").AnimatableNumericValue;
+        } & {
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            scaleX?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            translateX: import("react-native/types").AnimatableNumericValue | `${number}%`;
+        } & {
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateY?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            translateY: import("react-native/types").AnimatableNumericValue | `${number}%`;
+        } & {
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            skewX: import("react-native/types").AnimatableStringValue;
+        } & {
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            skewY?: undefined;
+            matrix?: undefined;
+        }) | ({
+            skewY: import("react-native/types").AnimatableStringValue;
+        } & {
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            skewX?: undefined;
+            matrix?: undefined;
+        }) | ({
+            matrix: import("react-native/types").AnimatableNumericValue[];
+        } & {
+            perspective?: undefined;
+            rotate?: undefined;
+            rotateX?: undefined;
+            rotateY?: undefined;
+            rotateZ?: undefined;
+            scale?: undefined;
+            scaleX?: undefined;
+            scaleY?: undefined;
+            translateX?: undefined;
+            translateY?: undefined;
+            skewX?: undefined;
+            skewY?: undefined;
+        }))[] | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
         disabled?: boolean | undefined;
-        onPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onPressIn?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onPressOut?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onLongPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+        onPress?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onPressIn?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onPressOut?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
+        onLongPress?: ((event: import("react-native/types").GestureResponderEvent) => void) | undefined;
         delayPressIn?: number | undefined;
         delayPressOut?: number | undefined;
         delayLongPress?: number | undefined;
-        id?: string | undefined;
+        marker?: string | undefined;
         markerStart?: string | undefined;
         markerMid?: string | undefined;
         markerEnd?: string | undefined;
-        accessibilityLabel?: string | undefined;
-        accessible?: boolean | undefined;
+        mask?: string | undefined;
         font?: import("react-native-svg").FontObject | undefined;
         fontStretch?: import("react-native-svg").FontStretch | undefined;
         textAnchor?: import("react-native-svg").TextAnchor | undefined;
@@ -85,45 +351,6 @@ declare const _default: React.MemoExoticComponent<{
         fontFeatureSettings?: string | undefined;
         fontVariantLigatures?: import("react-native-svg").FontVariantLigatures | undefined;
         fontVariationSettings?: string | undefined;
-        hitSlop?: import("react-native").Insets | undefined;
-        removeClippedSubviews?: boolean | undefined;
-        nativeID?: string | undefined;
-        collapsable?: boolean | undefined;
-        needsOffscreenAlphaCompositing?: boolean | undefined;
-        renderToHardwareTextureAndroid?: boolean | undefined;
-        focusable?: boolean | undefined;
-        shouldRasterizeIOS?: boolean | undefined;
-        isTVSelectable?: boolean | undefined;
-        hasTVPreferredFocus?: boolean | undefined;
-        tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
-        tvParallaxShiftDistanceX?: number | undefined;
-        tvParallaxShiftDistanceY?: number | undefined;
-        tvParallaxTiltAngle?: number | undefined;
-        tvParallaxMagnification?: number | undefined;
-        onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        accessibilityActions?: readonly Readonly<{
-            name: string;
-            label?: string | undefined;
-        }>[] | undefined;
-        accessibilityRole?: import("react-native").AccessibilityRole | undefined;
-        accessibilityState?: import("react-native").AccessibilityState | undefined;
-        accessibilityHint?: string | undefined;
-        accessibilityValue?: import("react-native").AccessibilityValue | undefined;
-        onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
-        accessibilityLabelledBy?: string | string[] | undefined;
-        accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
-        importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
-        accessibilityElementsHidden?: boolean | undefined;
-        accessibilityLanguage?: string | undefined;
-        accessibilityViewIsModal?: boolean | undefined;
-        onAccessibilityEscape?: (() => void) | undefined;
-        onAccessibilityTap?: (() => void) | undefined;
-        onMagicTap?: (() => void) | undefined;
-        accessibilityIgnoresInvertColors?: boolean | undefined;
         readonly size?: "medium" | "small" | "large" | undefined;
     }): JSX.Element;
     displayName: string;

package/build/typescript/internal/icons/index.d.ts

@@ -11,6 +11,7 @@ export { default as ChipClose } from './ChipClose';
 export { default as CircularProgress } from './CircularProgress';
 export { default as Clear } from './Clear';
 export { default as Close } from './Close';
+export { default as CloseCircleFillPierced } from './CloseCircleFillPierced';
 export { default as EyeOff } from './EyeOff';
 export { default as EyeOn } from './EyeOn';
 export { default as InfoCircle } from './InfoCircle';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.42",
+  "version": "3.0.0-alpha.44",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@fountain-ui/styles": "^3.0.0-alpha.14",
+    "@fountain-ui/styles": "^3.0.0-alpha.15",
     "@fountain-ui/utils": "^3.0.0-alpha.1"
   },
   "peerDependencies": {
@@ -23,9 +23,9 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-native": "^0.63.0",
-    "react-native-reanimated": "^2.0.0",
-    "react-native-safe-area-context": "^4.0.0",
-    "react-native-svg": "^13.14.0"
+    "react-native-reanimated": "^3.0.0",
+    "react-native-safe-area-context": "^5.1.0",
+    "react-native-svg": "^15.11.0"
   },
   "peerDependenciesMeta": {
     "@react-native-community/slider": {
@@ -42,8 +42,8 @@
     }
   },
   "devDependencies": {
-    "react-native-reanimated": "^2.17.0",
-    "react-native-svg": "^13.14.0"
+    "react-native-reanimated": "3.17.1",
+    "react-native-svg": "15.11.2"
   },
   "react-native-builder-bob": {
     "source": "./src",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4a7de3f29299eb5f7ea9b6b874f232263756f854"
+  "gitHead": "d10c99cd364365b67465743c46e754a718b04aad"
 }

package/src/AspectRatio/AspectRatioNative.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { DimensionValue, View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { css } from '../styles';
 import type AspectRatioProps from './AspectRatioProps';
@@ -32,7 +32,7 @@ export default function AspectRatio(props: AspectRatioProps) {
     }
 
     const containerStyle = css([
-        { aspectRatio: ratio, width },
+        { aspectRatio: ratio, width: width as DimensionValue},
         styles.root,
         style,
     ]);

package/src/AspectRatio/AspectRatioWeb.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { DimensionValue, View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { css, StyleSheet } from '../styles';
 import type AspectRatioProps from './AspectRatioProps';
@@ -38,12 +38,12 @@ export default function AspectRatio(props: AspectRatioProps) {
 
     const outerStyle = css([
         styles.root,
-        { width },
+        { width: width as DimensionValue },
         style,
     ]);
 
     const innerStyle = css([
-        { paddingBottom: `${(100 / ratio).toFixed(6)}%` },
+        { paddingBottom: `${(100 / ratio).toFixed(6)}%` as DimensionValue},
         styles.inner,
     ]);
 

package/src/Button/useVariantStyleMap.ts

@@ -175,6 +175,15 @@ export default function useVariantStyleMap(variant: ButtonVariant, color: Button
                     labelColor: theme.palette.text.accent,
                     iconColor: theme.palette.icon.accent,
                 },
+                danger: {
+                    container: {
+                        borderColor: theme.palette.status.danger,
+                        borderRadius: theme.shape.radius.full,
+                        borderWidth: 1,
+                    },
+                    labelColor: theme.palette.status.danger,
+                    iconColor: theme.palette.status.danger,
+                },
             },
         };
 

package/src/Image/Image.tsx

@@ -5,6 +5,7 @@ import type { ImageCoreProps } from '../ImageCore';
 import ImageCore from '../ImageCore';
 import { css, StyleSheet, useTheme } from '../styles';
 import type ImageProps from './ImageProps';
+import OverlayCloseButton from './OverlayCloseButton';
 
 type PlaceholderMode =
     | 'default'
@@ -63,7 +64,7 @@ function determinePlaceholderMode(props: ImageProps): PlaceholderMode {
     return props.placeholder ? 'custom' : 'default';
 }
 
-export default function Image(props: ImageProps) {
+function Image(props: ImageProps) {
     const {
         alt,
         cache = 'immutable',
@@ -156,4 +157,8 @@ export default function Image(props: ImageProps) {
             ) : null}
         </View>
     );
-};
+}
+
+Image.OverlayCloseButton = OverlayCloseButton;
+
+export default Image;

package/src/Image/OverlayCloseButton/OverlayCloseButton.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { commonColors } from '@fountain-ui/styles';
+import IconButton from '../../IconButton';
+import { CloseCircleFillPierced } from '../../internal';
+import { css, StyleSheet } from '../../styles';
+import type OverlayCloseButtonProps from './OverlayCloseButtonProps';
+
+const styles = StyleSheet.create({
+    root: {
+        height: 40,
+        left: 8,
+        position: 'absolute',
+        top: 8,
+        width: 40,
+    },
+});
+
+export default function OverlayCloseButton(props: OverlayCloseButtonProps) {
+    const {
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <IconButton
+            style={rootStyle}
+            {...otherProps}
+        >
+            <CloseCircleFillPierced
+                fill={commonColors.static.baseOpacityInverse}
+                height={21}
+                width={21}
+            />
+        </IconButton>
+    );
+}

package/src/Image/OverlayCloseButton/OverlayCloseButtonProps.ts

@@ -0,0 +1,3 @@
+import type { IconButtonProps } from '../../IconButton';
+
+export default interface OverlayCloseButtonProps extends Omit<IconButtonProps, 'children'> {}

package/src/Image/OverlayCloseButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './OverlayCloseButton';
+export type { default as OverlayCloseButtonProps } from './OverlayCloseButtonProps';

package/src/ImageCore/ImageCoreNative.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext } from 'react';
-import { Animated } from 'react-native';
+import { Animated, DimensionValue } from 'react-native';
 import FastImage from '@d11/react-native-fast-image';
 import { useAnimatedValue } from '../hooks';
 import { isNotAndroid12 } from '../utils';
@@ -53,7 +53,7 @@ export default function ImageCore(props: ImageCoreProps) {
             }}
             style={[
                 { opacity },
-                { width, height },
+                { width: width as DimensionValue, height: height as DimensionValue },
             ]}
         />
     );