@fountain-ui/core 2.0.0-beta.92 → 2.0.0-beta.94

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

@@ -1,129 +1,7 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<{
-    (props: {
-        readonly color?: import("../..").CommonComponentColor | 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;
-        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;
-        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;
-        title?: string | undefined;
-        clipPath?: string | undefined;
-        marker?: string | undefined;
-        mask?: string | undefined;
-        scale?: import("react-native-svg").NumberArray | undefined;
-        skewX?: import("react-native-svg").NumberProp | undefined;
-        skewY?: import("react-native-svg").NumberProp | undefined;
-        readonly viewBox?: string | undefined;
-        preserveAspectRatio?: string | undefined;
-        fillOpacity?: import("react-native-svg").NumberProp | undefined;
-        fillRule?: import("react-native-svg").FillRule | 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;
-        strokeDashoffset?: import("react-native-svg").NumberProp | undefined;
-        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;
-        translate?: import("react-native-svg").NumberArray | undefined;
-        origin?: import("react-native-svg").NumberArray | undefined;
-        originX?: import("react-native-svg").NumberProp | undefined;
-        originY?: import("react-native-svg").NumberProp | undefined;
-        skew?: import("react-native-svg").NumberArray | undefined;
-        x?: import("react-native-svg").NumberArray | undefined;
-        y?: import("react-native-svg").NumberArray | undefined;
-        pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
-        onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
-        onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
-        onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
-        onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
-        onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
-        disabled?: boolean | undefined;
-        onPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onPressIn?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onPressOut?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onLongPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        delayPressIn?: number | undefined;
-        delayPressOut?: number | undefined;
-        delayLongPress?: number | undefined;
-        id?: string | undefined;
-        markerStart?: string | undefined;
-        markerMid?: string | undefined;
-        markerEnd?: 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;
-        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;
-        collapsable?: boolean | undefined;
-        needsOffscreenAlphaCompositing?: boolean | undefined;
-        renderToHardwareTextureAndroid?: boolean | undefined;
-        focusable?: boolean | undefined;
-        shouldRasterizeIOS?: boolean | undefined;
-        isTVSelectable?: boolean | undefined;
-        hasTVPreferredFocus?: boolean | undefined;
-        tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
-        tvParallaxShiftDistanceX?: number | undefined;
-        tvParallaxShiftDistanceY?: number | undefined;
-        tvParallaxTiltAngle?: number | undefined;
-        tvParallaxMagnification?: number | undefined;
-        onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        accessibilityActions?: readonly Readonly<{
-            name: string;
-            label?: string | undefined;
-        }>[] | undefined;
-        accessibilityRole?: import("react-native").AccessibilityRole | undefined;
-        accessibilityState?: import("react-native").AccessibilityState | undefined;
-        accessibilityHint?: string | undefined;
-        accessibilityValue?: import("react-native").AccessibilityValue | undefined;
-        onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
-        accessibilityLabelledBy?: string | string[] | undefined;
-        accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
-        importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
-        accessibilityElementsHidden?: boolean | undefined;
-        accessibilityLanguage?: string | undefined;
-        accessibilityViewIsModal?: boolean | undefined;
-        onAccessibilityEscape?: (() => void) | undefined;
-        onAccessibilityTap?: (() => void) | undefined;
-        onMagicTap?: (() => void) | undefined;
-        accessibilityIgnoresInvertColors?: boolean | undefined;
+    (props: (Omit<import("../../SvgIcon/SvgIconProps").default, "children"> | Omit<import("../..").SvgIconProps, "children">) & {
+        enableV2?: boolean | undefined;
     }): JSX.Element;
     displayName: string;
 }>;

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

@@ -1,129 +1,7 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<{
-    (props: {
-        readonly color?: import("../..").CommonComponentColor | 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;
-        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;
-        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;
-        title?: string | undefined;
-        clipPath?: string | undefined;
-        marker?: string | undefined;
-        mask?: string | undefined;
-        scale?: import("react-native-svg").NumberArray | undefined;
-        skewX?: import("react-native-svg").NumberProp | undefined;
-        skewY?: import("react-native-svg").NumberProp | undefined;
-        readonly viewBox?: string | undefined;
-        preserveAspectRatio?: string | undefined;
-        fillOpacity?: import("react-native-svg").NumberProp | undefined;
-        fillRule?: import("react-native-svg").FillRule | 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;
-        strokeDashoffset?: import("react-native-svg").NumberProp | undefined;
-        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;
-        translate?: import("react-native-svg").NumberArray | undefined;
-        origin?: import("react-native-svg").NumberArray | undefined;
-        originX?: import("react-native-svg").NumberProp | undefined;
-        originY?: import("react-native-svg").NumberProp | undefined;
-        skew?: import("react-native-svg").NumberArray | undefined;
-        x?: import("react-native-svg").NumberArray | undefined;
-        y?: import("react-native-svg").NumberArray | undefined;
-        pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
-        onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
-        onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
-        onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
-        onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
-        onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
-        disabled?: boolean | undefined;
-        onPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onPressIn?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onPressOut?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onLongPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        delayPressIn?: number | undefined;
-        delayPressOut?: number | undefined;
-        delayLongPress?: number | undefined;
-        id?: string | undefined;
-        markerStart?: string | undefined;
-        markerMid?: string | undefined;
-        markerEnd?: 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;
-        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;
-        collapsable?: boolean | undefined;
-        needsOffscreenAlphaCompositing?: boolean | undefined;
-        renderToHardwareTextureAndroid?: boolean | undefined;
-        focusable?: boolean | undefined;
-        shouldRasterizeIOS?: boolean | undefined;
-        isTVSelectable?: boolean | undefined;
-        hasTVPreferredFocus?: boolean | undefined;
-        tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
-        tvParallaxShiftDistanceX?: number | undefined;
-        tvParallaxShiftDistanceY?: number | undefined;
-        tvParallaxTiltAngle?: number | undefined;
-        tvParallaxMagnification?: number | undefined;
-        onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
-        accessibilityActions?: readonly Readonly<{
-            name: string;
-            label?: string | undefined;
-        }>[] | undefined;
-        accessibilityRole?: import("react-native").AccessibilityRole | undefined;
-        accessibilityState?: import("react-native").AccessibilityState | undefined;
-        accessibilityHint?: string | undefined;
-        accessibilityValue?: import("react-native").AccessibilityValue | undefined;
-        onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
-        accessibilityLabelledBy?: string | string[] | undefined;
-        accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
-        importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
-        accessibilityElementsHidden?: boolean | undefined;
-        accessibilityLanguage?: string | undefined;
-        accessibilityViewIsModal?: boolean | undefined;
-        onAccessibilityEscape?: (() => void) | undefined;
-        onAccessibilityTap?: (() => void) | undefined;
-        onMagicTap?: (() => void) | undefined;
-        accessibilityIgnoresInvertColors?: boolean | undefined;
+    (props: (Omit<import("../../SvgIcon/SvgIconProps").default, "children"> | Omit<import("../..").SvgIconProps, "children">) & {
+        enableV2?: boolean | undefined;
     }): JSX.Element;
     displayName: string;
 }>;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<{
+    (props: (Omit<import("../../SvgIcon/SvgIconProps").default, "children"> | Omit<import("../..").SvgIconProps, "children">) & {
+        enableV2?: boolean | undefined;
+    }): JSX.Element;
+    displayName: string;
+}>;
+export default _default;

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

@@ -1,9 +1,18 @@
+export { default as Check } from './Check';
 export { default as Checkbox } from './Checkbox';
 export { default as CheckboxChecked } from './CheckboxChecked';
+export { default as CheckboxOn } from './CheckboxOn';
+export { default as CheckCircle } from './CheckCircle';
 export { default as ChevronDown } from './ChevronDown';
 export { default as ChevronLeft } from './ChevronLeft';
 export { default as ChevronRight } from './ChevronRight';
 export { default as CircularProgress } from './CircularProgress';
+export { default as Clear } from './Clear';
 export { default as Close } from './Close';
+export { default as EyeOff } from './EyeOff';
+export { default as EyeOn } from './EyeOn';
+export { default as InfoCircle } from './InfoCircle';
+export { default as LoadingSpinner } from './LoadingSpinner';
 export { default as Radio } from './Radio';
 export { default as RadioChecked } from './RadioChecked';
+export { default as Search } from './Search';

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

@@ -3,7 +3,7 @@ import type { Theme } from '@fountain-ui/styles';
 declare type Typography = Theme['typography'];
 declare type Variant = Typography['h1'];
 interface FontStyleConfig {
-    selector?: (typography: Typography) => Variant;
+    selector?: (typography: Typography) => Variant | undefined;
     color?: TextStyle['color'];
 }
 export default function createFontStyle(theme: Theme, config?: FontStyleConfig): TextStyle;

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

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

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

@@ -1,7 +1,12 @@
 import React from 'react';
-import type { SvgIconProps } from '../SvgIcon';
-declare type SvgIconBaseProps = Omit<SvgIconProps, 'children'>;
-declare const createSvgIcon: (path: React.ReactElement | React.ReactFragment, displayName: string) => React.MemoExoticComponent<{
+import type SvgIconProps from '../SvgIcon/SvgIconProps';
+import type LegacySvgIconProps from '../SvgIcon/LegacySvgIconProps';
+declare type Path = React.ReactElement | React.ReactFragment;
+declare type SvgIconPropsWithoutChildren = Omit<SvgIconProps, 'children'> | Omit<LegacySvgIconProps, 'children'>;
+declare type SvgIconBaseProps = SvgIconPropsWithoutChildren & {
+    enableV2?: boolean;
+};
+declare const createSvgIcon: (path: Path, displayName: string, viewBox?: string) => React.MemoExoticComponent<{
     (props: SvgIconBaseProps): JSX.Element;
     displayName: string;
 }>;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.92",
+  "version": "2.0.0-beta.94",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "879eb4620ace81a958583d4240fdc93b32faf8c1"
+  "gitHead": "2fa43d7feb0eaaa7f6bfa459b93e0f9ccd71ab86"
 }

package/src/Accordion/Accordion.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { LayoutChangeEvent, View } from 'react-native';
+import { LayoutChangeEvent, Text, View, ViewStyle } from 'react-native';
 import Animated, {
     useAnimatedStyle,
     useSharedValue,
@@ -7,24 +7,18 @@ import Animated, {
     withTiming,
     WithTimingConfig,
 } from 'react-native-reanimated';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { css, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { useTheme } from '../styles';
 import { ChevronDown } from '../internal/icons';
 import ButtonBase from '../ButtonBase';
 import Column from '../Column';
 import Row from '../Row';
 import Spacer from '../Spacer';
-import Typography from '../Typography';
+import type AccordionProps from './AccordionProps';
+import type { AccordionVariant } from './AccordionProps';
+import useVariantStyleMap from './useVariantStyleMap';
 
-import AccordionProps from './AccordionProps';
-
-type AccordionStyles = NamedStylesStringUnion<
-    'root'
-    | 'title'
-    | 'titleColumn'
-    | 'subtitle'
-    | 'contentView'
->;
+type AccordionStyles = NamedStylesStringUnion<'root' | 'rightIcon'>;
 
 const ROTATE_HIDE_DEGREE = 0;
 const ROTATE_SHOW_DEGREE = 180;
@@ -37,28 +31,11 @@ const useStyles: UseStyles<AccordionStyles> = function (): AccordionStyles {
 
     return {
         root: { marginBottom: theme.spacing(3) },
-        title: {
-            borderRadius: theme.spacing(4),
-            backgroundColor: theme.palette.paper.grey,
-            paddingHorizontal: theme.spacing(4),
-            paddingVertical: theme.spacing(3.5),
+        rightIcon: {
             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),
+            height: 32,
+            justifyContent: 'center',
+            width: 32,
         },
     };
 };
@@ -71,15 +48,25 @@ export default function Accordion(props: AccordionProps) {
         RightIcon,
         LeftComponent,
         isInitialExpanded = false,
+        variant = 'solid' as AccordionVariant,
     } = props;
 
     const styles = useStyles();
     const theme = useTheme();
     const CONTENT_MARGIN_HEIGHT = theme.spacing(2);
 
-    const [isExpanded, setIsExpanded] = useState(false);
+    const [isExpanded, setIsExpanded] = useState<boolean>(false);
     const shouldInitialExpandedRef = useRef<boolean>(isInitialExpanded);
 
+    const {
+        container: containerStyle,
+        content: contentStyle,
+        contentFont: contentFontStyle,
+        subTitleFont: subTitleFontStyle,
+        title: titleStyle,
+        titleFont: titleFontStyle,
+    } = useVariantStyleMap(variant);
+
     const rotate = useSharedValue(ROTATE_HIDE_DEGREE);
     const animatedOpacity = useSharedValue(0);
 
@@ -93,7 +80,7 @@ export default function Accordion(props: AccordionProps) {
     const animatedContentBackgroundStyles = useAnimatedStyle(() => ({
         height: animatedHeight.value,
         overflow: 'hidden',
-    }), []);
+    } as ViewStyle), []);
 
     const animatedContentStyle = useAnimatedStyle(() => ({
         opacity: animatedOpacity.value,
@@ -123,34 +110,47 @@ export default function Accordion(props: AccordionProps) {
             : withTiming(0, ANIMATION_CONFIG);
     }, [isExpanded, contentHeight]);
 
+    const rootStyle = css([
+        styles.root,
+        containerStyle,
+    ]);
+
     return (
-        <Column style={styles.root}>
+        <Column style={rootStyle}>
             <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}
+                <Row style={titleStyle}>
+                    <Column flexShrink={1}>
+                        <Row alignItems={'center'}>
+                            {LeftComponent ? (
+                                <React.Fragment>
+                                    {LeftComponent}
+
+                                    <Spacer size={1.5}/>
+                                </React.Fragment>
+                            ) : null}
+
+                            <Text
+                                allowFontScaling={false}
+                                children={title}
+                                numberOfLines={1}
+                                style={titleFontStyle}
+                            />
+                        </Row>
+
+                        {subTitle && variant === 'solid' ?
+                            typeof subTitle === 'string' ? (
+                                <React.Fragment>
+                                    <Spacer size={1.5}/>
+
+                                    <Text
+                                        allowFontScaling={false}
+                                        children={subTitle}
+                                        numberOfLines={1}
+                                        style={subTitleFontStyle}
+                                    />
+                                </React.Fragment>
+                            ) : (subTitle)
+                            : null}
                     </Column>
 
                     <Spacer flex={1}/>
@@ -158,13 +158,16 @@ export default function Accordion(props: AccordionProps) {
                     <Spacer size={3}/>
 
                     <Animated.View style={animatedChevronDownStyles}>
-                        {RightIcon ? RightIcon : (
-                            <ChevronDown
-                                width={20}
-                                height={20}
-                                color={'tertiary'}
-                            />
-                        )}
+                        <View style={styles.rightIcon}>
+                            {RightIcon ? RightIcon : (
+                                <ChevronDown
+                                    enableV2={true}
+                                    width={16}
+                                    height={16}
+                                    color={'base'}
+                                />
+                            )}
+                        </View>
                     </Animated.View>
                 </Row>
             </ButtonBase>
@@ -172,14 +175,14 @@ export default function Accordion(props: AccordionProps) {
             <Animated.View style={animatedContentBackgroundStyles}>
                 <View
                     onLayout={onLayout}
-                    style={styles.contentView}
+                    style={contentStyle}
                 >
                     <Animated.View style={animatedContentStyle}>
                         {typeof content === 'string' ? (
-                            <Typography
-                                variant={'subtitle2'}
-                                color={'tertiary'}
+                            <Text
+                                allowFontScaling={false}
                                 children={content}
+                                style={contentFontStyle}
                             />
                         ) : (content)}
                     </Animated.View>

package/src/Accordion/AccordionProps.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 
+export const accordionVariants = ['solid', 'line', 'underline'] as const;
+export type AccordionVariant = typeof accordionVariants[number];
+
 export default interface AccordionProps {
     /**
      * The title of the component.
@@ -7,7 +10,7 @@ export default interface AccordionProps {
     title: string | React.ReactNode;
 
     /**
-     * The subtitle of the component.
+     * The subtitle of the component. (Only for solid variant)
      */
     subTitle?: string | React.ReactNode;
 
@@ -31,4 +34,10 @@ export default interface AccordionProps {
      * @default false
      */
     isInitialExpanded?: boolean;
-}
+
+    /**
+     * Determines design variations of the component.
+     * @default 'solid'
+     */
+    variant: AccordionVariant;
+}