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

package/src/Typography/TypographyProps.ts

@@ -1,44 +1,34 @@
 import React from 'react';
-import type { AccessibilityProps, TextProps } from 'react-native';
+import type { AccessibilityProps, TextProps, TextStyle } from 'react-native';
+import type { FontVariant, FontWeight } from '@fountain-ui/styles';
 import type { ComponentProps } from '../types';
 
-export type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify';
-
-export type TypographyColor =
-    | 'inherit'
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'warning'
-    | 'error'
-    | 'accent'
-    | 'textPrimary'
-    | 'textSecondary'
-    | 'textAccent'
-    | 'textHint';
-
-export type TypographyVariant =
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'subtitle1'
-    | 'subtitle2'
-    | 'body1'
-    | 'body2'
-    | 'caption1'
-    | 'caption2'
-    | 'flag'
-    | 'button1'
-    | 'button2';
+export type TypographyAlign = 'inherit' | TextStyle['textAlign'];
+
+export const typographyColors = [
+    'inherit',
+    'accent',
+    'accentAlt',
+    'strong',
+    'strongInverse',
+    'base',
+    'baseInverse',
+    'baseOpacity',
+    'baseOpacityInverse',
+    'weak',
+    'weakOpacity',
+    'weakInverse',
+    'weakOpacityInverse',
+] as const;
+
+export type TypographyColor = typeof typographyColors[number];
 
 export interface Accessibility {
     accessibilityRole: AccessibilityProps['accessibilityRole'];
     'area-level'?: number;
 }
 
-export interface AccessibilityMap extends Partial<{
-    [key: string]: Accessibility;
-}> {}
+export type AccessibilityMap = Partial<Record<FontVariant, Accessibility>>;
 
 export default interface TypographyProps extends ComponentProps<{
     /**
@@ -107,8 +97,13 @@ export default interface TypographyProps extends ComponentProps<{
      * Applies the theme typography styles.
      * @default 'body1'
      */
-    variant?: TypographyVariant;
+    variant?: FontVariant;
 
+    /**
+     * Determines the font weight.
+     * @default 'medium'
+     */
+    weight?: FontWeight;
 
     /**
      * Callback that is called when the text layout has been calculated.
@@ -118,5 +113,5 @@ export default interface TypographyProps extends ComponentProps<{
     /**
      * Callback that is called when the layout of the Text component changes.
      */
-     onLayout?: TextProps['onLayout'];
+    onLayout?: TextProps['onLayout'];
 }> {}

package/src/Typography/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Typography';
-export type { default as TypographyProps } from './TypographyProps';
+export { default } from './LegacyTypography';
+export type { default as TypographyProps } from './LegacyTypographyProps';

package/src/hooks/useCollapsibleAppBar.ts

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import {
     Falsy,
     Keyboard,
@@ -51,6 +51,7 @@ export interface CollapsibleAppBar {
     onScroll: OnScroll;
     onScrollViewChanged: (index: number) => void;
     scrollContentInsets: ContentInsets;
+    isScrolled: boolean;
 }
 
 const defaultOptions: Required<Options> = {
@@ -85,6 +86,8 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
     const lastOffsetY = useSharedValue<number>(0);
     const overlapped = useSharedValue<boolean>(false);
 
+    const [isScrolled, setIsScrolled] = useState<boolean>(false);
+
     const theme = useTheme();
 
     const animatedStyle = useAnimatedStyle(() => {
@@ -138,6 +141,12 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
         onScroll: (event) => {
             const offsetY = event.contentOffset.y;
 
+            if (!isScrolled && offsetY > 0) {
+                runOnJS(setIsScrolled)(true);
+            } else if (isScrolled && offsetY <= 0) {
+                runOnJS(setIsScrolled)(false);
+            }
+
             const maxTy = maxTranslateY.value;
 
             if (SUPPORTS_DRAG_DETECTION) {
@@ -151,8 +160,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
                 const maxOffsetY = event.contentSize.height - event.layoutMeasurement.height;
 
                 const safeOffsetY = Math.min(Math.max(offsetY, minOffsetY), maxOffsetY);
-                const safeLastOffsetY = Math.min(Math.max(lastOffsetY.value, minOffsetY), maxOffsetY);
-                const dy = safeOffsetY - safeLastOffsetY;
+                const dy = safeOffsetY - lastOffsetY.value;
 
                 const newTranslateY = supportsReverseScroll
                     ? dy === 0
@@ -160,7 +168,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
                         : dy > 0
                             ? maxTy
                             : 0
-                    : safeLastOffsetY === minOffsetY
+                    : lastOffsetY.value === minOffsetY
                         ? 0
                         : maxTy;
 
@@ -196,7 +204,7 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
 
             translateY.value = withTiming(nextTranslateY, ANIMATION_CONFIG);
         },
-    }, [keyboardDismissMode, appBarHeight]);
+    }, [keyboardDismissMode, appBarHeight, isScrolled]);
 
     const hasCollapsible = collapsibleToolbarHeight > 0;
 
@@ -213,5 +221,6 @@ export default function useCollapsibleAppBar(userOptions: Options = defaultOptio
         onScroll: scrollHandler,
         onScrollViewChanged,
         scrollContentInsets: { top: hasCollapsible ? appBarHeight : 0 },
+        isScrolled,
     };
 };

