@onehat/ui 0.3.381 → 0.4.0

package/src/Components/Hoc/withPresetButtons.js

@@ -1,7 +1,4 @@
-import React, { useState, useEffect, } from 'react';
-import {
-	Modal,
-} from 'native-base';
+import { forwardRef, useState, useEffect, } from 'react';
 import {
 	ADD,
 	EDIT,
@@ -39,11 +36,11 @@ const presetButtons = [
 ];
 
 export default function withPresetButtons(WrappedComponent, isGrid = false) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 
 		if (props.disablePresetButtons) {
 			// bypass everything
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} ref={ref} />;
 		}
 
 		const {
@@ -51,14 +48,14 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				contextMenuItems = [],
 				additionalToolbarButtons = [],
 				useUploadDownload = false,
-				onChangeColumnsConfig,
-				canRecordBeEdited,
-				canRecordBeDeleted,
-				canRecordBeDuplicated,
 				uploadHeaders,
 				uploadParams,
 				downloadHeaders,
 				downloadParams,
+				onChangeColumnsConfig,
+				canRecordBeEdited,
+				canRecordBeDeleted,
+				canRecordBeDuplicated,
 				...propsToPass
 			} = props,
 			{
@@ -79,6 +76,10 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				// withAlert
 				showInfo,
 
+				// withModal
+				showModal,
+				hideModal,
+
 				// withComponent
 				self,
 
@@ -105,7 +106,6 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 				selectorSelected,
 			} = props,
 			[isReady, setIsReady] = useState(false),
-			[isModalShown, setIsModalShown] = useState(false),
 			[localContextMenuItems, setLocalContextMenuItems] = useState([]),
 			[localAdditionalToolbarButtons, setLocalAdditionalToolbarButtons] = useState([]),
 			[localColumnsConfig, setLocalColumnsConfig] = useState([]),
@@ -189,7 +189,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						key = 'addBtn';
 						text = 'Add';
 						handler = onAdd;
-						icon = <Plus />;
+						icon = Plus;
 						if (selectorId && !selectorSelected) {
 							isDisabled = true;
 						}
@@ -201,7 +201,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						key = 'editBtn';
 						text = 'Edit';
 						handler = onEdit;
-						icon = <Edit />;
+						icon = Edit;
 						if (selectorId && !selectorSelected) {
 							isDisabled = true;
 						}
@@ -216,7 +216,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						key = 'deleteBtn';
 						text = 'Delete';
 						handler = onDelete;
-						icon = <Trash />;
+						icon = Trash;
 						if (selectorId && !selectorSelected) {
 							isDisabled = true;
 						}
@@ -237,7 +237,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						key = 'viewBtn';
 						text = 'View';
 						handler = onView;
-						icon = <Eye />;
+						icon = Eye;
 						isDisabled = !selection.length || selection.length !== 1;
 						if (selectorId && !selectorSelected) {
 							isDisabled = true;
@@ -250,7 +250,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						key = 'copyBtn';
 						text = 'Copy to Clipboard';
 						handler = onCopyToClipboard;
-						icon = <Clipboard />;
+						icon = Clipboard;
 						isDisabled = !selection.length;
 						if (selectorId && !selectorSelected) {
 							isDisabled = true;
@@ -263,7 +263,7 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 						key = 'duplicateBtn';
 						text = 'Duplicate';
 						handler = onDuplicate;
-						icon = <Duplicate />;
+						icon = Duplicate;
 						isDisabled = !selection.length || selection.length !== 1;
 						if (selectorId && !selectorSelected) {
 							isDisabled = true;
@@ -278,13 +278,13 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					// case PRINT:
 					// 	text = 'Print';
 					// 	handler = onPrint;
-					// 	icon = <Print />;
+					// 	icon = Print;
 					// 	break;
 					case UPLOAD_DOWNLOAD:
 						key = 'uploadDownloadBtn';
 						text = 'Upload/Download';
 						handler = onUploadDownload;
-						icon = <UploadDownload />;
+						icon = UploadDownload;
 						break;
 					default:
 				}
@@ -345,8 +345,21 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 					showInfo('Copied to clipboard!');
 				}
 			},
