@utilitywarehouse/hearth-react-native 0.1.0 → 0.2.0

package/build/components/IconButton/IconButtonRoot.js

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { IconButtonContext } from './IconButton.context';
-const IconButtonRoot = ({ children, colorScheme = 'yellow', variant = 'solid', size = 'md', inverted = false, states, ...props }) => {
+const IconButtonRoot = ({ children, colorScheme = 'highlight', variant = 'solid', size = 'md', inverted = false, states, ...props }) => {
     const { active, disabled } = states || {};
     styles.useVariants({ colorScheme, variant, size, inverted, disabled, active });
     const value = useMemo(() => ({ colorScheme, variant, size, inverted, disabled, active }), [colorScheme, variant, size, inverted, disabled, active]);
@@ -21,17 +21,17 @@ const styles = StyleSheet.create(theme => ({
             '_focus-visible': {
                 outlineStyle: 'solid',
                 outlineWidth: 2,
-                outlineColor: theme.components.focus.border,
+                outlineColor: theme.color.focus.primary,
                 outlineOffset: 1,
                 boxShadow: 'none',
             },
         },
         variants: {
             colorScheme: {
-                yellow: {},
-                green: {},
-                red: {},
-                grey: {},
+                highlight: {},
+                affirmative: {},
+                destructive: {},
+                functional: {},
             },
             disabled: {
                 true: {
@@ -42,7 +42,7 @@ const styles = StyleSheet.create(theme => ({
                 true: {
                     _web: {
                         '_focus-visible': {
-                            outlineColor: theme.components.focus.borderInverted,
+                            outlineColor: theme.color.focus.inverted,
                         },
                     },
                 },
@@ -52,11 +52,11 @@ const styles = StyleSheet.create(theme => ({
             },
             variant: {
                 emphasis: {
-                    borderColor: theme.components.button.emphasis.borderColor,
-                    boxShadow: `${theme.shadow.mobile.sm.x}px ${theme.shadow.mobile.sm.y}px ${theme.shadow.mobile.sm.spread}px ${theme.components.button.emphasis.shadowColor}`,
+                    borderColor: theme.color.interactive.highlight.border.strong,
+                    boxShadow: `${theme.shadow.mobile.sm.x}px ${theme.shadow.mobile.sm.y}px ${theme.shadow.mobile.sm.spread}px ${theme.color.shadow.default}`,
                 },
                 solid: {
-                    borderColor: theme.components.button.solid.borderColor,
+                    borderColor: theme.color.interactive.highlight.border.strong,
                 },
                 outline: {
                     backgroundColor: 'transparent',
@@ -89,6 +89,9 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         compoundVariants: [
+            // Variant Color Schemes
+            // Emphasis
+            // Emphasis Yellow
             {
                 variant: 'emphasis',
                 active: true,
@@ -102,288 +105,291 @@ const styles = StyleSheet.create(theme => ({
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'yellow',
+                colorScheme: 'highlight',
                 styles: {
-                    backgroundColor: theme.components.button.emphasis.yellow.backgroundColor,
-                    borderColor: theme.components.button.emphasis.borderColor,
+                    backgroundColor: theme.color.interactive.highlight.surface.strong.default,
+                    borderColor: theme.color.interactive.highlight.border.strong,
                     _web: {
                         _hover: {
-                            backgroundColor: theme.components.button.emphasis.yellow.backgroundColorHover,
+                            backgroundColor: theme.color.interactive.highlight.surface.strong.hover,
                         },
                         _active: {
-                            backgroundColor: theme.components.button.emphasis.yellow.backgroundColorActive,
+                            backgroundColor: theme.color.interactive.highlight.surface.strong.active,
                         },
                     },
                 },
             },
             {
                 variant: 'emphasis',
-                colorScheme: 'yellow',
+                colorScheme: 'highlight',
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.button.emphasis.yellow.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.highlight.surface.strong.active,
                 },
             },
+            // Solid
+            // Solid Yellow
             {
                 variant: 'solid',
-                colorScheme: 'yellow',
+                colorScheme: 'highlight',
                 styles: {
-                    backgroundColor: theme.components.button.solid.yellow.backgroundColor,
+                    backgroundColor: theme.color.interactive.highlight.surface.strong.default,
                     _web: {
                         _hover: {
-                            backgroundColor: theme.components.button.solid.yellow.backgroundColorHover,
+                            backgroundColor: theme.color.interactive.highlight.surface.strong.hover,
                         },
                         _active: {
-                            backgroundColor: theme.components.button.solid.yellow.backgroundColorActive,
+                            backgroundColor: theme.color.interactive.highlight.surface.strong.active,
                         },
                     },
                 },
             },
             {
                 variant: 'solid',
-                colorScheme: 'yellow',
+                colorScheme: 'highlight',
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.button.solid.yellow.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.highlight.surface.strong.active,
                 },
             },
+            // Solid Green
             {
                 variant: 'solid',
-                colorScheme: 'green',
+                colorScheme: 'affirmative',
                 styles: {
-                    backgroundColor: theme.components.button.solid.green.backgroundColor,
+                    backgroundColor: theme.color.interactive.affirmative.surface.strong.default,
                     _web: {
                         _hover: {
-                            backgroundColor: theme.components.button.solid.green.backgroundColorHover,
+                            backgroundColor: theme.color.interactive.affirmative.surface.strong.hover,
                         },
                         _active: {
-                            backgroundColor: theme.components.button.solid.green.backgroundColorActive,
+                            backgroundColor: theme.color.interactive.affirmative.surface.strong.active,
                         },
                     },
                 },
             },
             {
                 variant: 'solid',
-                colorScheme: 'green',
+                colorScheme: 'affirmative',
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.button.solid.green.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.affirmative.surface.strong.active,
                 },
             },
+            // Solid Red
             {
                 variant: 'solid',
-                colorScheme: 'red',
+                colorScheme: 'destructive',
                 styles: {
-                    backgroundColor: theme.components.button.solid.red.backgroundColor,
+                    backgroundColor: theme.color.interactive.destructive.surface.strong.default,
                     _web: {
                         _hover: {
-                            backgroundColor: theme.components.button.solid.red.backgroundColorHover,
+                            backgroundColor: theme.color.interactive.destructive.surface.strong.hover,
                         },
                         _active: {
-                            backgroundColor: theme.components.button.solid.red.backgroundColorActive,
+                            backgroundColor: theme.color.interactive.destructive.surface.strong.active,
                         },
                     },
                 },
             },
             {
                 variant: 'solid',
-                colorScheme: 'red',
+                colorScheme: 'destructive',
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.button.solid.red.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.destructive.surface.strong.active,
                 },
             },
+            // Outline
+            // Outline Grey
             {
                 variant: 'outline',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 styles: {
-                    borderColor: theme.components.button.outline.grey.borderColor,
+                    borderColor: theme.color.interactive.functional.border.subtle,
                     _web: {
                         _hover: {
-                            backgroundColor: theme.components.button.outline.grey.backgroundColorHover,
+                            backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
                         },
                         _active: {
-                            backgroundColor: theme.components.button.outline.grey.backgroundColorActive,
+                            backgroundColor: theme.color.interactive.functional.surface.subtle.active,
                         },
                     },
                 },
             },
             {
                 variant: 'outline',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.button.outline.grey.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.functional.surface.subtle.active,
                 },
             },
             {
                 variant: 'outline',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 inverted: true,
                 styles: {
-                    borderColor: theme.components.button.outline.grey.inverted.borderColor,
+                    borderColor: theme.color.interactive.functional.border.inverted,
                     _web: {
                         _hover: {
-                            backgroundColor: theme.components.button.outline.grey.inverted.backgroundColorHover,
+                            backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.hover,
                         },
                         _active: {
-                            backgroundColor: theme.components.button.outline.grey.inverted.backgroundColorActive,
+                            backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.active,
                         },
                     },
                 },
             },
             {
                 variant: 'outline',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 inverted: true,
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.button.outline.grey.inverted.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.active,
                 },
             },
+            // Outline Green
             {
                 variant: 'outline',
-                colorScheme: 'grey',
-                inverted: true,
-                active: true,
-                styles: {
-                    backgroundColor: theme.components.button.outline.grey.inverted.backgroundColorActive,
-                },
-            },
-            {
-                variant: 'outline',
-                colorScheme: 'green',
+                colorScheme: 'affirmative',
                 styles: {
-                    borderColor: theme.components.button.outline.green.borderColor,
+                    borderColor: theme.color.interactive.affirmative.border.subtle,
                     _web: {
                         _hover: {
-                            backgroundColor: theme.components.button.outline.green.backgroundColorHover,
+                            backgroundColor: theme.color.interactive.affirmative.surface.subtle.hover,
                         },
                         _active: {
-                            backgroundColor: theme.components.button.outline.green.backgroundColorActive,
+                            backgroundColor: theme.color.interactive.affirmative.surface.subtle.active,
                         },
                     },
                 },
             },
             {
                 variant: 'outline',
-                colorScheme: 'green',
+                colorScheme: 'affirmative',
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.button.outline.green.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.affirmative.surface.subtle.active,
                 },
             },
+            // Outline Red
             {
                 variant: 'outline',
-                colorScheme: 'red',
+                colorScheme: 'destructive',
                 styles: {
-                    borderColor: theme.components.button.outline.red.borderColor,
+                    borderColor: theme.color.interactive.destructive.border.subtle,
                     _web: {
                         _hover: {
-                            backgroundColor: theme.components.button.outline.red.backgroundColorHover,
+                            backgroundColor: theme.color.interactive.destructive.surface.subtle.hover,
                         },
                         _active: {
-                            backgroundColor: theme.components.button.outline.red.backgroundColorActive,
+                            backgroundColor: theme.color.interactive.destructive.surface.subtle.active,
                         },
                     },
                 },
             },
             {
                 variant: 'outline',
-                colorScheme: 'red',
+                colorScheme: 'destructive',
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.button.outline.red.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.destructive.surface.subtle.active,
                 },
             },
+            // Ghost
+            // Ghost Grey
             {
                 variant: 'ghost',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 styles: {
                     _web: {
                         _hover: {
-                            backgroundColor: theme.components.button.ghost.grey.backgroundColorHover,
+                            backgroundColor: theme.color.interactive.functional.surface.subtle.hover,
                         },
                         _active: {
-                            backgroundColor: theme.components.button.ghost.grey.backgroundColorActive,
+                            backgroundColor: theme.color.interactive.functional.surface.subtle.active,
                         },
                     },
                 },
             },
             {
                 variant: 'ghost',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.button.ghost.grey.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.functional.surface.subtle.active,
                 },
             },
             {
                 variant: 'ghost',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 inverted: true,
                 styles: {
                     _web: {
                         _hover: {
-                            backgroundColor: theme.components.button.ghost.grey.inverted.backgroundColorHover,
+                            backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.hover,
                         },
                         _active: {
-                            backgroundColor: theme.components.button.ghost.grey.inverted.backgroundColorActive,
+                            backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.active,
                         },
                     },
                 },
             },
             {
                 variant: 'ghost',
-                colorScheme: 'grey',
+                colorScheme: 'functional',
                 inverted: true,
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.button.ghost.grey.inverted.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.functional.surface.subtle.inverted.active,
                 },
             },
+            // Ghost Green
             {
                 variant: 'ghost',
-                colorScheme: 'green',
+                colorScheme: 'affirmative',
                 styles: {
                     _web: {
                         _hover: {
-                            backgroundColor: theme.components.button.ghost.green.backgroundColorHover,
+                            backgroundColor: theme.color.interactive.affirmative.surface.subtle.hover,
                         },
                         _active: {
-                            backgroundColor: theme.components.button.ghost.green.backgroundColorActive,
+                            backgroundColor: theme.color.interactive.affirmative.surface.subtle.active,
                         },
                     },
                 },
             },
             {
                 variant: 'ghost',
-                colorScheme: 'green',
+                colorScheme: 'affirmative',
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.button.ghost.green.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.affirmative.surface.subtle.active,
                 },
             },
+            // Ghost Red
             {
                 variant: 'ghost',
-                colorScheme: 'red',
+                colorScheme: 'destructive',
                 styles: {
                     _web: {
                         _hover: {
-                            backgroundColor: theme.components.button.ghost.red.backgroundColorHover,
+                            backgroundColor: theme.color.interactive.destructive.surface.subtle.hover,
                         },
                         _active: {
-                            backgroundColor: theme.components.button.ghost.red.backgroundColorActive,
+                            backgroundColor: theme.color.interactive.destructive.surface.subtle.active,
                         },
                     },
                 },
             },
             {
                 variant: 'ghost',
-                colorScheme: 'red',
+                colorScheme: 'destructive',
                 active: true,
                 styles: {
-                    backgroundColor: theme.components.button.ghost.red.backgroundColorActive,
+                    backgroundColor: theme.color.interactive.destructive.surface.subtle.active,
                 },
             },
         ],

package/build/components/IconButton/IconButtonSpinner.js

@@ -6,49 +6,46 @@ import { useIconButtonContext } from './IconButton.context';
 const IconButtonSpinner = (props) => {
     const { color = '', ...rest } = props;
     const { colorScheme, variant, disabled, inverted, size } = useIconButtonContext();
-    const { components, colorMode } = useTheme();
+    const { color: themeColor, colorMode } = useTheme();
     const colorProp = useMemo(() => {
-        if (variant === 'emphasis' && colorScheme === 'yellow' && inverted) {
-            return components.button.emphasis.yellow.foregroundColor;
+        if (variant === 'emphasis' && colorScheme === 'highlight') {
+            return themeColor.interactive.highlight.foreground.strong;
         }
-        if (variant === 'emphasis' && colorScheme === 'yellow') {
-            return components.button.emphasis.yellow.foregroundColor;
+        if (variant === 'solid' && colorScheme === 'highlight') {
+            return themeColor.interactive.highlight.foreground.strong;
         }
-        if (variant === 'solid' && colorScheme === 'yellow' && inverted) {
-            return components.button.solid.yellow.inverted.foregroundColor;
+        if (variant === 'solid' && colorScheme === 'destructive') {
+            return themeColor.interactive.destructive.foreground.strong;
         }
-        if (variant === 'solid' && colorScheme === 'yellow') {
-            return components.button.solid.yellow.foregroundColor;
+        if (variant === 'solid' && colorScheme === 'affirmative') {
+            return themeColor.interactive.affirmative.foreground.strong;
         }
-        if (variant === 'solid' && colorScheme === 'red') {
-            return components.button.solid.red.foregroundColor;
+        if (variant === 'outline' && colorScheme === 'destructive') {
+            return themeColor.interactive.destructive.foreground.subtle;
         }
-        if (variant === 'solid' && colorScheme === 'green') {
-            return components.button.solid.green.foregroundColor;
+        if (variant === 'outline' && colorScheme === 'affirmative') {
+            return themeColor.interactive.affirmative.foreground.subtle;
         }
-        if (variant === 'outline' && colorScheme === 'red') {
-            return components.button.outline.red.foregroundColor;
+        if (variant === 'outline' && colorScheme === 'functional' && inverted) {
+            return themeColor.interactive.functional.foreground.strong;
         }
-        if (variant === 'outline' && colorScheme === 'green') {
-            return components.button.outline.green.foregroundColor;
+        if (variant === 'outline' && colorScheme === 'functional') {
+            return themeColor.interactive.functional.foreground.subtle;
         }
-        if (variant === 'outline' && colorScheme === 'grey' && inverted) {
-            return components.button.outline.grey.inverted.foregroundColor;
+        if (variant === 'ghost' && colorScheme === 'destructive') {
+            return themeColor.interactive.destructive.foreground.subtle;
         }
-        if (variant === 'outline' && colorScheme === 'grey') {
-            return components.button.outline.grey.foregroundColor;
+        if (variant === 'ghost' && colorScheme === 'affirmative') {
+            return themeColor.interactive.affirmative.foreground.subtle;
         }
-        if (variant === 'ghost' && colorScheme === 'red') {
-            return components.button.ghost.red.foregroundColor;
+        if (variant === 'ghost' && colorScheme === 'functional' && inverted) {
+            return themeColor.interactive.functional.foreground.strong;
         }
-        if (variant === 'ghost' && colorScheme === 'green') {
-            return components.button.ghost.green.foregroundColor;
+        if (variant === 'ghost' && colorScheme === 'functional') {
+            return themeColor.interactive.functional.foreground.subtle;
         }
-        if (variant === 'ghost' && colorScheme === 'grey' && inverted) {
-            return components.button.ghost.grey.inverted.foregroundColor;
-        }
-        if (variant === 'ghost' && colorScheme === 'grey') {
-            return components.button.ghost.grey.foregroundColor;
+        if (variant === 'ghost' && colorScheme === 'destructive') {
+            return themeColor.interactive.destructive.foreground.subtle;
         }
         return color;
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/build/components/InlineLink/InlineLinkRoot.js

@@ -21,7 +21,7 @@ const styles = StyleSheet.create(theme => ({
                 borderRadius: theme.borderRadius.xs,
                 outlineStyle: 'solid',
                 outlineWidth: 2,
-                outlineColor: theme.components.focus.border,
+                outlineColor: theme.color.focus.primary,
                 outlineOffset: 1,
                 boxShadow: 'none',
             },
@@ -41,7 +41,7 @@ const styles = StyleSheet.create(theme => ({
                     textDecorationColor: theme.components.inlineLink.inverted.color,
                     _web: {
                         '_focus-visible': {
-                            outlineColor: theme.components.focus.borderInverted,
+                            outlineColor: theme.color.focus.inverted,
                         },
                     },
                 },

package/build/components/Input/Input.d.ts

@@ -8,16 +8,22 @@ export declare const InputComponent: import("@gluestack-ui/input/lib/typescript/
     };
 }, import("..").IconProps & {
     as?: ComponentType;
-}, import("react-native").ViewProps, import("react-native").TextInputProps>;
+}, import("react-native").ViewProps, import("react-native").TextInputProps & {
+    inBottomSheet?: boolean;
+}>;
 export declare const InputSlot: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").ViewProps> & import("react-native").ViewProps & import("@gluestack-ui/input/lib/typescript/types").IInputSlotProps>;
-export declare const InputField: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").TextInputProps> & import("react-native").TextInputProps & import("@gluestack-ui/input/lib/typescript/types").IInputProps>;
+export declare const InputField: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").TextInputProps & {
+    inBottomSheet?: boolean;
+}> & import("react-native").TextInputProps & {
+    inBottomSheet?: boolean;
+} & import("@gluestack-ui/input/lib/typescript/types").IInputProps>;
 export declare const InputIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps & {
     as?: ComponentType;
 }> & import("..").IconProps & {
     as?: ComponentType;
 }>;
 declare const Input: {
-    ({ validationStatus, children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle, onClear, format, loading, clearable, required, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+    ({ validationStatus, children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle, onClear, format, loading, clearable, required, inBottomSheet, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Input;

package/build/components/Input/Input.js

@@ -1,17 +1,17 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
 import { createInput } from '@gluestack-ui/input';
-import InputRoot from './InputRoot';
-import InputSlotComponent from './InputSlot';
-import InputIconComponent from './InputIcon';
-import InputFieldComponent from './InputField';
-import { useFormFieldContext } from '../FormField';
-import { CalendarMediumIcon, CloseSmallIcon, EyeSmallIcon, EyeOffSmallIcon, SearchMediumIcon, } from '@utilitywarehouse/hearth-react-native-icons';
-import { UnstyledIconButton } from '../UnstyledIconButton';
-import { Spinner } from '../Spinner';
+import { useState } from 'react';
+import { CalendarMediumIcon, CloseSmallIcon, EyeOffSmallIcon, EyeSmallIcon, SearchMediumIcon, } from '@utilitywarehouse/hearth-react-native-icons';
+import { Platform } from 'react-native';
 import { useTheme } from '../../hooks';
 import { DetailText } from '../DetailText';
-import { Platform } from 'react-native';
+import { useFormFieldContext } from '../FormField';
+import { Spinner } from '../Spinner';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import InputFieldComponent from './InputField';
+import InputIconComponent from './InputIcon';
+import InputRoot from './InputRoot';
+import InputSlotComponent from './InputSlot';
 export const InputComponent = createInput({
     Icon: InputIconComponent,
     Slot: InputSlotComponent,
@@ -21,13 +21,13 @@ export const InputComponent = createInput({
 export const InputSlot = InputComponent.Slot;
 export const InputField = InputComponent.Input;
 export const InputIcon = InputComponent.Icon;
-const Input = ({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, format, loading, clearable = false, required, ...props }) => {
+const Input = ({ validationStatus = 'initial', children, disabled, focused, readonly, leadingIcon, trailingIcon, type, showPasswordToggle = true, onClear, format, loading, clearable = false, required, inBottomSheet = false, ...props }) => {
     const formFieldContext = useFormFieldContext();
     const { disabled: formFieldDisabled } = formFieldContext;
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const isRequired = formFieldContext?.required ?? required;
     const [fieldType, setFieldType] = useState(type === 'password' ? 'password' : 'text');
-    const { components } = useTheme();
+    const { color } = useTheme();
     const defaultFornat = (() => {
         if (type === 'currency') {
             return '0.00';
@@ -75,7 +75,7 @@ const Input = ({ validationStatus = 'initial', children, disabled, focused, read
     return (_jsx(InputComponent, { ...(children ? props : {}), validationStatus: validationStatusFromContext, isInvalid: validationStatusFromContext === 'invalid', isReadOnly: readonly, isDisabled: formFieldDisabled ?? disabled, isFocused: focused, type: type, isRequired: isRequired, children: children ? (_jsx(_Fragment, { children: children })) : (_jsxs(_Fragment, { children: [!!leadingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: leadingIconComponent }) })), type === 'currency' && (_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: {
                             // todo: fix this
                             ...(Platform.OS === 'ios' && { lineHeight: 46 }),
-                        }, children: "\u00A3" }) })), _jsx(InputField, { type: fieldType, inputMode: getInputMode, ...props, placeholder: getPlaceholder }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: components.icon.color }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!trailingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIconComponent }) }))] })) }));
+                        }, children: "\u00A3" }) })), _jsx(InputField, { type: fieldType, inputMode: getInputMode, inBottomSheet: inBottomSheet, ...props, placeholder: getPlaceholder }), shouldShowClear && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: onClear, icon: CloseSmallIcon }) })), loading && (_jsx(InputSlot, { children: _jsx(Spinner, { size: "xs", color: color.icon.primary }) })), shouldShowPasswordToggle && (_jsx(InputSlot, { children: _jsx(UnstyledIconButton, { onPress: toggleFieldType, icon: fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon }) })), !!trailingIconComponent && (_jsx(InputSlot, { children: _jsx(InputIcon, { as: trailingIconComponent }) }))] })) }));
 };
 Input.displayName = 'Input';
 export default Input;

package/build/components/Input/Input.props.d.ts

@@ -24,6 +24,7 @@ export interface InputBaseProps {
     readonly?: boolean;
     focused?: boolean;
     placeholder?: string;
+    inBottomSheet?: boolean;
 }
 export interface InputWithChildrenProps extends InputBaseProps, ViewProps {
     children: ViewProps['children'];

package/build/components/Input/InputField.d.ts

@@ -1,6 +1,8 @@
 import { TextInputProps } from 'react-native';
 declare const InputField: {
-    ({ style, onFocus, onBlur, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ style, onFocus, onBlur, inBottomSheet, ...props }: TextInputProps & {
+        inBottomSheet?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default InputField;