package/src/index.ts

@@ -29,6 +29,9 @@ export * from './Button';
 export { default as ButtonBase } from './ButtonBase';
 export * from './ButtonBase';
 
+export { default as ButtonSet } from './ButtonSet';
+export * from './ButtonSet';
+
 export { default as Card } from './Card';
 export * from './Card';
 
@@ -44,6 +47,9 @@ export * from './CardMedia';
 export { default as Checkbox } from './Checkbox';
 export * from './Checkbox';
 
+export { default as CheckboxGroup } from './CheckboxGroup';
+export * from './CheckboxGroup';
+
 export { default as Chip } from './Chip';
 export * from './Chip';
 
@@ -71,6 +77,9 @@ export * from './DialogTitle';
 export { default as Divider } from './Divider';
 export * from './Divider';
 
+export { default as Empty } from './Empty';
+export * from './Empty';
+
 export { default as Fab } from './Fab';
 export * from './Fab';
 
@@ -134,6 +143,9 @@ export * from './RadioGroup';
 export { default as Row } from './Row';
 export * from './Row';
 
+export { default as ShadowView } from './ShadowView';
+export * from './ShadowView';
+
 export { default as Slide } from './Slide';
 export * from './Slide';
 
@@ -167,6 +179,9 @@ export * from './Tabs';
 export { default as TextField } from './TextField';
 export * from './TextField';
 
+export { default as Toggle } from './Toggle';
+export * from './Toggle';
+
 export { default as Toolbar } from './Toolbar';
 export * from './Toolbar';
 

package/src/internal/icons/Check.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="M16.7071 6.29289C17.0976 6.68342 17.0976 7.31658 16.7071 7.70711L6.70711 17.7071C6.31658 18.0976 5.68342 18.0976 5.29289 17.7071L0.292893 12.7071C-0.0976311 12.3166 -0.0976311 11.6834 0.292893 11.2929C0.683417 10.9024 1.31658 10.9024 1.70711 11.2929L6 15.5858L15.2929 6.29289C15.6834 5.90237 16.3166 5.90237 16.7071 6.29289Z"
+    />,
+    'Check',
+    '0 0 17 24',
+);

package/src/internal/icons/CheckCircle.tsx

@@ -0,0 +1,20 @@
+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="M10.3136 5.18306C10.5621 5.42714 10.5621 5.82286 10.3136 6.06694L6.49543 9.81694C6.24692 10.061 5.84399 10.061 5.59548 9.81694L4.00457 8.25444C3.75605 8.01036 3.75605 7.61464 4.00457 7.37056C4.25308 7.12648 4.65601 7.12648 4.90452 7.37056L6.04545 8.49112L9.41366 5.18306C9.66217 4.93898 10.0651 4.93898 10.3136 5.18306Z"
+        />
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7 1.875C3.83691 1.875 1.27273 4.3934 1.27273 7.5C1.27273 10.6066 3.83691 13.125 7 13.125C10.1631 13.125 12.7273 10.6066 12.7273 7.5C12.7273 4.3934 10.1631 1.875 7 1.875ZM0 7.5C0 3.70304 3.13401 0.625 7 0.625C10.866 0.625 14 3.70304 14 7.5C14 11.297 10.866 14.375 7 14.375C3.13401 14.375 0 11.297 0 7.5Z"
+        />
+    </React.Fragment>,
+    'CheckCircle',
+    '0 0 14 15',
+);

