@onehat/ui 0.3.381 → 0.4.1

package/src/Components/Icons/ThumbsDownRegular.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="M128 288V64.03c0-17.67-14.33-31.1-32-31.1H32c-17.67 0-32 14.33-32 31.1v223.1c0 17.67 14.33 31.1 32 31.1h64c17.7 1.77 32-12.53 32-30.23zm353.5-58.9a66.276 66.276 0 001.875-15.64c0-22.7-11.44-43.13-29.28-55.28a65.97 65.97 0 00.64-9.122c0-22.32-11.06-42.6-28.83-54.83-2.437-34.71-31.47-62.2-66.8-62.2h-52.53c-35.94 0-71.55 11.87-100.3 33.41L169.6 92.93c-6.285 4.71-9.596 11.85-9.596 19.13 0 12.76 10.29 24.04 24.03 24.04 5.013 0 10.07-1.565 14.38-4.811l36.66-27.51c20.48-15.34 45.88-23.81 71.5-23.81h52.53c10.45 0 18.97 8.497 18.97 18.95 0 3.5-1.11 4.94-1.11 9.456 0 26.97 29.77 17.91 29.77 40.64 0 9.254-6.392 10.96-6.392 22.25 0 13.97 10.85 21.95 19.58 23.59 8.953 1.671 15.45 9.481 15.45 18.56 0 13.04-11.39 13.37-11.39 28.91 0 12.54 9.702 23.08 22.36 23.94C456.2 266.1 464 275.2 464 284.1c0 10.43-8.516 18.93-18.97 18.93H307.4c-12.44 0-24 10.02-24 23.1 0 4.038 1.02 8.078 3.066 11.72C304.4 371.7 312 403.8 312 411.2c0 8.044-5.984 20.79-22.06 20.79-12.53 0-14.27-.906-24.94-28.07-24.75-62.91-61.74-99.9-80.98-99.9-13.8 0-24.02 11.27-24.02 23.99 0 7.041 3.083 14.02 9.016 18.76C238.1 402 211.4 480 289.9 480c43.9 0 70.1-35 70.1-68.8 0-12.7-5.328-35.21-14.83-59.33h99.86C481.1 351.9 512 321.9 512 284.1c0-22.3-12.1-43.1-30.5-55z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 512 512',
+	path: <Path d="M128 288V64.03c0-17.67-14.33-31.1-32-31.1H32c-17.67 0-32 14.33-32 31.1v223.1c0 17.67 14.33 31.1 32 31.1h64c17.7 1.77 32-12.53 32-30.23zm353.5-58.9a66.276 66.276 0 001.875-15.64c0-22.7-11.44-43.13-29.28-55.28a65.97 65.97 0 00.64-9.122c0-22.32-11.06-42.6-28.83-54.83-2.437-34.71-31.47-62.2-66.8-62.2h-52.53c-35.94 0-71.55 11.87-100.3 33.41L169.6 92.93c-6.285 4.71-9.596 11.85-9.596 19.13 0 12.76 10.29 24.04 24.03 24.04 5.013 0 10.07-1.565 14.38-4.811l36.66-27.51c20.48-15.34 45.88-23.81 71.5-23.81h52.53c10.45 0 18.97 8.497 18.97 18.95 0 3.5-1.11 4.94-1.11 9.456 0 26.97 29.77 17.91 29.77 40.64 0 9.254-6.392 10.96-6.392 22.25 0 13.97 10.85 21.95 19.58 23.59 8.953 1.671 15.45 9.481 15.45 18.56 0 13.04-11.39 13.37-11.39 28.91 0 12.54 9.702 23.08 22.36 23.94C456.2 266.1 464 275.2 464 284.1c0 10.43-8.516 18.93-18.97 18.93H307.4c-12.44 0-24 10.02-24 23.1 0 4.038 1.02 8.078 3.066 11.72C304.4 371.7 312 403.8 312 411.2c0 8.044-5.984 20.79-22.06 20.79-12.53 0-14.27-.906-24.94-28.07-24.75-62.91-61.74-99.9-80.98-99.9-13.8 0-24.02 11.27-24.02 23.99 0 7.041 3.083 14.02 9.016 18.76C238.1 402 211.4 480 289.9 480c43.9 0 70.1-35 70.1-68.8 0-12.7-5.328-35.21-14.83-59.33h99.86C481.1 351.9 512 321.9 512 284.1c0-22.3-12.1-43.1-30.5-55z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/ThumbsUp.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="M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2h144c26.5 0 48 21.5 48 48 0 25.3-19.5 46-44.3 47.9 7.7 8.5 12.3 19.8 12.3 32.1 0 23.4-16.8 42.9-38.9 47.1 4.4 7.2 6.9 15.8 6.9 24.9 0 21.3-13.9 39.4-33.1 45.6.7 3.3 1.1 6.8 1.1 10.4 0 26.5-21.5 48-48 48h-73.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192h64c17.7 0 32 14.3 32 32v224c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 512 512',
+	path: <Path d="M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2h144c26.5 0 48 21.5 48 48 0 25.3-19.5 46-44.3 47.9 7.7 8.5 12.3 19.8 12.3 32.1 0 23.4-16.8 42.9-38.9 47.1 4.4 7.2 6.9 15.8 6.9 24.9 0 21.3-13.9 39.4-33.1 45.6.7 3.3 1.1 6.8 1.1 10.4 0 26.5-21.5 48-48 48h-73.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192h64c17.7 0 32 14.3 32 32v224c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/ThumbsUpRegular.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 191.1H32c-17.67 0-32 14.33-32 31.1v223.1c0 17.67 14.33 31.1 32 31.1h64c17.67 0 32-14.33 32-31.1V223.1c0-16.8-14.3-32-32-32zM512 227c0-36.89-30.05-66.92-66.97-66.92h-99.86C354.7 135.1 360 113.5 360 100.8c0-33.8-26.2-68.78-70.06-68.78-46.61 0-59.36 32.44-69.61 58.5-31.66 80.5-60.33 66.39-60.33 93.47 0 12.84 10.36 23.99 24.02 23.99a23.88 23.88 0 0014.97-5.26c76.76-61.37 57.97-122.7 90.95-122.7 16.08 0 22.06 12.75 22.06 20.79 0 7.404-7.594 39.55-25.55 71.59a23.934 23.934 0 00-3.066 11.72c0 13.92 11.43 23.1 24 23.1h137.6C455.5 208.1 464 216.6 464 227c0 9.809-7.766 18.03-17.67 18.71-12.66.86-22.36 11.4-22.36 23.94 0 15.47 11.39 15.95 11.39 28.91 0 25.37-35.03 12.34-35.03 42.15 0 11.22 6.392 13.03 6.392 22.25 0 22.66-29.77 13.76-29.77 40.64 0 4.515 1.11 5.961 1.11 9.456 0 10.45-8.516 18.95-18.97 18.95h-52.53c-25.62 0-51.02-8.466-71.5-23.81l-36.66-27.51a23.851 23.851 0 00-14.38-4.811c-13.85 0-24.03 11.38-24.03 24.04 0 7.287 3.312 14.42 9.596 19.13l36.67 27.52C235 468.1 270.6 480 306.6 480h52.53c35.33 0 64.36-27.49 66.8-62.2 17.77-12.23 28.83-32.51 28.83-54.83a65.97 65.97 0 00-.64-9.122c17.84-12.15 29.28-32.58 29.28-55.28 0-5.311-.641-10.54-1.876-15.64C499.9 270.1 512 250.2 512 227z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 512 512',
+	path: <Path d="M96 191.1H32c-17.67 0-32 14.33-32 31.1v223.1c0 17.67 14.33 31.1 32 31.1h64c17.67 0 32-14.33 32-31.1V223.1c0-16.8-14.3-32-32-32zM512 227c0-36.89-30.05-66.92-66.97-66.92h-99.86C354.7 135.1 360 113.5 360 100.8c0-33.8-26.2-68.78-70.06-68.78-46.61 0-59.36 32.44-69.61 58.5-31.66 80.5-60.33 66.39-60.33 93.47 0 12.84 10.36 23.99 24.02 23.99a23.88 23.88 0 0014.97-5.26c76.76-61.37 57.97-122.7 90.95-122.7 16.08 0 22.06 12.75 22.06 20.79 0 7.404-7.594 39.55-25.55 71.59a23.934 23.934 0 00-3.066 11.72c0 13.92 11.43 23.1 24 23.1h137.6C455.5 208.1 464 216.6 464 227c0 9.809-7.766 18.03-17.67 18.71-12.66.86-22.36 11.4-22.36 23.94 0 15.47 11.39 15.95 11.39 28.91 0 25.37-35.03 12.34-35.03 42.15 0 11.22 6.392 13.03 6.392 22.25 0 22.66-29.77 13.76-29.77 40.64 0 4.515 1.11 5.961 1.11 9.456 0 10.45-8.516 18.95-18.97 18.95h-52.53c-25.62 0-51.02-8.466-71.5-23.81l-36.66-27.51a23.851 23.851 0 00-14.38-4.811c-13.85 0-24.03 11.38-24.03 24.04 0 7.287 3.312 14.42 9.596 19.13l36.67 27.52C235 468.1 270.6 480 306.6 480h52.53c35.33 0 64.36-27.49 66.8-62.2 17.77-12.23 28.83-32.51 28.83-54.83a65.97 65.97 0 00-.64-9.122c17.84-12.15 29.28-32.58 29.28-55.28 0-5.311-.641-10.54-1.876-15.64C499.9 270.1 512 250.2 512 227z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/Trash.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 448 512"
-			{...props}
-		>
-			<Path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64s14.3 32 32 32h384c17.7 0 32-14.3 32-32s-14.3-32-32-32h-96l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32l21.2 339c1.6 25.3 22.6 45 47.9 45h245.8c25.3 0 46.3-19.7 47.9-45L416 128z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 448 512',
+	path: <Path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64s14.3 32 32 32h384c17.7 0 32-14.3 32-32s-14.3-32-32-32h-96l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32l21.2 339c1.6 25.3 22.6 45 47.9 45h245.8c25.3 0 46.3-19.7 47.9-45L416 128z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/TrashCan.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 448 512"
-			{...props}
-		>
-			<Path d="M160 400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16v208zm80 0c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16v208zm80 0c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16v208zm-2.5-375.06L354.2 80H424c13.3 0 24 10.75 24 24 0 13.3-10.7 24-24 24h-8v304c0 44.2-35.8 80-80 80H112c-44.18 0-80-35.8-80-80V128h-8c-13.25 0-24-10.7-24-24 0-13.25 10.75-24 24-24h69.82l36.68-55.06C140.9 9.357 158.4 0 177.1 0h93.8c18.7 0 36.2 9.358 46.6 24.94zM151.5 80h145l-19-28.44c-1.5-2.22-4-3.56-6.6-3.56h-93.8c-2.6 0-6 1.34-6.6 3.56L151.5 80zM80 432c0 17.7 14.33 32 32 32h224c17.7 0 32-14.3 32-32V128H80v304z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 448 512',
+	path: <Path d="M160 400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16v208zm80 0c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16v208zm80 0c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16v208zm-2.5-375.06L354.2 80H424c13.3 0 24 10.75 24 24 0 13.3-10.7 24-24 24h-8v304c0 44.2-35.8 80-80 80H112c-44.18 0-80-35.8-80-80V128h-8c-13.25 0-24-10.7-24-24 0-13.25 10.75-24 24-24h69.82l36.68-55.06C140.9 9.357 158.4 0 177.1 0h93.8c18.7 0 36.2 9.358 46.6 24.94zM151.5 80h145l-19-28.44c-1.5-2.22-4-3.56-6.6-3.56h-93.8c-2.6 0-6 1.34-6.6 3.56L151.5 80zM80 432c0 17.7 14.33 32 32 32h224c17.7 0 32-14.3 32-32V128H80v304z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/TriangleExclamation.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="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 512 512',
+	path: <Path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7.2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8.2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/Truck.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 640 512" {...props}>
-		<Path d="M48 0C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h16c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V237.3c0-17-6.7-33.3-18.7-45.3L512 114.7c-12-12-28.3-18.7-45.3-18.7H416V48c0-26.5-21.5-48-48-48H48zm368 160h50.7l77.3 77.3V256H416v-96zM208 416c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm272 48c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 640 512',
+	path: <Path d="M48 0C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h16c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V237.3c0-17-6.7-33.3-18.7-45.3L512 114.7c-12-12-28.3-18.7-45.3-18.7H416V48c0-26.5-21.5-48-48-48H48zm368 160h50.7l77.3 77.3V256H416v-96zM208 416c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm272 48c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/TruckFast.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 640 512" {...props}>
-		<Path d="M112 0C85.5 0 64 21.5 64 48v48H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h256c8.8 0 16 7.2 16 16s-7.2 16-16 16H48c-8.8 0-16 7.2-16 16s7.2 16 16 16h192c8.8 0 16 7.2 16 16s-7.2 16-16 16H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h192c8.8 0 16 7.2 16 16s-7.2 16-16 16H64v128c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V237.3c0-17-6.7-33.3-18.7-45.3L512 114.7c-12-12-28.3-18.7-45.3-18.7H416V48c0-26.5-21.5-48-48-48H112zm432 237.3V256H416v-96h50.7l77.3 77.3zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm368-48c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 640 512',
+	path: <Path d="M112 0C85.5 0 64 21.5 64 48v48H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h256c8.8 0 16 7.2 16 16s-7.2 16-16 16H48c-8.8 0-16 7.2-16 16s7.2 16 16 16h192c8.8 0 16 7.2 16 16s-7.2 16-16 16H16c-8.8 0-16 7.2-16 16s7.2 16 16 16h192c8.8 0 16 7.2 16 16s-7.2 16-16 16H64v128c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V237.3c0-17-6.7-33.3-18.7-45.3L512 114.7c-12-12-28.3-18.7-45.3-18.7H416V48c0-26.5-21.5-48-48-48H112zm432 237.3V256H416v-96h50.7l77.3 77.3zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm368-48c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/Upload.js

