@sikka/hawa 0.1.82 → 0.1.84

package/.github/workflows/hawa-ci.yml

@@ -48,9 +48,8 @@ jobs:
         node-version: [16.x]
     steps:
       - uses: actions/checkout@v2
-
-      - name: Change working directory to ./landing
-        run: cd ./landing
+        with:
+          path: deploy-landing-path
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
@@ -58,12 +57,12 @@ jobs:
       - name: Install Hawa Landing
         run: |
           rm -fr /home/cloudpanel/htdocs/hawa.style || true
-          cd /var/www/html/sikka-software/_work/Hawa/Hawa/landing
+          cd /var/www/html/sikka-software/_work/Hawa/Hawa/deploy-landing-path/landing
           rm -fr package-lock.json || true
           rm -fr node_modules  || true
           npm install
           npm run build --if-present
-          ln -s /var/www/html/sikka-software/_work/Hawa/Hawa/landing /home/cloudpanel/htdocs/hawa.style
+          ln -s /var/www/html/sikka-software/_work/Hawa/Hawa/deploy-landing-path/landing /home/cloudpanel/htdocs/hawa.style
           pm2 stop hawa-landing || true
           pm2 delete hawa-landing || true
           pm2 start npm --name "hawa-landing" -- start || true
@@ -77,14 +76,15 @@ jobs:
         node-version: [16.x]
     steps:
       - uses: actions/checkout@v2
+        with:
+          path: build-storybook-path
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
       - name: Generate Storybook Static Files
         run: |
-          cd /var/www/html/sikka-software/_work/Hawa/Hawa
+          cd /var/www/html/sikka-software/_work/Hawa/Hawa/build-storybook-path
           rm -fr package-lock.json || true
-          rm -fr node_modules  || true
           npm install
           npm run build-storybook

package/dist/index.d.mts