package/src/internal/icons/CheckboxOn.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.5374 0.476788C11.8263 0.77356 11.82 1.24839 11.5232 1.53735L5.36106 7.53735C5.07816 7.8128 4.63016 7.82175 4.3365 7.55781L0.998658 4.55781C0.690589 4.28092 0.665312 3.80672 0.942199 3.49865C1.21909 3.19058 1.69329 3.16531 2.00136 3.44219L4.81735 5.97316L10.4768 0.462647C10.7736 0.173685 11.2484 0.180016 11.5374 0.476788Z"
+    />,
+    'CheckboxOn',
+    '0 0 12 8',
+);

package/src/internal/icons/Clear.tsx

@@ -0,0 +1,20 @@
+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="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"
+        />
+        <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"
+        />
+    </React.Fragment>,
+    'Clear',
+    '0 0 14 16',
+);

package/src/internal/icons/EyeOff.tsx

@@ -0,0 +1,25 @@
+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="M11.0001 5.50008C9.32352 5.50008 7.75128 5.93509 6.38672 6.69786C5.90464 6.96734 5.29539 6.79499 5.02591 6.31291C4.75643 5.83083 4.92878 5.22157 5.41086 4.95209C7.06584 4.02699 8.97302 3.50008 11.0001 3.50008C16.0752 3.50008 20.377 6.79591 21.8964 11.3624C22.0349 11.7756 22.0342 12.2215 21.8961 12.6337C21.0263 15.2551 19.2405 17.4554 16.9195 18.8562C16.4467 19.1416 15.832 18.9897 15.5466 18.5168C15.2612 18.044 15.4132 17.4293 15.886 17.1439C17.8054 15.9855 19.281 14.1656 19.9984 12.0023L19.9997 11.9986L19.9987 11.9938C18.7425 8.21826 15.1866 5.50008 11.0001 5.50008ZM3.99 7.12944C4.39533 7.50457 4.41982 8.13726 4.04469 8.5426C3.13527 9.52525 1.5 11.5 2.00127 11.9938M3.99 7.12944C3.58466 6.75431 2.95197 6.7788 2.57684 7.18414L3.99 7.12944ZM2.57684 7.18414C1.47745 8.37206 0.625032 9.79392 0.102675 11.3678L2.57684 7.18414ZM0.102675 11.3678C-0.0341243 11.7798 -0.0341912 12.2254 0.102675 12.6374C1.62212 17.2039 5.92516 20.5001 11.0001 20.5001C11.731 20.5001 12.4469 20.4316 13.1413 20.3003C13.684 20.1978 14.0408 19.6747 13.9383 19.132C13.8357 18.5893 13.3126 18.2326 12.77 18.3351C12.1973 18.4433 11.6058 18.5001 11.0001 18.5001C6.81374 18.5001 3.25761 15.769 2.00127 11.9938M11 10.0001C10.5632 10.0001 10.1409 10.1437 9.79621 10.405C9.35614 10.7387 8.72888 10.6525 8.39518 10.2124C8.06148 9.77237 8.14771 9.14511 8.58778 8.81141C9.27794 8.28807 10.124 8.00008 11 8.00008C12.0601 8.00008 13.0765 8.42189 13.8257 9.17221C14.5748 9.92247 14.9953 10.9397 14.9953 12.0001C14.9953 13.0604 14.5748 14.0777 13.8257 14.828C13.4354 15.2188 12.8023 15.2193 12.4115 14.8291C12.0206 14.4388 12.0201 13.8057 12.4103 13.4149C12.7847 13.0399 12.9953 12.531 12.9953 12.0001C12.9953 11.4691 12.7847 10.9603 12.4103 10.5853C12.036 10.2104 11.5287 10.0001 11 10.0001Z"
+        />
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.99001 7.12001C3.50001 7.00002 3.50014 6.99992 2.57684 7.18414C1.47785 8.37165 0.626103 9.79192 0.103562 11.3624C-0.0349384 11.7756 -0.0342041 12.2215 0.103869 12.6337C0.973681 15.2551 2.7595 17.4554 5.08051 18.8562C5.55334 19.1416 6.168 18.9897 6.45339 18.5168C6.73877 18.044 6.58682 17.4293 6.11398 17.1439C4.19462 15.9855 1.5 13 2.00127 11.9938C2.55001 10.5 3.11383 9.5613 4 8.59063C4.22267 7.18422 4.00001 7.49999 3.99001 7.12001Z"
+        />
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M2.75721 2.23398C3.18029 1.87898 3.81104 1.93416 4.16604 2.35724L19.2716 20.3593C19.6266 20.7824 19.5714 21.4131 19.1483 21.7681C18.7252 22.1231 18.0945 22.0679 17.7395 21.6449L2.63396 3.64281C2.27895 3.21974 2.33414 2.58898 2.75721 2.23398Z"
+        />
+    </React.Fragment>,
+    'EyeOff',
+    '0 0 22 24',
+);