@@ -0,0 +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 { Path, Svg } from 'react-native-svg';
+
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 512 512',
+	path: <Path d="M288 109.3V352c0 17.7-14.3 32-32 32s-32-14.3-32-32V109.3l-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352h128c0 35.3 28.7 64 64 64s64-28.7 64-64h128c35.3 0 64 28.7 64 64v32c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64v-32c0-35.3 28.7-64 64-64zm368 104a24 24 0 100-48 24 24 0 100 48z" />,
+});
+
+export default SvgComponent

package/src/Components/Icons/UploadDownload.js

@@ -1,14 +1,14 @@
-import * as React from "react"
-import Svg, { Defs, G, 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 512 488.63" {...props}>
-			<Path d="M447.17 329.63H426.5l-61.85 61.85-61.85-61.85H191.68c0 19.33-15.67 35-35 35s-35-15.67-35-35H64.83C29.03 329.63 0 358.65 0 394.46v29.34c0 35.8 29.02 64.83 64.83 64.83h382.34c35.8 0 64.83-29.02 64.83-64.83v-29.34c0-35.8-29.02-64.83-64.83-64.83zm-15.17 104c-13.25 0-24-10.75-24-24s10.75-24 24-24 24 10.75 24 24-10.75 24-24 24z" />
-			<Path d="M156.35 0L59.94 96.41c-7.81 7.81-7.81 20.47 0 28.28 7.81 7.81 20.48 7.81 28.28 0l48.46-48.46v253.4c0 11.05 8.95 20 20 20s20-8.95 20-20V76.9l47.8 47.8c3.9 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c7.81-7.81 7.81-20.47 0-28.28L156.35 0zM461.06 245.57c-7.81-7.81-20.47-7.81-28.29 0l-48.46 48.46V40.63c0-11.05-8.95-20-20-20s-20 8.95-20 20v252.73l-47.8-47.8c-7.81-7.81-20.47-7.81-28.29 0-7.81 7.81-7.81 20.47 0 28.29l96.41 96.41 96.41-96.41c7.81-7.81 7.81-20.47 0-28.29z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 128.44 124.39',
+	path: <>
+			<Path className="fill-current" d="M110.72,85.64h-2.69l-8.99,8.99c-2.5,2.5-5.83,3.88-9.38,3.88s-6.87-1.38-9.38-3.88l-8.99-8.99h-19.28c0,7.31-5.94,13.25-13.25,13.25s-13.25-5.94-13.25-13.25h-7.81c-8.55,0-15.5,6.95-15.5,15.5v7.75c0,8.55,6.95,15.5,15.5,15.5h93.01c8.55,0,15.5-6.95,15.5-15.5v-7.75c0-8.55-6.95-15.5-15.5-15.5ZM106.85,110.83c-3.21,0-5.81-2.6-5.81-5.81s2.6-5.81,5.81-5.81,5.81,2.6,5.81,5.81-2.6,5.81-5.81,5.81Z"/>
+			<Path className="fill-current" d="M97.44,7.75c0-4.29-3.46-7.75-7.75-7.75s-7.75,3.46-7.75,7.75v58.79l-17.78-17.78c-3.03-3.03-7.94-3.03-10.97,0s-3.03,7.94,0,10.97l31,31c3.03,3.03,7.94,3.03,10.97,0l31-31c3.03-3.03,3.03-7.94,0-10.97s-7.94-3.03-10.97,0l-17.76,17.78V7.75Z"/>
+			<Path className="fill-current" d="M46.53,26.85v58.79c0,4.29-3.46,7.75-7.75,7.75s-7.75-3.46-7.75-7.75V26.85l-17.78,17.78c-3.03,3.03-7.94,3.03-10.97,0s-3.03-7.94,0-10.97L33.28,2.65c3.03-3.03,7.94-3.03,10.97,0l31,31c3.03,3.03,3.03,7.94,0,10.97s-7.94,3.03-10.97,0l-17.76-17.78Z"/>
+		</>,
+});
 
 export default SvgComponent

