@onehat/ui 0.3.260 → 0.3.262

package/src/Components/Hoc/withAlert.js

@@ -1,13 +1,13 @@
-import React, { useState, useRef, useEffect, } from 'react';
+import React, { useState, useRef, } from 'react';
 import {
 	AlertDialog,
 	Button,
-	Column,
+	ButtonText,
+	VStack,
 	Icon,
-	Modal,
-	Row,
+	HStack,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	ALERT_MODE_OK,
 	ALERT_MODE_YES,
@@ -129,7 +129,9 @@ export default function withAlert(WrappedComponent) {
 								colorScheme="coolGray"
 								variant="ghost" // or unstyled
 								ref={cancelRef}
-							>Cancel</Button>);
+							>
+								<ButtonText>Cancel</ButtonText>
+							</Button>);
 		}
 		switch(mode) {
 			case ALERT_MODE_OK:
@@ -139,7 +141,9 @@ export default function withAlert(WrappedComponent) {
 								ref={autoFocusRef}
 								onPress={onOk}
 								color="#fff"
-							>OK</Button>);
+							>
+								<ButtonText>OK</ButtonText>
+							</Button>);
 				break;
 			case ALERT_MODE_YES:
 				buttons.push(<Button
@@ -148,7 +152,9 @@ export default function withAlert(WrappedComponent) {
 								onPress={onYes}
 								color="#fff"
 								colorScheme="danger"
-							>Yes</Button>);
+							>
+								<ButtonText>Yes</ButtonText>
+							</Button>);
 				break;
 			case ALERT_MODE_YES_NO:
 				// TODO: need to create a new colorScheme so this can be black with blank background