package/src/internal/icons/EyeOn.tsx

@@ -0,0 +1,20 @@
+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="M11.0001 3.5C5.92306 3.5 1.61902 6.79886 0.102672 11.3677C-0.0341271 11.7797 -0.0340452 12.2257 0.102821 12.6377C1.62227 17.2043 5.92515 20.5 11.0001 20.5C16.0766 20.5 20.3803 17.2019 21.8961 12.6336C22.0342 12.2214 22.0349 11.7755 21.8964 11.3623C20.377 6.79583 16.0752 3.5 11.0001 3.5ZM11.0001 5.5C6.8 5.5 3.27 8.2 2 12C3.27 15.8 6.8 18.5 11.0001 18.5C15.2 18.5 18.7545 15.8 20 12C18.7509 8.3 15.3 5.5 11.0001 5.5Z"
+        />
+        <Path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11 10C10.4713 10 9.96395 10.2103 9.58963 10.5852C9.21527 10.9602 9.00467 11.4691 9.00467 12C9.00467 12.5309 9.21527 13.0398 9.58963 13.4148C9.96395 13.7897 10.4713 14 11 14C11.5287 14 12.036 13.7897 12.4103 13.4148C12.7847 13.0398 12.9953 12.5309 12.9953 12C12.9953 11.4691 12.7847 10.9602 12.4103 10.5852C12.036 10.2103 11.5287 10 11 10ZM8.17432 9.17212C8.92346 8.42181 9.93986 8 11 8C12.0601 8 13.0765 8.42181 13.8257 9.17212C14.5747 9.92239 14.9953 10.9396 14.9953 12C14.9953 13.0604 14.5747 14.0776 13.8257 14.8279C13.0765 15.5782 12.0601 16 11 16C9.93986 16 8.92346 15.5782 8.17432 14.8279C7.42522 14.0776 7.00467 13.0604 7.00467 12C7.00467 10.9396 7.42522 9.92239 8.17432 9.17212Z"
+        />
+    </React.Fragment>,
+    'EyeOn',
+    '0 0 22 24',
+);

package/src/internal/icons/InfoCircle.tsx

@@ -0,0 +1,21 @@
+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 1.875C3.83691 1.875 1.27273 4.3934 1.27273 7.5C1.27273 10.6066 3.83691 13.125 7 13.125C10.1631 13.125 12.7273 10.6066 12.7273 7.5C12.7273 4.3934 10.1631 1.875 7 1.875ZM0 7.5C0 3.70304 3.13401 0.625 7 0.625C10.866 0.625 14 3.70304 14 7.5C14 11.297 10.866 14.375 7 14.375C3.13401 14.375 0 11.297 0 7.5Z"
+        />
+        <Path
+            d="M7.79545 4.84375C7.79545 5.27522 7.43932 5.625 7 5.625C6.56068 5.625 6.20455 5.27522 6.20455 4.84375C6.20455 4.41228 6.56068 4.0625 7 4.0625C7.43932 4.0625 7.79545 4.41228 7.79545 4.84375Z"
+        />
+        <Path
+            d="M6.36364 7.1875C6.36364 6.84232 6.64855 6.5625 7 6.5625C7.35145 6.5625 7.63636 6.84232 7.63636 7.1875V10.3125C7.63636 10.6577 7.35145 10.9375 7 10.9375C6.64855 10.9375 6.36364 10.6577 6.36364 10.3125V7.1875Z"
+        />
+    </React.Fragment>,
+    'InfoCircle',
+    '0 0 14 15',
+);

package/src/internal/icons/LoadingSpinner/LoadingSpinnerProps.ts

@@ -0,0 +1,11 @@
+import type { ViewProps } from 'react-native';
+import type { OverridableComponentProps } from '../../../types';
+
+export type LoadingSpinnerColor = 'white' | 'gray';
+
+export type LoadingSpinnerSize = 'small' | 'medium' | 'large';
+
+export default interface LoadingSpinnerProps extends OverridableComponentProps<ViewProps, {
+    color?: LoadingSpinnerColor;
+    size?: LoadingSpinnerSize;
+}> {}

