@fountain-ui/core 1.19.0 → 2.0.0-beta.2

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

@@ -1,15 +1,26 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
-        readonly style?: import("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
-        readonly width?: import("react-native-svg").NumberProp | undefined;
+        readonly color?: import("../..").CommonComponentColor | undefined;
+        fill?: import("react-native-svg").Color | undefined;
+        testID?: string | undefined;
+        opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
+        readonly width?: import("react-native-svg").NumberProp | undefined;
+        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
+        rotation?: import("react-native-svg").NumberProp | 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("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        scale?: import("react-native-svg").NumberArray | undefined;
+        skewX?: import("react-native-svg").NumberProp | undefined;
+        skewY?: import("react-native-svg").NumberProp | undefined;
+        title?: string | undefined;
         readonly viewBox?: string | undefined;
         preserveAspectRatio?: string | undefined;
-        readonly color?: import("react-native-svg").Color | undefined;
-        title?: string | undefined;
-        opacity?: import("react-native-svg").NumberProp | undefined;
-        readonly fill?: import("react-native-svg").Color | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
         stroke?: import("react-native-svg").Color | undefined;
@@ -22,23 +33,14 @@ declare const _default: React.MemoExoticComponent<{
         strokeMiterlimit?: import("react-native-svg").NumberProp | undefined;
         clipRule?: import("react-native-svg").FillRule | undefined;
         clipPath?: string | undefined;
-        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
         translate?: import("react-native-svg").NumberArray | undefined;
-        translateX?: import("react-native-svg").NumberProp | undefined;
-        translateY?: import("react-native-svg").NumberProp | undefined;
         origin?: import("react-native-svg").NumberArray | undefined;
         originX?: import("react-native-svg").NumberProp | undefined;
         originY?: 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;
         skew?: import("react-native-svg").NumberArray | undefined;
-        skewX?: import("react-native-svg").NumberProp | undefined;
-        skewY?: import("react-native-svg").NumberProp | undefined;
-        rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
+        vectorEffect?: "none" | "inherit" | "default" | "non-scaling-stroke" | "nonScalingStroke" | "uri" | 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;
@@ -67,9 +69,7 @@ declare const _default: React.MemoExoticComponent<{
         markerEnd?: string | undefined;
         mask?: string | undefined;
         hitSlop?: import("react-native").Insets | undefined;
-        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
         removeClippedSubviews?: boolean | undefined;
-        testID?: string | undefined;
         nativeID?: string | undefined;
         collapsable?: boolean | undefined;
         needsOffscreenAlphaCompositing?: boolean | undefined;
@@ -107,6 +107,7 @@ declare const _default: React.MemoExoticComponent<{
         onAccessibilityTap?: (() => void) | undefined;
         onMagicTap?: (() => void) | undefined;
         accessibilityIgnoresInvertColors?: boolean | undefined;
+        readonly colorValue?: string | undefined;
     }): JSX.Element;
     displayName: string;
 }>;

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

@@ -1,15 +1,26 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
-        readonly style?: import("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
-        readonly width?: import("react-native-svg").NumberProp | undefined;
+        readonly color?: import("../..").CommonComponentColor | undefined;
+        fill?: import("react-native-svg").Color | undefined;
+        testID?: string | undefined;
+        opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
+        readonly width?: import("react-native-svg").NumberProp | undefined;
+        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
+        rotation?: import("react-native-svg").NumberProp | 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("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        scale?: import("react-native-svg").NumberArray | undefined;
+        skewX?: import("react-native-svg").NumberProp | undefined;
+        skewY?: import("react-native-svg").NumberProp | undefined;
+        title?: string | undefined;
         readonly viewBox?: string | undefined;
         preserveAspectRatio?: string | undefined;
-        readonly color?: import("react-native-svg").Color | undefined;
-        title?: string | undefined;
-        opacity?: import("react-native-svg").NumberProp | undefined;
-        readonly fill?: import("react-native-svg").Color | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
         stroke?: import("react-native-svg").Color | undefined;
@@ -22,23 +33,14 @@ declare const _default: React.MemoExoticComponent<{
         strokeMiterlimit?: import("react-native-svg").NumberProp | undefined;
         clipRule?: import("react-native-svg").FillRule | undefined;
         clipPath?: string | undefined;
-        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
         translate?: import("react-native-svg").NumberArray | undefined;
-        translateX?: import("react-native-svg").NumberProp | undefined;
-        translateY?: import("react-native-svg").NumberProp | undefined;
         origin?: import("react-native-svg").NumberArray | undefined;
         originX?: import("react-native-svg").NumberProp | undefined;
         originY?: 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;
         skew?: import("react-native-svg").NumberArray | undefined;
-        skewX?: import("react-native-svg").NumberProp | undefined;
-        skewY?: import("react-native-svg").NumberProp | undefined;
-        rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
+        vectorEffect?: "none" | "inherit" | "default" | "non-scaling-stroke" | "nonScalingStroke" | "uri" | 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;
@@ -67,9 +69,7 @@ declare const _default: React.MemoExoticComponent<{
         markerEnd?: string | undefined;
         mask?: string | undefined;
         hitSlop?: import("react-native").Insets | undefined;
-        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
         removeClippedSubviews?: boolean | undefined;
-        testID?: string | undefined;
         nativeID?: string | undefined;
         collapsable?: boolean | undefined;
         needsOffscreenAlphaCompositing?: boolean | undefined;
@@ -107,6 +107,7 @@ declare const _default: React.MemoExoticComponent<{
         onAccessibilityTap?: (() => void) | undefined;
         onMagicTap?: (() => void) | undefined;
         accessibilityIgnoresInvertColors?: boolean | undefined;
+        readonly colorValue?: string | undefined;
     }): JSX.Element;
     displayName: string;
 }>;

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

@@ -1,15 +1,26 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
-        readonly style?: import("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
-        readonly width?: import("react-native-svg").NumberProp | undefined;
+        readonly color?: import("../..").CommonComponentColor | undefined;
+        fill?: import("react-native-svg").Color | undefined;
+        testID?: string | undefined;
+        opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
+        readonly width?: import("react-native-svg").NumberProp | undefined;
+        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
+        rotation?: import("react-native-svg").NumberProp | 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("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        scale?: import("react-native-svg").NumberArray | undefined;
+        skewX?: import("react-native-svg").NumberProp | undefined;
+        skewY?: import("react-native-svg").NumberProp | undefined;
+        title?: string | undefined;
         readonly viewBox?: string | undefined;
         preserveAspectRatio?: string | undefined;
-        readonly color?: import("react-native-svg").Color | undefined;
-        title?: string | undefined;
-        opacity?: import("react-native-svg").NumberProp | undefined;
-        readonly fill?: import("react-native-svg").Color | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
         stroke?: import("react-native-svg").Color | undefined;
@@ -22,23 +33,14 @@ declare const _default: React.MemoExoticComponent<{
         strokeMiterlimit?: import("react-native-svg").NumberProp | undefined;
         clipRule?: import("react-native-svg").FillRule | undefined;
         clipPath?: string | undefined;
-        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
         translate?: import("react-native-svg").NumberArray | undefined;
-        translateX?: import("react-native-svg").NumberProp | undefined;
-        translateY?: import("react-native-svg").NumberProp | undefined;
         origin?: import("react-native-svg").NumberArray | undefined;
         originX?: import("react-native-svg").NumberProp | undefined;
         originY?: 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;
         skew?: import("react-native-svg").NumberArray | undefined;
-        skewX?: import("react-native-svg").NumberProp | undefined;
-        skewY?: import("react-native-svg").NumberProp | undefined;
-        rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
+        vectorEffect?: "none" | "inherit" | "default" | "non-scaling-stroke" | "nonScalingStroke" | "uri" | 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;
@@ -67,9 +69,7 @@ declare const _default: React.MemoExoticComponent<{
         markerEnd?: string | undefined;
         mask?: string | undefined;
         hitSlop?: import("react-native").Insets | undefined;
-        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
         removeClippedSubviews?: boolean | undefined;
-        testID?: string | undefined;
         nativeID?: string | undefined;
         collapsable?: boolean | undefined;
         needsOffscreenAlphaCompositing?: boolean | undefined;
@@ -107,6 +107,7 @@ declare const _default: React.MemoExoticComponent<{
         onAccessibilityTap?: (() => void) | undefined;
         onMagicTap?: (() => void) | undefined;
         accessibilityIgnoresInvertColors?: boolean | undefined;
+        readonly colorValue?: string | undefined;
     }): JSX.Element;
     displayName: string;
 }>;

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

@@ -1,15 +1,26 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
-        readonly style?: import("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
-        readonly width?: import("react-native-svg").NumberProp | undefined;
+        readonly color?: import("../..").CommonComponentColor | undefined;
+        fill?: import("react-native-svg").Color | undefined;
+        testID?: string | undefined;
+        opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
+        readonly width?: import("react-native-svg").NumberProp | undefined;
+        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
+        rotation?: import("react-native-svg").NumberProp | 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("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        scale?: import("react-native-svg").NumberArray | undefined;
+        skewX?: import("react-native-svg").NumberProp | undefined;
+        skewY?: import("react-native-svg").NumberProp | undefined;
+        title?: string | undefined;
         readonly viewBox?: string | undefined;
         preserveAspectRatio?: string | undefined;
-        readonly color?: import("react-native-svg").Color | undefined;
-        title?: string | undefined;
-        opacity?: import("react-native-svg").NumberProp | undefined;
-        readonly fill?: import("react-native-svg").Color | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
         stroke?: import("react-native-svg").Color | undefined;
@@ -22,23 +33,14 @@ declare const _default: React.MemoExoticComponent<{
         strokeMiterlimit?: import("react-native-svg").NumberProp | undefined;
         clipRule?: import("react-native-svg").FillRule | undefined;
         clipPath?: string | undefined;
-        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
         translate?: import("react-native-svg").NumberArray | undefined;
-        translateX?: import("react-native-svg").NumberProp | undefined;
-        translateY?: import("react-native-svg").NumberProp | undefined;
         origin?: import("react-native-svg").NumberArray | undefined;
         originX?: import("react-native-svg").NumberProp | undefined;
         originY?: 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;
         skew?: import("react-native-svg").NumberArray | undefined;
-        skewX?: import("react-native-svg").NumberProp | undefined;
-        skewY?: import("react-native-svg").NumberProp | undefined;
-        rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
+        vectorEffect?: "none" | "inherit" | "default" | "non-scaling-stroke" | "nonScalingStroke" | "uri" | 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;
@@ -67,9 +69,7 @@ declare const _default: React.MemoExoticComponent<{
         markerEnd?: string | undefined;
         mask?: string | undefined;
         hitSlop?: import("react-native").Insets | undefined;
-        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
         removeClippedSubviews?: boolean | undefined;
-        testID?: string | undefined;
         nativeID?: string | undefined;
         collapsable?: boolean | undefined;
         needsOffscreenAlphaCompositing?: boolean | undefined;
@@ -107,6 +107,7 @@ declare const _default: React.MemoExoticComponent<{
         onAccessibilityTap?: (() => void) | undefined;
         onMagicTap?: (() => void) | undefined;
         accessibilityIgnoresInvertColors?: boolean | undefined;
+        readonly colorValue?: string | undefined;
     }): JSX.Element;
     displayName: string;
 }>;

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

@@ -1,15 +1,26 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
-        readonly style?: import("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
-        readonly width?: import("react-native-svg").NumberProp | undefined;
+        readonly color?: import("../..").CommonComponentColor | undefined;
+        fill?: import("react-native-svg").Color | undefined;
+        testID?: string | undefined;
+        opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
+        readonly width?: import("react-native-svg").NumberProp | undefined;
+        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
+        rotation?: import("react-native-svg").NumberProp | 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("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        scale?: import("react-native-svg").NumberArray | undefined;
+        skewX?: import("react-native-svg").NumberProp | undefined;
+        skewY?: import("react-native-svg").NumberProp | undefined;
+        title?: string | undefined;
         readonly viewBox?: string | undefined;
         preserveAspectRatio?: string | undefined;
-        readonly color?: import("react-native-svg").Color | undefined;
-        title?: string | undefined;
-        opacity?: import("react-native-svg").NumberProp | undefined;
-        readonly fill?: import("react-native-svg").Color | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
         stroke?: import("react-native-svg").Color | undefined;
@@ -22,23 +33,14 @@ declare const _default: React.MemoExoticComponent<{
         strokeMiterlimit?: import("react-native-svg").NumberProp | undefined;
         clipRule?: import("react-native-svg").FillRule | undefined;
         clipPath?: string | undefined;
-        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
         translate?: import("react-native-svg").NumberArray | undefined;
-        translateX?: import("react-native-svg").NumberProp | undefined;
-        translateY?: import("react-native-svg").NumberProp | undefined;
         origin?: import("react-native-svg").NumberArray | undefined;
         originX?: import("react-native-svg").NumberProp | undefined;
         originY?: 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;
         skew?: import("react-native-svg").NumberArray | undefined;
-        skewX?: import("react-native-svg").NumberProp | undefined;
-        skewY?: import("react-native-svg").NumberProp | undefined;
-        rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
+        vectorEffect?: "none" | "inherit" | "default" | "non-scaling-stroke" | "nonScalingStroke" | "uri" | 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;
@@ -67,9 +69,7 @@ declare const _default: React.MemoExoticComponent<{
         markerEnd?: string | undefined;
         mask?: string | undefined;
         hitSlop?: import("react-native").Insets | undefined;
-        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
         removeClippedSubviews?: boolean | undefined;
-        testID?: string | undefined;
         nativeID?: string | undefined;
         collapsable?: boolean | undefined;
         needsOffscreenAlphaCompositing?: boolean | undefined;
@@ -107,6 +107,7 @@ declare const _default: React.MemoExoticComponent<{
         onAccessibilityTap?: (() => void) | undefined;
         onMagicTap?: (() => void) | undefined;
         accessibilityIgnoresInvertColors?: boolean | undefined;
+        readonly colorValue?: string | undefined;
     }): JSX.Element;
     displayName: string;
 }>;

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

@@ -1,15 +1,26 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
-        readonly style?: import("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
-        readonly width?: import("react-native-svg").NumberProp | undefined;
+        readonly color?: import("../..").CommonComponentColor | undefined;
+        fill?: import("react-native-svg").Color | undefined;
+        testID?: string | undefined;
+        opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
+        readonly width?: import("react-native-svg").NumberProp | undefined;
+        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
+        rotation?: import("react-native-svg").NumberProp | 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("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        scale?: import("react-native-svg").NumberArray | undefined;
+        skewX?: import("react-native-svg").NumberProp | undefined;
+        skewY?: import("react-native-svg").NumberProp | undefined;
+        title?: string | undefined;
         readonly viewBox?: string | undefined;
         preserveAspectRatio?: string | undefined;
-        readonly color?: import("react-native-svg").Color | undefined;
-        title?: string | undefined;
-        opacity?: import("react-native-svg").NumberProp | undefined;
-        readonly fill?: import("react-native-svg").Color | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
         stroke?: import("react-native-svg").Color | undefined;
@@ -22,23 +33,14 @@ declare const _default: React.MemoExoticComponent<{
         strokeMiterlimit?: import("react-native-svg").NumberProp | undefined;
         clipRule?: import("react-native-svg").FillRule | undefined;
         clipPath?: string | undefined;
-        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
         translate?: import("react-native-svg").NumberArray | undefined;
-        translateX?: import("react-native-svg").NumberProp | undefined;
-        translateY?: import("react-native-svg").NumberProp | undefined;
         origin?: import("react-native-svg").NumberArray | undefined;
         originX?: import("react-native-svg").NumberProp | undefined;
         originY?: 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;
         skew?: import("react-native-svg").NumberArray | undefined;
-        skewX?: import("react-native-svg").NumberProp | undefined;
-        skewY?: import("react-native-svg").NumberProp | undefined;
-        rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
+        vectorEffect?: "none" | "inherit" | "default" | "non-scaling-stroke" | "nonScalingStroke" | "uri" | 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;
@@ -67,9 +69,7 @@ declare const _default: React.MemoExoticComponent<{
         markerEnd?: string | undefined;
         mask?: string | undefined;
         hitSlop?: import("react-native").Insets | undefined;
-        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
         removeClippedSubviews?: boolean | undefined;
-        testID?: string | undefined;
         nativeID?: string | undefined;
         collapsable?: boolean | undefined;
         needsOffscreenAlphaCompositing?: boolean | undefined;
@@ -107,6 +107,7 @@ declare const _default: React.MemoExoticComponent<{
         onAccessibilityTap?: (() => void) | undefined;
         onMagicTap?: (() => void) | undefined;
         accessibilityIgnoresInvertColors?: boolean | undefined;
+        readonly colorValue?: string | undefined;
     }): JSX.Element;
     displayName: string;
 }>;

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

@@ -1,15 +1,26 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
-        readonly style?: import("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
-        readonly width?: import("react-native-svg").NumberProp | undefined;
+        readonly color?: import("../..").CommonComponentColor | undefined;
+        fill?: import("react-native-svg").Color | undefined;
+        testID?: string | undefined;
+        opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
+        readonly width?: import("react-native-svg").NumberProp | undefined;
+        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
+        rotation?: import("react-native-svg").NumberProp | 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("@emotion/native").ReactNativeStyle | import("@emotion/native").ReactNativeStyle[] | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        scale?: import("react-native-svg").NumberArray | undefined;
+        skewX?: import("react-native-svg").NumberProp | undefined;
+        skewY?: import("react-native-svg").NumberProp | undefined;
+        title?: string | undefined;
         readonly viewBox?: string | undefined;
         preserveAspectRatio?: string | undefined;
-        readonly color?: import("react-native-svg").Color | undefined;
-        title?: string | undefined;
-        opacity?: import("react-native-svg").NumberProp | undefined;
-        readonly fill?: import("react-native-svg").Color | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
         stroke?: import("react-native-svg").Color | undefined;
@@ -22,23 +33,14 @@ declare const _default: React.MemoExoticComponent<{
         strokeMiterlimit?: import("react-native-svg").NumberProp | undefined;
         clipRule?: import("react-native-svg").FillRule | undefined;
         clipPath?: string | undefined;
-        transform?: string | import("react-native-svg").TransformObject | import("react-native-svg").ColumnMajorTransformMatrix | undefined;
         translate?: import("react-native-svg").NumberArray | undefined;
-        translateX?: import("react-native-svg").NumberProp | undefined;
-        translateY?: import("react-native-svg").NumberProp | undefined;
         origin?: import("react-native-svg").NumberArray | undefined;
         originX?: import("react-native-svg").NumberProp | undefined;
         originY?: 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;
         skew?: import("react-native-svg").NumberArray | undefined;
-        skewX?: import("react-native-svg").NumberProp | undefined;
-        skewY?: import("react-native-svg").NumberProp | undefined;
-        rotation?: import("react-native-svg").NumberProp | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | undefined;
-        vectorEffect?: "none" | "inherit" | "non-scaling-stroke" | "nonScalingStroke" | "default" | "uri" | undefined;
+        vectorEffect?: "none" | "inherit" | "default" | "non-scaling-stroke" | "nonScalingStroke" | "uri" | 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;
@@ -67,9 +69,7 @@ declare const _default: React.MemoExoticComponent<{
         markerEnd?: string | undefined;
         mask?: string | undefined;
         hitSlop?: import("react-native").Insets | undefined;
-        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
         removeClippedSubviews?: boolean | undefined;
-        testID?: string | undefined;
         nativeID?: string | undefined;
         collapsable?: boolean | undefined;
         needsOffscreenAlphaCompositing?: boolean | undefined;
@@ -107,6 +107,7 @@ declare const _default: React.MemoExoticComponent<{
         onAccessibilityTap?: (() => void) | undefined;
         onMagicTap?: (() => void) | undefined;
         accessibilityIgnoresInvertColors?: boolean | undefined;
+        readonly colorValue?: string | undefined;
     }): JSX.Element;
     displayName: string;
 }>;

package/build/typescript/styles/index.d.ts

@@ -1,4 +1,3 @@
-export { default as cloneSvgIcon } from './cloneSvgIcon';
 export { default as createFontStyle } from './createFontStyle';
 export { default as EdgeInsets } from './EdgeInsets';
 export type { EdgeInsetsType } from './EdgeInsets';

package/build/typescript/types/index.d.ts

@@ -7,3 +7,4 @@ export interface BaseProps extends Readonly<{
 }> {
 }
 export type { Theme } from '@fountain-ui/styles';
+export declare type CommonComponentColor = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'accent';

package/build/typescript/utils/cloneElementSafely.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+declare type FalsyReactElement = ReactElement | null | undefined;
+export default function cloneElementSafely(element: FalsyReactElement, props?: any): FalsyReactElement;
+export {};

package/build/typescript/utils/index.d.ts

@@ -1 +1,2 @@
+export { default as cloneElementSafely } from './cloneElementSafely';
 export { default as createSvgIcon } from './createSvgIcon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "1.19.0",
+  "version": "2.0.0-beta.2",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -14,8 +14,8 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@fountain-ui/styles": "^1.5.0",
-    "@fountain-ui/utils": "^1.1.0"
+    "@fountain-ui/styles": "^2.0.0-beta.1",
+    "@fountain-ui/utils": "^2.0.0-beta.1"
   },
   "peerDependencies": {
     "@react-native-community/slider": "^4.1.6",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "471da1539616fd885a946692a80d94533e10ce02"
+  "gitHead": "8107ff9fe7c77760a205e9656cb7c4b270ac0d52"
 }

package/src/Accordion/Accordion.tsx

@@ -73,10 +73,7 @@ export default function Accordion(props: AccordionProps) {
 
                 <Column>
                     <Animated.View style={animatedChevronDownStyles}>
-                        {RightIcon ? RightIcon : (
-                            // @ts-ignore
-                            <ChevronDownIcon height={24} width={24}/>
-                        )}
+                        {RightIcon ? RightIcon : <ChevronDownIcon/>}
                     </Animated.View>
                 </Column>
             </ButtonBase>

package/src/Button/Button.tsx

@@ -1,8 +1,17 @@
 import React from 'react';
 import { Linking, Text } from 'react-native';
 import ButtonBase from '../ButtonBase';
-import { cloneSvgIcon, createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import { createFontStyle, css, StyleSheet, useTheme } from '../styles';
+import { cloneElementSafely } from '../utils';
 import type ButtonProps from './ButtonProps';
+import type { ButtonSize } from './ButtonProps';
+
+type IconSizes = { [n in ButtonSize]: number };
+
+const iconSizes: IconSizes = {
+    small: 20,
+    medium: 24,
+};
 
 const styles = StyleSheet.create({
     root: {
@@ -63,8 +72,14 @@ export default function Button(props: ButtonProps) {
         },
     };
 
-    const startIcon = cloneSvgIcon(startIconProp, { size, color: fontColor });
-    const endIcon = cloneSvgIcon(endIconProp, { size, color: fontColor });
+    const iconProps = {
+        width: iconSizes[size],
+        height: iconSizes[size],
+        colorValue: fontColor,
+    };
+
+    const startIcon = cloneElementSafely(startIconProp, iconProps);
+    const endIcon = cloneElementSafely(endIconProp, iconProps);
 
     const paddingSize = size === 'small' ? theme.spacing(2) : theme.spacing(4);
     const paddingLeft = startIcon ? paddingSize - theme.spacing(1) : paddingSize;