@fountain-ui/core 3.0.0-alpha.3 → 3.0.0-alpha.30

package/build/typescript/Toolbar/BackButton/index.d.ts

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

package/build/typescript/Toolbar/Toolbar.d.ts

@@ -1,3 +1,8 @@
 /// <reference types="react" />
+import BackButton from './BackButton';
 import type ToolbarProps from './ToolbarProps';
-export default function Toolbar(props: ToolbarProps): JSX.Element;
+declare const Toolbar: {
+    (props: ToolbarProps): JSX.Element;
+    BackButton: typeof BackButton;
+};
+export default Toolbar;

package/build/typescript/Tooltip/Beaks/index.d.ts

@@ -1,2 +1,6 @@
 export { default } from './Beak';
 export type { default as BeakProps } from './BeakProps';
+export { default as HorizontalLargeBeak } from './HorizontalLargeBeak';
+export { default as HorizontalSmallBeak } from './HorizontalSmallBeak';
+export { default as VerticalLargeBeak } from './VerticalLargeBeak';
+export { default as VerticalSmallBeak } from './VerticalSmallBeak';

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

@@ -1,3 +1,4 @@
 export { default } from './Tooltip';
 export type { default as TooltipProps, TooltipBeakLayout, TooltipBeakPlacement } from './TooltipProps';
 export { tooltipBeakPlacements, tooltipPlacements, tooltipSizes } from './TooltipProps';
+export * from './Beaks';

package/build/typescript/Typography/TypographyProps.d.ts

