@fountain-ui/core 3.0.0-alpha.5 → 3.0.0-alpha.50

package/src/Tooltip/Tooltip.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Platform, Text, View, ViewProps } from 'react-native';
+import { Platform, StyleSheet, Text, View, ViewProps } from 'react-native';
 import type { WithTimingConfig } from 'react-native-reanimated';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import type { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { typographyOf } from '@fountain-ui/styles';
 import ButtonBase from '../ButtonBase';
 import { createFontStyle, css, useTheme } from '../styles';
 import type TooltipProps from './TooltipProps';
@@ -52,14 +51,14 @@ const useStyles: UseStyles<TooltipStyles> = function (): TooltipStyles {
         },
         small: {
             borderRadius: theme.shape.radius.sm,
+            paddingBottom: theme.spacing(1.75),
             paddingHorizontal: theme.spacing(2),
-            paddingVertical: theme.spacing(1.5),
+            paddingTop: theme.spacing(1.5),
         },
         large: {
             borderRadius: 5,
-            paddingBottom: theme.spacing(2.5),
             paddingHorizontal: theme.spacing(4),
-            paddingTop: theme.spacing(2),
+            paddingVertical: theme.spacing(2),
         },
     };
 };
@@ -80,6 +79,7 @@ export default function Tooltip(props: TooltipProps) {
         tooltipStyle,
         verticalOffset = 4,
         visible = false,
+        ...otherProps
     } = props;
 
     const {
@@ -97,7 +97,7 @@ export default function Tooltip(props: TooltipProps) {
 
     const animatedStyle = useAnimatedStyle(() => ({
         transform: [{ scale: scale.value }],
-    }), []);
+    }), [scale]);
 
     const flexDirection = getFlexDirection(placement);
 
@@ -140,12 +140,7 @@ export default function Tooltip(props: TooltipProps) {
 
     const fontStyle = createFontStyle(theme, {
         selector: (typo) => size === 'large'
-            ? typographyOf({
-                fontSize: 13,
-                lineHeight: 19.5,
-                fontFamily: 'PretendardStd-Regular',
-                letterSpacing: 0,
-            })
+            ? typo.body3.regular
             : typo.caption2.regular,
         color: theme.palette.text.strongInverse,
     });
@@ -155,8 +150,13 @@ export default function Tooltip(props: TooltipProps) {
         { flexShrink: 1 },
     ]);
 
