@fountain-ui/core 2.0.0-beta.9 → 2.0.0-beta.90

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

@@ -13,7 +13,7 @@ declare const _default: React.MemoExoticComponent<{
         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;
+        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;
         scaleX?: import("react-native-svg").NumberProp | undefined;
         scaleY?: import("react-native-svg").NumberProp | undefined;
@@ -21,10 +21,13 @@ declare const _default: React.MemoExoticComponent<{
         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;
+        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;
-        title?: string | undefined;
         readonly viewBox?: string | undefined;
         preserveAspectRatio?: string | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
@@ -39,7 +42,6 @@ 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;
@@ -69,11 +71,11 @@ declare const _default: React.MemoExoticComponent<{
         delayPressOut?: number | undefined;
         delayLongPress?: number | undefined;
         id?: string | undefined;
-        marker?: string | undefined;
         markerStart?: string | undefined;
         markerMid?: string | undefined;
         markerEnd?: string | undefined;
-        mask?: string | undefined;
+        accessibilityLabel?: string | undefined;
+        accessible?: boolean | undefined;
         font?: import("react-native-svg").FontObject | undefined;
         fontStretch?: import("react-native-svg").FontStretch | undefined;
         textAnchor?: import("react-native-svg").TextAnchor | undefined;
@@ -103,20 +105,20 @@ declare const _default: React.MemoExoticComponent<{
         onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
         onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
         onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        accessible?: boolean | undefined;
         accessibilityActions?: readonly Readonly<{
             name: string;
             label?: string | undefined;
         }>[] | undefined;
-        accessibilityLabel?: string | 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;

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

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

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

@@ -13,7 +13,7 @@ declare const _default: React.MemoExoticComponent<{
         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;
+        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;
         scaleX?: import("react-native-svg").NumberProp | undefined;
         scaleY?: import("react-native-svg").NumberProp | undefined;
@@ -21,10 +21,13 @@ declare const _default: React.MemoExoticComponent<{
         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;
+        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;
-        title?: string | undefined;
         readonly viewBox?: string | undefined;
         preserveAspectRatio?: string | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
@@ -39,7 +42,6 @@ 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;
@@ -69,11 +71,11 @@ declare const _default: React.MemoExoticComponent<{
         delayPressOut?: number | undefined;
         delayLongPress?: number | undefined;
         id?: string | undefined;
-        marker?: string | undefined;
         markerStart?: string | undefined;
         markerMid?: string | undefined;
         markerEnd?: string | undefined;
-        mask?: string | undefined;
+        accessibilityLabel?: string | undefined;
+        accessible?: boolean | undefined;
         font?: import("react-native-svg").FontObject | undefined;
         fontStretch?: import("react-native-svg").FontStretch | undefined;
         textAnchor?: import("react-native-svg").TextAnchor | undefined;
@@ -103,20 +105,20 @@ declare const _default: React.MemoExoticComponent<{
         onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
         onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
         onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        accessible?: boolean | undefined;
         accessibilityActions?: readonly Readonly<{
             name: string;
             label?: string | undefined;
         }>[] | undefined;
-        accessibilityLabel?: string | 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;

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

@@ -13,7 +13,7 @@ declare const _default: React.MemoExoticComponent<{
         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;
+        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;
         scaleX?: import("react-native-svg").NumberProp | undefined;
         scaleY?: import("react-native-svg").NumberProp | undefined;
@@ -21,10 +21,13 @@ declare const _default: React.MemoExoticComponent<{
         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;
+        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;
-        title?: string | undefined;
         readonly viewBox?: string | undefined;
         preserveAspectRatio?: string | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
@@ -39,7 +42,6 @@ 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;
@@ -69,11 +71,11 @@ declare const _default: React.MemoExoticComponent<{
         delayPressOut?: number | undefined;
         delayLongPress?: number | undefined;
         id?: string | undefined;
-        marker?: string | undefined;
         markerStart?: string | undefined;
         markerMid?: string | undefined;
         markerEnd?: string | undefined;
-        mask?: string | undefined;
+        accessibilityLabel?: string | undefined;
+        accessible?: boolean | undefined;
         font?: import("react-native-svg").FontObject | undefined;
         fontStretch?: import("react-native-svg").FontStretch | undefined;
         textAnchor?: import("react-native-svg").TextAnchor | undefined;
@@ -103,20 +105,20 @@ declare const _default: React.MemoExoticComponent<{
         onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
         onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
         onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        accessible?: boolean | undefined;
         accessibilityActions?: readonly Readonly<{
             name: string;
             label?: string | undefined;
         }>[] | undefined;
-        accessibilityLabel?: string | 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;

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

@@ -13,7 +13,7 @@ declare const _default: React.MemoExoticComponent<{
         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;
+        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;
         scaleX?: import("react-native-svg").NumberProp | undefined;
         scaleY?: import("react-native-svg").NumberProp | undefined;
@@ -21,10 +21,13 @@ declare const _default: React.MemoExoticComponent<{
         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;
+        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;
-        title?: string | undefined;
         readonly viewBox?: string | undefined;
         preserveAspectRatio?: string | undefined;
         fillOpacity?: import("react-native-svg").NumberProp | undefined;
@@ -39,7 +42,6 @@ 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;
@@ -69,11 +71,11 @@ declare const _default: React.MemoExoticComponent<{
         delayPressOut?: number | undefined;
         delayLongPress?: number | undefined;
         id?: string | undefined;
-        marker?: string | undefined;
         markerStart?: string | undefined;
         markerMid?: string | undefined;
         markerEnd?: string | undefined;
-        mask?: string | undefined;
+        accessibilityLabel?: string | undefined;
+        accessible?: boolean | undefined;
         font?: import("react-native-svg").FontObject | undefined;
         fontStretch?: import("react-native-svg").FontStretch | undefined;
         textAnchor?: import("react-native-svg").TextAnchor | undefined;
@@ -103,20 +105,20 @@ declare const _default: React.MemoExoticComponent<{
         onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
         onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
         onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        accessible?: boolean | undefined;
         accessibilityActions?: readonly Readonly<{
             name: string;
             label?: string | undefined;
         }>[] | undefined;
-        accessibilityLabel?: string | 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;

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

@@ -0,0 +1,7 @@
+import { MonoStore, StoreSubscription, DispatchAction } from './types';
+export default class MockStore<S> implements MonoStore<S> {
+    dispatch(action: DispatchAction<S>): void;
+    getState(): S;
+    removeAllListeners(): void;
+    subscribe(listener: (state: S) => void): StoreSubscription;
+}

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

@@ -0,0 +1,10 @@
+import type { DispatchAction, MonoStore, StoreSubscription } from './types';
+export default class SimpleStore<S> implements MonoStore<S> {
+    private state;
+    private listeners;
+    constructor(initialState: S);
+    dispatch(action: DispatchAction<S>): void;
+    getState(): S;
+    subscribe(listener: (state: S) => void): StoreSubscription;
+    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, DispatchAction } from './types';

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

@@ -0,0 +1,10 @@
+export interface StoreSubscription {
+    (): void;
+}
+export declare type DispatchAction<State> = State | ((prevState: State) => State);
+export interface MonoStore<S> {
+    dispatch: (action: DispatchAction<S>) => void;
+    getState: () => S;
+    subscribe: (listener: (state: S) => 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/build/typescript/utils/index.d.ts

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

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

@@ -0,0 +1,2 @@
+declare const isNotAndroid12: boolean;
+export default isNotAndroid12;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0-beta.90",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -14,18 +14,18 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@fountain-ui/styles": "^2.0.0-beta.7",
-    "@fountain-ui/utils": "^2.0.0-beta.3"
+    "@fountain-ui/styles": "^2.0.0-beta.12",
+    "@fountain-ui/utils": "^2.0.0-beta.4"
   },
   "peerDependencies": {
     "@react-native-community/slider": "^4.1.6",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react-native": "^0.63.0",
-    "react-native-fast-image": "^8.5.11",
+    "react-native-fast-image": "8.6.3",
     "react-native-reanimated": "^2.0.0",
-    "react-native-safe-area-context": "^3.1.9",
-    "react-native-svg": "^12.1.0"
+    "react-native-safe-area-context": "^4.0.0",
+    "react-native-svg": "^13.14.0"
   },
   "peerDependenciesMeta": {
     "@react-native-community/slider": {
@@ -42,8 +42,8 @@
     }
   },
   "devDependencies": {
-    "react-native-reanimated": "^2.9.1",
-    "react-native-svg": "^12.1.1"
+    "react-native-reanimated": "^2.17.0",
+    "react-native-svg": "^13.14.0"
   },
   "react-native-builder-bob": {
     "source": "./src",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "92adfb973082a3ebaa68ab16d8144230523b36d8"
+  "gitHead": "365f287c04429ca14768c328384f4dbd24d26b4e"
 }

package/src/Accordion/Accordion.tsx

@@ -1,94 +1,190 @@
-import React, { useState } from 'react';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import React, { useEffect, useRef, useState } from 'react';
+import { LayoutChangeEvent, View } from 'react-native';
+import Animated, {
+    useAnimatedStyle,
+    useSharedValue,
+    withDelay,
+    withTiming,
+    WithTimingConfig,
+} from 'react-native-reanimated';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { ChevronDown as ChevronDownIcon } from '../internal/icons';
+import { useTheme } from '../styles';
+import { ChevronDown } from '../internal/icons';
 import ButtonBase from '../ButtonBase';
 import Column from '../Column';
-import Divider from '../Divider';
+import Row from '../Row';
 import Spacer from '../Spacer';
 import Typography from '../Typography';
-import { useTheme } from '../styles';
 
 import AccordionProps from './AccordionProps';
 
-type AccordionStyles = NamedStylesStringUnion<'root'>;
+type AccordionStyles = NamedStylesStringUnion<
+    'root'
+    | 'title'
+    | 'titleColumn'
+    | 'subtitle'
+    | 'contentView'
+>;
 
-const ANIMATION_OPTION = { duration: 250 };
+const ROTATE_HIDE_DEGREE = 0;
+const ROTATE_SHOW_DEGREE = 180;
+const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 200 };
+const INITIAL_EXPANDED_DELAY_MILLIS = 100;
+const CONTENT_OPACITY_DELAY_MILLIS = 200;
 
 const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {
     const theme = useTheme();
 
     return {
-        root: {
-            flexDirection: 'row',
-            paddingVertical: theme.spacing(3),
+        root: { marginBottom: theme.spacing(3) },
+        title: {
+            borderRadius: theme.spacing(4),
+            backgroundColor: theme.palette.paper.grey,
+            paddingHorizontal: theme.spacing(4),
+            paddingVertical: theme.spacing(3.5),
+            alignItems: 'center',
+            height: 64,
+        },
+        titleColumn: { flexShrink: 1 },
+        subtitle: {
+            fontSize: 11,
+            lineHeight: 12,
+            fontFamily: 'Inter-Regular',
+        },
+        contentView: {
+            position: 'absolute',
+            width: '100%',
+            borderRadius: theme.spacing(4),
+            backgroundColor: theme.palette.paper.grey,
+            paddingHorizontal: theme.spacing(4),
+            paddingVertical: theme.spacing(6),
+            marginTop: theme.spacing(1),
         },
     };
 };
 
 export default function Accordion(props: AccordionProps) {
     const {
+        title,
+        subTitle,
         content,
-        LeftIcon,
         RightIcon,
-        title,
-        titleVariant = 'subtitle2',
+        LeftComponent,
+        isInitialExpanded = false,
     } = props;
 
     const styles = useStyles();
+    const theme = useTheme();
+    const CONTENT_MARGIN_HEIGHT = theme.spacing(2);
 
     const [isExpanded, setIsExpanded] = useState(false);
-    const rotate = useSharedValue(0);
+    const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);
+
+    const rotate = useSharedValue(ROTATE_HIDE_DEGREE);
+    const animatedOpacity = useSharedValue(0);
+
+    const animatedHeight = useSharedValue(0);
+    const [contentHeight, setContentHeight] = useState(0);
 
     const animatedChevronDownStyles = useAnimatedStyle(() => ({
         transform: [{ rotate: `${rotate.value}deg` }],
-    }));
+    }), []);
+
+    const animatedContentBackgroundStyles = useAnimatedStyle(() => ({
+        height: animatedHeight.value,
+        overflow: 'hidden',
+    }), []);
+
+    const animatedContentStyle = useAnimatedStyle(() => ({
+        opacity: animatedOpacity.value,
+    }), []);
 
     const onPress = () => {
         setIsExpanded(prev => !prev);
-        rotate.value = withTiming(!isExpanded ? 180 : 0, ANIMATION_OPTION);
     };
 
+    const onLayout = (event: LayoutChangeEvent) => {
+        const height = event.nativeEvent.layout.height + CONTENT_MARGIN_HEIGHT;
+        setContentHeight(height);
+
+        if (shouldInitialExpandedRef.current) {
+            shouldInitialExpandedRef.current = false;
+            setTimeout(() => setIsExpanded(true), INITIAL_EXPANDED_DELAY_MILLIS);
+        }
+    };
+
+    useEffect(() => {
+        rotate.value = withTiming(isExpanded ? ROTATE_SHOW_DEGREE : ROTATE_HIDE_DEGREE, ANIMATION_CONFIG);
+
+        animatedHeight.value = withTiming(isExpanded ? contentHeight : 0, ANIMATION_CONFIG);
+
+        animatedOpacity.value = isExpanded
+            ? withDelay(CONTENT_OPACITY_DELAY_MILLIS, withTiming(1, ANIMATION_CONFIG))
+            : withTiming(0, ANIMATION_CONFIG);
+    }, [isExpanded, contentHeight]);
+
     return (
-        <Column>
-            <ButtonBase
-                onPress={onPress}
-                style={styles.root}
-            >
-                {LeftIcon ? (
-                    <React.Fragment>
-                        {LeftIcon}
-                        <Spacer size={2}/>
-                    </React.Fragment>
-                ) : null}
-
-                <Typography
-                    children={title}
-                    variant={titleVariant}
-                />
-
-                <Spacer flex={1}/>
-
-                <Spacer size={2}/>
-
-                <Column>
+        <Column style={styles.root}>
+            <ButtonBase onPress={onPress}>
+                <Row style={styles.title}>
+                    {LeftComponent ? LeftComponent : null}
+
+                    <Column style={styles.titleColumn}>
+                        <Typography
+                            variant={'subtitle2'}
+                            children={title}
+                            color={'textPrimary'}
+                            numberOfLines={1}
+                            disableFontScaling={true}
+                        />
+
+                        {subTitle ? (
+                            <React.Fragment>
+                                <Spacer size={0.5}/>
+
+                                <Typography
+                                    style={styles.subtitle}
+                                    color={'tertiary'}
+                                    children={subTitle}
+                                    numberOfLines={1}
+                                    disableFontScaling={true}
+                                />
+                            </React.Fragment>
+                        ) : null}
+                    </Column>
+
+                    <Spacer flex={1}/>
+
+                    <Spacer size={3}/>
+
                     <Animated.View style={animatedChevronDownStyles}>
-                        {RightIcon ? RightIcon : <ChevronDownIcon/>}
+                        {RightIcon ? RightIcon : (
+                            <ChevronDown
+                                width={20}
+                                height={20}
+                                color={'tertiary'}
+                            />
+                        )}
                     </Animated.View>
-                </Column>
+                </Row>
             </ButtonBase>
 
-            {isExpanded ? (
-                React.isValidElement(content) ? (content) : (
-                    <Typography
-                        children={content}
-                        color={'textSecondary'}
-                        variant={'body2'}
-                    />
-                )
-            ) : null}
-
-            <Divider/>
+            <Animated.View style={animatedContentBackgroundStyles}>
+                <View
+                    onLayout={onLayout}
+                    style={styles.contentView}
+                >
+                    <Animated.View style={animatedContentStyle}>
+                        {typeof content === 'string' ? (
+                            <Typography
+                                variant={'subtitle2'}
+                                color={'tertiary'}
+                                children={content}
+                            />
+                        ) : (content)}
+                    </Animated.View>
+                </View>
+            </Animated.View>
         </Column>
     );
 }