@utilitywarehouse/hearth-react-native 0.35.8 → 0.36.0

package/build/components/Radio/Radio.d.ts

@@ -4,17 +4,17 @@ declare const RadioGroup: import("react").ForwardRefExoticComponent<import("reac
 }> & import("./RadioGroup.props").default & {
     isCard?: boolean;
 } & import("@gluestack-ui/radio/lib/typescript/types").IRadioGroupProps>;
-declare const RadioIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native/types").ViewProps> & import("react-native/types").ViewProps>;
+declare const RadioIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("react-native").ViewProps> & import("react-native").ViewProps>;
 declare const RadioIcon: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("..").IconProps> & import("..").IconProps & {
     forceMount?: boolean;
 }>;
 declare const RadioLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("../Label/Label.props").default> & Omit<import("../Label/Label.props").default, "ref">>;
 declare const Radio: {
-    ({ children, label, disabled, helperIcon, helperText, badge, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, label, disabled, helperIcon, helperText, badge, invalidText, validText, validationStatus: validation, showValidationIcon, type, image, ...props }: RadioProps): import("react").JSX.Element;
     displayName: string;
 };
 declare const RadioTile: {
-    ({ type, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+    ({ type, ...props }: RadioProps): import("react").JSX.Element;
     displayName: string;
 };
 export { Radio, RadioGroup, RadioIcon, RadioIndicator, RadioLabel, RadioTile };

package/build/components/Radio/RadioGroup.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import RadioGroupProps from './RadioGroup.props';
 declare const RadioGroup: {
-    ({ children, disabled, readonly, onChange, onValueChange, validationStatus, label, labelVariant, helperText, invalidText, validText, showValidationIcon, helperIcon, type, direction, gap, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, disabled, readonly, onChange, onValueChange, validationStatus, label, labelVariant, helperText, invalidText, validText, showValidationIcon, helperIcon, type, direction, gap, ...props }: RadioGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default RadioGroup;

package/build/components/Radio/RadioGroupRoot.d.ts

@@ -2,7 +2,7 @@ import RadioGroupProps from './RadioGroup.props';
 declare const RadioGroupRoot: {
     ({ children, style, isCard, ...props }: RadioGroupProps & {
         isCard?: boolean;
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default RadioGroupRoot;

package/build/components/Radio/RadioGroupTextContent.d.ts

@@ -1,6 +1,6 @@
 import FlexProps from '../Flex/Flex.props';
 declare const RadioGroupTextContent: {
-    ({ children, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: FlexProps): import("react").JSX.Element;
     displayName: string;
 };
 export default RadioGroupTextContent;

package/build/components/Radio/RadioIcon.d.ts

@@ -1,6 +1,6 @@
 import IconProps from '../Icon/Icon.props';
 declare const RadioIcon: {
-    ({ style, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+    ({ style, ...props }: IconProps): import("react").JSX.Element;
     displayName: string;
 };
 export default RadioIcon;

package/build/components/Radio/RadioIcon.js

@@ -6,10 +6,8 @@ import { CircleIcon } from '../Icons';
 const RadioIcon = ({ style, ...props }) => {
     return (_jsx(Icon, { as: CircleIcon, ...props, style: Platform.OS === 'web'
             ? {
-                // @ts-expect-error - style prop type issue
                 ...styles.container,
-                // @ts-expect-error - style prop type issue
-                ...props.style,
+                ...style,
             }
             : [styles.container, style] }));
 };

package/build/components/Radio/RadioImage.d.ts

@@ -1,7 +1,7 @@
 import { ImageProps } from 'react-native';
 import { ThemedImageProps } from '../ThemedImage';
 declare const RadioImage: {
-    ({ ...props }: ImageProps | ThemedImageProps): import("react/jsx-runtime").JSX.Element;
+    ({ ...props }: ImageProps | ThemedImageProps): import("react").JSX.Element;
     displayName: string;
 };
 export default RadioImage;

package/build/components/Radio/RadioIndicator.d.ts

@@ -1,6 +1,6 @@
 import { ViewProps } from 'react-native';
 declare const RadioIndicator: {
-    (props: ViewProps): import("react/jsx-runtime").JSX.Element;
+    (props: ViewProps): import("react").JSX.Element;
     displayName: string;
 };
 export default RadioIndicator;

package/build/components/Radio/RadioLabel.d.ts

@@ -1,6 +1,6 @@
 import LabelProps from '../Label/Label.props';
 declare const RadioLabel: {
-    ({ children, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: LabelProps): import("react").JSX.Element;
     displayName: string;
 };
 export default RadioLabel;

package/build/components/Radio/RadioRoot.d.ts

@@ -6,7 +6,7 @@ declare const RadioRoot: {
             checked?: boolean;
             active?: boolean;
         };
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default RadioRoot;

package/build/components/Radio/RadioTextContent.d.ts

@@ -1,6 +1,6 @@
 import FlexProps from '../Flex/Flex.props';
 declare const RadioTextContent: {
-    ({ children, style, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: FlexProps): import("react").JSX.Element;
     displayName: string;
 };
 export default RadioTextContent;

package/build/components/Radio/RadioTileRoot.d.ts

@@ -2,7 +2,7 @@ import { ViewProps } from 'react-native';
 declare const RadioTileRoot: {
     ({ children }: {
         children: ViewProps["children"];
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default RadioTileRoot;

package/build/components/RadioCard/RadioCard.d.ts

@@ -6,11 +6,11 @@ declare const RadioCardIcon: import("react").ForwardRefExoticComponent<import("r
 }>;
 declare const RadioCardLabel: import("react").ForwardRefExoticComponent<import("react").RefAttributes<import("../Label/Label.props").default> & Omit<import("../Label/Label.props").default, "ref">>;
 declare const RadioCardGroup: {
-    ({ onChange, onValueChange, disabled, ...props }: RadioCardGroupProps): import("react/jsx-runtime").JSX.Element;
+    ({ onChange, onValueChange, disabled, ...props }: RadioCardGroupProps): import("react").JSX.Element;
     displayName: string;
 };
 declare const RadioCard: {
-    ({ children, label, labelVariant, contentStyle, ...props }: RadioCardProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, label, labelVariant, contentStyle, ...props }: RadioCardProps): import("react").JSX.Element;
     displayName: string;
 };
 export { RadioCard, RadioCardGroup, RadioCardIcon, RadioCardIndicator, RadioCardLabel };

package/build/components/RadioCard/RadioCardGroup.d.ts

@@ -2,7 +2,7 @@ import RadioCardGroupProps from './RadioCardGroup.props';
 declare const RadioCardGroup: {
     ({ children, gap, style, flexDirection, flexWrap, justifyContent, alignItems, columns, disabled, isDisabled, ...props }: RadioCardGroupProps & {
         isDisabled?: boolean;
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default RadioCardGroup;

package/build/components/RadioCard/RadioCardIcon.d.ts

@@ -1,6 +1,6 @@
 import IconProps from '../Icon/Icon.props';
 declare const RadioCardIcon: {
-    ({ style, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+    ({ style, ...props }: IconProps): import("react").JSX.Element;
     displayName: string;
 };
 export default RadioCardIcon;

package/build/components/RadioCard/RadioCardIndicator.d.ts

@@ -1,6 +1,6 @@
 import { ViewProps } from 'react-native';
 declare const RadioCardIndicator: {
-    (props: ViewProps): import("react/jsx-runtime").JSX.Element;
+    (props: ViewProps): import("react").JSX.Element;
     displayName: string;
 };
 export default RadioCardIndicator;

package/build/components/RadioCard/RadioCardIndicator.js

@@ -30,9 +30,6 @@ const styles = StyleSheet.create(theme => ({
             _hover: {
                 outlineColor: theme.components.radio.outlineColorHover,
             },
-            // '_focus-within': {
-            //   ...theme.helpers.focusVisible,
-            // },
             _active: {
                 outlineColor: theme.components.radio.outlineColorActive,
             },

package/build/components/RadioCard/RadioCardLabel.d.ts

@@ -1,6 +1,6 @@
 import LabelProps from '../Label/Label.props';
 declare const RadioCardLabel: {
-    ({ children, style, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: LabelProps): import("react").JSX.Element;
     displayName: string;
 };
 export default RadioCardLabel;

package/build/components/RadioCard/RadioCardRoot.d.ts

@@ -6,7 +6,7 @@ declare const RadioCardRoot: {
             checked?: boolean;
             active?: boolean;
         };
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default RadioCardRoot;

package/build/components/RadioCard/RadioCardRoot.js

@@ -59,9 +59,9 @@ const styles = StyleSheet.create(theme => ({
             },
         },
         _web: {
-        // '_focus-visible': {
-        //   ...theme.helpers.focusVisible,
-        // },
+            '_focus-visible': {
+                ...theme.helpers.focusVisible,
+            },
         },
     },
 }));

package/build/components/Rating/Rating.d.ts

@@ -1,6 +1,6 @@
 import type RatingProps from './Rating.props';
 declare const Rating: {
-    ({ variant, value, defaultValue, onChange, onValueChange, disabled, labels, rangeLabels, hideLabel, style, accessibilityLabel, ...props }: RatingProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, value, defaultValue, onChange, onValueChange, disabled, labels, rangeLabels, hideLabel, style, accessibilityLabel, ...props }: RatingProps): import("react").JSX.Element;
     displayName: string;
 };
 export default Rating;

package/build/components/Rating/RatingStarEmpty.d.ts

@@ -2,5 +2,5 @@ type RatingStarProps = {
     width?: number;
     height?: number;
 };
-declare const RatingStarEmpty: ({ width, height }: RatingStarProps) => import("react/jsx-runtime").JSX.Element;
+declare const RatingStarEmpty: ({ width, height }: RatingStarProps) => import("react").JSX.Element;
 export default RatingStarEmpty;

package/build/components/Rating/RatingStarFilled.d.ts

@@ -2,5 +2,5 @@ type RatingStarProps = {
     width?: number;
     height?: number;
 };
-declare const RatingStarFilled: ({ width, height }: RatingStarProps) => import("react/jsx-runtime").JSX.Element;
+declare const RatingStarFilled: ({ width, height }: RatingStarProps) => import("react").JSX.Element;
 export default RatingStarFilled;

package/build/components/Roundel/Roundel.d.ts

@@ -1,6 +1,6 @@
 import type RoundelProps from './Roundel.props';
 declare const Roundel: {
-    ({ variant, style, ...props }: RoundelProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, style, ...props }: RoundelProps): import("react").JSX.Element;
     displayName: string;
 };
 export default Roundel;

package/build/components/SectionHeader/SectionHeader.d.ts

@@ -1,6 +1,6 @@
 import SectionHeaderProps from './SectionHeader.props';
 declare const SectionHeader: {
-    ({ heading, helperText, children, style, trailingContent, badge, invalidText, ...props }: SectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+    ({ heading, helperText, children, style, trailingContent, badge, invalidText, ...props }: SectionHeaderProps): import("react").JSX.Element;
     displayName: string;
 };
 export default SectionHeader;

package/build/components/SectionHeader/SectionHeaderHeading.d.ts

@@ -1,6 +1,6 @@
 import HeadingProps from '../Heading/Heading.props';
 declare const SectionHeaderHeading: {
-    ({ children, ...props }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: HeadingProps): import("react").JSX.Element;
     displayName: string;
 };
 export default SectionHeaderHeading;

package/build/components/SectionHeader/SectionHeaderHelperText.d.ts

@@ -1,6 +1,6 @@
 import TextProps from '../BodyText/BodyText.props';
 declare const SectionHeaderHelperText: {
-    ({ children, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: TextProps): import("react").JSX.Element;
     displayName: string;
 };
 export default SectionHeaderHelperText;

package/build/components/SectionHeader/SectionHeaderTextContent.d.ts

@@ -1,6 +1,6 @@
 import { type ViewProps } from 'react-native';
 declare const SectionHeaderTextContent: {
-    ({ children, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: ViewProps): import("react").JSX.Element;
     displayName: string;
 };
 export default SectionHeaderTextContent;

package/build/components/SectionHeader/SectionHeaderTrailingContent.d.ts

@@ -1,6 +1,6 @@
 import { type ViewProps } from 'react-native';
 declare const SectionHeaderTrailingContent: {
-    ({ children, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: ViewProps): import("react").JSX.Element;
     displayName: string;
 };
 export default SectionHeaderTrailingContent;

package/build/components/SegmentedControl/SegmentedControl.d.ts

@@ -1,6 +1,6 @@
 import type SegmentedControlProps from './SegmentedControl.props';
 declare const SegmentedControl: {
-    ({ value: controlledValue, defaultValue, onValueChange, size, disabled, children, style, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+    ({ value: controlledValue, defaultValue, onValueChange, size, disabled, children, style, ...props }: SegmentedControlProps): import("react").JSX.Element;
     displayName: string;
 };
 export default SegmentedControl;

package/build/components/SegmentedControl/SegmentedControlOption.d.ts

@@ -1,10 +1,10 @@
 import type SegmentedControlOptionProps from './SegmentedControlOption.props';
-declare const SegmentedControlOption: import("react").ForwardRefExoticComponent<SegmentedControlOptionProps & {
+declare const SegmentedControlOption: import("react").ForwardRefExoticComponent<Omit<SegmentedControlOptionProps & {
     states?: {
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native").PressableProps, "children"> & {
+} & Omit<any, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {
@@ -14,5 +14,5 @@ declare const SegmentedControlOption: import("react").ForwardRefExoticComponent<
         focusVisible?: boolean | undefined;
         disabled?: boolean | undefined;
     }) => import("react").ReactNode);
-} & import("react").RefAttributes<unknown>>;
+}, "ref"> & import("react").RefAttributes<unknown>>;
 export default SegmentedControlOption;

package/build/components/SegmentedControl/SegmentedControlOption.js

@@ -51,6 +51,9 @@ const styles = StyleSheet.create(theme => ({
         alignItems: 'center',
         backgroundColor: 'transparent',
         zIndex: 1,
+        _web: {
+            '_focus-visible': theme.helpers.focusVisible,
+        },
         variants: {
             size: {
                 sm: {

package/build/components/Select/Select.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import SelectProps from './Select.props';
 declare const Select: {
-    ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, helperText, helperIcon, invalidText, validText, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, testID, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, helperText, helperIcon, invalidText, validText, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, testID, ...rest }: SelectProps): React.JSX.Element;
     displayName: string;
 };
 export default Select;

package/build/components/Select/SelectOption.d.ts

@@ -1,6 +1,6 @@
 import { SelectOptionProps } from './Select.props';
 declare const SelectOption: {
-    ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, testID, }: SelectOptionProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, testID, }: SelectOptionProps): import("react").JSX.Element;
     displayName: string;
 };
 export default SelectOption;

package/build/components/Skeleton/Skeleton.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import type SkeletonProps from './Skeleton.props';
 declare const Skeleton: {
-    ({ width, height, backgroundColor: bg, borderRadius, style, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+    ({ width, height, backgroundColor: bg, borderRadius, style, ...props }: SkeletonProps): React.JSX.Element;
     displayName: string;
 };
 export default Skeleton;

package/build/components/StepperInput/StepperButton.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react';
 import type { PressableProps } from 'react-native';
-declare const StepperButton: import("react").ForwardRefExoticComponent<{
+declare const StepperButton: import("react").ForwardRefExoticComponent<Omit<{
     icon: ComponentType;
     disabled?: boolean;
 } & Omit<PressableProps, "children"> & {
@@ -8,7 +8,7 @@ declare const StepperButton: import("react").ForwardRefExoticComponent<{
         active?: boolean;
         disabled?: boolean;
     };
-} & {
+} & Omit<any, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {
@@ -18,5 +18,5 @@ declare const StepperButton: import("react").ForwardRefExoticComponent<{
         focusVisible?: boolean | undefined;
         disabled?: boolean | undefined;
     }) => import("react").ReactNode);
-} & import("react").RefAttributes<unknown>>;
+}, "ref"> & import("react").RefAttributes<unknown>>;
 export default StepperButton;

package/build/components/StepperInput/StepperInput.d.ts

@@ -1,6 +1,6 @@
 import StepperInputProps from './StepperInput.props';
 declare const StepperInput: {
-    ({ value, defaultValue, onChangeText, onChangeValue, min, max, step, focusInputOnStepPress, validationStatus, disabled, readonly, focused, inBottomSheet, required, label, labelVariant, helperText, helperIcon, validText, invalidText, style, decrementAccessibilityLabel, incrementAccessibilityLabel, onFocus, onBlur, ref, ...props }: StepperInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ value, defaultValue, onChangeText, onChangeValue, min, max, step, focusInputOnStepPress, validationStatus, disabled, readonly, focused, inBottomSheet, required, label, labelVariant, helperText, helperIcon, validText, invalidText, style, decrementAccessibilityLabel, incrementAccessibilityLabel, onFocus, onBlur, ref, ...props }: StepperInputProps): import("react").JSX.Element;
     displayName: string;
 };
 export default StepperInput;

package/build/components/Switch/Switch.d.ts

@@ -1,3 +1,3 @@
 import SwitchProps from './Switch.props';
-declare const CustomSwitch: ({ value, onValueChange, disabled, size, ...accessibilityProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+declare const CustomSwitch: ({ value, onValueChange, disabled, size, ...accessibilityProps }: SwitchProps) => import("react").JSX.Element;
 export default CustomSwitch;

package/build/components/Switch/Switch.js

@@ -68,7 +68,7 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
     const onPressOut = () => {
         scale.value = withSpring(1);
     };
-    return (_jsx(Pressable, { onPress: toggleSwitch, onPressIn: onPressIn, onPressOut: onPressOut, disabled: disabled, "aria-checked": value, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, accessibilityLabel: accessibilityProps.accessibilityLabel, accessibilityHint: accessibilityProps.accessibilityHint, ...accessibilityProps, children: _jsx(Animated.View, { style: [styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle], children: _jsxs(Animated.View, { style: [styles.thumb, animatedThumbStyle], children: [_jsx(Animated.View, { style: [styles.iconWrap, animatedTickStyle], children: (() => {
+    return (_jsx(Pressable, { onPress: toggleSwitch, onPressIn: onPressIn, onPressOut: onPressOut, disabled: disabled, "aria-checked": value, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, accessibilityLabel: accessibilityProps.accessibilityLabel, accessibilityHint: accessibilityProps.accessibilityHint, style: styles.pressable, ...accessibilityProps, children: _jsx(Animated.View, { style: [styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle], children: _jsxs(Animated.View, { style: [styles.thumb, animatedThumbStyle], children: [_jsx(Animated.View, { style: [styles.iconWrap, animatedTickStyle], children: (() => {
                             const IconAny = Icon;
                             return _jsx(IconAny, { as: TickSmallIcon, style: styles.icon });
                         })() }), _jsx(Animated.View, { style: [styles.iconWrap, animatedCrossStyle], children: (() => {
@@ -77,6 +77,22 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
                         })() })] }) }) }));
 };
 const styles = StyleSheet.create(theme => ({
+    pressable: {
+        position: 'relative',
+        variants: {
+            disabled: {
+                false: {
+                    _web: {
+                        '_focus-visible': { outline: 'none' },
+                        '_focus-visible > div:nth-child(1)': {
+                            ...theme.helpers.focusVisible,
+                        },
+                    },
+                },
+                true: {},
+            },
+        },
+    },
     switch: {
         justifyContent: 'center',
         variants: {
@@ -97,9 +113,19 @@ const styles = StyleSheet.create(theme => ({
             value: {
                 true: {
                     backgroundColor: theme.color.interactive.brand.surface.strong.default,
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.brand.surface.strong.hover,
+                        },
+                    },
                 },
                 false: {
                     backgroundColor: theme.color.interactive.functional.surface.strong.default,
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.functional.surface.strong.hover,
+                        },
+                    },
                 },
             },
             disabled: {

package/build/components/Switch/Switch.web.d.ts

@@ -1,3 +1,3 @@
 import SwitchProps from './Switch.props';
-declare const CustomSwitch: ({ value, onValueChange, disabled, size, ...accessibilityProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+declare const CustomSwitch: ({ value, onValueChange, disabled, size, ...accessibilityProps }: SwitchProps) => import("react").JSX.Element;
 export default CustomSwitch;

package/build/components/Switch/Switch.web.js

@@ -67,7 +67,7 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
     const onPressOut = () => {
         scale.value = withSpring(1);
     };
-    return (_jsx(Pressable, { onPress: toggleSwitch, onPressIn: onPressIn, onPressOut: onPressOut, disabled: disabled, "aria-checked": value, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, accessibilityLabel: accessibilityProps.accessibilityLabel, accessibilityHint: accessibilityProps.accessibilityHint, ...accessibilityProps, children: _jsx(AnimatedView, { style: [styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle], children: _jsxs(AnimatedView, { style: [styles.thumb, animatedThumbStyle], children: [_jsx(AnimatedView, { style: [styles.iconWrap, animatedTickStyle], children: (() => {
+    return (_jsx(Pressable, { onPress: toggleSwitch, onPressIn: onPressIn, onPressOut: onPressOut, disabled: disabled, "aria-checked": value, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, accessibilityLabel: accessibilityProps.accessibilityLabel, accessibilityHint: accessibilityProps.accessibilityHint, style: styles.pressable, ...accessibilityProps, children: _jsx(AnimatedView, { style: [styles.switch, animatedSwitchBackgroundStyle, animatedSwitchStyle], children: _jsxs(AnimatedView, { style: [styles.thumb, animatedThumbStyle], children: [_jsx(AnimatedView, { style: [styles.iconWrap, animatedTickStyle], children: (() => {
                             const IconAny = Icon;
                             return _jsx(IconAny, { as: TickSmallIcon, style: styles.icon });
                         })() }), _jsx(AnimatedView, { style: [styles.iconWrap, animatedCrossStyle], children: (() => {
@@ -76,6 +76,21 @@ const CustomSwitch = ({ value = false, onValueChange, disabled = false, size = '
                         })() })] }) }) }));
 };
 const styles = StyleSheet.create(theme => ({
+    pressable: {
+        position: 'relative',
+        variants: {
+            disabled: {
+                false: {
+                    _web: {
+                        '_focus-visible': { outline: 'none' },
+                        '_focus-visible > div:nth-child(1)': {
+                            ...theme.helpers.focusVisible,
+                        },
+                    },
+                },
+            },
+        },
+    },
     switch: {
         justifyContent: 'center',
         variants: {
@@ -96,9 +111,19 @@ const styles = StyleSheet.create(theme => ({
             value: {
                 true: {
                     backgroundColor: theme.color.interactive.brand.surface.strong.default,
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.brand.surface.strong.hover,
+                        },
+                    },
                 },
                 false: {
                     backgroundColor: theme.color.interactive.functional.surface.strong.default,
+                    _web: {
+                        _hover: {
+                            backgroundColor: theme.color.interactive.functional.surface.strong.hover,
+                        },
+                    },
                 },
             },
             disabled: {

package/build/components/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import type { TableProps } from './Table.props';
 declare const Table: {
-    ({ children, columnWidths, container, pagination, style, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, columnWidths, container, pagination, style, ...props }: TableProps): import("react").JSX.Element;
     displayName: string;
 };
 export default Table;

package/build/components/Table/TableBody.d.ts

@@ -1,6 +1,6 @@
 import { TableBodyProps } from './Table.props';
 declare const TableBody: {
-    ({ children, ...props }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: TableBodyProps): import("react").JSX.Element;
     displayName: string;
 };
 export default TableBody;

package/build/components/Table/TableCell.d.ts

@@ -4,7 +4,7 @@ declare const TableCell: {
         columnIndex?: number;
         isLast?: boolean;
         isLastRow?: boolean;
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default TableCell;

package/build/components/Table/TableHeader.d.ts

@@ -1,6 +1,6 @@
 import { TableHeaderProps } from './Table.props';
 declare const TableHeader: {
-    ({ children, color, style, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, color, style, ...props }: TableHeaderProps): import("react").JSX.Element;
     displayName: string;
 };
 export default TableHeader;

package/build/components/Table/TableHeaderCell.d.ts

@@ -4,7 +4,7 @@ declare const TableHeaderCell: {
         columnIndex?: number;
         isLast?: boolean;
         isLastRow?: boolean;
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default TableHeaderCell;

package/build/components/Table/TablePagination.d.ts

@@ -1,6 +1,6 @@
 import type { TablePaginationProps } from './Table.props';
 declare const TablePagination: {
-    (props: TablePaginationProps): import("react/jsx-runtime").JSX.Element;
+    (props: TablePaginationProps): import("react").JSX.Element;
     displayName: string;
 };
 export default TablePagination;

package/build/components/Table/TableRow.d.ts

@@ -2,7 +2,7 @@ import { TableRowProps } from './Table.props';
 declare const TableRow: {
     ({ children, ...props }: TableRowProps & {
         isLastRow?: boolean;
-    }): import("react/jsx-runtime").JSX.Element;
+    }): import("react").JSX.Element;
     displayName: string;
 };
 export default TableRow;

package/build/components/Tabs/Tab.d.ts

@@ -1,10 +1,10 @@
 import type TabProps from './Tab.props';
-declare const PressableTab: import("react").ForwardRefExoticComponent<TabProps & {
+declare const PressableTab: import("react").ForwardRefExoticComponent<Omit<TabProps & {
     states?: {
         active?: boolean;
         disabled?: boolean;
     };
-} & Omit<import("react-native").PressableProps, "children"> & {
+} & Omit<any, "children"> & {
     tabIndex?: 0 | -1 | undefined;
 } & {
     children?: import("react").ReactNode | (({ hovered, pressed, focused, focusVisible, disabled, }: {
@@ -14,5 +14,5 @@ declare const PressableTab: import("react").ForwardRefExoticComponent<TabProps &
         focusVisible?: boolean | undefined;
         disabled?: boolean | undefined;
     }) => import("react").ReactNode);
-} & import("react").RefAttributes<unknown>>;
+}, "ref"> & import("react").RefAttributes<unknown>>;
 export default PressableTab;