-			onUploadDownload = () => setIsModalShown(true),
-			onModalClose = () => setIsModalShown(false);
+			onUploadDownload = () => {
+				showModal({
+					body: <UploadsDownloadsWindow
+								reference="uploadsDownloads"
+								onClose={hideModal}
+								Repository={Repository}
+								columnsConfig={props.columnsConfig}
+								uploadHeaders={uploadHeaders}
+								uploadParams={uploadParams}
+								downloadHeaders={downloadHeaders}
+								downloadParams={downloadParams}
+							/>,
+					onCancel: hideModal,
+				});
+			};
 			// onPrint = () => {
 			// 	debugger;
 			// };
@@ -362,36 +375,19 @@ export default function withPresetButtons(WrappedComponent, isGrid = false) {
 			return null;
 		}
 
-		return <>
-					<WrappedComponent
-						{...propsToPass}
-						disablePresetButtons={false}
-						contextMenuItems={[
-							...localContextMenuItems,
-							...contextMenuItems,
-						]}
-						additionalToolbarButtons={[
-							...localAdditionalToolbarButtons,
-							...additionalToolbarButtons,
-						]}
-						onChangeColumnsConfig={onChangeColumnsConfigDecorator}
-					/>
-					{isModalShown && 
-						<Modal
-							isOpen={true}
-							onClose={onModalClose}
-						>
-							<UploadsDownloadsWindow
-								reference="uploadsDownloads"
-								onClose={onModalClose}
-								Repository={Repository}
-								columnsConfig={props.columnsConfig}
-								uploadHeaders={uploadHeaders}
-								uploadParams={uploadParams}
-								downloadHeaders={downloadHeaders}
-								downloadParams={downloadParams}
-							/>
-						</Modal>}
-				</>;
-	};
+		return <WrappedComponent
+					{...propsToPass}
+					ref={ref}
+					disablePresetButtons={false}
+					contextMenuItems={[
+						...localContextMenuItems,
+						...contextMenuItems,
+					]}
+					additionalToolbarButtons={[
+						...localAdditionalToolbarButtons,
+						...additionalToolbarButtons,
+					]}
+					onChangeColumnsConfig={onChangeColumnsConfigDecorator}
+				/>;
+	});
 }

package/src/Components/Hoc/withSelection.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, } from 'react';
+import { forwardRef, useState, useEffect, useRef, } from 'react';
 import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
@@ -10,17 +10,17 @@ import inArray from '../../Functions/inArray.js';
 import _ from 'lodash';
 
 export default function withSelection(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 
 		if (props.disableWithSelection) {
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} ref={ref} />;
 		}
 
 		if (props.setSelection) {
 			// bypass everything, since we're already using withSelection() in hierarchy.
 			// For example, Combo has withSelection(), and intenally it uses Grid which also has withSelection(),
 			// but we only need it defined once for the whole thing.
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} ref={ref} />;
 		}
 
 		const
@@ -393,6 +393,7 @@ export default function withSelection(WrappedComponent) {
 		
 		return <WrappedComponent
 					{...props}
+					ref={ref}
 					disableWithSelection={false}
 					selection={localSelection.current}
 					setSelection={setSelection}
@@ -409,5 +410,5 @@ export default function withSelection(WrappedComponent) {
 					getIdsFromSelection={getIdsFromLocalSelection}
 					getDisplayValuesFromSelection={getDisplayValuesFromSelection}
 				/>;
-	};
+	});
 }

package/src/Components/Hoc/withSideEditor.js

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import {
 	EDITOR_TYPE__SIDE,
 } from '../../Constants/Editor.js';