package/src/Components/Icons/User.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 448 512" {...props}>
-		<Path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512h388.6c16.4 0 29.7-13.3 29.7-29.7 0-98.5-79.8-178.3-178.3-178.3h-91.4z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 448 512',
+	path: <Path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512h388.6c16.4 0 29.7-13.3 29.7-29.7 0-98.5-79.8-178.3-178.3-178.3h-91.4z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/UserGroup.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 640 512" {...props}>
-		<Path d="M352 128c0 70.7-57.3 128-128 128S96 198.7 96 128 153.3 0 224 0s128 57.3 128 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8 2.4-.1 4.7-.2 7.1-.2h61.4c89.1 0 161.3 72.2 161.3 161.3 0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9 19.7-26.6 31.3-59.5 31.3-95.1 0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 640 512',
+	path: <Path d="M352 128c0 70.7-57.3 128-128 128S96 198.7 96 128 153.3 0 224 0s128 57.3 128 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8 2.4-.1 4.7-.2 7.1-.2h61.4c89.1 0 161.3 72.2 161.3 161.3 0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9 19.7-26.6 31.3-59.5 31.3-95.1 0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/UserPlus.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 640 512" {...props}>
-		<Path d="M352 128c0 70.7-57.3 128-128 128S96 198.7 96 128 153.3 0 224 0s128 57.3 128 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312v-64h-64c-13.3 0-24-10.7-24-24s10.7-24 24-24h64v-64c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24h-64v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 640 512',
+	path: <Path d="M352 128c0 70.7-57.3 128-128 128S96 198.7 96 128 153.3 0 224 0s128 57.3 128 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3 0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312v-64h-64c-13.3 0-24-10.7-24-24s10.7-24 24-24h64v-64c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24h-64v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/UserSecret.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 448 512" {...props}>
-		<Path d="M224 16c-6.7 0-10.8-2.8-15.5-6.1C201.9 5.4 194 0 176 0c-30.5 0-52 43.7-66 89.4-47.3 8.7-78 22.8-78 38.6 0 14.3 25 27.1 64.6 35.9-.4 4-.6 8-.6 12.1 0 17 3.3 33.2 9.3 48H45.4C38 224 32 230 32 237.4c0 1.7.3 3.4 1 5l38.8 96.9C28.2 371.8 0 423.8 0 482.3 0 498.7 13.3 512 29.7 512h388.6c16.4 0 29.7-13.3 29.7-29.7 0-58.5-28.2-110.4-71.7-143l38.7-96.9c.6-1.6 1-3.3 1-5 0-7.4-6-13.4-13.4-13.4h-59.9c6-14.8 9.3-31 9.3-48 0-4.1-.2-8.1-.6-12.1C391 155.1 416 142.3 416 128c0-15.8-30.7-29.9-78-38.6C324 43.7 302.5 0 272 0c-18 0-25.9 5.4-32.5 9.9-4.7 3.3-8.8 6.1-15.5 6.1zm56 208h-12.4c-16.5 0-31.1-10.6-36.3-26.2-2.3-7-12.2-7-14.5 0-5.2 15.6-19.9 26.2-36.3 26.2H168c-22.1 0-40-17.9-40-40v-14.4c28.2 4.1 61 6.4 96 6.4s67.8-2.3 96-6.4V184c0 22.1-17.9 40-40 40zm-88 96l16 32-32 128-48-192 64 32zm128-32l-48 192-32-128 16-32 64-32z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 448 512',
+	path: <Path d="M224 16c-6.7 0-10.8-2.8-15.5-6.1C201.9 5.4 194 0 176 0c-30.5 0-52 43.7-66 89.4-47.3 8.7-78 22.8-78 38.6 0 14.3 25 27.1 64.6 35.9-.4 4-.6 8-.6 12.1 0 17 3.3 33.2 9.3 48H45.4C38 224 32 230 32 237.4c0 1.7.3 3.4 1 5l38.8 96.9C28.2 371.8 0 423.8 0 482.3 0 498.7 13.3 512 29.7 512h388.6c16.4 0 29.7-13.3 29.7-29.7 0-58.5-28.2-110.4-71.7-143l38.7-96.9c.6-1.6 1-3.3 1-5 0-7.4-6-13.4-13.4-13.4h-59.9c6-14.8 9.3-31 9.3-48 0-4.1-.2-8.1-.6-12.1C391 155.1 416 142.3 416 128c0-15.8-30.7-29.9-78-38.6C324 43.7 302.5 0 272 0c-18 0-25.9 5.4-32.5 9.9-4.7 3.3-8.8 6.1-15.5 6.1zm56 208h-12.4c-16.5 0-31.1-10.6-36.3-26.2-2.3-7-12.2-7-14.5 0-5.2 15.6-19.9 26.2-36.3 26.2H168c-22.1 0-40-17.9-40-40v-14.4c28.2 4.1 61 6.4 96 6.4s67.8-2.3 96-6.4V184c0 22.1-17.9 40-40 40zm-88 96l16 32-32 128-48-192 64 32zm128-32l-48 192-32-128 16-32 64-32z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/Video.js

