@fountain-ui/core 2.0.0-beta.97 → 3.0.0-alpha.1

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

@@ -1,7 +1,130 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<{
-    (props: (Omit<import("../../SvgIcon/SvgIconProps").default, "children"> | Omit<import("../..").SvgIconProps, "children">) & {
-        enableV2?: boolean | undefined;
+    (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;
 }>;

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

@@ -1,11 +1,7 @@
 import React from 'react';
 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 type SvgIconBaseProps = Omit<SvgIconProps, 'children'>;
 declare const createSvgIcon: (path: Path, displayName: string, viewBox?: string) => React.MemoExoticComponent<{
     (props: SvgIconBaseProps): JSX.Element;
     displayName: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "2.0.0-beta.97",
+  "version": "3.0.0-alpha.1",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -14,8 +14,8 @@
     "prepare": "bob build"
   },
   "dependencies": {
-    "@fountain-ui/styles": "^2.0.0-beta.13",
-    "@fountain-ui/utils": "^2.0.0-beta.4"
+    "@fountain-ui/styles": "^3.0.0-alpha.1",
+    "@fountain-ui/utils": "^3.0.0-alpha.1"
   },
   "peerDependencies": {
     "@react-native-community/slider": "^4.1.6",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3bf4253b3761d1642e51a71b90d40003bc1ae84e"
+  "gitHead": "88b0532dcdf185877d95cd713f9d9076728abe12"
 }

package/src/Accordion/Accordion.tsx

@@ -161,7 +161,6 @@ export default function Accordion(props: AccordionProps) {
                         <View style={styles.rightIcon}>
                             {RightIcon ? RightIcon : (
                                 <ChevronDown
-                                    enableV2={true}
                                     width={16}
                                     height={16}
                                     color={'base'}

package/src/Accordion/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyAccordion';
-export type { default as AccordionProps } from './LegacyAccordionProps';
+export { default } from './Accordion';
+export type { default as AccordionProps } from './AccordionProps';

package/src/Accordion/useVariantStyleMap.ts

@@ -32,6 +32,7 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                         marginHorizontal: theme.spacing(4),
                         paddingBottom: theme.spacing(5),
                         paddingTop: theme.spacing(4),
+                        position: 'absolute',
                     },
                     contentFont: createFontStyle(theme, {
                         selector: (typography) => typography.body3.regular,
@@ -71,6 +72,7 @@ export default function useVariantStyleMap(variant: AccordionVariant): VariantSt
                         marginHorizontal: theme.spacing(4),
                         paddingBottom: theme.spacing(4),
                         paddingTop: theme.spacing(3),
+                        position: 'absolute',
                     },
                     contentFont: createFontStyle(theme, {
                         // TODO: select typography.

package/src/AppBar/AppBar.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { View } from 'react-native';
 import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import Paper from '../Paper';
 import { css, useTheme } from '../styles';
 import type AppBarProps from './AppBarProps';
+import type { AppBarColor } from './AppBarProps';
 
 type AppBarStyleKeys = 'root';
 
@@ -33,27 +33,21 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
 
     const styles = useStyles();
 
-    const backgroundColor = color === 'default'
-        ? theme.palette.background.default
-        : color === 'paper'
-            ? theme.palette.paper.default
-            : color === 'primary'
-                ? theme.palette.primary.main
-                : 'transparent';
+    const backgroundColorMap: Record<AppBarColor, string> = {
+        default: theme.palette.background.default,
+        alt: theme.palette.background.alt,
+    };
 
     const paperStyle = css([
         styles.root,
-        { backgroundColor },
+        { backgroundColor: backgroundColorMap[color] },
         style,
     ]);
 
     return (
-        <Paper
+        <View
             ref={ref}
-            colorValue={backgroundColor}
-            elevation={0}
             style={paperStyle}
-            square={true}
             {...otherProps}
         />
     );

package/src/AppBar/AppBarProps.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import type { OverridableComponentProps } from '../types';
 import type { PaperProps } from '../Paper';
 
-export type AppBarColor = 'default' | 'paper' | 'primary' | 'transparent';
+export const appBarColors = ['default', 'alt'] as const;
+export type AppBarColor = typeof appBarColors[number];
 
 export default interface AppBarProps extends OverridableComponentProps<PaperProps, {
     /**

package/src/AppBar/index.ts

@@ -1,2 +1,2 @@
 export { default } from './AppBar';
-export type { default as AppBarProps } from './AppBarProps';
+export type { default as AppBarProps } from './AppBarProps';

package/src/Badge/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyBadge';
-export type { default as BadgeProps } from './LegacyBadgeProps';
+export { default } from './Badge';
+export type { default as BadgeProps } from './BadgeProps';

package/src/Badge/useVariantStyleMap.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import type { TextStyle } from 'react-native';
-import type { FountainUiStyle, Theme } from '@fountain-ui/styles';
+import type { FontStyle, FountainUiStyle, Theme } from '@fountain-ui/styles';
 import { commonColors, typographyOf } from '@fountain-ui/styles';
 import { createFontStyle, useTheme } from '../styles';
 import type { BadgeColor, BadgeSize, BadgeVariant } from './BadgeProps';
@@ -45,6 +45,21 @@ export default function useVariantStyleMap(variant: BadgeVariant, size: BadgeSiz
             width: badgeSize,
         };
 
+        const fontStyleMap: Record<BadgeSize, FontStyle> = {
+            large: typographyOf({
+                fontSize: 14,
+                lineHeight: 14,
+                fontFamily: 'Pretendard-Bold',
+                letterSpacing: -0.7,
+            }),
+            medium: typographyOf({
+                fontSize: 12,
+                lineHeight: 12,
+                fontFamily: 'Pretendard-Bold',
+                letterSpacing: -0.6,
+            }),
+        };
+
         switch (variant) {
             default:
             case 'dot':
@@ -59,12 +74,7 @@ export default function useVariantStyleMap(variant: BadgeVariant, size: BadgeSiz
                         justifyContent: 'center',
                     },
                     contentFont: createFontStyle(theme, {
-                        selector: (_) => typographyOf({
-                            fontSize: 12,
-                            lineHeight: 12,
-                            fontFamily: 'Pretendard-Bold',
-                            letterSpacing: -0.6,
-                        }),
+                        selector: (_) => fontStyleMap[size],
                         color: commonColors.opacity.white['100'],
                     }),
                 };

package/src/BottomSheetActions/BottomSheetActions.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { css, useTheme } from '../styles';
+import type BottomSheetActionsProps from './BottomSheetActionsProps';
+
+type BottomSheetActionsStyles = NamedStylesStringUnion<'root'>;
+
+const useStyles: UseStyles<BottomSheetActionsStyles> = function (): BottomSheetActionsStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            marginTop: theme.spacing(4),
+            paddingHorizontal: theme.spacing(6),
+        },
+    };
+};
+
+export default function BottomSheetActions(props: BottomSheetActionsProps) {
+    const {
+        children,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <View
+            style={rootStyle}
+            {...otherProps}
+        >
+            {children}
+        </View>
+    );
+}

package/src/BottomSheetActions/BottomSheetActionsProps.ts

@@ -0,0 +1,4 @@
+import { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+
+export default interface BottomSheetActionsProps extends OverridableComponentProps<ViewProps, {}> {}

package/src/BottomSheetActions/index.ts

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

package/src/BottomSheetContent/BottomSheetContent.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ScrollView } from 'react-native-gesture-handler';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import { css, useTheme } from '../styles';
+import type BottomSheetContentProps from './BottomSheetContentProps';
+
+type BottomSheetContentStyles = NamedStylesStringUnion<'root'>;
+
+const useStyles: UseStyles<BottomSheetContentStyles> = function (): BottomSheetContentStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            flexGrow: 1,
+            flexShrink: 1,
+            paddingBottom: theme.spacing(4),
+            paddingHorizontal: theme.spacing(6),
+        },
+    };
+};
+
+export default function BottomSheetContent(props: BottomSheetContentProps) {
+    const {
+        children,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const styles = useStyles();
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    return (
+        <ScrollView
+            bounces={false}
+            style={rootStyle}
+            {...otherProps}
+        >
+            {children}
+        </ScrollView>
+    );
+}

package/src/BottomSheetContent/BottomSheetContentProps.ts

@@ -0,0 +1,4 @@
+import type { ScrollViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../types';
+
+export default interface BottomSheetContentProps extends OverridableComponentProps<ScrollViewProps, {}> {}

package/src/BottomSheetContent/index.ts

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

package/src/BottomSheetTitle/BottomSheetTitle.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Text } from 'react-native';
+import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
+import Button from '../Button/Button';
+import Row from '../Row';
+import { createFontStyle, css, useTheme } from '../styles';
+import type BottomSheetTitleProps from './BottomSheetTitleProps';
+
+type BottomSheetTitleStyles = NamedStylesStringUnion<'root' | 'title' | 'actionButton'>;
+
+const useStyles: UseStyles<BottomSheetTitleStyles> = function (): BottomSheetTitleStyles {
+    const theme = useTheme();
+
+    return {
+        root: {
+            alignItems: 'center',
+            gap: theme.spacing(8),
+            justifyContent: 'space-between',
+            marginBottom: theme.spacing(4),
+            paddingHorizontal: theme.spacing(6),
+        },
+        title: {
+            paddingBottom: theme.spacing(1.25),
+            paddingTop: theme.spacing(1),
+        },
+        actionButton: {
+            paddingBottom: theme.spacing(1.75),
+            paddingHorizontal: 0,
+            paddingTop: theme.spacing(1.25),
+        },
+    };
+};
+
+export default function BottomSheetTitle(props: BottomSheetTitleProps) {
+    const {
+        actionButtonProps,
+        children,
+        style: styleProp,
+        ...otherProps
+    } = props;
+
+    const theme = useTheme();
+
+    const styles = useStyles();
+
+    const rootStyle = css([
+        styles.root,
+        styleProp,
+    ]);
+
+    const titleFontStyle = createFontStyle(theme, {
+        selector: (typography) => typography.header3.semiBold,
+        color: theme.palette.text.strong,
+    });
+
+    const titleStyle = css([
+        styles.title,
+        titleFontStyle,
+    ]);
+
+    return (
+        <Row
+            style={rootStyle}
+            {...otherProps}
+        >
+            <Text
+                children={children}
+                style={titleStyle}
+            />
+
+            {actionButtonProps ? (
+                <Button
+                    children={actionButtonProps.title}
+                    color={'accent'}
+                    disableMinWidth={true}
+                    onPress={actionButtonProps.onPress}
+                    style={styles.actionButton}
+                    variant={'text'}
+                />
+            ) : null}
+        </Row>
+    );
+}

package/src/BottomSheetTitle/BottomSheetTitleProps.ts

@@ -0,0 +1,12 @@
+import type { OverridableComponentProps } from '../types';
+import type { RowProps } from '../Row';
+
+type ActionButtonProps = {
+    title: string;
+    onPress: () => void;
+};
+
+export default interface BottomSheetTitleProps extends OverridableComponentProps<RowProps, {
+    children: string;
+    actionButtonProps?: ActionButtonProps;
+}> {}

package/src/BottomSheetTitle/index.ts

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

package/src/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Linking, Text, View } from 'react-native';
+import { Linking, Text } from 'react-native';
 import type { FontStyle, NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
 import { typographyOf } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase/ButtonBase';
@@ -110,6 +110,7 @@ export default function Button(props: ButtonProps) {
 
     const iconProps = {
         fill: iconColor,
+        opacity: isLoading ? 0 : 1,
     };
 
     const startIcon = cloneElementSafely(startIconProp, iconProps);
@@ -124,10 +125,6 @@ export default function Button(props: ButtonProps) {
         styleProp,
     ]);
 
-    const contentStyle = css({
-        opacity: isLoading ? 0 : 1,
-    });
-
     const fontStyle = createFontStyle(theme, {
         selector: (_) => fontStyleMap[size],
         color: labelColor,
@@ -135,7 +132,10 @@ export default function Button(props: ButtonProps) {
 
     const textStyle = css([
         fontStyle,
-        { textAlign: 'center' },
+        {
+            opacity: isLoading ? 0 : 1,
+            textAlign: 'center',
+        },
     ]);
 
     const modifiedPressEffect = variant !== 'text' && !pressEffect
@@ -167,15 +167,13 @@ export default function Button(props: ButtonProps) {
             pressEffect={modifiedPressEffect}
             {...otherProps}
         >
-            <View style={contentStyle}>
-                {startIcon}
+            {startIcon}
 
-                <Text style={textStyle}>
-                    {children}
-                </Text>
+            <Text style={textStyle}>
+                {children}
+            </Text>
 
-                {endIcon}
-            </View>
+            {endIcon}
 
             {isLoading ? (
                 <LoadingSpinner

package/src/Button/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyButton';
-export type { default as ButtonProps } from './LegacyButtonProps';
+export { default } from './Button';
+export type { default as ButtonProps } from './ButtonProps';

package/src/Button/useVariantStyleMap.ts

@@ -59,7 +59,9 @@ export default function useVariantStyleMap(variant: ButtonVariant, color: Button
                         borderColor: palette.border.accent,
                         borderWidth: 1,
                     },
-                    labelColor: palette.text.accent,
+                    labelColor: '#0BCC99',
+                    // TODO: change color.
+                    // labelColor: palette.text.accent,
                     iconColor: palette.icon.accent,
                 },
                 primary: {
@@ -89,13 +91,19 @@ export default function useVariantStyleMap(variant: ButtonVariant, color: Button
                     iconColor: palette.icon.base,
                 },
                 accent: {
-                    labelColor: palette.text.accent,
+                    labelColor: '#0BCC99',
+                    // TODO: change color.
+                    // labelColor: palette.text.accent,
                     iconColor: palette.icon.accent,
                 },
                 accentAlt: {
                     labelColor: palette.text.accentAlt,
                     iconColor: palette.icon.accentAlt,
                 },
+                danger: {
+                    labelColor: palette.status.danger,
+                    iconColor: palette.status.danger,
+                },
                 disabled: {
                     labelColor: palette.status.disabledLabel,
                     iconColor: palette.status.disabledLabel,

package/src/Checkbox/Checkbox.tsx

@@ -54,7 +54,6 @@ export default function Checkbox(props: CheckboxProps) {
                 {checked ? (
                     <CheckboxOnIcon
                         fill={iconColor}
-                        enableV2={true}
                         height={7.5}
                         width={11}
                     />

package/src/Checkbox/index.ts

@@ -1,2 +1,2 @@
-export { default } from './LegacyCheckbox';
-export type { default as CheckboxProps } from './LegacyCheckboxProps';
+export { default } from './Checkbox';
+export type { default as CheckboxProps } from './CheckboxProps';

package/src/Checkbox/useVariantStyleMap.ts

@@ -60,8 +60,11 @@ export default function useVariantStyleMap(variant: CheckboxVariant, checked: bo
                 ]),
                 containerStyle: {
                     alignItems: 'center',
+                    borderBottomColor: theme.palette.border.weak,
+                    borderBottomWidth: 0.5,
                     flexDirection: 'row-reverse',
                     gap: theme.spacing(8),
+                    paddingVertical: theme.spacing(3.5),
                 },
                 iconColor: commonColors.static.strongInverse,
             };