+    const beakOverlapStyle = {
+        [placement === 'top' ? 'marginTop' : placement === 'bottom' ? 'marginBottom' : placement === 'left' ? 'marginLeft' : 'marginRight']: -StyleSheet.hairlineWidth,
+    };
+
     const beakStyle = css({
         transform: [isVerticalPlacement ? { translateX: beakOffset } : { translateY: beakOffset }],
+        ...beakOverlapStyle,
     });
 
     const buttonElem = (
@@ -186,7 +186,10 @@ export default function Tooltip(props: TooltipProps) {
     );
 
     return (
-        <View style={style}>
+        <View
+            style={style}
+            {...otherProps}
+        >
             {children}
 
             <Animated.View

package/src/Tooltip/TooltipProps.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { TextProps, ViewProps } from 'react-native';
-import type { ComponentProps } from '../types';
 import type { ButtonProps } from '../Button';
+import type { OverridableComponentProps } from '../types';
 
 export const tooltipPlacements = ['top', 'bottom', 'left', 'right'] as const;
 export type TooltipPlacement = typeof tooltipPlacements[number];
@@ -24,7 +24,7 @@ export type TooltipInitialLayout = {
     y: number;
 };
 
-export default interface TooltipProps extends ComponentProps<{
+export default interface TooltipProps extends OverridableComponentProps<ViewProps, {
     /**
      * Tooltip reference element.
      */

package/src/Tooltip/index.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/src/Typography/Typography.tsx

@@ -46,6 +46,7 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
         color: colorProp = 'inherit' as TypographyColor,
         ellipsizeMode = 'tail' as TextProps['ellipsizeMode'],
         href,
+        lineHeight,
         numberOfLines,
         onPress,
         selectable,
@@ -59,7 +60,7 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
     const theme = useTheme();
 
     const fontStyle = createFontStyle(theme, {
-        selector: (typography) => typography[variant][weight],
+        selector: (typography) => typography[variant]?.[weight],
         color: selectColor(theme, colorProp),
     });
 
@@ -71,6 +72,7 @@ const Typography = React.forwardRef<Text, TypographyProps>(function Typography(p
         { textAlign: align === 'inherit' ? 'auto' : align },
         textWrapStyle as TextStyle,
         fontStyle,
+        lineHeight ? { lineHeight } : undefined,
         style,
     ]);
 

package/src/Typography/TypographyProps.ts

@@ -76,6 +76,11 @@ export default interface TypographyProps extends ComponentProps<{
      */
     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/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,8 +30,8 @@ export interface ContentInsets {
 
 export interface Options {
     keyboardDismissMode?: 'none' | 'on-drag';
-    dividerExposureMode?: 'always' | 'overlapped';
     supportsReverseScroll?: boolean;
+    minVisibleHeight?: number;
 }
 
 export interface CollapsibleAppBar {
@@ -50,14 +40,15 @@ export interface CollapsibleAppBar {
     onCollapsibleToolbarLayout: OnLayoutCallback;
     onScroll: OnScroll;
     onScrollViewChanged: (index: number) => void;
+    recoverAppBar: () => void;
     scrollContentInsets: ContentInsets;
     isScrolled: boolean;
 }
 
 const defaultOptions: Required<Options> = {
     keyboardDismissMode: 'none',
-    dividerExposureMode: 'overlapped',
     supportsReverseScroll: true,
+    minVisibleHeight: 0,
 };
 
 const ANIMATION_CONFIG: Readonly<WithTimingConfig> = { duration: 100 };
@@ -67,7 +58,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, minVisibleHeight }: Required<Options> = {
         ...defaultOptions,
         ...userOptions,
     };
@@ -79,7 +70,10 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
     const [appBarHeight, onAppBarLayout] = useHeight();
     const [collapsibleToolbarHeight, onCollapsibleToolbarLayout] = useHeight();
 
-    const maxTranslateY = useDerivedValue(() => -collapsibleToolbarHeight, [collapsibleToolbarHeight]);
+    const maxTranslateY = useDerivedValue(() => {
+        const safeMinVisibleHeight = Math.min(minVisibleHeight, collapsibleToolbarHeight);
+        return -(collapsibleToolbarHeight - safeMinVisibleHeight);
+    }, [collapsibleToolbarHeight, minVisibleHeight]);
 
     const translateY = useSharedValue<number>(0);
     const lastTranslateY = useSharedValue<number>(0);
@@ -88,20 +82,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,
-    ]);
+    }, [translateY]);
 
     const indexRef = useRef<number>(0);
     const offsetsRef = useRef<Array<number>>([]);
@@ -128,6 +115,21 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
         }
     }, [appBarHeight]);
 
+    const recoverAppBar = useCallback(() => {
+        const currentIndex = indexRef.current;
+
+        offsetsRef.current[currentIndex] = 0;
+
+        lastOffsetY.value = 0;
+
+        translateY.value = withTiming(0, ANIMATION_CONFIG);
+        lastTranslateY.value = 0;
+
+        overlapped.value = false;
+
+        setIsScrolled(false);
+    }, []);
+
     const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
             if (keyboardDismissMode === 'on-drag') {
@@ -205,7 +207,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
             translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);
         },
-    }, [keyboardDismissMode, appBarHeight, isScrolled]);
+    });
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 
@@ -221,6 +223,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
         onCollapsibleToolbarLayout,
         onScroll: scrollHandler,
         onScrollViewChanged,
+        recoverAppBar,
         scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },
         isScrolled,
     };

package/src/hooks/useContentContainerStyle.ts

@@ -1,6 +1,4 @@
-import type { ViewStyle } from 'react-native';
 import type { FountainUiStyle } from '@fountain-ui/styles';
-import { useBreakpointByWidth } from '@fountain-ui/styles';
 import { css, useTheme } from '../styles';
 import type { Theme } from '../types';
 
@@ -9,20 +7,38 @@ type Breakpoint = keyof Theme['breakpoints']['values'];
 export interface Config {
     maxWidth?: number;
     styleProvider?: (theme: Theme) => FountainUiStyle;
+    isHomeScreen?: boolean;
 }
 