@@ -1,20 +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 11.77 7.85"
-      {...props}
-    >
-      <Path
-        d="M0 1.31C0 .59.59 0 1.31 0h5.23c.72 0 1.31.59 1.31 1.31v5.23c0 .72-.59 1.31-1.31 1.31H1.31C.59 7.85 0 7.26 0 6.54V1.31zM11.43.73c.21.11.35.34.35.58v5.23c0 .24-.13.46-.35.58s-.47.1-.67-.03L8.8 5.78l-.29-.19V2.27l.29-.19L10.76.77c.2-.13.46-.15.67-.03z"
-      />
-    </Icon>
-  )
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 11.77 7.85',
+	path: <Path d="M0 1.31C0 .59.59 0 1.31 0h5.23c.72 0 1.31.59 1.31 1.31v5.23c0 .72-.59 1.31-1.31 1.31H1.31C.59 7.85 0 7.26 0 6.54V1.31zM11.43.73c.21.11.35.34.35.58v5.23c0 .24-.13.46-.35.58s-.47.1-.67-.03L8.8 5.78l-.29-.19V2.27l.29-.19L10.76.77c.2-.13.46-.15.67-.03z" />
+});
 
 export default SvgComponent

package/src/Components/Icons/X.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="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5c-11.3-13.6-31.5-15.4-45.1-4.1S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306l135.4 162.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 384 512',
+	path: <Path d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5c-11.3-13.6-31.5-15.4-45.1-4.1S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306l135.4 162.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z" />,
+});
 
 export default SvgComponent