package/src/internal/icons/LoadingSpinner/index.native.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View } from 'react-native';
+import LottieView from 'lottie-react-native';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import type LoadingSpinnerProps from './LoadingSpinnerProps';
+import { loadingSpinnerMap, loadingSpinnerSizeMap } from './utils';
+
+export default function LoadingSpinner(props: LoadingSpinnerProps) {
+    const {
+        color = 'gray',
+        size = 'medium',
+        ...otherProps
+    } = props;
+
+    const style: FountainUiStyle = {
+        height: loadingSpinnerSizeMap[size],
+        width: loadingSpinnerSizeMap[size],
+    };
+
+    return (
+        <View {...otherProps}>
+            <LottieView
+                autoPlay={true}
+                key={color}
+                loop={true}
+                source={loadingSpinnerMap[color]}
+                style={style}
+            />
+        </View>
+    );
+}

package/src/internal/icons/LoadingSpinner/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View } from 'react-native';
+import LottieView from 'react-lottie-player';
+import type { FountainUiStyle } from '@fountain-ui/styles';
+import type LoadingSpinnerProps from './LoadingSpinnerProps';
+import { loadingSpinnerMap, loadingSpinnerSizeMap } from './utils';
+
+export default function LoadingSpinner(props: LoadingSpinnerProps) {
+    const {
+        color = 'gray',
+        size = 'medium',
+        ...otherProps
+    } = props;
+
+    const style: FountainUiStyle = {
+        height: loadingSpinnerSizeMap[size],
+        width: loadingSpinnerSizeMap[size],
+    };
+
+    return (
+        <View {...otherProps}>
+            <LottieView
+                animationData={loadingSpinnerMap[color]}
+                key={color}
+                loop={true}
+                style={style}
+                play={true}
+            />
+        </View>
+    );
+}

package/src/internal/icons/LoadingSpinner/loadingSpinnerGray.json

@@ -0,0 +1 @@
+{"assets":[],"ddd":0,"fr":30,"h":100,"ip":0,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Group 1","hd":false,"sr":1,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[50,50]},"r":{"a":1,"k":[{"t":0,"s":[-90],"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167}},{"t":59.1,"s":[270],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":61,"st":0,"bm":0,"shapes":[{"ty":"gr","hd":false,"nm":"Path 1 Group","bm":0,"it":[{"ty":"sh","hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,19.882],[19.882,0],[0,-19.882],[-19.882,0]],"o":[[0,-19.882],[-19.882,0],[0,19.882],[19.882,0]],"v":[[36,0],[0,-36],[-36,0],[0,36]]}}},{"ty":"st","hd":false,"bm":0,"c":{"a":0,"k":[0.773,0.784,0.796]},"lc":2,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":10}},{"ty":"tr","nm":"Transform","a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"np":0},{"ty":"tm","hd":false,"bm":0,"e":{"a":1,"k":[{"t":0,"s":[100],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25}},{"t":20.1,"s":[100],"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0}},{"t":60,"s":[1],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"o":{"a":0,"k":0},"s":{"a":1,"k":[{"t":0,"s":[100],"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167}},{"t":29.1,"s":[0],"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0}},{"t":51,"s":[0],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"m":1}]},{"ddd":0,"ind":3,"ty":4,"nm":"Screen","hd":false,"sr":1,"ks":{"a":{"a":0,"k":[50,50]},"o":{"a":0,"k":100},"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":61,"st":0,"bm":0,"shapes":[{"ty":"gr","hd":false,"nm":"Screen Group","bm":0,"it":[{"ty":"rc","hd":false,"nm":"Screen","d":1,"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]}},{"ty":"fl","hd":false,"bm":0,"c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":0}},{"ty":"tr","nm":"Transform","a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"np":0}]}],"meta":{"g":"@phase-software/lottie-exporter 0.7.0"},"nm":"","op":60,"v":"5.6.0","w":100}

package/src/internal/icons/LoadingSpinner/loadingSpinnerWhite.json

@@ -0,0 +1 @@
+{"assets":[],"ddd":0,"fr":30,"h":100,"ip":0,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Group 1","hd":false,"sr":1,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[50,50]},"r":{"a":1,"k":[{"t":0,"s":[-90],"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167}},{"t":59.1,"s":[270],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":61,"st":0,"bm":0,"shapes":[{"ty":"gr","hd":false,"nm":"Path 1 Group","bm":0,"it":[{"ty":"sh","hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,19.882],[19.882,0],[0,-19.882],[-19.882,0]],"o":[[0,-19.882],[-19.882,0],[0,19.882],[19.882,0]],"v":[[36,0],[0,-36],[-36,0],[0,36]]}}},{"ty":"st","hd":false,"bm":0,"c":{"a":0,"k":[1,1,1]},"lc":2,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":10}},{"ty":"tr","nm":"Transform","a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"np":0},{"ty":"tm","hd":false,"bm":0,"e":{"a":1,"k":[{"t":0,"s":[100],"i":{"x":0.75,"y":0.75},"o":{"x":0.25,"y":0.25}},{"t":20.1,"s":[100],"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0}},{"t":60,"s":[1],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"o":{"a":0,"k":0},"s":{"a":1,"k":[{"t":0,"s":[100],"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167}},{"t":29.1,"s":[0],"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0}},{"t":51,"s":[0],"i":{"x":0,"y":0},"o":{"x":1,"y":1}}]},"m":1}]},{"ddd":0,"ind":3,"ty":4,"nm":"Screen","hd":false,"sr":1,"ks":{"a":{"a":0,"k":[50,50]},"o":{"a":0,"k":100},"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":61,"st":0,"bm":0,"shapes":[{"ty":"gr","hd":false,"nm":"Screen Group","bm":0,"it":[{"ty":"rc","hd":false,"nm":"Screen","d":1,"p":{"a":0,"k":[50,50]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]}},{"ty":"fl","hd":false,"bm":0,"c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":0}},{"ty":"tr","nm":"Transform","a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"np":0}]}],"meta":{"g":"@phase-software/lottie-exporter 0.7.0"},"nm":"","op":60,"v":"5.6.0","w":100}