-function getMaxWidth(theme: Theme, breakpoint: Breakpoint): ViewStyle['maxWidth'] {
+function getMaxWidth(theme: Theme, breakpoint: Breakpoint, customMaxWidth?: number): number | undefined {
     switch (breakpoint) {
         case 'lg':
-            return theme.breakpoints.values['lg'];
         case 'md':
-            return theme.breakpoints.values['md'];
+            return customMaxWidth ?? theme.breakpoints.values[breakpoint];
         default:
-            return 'none';
+            return undefined;
     }
 }
 
-function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): ViewStyle['paddingHorizontal'] {
+function getHomeScreenPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): number {
+    switch (breakpoint) {
+        case 'xxs':
+        case 'xs':
+            return theme.spacing(3);
+        case 'sm':
+            return theme.spacing(6);
+        case 'md':
+        case 'lg':
+        default:
+            return theme.spacing(4);
+    }
+}
+
+function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint, isHomeScreen?: boolean): number {
+    if (isHomeScreen) {
+        return getHomeScreenPaddingHorizontal(theme, breakpoint);
+    }
+
     switch (breakpoint) {
         case 'sm':
             return theme.spacing(6);
@@ -31,23 +47,24 @@ function getPaddingHorizontal(theme: Theme, breakpoint: Breakpoint): ViewStyle['
     }
 }
 
-export default function useContentContainerStyle(config: Config): FountainUiStyle {
+export default function useContentContainerStyle(config: Config = {}): FountainUiStyle {
     const {
-        maxWidth,
+        maxWidth: customMaxWidth,
         styleProvider,
+        isHomeScreen = false,
     } = config;
 
     const theme = useTheme();
 
-    const currentBreakpoint = useBreakpointByWidth();
+    const currentBreakpoint = theme.breakpoints.current;
 
     const additionalStyle = styleProvider?.(theme);
 
     return css([
         {
             alignSelf: 'center',
-            maxWidth: maxWidth ?? getMaxWidth(theme, currentBreakpoint),
-            paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint),
+            maxWidth: getMaxWidth(theme, currentBreakpoint, customMaxWidth),
+            paddingHorizontal: getPaddingHorizontal(theme, currentBreakpoint, isHomeScreen),
             width: '100%',
         },
         additionalStyle,

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(() => {
@@ -88,11 +88,11 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
             borderColor: theme.palette.divider,
             borderBottomWidth: normalized.value >= 1 ? StyleSheet.hairlineWidth : 0,
         };
-    }, [rgbValues]);
+    }, [rgbValues, normalized, theme]);
 
     const animatedTitleStyle = useAnimatedStyle(() => ({
         opacity: normalized.value,
-    }), []);
+    }), [normalized]);
 
     const scrollHandler = useAnimatedScrollHandler({
         onBeginDrag: () => {
@@ -117,7 +117,7 @@ export default function useFadeInAppBar(userOptions: Options = defaultOptions):
         onMomentumEnd: (event) => {
             lastOffsetY.value = event.contentOffset.y;
         },
-    }, [keyboardDismissMode]);
+    });
 
     const appBarStyle = [
         animatedAppBarStyle,

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="M7.29289 12.7071C6.90237 12.3166 6.90237 11.6834 7.29289 11.2929L15.2929 3.29289C15.6834 2.90237 16.3166 2.90237 16.7071 3.29289C17.0976 3.68342 17.0976 4.31658 16.7071 4.70711L9.41421 12L16.7071 19.2929C17.0976 19.6834 17.0976 20.3166 16.7071 20.7071C16.3166 21.0976 15.6834 21.0976 15.2929 20.7071L7.29289 12.7071Z"
+        />
+    </React.Fragment>,
+    'AppBarChevronLeft',
+    '0 0 24 24',
+);

package/src/internal/icons/ChevronLeft.tsx

@@ -4,7 +4,10 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        d="M7.58594 12L14.293 18.7071C14.6836 19.0976 15.3167 19.0976 15.7073 18.7071C16.0978 18.3166 16.0978 17.6834 15.7073 17.2929L10.4144 12L15.7073 6.70711C16.0978 6.31658 16.0978 5.68342 15.7073 5.29289C15.3167 4.90237 14.6836 4.90237 14.293 5.29289L7.58594 12Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 12C3.16267e-09 11.7348 0.105357 11.4804 0.292893 11.2929L6.29289 5.29289C6.68342 4.90237 7.31658 4.90237 7.70711 5.29289C8.09763 5.68342 8.09763 6.31658 7.70711 6.70711L2.41421 12L7.70711 17.2929C8.09763 17.6834 8.09763 18.3166 7.70711 18.7071C7.31658 19.0976 6.68342 19.0976 6.29289 18.7071L0.292893 12.7071C0.105357 12.5196 -3.16267e-09 12.2652 0 12Z"
     />,
     'ChevronLeft',
+    '0 0 8 24',
 );

package/src/internal/icons/ChevronRight.tsx