package/src/Components/Icons/Xmark.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 320 512" {...props}>
-		<Path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z" />
-		</Icon>
-	)
-}
+const SvgComponent = createIcon({
+	Root: Svg,
+	viewBox: '0 0 320 512',
+	path: <Path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3l105.4 105.3c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256l105.3-105.4z" />,
+});
 
 export default SvgComponent

package/src/Components/Layout/CenterBox.js

@@ -1,16 +1,20 @@
-import {
-	Box,
-} from 'native-base';
+import { Box } from "../Gluestack";
 
 export default function CenterBox(props) {
+	let className = `
+		CenterBox
+		w-full
+		flex-1
+		items-center
+		justify-center
+		p-2
+	`;
+	if (props.className) {
+		className += props.className;
+	}
 	return <Box
-				alignItems="center"
-				justifyContent="center"
-				flex={1}
-				w="100%"
-				p={2}
-				safeAreaBottom
 				{...props}
+				className={className}
 			>
 				{props.children}
 			</Box>;

package/src/Components/Layout/Footer.js

@@ -1,21 +1,28 @@
 import {
-	Row,
-} from 'native-base';
+	HStack,
+} from '../Gluestack';
 import UiGlobals from '../../UiGlobals.js';
 
 export default function Footer(props) {
 	const styles = UiGlobals.styles;
-	return <Row
-				alignItems="center"
-				justifyContent="center"
-				alignSelf="flex-end"
-				bg={styles.PANEL_FOOTER_BG}
-				testID="footer"
-				w="100%"
-				p={2}
-				// safeAreaBottom
-				{...props}
+	let className = `
+		Footer
+		w-full
+		items-center
+		justify-center
+		self-end
+		p-2
+		border-t-2
+		${styles.PANEL_FOOTER_BORDER_TOP_COLOR}
+	`;
+	if (props.className) {
+		className += ' ' + props.className
+	}
+	return <HStack
+				// safeAreaBottom (see https://www.nativewind.dev/tailwind/new-concepts/safe-area-insets)
+				className={className}
+				style={props.style || {}}
 			>
 				{props.children}
-			</Row>;
+			</HStack>;
 }