package/src/internal/icons/LoadingSpinner/utils.ts

@@ -0,0 +1,14 @@
+import loadingSpinnerGray from './loadingSpinnerGray.json';
+import loadingSpinnerWhite from './loadingSpinnerWhite.json';
+import type { LoadingSpinnerColor, LoadingSpinnerSize } from './LoadingSpinnerProps';
+
+export const loadingSpinnerMap: Record<LoadingSpinnerColor, any> = {
+    gray: loadingSpinnerGray,
+    white: loadingSpinnerWhite,
+};
+
+export const loadingSpinnerSizeMap: Record<LoadingSpinnerSize, number> = {
+    small: 16,
+    medium: 18,
+    large: 20,
+};

package/src/internal/icons/Search.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="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"
+        />
+    </React.Fragment>,
+    'Search',
+    '0 0 18 19',
+);

package/src/internal/icons/index.ts

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

package/src/styles/createFontStyle.ts

@@ -7,7 +7,7 @@ type Typography = Theme['typography'];
 type Variant = Typography['h1'];
 
 interface FontStyleConfig {
-    selector?: (typography: Typography) => Variant;
+    selector?: (typography: Typography) => Variant | undefined;
     color?: TextStyle['color'];
 }
 

package/src/utils/cloneElementSafely.ts

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

package/src/utils/createSvgIcon.tsx

@@ -1,15 +1,38 @@
 import React from 'react';
-import type { SvgIconProps } from '../SvgIcon';
-import SvgIcon from '../SvgIcon';
+import SvgIcon from '../SvgIcon/SvgIcon';
+import type SvgIconProps from '../SvgIcon/SvgIconProps';
+import LegacySvgIcon from '../SvgIcon/LegacySvgIcon';
+import type LegacySvgIconProps from '../SvgIcon/LegacySvgIconProps';
 
-type SvgIconBaseProps = Omit<SvgIconProps, 'children'>;
+type Path = React.ReactElement | React.ReactFragment;
 
-const createSvgIcon = (path: React.ReactElement | React.ReactFragment, displayName: string) => {
+type SvgIconPropsWithoutChildren = Omit<SvgIconProps, 'children'> | Omit<LegacySvgIconProps, 'children'>;
+
+type SvgIconBaseProps = SvgIconPropsWithoutChildren & {
+    enableV2?: boolean;
+};
+
+const createSvgIcon = (path: Path, displayName: string, viewBox?: string) => {
     function Component(props: SvgIconBaseProps) {
-        return (
-            <SvgIcon {...props}>
+        const {
+            enableV2 = false,
+            ...otherProps
+        } = props;
+
+        return enableV2 ? (
+            <SvgIcon
+                viewBox={viewBox}
+                {...otherProps as SvgIconProps}
+            >
                 {path}
             </SvgIcon>
+        ) : (
+            <LegacySvgIcon
+                viewBox={viewBox}
+                {...otherProps as LegacySvgIconProps}
+            >
+                {path}
+            </LegacySvgIcon>
         );
     }
 

package/src/utils/index.ts

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