@@ -7,20 +8,21 @@ import _ from 'lodash';
 
 
 function withAdditionalProps(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		// provide the editorType to withEditor
 		return <WrappedComponent
 					editorType={EDITOR_TYPE__SIDE}
 					{...props}
+					ref={ref}
 				/>;
-	};
+	});
 }
 
 // NOTE: Effectivtly, the HOC composition is:
 // withAdditionalProps(withEditor(withSideEditor))
 
 export default function withSideEditor(WrappedComponent, isTree = false) {
-	const SideEditor = (props) => {
+	const SideEditor = forwardRef((props, ref) => {
 		const {
 				Editor,
 				_editor = {},
@@ -48,10 +50,16 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 			_editor.flex = sideFlex;
 		}
 
+		if (!_editor.className) {
+			_editor.className = '';
+		}
+		_editor.className += ' border-l-1 border-l-grey-300';
+
 		return <Container
 					parent={self}
 					reference="SideEditor"
 					center={<WrappedComponent
+								ref={ref}
 								isTree={isTree}
 								isSideEditor={true}
 								{...props}
@@ -59,13 +67,11 @@ export default function withSideEditor(WrappedComponent, isTree = false) {
 					east={<Editor
 								{...propsToPass}
 								editorType={EDITOR_TYPE__SIDE}
-								borderLeftWidth={1}
-								borderLeftColor="#ccc"
 								{..._editor}
 								parent={self}
 								reference="editor"
 							/>}
 				/>;
-	};
+	});
 	return withAdditionalProps(withEditor(SideEditor, isTree));
 }

package/src/Components/Hoc/withTooltip.js

@@ -1,21 +1,27 @@
-import React from 'react';
-import {
-	Tooltip,
-} from 'native-base';
+import { forwardRef } from 'react';
+import Tooltip from '../Tooltip/Tooltip.js';
+import _ from 'lodash';
 
-// NOTE: Can't seem to get this working for some elements like Combo or File
+// This HOC adds a standardized tooltip to the wrapped component.
+// If you need a tooltip with custom elements, use the Tooltip component directly.
 
 export default function withTooltip(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		const {
 				tooltip,
 				tooltipPlacement = 'bottom',
+				_tooltip = {},
+				...propsToPass
 			} = props;
-		if (!tooltip) {
-			return <WrappedComponent {...props} />;
+		
+		let component = <WrappedComponent {...propsToPass} ref={ref} />;
+
+		if (tooltip || !_.isEmpty(_tooltip)) {
+			component = <Tooltip label={tooltip} placement={tooltipPlacement} {..._tooltip}>
+							{component}
+						</Tooltip>;
 		}
-		return <Tooltip label={tooltip} placement={tooltipPlacement}>
-					<WrappedComponent {...props} />
-				</Tooltip>;
-	};
+		
+		return component;
+	});
 }

package/src/Components/Hoc/withValue.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useContext, useCallback, } from 'react';
+import { forwardRef, useState, useEffect, useRef, useContext, useCallback, } from 'react';
 import natsort from 'natsort';
 import useForceUpdate from '../../Hooks/useForceUpdate.js';
 import FieldSetContext from '../../Contexts/FieldSetContext.js';
@@ -7,17 +7,17 @@ import _ from 'lodash';
 // This HOC gives the component value props, primarily for a Form Field.
 
 export default function withValue(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 
 		if (props.disableWithValue) {
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} ref={ref} />;
 		}
 
 		if (props.setValue) {
 			// bypass everything, since we're already using withValue() in hierarchy.
 			// For example, Combo has withValue(), and intenally it uses Input which also has withValue(),
 			// but we only need it defined once for the whole thing.
-			return <WrappedComponent {...props} />;
+			return <WrappedComponent {...props} ref={ref} />;
 		}
 
 		const