@@ -48,6 +48,10 @@ export default interface TypographyProps extends ComponentProps<{
      * Internal use only. The hyperlink of the text.
      */
     href?: string;
+    /**
+     * Defines the vertical spacing between lines of text.
+     */
+    lineHeight?: TextStyle['lineHeight'];
     /**
      * Used to truncate the text with an ellipsis after computing the text
      * layout, including line wrapping, such that the total number of lines

package/build/typescript/hooks/useCollapsibleAppBar.d.ts

@@ -13,7 +13,6 @@ export interface ContentInsets {
 }
 export interface Options {
     keyboardDismissMode?: 'none' | 'on-drag';
-    dividerExposureMode?: 'always' | 'overlapped';
     supportsReverseScroll?: boolean;
 }
 export interface CollapsibleAppBar {

package/build/typescript/hooks/useContentContainerStyle.d.ts

@@ -1,11 +1,8 @@
-import type { ScrollViewProps } from 'react-native';
+import type { FountainUiStyle } from '@fountain-ui/styles';
 import type { Theme } from '../types';
-declare type Breakpoint = keyof Theme['breakpoints']['values'];
-declare type ContentContainerStyle = ScrollViewProps['contentContainerStyle'];
 export interface Config {
-    breakpoint?: Breakpoint;
-    maxWidth?: Breakpoint;
-    styleProvider?: (theme: Theme) => ContentContainerStyle;
+    maxWidth?: number;
+    styleProvider?: (theme: Theme) => FountainUiStyle;
+    isHomeScreen?: boolean;
 }
-export default function useContentContainerStyle(config?: Config): ContentContainerStyle;
-export {};
+export default function useContentContainerStyle(config?: Config): FountainUiStyle;

package/build/typescript/index.d.ts

@@ -97,6 +97,8 @@ export { default as RadioGroup } from './RadioGroup';
 export * from './RadioGroup';
 export { default as Row } from './Row';
 export * from './Row';
+export { default as Section } from './Section';
+export * from './Section';
 export { default as ShadowView } from './ShadowView';
 export * from './ShadowView';
 export { default as Slide } from './Slide';

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

@@ -0,0 +1,131 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<{
+    (props: {
+        readonly color?: "accent" | "base" | "strong" | "strongInverse" | "baseInverse" | "baseOpacity" | "baseOpacityInverse" | "weak" | "weakInverse" | "weakOpacity" | "weakOpacityInverse" | "accentAlt" | 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("@fountain-ui/styles").FountainUiStyle | import("@fountain-ui/styles").FountainUiStyle[] | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        title?: string | undefined;
+        clipPath?: string | undefined;
+        marker?: string | undefined;
+        mask?: string | undefined;
+        scale?: import("react-native-svg").NumberArray | undefined;
+        skewX?: import("react-native-svg").NumberProp | undefined;
+        skewY?: import("react-native-svg").NumberProp | undefined;
+        readonly 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;
+        readonly size?: "medium" | "small" | "large" | undefined;
+    }): JSX.Element;
+    displayName: string;
+}>;
+export default _default;

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

@@ -0,0 +1,131 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<{
+    (props: {
+        readonly color?: "accent" | "base" | "strong" | "strongInverse" | "baseInverse" | "baseOpacity" | "baseOpacityInverse" | "weak" | "weakInverse" | "weakOpacity" | "weakOpacityInverse" | "accentAlt" | 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("@fountain-ui/styles").FountainUiStyle | import("@fountain-ui/styles").FountainUiStyle[] | undefined;
+        onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+        title?: string | undefined;
+        clipPath?: string | undefined;
+        marker?: string | undefined;
+        mask?: string | undefined;
+        scale?: import("react-native-svg").NumberArray | undefined;
+        skewX?: import("react-native-svg").NumberProp | undefined;
+        skewY?: import("react-native-svg").NumberProp | undefined;
+        readonly 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;
+        readonly size?: "medium" | "small" | "large" | undefined;
+    }): JSX.Element;
+    displayName: string;
+}>;
+export default _default;

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

@@ -1,3 +1,4 @@
+export { default as AppBarChevronLeft } from './AppBarChevronLeft';
 export { default as Check } from './Check';
 export { default as Checkbox } from './Checkbox';
 export { default as CheckboxChecked } from './CheckboxChecked';
@@ -6,6 +7,7 @@ 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 ChipClose } from './ChipClose';
 export { default as CircularProgress } from './CircularProgress';
 export { default as Clear } from './Clear';
 export { default as Close } from './Close';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.30",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -14,15 +14,15 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@fountain-ui/styles": "^3.0.0-alpha.2",
+    "@fountain-ui/styles": "^3.0.0-alpha.12",
     "@fountain-ui/utils": "^3.0.0-alpha.1"
   },
   "peerDependencies": {
+    "@d11/react-native-fast-image": "^8.11.1",
     "@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.6.3",
     "react-native-reanimated": "^2.0.0",
     "react-native-safe-area-context": "^4.0.0",
     "react-native-svg": "^13.14.0"
@@ -37,7 +37,7 @@
     "react-native": {
       "optional": true
     },
-    "react-native-fast-image": {
+    "@d11/react-native-fast-image": {
       "optional": true
     }
   },
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f9e5b1c4b523be0923313ceb21d1a7190b57b690"
+  "gitHead": "f0b0a5b739f025b0ff5ae43f059dc3c82b10acd1"
 }

package/src/Accordion/Accordion.tsx

@@ -48,7 +48,9 @@ export default function Accordion(props: AccordionProps) {
         RightIcon,
         LeftComponent,
         isInitialExpanded = false,
+        style: styleProp,
         variant = 'solid' as AccordionVariant,
+        ...otherProps
     } = props;
 
     const styles = useStyles();
@@ -62,6 +64,7 @@ export default function Accordion(props: AccordionProps) {
         container: containerStyle,
         content: contentStyle,
         contentFont: contentFontStyle,
+        iconContainer: iconContainerStyle,
         subTitleFont: subTitleFontStyle,
         title: titleStyle,
         titleFont: titleFontStyle,
@@ -113,17 +116,23 @@ export default function Accordion(props: AccordionProps) {
     const rootStyle = css([
         styles.root,
         containerStyle,
+        styleProp,
     ]);
 
     return (
-        <Column style={rootStyle}>
+        <Column
+            style={rootStyle}
+            {...otherProps}
+        >
             <ButtonBase onPress={onPress}>
                 <Row style={titleStyle}>
                     <Column flexShrink={1}>
                         <Row alignItems={'center'}>
                             {LeftComponent ? (
                                 <React.Fragment>
-                                    {LeftComponent}
+                                    <View style={iconContainerStyle}>
+                                        {LeftComponent}
+                                    </View>
 
                                     <Spacer size={1.5}/>
                                 </React.Fragment>
@@ -137,20 +146,20 @@ export default function Accordion(props: AccordionProps) {
                             />
                         </Row>
 
-                        {subTitle && variant === 'solid' ?
-                            typeof subTitle === 'string' ? (
-                                <React.Fragment>
-                                    <Spacer size={1.5}/>
+                        {subTitle && variant === 'solid' ? (
+                            <React.Fragment>
+                                <Spacer size={1.5}/>
 
+                                {typeof subTitle === 'string' ? (
                                     <Text
                                         allowFontScaling={false}
                                         children={subTitle}
                                         numberOfLines={1}
                                         style={subTitleFontStyle}
                                     />
-                                </React.Fragment>
-                            ) : (subTitle)
-                            : null}
+                                ) : (subTitle)}
+                            </React.Fragment>
+                        ) : null}
                     </Column>
 
                     <Spacer flex={1}/>

package/src/Accordion/AccordionProps.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import type { ColumnProps } from '../Column';
+import type { OverridableComponentProps } from '../types';
 
 export const accordionVariants = ['solid', 'line', 'underline'] as const;
 export type AccordionVariant = typeof accordionVariants[number];
 
-export default interface AccordionProps {
+export default interface AccordionProps extends OverridableComponentProps<Omit<ColumnProps, 'children'>, {
     /**
      * The title of the component.
      */
@@ -40,4 +42,4 @@ export default interface AccordionProps {
      * @default 'solid'
      */
     variant: AccordionVariant;
-}
+}> {}