@@ -4,7 +4,10 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        d="M16.4141 12L9.70696 18.7071C9.31643 19.0976 8.68327 19.0976 8.29274 18.7071C7.90222 18.3166 7.90222 17.6834 8.29274 17.2929L13.5856 12L8.29274 6.70711C7.90222 6.31658 7.90222 5.68342 8.29274 5.29289C8.68327 4.90237 9.31643 4.90237 9.70696 5.29289L16.4141 12Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 12C8 12.2652 7.89464 12.5196 7.70711 12.7071L1.70711 18.7071C1.31658 19.0976 0.683417 19.0976 0.292892 18.7071C-0.0976309 18.3166 -0.0976309 17.6834 0.292893 17.2929L5.58579 12L0.292894 6.70711C-0.0976304 6.31658 -0.0976304 5.68342 0.292895 5.29289C0.683418 4.90237 1.31658 4.90237 1.70711 5.29289L7.70711 11.2929C7.89464 11.4804 8 11.7348 8 12Z"
     />,
     'ChevronRight',
+    '0 0 8 24',
 );

package/src/internal/icons/ChipClose.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.170854 3.58753C0.39866 3.35972 0.768006 3.35972 0.995812 3.58753L4.08333 6.67505L7.17085 3.58753C7.39866 3.35972 7.76801 3.35972 7.99581 3.58753C8.22362 3.81533 8.22362 4.18468 7.99581 4.41248L4.90829 7.5L7.99581 10.5875C8.22362 10.8153 8.22362 11.1847 7.99581 11.4125C7.76801 11.6403 7.39866 11.6403 7.17085 11.4125L4.08333 8.32496L0.995812 11.4125C0.768006 11.6403 0.39866 11.6403 0.170854 11.4125C-0.0569515 11.1847 -0.0569515 10.8153 0.170854 10.5875L3.25838 7.5L0.170854 4.41248C-0.0569515 4.18468 -0.0569515 3.81533 0.170854 3.58753Z"
+    />,
+    'ChipClose',
+    '0 0 9 15',
+);

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

@@ -4,7 +4,10 @@ import { createSvgIcon } from '../../utils';
 
 export default createSvgIcon(
     <Path
-        d="M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L12 10.5858L5.70711 4.29292C5.31658 3.9024 4.68342 3.9024 4.29289 4.29292C3.90237 4.68345 3.90237 5.31661 4.29289 5.70714L10.5858 12L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L12 13.4142L18.2929 19.7071C18.6834 20.0977 19.3166 20.0977 19.7071 19.7071C20.0976 19.3166 20.0976 18.6834 19.7071 18.2929L13.4142 12L19.7071 5.70711Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L7 10.5858L12.2929 5.29289C12.6834 4.90237 13.3166 4.90237 13.7071 5.29289C14.0976 5.68342 14.0976 6.31658 13.7071 6.70711L8.41421 12L13.7071 17.2929C14.0976 17.6834 14.0976 18.3166 13.7071 18.7071C13.3166 19.0976 12.6834 19.0976 12.2929 18.7071L7 13.4142L1.70711 18.7071C1.31658 19.0976 0.683417 19.0976 0.292893 18.7071C-0.0976311 18.3166 -0.0976311 17.6834 0.292893 17.2929L5.58579 12L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289Z"
     />,
     'Close',
+    '0 0 14 24',
 );

package/src/internal/icons/CloseCircleFillPierced.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Path } from 'react-native-svg';
+import { createSvgIcon } from '../../utils';
+
+export default createSvgIcon(
+    <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11 1C4.92487 1 0 5.92487 0 12C0 18.0751 4.92487 23 11 23C17.0751 23 22 18.0751 22 12C22 5.92487 17.0751 1 11 1ZM8.70711 8.29289C8.31658 7.90237 7.68342 7.90237 7.29289 8.29289C6.90237 8.68342 6.90237 9.31658 7.29289 9.70711L9.58579 12L7.29289 14.2929C6.90237 14.6834 6.90237 15.3166 7.29289 15.7071C7.68342 16.0976 8.31658 16.0976 8.70711 15.7071L11 13.4142L13.2929 15.7071C13.6834 16.0976 14.3166 16.0976 14.7071 15.7071C15.0976 15.3166 15.0976 14.6834 14.7071 14.2929L12.4142 12L14.7071 9.70711C15.0976 9.31658 15.0976 8.68342 14.7071 8.29289C14.3166 7.90237 13.6834 7.90237 13.2929 8.29289L11 10.5858L8.70711 8.29289Z"
+    />,
+    'CloseCircleFillPierced',
+    '0 0 22 24',
+);

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';
@@ -6,9 +7,11 @@ 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';
+export { default as CloseCircleFillPierced } from './CloseCircleFillPierced';
 export { default as EyeOff } from './EyeOff';
 export { default as EyeOn } from './EyeOn';
 export { default as InfoCircle } from './InfoCircle';