package/src/Components/Messages/ConfirmationMessage.js

@@ -1,8 +1,8 @@
 import {
-	Button,
-	Modal,
+	Modal, ModalBackdrop, ModalHeader, ModalContent, ModalCloseButton, ModalBody, ModalFooter,
 	Text,
-} from 'native-base';
+} from '../Gluestack';
+import Button from '../Buttons/Button';
 import emptyFn from '../../Functions/emptyFn.js';
 
 export default function ConfirmationMessage(props) {
@@ -13,15 +13,32 @@ export default function ConfirmationMessage(props) {
 		} = props;
 
 	return <Modal isOpen={true} {...props} _backdrop={{ bg: "#000" }}>
-				<Modal.Content maxWidth="400px">
-					<Modal.Header>Confirm</Modal.Header>
-					<Modal.Body p={5} pb={0} borderTopWidth={0}>
-						<Text color="#000">{textMessage}</Text>
-					</Modal.Body>
-					<Modal.Footer py={2} pr={4}>
-						<Button variant="ghost" color="trueGray.700" onPress={onCancel}>Cancel</Button>
-						<Button variant="ghost" color="primary.800" onPress={onOk}>OK</Button>
-					</Modal.Footer>
-				</Modal.Content>
+				<ModalBackdrop />
+				<ModalContent maxWidth="400px">
+					<ModalHeader>Confirm</ModalHeader>
+					<ModalBody
+						className={`
+							p-5
+							pb-0
+							border-t-0
+						`}
+					>
+						<Text className="text-black">{textMessage}</Text>
+					</ModalBody>
+					<ModalFooter className="py-2 pr-4">
+						<Button
+							onPress={onCancel}
+							className="text-grey-700"
+							variant="outline"
+							text="Cancel"
+						/>
+						<Button
+							variant="outline"
+							onPress={onOk}
+							className="text-primary-800"
+							text="OK"
+						/>
+					</ModalFooter>
+				</ModalContent>
 			</Modal>;
 }