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

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

@@ -2,8 +2,14 @@ import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
         readonly color?: import("../..").CommonComponentColor | undefined;
-        fill?: import("react-native-svg").Color | undefined;
+        fontFamily?: string | undefined;
+        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;
+        fontStyle?: import("react-native-svg").FontStyle | undefined;
         testID?: string | undefined;
+        fontVariant?: import("react-native-svg").FontVariant | undefined;
         opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
         readonly width?: import("react-native-svg").NumberProp | undefined;
@@ -23,7 +29,7 @@ declare const _default: React.MemoExoticComponent<{
         preserveAspectRatio?: string | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
-        stroke?: import("react-native-svg").Color | undefined;
+        stroke?: import("react-native").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;
@@ -31,6 +37,7 @@ declare const _default: React.MemoExoticComponent<{
         strokeLinecap?: import("react-native-svg").Linecap | undefined;
         strokeLinejoin?: import("react-native-svg").Linejoin | undefined;
         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;
@@ -40,7 +47,6 @@ declare const _default: React.MemoExoticComponent<{
         skew?: import("react-native-svg").NumberArray | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | 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;
@@ -68,6 +74,15 @@ declare const _default: React.MemoExoticComponent<{
         markerMid?: string | undefined;
         markerEnd?: string | 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;
+        textDecoration?: import("react-native-svg").TextDecoration | undefined;
+        wordSpacing?: import("react-native-svg").NumberProp | undefined;
+        kerning?: import("react-native-svg").NumberProp | undefined;
+        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;
@@ -107,7 +122,6 @@ 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

@@ -2,8 +2,14 @@ import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
         readonly color?: import("../..").CommonComponentColor | undefined;
-        fill?: import("react-native-svg").Color | undefined;
+        fontFamily?: string | undefined;
+        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;
+        fontStyle?: import("react-native-svg").FontStyle | undefined;
         testID?: string | undefined;
+        fontVariant?: import("react-native-svg").FontVariant | undefined;
         opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
         readonly width?: import("react-native-svg").NumberProp | undefined;
@@ -23,7 +29,7 @@ declare const _default: React.MemoExoticComponent<{
         preserveAspectRatio?: string | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
-        stroke?: import("react-native-svg").Color | undefined;
+        stroke?: import("react-native").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;
@@ -31,6 +37,7 @@ declare const _default: React.MemoExoticComponent<{
         strokeLinecap?: import("react-native-svg").Linecap | undefined;
         strokeLinejoin?: import("react-native-svg").Linejoin | undefined;
         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;
@@ -40,7 +47,6 @@ declare const _default: React.MemoExoticComponent<{
         skew?: import("react-native-svg").NumberArray | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | 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;
@@ -68,6 +74,15 @@ declare const _default: React.MemoExoticComponent<{
         markerMid?: string | undefined;
         markerEnd?: string | 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;
+        textDecoration?: import("react-native-svg").TextDecoration | undefined;
+        wordSpacing?: import("react-native-svg").NumberProp | undefined;
+        kerning?: import("react-native-svg").NumberProp | undefined;
+        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;
@@ -107,7 +122,6 @@ 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

@@ -2,8 +2,14 @@ import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
         readonly color?: import("../..").CommonComponentColor | undefined;
-        fill?: import("react-native-svg").Color | undefined;
+        fontFamily?: string | undefined;
+        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;
+        fontStyle?: import("react-native-svg").FontStyle | undefined;
         testID?: string | undefined;
+        fontVariant?: import("react-native-svg").FontVariant | undefined;
         opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
         readonly width?: import("react-native-svg").NumberProp | undefined;
@@ -23,7 +29,7 @@ declare const _default: React.MemoExoticComponent<{
         preserveAspectRatio?: string | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
-        stroke?: import("react-native-svg").Color | undefined;
+        stroke?: import("react-native").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;
@@ -31,6 +37,7 @@ declare const _default: React.MemoExoticComponent<{
         strokeLinecap?: import("react-native-svg").Linecap | undefined;
         strokeLinejoin?: import("react-native-svg").Linejoin | undefined;
         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;
@@ -40,7 +47,6 @@ declare const _default: React.MemoExoticComponent<{
         skew?: import("react-native-svg").NumberArray | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | 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;
@@ -68,6 +74,15 @@ declare const _default: React.MemoExoticComponent<{
         markerMid?: string | undefined;
         markerEnd?: string | 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;
+        textDecoration?: import("react-native-svg").TextDecoration | undefined;
+        wordSpacing?: import("react-native-svg").NumberProp | undefined;
+        kerning?: import("react-native-svg").NumberProp | undefined;
+        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;
@@ -107,7 +122,6 @@ 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

@@ -2,8 +2,14 @@ import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
         readonly color?: import("../..").CommonComponentColor | undefined;
-        fill?: import("react-native-svg").Color | undefined;
+        fontFamily?: string | undefined;
+        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;
+        fontStyle?: import("react-native-svg").FontStyle | undefined;
         testID?: string | undefined;
+        fontVariant?: import("react-native-svg").FontVariant | undefined;
         opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
         readonly width?: import("react-native-svg").NumberProp | undefined;
@@ -23,7 +29,7 @@ declare const _default: React.MemoExoticComponent<{
         preserveAspectRatio?: string | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
-        stroke?: import("react-native-svg").Color | undefined;
+        stroke?: import("react-native").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;
@@ -31,6 +37,7 @@ declare const _default: React.MemoExoticComponent<{
         strokeLinecap?: import("react-native-svg").Linecap | undefined;
         strokeLinejoin?: import("react-native-svg").Linejoin | undefined;
         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;
@@ -40,7 +47,6 @@ declare const _default: React.MemoExoticComponent<{
         skew?: import("react-native-svg").NumberArray | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | 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;
@@ -68,6 +74,15 @@ declare const _default: React.MemoExoticComponent<{
         markerMid?: string | undefined;
         markerEnd?: string | 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;
+        textDecoration?: import("react-native-svg").TextDecoration | undefined;
+        wordSpacing?: import("react-native-svg").NumberProp | undefined;
+        kerning?: import("react-native-svg").NumberProp | undefined;
+        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;
@@ -107,7 +122,6 @@ 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/CircularProgress.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const _default: () => JSX.Element;
 export default _default;

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

@@ -2,8 +2,14 @@ import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
         readonly color?: import("../..").CommonComponentColor | undefined;
-        fill?: import("react-native-svg").Color | undefined;
+        fontFamily?: string | undefined;
+        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;
+        fontStyle?: import("react-native-svg").FontStyle | undefined;
         testID?: string | undefined;
+        fontVariant?: import("react-native-svg").FontVariant | undefined;
         opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
         readonly width?: import("react-native-svg").NumberProp | undefined;
@@ -23,7 +29,7 @@ declare const _default: React.MemoExoticComponent<{
         preserveAspectRatio?: string | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
-        stroke?: import("react-native-svg").Color | undefined;
+        stroke?: import("react-native").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;
@@ -31,6 +37,7 @@ declare const _default: React.MemoExoticComponent<{
         strokeLinecap?: import("react-native-svg").Linecap | undefined;
         strokeLinejoin?: import("react-native-svg").Linejoin | undefined;
         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;
@@ -40,7 +47,6 @@ declare const _default: React.MemoExoticComponent<{
         skew?: import("react-native-svg").NumberArray | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | 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;
@@ -68,6 +74,15 @@ declare const _default: React.MemoExoticComponent<{
         markerMid?: string | undefined;
         markerEnd?: string | 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;
+        textDecoration?: import("react-native-svg").TextDecoration | undefined;
+        wordSpacing?: import("react-native-svg").NumberProp | undefined;
+        kerning?: import("react-native-svg").NumberProp | undefined;
+        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;
@@ -107,7 +122,6 @@ 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

@@ -2,8 +2,14 @@ import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
         readonly color?: import("../..").CommonComponentColor | undefined;
-        fill?: import("react-native-svg").Color | undefined;
+        fontFamily?: string | undefined;
+        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;
+        fontStyle?: import("react-native-svg").FontStyle | undefined;
         testID?: string | undefined;
+        fontVariant?: import("react-native-svg").FontVariant | undefined;
         opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
         readonly width?: import("react-native-svg").NumberProp | undefined;
@@ -23,7 +29,7 @@ declare const _default: React.MemoExoticComponent<{
         preserveAspectRatio?: string | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
-        stroke?: import("react-native-svg").Color | undefined;
+        stroke?: import("react-native").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;
@@ -31,6 +37,7 @@ declare const _default: React.MemoExoticComponent<{
         strokeLinecap?: import("react-native-svg").Linecap | undefined;
         strokeLinejoin?: import("react-native-svg").Linejoin | undefined;
         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;
@@ -40,7 +47,6 @@ declare const _default: React.MemoExoticComponent<{
         skew?: import("react-native-svg").NumberArray | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | 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;
@@ -68,6 +74,15 @@ declare const _default: React.MemoExoticComponent<{
         markerMid?: string | undefined;
         markerEnd?: string | 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;
+        textDecoration?: import("react-native-svg").TextDecoration | undefined;
+        wordSpacing?: import("react-native-svg").NumberProp | undefined;
+        kerning?: import("react-native-svg").NumberProp | undefined;
+        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;
@@ -107,7 +122,6 @@ 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

@@ -2,8 +2,14 @@ import React from 'react';
 declare const _default: React.MemoExoticComponent<{
     (props: {
         readonly color?: import("../..").CommonComponentColor | undefined;
-        fill?: import("react-native-svg").Color | undefined;
+        fontFamily?: string | undefined;
+        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;
+        fontStyle?: import("react-native-svg").FontStyle | undefined;
         testID?: string | undefined;
+        fontVariant?: import("react-native-svg").FontVariant | undefined;
         opacity?: import("react-native-svg").NumberProp | undefined;
         readonly height?: import("react-native-svg").NumberProp | undefined;
         readonly width?: import("react-native-svg").NumberProp | undefined;
@@ -23,7 +29,7 @@ declare const _default: React.MemoExoticComponent<{
         preserveAspectRatio?: string | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
         fillRule?: import("react-native-svg").FillRule | undefined;
-        stroke?: import("react-native-svg").Color | undefined;
+        stroke?: import("react-native").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;
@@ -31,6 +37,7 @@ declare const _default: React.MemoExoticComponent<{
         strokeLinecap?: import("react-native-svg").Linecap | undefined;
         strokeLinejoin?: import("react-native-svg").Linejoin | undefined;
         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;
@@ -40,7 +47,6 @@ declare const _default: React.MemoExoticComponent<{
         skew?: import("react-native-svg").NumberArray | undefined;
         x?: import("react-native-svg").NumberArray | undefined;
         y?: import("react-native-svg").NumberArray | 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;
@@ -68,6 +74,15 @@ declare const _default: React.MemoExoticComponent<{
         markerMid?: string | undefined;
         markerEnd?: string | 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;
+        textDecoration?: import("react-native-svg").TextDecoration | undefined;
+        wordSpacing?: import("react-native-svg").NumberProp | undefined;
+        kerning?: import("react-native-svg").NumberProp | undefined;
+        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;
@@ -107,7 +122,6 @@ 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/store/MockStore.d.ts

@@ -0,0 +1,6 @@
+import { MonoStore, StoreSubscription } from './types';
+export default class MockStore<T> implements MonoStore<T> {
+    dispatch(data: T): void;
+    removeAllListeners(): void;
+    subscribe(listener: (data: T) => void): StoreSubscription;
+}

package/build/typescript/store/SimpleStore.d.ts

@@ -0,0 +1,9 @@
+import { MonoStore, StoreSubscription } from './types';
+export default class SimpleStore<T> implements MonoStore<T> {
+    private data;
+    private listeners;
+    constructor(initialData: T);
+    subscribe(listener: (data: T) => void): StoreSubscription;
+    dispatch(data: T): void;
+    removeAllListeners(): void;
+}

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

@@ -0,0 +1,3 @@
+export { default as SimpleStore } from './SimpleStore';
+export { default as MockStore } from './MockStore';
+export type { MonoStore } from './types';

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

@@ -0,0 +1,8 @@
+export interface StoreSubscription {
+    (): void;
+}
+export interface MonoStore<T> {
+    dispatch: (data: T) => void;
+    subscribe: (listener: (data: T) => void) => StoreSubscription;
+    removeAllListeners: () => void;
+}

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

@@ -1,3 +1,4 @@
+import type { Animated } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
 export declare type ExtendedStyle<StyleType extends FountainUiStyle = FountainUiStyle> = StyleType;
 export declare type ComponentProps<P = {}> = BaseProps & Readonly<P>;
@@ -8,3 +9,8 @@ export interface BaseProps extends Readonly<{
 }
 export type { Theme } from '@fountain-ui/styles';
 export declare type CommonComponentColor = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'accent';
+export interface SyncAnimatedValue {
+    animatedValue: Animated.Value;
+    initialValue: number;
+    getCurrentValue: () => number;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.20",
   "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": "^2.0.0-beta.1",
-    "@fountain-ui/utils": "^2.0.0-beta.1"
+    "@fountain-ui/styles": "^2.0.0-beta.8",
+    "@fountain-ui/utils": "^2.0.0-beta.4"
   },
   "peerDependencies": {
     "@react-native-community/slider": "^4.1.6",
@@ -42,7 +42,7 @@
     }
   },
   "devDependencies": {
-    "react-native-reanimated": "2.0.1",
+    "react-native-reanimated": "^2.9.1",
     "react-native-svg": "^12.1.1"
   },
   "react-native-builder-bob": {
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8107ff9fe7c77760a205e9656cb7c4b270ac0d52"
+  "gitHead": "8ca13c00c2424b287a26c7cb62619c2c0a9596df"
 }

package/src/Accordion/Accordion.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import Animated from 'react-native-reanimated';
+import type { WithTimingConfig } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { ChevronDown as ChevronDownIcon } from '../internal/icons';
 import ButtonBase from '../ButtonBase';
@@ -13,7 +14,7 @@ import AccordionProps from './AccordionProps';
 
 type AccordionStyles = NamedStylesStringUnion<'root'>;
 
-const ANIMATION_OPTION = { duration: 250 };
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 250 };
 
 const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {
     const theme = useTheme();
@@ -38,15 +39,16 @@ export default function Accordion(props: AccordionProps) {
     const styles = useStyles();
 
     const [isExpanded, setIsExpanded] = useState(false);
-    const rotate = Animated.useSharedValue(0);
 
-    const animatedChevronDownStyles = Animated.useAnimatedStyle(() => ({
+    const rotate = useSharedValue(0);
+
+    const animatedChevronDownStyles = useAnimatedStyle(() => ({
         transform: [{ rotate: `${rotate.value}deg` }],
-    }));
+    }), []);
 
     const onPress = () => {
         setIsExpanded(prev => !prev);
-        rotate.value = Animated.withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);
+        rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_CONFIG);
     };
 
     return (

package/src/AppBar/AppBar.tsx

@@ -5,11 +5,7 @@ import Paper from '../Paper';
 import { css, useTheme } from '../styles';
 import type AppBarProps from './AppBarProps';
 
-type AppBarStyleKeys =
-    | 'root'
-    | 'colorDefault'
-    | 'colorPrimary'
-    | 'colorTransparent';
+type AppBarStyleKeys = 'root';
 
 type AppBarStyles = NamedStylesStringUnion<AppBarStyleKeys>;
 
@@ -23,15 +19,6 @@ const useStyles: UseStyles<AppBarStyles> = function (): AppBarStyles {
             width: '100%',
             zIndex: theme.zIndex.appBar,
         },
-        colorDefault: {
-            backgroundColor: theme.palette.background.default,
-        },
-        colorPrimary: {
-            backgroundColor: theme.palette.primary.main,
-        },
-        colorTransparent: {
-            backgroundColor: 'transparent',
-        },
     };
 };
 
@@ -42,26 +29,31 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
         ...otherProps
     } = props;
 
+    const theme = useTheme();
+
     const styles = useStyles();
 
-    const colorStyle = color === 'default'
-        ? styles.colorDefault
-        : color === 'primary'
-            ? styles.colorPrimary
-            : styles.colorTransparent;
+    const backgroundColor = color === 'default'
+        ? theme.palette.background.default
+        : color === 'paper'
+            ? theme.palette.paper.default
+            : color === 'primary'
+                ? theme.palette.primary.main
+                : 'transparent';
 
     const paperStyle = css([
         styles.root,
-        colorStyle,
+        { backgroundColor },
         style,
     ]);
 
     return (
         <Paper
             ref={ref}
-            square
+            colorValue={backgroundColor}
             elevation={0}
             style={paperStyle}
+            square={true}
             {...otherProps}
         />
     );