@@ -159,14 +165,18 @@ export default function withAlert(WrappedComponent) {
 								variant="ghost"
 								// colorScheme="neutral"
 								mr={2}
-							>No</Button>);
+							>
+								<ButtonText>No</ButtonText>
+							</Button>);
 				buttons.push(<Button
 								key="yesBtn"
 								ref={autoFocusRef}
 								onPress={onYes}
 								color="#fff"
 								colorScheme="danger"
-							>Yes</Button>);
+							>
+								<ButtonText>Yes</ButtonText>
+							</Button>);
 				break;
 			case ALERT_MODE_CUSTOM:
 				_.each(customButtons, (button) => {
@@ -194,12 +204,12 @@ export default function withAlert(WrappedComponent) {
 							{canClose && <AlertDialog.CloseButton />}
 							<AlertDialog.Header>{title}</AlertDialog.Header>
 							<AlertDialog.Body>
-								<Row alignItems="center">
-									<Column w="40px" p={0} mr={5}>
+								<HStack alignItems="center">
+									<VStack w="40px" p={0} mr={5}>
 										<Icon as={mode === ALERT_MODE_INFO ? CircleInfo : TriangleExclamation} size={10} color={mode === ALERT_MODE_INFO ? '#000' : '#f00'} />
-									</Column>
+									</VStack>
 									<Text flex={1}>{message}</Text>
-								</Row>
+								</HStack>
 							</AlertDialog.Body>
 							<AlertDialog.Footer>
 								{buttons}

package/src/Components/Hoc/withBlank.js

@@ -1,5 +1,3 @@
-import {
-} from 'native-base';
 import _ from 'lodash';
 
 export default function withBlank(WrappedComponent) {

package/src/Components/Hoc/withContextMenu.js

@@ -1,15 +1,10 @@
 import React, { useState, useEffect, } from 'react';
 import {
-	Box,
-	Column,
-	FlatList,
-	Icon,
+	VStack,
 	Modal,
 	Pressable,
-	Row,
-	Spacer,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	UI_MODE_WEB,
 	CURRENT_MODE,
@@ -166,9 +161,9 @@ export default function withContextMenu(WrappedComponent) {
 						isOpen={isContextMenuShown && !disableContextMenu}
 						onClose={() => setIsContextMenuShown(false)}
 					>
-						<Column bg="#fff" w={CONTEXT_MENU_WIDTH} position="absolute" top={contextMenuY} left={contextMenuX} onLayout={onLayout}>
+						<VStack bg="#fff" w={CONTEXT_MENU_WIDTH} position="absolute" top={contextMenuY} left={contextMenuX} onLayout={onLayout}>
 							{contextMenuItemComponents}
-						</Column>
+						</VStack>
 					</Modal>
 				</>;
 	};

package/src/Components/Hoc/withEditor.js

@@ -1,7 +1,8 @@
 import { useEffect, useState, useRef, } from 'react';
 import {
 	Button,
-} from 'native-base';
+	ButtonText,
+} from '@gluestack-ui/themed';
 import {
 	EDITOR_MODE__VIEW,
 	EDITOR_MODE__ADD,

package/src/Components/Hoc/withEvents.js

@@ -1,5 +1,3 @@
-import {
-} from 'native-base';
 import _ from 'lodash';
 
 export default function withEvents(WrappedComponent) {

package/src/Components/Hoc/withFilters.js

@@ -1,11 +1,11 @@
 import { useState, useEffect, useRef, } from 'react';
 import {
-	Column,
+	VStack,
 	Modal,
-	Row,
+	HStack,
 	ScrollView,
 	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	EDITOR_TYPE__PLAIN,
 } from '../../Constants/Editor.js';
@@ -318,10 +318,10 @@ export default function withFilters(WrappedComponent) {
 												{...elementProps}
 											/>;
 						if (showLabels && field !== 'q') {
-							filterElement = <Row key={'label-' + ix} alignItems="center" h="100%">
+							filterElement = <HStack key={'label-' + ix} alignItems="center" h="100%">
 												<Text ml={2} mr={1} fontSize={UiGlobals.styles.FILTER_LABEL_FONTSIZE}>{title}</Text>
 												{filterElement}
-											</Row>;
+											</HStack>;
 						}
 						filterElements.push(filterElement);
 					});
@@ -427,13 +427,13 @@ export default function withFilters(WrappedComponent) {
 				renderedFilters = renderFilters(),
 				hasFilters = !!renderedFilters.length;
 			topToolbar = <Toolbar>
-							<Row flex={1} alignItems="center">
+							<HStack flex={1} alignItems="center">
 								<ScrollView horizontal={true} contentContainerStyle={{ alignItems: 'center' }}>
 									<Text fontStyle="italic" pr={2} userSelect="none">Filters:{hasFilters ? '' : ' None'}</Text>
 									{renderedFilters}
 								</ScrollView>
-							</Row>
-							<Row flex={hasFilters ? null : 1} alignItems="center" alignSelf="flex-end">
+							</HStack>
+							<HStack flex={hasFilters ? null : 1} alignItems="center" alignSelf="flex-end">
 								{showClearFiltersButton && <IconButton
 									key="clearFiltersBtn"
 									_icon={{
@@ -458,7 +458,7 @@ export default function withFilters(WrappedComponent) {
 									}}
 									tooltip="Swap filters"
 								/>}
-							</Row>
+							</HStack>
 						</Toolbar>;
 
 			if (isFilterSelectorShown) { // this is always false when isUsingCustomFilters
@@ -541,7 +541,7 @@ export default function withFilters(WrappedComponent) {
 							isOpen={true}
 							onClose={() => setIsFilterSelectorShown(false)}
 						>
-							<Column bg="#fff" w={500}>
+							<VStack bg="#fff" w={500}>
 								<FormPanel
 									title="Filter Selector"
 									instructions="Please select which fields to filter by."
@@ -590,7 +590,7 @@ export default function withFilters(WrappedComponent) {
 										setModalSlots(slots);
 									}}
 								/>
-							</Column>
+							</VStack>
 						</Modal>;
 			}
 

package/src/Components/Hoc/withInlineEditor.js

@@ -1,11 +1,8 @@
-import React, { useState, useEffect, useRef, } from 'react';
+import React, { useState, useRef, } from 'react';
 import {
 	Box,
-	Column,
-	Modal,
-	Row,
-	Text,
-} from 'native-base';
+	VStack,
+} from '@gluestack-ui/themed';
 import {
 	EDITOR_TYPE__INLINE,
 } from '../../Constants/Editor.js';
@@ -136,7 +133,7 @@ export default function withInlineEditor(WrappedComponent, skipWrappers = false)
 														}
 													}}
 												></Box>}
-								<Column
+								<VStack
 									ref={inlineEditorRef}
 									position="absolute"
 									zIndex={10}
@@ -168,7 +165,7 @@ export default function withInlineEditor(WrappedComponent, skipWrappers = false)
 											py={1}
 											px={0}
 										/>}
-								</Column>
+								</VStack>
 							</>;
 		}
 	

package/src/Components/Hoc/withPdfButton.js