@@ -144,10 +144,11 @@ export default function withValue(WrappedComponent) {
 
 		return <WrappedComponent
 					{...props}
+					ref={ref}
 					disableWithValue={false}
 					value={convertedValue}
 					setValue={setValueRef.current}
 					onChangeSelection={onChangeSelection}
 				/>;
-	};
+	});
 }

package/src/Components/Hoc/withWindowedEditor.js

@@ -1,8 +1,7 @@
+import { forwardRef } from 'react';
 import {
-	Column,
-	Modal,
-	Text,
-} from 'native-base';
+	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
+} from '../Gluestack';
 import {
 	EDITOR_TYPE__WINDOWED,
 } from '../../Constants/Editor.js';
@@ -12,13 +11,14 @@ import _ from 'lodash';
 
 
 // function withAdditionalProps(WrappedComponent) {
-// 	return (props) => {
+// 	return forwardRef((props, ref) => {
 // 		return <WrappedComponent
 // 					mode="BOTH_AXES"
 // 					handle=".header"
 // 					{...props}
+// 					ref={ref}
 // 				/>;
-// 	};
+// 	});
 // }
 
 // In order to implement a draggable window, I'd need to switch the Column with DraggableColumn,
@@ -29,20 +29,21 @@ import _ from 'lodash';
 
 
 function withAdditionalProps(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 		// provide the editorType to withEditor
 		return <WrappedComponent
 					editorType={EDITOR_TYPE__WINDOWED}
 					{...props}
+					ref={ref}
 				/>;
-	};
+	});
 }
 
 // NOTE: Effectivtly, the HOC composition is:
 // withAdditionalProps(withEditor(withWindowedEditor))
 
 export default function withWindowedEditor(WrappedComponent, isTree = false) {
-	const WindowedEditor = (props) => {
+	const WindowedEditor = forwardRef((props, ref) => {
 		const {
 				isEditorShown = false,
 				setIsEditorShown,
@@ -66,12 +67,13 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 		}
 
 		return <>
-					<WrappedComponent {...props} />
+					<WrappedComponent {...props} ref={ref} />
 					{isEditorShown && 
 						<Modal
 							isOpen={true}
 							onClose={onEditorCancel}
 						>
+							<ModalBackdrop />
 							<Editor
 								editorType={EDITOR_TYPE__WINDOWED}
 								{...propsToPass}
@@ -81,6 +83,6 @@ export default function withWindowedEditor(WrappedComponent, isTree = false) {
 							/>
 						</Modal>}
 				</>;
-	};
+	});
 	return withAdditionalProps(withEditor(WindowedEditor, isTree));
 }

package/src/Components/Icons/AddressBook.js

@@ -1,14 +1,11 @@
+import { createIcon } from "../Gluestack/icon";
 // 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, Svg } from 'react-native-svg';
 
-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({
+	Root: Svg,
+	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,10 @@
-import * as React from "react"
-import Svg, { Path } from "react-native-svg"
-import { Icon } from 'native-base';
+import { createIcon } from "../Gluestack/icon";
+import { Path, Svg } from 'react-native-svg';
 
-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({
+	Root: Svg,
+	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,11 @@
+import { createIcon } from "../Gluestack/icon";
 // 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, Svg } from 'react-native-svg';
 
-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({
+	Root: Svg,
+	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,11 @@
+import { createIcon } from "../Gluestack/icon";
 // 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, Svg } from 'react-native-svg';
 
-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({
+	Root: Svg,
+	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,11 @@
+import { createIcon } from "../Gluestack/icon";
 // 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, Svg } from 'react-native-svg';
 
-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({
+	Root: Svg,
+	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,11 @@
+import { createIcon } from "../Gluestack/icon";
 // 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, Svg } from 'react-native-svg';
 
-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({
+	Root: Svg,
+	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,11 @@
+import { createIcon } from "../Gluestack/icon";
 // 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, Svg } from 'react-native-svg';
 
-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({
+	Root: Svg,
+	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