package/src/Accordion/useVariantStyleMap.ts

@@ -9,6 +9,7 @@ interface VariantStyle {
     container: FountainUiStyle;
     content: FountainUiStyle;
     contentFont: TextStyle;
+    iconContainer?: FountainUiStyle;
     subTitleFont?: TextStyle;
     title: FountainUiStyle;
     titleFont: TextStyle;
@@ -29,10 +30,12 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     content: {
                         borderTopColor: theme.palette.border.weak,
                         borderTopWidth: 0.5,
+                        left: 0,
                         marginHorizontal: theme.spacing(4),
                         paddingBottom: theme.spacing(5),
                         paddingTop: theme.spacing(4),
                         position: 'absolute',
+                        right: 0,
                     },
                     contentFont: createFontStyle(theme, {
                         selector: (typography) => typography.body3.regular,
@@ -50,9 +53,9 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     },
                     titleFont: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 15,
-                            lineHeight: 19.5,
-                            fontFamily: 'Pretendard-SemiBold',
+                            fontSize: 16,
+                            lineHeight: 20.8,
+                            fontFamily: 'PretendardStd-SemiBold',
                             letterSpacing: 0,
                         }),
                         color: theme.palette.text.strong,
@@ -68,15 +71,20 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     content: {
                         borderTopColor: theme.palette.border.weak,
                         borderTopWidth: 0.5,
+                        left: 0,
                         marginHorizontal: theme.spacing(4),
                         paddingBottom: theme.spacing(4),
                         paddingTop: theme.spacing(3),
                         position: 'absolute',
+                        right: 0,
                     },
                     contentFont: createFontStyle(theme, {
                         selector: (typography) => typography.caption2.regular,
                         color: theme.palette.text.base,
                     }),
+                    iconContainer: {
+                        paddingTop: 1,
+                    },
                     title: {
                         alignItems: 'center',
                         paddingBottom: theme.spacing(1),
@@ -114,9 +122,9 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                     },
                     titleFont: createFontStyle(theme, {
                         selector: (_) => typographyOf({
-                            fontSize: 15,
-                            lineHeight: 19.5,
-                            fontFamily: 'Pretendard-SemiBold',
+                            fontSize: 16,
+                            lineHeight: 20.8,
+                            fontFamily: 'PretendardStd-SemiBold',
                             letterSpacing: 0,
                         }),
                         color: theme.palette.text.strong,

package/src/AppBar/AppBar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { useBreakpointUp } from '../hooks';
 import { css, useTheme } from '../styles';
 import type AppBarProps from './AppBarProps';
 import type { AppBarColor } from './AppBarProps';
@@ -31,16 +32,19 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
 
     const theme = useTheme();
 
+    const isDesktop = useBreakpointUp('md', true, false);
+
     const styles = useStyles();
 
     const backgroundColorMap: Record<AppBarColor, string> = {
-        default: theme.palette.background.default,
+        default: theme.palette.background.base,
         alt: theme.palette.background.alt,
     };
 
     const paperStyle = css([
         styles.root,
         { backgroundColor: backgroundColorMap[color] },
+        isDesktop ? { paddingHorizontal: 8 } : undefined,
         style,
     ]);
 

package/src/Badge/Badge.tsx

@@ -15,12 +15,13 @@ export default function Badge(props: BadgeProps) {
         children,
         color = 'accent' as BadgeColor,
         content,
+        horizontalOffset = 0,
         invisible = false,
         position = defaultPosition,
         size = 'medium' as BadgeSize,
         style: styleProp,
-        offset = 0,
         variant = 'dot' as BadgeVariant,
+        verticalOffset = 0,
         ...otherProps
     } = props;
 
@@ -36,8 +37,8 @@ export default function Badge(props: BadgeProps) {
     const badgeStyle = css([
         baseBadgeStyle,
         {
-            [position.vertical]: offset,
-            [position.horizontal]: offset,
+            [position.vertical]: verticalOffset,
+            [position.horizontal]: horizontalOffset,
         },
     ]);