@@ -1,9 +1,8 @@
 import { useState, } from 'react';
 import {
-	Column,
-	Button,
+	VStack,
 	Modal,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import * as yup from 'yup'; // https://github.com/jquense/yup#string
 import Inflector from 'inflector-js';
 import qs from 'qs';
@@ -180,7 +179,7 @@ export default function withPdfButton(WrappedComponent) {
 						isOpen={true}
 						onClose={() => setIsModalShown(false)}
 					>
-						<Column bg="#fff" w={width} h={height}>
+						<VStack bg="#fff" w={width} h={height}>
 							<FormPanel
 								title="PDF Fields to Show"
 								instructions="Please select which fields to show in the PDF."
@@ -201,7 +200,7 @@ export default function withPdfButton(WrappedComponent) {
 								submitBtnLabel="View PDF"
 								useAdditionalEditButtons={false}
 							/>
-						</Column>
+						</VStack>
 					</Modal>;
 		}
 		return <>

package/src/Components/Hoc/withPresetButtons.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, } from 'react';
 import {
 	Modal,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import Clipboard from '../Icons/Clipboard.js';
 import Duplicate from '../Icons/Duplicate.js';
 import Edit from '../Icons/Edit.js';

package/src/Components/Hoc/withTooltip.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
 	Tooltip,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 
 // NOTE: Can't seem to get this working for some elements like Combo or File
 
@@ -11,9 +11,9 @@ export default function withTooltip(WrappedComponent) {
 				tooltip,
 				tooltipPlacement = 'bottom',
 			} = props;
-		if (!tooltip) {
+		// if (!tooltip) {
 			return <WrappedComponent {...props} />;
-		}
+		// }
 		return <Tooltip label={tooltip} placement={tooltipPlacement}>
 					<WrappedComponent {...props} />
 				</Tooltip>;

package/src/Components/Hoc/withWindowedEditor.js

@@ -1,8 +1,6 @@
 import {
-	Column,
 	Modal,
-	Text,
-} from 'native-base';
+} from '@gluestack-ui/themed';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../Constants/Editor.js';

package/src/Components/Icons/AddressBook.js

@@ -1,14 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-	return (
-		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
-		<Path d="M96 0C60.7 0 32 28.7 32 64v384c0 35.3 28.7 64 64 64h288c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zm112 288h64c44.2 0 80 35.8 80 80 0 8.8-7.2 16-16 16H144c-8.8 0-16-7.2-16-16 0-44.2 35.8-80 80-80zm96-96c0 35.3-28.7 64-64 64s-64-28.7-64-64 28.7-64 64-64 64 28.7 64 64zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zm-16 112c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 512 512',
+	path: <Path d="M96 0C60.7 0 32 28.7 32 64v384c0 35.3 28.7 64 64 64h288c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zm112 288h64c44.2 0 80 35.8 80 80 0 8.8-7.2 16-16 16H144c-8.8 0-16-7.2-16-16 0-44.2 35.8-80 80-80zm96-96c0 35.3-28.7 64-64 64s-64-28.7-64-64 28.7-64 64-64 64 28.7 64 64zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zm-16 112c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16v-64z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/Alt.js

@@ -1,17 +1,9 @@
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-	return (
-		<Icon
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 125.65 67.53"
-			{...props}
-		>
-			<Path d="M17.82 53.08l-2.3 14.46H0L13.32 0h21.81l13.49 67.53H32.5l-2.37-14.46H17.81zm10.27-13.05c-1.53-9.85-3.01-20.84-3.87-27.05h-.51c-.66 6.48-2.31 17.2-3.91 27.05h8.28zM53.73 0h15.52v54.93h21.43l-1.45 12.61h-35.5V0zM96.92 12.7H83.6V0h42.05v12.7H112.4v54.84H96.92V12.7z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 125.65 67.53',
+	path: <Path d="M17.82 53.08l-2.3 14.46H0L13.32 0h21.81l13.49 67.53H32.5l-2.37-14.46H17.81zm10.27-13.05c-1.53-9.85-3.01-20.84-3.87-27.05h-.51c-.66 6.48-2.31 17.2-3.91 27.05h8.28zM53.73 0h15.52v54.93h21.43l-1.45 12.61h-35.5V0zM96.92 12.7H83.6V0h42.05v12.7H112.4v54.84H96.92V12.7z" />,
+});
 
-export default SvgComponent
+export default SvgComponent;

package/src/Components/Icons/AngleLeft.js

@@ -1,18 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-	return (
-		<Icon
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 320 512"
-			{...props}
-		>
-			<Path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256l137.3-137.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 320 512',
+	path: <Path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256l137.3-137.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/AngleRight.js

@@ -1,18 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-	return (
-		<Icon
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 320 512"
-			{...props}
-		>
-			<Path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 320 512',
+	path: <Path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/AnglesLeft.js

@@ -1,18 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-	return (
-		<Icon
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 512 512"
-			{...props}
-		>
-			<Path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256l137.3-137.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256l137.3-137.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 512 512',
+	path: <Path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256l137.3-137.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256l137.3-137.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/AnglesRight.js

@@ -1,18 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-	return (
-		<Icon
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 512 512"
-			{...props}
-		>
-			<Path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 512 512',
+	path: <Path d="M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/Asterisk.js

@@ -1,14 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-	return (
-		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" {...props}>
-		<Path d="M192 32c17.7 0 32 14.3 32 32v135.5l111.5-66.9c15.2-9.1 34.8-4.2 43.9 11s4.2 34.8-11 43.9L254.2 256l114.3 68.6c15.2 9.1 20.1 28.7 11 43.9s-28.7 20.1-43.9 11l-111.6-67V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V312.5L48.5 379.4c-15.2 9.1-34.8 4.2-43.9-11s-4.2-34.8 11-43.9L129.8 256 15.5 187.4c-15.2-9.1-20.1-28.7-11-43.9s28.7-20.1 43.9-11l111.6 67V64c0-17.7 14.3-32 32-32z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 384 512',
+	path: <Path d="M192 32c17.7 0 32 14.3 32 32v135.5l111.5-66.9c15.2-9.1 34.8-4.2 43.9 11s4.2 34.8-11 43.9L254.2 256l114.3 68.6c15.2 9.1 20.1 28.7 11 43.9s-28.7 20.1-43.9 11l-111.6-67V448c0 17.7-14.3 32-32 32s-32-14.3-32-32V312.5L48.5 379.4c-15.2 9.1-34.8 4.2-43.9-11s-4.2-34.8 11-43.9L129.8 256 15.5 187.4c-15.2-9.1-20.1-28.7-11-43.9s28.7-20.1 43.9-11l111.6 67V64c0-17.7 14.3-32 32-32z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/Ban.js

@@ -1,18 +1,12 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
+
+const SvgComponent = createIcon({
+	viewBox: '0 0 512 512',
+	path: <Path d="M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192 41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192-41.5 0-79.9 13.1-111.2 35.5l267.7 267.7zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256 114.6 0 256 0s256 114.6 256 256z" />,
+});
+
 
-function SvgComponent(props) {
-	return (
-		<Icon
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 512 512"
-			{...props}
-		>
-			<Path d="M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192 41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192-41.5 0-79.9 13.1-111.2 35.5l267.7 267.7zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256 114.6 0 256 0s256 114.6 256 256z" />
-		</Icon>
-	)
-}
 
 export default SvgComponent

package/src/Components/Icons/Bars.js

@@ -1,14 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-	return (
-		<Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" {...props}>
-		<Path d="M0 96c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm448 160c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h384c17.7 0 32 14.3 32 32z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 448 512',
+	path: <Path d="M0 96c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm448 160c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h384c17.7 0 32 14.3 32 32z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/BarsStaggered.js

@@ -1,14 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-  return (
-    <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props}>
-      <Path d="M0 96c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm64 160c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H96c-17.7 0-32-14.3-32-32zm384 160c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h384c17.7 0 32 14.3 32 32z" />
-    </Icon>
-  )
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 512 512',
+	path: <Path d="M0 96c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zm64 160c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H96c-17.7 0-32-14.3-32-32zm384 160c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32h384c17.7 0 32 14.3 32 32z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/Bell.js

@@ -1,23 +1,10 @@
 // Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-  return (
-    <Icon
-      xmlns="http://www.w3.org/2000/svg"
-      height={16}
-      width={14}
-      viewBox="0 0 448 512"
-      {...props}
-    >
-      <Path
-        fill="#1E3050"
-        d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416h384c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3c-31.2-35.2-48.5-80.5-48.5-127.6V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7z"
-      />
-    </Icon>
-  )
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 448 512',
+	path: <Path d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416h384c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3c-31.2-35.2-48.5-80.5-48.5-127.6V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/BigCircle.js

@@ -1,17 +1,9 @@
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { Path } from 'react-native-svg';
+import { createIcon } from '@gluestack-ui/themed';
 
-function SvgComponent(props) {
-	return (
-		<Icon
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 48.8 48.8"
-			{...props}
-		>
-			<Path d="M43.04 24.4c0 10.3-8.35 18.65-18.65 18.65S5.75 34.7 5.75 24.4 14.1 5.75 24.4 5.75 43.05 14.1 43.05 24.4zM24.4 4.32c11.09 0 20.08 8.99 20.08 20.08S35.49 44.48 24.4 44.48 4.32 35.49 4.32 24.4 13.31 4.32 24.4 4.32zm0-4.32C10.92 0 0 10.92 0 24.4s10.92 24.4 24.4 24.4 24.4-10.92 24.4-24.4S37.87 0 24.4 0z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	viewBox: '0 0 48.8 48.8',
+	path: <Path d="M43.04 24.4c0 10.3-8.35 18.65-18.65 18.65S5.75 34.7 5.75 24.4 14.1 5.75 24.4 5.75 43.05 14.1 43.05 24.4zM24.4 4.32c11.09 0 20.08 8.99 20.08 20.08S35.49 44.48 24.4 44.48 4.32 35.49 4.32 24.4 13.31 4.32 24.4 4.32zm0-4.32C10.92 0 0 10.92 0 24.4s10.92 24.4 24.4 24.4 24.4-10.92 24.4-24.4S37.87 0 24.4 0z" />,
+});
 
 export default SvgComponent