@fountain-ui/core 3.0.0-alpha.20 → 3.0.0-alpha.22

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/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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fountain-ui/core",
-  "version": "3.0.0-alpha.20",
+  "version": "3.0.0-alpha.22",
   "author": "Fountain-UI Team",
   "description": "React components that implement Tappytoon's Fountain Design.",
   "license": "MIT",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cbf3d668134714e8aa469c418335717e25d628a8"
+  "gitHead": "5ddf3c13c461c1e0909a2ff27e5272dbf0d357a3"
 }

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();
@@ -114,10 +116,14 @@ 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}>

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/AppBar/AppBar.tsx

@@ -37,7 +37,7 @@ const AppBar = React.forwardRef<View, AppBarProps>(function AppBar(props, ref) {
     const styles = useStyles();
 
     const backgroundColorMap: Record<AppBarColor, string> = {
-        default: theme.palette.background.default,
+        default: theme.palette.background.base,
         alt: theme.palette.background.alt,
     };
 

package/src/ButtonBase/ButtonBase.tsx

@@ -13,7 +13,7 @@ export const ORIGINAL_OPACITY = 1;
 const ACTIVE_OPACITY = .65;
 
 const ORIGINAL_SCALE = 1;
-const MINIFIED_SCALE = .96;
+const MINIFIED_SCALE = .98;
 
 // at "node_modules/react-native/Libraries/Pressability.js"
 // const DEFAULT_MIN_PRESS_DURATION = 130;

package/src/Image/Image.tsx

@@ -36,7 +36,7 @@ const useStyles: UseStyles<ImageStyles> = function (): ImageStyles {
         outlined: {
             borderWidth: StyleSheet.hairlineWidth,
             borderStyle: 'solid',
-            borderColor: theme.palette.paper.grey,
+            borderColor: theme.palette.border.weak,
         },
         error: {
             alignItems: 'center',

package/src/Pagination/NumberPagination.tsx

@@ -61,7 +61,12 @@ export default function NumberPagination(props: NumberPaginationProps) {
 
     return (
         <Row style={styles.root}>
-            <Text style={currentFontStyle}>
+            <Text
+                style={[
+                    currentFontStyle,
+                    { fontVariant: ['tabular-nums'] },
+                ]}
+            >
                 {currentPage + 1}
             </Text>
 

package/src/Tab/useVariantStyleMap.ts

@@ -84,7 +84,7 @@ export default function useVariantStyleMap(variant: TabVariant, selected: boolea
                         height: 49,
                         justifyContent: 'flex-start',
                         paddingTop: 10.5,
-                        width: 48,
+                        maxWidth: 48,
                     },
                     iconContainer: {
                         padding: 0.75,

package/src/Tabs/Tabs.tsx

@@ -70,7 +70,10 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
 
     const currentIndexRef = useRef(initialIndex);
 
-    const { container: containerStyle } = useTabsStyle(variant, size);
+    const {
+        container: containerStyle,
+        contentContainer: contentContainerStyle,
+    } = useTabsStyle(variant, size, scrollable);
 
     const setTab = (newIndex: number) => {
         const currentIndex = currentIndexRef.current;
@@ -163,6 +166,9 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
             child.props.onPress?.();
         };
 
+        // @ts-ignore
+        const tabStyle = child.props.style;
+
         // @ts-ignore
         const tabElement = cloneElement(child, {
             enableIndicator: !disableIndicator && !canRenderIndicator,
@@ -173,7 +179,10 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
             size,
             variant,
             indicatorSize,
-            style: scrollable ? undefined : styles.fixedTab,
+            style: css([
+                scrollable ? undefined : styles.fixedTab,
+                tabStyle,
+            ]),
         });
 
         return (
@@ -215,6 +224,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>(function Tabs(props, ref) {
                         automaticallyAdjustContentInsets={false}
                         bounces={false}
                         contentContainerStyle={css([
+                            contentContainerStyle,
                             scrollViewContentContainerStyle,
                         ])}
                         coordinates={coordinates}

package/src/Tabs/useTabsStyle.ts

@@ -6,44 +6,70 @@ import type { TabSize, TabVariant } from '../Tab';
 
 interface TabsStyle {
     container: FountainUiStyle;
+    contentContainer?: FountainUiStyle;
 }
 
-export default function useTabsStyle(variant: TabVariant, size: TabSize) {
+export default function useTabsStyle(variant: TabVariant, size: TabSize, scrollable: boolean) {
     const theme = useTheme();
 
     const isTablet = useBreakpointUp('md', true, false);
 
     return useMemo<TabsStyle>(() => {
         switch (variant) {
-            case 'circular':
+            case 'circular': {
+                const paddingHorizontal = isTablet ? 20 : (size === 'small' ? 8 : 12);
+
                 return {
                     container: {
                         paddingBottom: 8,
-                        paddingHorizontal: isTablet ? 20 : (size === 'small' ? 8 : 12),
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
                     },
                 };
-            case 'circular-home':
+            }
+            case 'circular-home': {
+                const paddingHorizontal = isTablet ? 20 : 8;
+
                 return {
                     container: {
                         paddingBottom: 8,
-                        paddingHorizontal: isTablet ? 20 : 8,
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
                     },
                 };
-            case 'bottom-navigation':
+            }
+            case 'bottom-navigation': {
+                const paddingHorizontal = 24;
+
                 return {
                     container: {
                         borderTopColor: theme.palette.border.base,
                         borderTopWidth: 0.5,
-                        paddingHorizontal: 24,
+                        justifyContent: 'space-between',
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
                     },
                 };
+            }
             case 'default':
-            default:
+            default: {
+                const paddingHorizontal = isTablet ? 14 : 6;
+
                 return {
                     container: {
-                        paddingHorizontal: isTablet ? 14 : 6,
+                        paddingHorizontal: scrollable ? 0 : paddingHorizontal,
+                    },
+                    contentContainer: {
+                        paddingHorizontal: scrollable ? paddingHorizontal : 0,
                     },
                 };
+            }
         }
-    }, [theme, variant, isTablet, size]);
+    }, [theme, variant, isTablet, size, scrollable]);
 }

package/src/TextField/TextField.tsx

@@ -23,6 +23,20 @@ const styles = StyleSheet.create({
         alignItems: 'flex-end',
         padding: 0,
     },
+    searchIconContainer: {
+        left: 12,
+        position: 'absolute',
+    },
+    loadingSinner: {
+        height: 19,
+        width: 19,
+    },
+    clearButton: {
+        height: 36,
+        position: 'absolute',
+        right: 2,
+        width: 32,
+    },
 });
 
 const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField(props, ref) {
@@ -113,15 +127,17 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
 
             <Row style={containerStyle}>
                 {isSearch ? (
-                    isLoading ? (
-                        <LoadingSpinner/>
-                    ) : (
-                        <Search
-                            color={'base'}
-                            height={18}
-                            width={18}
-                        />
-                    )
+                    <View style={styles.searchIconContainer}>
+                        {isLoading ? (
+                            <LoadingSpinner style={styles.loadingSinner}/>
+                        ) : (
+                            <Search
+                                color={'base'}
+                                height={19}
+                                width={19}
+                            />
+                        )}
+                    </View>
                 ) : null}
 
                 <TextInput
@@ -143,11 +159,12 @@ const TextField = React.forwardRef<TextInput, TextFieldProps>(function TextField
                         color={'base'}
                         children={
                             <Clear
-                                height={13.75}
-                                width={15}
+                                height={17.31}
+                                width={15.9}
                             />
                         }
                         onPress={handleClear}
+                        style={styles.clearButton}
                     />
                 ) : null}
 

package/src/TextField/useVariantStyleMap.ts

@@ -47,6 +47,7 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                     containerStyle: {
                         borderBottomColor: status === 'default' && isFocused ? theme.palette.border.strong : borderColor,
                         borderBottomWidth: 1,
+                        minHeight: 60,
                     },
                     inputStyle: {
                         paddingLeft: 0,
@@ -77,14 +78,11 @@ export default function useVariantStyleMap(variant: TextFieldVariant, status: Te
                         borderColor: theme.palette.border.base,
                         borderRadius: theme.shape.radius.md,
                         borderWidth: 0.5,
-                        paddingLeft: theme.spacing(3),
-                        paddingRight: theme.spacing(0.5),
+                        paddingBottom: 12,
+                        paddingHorizontal: 39,
+                        paddingTop: 11,
                     },
                     inputStyle: {
-                        paddingBottom: theme.spacing(2.5),
-                        paddingLeft: theme.spacing(2),
-                        paddingRight: theme.spacing(1),
-                        paddingTop: theme.spacing(2.25),
                         ...createFontStyle(theme, {
                             selector: (_) => typographyOf({
                                 fontSize: 16,

package/src/Toolbar/BackButton/BackButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import IconButton from '../../IconButton';
-import { ChevronLeft } from '../../internal';
+import { AppBarChevronLeft } from '../../internal';
 import type BackButtonProps from './BackButtonProps';
 import { css } from '@fountain-ui/styles';
 
@@ -33,10 +33,12 @@ export default function BackButton(props: BackButtonProps) {
             style={rootStyle}
             {...otherProps}
         >
-            <ChevronLeft
-                color={'strong'}
-                size={'large'}
-            />
+            <React.Fragment>
+                <AppBarChevronLeft
+                    height={18}
+                    width={10}
+                />
+            </React.Fragment>
         </IconButton>
     );
 }

package/src/hooks/useCollapsibleAppBar.ts

@@ -1,14 +1,5 @@
 import { useCallback, useRef, useState } from 'react';
-import {
-    Falsy,
-    Keyboard,
-    Platform,
-    RegisteredStyle,
-    ScrollViewProps,
-    StyleSheet,
-    ViewProps,
-    ViewStyle,
-} from 'react-native';
+import { Falsy, Keyboard, Platform, RegisteredStyle, ScrollViewProps, ViewProps, ViewStyle } from 'react-native';
 import type { WithTimingConfig } from 'react-native-reanimated';
 import {
     runOnJS,
@@ -19,7 +10,6 @@ import {
     withTiming,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from '@fountain-ui/styles';
 import { useHeight } from '../internal/hooks';
 import useAppbarStyles from './useAppbarStyles';
 
@@ -40,7 +30,6 @@ export interface ContentInsets {
 
 export interface Options {
     keyboardDismissMode?: 'none' | 'on-drag';
-    dividerExposureMode?: 'always' | 'overlapped';
     supportsReverseScroll?: boolean;
 }
 
@@ -56,7 +45,6 @@ export interface CollapsibleAppBar {
 
 const defaultOptions: Required<Options> = {
     keyboardDismissMode: 'none',
-    dividerExposureMode: 'overlapped',
     supportsReverseScroll: true,
 };
 
@@ -67,7 +55,7 @@ const SUPPORTS_DRAG_DETECTION = Platform.OS !== 'web';
 const dismissKeyboard = () => Keyboard.dismiss();
 
 export default function useCollapsibleAppBar(userOptions: Options = defaultOptions): CollapsibleAppBar {
-    const { keyboardDismissMode, dividerExposureMode, supportsReverseScroll }: Required<Options> = {
+    const { keyboardDismissMode, supportsReverseScroll }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -88,20 +76,13 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
     const [isScrolled, setIsScrolled] = useState<boolean>(false);
 
-    const theme = useTheme();
-
     const animatedStyle = useAnimatedStyle(() => {
         const transform = [{ translateY: translateY.value }];
 
         return {
             transform,
-            borderColor: dividerExposureMode === 'always' || overlapped.value ? theme.palette.divider : TRANSPARENT,
-            borderBottomWidth: StyleSheet.hairlineWidth,
         };
-    }, [
-        theme,
-        dividerExposureMode,
-    ]);
+    }, []);
 
     const indexRef = useRef<number>(0);
     const offsetsRef = useRef<Array<number>>([]);

package/src/hooks/useFadeInAppBar.ts

@@ -76,7 +76,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
     const lastOffsetY = useSharedValue<number>(0);
     const normalized = useSharedValue<number>(0);
 
-    const originalBackgroundColor = theme.palette.background.default;
+    const originalBackgroundColor = theme.palette.background.base;
     const rgbValues = useMemo(() => rgb(originalBackgroundColor), [originalBackgroundColor]);
 
     const animatedAppBarStyle = useAnimatedStyle(() => {

package/src/internal/icons/AppBarChevronLeft.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <React.Fragment>
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M0.292893 9.70711C-0.0976311 9.31658 -0.0976311 8.68342 0.292893 8.29289L8.2929 0.292893C8.68342 -0.097631 9.31658 -0.097631 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L2.41421 9L9.70711 16.2929C10.0976 16.6834 10.0976 17.3166 9.70711 17.7071C9.31658 18.0976 8.68342 18.0976 8.29289 17.7071L0.292893 9.70711Z"
+        />
+    </React.Fragment>,
+    'AppBarChevronLeft',
+    '0 0 10 18',
+);

package/src/internal/icons/Clear.tsx

@@ -7,14 +7,14 @@ export default createSvgIcon(
         <Path
             fillRule="evenodd"
             clipRule="evenodd"
-            d="M4.68306 5.68306C4.92714 5.43898 5.32286 5.43898 5.56694 5.68306L7 7.11612L8.43306 5.68306C8.67714 5.43898 9.07286 5.43898 9.31694 5.68306C9.56102 5.92714 9.56102 6.32286 9.31694 6.56694L7.88388 8L9.31694 9.43306C9.56102 9.67714 9.56102 10.0729 9.31694 10.3169C9.07286 10.561 8.67714 10.561 8.43306 10.3169L7 8.88388L5.56694 10.3169C5.32286 10.561 4.92714 10.561 4.68306 10.3169C4.43898 10.0729 4.43898 9.67714 4.68306 9.43306L6.11612 8L4.68306 6.56694C4.43898 6.32286 4.43898 5.92714 4.68306 5.68306Z"
+            d="M5.32076 6.32681C5.603 6.04521 6.06061 6.04521 6.34285 6.32681L7.99999 7.98019L9.65712 6.32681C9.93937 6.04521 10.397 6.04521 10.6792 6.32681C10.9615 6.60842 10.9615 7.06498 10.6792 7.34659L9.02208 8.99997L10.6792 10.6533C10.9615 10.9349 10.9615 11.3915 10.6792 11.6731C10.397 11.9547 9.93937 11.9547 9.65712 11.6731L7.99999 10.0197L6.34285 11.6731C6.06061 11.9547 5.603 11.9547 5.32076 11.6731C5.03852 11.3915 5.03852 10.9349 5.32076 10.6533L6.9779 8.99997L5.32076 7.34659C5.03852 7.06498 5.03852 6.60842 5.32076 6.32681Z"
         />
         <Path
             fillRule="evenodd"
             clipRule="evenodd"
-            d="M7 2.375C3.8934 2.375 1.375 4.8934 1.375 8C1.375 11.1066 3.8934 13.625 7 13.625C10.1066 13.625 12.625 11.1066 12.625 8C12.625 4.8934 10.1066 2.375 7 2.375ZM0.125 8C0.125 4.20304 3.20304 1.125 7 1.125C10.797 1.125 13.875 4.20304 13.875 8C13.875 11.797 10.797 14.875 7 14.875C3.20304 14.875 0.125 11.797 0.125 8Z"
+            d="M7.99999 2.51017C4.40763 2.51017 1.49544 5.41575 1.49544 8.99997C1.49544 12.5842 4.40763 15.4898 7.99999 15.4898C11.5923 15.4898 14.5045 12.5842 14.5045 8.99997C14.5045 5.41575 11.5923 2.51017 7.99999 2.51017ZM0.0499878 8.99997C0.0499878 4.61926 3.60932 1.06799 7.99999 1.06799C12.3907 1.06799 15.95 4.61926 15.95 8.99997C15.95 13.3807 12.3907 16.9319 7.99999 16.9319C3.60932 16.9319 0.0499878 13.3807 0.0499878 8.99997Z"
         />
     </React.Fragment>,
     'Clear',
-    '0 0 14 16',
+    '0 0 16 18',
 );

package/src/internal/icons/Search.tsx

@@ -7,9 +7,9 @@ export default createSvgIcon(
         <Path
             fillRule="evenodd"
             clipRule="evenodd"
-            d="M8.25 3.5C5.3505 3.5 3 5.8505 3 8.75C3 11.6495 5.3505 14 8.25 14C9.66548 14 10.9501 13.4398 11.8943 12.5291C11.9136 12.5042 11.9346 12.4803 11.9575 12.4575C11.9803 12.4346 12.0042 12.4136 12.0291 12.3943C12.9398 11.4501 13.5 10.1655 13.5 8.75C13.5 5.8505 11.1495 3.5 8.25 3.5ZM13.5239 12.9633C14.4476 11.8085 15 10.3438 15 8.75C15 5.02208 11.9779 2 8.25 2C4.52208 2 1.5 5.02208 1.5 8.75C1.5 12.4779 4.52208 15.5 8.25 15.5C9.84376 15.5 11.3085 14.9476 12.4633 14.0239L15.22 16.7806C15.5129 17.0735 15.9877 17.0735 16.2806 16.7806C16.5735 16.4877 16.5735 16.0129 16.2806 15.72L13.5239 12.9633Z"
+            d="M8.70834 3.16665C5.64776 3.16665 3.16667 5.64774 3.16667 8.70831C3.16667 11.7689 5.64776 14.25 8.70834 14.25C10.2024 14.25 11.5585 13.6587 12.5551 12.6973C12.5755 12.6711 12.5977 12.6458 12.6218 12.6217C12.6459 12.5977 12.6711 12.5754 12.6974 12.5551C13.6587 11.5584 14.25 10.2024 14.25 8.70831C14.25 5.64774 11.7689 3.16665 8.70834 3.16665ZM14.2753 13.1556C15.2503 11.9367 15.8333 10.3906 15.8333 8.70831C15.8333 4.77328 12.6434 1.58331 8.70834 1.58331C4.77331 1.58331 1.58334 4.77328 1.58334 8.70831C1.58334 12.6433 4.77331 15.8333 8.70834 15.8333C10.3906 15.8333 11.9368 15.2503 13.1557 14.2752L16.0655 17.1851C16.3747 17.4942 16.8759 17.4942 17.1851 17.1851C17.4943 16.8759 17.4943 16.3747 17.1851 16.0655L14.2753 13.1556Z"
         />
     </React.Fragment>,
     'Search',
-    '0 0 18 19',
+    '0 0 19 19',
 );

package/src/internal/icons/index.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';