@@ -1130,6 +1130,7 @@ type SignInFormTypes = {
     currentLanguage?: any;
     handleColorMode?: () => void;
     currentColorMode?: any;
+    logosOnly?: boolean;
     direction?: "rtl" | "ltr";
     showError?: any;
     errorTitle?: string;
@@ -1186,6 +1187,7 @@ type SignUpFormTypes = {
     handleColorMode?: () => void;
     currentColorMode?: any;
     direction?: "rtl" | "ltr";
+    logosOnly?: boolean;
     texts: {
         fullNameLabel: string;
         fullNamePlaceholder: string;

package/dist/index.d.ts

@@ -1130,6 +1130,7 @@ type SignInFormTypes = {
     currentLanguage?: any;
     handleColorMode?: () => void;
     currentColorMode?: any;
+    logosOnly?: boolean;
     direction?: "rtl" | "ltr";
     showError?: any;
     errorTitle?: string;
@@ -1186,6 +1187,7 @@ type SignUpFormTypes = {
     handleColorMode?: () => void;
     currentColorMode?: any;
     direction?: "rtl" | "ltr";
+    logosOnly?: boolean;
     texts: {
         fullNameLabel: string;
         fullNamePlaceholder: string;

package/dist/index.js

@@ -8537,110 +8537,6 @@ var UserSettingsForm = function(props) {
 };
 // src/blocks/AuthForms/AppLanding.tsx
 var import_react70 = __toESM(require("react"));
-var AppLanding = function(props) {
-    return /* @__PURE__ */ import_react70.default.createElement("div", null, /* @__PURE__ */ import_react70.default.createElement(Card, null, /* @__PURE__ */ import_react70.default.createElement(CardContent, {
-        headless: true,
-        className: "flex flex-col gap-6"
-    }, props.handleSignIn && /* @__PURE__ */ import_react70.default.createElement(Button, {
-        onClick: props.handleSignIn
-    }, props.texts.signIn), props.handleSignUp && /* @__PURE__ */ import_react70.default.createElement(Button, {
-        onClick: props.handleSignUp
-    }, props.texts.signUp))), /* @__PURE__ */ import_react70.default.createElement("div", {
-        className: "mt-6 flex flex-row justify-between"
-    }, /* @__PURE__ */ import_react70.default.createElement(HawaRadio, {
-        onChangeTab: props.handleLanguage,
-        design: "tabs",
-        options: [
-            {
-                value: "ar",
-                label: "عربي"
-            },
-            {
-                value: "en",
-                label: "English"
-            }
-        ]
-    }), /* @__PURE__ */ import_react70.default.createElement(HawaRadio, {
-        onChangeTab: props.handleColorMode,
-        design: "tabs",
-        options: [
-            {
-                value: "light",
-                label: /* @__PURE__ */ import_react70.default.createElement("svg", {
-                    width: "15",
-                    height: "15",
-                    viewBox: "0 0 15 15",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90"
-                }, /* @__PURE__ */ import_react70.default.createElement("path", {
-                    d: "M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z",
-                    fill: "currentColor",
-                    fillRule: "evenodd",
-                    clipRule: "evenodd"
-                }))
-            },
-            {
-                value: "dark",
-                label: /* @__PURE__ */ import_react70.default.createElement("svg", {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "24",
-                    height: "24",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    className: "h-[1.2rem] w-[1.2rem]  transition-all dark:rotate-0 dark:scale-100"
-                }, /* @__PURE__ */ import_react70.default.createElement("path", {
-                    d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"
-                }))
-            }
-        ]
-    })));
-};
-// src/blocks/AuthForms/SignInPhone.tsx
-var import_react71 = __toESM(require("react"));
-var import_react_hook_form2 = require("react-hook-form");
-var SignInPhone = function(props) {
-    var methods = (0, import_react_hook_form2.useForm)();
-    var errors = methods.formState.errors, handleSubmit = methods.handleSubmit, control = methods.control;
-    var _ref = _sliced_to_array((0, import_react71.useState)(""), 2), userPhone = _ref[0], setUserPhone = _ref[1];
-    var _props_country, _props_label;
-    return /* @__PURE__ */ import_react71.default.createElement(Card, null, /* @__PURE__ */ import_react71.default.createElement(CardContent, {
-        headless: true
-    }, /* @__PURE__ */ import_react71.default.createElement("form", {
-        onSubmit: function(e) {
-            e.preventDefault();
-            props.handleSignIn(userPhone);
-        }
-    }, /* @__PURE__ */ import_react71.default.createElement(import_react_hook_form2.Controller, {
-        control: control,
-        name: "phone",
-        render: function(param) {
-            var field = param.field;
-            return /* @__PURE__ */ import_react71.default.createElement(HawaPhoneInput, _object_spread({
-                country: (_props_country = props.country) !== null && _props_country !== void 0 ? _props_country : "",
-                label: (_props_label = props.label) !== null && _props_label !== void 0 ? _props_label : "",
-                handleChange: function(e) {
-                    return setUserPhone(e.target.value);
-                }
-            }, field));
-        },
-        rules: {
-            required: props.phoneRequiredText
-        }
-    }), /* @__PURE__ */ import_react71.default.createElement("div", {
-        className: "mt-2"
-    }), /* @__PURE__ */ import_react71.default.createElement(Button, {
-        className: "w-full"
-    }, props.SignInButtonText))));
-};
-// src/blocks/AuthForms/SignInForm.tsx
-var import_react72 = __toESM(require("react"));
-var import_react_hook_form3 = require("react-hook-form");
-var import_clsx33 = __toESM(require("clsx"));
 // src/elements/Icons.tsx
 var Icons = {
     logo: function(props) {
@@ -8797,7 +8693,115 @@ var Icons = {
         }));
     }
 };
+// src/blocks/AuthForms/AppLanding.tsx
+var AppLanding = function(props) {
+    return /* @__PURE__ */ import_react70.default.createElement("div", null, /* @__PURE__ */ import_react70.default.createElement(Card, null, /* @__PURE__ */ import_react70.default.createElement(CardContent, {
+        headless: true,
+        className: "flex flex-col gap-6"
+    }, /* @__PURE__ */ import_react70.default.createElement(Button, {
+        className: "flex flex-row items-center gap-2",
+        variant: "outline"
+    }, /* @__PURE__ */ import_react70.default.createElement(Icons.google, {
+        className: "h-4 w-4"
+    }), "Continue With Google"), props.handleSignIn && /* @__PURE__ */ import_react70.default.createElement(Button, {
+        onClick: props.handleSignIn
+    }, props.texts.signIn), props.handleSignUp && /* @__PURE__ */ import_react70.default.createElement(Button, {
+        onClick: props.handleSignUp
+    }, props.texts.signUp))), /* @__PURE__ */ import_react70.default.createElement("div", {
+        className: "mt-6 flex flex-row justify-between"
+    }, /* @__PURE__ */ import_react70.default.createElement(HawaRadio, {
+        onChangeTab: props.handleLanguage,
+        design: "tabs",
+        options: [
+            {
+                value: "ar",
+                label: "عربي"
+            },
+            {
+                value: "en",
+                label: "English"
+            }
+        ]
+    }), /* @__PURE__ */ import_react70.default.createElement(HawaRadio, {
+        onChangeTab: props.handleColorMode,
+        design: "tabs",
+        options: [
+            {
+                value: "light",
+                label: /* @__PURE__ */ import_react70.default.createElement("svg", {
+                    width: "15",
+                    height: "15",
+                    viewBox: "0 0 15 15",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90"
+                }, /* @__PURE__ */ import_react70.default.createElement("path", {
+                    d: "M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z",
+                    fill: "currentColor",
+                    fillRule: "evenodd",
+                    clipRule: "evenodd"
+                }))
+            },
+            {
+                value: "dark",
+                label: /* @__PURE__ */ import_react70.default.createElement("svg", {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    className: "h-[1.2rem] w-[1.2rem]  transition-all dark:rotate-0 dark:scale-100"
+                }, /* @__PURE__ */ import_react70.default.createElement("path", {
+                    d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"
+                }))
+            }
+        ]
+    })));
+};
+// src/blocks/AuthForms/SignInPhone.tsx
+var import_react71 = __toESM(require("react"));
+var import_react_hook_form2 = require("react-hook-form");
+var SignInPhone = function(props) {
+    var methods = (0, import_react_hook_form2.useForm)();
+    var errors = methods.formState.errors, handleSubmit = methods.handleSubmit, control = methods.control;
+    var _ref = _sliced_to_array((0, import_react71.useState)(""), 2), userPhone = _ref[0], setUserPhone = _ref[1];
+    var _props_country, _props_label;
+    return /* @__PURE__ */ import_react71.default.createElement(Card, null, /* @__PURE__ */ import_react71.default.createElement(CardContent, {
+        headless: true
+    }, /* @__PURE__ */ import_react71.default.createElement("form", {
+        onSubmit: function(e) {
+            e.preventDefault();
+            props.handleSignIn(userPhone);
+        }
+    }, /* @__PURE__ */ import_react71.default.createElement(import_react_hook_form2.Controller, {
+        control: control,
+        name: "phone",
+        render: function(param) {
+            var field = param.field;
+            return /* @__PURE__ */ import_react71.default.createElement(HawaPhoneInput, _object_spread({
+                country: (_props_country = props.country) !== null && _props_country !== void 0 ? _props_country : "",
+                label: (_props_label = props.label) !== null && _props_label !== void 0 ? _props_label : "",
+                handleChange: function(e) {
+                    return setUserPhone(e.target.value);
+                }
+            }, field));
+        },
+        rules: {
+            required: props.phoneRequiredText
+        }
+    }), /* @__PURE__ */ import_react71.default.createElement("div", {
+        className: "mt-2"
+    }), /* @__PURE__ */ import_react71.default.createElement(Button, {
+        className: "w-full"
+    }, props.SignInButtonText))));
+};
 // src/blocks/AuthForms/SignInForm.tsx
+var import_react72 = __toESM(require("react"));
+var import_react_hook_form3 = require("react-hook-form");
 var SignInForm = function(props) {
     var _ref = (0, import_react_hook_form3.useForm)(), errors = _ref.formState.errors, handleSubmit = _ref.handleSubmit, control = _ref.control;
     var _field_value, _field_value1;
@@ -8897,7 +8901,7 @@ var SignInForm = function(props) {
         onClick: props.handleForgotPassword,
         className: "mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
     }, props.texts.forgotPasswordText)), /* @__PURE__ */ import_react72.default.createElement(Button, {
-        className: "w-full mt-4",
+        className: "mt-4 w-full",
         isLoading: props.isLoading
     }, props.texts.signInText), !props.withoutSignUp && /* @__PURE__ */ import_react72.default.createElement("div", {
         className: "p-3 text-center text-sm font-semibold dark:text-gray-300"
@@ -8905,23 +8909,26 @@ var SignInForm = function(props) {
         onClick: props.handleRouteToSignUp,
         className: "clickable-link"
     }, props.texts.createAccount)))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ import_react72.default.createElement(CardFooter, {
-        className: "grid grid-cols-1 gap-2 "
+        className: cn(props.logosOnly ? "flex flex-row gap-2 justify-center" : "grid grid-cols-1 gap-2")
     }, props.viaGoogle && /* @__PURE__ */ import_react72.default.createElement(Button, {
+        className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGoogleSignIn
     }, /* @__PURE__ */ import_react72.default.createElement(Icons.google, {
-        className: (0, import_clsx33.default)("h-4 w-4", props.direction === "rtl" ? "ml-2" : "mr-2")
-    }), props.texts.signInViaGoogleLabel), props.viaGithub && /* @__PURE__ */ import_react72.default.createElement(Button, {
+        className: "h-4 w-4"
+    }), !props.logosOnly && props.texts.signInViaGoogleLabel), props.viaGithub && /* @__PURE__ */ import_react72.default.createElement(Button, {
+        className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGithubSignIn
     }, /* @__PURE__ */ import_react72.default.createElement(Icons.gitHub, {
-        className: (0, import_clsx33.default)("h-4 w-4", props.direction === "rtl" ? "ml-2" : "mr-2")
-    }), props.texts.signInViaGithubLabel), props.viaTwitter && /* @__PURE__ */ import_react72.default.createElement(Button, {
+        className: "h-4 w-4"
+    }), !props.logosOnly && props.texts.signInViaGithubLabel), props.viaTwitter && /* @__PURE__ */ import_react72.default.createElement(Button, {
+        className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleTwitterSignIn
     }, /* @__PURE__ */ import_react72.default.createElement(Icons.twitter, {
-        className: (0, import_clsx33.default)("h-4 w-4", props.direction === "rtl" ? "ml-2" : "mr-2")
-    }), props.texts.signInViaTwitterLabel)) : null), /* @__PURE__ */ import_react72.default.createElement(InterfaceSettings, {
+        className: "h-4 w-4"
+    }), !props.logosOnly && props.texts.signInViaTwitterLabel)) : null), /* @__PURE__ */ import_react72.default.createElement(InterfaceSettings, {
         currentColorMode: props.currentColorMode,
         currentLanguage: props.currentLanguage,
         handleColorMode: props.handleColorMode,
@@ -8978,7 +8985,6 @@ function SignInBlock() {
 // src/blocks/AuthForms/SignUpForm.tsx
 var import_react73 = __toESM(require("react"));
 var import_react_hook_form4 = require("react-hook-form");
-var import_clsx34 = __toESM(require("clsx"));
 var SignUpForm = function(props) {
     var methods = (0, import_react_hook_form4.useForm)();
     var errors = methods.formState.errors, handleSubmit = methods.handleSubmit, control = methods.control;
@@ -9203,23 +9209,26 @@ var SignUpForm = function(props) {
         onClick: props.handleRouteToSignIn,
         className: "clickable-link"
     }, props.texts.signInText)))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ import_react73.default.createElement(CardFooter, {
-        className: "grid grid-cols-1 gap-2 "
+        className: cn(props.logosOnly ? "flex flex-row justify-center gap-2" : "grid grid-cols-1 gap-2")
     }, props.viaGoogle && /* @__PURE__ */ import_react73.default.createElement(Button, {
+        className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGoogleSignUp
     }, /* @__PURE__ */ import_react73.default.createElement(Icons.google, {
-        className: (0, import_clsx34.default)("h-4 w-4", props.direction === "rtl" ? "ml-2" : "mr-2")
-    }), props.texts.signUpViaGoogleLabel), props.viaGithub && /* @__PURE__ */ import_react73.default.createElement(Button, {
+        className: "h-4 w-4"
+    }), !props.logosOnly && props.texts.signUpViaGoogleLabel), props.viaGithub && /* @__PURE__ */ import_react73.default.createElement(Button, {
+        className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleGithubSignUp
     }, /* @__PURE__ */ import_react73.default.createElement(Icons.gitHub, {
-        className: (0, import_clsx34.default)("h-4 w-4", props.direction === "rtl" ? "ml-2" : "mr-2")
-    }), props.texts.signUpViaGithubLabel), props.viaTwitter && /* @__PURE__ */ import_react73.default.createElement(Button, {
+        className: "h-4 w-4"
+    }), !props.logosOnly && props.texts.signUpViaGithubLabel), props.viaTwitter && /* @__PURE__ */ import_react73.default.createElement(Button, {
+        className: "flex flex-row items-center gap-2",
         variant: "outline",
         onClick: props.handleTwitterSignUp
     }, /* @__PURE__ */ import_react73.default.createElement(Icons.twitter, {
-        className: (0, import_clsx34.default)("h-4 w-4", props.direction === "rtl" ? "ml-2" : "mr-2")
-    }), props.texts.signUpViaTwitterLabel)) : null), /* @__PURE__ */ import_react73.default.createElement(InterfaceSettings, {
+        className: "h-4 w-4"
+    }), !props.logosOnly && props.texts.signUpViaTwitterLabel)) : null), /* @__PURE__ */ import_react73.default.createElement(InterfaceSettings, {
         currentColorMode: props.currentColorMode,
         currentLanguage: props.currentLanguage,
         handleColorMode: props.handleColorMode,
@@ -10024,7 +10033,7 @@ var ComparingPlans = function(props) {
 };
 // src/blocks/Pricing/HorizontalPricing.tsx
 var import_react85 = __toESM(require("react"));
-var import_clsx35 = __toESM(require("clsx"));
+var import_clsx33 = __toESM(require("clsx"));
 var HorizontalPricing = function(props) {
     var _ref = _sliced_to_array((0, import_react85.useState)(null), 2), selectedCard = _ref[0], setSelectedCard = _ref[1];
     var data = [
@@ -10071,7 +10080,7 @@ var HorizontalPricing = function(props) {
             id: d.title,
             className: "peer appearance-none"
         }), /* @__PURE__ */ import_react85.default.createElement("div", {
-            className: (0, import_clsx35.default)(selectedCard === d.title ? "peer-checked:border-blue-500" : "", "peer flex cursor-pointer items-center justify-between  rounded-xl border bg-background px-5   py-4 shadow dark:text-white  peer-checked:[&_.active]:block peer-checked:[&_.default]:hidden")
+            className: (0, import_clsx33.default)(selectedCard === d.title ? "peer-checked:border-blue-500" : "", "peer flex cursor-pointer items-center justify-between  rounded-xl border bg-background px-5   py-4 shadow dark:text-white  peer-checked:[&_.active]:block peer-checked:[&_.default]:hidden")
         }, /* @__PURE__ */ import_react85.default.createElement("div", {
             className: "peer flex items-center gap-4"
         }, /* @__PURE__ */ import_react85.default.createElement(CheckIcons, null), /* @__PURE__ */ import_react85.default.createElement(CardText, {

package/dist/index.mjs

@@ -8883,117 +8883,6 @@ var UserSettingsForm = (props) => {
 
 // src/blocks/AuthForms/AppLanding.tsx
 import React84 from "react";
-var AppLanding = (props) => {
-  return /* @__PURE__ */ React84.createElement("div", null, /* @__PURE__ */ React84.createElement(Card, null, /* @__PURE__ */ React84.createElement(CardContent, { headless: true, className: "flex flex-col gap-6" }, props.handleSignIn && /* @__PURE__ */ React84.createElement(Button, { onClick: props.handleSignIn }, props.texts.signIn), props.handleSignUp && /* @__PURE__ */ React84.createElement(Button, { onClick: props.handleSignUp }, props.texts.signUp))), /* @__PURE__ */ React84.createElement("div", { className: "mt-6 flex flex-row justify-between" }, /* @__PURE__ */ React84.createElement(
-    HawaRadio,
-    {
-      onChangeTab: props.handleLanguage,
-      design: "tabs",
-      options: [
-        { value: "ar", label: "\u0639\u0631\u0628\u064A" },
-        { value: "en", label: "English" }
-      ]
-    }
-  ), /* @__PURE__ */ React84.createElement(
-    HawaRadio,
-    {
-      onChangeTab: props.handleColorMode,
-      design: "tabs",
-      options: [
-        {
-          value: "light",
-          label: /* @__PURE__ */ React84.createElement(
-            "svg",
-            {
-              width: "15",
-              height: "15",
-              viewBox: "0 0 15 15",
-              fill: "none",
-              xmlns: "http://www.w3.org/2000/svg",
-              className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90"
-            },
-            /* @__PURE__ */ React84.createElement(
-              "path",
-              {
-                d: "M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z",
-                fill: "currentColor",
-                fillRule: "evenodd",
-                clipRule: "evenodd"
-              }
-            )
-          )
-        },
-        {
-          value: "dark",
-          label: /* @__PURE__ */ React84.createElement(
-            "svg",
-            {
-              xmlns: "http://www.w3.org/2000/svg",
-              width: "24",
-              height: "24",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              className: "h-[1.2rem] w-[1.2rem]  transition-all dark:rotate-0 dark:scale-100"
-            },
-            /* @__PURE__ */ React84.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
-          )
-        }
-      ]
-    }
-  )));
-};
-
-// src/blocks/AuthForms/SignInPhone.tsx
-import React85, { useState as useState41 } from "react";
-import { Controller as Controller2, useForm as useForm2 } from "react-hook-form";
-var SignInPhone = (props) => {
-  const methods = useForm2();
-  const {
-    formState: { errors },
-    handleSubmit,
-    control
-  } = methods;
-  const [userPhone, setUserPhone] = useState41("");
-  return /* @__PURE__ */ React85.createElement(Card, null, /* @__PURE__ */ React85.createElement(CardContent, { headless: true }, /* @__PURE__ */ React85.createElement(
-    "form",
-    {
-      onSubmit: (e) => {
-        e.preventDefault();
-        props.handleSignIn(userPhone);
-      }
-    },
-    /* @__PURE__ */ React85.createElement(
-      Controller2,
-      {
-        control,
-        name: "phone",
-        render: ({ field }) => /* @__PURE__ */ React85.createElement(
-          HawaPhoneInput,
-          {
-            country: props.country ?? "",
-            label: props.label ?? "",
-            handleChange: (e) => setUserPhone(e.target.value),
-            ...field
-          }
-        ),
-        rules: {
-          required: props.phoneRequiredText
-        }
-      }
-    ),
-    /* @__PURE__ */ React85.createElement("div", { className: "mt-2" }),
-    /* @__PURE__ */ React85.createElement(Button, { className: "w-full" }, props.SignInButtonText)
-  )));
-};
-
-// src/blocks/AuthForms/SignInForm.tsx
-import React86 from "react";
-import { Controller as Controller3, useForm as useForm3 } from "react-hook-form";
-import clsx33 from "clsx";
 
 // src/elements/Icons.tsx
 var Icons = {
@@ -9126,7 +9015,125 @@ var Icons = {
   )
 };
 
+// src/blocks/AuthForms/AppLanding.tsx
+var AppLanding = (props) => {
+  return /* @__PURE__ */ React84.createElement("div", null, /* @__PURE__ */ React84.createElement(Card, null, /* @__PURE__ */ React84.createElement(CardContent, { headless: true, className: "flex flex-col gap-6" }, /* @__PURE__ */ React84.createElement(
+    Button,
+    {
+      className: "flex flex-row items-center gap-2",
+      variant: "outline"
+    },
+    /* @__PURE__ */ React84.createElement(Icons.google, { className: "h-4 w-4" }),
+    "Continue With Google"
+  ), props.handleSignIn && /* @__PURE__ */ React84.createElement(Button, { onClick: props.handleSignIn }, props.texts.signIn), props.handleSignUp && /* @__PURE__ */ React84.createElement(Button, { onClick: props.handleSignUp }, props.texts.signUp))), /* @__PURE__ */ React84.createElement("div", { className: "mt-6 flex flex-row justify-between" }, /* @__PURE__ */ React84.createElement(
+    HawaRadio,
+    {
+      onChangeTab: props.handleLanguage,
+      design: "tabs",
+      options: [
+        { value: "ar", label: "\u0639\u0631\u0628\u064A" },
+        { value: "en", label: "English" }
+      ]
+    }
+  ), /* @__PURE__ */ React84.createElement(
+    HawaRadio,
+    {
+      onChangeTab: props.handleColorMode,
+      design: "tabs",
+      options: [
+        {
+          value: "light",
+          label: /* @__PURE__ */ React84.createElement(
+            "svg",
+            {
+              width: "15",
+              height: "15",
+              viewBox: "0 0 15 15",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90"
+            },
+            /* @__PURE__ */ React84.createElement(
+              "path",
+              {
+                d: "M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z",
+                fill: "currentColor",
+                fillRule: "evenodd",
+                clipRule: "evenodd"
+              }
+            )
+          )
+        },
+        {
+          value: "dark",
+          label: /* @__PURE__ */ React84.createElement(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "h-[1.2rem] w-[1.2rem]  transition-all dark:rotate-0 dark:scale-100"
+            },
+            /* @__PURE__ */ React84.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+          )
+        }
+      ]
+    }
+  )));
+};
+
+// src/blocks/AuthForms/SignInPhone.tsx
+import React85, { useState as useState41 } from "react";
+import { Controller as Controller2, useForm as useForm2 } from "react-hook-form";
+var SignInPhone = (props) => {
+  const methods = useForm2();
+  const {
+    formState: { errors },
+    handleSubmit,
+    control
+  } = methods;
+  const [userPhone, setUserPhone] = useState41("");
+  return /* @__PURE__ */ React85.createElement(Card, null, /* @__PURE__ */ React85.createElement(CardContent, { headless: true }, /* @__PURE__ */ React85.createElement(
+    "form",
+    {
+      onSubmit: (e) => {
+        e.preventDefault();
+        props.handleSignIn(userPhone);
+      }
+    },
+    /* @__PURE__ */ React85.createElement(
+      Controller2,
+      {
+        control,
+        name: "phone",
+        render: ({ field }) => /* @__PURE__ */ React85.createElement(
+          HawaPhoneInput,
+          {
+            country: props.country ?? "",
+            label: props.label ?? "",
+            handleChange: (e) => setUserPhone(e.target.value),
+            ...field
+          }
+        ),
+        rules: {
+          required: props.phoneRequiredText
+        }
+      }
+    ),
+    /* @__PURE__ */ React85.createElement("div", { className: "mt-2" }),
+    /* @__PURE__ */ React85.createElement(Button, { className: "w-full" }, props.SignInButtonText)
+  )));
+};
+
 // src/blocks/AuthForms/SignInForm.tsx
+import React86 from "react";
+import { Controller as Controller3, useForm as useForm3 } from "react-hook-form";
 var SignInForm = (props) => {
   const {
     formState: { errors },
@@ -9228,38 +9235,51 @@ var SignInForm = (props) => {
       className: "mb-3 w-fit cursor-pointer text-xs dark:text-gray-300"
     },
     props.texts.forgotPasswordText
-  )), /* @__PURE__ */ React86.createElement(Button, { className: "w-full mt-4", isLoading: props.isLoading }, props.texts.signInText), !props.withoutSignUp && /* @__PURE__ */ React86.createElement("div", { className: "p-3 text-center text-sm font-semibold dark:text-gray-300" }, props.texts.newUserText, " ", /* @__PURE__ */ React86.createElement(
+  )), /* @__PURE__ */ React86.createElement(Button, { className: "mt-4 w-full", isLoading: props.isLoading }, props.texts.signInText), !props.withoutSignUp && /* @__PURE__ */ React86.createElement("div", { className: "p-3 text-center text-sm font-semibold dark:text-gray-300" }, props.texts.newUserText, " ", /* @__PURE__ */ React86.createElement(
     "span",
     {
       onClick: props.handleRouteToSignUp,
       className: "clickable-link"
     },
     props.texts.createAccount
-  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React86.createElement(CardFooter, { className: "grid grid-cols-1 gap-2 " }, props.viaGoogle && /* @__PURE__ */ React86.createElement(Button, { variant: "outline", onClick: props.handleGoogleSignIn }, /* @__PURE__ */ React86.createElement(
-    Icons.google,
-    {
-      className: clsx33(
-        "h-4 w-4",
-        props.direction === "rtl" ? "ml-2" : "mr-2"
-      )
-    }
-  ), props.texts.signInViaGoogleLabel), props.viaGithub && /* @__PURE__ */ React86.createElement(Button, { variant: "outline", onClick: props.handleGithubSignIn }, /* @__PURE__ */ React86.createElement(
-    Icons.gitHub,
-    {
-      className: clsx33(
-        "h-4 w-4",
-        props.direction === "rtl" ? "ml-2" : "mr-2"
-      )
-    }
-  ), props.texts.signInViaGithubLabel), props.viaTwitter && /* @__PURE__ */ React86.createElement(Button, { variant: "outline", onClick: props.handleTwitterSignIn }, /* @__PURE__ */ React86.createElement(
-    Icons.twitter,
+  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React86.createElement(
+    CardFooter,
     {
-      className: clsx33(
-        "h-4 w-4",
-        props.direction === "rtl" ? "ml-2" : "mr-2"
+      className: cn(
+        props.logosOnly ? "flex flex-row gap-2 justify-center" : "grid grid-cols-1 gap-2"
       )
-    }
-  ), props.texts.signInViaTwitterLabel)) : null), /* @__PURE__ */ React86.createElement(
+    },
+    props.viaGoogle && /* @__PURE__ */ React86.createElement(
+      Button,
+      {
+        className: "flex flex-row items-center gap-2",
+        variant: "outline",
+        onClick: props.handleGoogleSignIn
+      },
+      /* @__PURE__ */ React86.createElement(Icons.google, { className: "h-4 w-4" }),
+      !props.logosOnly && props.texts.signInViaGoogleLabel
+    ),
+    props.viaGithub && /* @__PURE__ */ React86.createElement(
+      Button,
+      {
+        className: "flex flex-row items-center gap-2",
+        variant: "outline",
+        onClick: props.handleGithubSignIn
+      },
+      /* @__PURE__ */ React86.createElement(Icons.gitHub, { className: "h-4 w-4" }),
+      !props.logosOnly && props.texts.signInViaGithubLabel
+    ),
+    props.viaTwitter && /* @__PURE__ */ React86.createElement(
+      Button,
+      {
+        className: "flex flex-row items-center gap-2",
+        variant: "outline",
+        onClick: props.handleTwitterSignIn
+      },
+      /* @__PURE__ */ React86.createElement(Icons.twitter, { className: "h-4 w-4" }),
+      !props.logosOnly && props.texts.signInViaTwitterLabel
+    )
+  ) : null), /* @__PURE__ */ React86.createElement(
     InterfaceSettings,
     {
       currentColorMode: props.currentColorMode,
@@ -9278,7 +9298,6 @@ function SignInBlock() {
 // src/blocks/AuthForms/SignUpForm.tsx
 import React87 from "react";
 import { Controller as Controller4, FormProvider as FormProvider2, useForm as useForm4 } from "react-hook-form";
-import clsx34 from "clsx";
 var SignUpForm = (props) => {
   const methods = useForm4();
   const {
@@ -9501,31 +9520,44 @@ var SignUpForm = (props) => {
       className: "clickable-link"
     },
     props.texts.signInText
-  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React87.createElement(CardFooter, { className: "grid grid-cols-1 gap-2 " }, props.viaGoogle && /* @__PURE__ */ React87.createElement(Button, { variant: "outline", onClick: props.handleGoogleSignUp }, /* @__PURE__ */ React87.createElement(
-    Icons.google,
-    {
-      className: clsx34(
-        "h-4 w-4",
-        props.direction === "rtl" ? "ml-2" : "mr-2"
-      )
-    }
-  ), props.texts.signUpViaGoogleLabel), props.viaGithub && /* @__PURE__ */ React87.createElement(Button, { variant: "outline", onClick: props.handleGithubSignUp }, /* @__PURE__ */ React87.createElement(
-    Icons.gitHub,
-    {
-      className: clsx34(
-        "h-4 w-4",
-        props.direction === "rtl" ? "ml-2" : "mr-2"
-      )
-    }
-  ), props.texts.signUpViaGithubLabel), props.viaTwitter && /* @__PURE__ */ React87.createElement(Button, { variant: "outline", onClick: props.handleTwitterSignUp }, /* @__PURE__ */ React87.createElement(
-    Icons.twitter,
+  )))), props.viaGithub || props.viaGoogle || props.viaTwitter ? /* @__PURE__ */ React87.createElement(
+    CardFooter,
     {
-      className: clsx34(
-        "h-4 w-4",
-        props.direction === "rtl" ? "ml-2" : "mr-2"
+      className: cn(
+        props.logosOnly ? "flex flex-row justify-center gap-2" : "grid grid-cols-1 gap-2"
       )
-    }
-  ), props.texts.signUpViaTwitterLabel)) : null), /* @__PURE__ */ React87.createElement(
+    },
+    props.viaGoogle && /* @__PURE__ */ React87.createElement(
+      Button,
+      {
+        className: "flex flex-row items-center gap-2",
+        variant: "outline",
+        onClick: props.handleGoogleSignUp
+      },
+      /* @__PURE__ */ React87.createElement(Icons.google, { className: "h-4 w-4" }),
+      !props.logosOnly && props.texts.signUpViaGoogleLabel
+    ),
+    props.viaGithub && /* @__PURE__ */ React87.createElement(
+      Button,
+      {
+        className: "flex flex-row items-center gap-2",
+        variant: "outline",
+        onClick: props.handleGithubSignUp
+      },
+      /* @__PURE__ */ React87.createElement(Icons.gitHub, { className: "h-4 w-4" }),
+      !props.logosOnly && props.texts.signUpViaGithubLabel
+    ),
+    props.viaTwitter && /* @__PURE__ */ React87.createElement(
+      Button,
+      {
+        className: "flex flex-row items-center gap-2",
+        variant: "outline",
+        onClick: props.handleTwitterSignUp
+      },
+      /* @__PURE__ */ React87.createElement(Icons.twitter, { className: "h-4 w-4" }),
+      !props.logosOnly && props.texts.signUpViaTwitterLabel
+    )
+  ) : null), /* @__PURE__ */ React87.createElement(
     InterfaceSettings,
     {
       currentColorMode: props.currentColorMode,
@@ -10287,7 +10319,7 @@ var ComparingPlans = (props) => {
 
 // src/blocks/Pricing/HorizontalPricing.tsx
 import React99, { useState as useState47 } from "react";
-import clsx35 from "clsx";
+import clsx33 from "clsx";
 var HorizontalPricing = (props) => {
   const [selectedCard, setSelectedCard] = useState47(null);
   let data = [
@@ -10328,7 +10360,7 @@ var HorizontalPricing = (props) => {
     /* @__PURE__ */ React99.createElement(
       "div",
       {
-        className: clsx35(
+        className: clsx33(
           selectedCard === d.title ? "peer-checked:border-blue-500" : "",
           "peer flex cursor-pointer items-center justify-between  rounded-xl border bg-background px-5   py-4 shadow dark:text-white  peer-checked:[&_.active]:block peer-checked:[&_.default]:hidden"
         )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.82",
+  "version": "0.1.84",
   "description": "Modern UI Kit made with Tailwind & Radix Primitives",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/blocks/AuthForms/AppLanding.tsx

@@ -2,6 +2,7 @@ import React, { FC } from "react"
 import { HawaRadio } from "../../elements"
 import { Card, CardContent } from "../../elements/Card"
 import { Button } from "../../elements/Button"
+import { Icons } from "../../elements/Icons"
 
 type AppLandingTypes = {
   handleSignIn: () => void
@@ -15,13 +16,26 @@ type AppLandingTypes = {
   }
   size: "small" | "normal" | "full"
 }
+
+//TODO: update Google auth button
 export const AppLanding: FC<AppLandingTypes> = (props) => {
   return (
     <div>
       <Card>
         <CardContent headless className="flex flex-col gap-6">
+          <Button
+            className="flex flex-row items-center gap-2"
+            variant="outline"
+            // onClick={props.handleGoogleSignIn}
+          >
+            <Icons.google className="h-4 w-4" />
+            {/* {!props.logosOnly && props.texts.signInViaGoogleLabel} */}
+            Continue With Google
+          </Button>
+
           {props.handleSignIn && (
             <Button onClick={props.handleSignIn}>{props.texts.signIn}</Button>
+            // <Button onClick={props.handleSignIn}>Continue With Google</Button>
           )}
           {props.handleSignUp && (
             <Button onClick={props.handleSignUp}>{props.texts.signUp}</Button>

package/src/blocks/AuthForms/SignInForm.tsx

@@ -1,7 +1,5 @@
 import React, { FC } from "react"
 import { Controller, useForm } from "react-hook-form"
-import clsx from "clsx"
-
 import {
   HawaTextField,
   HawaAlert,
@@ -11,6 +9,7 @@ import {
 import { Card, CardContent, CardFooter } from "../../elements/Card"
 import { Button } from "../../elements/Button"
 import { Icons } from "../../elements/Icons"
+import { cn } from "../../util"
 
 export const SignInForm: FC<SignInFormTypes> = (props) => {
   const {
@@ -132,7 +131,7 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
               </>
             )}
 
-            <Button className="w-full mt-4" isLoading={props.isLoading}>
+            <Button className="mt-4 w-full" isLoading={props.isLoading}>
               {props.texts.signInText}
             </Button>
             {!props.withoutSignUp && (
@@ -151,38 +150,39 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
 
         {/* 3rd Party Sign Auth Buttons */}
         {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
-          <CardFooter className="grid grid-cols-1 gap-2 ">
+          <CardFooter
+            className={cn(
+              props.logosOnly ? "flex flex-row gap-2 justify-center" : "grid grid-cols-1 gap-2"
+            )}
+          >
             {props.viaGoogle && (
-              <Button variant="outline" onClick={props.handleGoogleSignIn}>
-                <Icons.google
-                  className={clsx(
-                    "h-4 w-4",
-                    props.direction === "rtl" ? "ml-2" : "mr-2"
-                  )}
-                />
-                {props.texts.signInViaGoogleLabel}
+              <Button
+                className="flex flex-row items-center gap-2"
+                variant="outline"
+                onClick={props.handleGoogleSignIn}
+              >
+                <Icons.google className="h-4 w-4" />
+                {!props.logosOnly && props.texts.signInViaGoogleLabel}
               </Button>
             )}
             {props.viaGithub && (
-              <Button variant="outline" onClick={props.handleGithubSignIn}>
-                <Icons.gitHub
-                  className={clsx(
-                    "h-4 w-4",
-                    props.direction === "rtl" ? "ml-2" : "mr-2"
-                  )}
-                />
-                {props.texts.signInViaGithubLabel}
+              <Button
+                className="flex flex-row items-center gap-2"
+                variant="outline"
+                onClick={props.handleGithubSignIn}
+              >
+                <Icons.gitHub className="h-4 w-4" />
+                {!props.logosOnly && props.texts.signInViaGithubLabel}
               </Button>
             )}
             {props.viaTwitter && (
-              <Button variant="outline" onClick={props.handleTwitterSignIn}>
-                <Icons.twitter
-                  className={clsx(
-                    "h-4 w-4",
-                    props.direction === "rtl" ? "ml-2" : "mr-2"
-                  )}
-                />
-                {props.texts.signInViaTwitterLabel}
+              <Button
+                className="flex flex-row items-center gap-2"
+                variant="outline"
+                onClick={props.handleTwitterSignIn}
+              >
+                <Icons.twitter className="h-4 w-4" />
+                {!props.logosOnly && props.texts.signInViaTwitterLabel}
               </Button>
             )}
           </CardFooter>
@@ -203,6 +203,7 @@ type SignInFormTypes = {
   currentLanguage?: any
   handleColorMode?: () => void
   currentColorMode?: any
+  logosOnly?: boolean
   direction?: "rtl" | "ltr"
   showError?: any
   errorTitle?: string

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -10,7 +10,7 @@ import { Controller, FormProvider, useForm } from "react-hook-form"
 import { Card, CardContent, CardFooter } from "../../elements/Card"
 import { Button } from "../../elements/Button"
 import { Icons } from "../../elements/Icons"
-import clsx from "clsx"
+import { cn } from "../../util"
 
 type SignUpFormTypes = {
   handleLanguage?: () => void
@@ -18,6 +18,7 @@ type SignUpFormTypes = {
   handleColorMode?: () => void
   currentColorMode?: any
   direction?: "rtl" | "ltr"
+  logosOnly?: boolean
   texts: {
     fullNameLabel: string
     fullNamePlaceholder: string
@@ -307,38 +308,41 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
         </CardContent>
 
         {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
-          <CardFooter className="grid grid-cols-1 gap-2 ">
+          <CardFooter
+            className={cn(
+              props.logosOnly
+                ? "flex flex-row justify-center gap-2"
+                : "grid grid-cols-1 gap-2"
+            )}
+          >
             {props.viaGoogle && (
-              <Button variant="outline" onClick={props.handleGoogleSignUp}>
-                <Icons.google
-                  className={clsx(
-                    "h-4 w-4",
-                    props.direction === "rtl" ? "ml-2" : "mr-2"
-                  )}
-                />
-                {props.texts.signUpViaGoogleLabel}
+              <Button
+                className="flex flex-row items-center gap-2"
+                variant="outline"
+                onClick={props.handleGoogleSignUp}
+              >
+                <Icons.google className="h-4 w-4" />
+                {!props.logosOnly && props.texts.signUpViaGoogleLabel}
               </Button>
             )}
             {props.viaGithub && (
-              <Button variant="outline" onClick={props.handleGithubSignUp}>
-                <Icons.gitHub
-                  className={clsx(
-                    "h-4 w-4",
-                    props.direction === "rtl" ? "ml-2" : "mr-2"
-                  )}
-                />
-                {props.texts.signUpViaGithubLabel}
+              <Button
+                className="flex flex-row items-center gap-2"
+                variant="outline"
+                onClick={props.handleGithubSignUp}
+              >
+                <Icons.gitHub className="h-4 w-4" />
+                {!props.logosOnly && props.texts.signUpViaGithubLabel}
               </Button>
             )}
             {props.viaTwitter && (
-              <Button variant="outline" onClick={props.handleTwitterSignUp}>
-                <Icons.twitter
-                  className={clsx(
-                    "h-4 w-4",
-                    props.direction === "rtl" ? "ml-2" : "mr-2"
-                  )}
-                />
-                {props.texts.signUpViaTwitterLabel}
+              <Button
+                className="flex flex-row items-center gap-2"
+                variant="outline"
+                onClick={props.handleTwitterSignUp}
+              >
+                <Icons.twitter className="h-4 w-4" />
+                {!props.logosOnly && props.texts.signUpViaTwitterLabel}
               </Button>
             )}
           </CardFooter>