@opexa/portal-components 0.0.447 → 0.0.449

package/dist/components/Jackpots/Jackpots.module.css

@@ -1,184 +1,184 @@
-@keyframes arrow-green-flash {
-  0% {
-    color: #abefc6;
-  }
-  100% {
-    color: #079455;
-  }
-}
-
-.animate-arrow-green-flash-1 {
-  animation: arrow-green-flash 0.4s infinite;
-  animation-delay: -0.2s;
-}
-
-.animate-arrow-green-flash-2 {
-  animation: arrow-green-flash 0.4s infinite;
-  animation-delay: -0.1s;
-}
-
-.animate-arrow-green-flash-3 {
-  animation: arrow-green-flash 0.4s infinite;
-}
-
-@keyframes arrow-red-flash {
-  0%,
-  100% {
-    color: #f97066;
-  }
-  50% {
-    color: #fecdca;
-  }
-}
-
-.animate-arrow-red-flash-1 {
-  animation: arrow-red-flash 0.4s infinite;
-}
-
-.animate-arrow-red-flash-2 {
-  animation: arrow-red-flash 0.4s infinite;
-  animation-delay: -0.1s;
-}
-
-.animate-arrow-red-flash-3 {
-  animation: arrow-red-flash 0.4s infinite;
-  animation-delay: -0.2s;
-}
-
-/* Animated BG */
-@keyframes rotate {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-.light-rays {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-
-  --first: var(--color-jackpot-rays-primary);
-  --second: var(--color-jackpot-rays-secondary);
-}
-
-.light-rays::before,
-.light-rays::after {
-  content: '';
-  position: absolute;
-  top: var(--light-rays-top, 150px);
-  left: calc(50% - 90px);
-  margin: -100vmax;
-  width: 200vmax;
-  height: 200vmax;
-  opacity: 0.6;
-  transform-origin: center;
-}
-
-.light-rays::before {
-  background: conic-gradient(
-    var(--first) 0deg 7.2deg,
-    var(--second) 7.2deg 14.4deg,
-    var(--first) 14.4deg 21.6deg,
-    var(--second) 21.6deg 28.8deg,
-    var(--first) 28.8deg 36deg,
-    var(--second) 36deg 43.2deg,
-    var(--first) 43.2deg 50.4deg,
-    var(--second) 50.4deg 57.6deg,
-    var(--first) 57.6deg 64.8deg,
-    var(--second) 64.8deg 72deg,
-    var(--first) 72deg 79.2deg,
-    var(--second) 79.2deg 86.4deg,
-    var(--first) 86.4deg 93.6deg,
-    var(--second) 93.6deg 100.8deg,
-    var(--first) 100.8deg 108deg,
-    var(--second) 108deg 115.2deg,
-    var(--first) 115.2deg 122.4deg,
-    var(--second) 122.4deg 129.6deg,
-    var(--first) 129.6deg 136.8deg,
-    var(--second) 136.8deg 144deg,
-    var(--first) 144deg 151.2deg,
-    var(--second) 151.2deg 158.4deg,
-    var(--first) 158.4deg 165.6deg,
-    var(--second) 165.6deg 172.8deg,
-    var(--first) 172.8deg 180deg,
-    var(--second) 180deg 187.2deg,
-    var(--first) 187.2deg 194.4deg,
-    var(--second) 194.4deg 201.6deg,
-    var(--first) 201.6deg 208.8deg,
-    var(--second) 208.8deg 216deg,
-    var(--first) 216deg 223.2deg,
-    var(--second) 223.2deg 230.4deg,
-    var(--first) 230.4deg 237.6deg,
-    var(--second) 237.6deg 244.8deg,
-    var(--first) 244.8deg 252deg,
-    var(--second) 252deg 259.2deg,
-    var(--first) 259.2deg 266.4deg,
-    var(--second) 266.4deg 273.6deg,
-    var(--first) 273.6deg 280.8deg,
-    var(--second) 280.8deg 288deg,
-    var(--first) 288deg 295.2deg,
-    var(--second) 295.2deg 302.4deg,
-    var(--first) 302.4deg 309.6deg,
-    var(--second) 309.6deg 316.8deg,
-    var(--first) 316.8deg 324deg,
-    var(--second) 324deg 331.2deg,
-    var(--first) 331.2deg 338.4deg,
-    var(--second) 338.4deg 345.6deg,
-    var(--first) 345.6deg 352.8deg,
-    var(--second) 352.8deg 360deg
-  );
-  animation: rotate 20s linear infinite;
-}
-
-@media (max-width: 1024px) {
-  .light-rays::before,
-  .light-rays::after {
-    left: auto;
-    right: 11%;
-  }
-}
-
-/* ScrollArea.module.css */
-.scrollArea {
-  overflow-y: scroll;
-  padding-right: 4px;
-}
-
-/* WebKit-based browsers */
-.scrollArea::-webkit-scrollbar {
-  width: 8px;
-}
-
-.scrollArea::-webkit-scrollbar-track {
-  background: var(--color-jackpot-table-scrollbar-track);
-  border-radius: 9999px;
-}
-
-.scrollArea::-webkit-scrollbar-thumb {
-  background-color: var(--color-jackpot-table-scrollbar-thumb);
-  border-radius: 9999px;
-}
-
-@keyframes waveColor {
-  0%,
-  2.5% {
-    color: var(--wave-highlight-color);
-  }
-  2.51%,
-  100% {
-    color: var(--color-brand-300);
-  }
-}
-
-.animate-wave-color-success {
-  --wave-highlight-color: var(--color-success-800);
-  animation: waveColor 4s ease-in-out infinite;
-}
-
-.animate-wave-color-error {
-  --wave-highlight-color: var(--color-error-600);
-  animation: waveColor 4s ease-in-out infinite;
-}
+@keyframes arrow-green-flash {
+  0% {
+    color: #abefc6;
+  }
+  100% {
+    color: #079455;
+  }
+}
+
+.animate-arrow-green-flash-1 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+.animate-arrow-green-flash-2 {
+  animation: arrow-green-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-green-flash-3 {
+  animation: arrow-green-flash 0.4s infinite;
+}
+
+@keyframes arrow-red-flash {
+  0%,
+  100% {
+    color: #f97066;
+  }
+  50% {
+    color: #fecdca;
+  }
+}
+
+.animate-arrow-red-flash-1 {
+  animation: arrow-red-flash 0.4s infinite;
+}
+
+.animate-arrow-red-flash-2 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.1s;
+}
+
+.animate-arrow-red-flash-3 {
+  animation: arrow-red-flash 0.4s infinite;
+  animation-delay: -0.2s;
+}
+
+/* Animated BG */
+@keyframes rotate {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.light-rays {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+
+  --first: var(--color-jackpot-rays-primary);
+  --second: var(--color-jackpot-rays-secondary);
+}
+
+.light-rays::before,
+.light-rays::after {
+  content: '';
+  position: absolute;
+  top: var(--light-rays-top, 150px);
+  left: calc(50% - 90px);
+  margin: -100vmax;
+  width: 200vmax;
+  height: 200vmax;
+  opacity: 0.6;
+  transform-origin: center;
+}
+
+.light-rays::before {
+  background: conic-gradient(
+    var(--first) 0deg 7.2deg,
+    var(--second) 7.2deg 14.4deg,
+    var(--first) 14.4deg 21.6deg,
+    var(--second) 21.6deg 28.8deg,
+    var(--first) 28.8deg 36deg,
+    var(--second) 36deg 43.2deg,
+    var(--first) 43.2deg 50.4deg,
+    var(--second) 50.4deg 57.6deg,
+    var(--first) 57.6deg 64.8deg,
+    var(--second) 64.8deg 72deg,
+    var(--first) 72deg 79.2deg,
+    var(--second) 79.2deg 86.4deg,
+    var(--first) 86.4deg 93.6deg,
+    var(--second) 93.6deg 100.8deg,
+    var(--first) 100.8deg 108deg,
+    var(--second) 108deg 115.2deg,
+    var(--first) 115.2deg 122.4deg,
+    var(--second) 122.4deg 129.6deg,
+    var(--first) 129.6deg 136.8deg,
+    var(--second) 136.8deg 144deg,
+    var(--first) 144deg 151.2deg,
+    var(--second) 151.2deg 158.4deg,
+    var(--first) 158.4deg 165.6deg,
+    var(--second) 165.6deg 172.8deg,
+    var(--first) 172.8deg 180deg,
+    var(--second) 180deg 187.2deg,
+    var(--first) 187.2deg 194.4deg,
+    var(--second) 194.4deg 201.6deg,
+    var(--first) 201.6deg 208.8deg,
+    var(--second) 208.8deg 216deg,
+    var(--first) 216deg 223.2deg,
+    var(--second) 223.2deg 230.4deg,
+    var(--first) 230.4deg 237.6deg,
+    var(--second) 237.6deg 244.8deg,
+    var(--first) 244.8deg 252deg,
+    var(--second) 252deg 259.2deg,
+    var(--first) 259.2deg 266.4deg,
+    var(--second) 266.4deg 273.6deg,
+    var(--first) 273.6deg 280.8deg,
+    var(--second) 280.8deg 288deg,
+    var(--first) 288deg 295.2deg,
+    var(--second) 295.2deg 302.4deg,
+    var(--first) 302.4deg 309.6deg,
+    var(--second) 309.6deg 316.8deg,
+    var(--first) 316.8deg 324deg,
+    var(--second) 324deg 331.2deg,
+    var(--first) 331.2deg 338.4deg,
+    var(--second) 338.4deg 345.6deg,
+    var(--first) 345.6deg 352.8deg,
+    var(--second) 352.8deg 360deg
+  );
+  animation: rotate 20s linear infinite;
+}
+
+@media (max-width: 1024px) {
+  .light-rays::before,
+  .light-rays::after {
+    left: auto;
+    right: 11%;
+  }
+}
+
+/* ScrollArea.module.css */
+.scrollArea {
+  overflow-y: scroll;
+  padding-right: 4px;
+}
+
+/* WebKit-based browsers */
+.scrollArea::-webkit-scrollbar {
+  width: 8px;
+}
+
+.scrollArea::-webkit-scrollbar-track {
+  background: var(--color-jackpot-table-scrollbar-track);
+  border-radius: 9999px;
+}
+
+.scrollArea::-webkit-scrollbar-thumb {
+  background-color: var(--color-jackpot-table-scrollbar-thumb);
+  border-radius: 9999px;
+}
+
+@keyframes waveColor {
+  0%,
+  2.5% {
+    color: var(--wave-highlight-color);
+  }
+  2.51%,
+  100% {
+    color: var(--color-brand-300);
+  }
+}
+
+.animate-wave-color-success {
+  --wave-highlight-color: var(--color-success-800);
+  animation: waveColor 4s ease-in-out infinite;
+}
+
+.animate-wave-color-error {
+  --wave-highlight-color: var(--color-error-600);
+  animation: waveColor 4s ease-in-out infinite;
+}

package/dist/components/PortalProvider/CXDTokenObserver.js

@@ -1,30 +1,30 @@
 'use client';
 import { addHours } from 'date-fns';
 import { clamp } from 'lodash-es';
-import { useSearchParams } from 'next/navigation';
 import { useLocalStorage, useTimeout } from 'usehooks-ts';
 import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
 export function CXDTokenObserver() {
-    const searchParams = useSearchParams();
-    const cxdToken = searchParams.get('cxd');
-    const accountQuery = useAccountQuery();
-    const account = accountQuery.data;
-    const [cxd, setCxd, removeCxd] = useLocalStorage('WebPortalCellxpertCxd', null);
+    const { data: account } = useAccountQuery();
+    const accountCxd = {
+        cxd: account?.cellxpertDetails?.cxd,
+    };
+    const [cxd, setCxd, removeCxd] = useLocalStorage('cxd', null);
     const now = new Date();
-    const shouldTimeoutRun = cxdToken && account;
     const removeCxdUntilInMs = cxd?.timestamp
         ? clamp(cxd.timestamp - now.getTime(), 0, Infinity)
         : 0;
     useTimeout(() => {
-        const isSame = cxd?.cxd === cxdToken;
+        const isSame = cxd?.cxd === accountCxd.cxd;
         if (!isSame) {
             const extendedTimestamp = addHours(new Date(), 6).getTime();
             setCxd({
-                cxd: cxdToken,
+                cxd: accountCxd.cxd,
                 timestamp: extendedTimestamp,
             });
         }
-    }, shouldTimeoutRun ? 100 : null);
-    useTimeout(() => removeCxd(), shouldTimeoutRun ? removeCxdUntilInMs : null);
+    }, account ? 100 : null);
+    useTimeout(() => {
+        removeCxd();
+    }, account ? removeCxdUntilInMs : null);
     return null;
 }

package/dist/components/Quests/JourneyQuest.js

@@ -20,9 +20,17 @@ import { formatNumber } from '../../utils/formatNumber.js';
 import { getPercentage } from '../../utils/getPercentage.js';
 import { useQuestContext } from './QuestsContext.js';
 import { RemainingTime } from './RemainingTime.js';
+import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
+import { FacebookSignInTrigger } from '../SignIn/FacebookSignInTrigger.js';
+import dynamic from 'next/dynamic';
+const GoogleSignInButton = dynamic(() => import('../SignIn/GoogleSignInTrigger.js').then((m) => m.GoogleSignInTrigger), {
+    ssr: false,
+    loading: () => null,
+});
 export function JourneyQuest() {
     const disclosure = useDisclosure();
     const quest = useQuestContext();
+    const featureFlag = useFeatureFlag();
     const { milestones, totalMilestones, currentMilestone, progressPercentage } = useMemo(() => {
         if (!quest?.milestones) {
             return {
@@ -32,7 +40,13 @@ export function JourneyQuest() {
                 progressPercentage: 0,
             };
         }
-        const transformedMilestones = quest.milestones.map((milestone) => ({
+        const filteredMilestones = quest.milestones.filter((milestone) => {
+            if (!featureFlag.enabled) {
+                return milestone.type !== 'LINK_FACEBOOK_ACCOUNT' && milestone.type !== 'LINK_GOOGLE_ACCOUNT';
+            }
+            return true;
+        });
+        const transformedMilestones = filteredMilestones.map((milestone) => ({
             key: milestone.type,
             label: milestone.name,
             bonus: milestone.bonusAmount
@@ -42,8 +56,8 @@ export function JourneyQuest() {
             id: milestone.id,
             description: milestone.description,
         }));
-        const completedCount = quest.milestones.filter((m) => m.cleared).length;
-        const total = quest.milestones.length;
+        const completedCount = filteredMilestones.filter((m) => m.cleared).length;
+        const total = filteredMilestones.length;
         return {
             milestones: transformedMilestones,
             totalMilestones: total,
@@ -85,7 +99,7 @@ function Rules(props) {
             return false;
         return milestones.every((milestone) => milestone.isCompleted);
     }, [milestones]);
-    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto min-h-auto min-w-[21.438rem] max-w-[400px] overflow-y-auto rounded-xl px-4 py-5", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "group flex flex-col space-y-5 text-sm text-text-quarterary-brand", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: quest?.name || 'Quest' }), _jsx("p", { children: quest?.description ||
+    return (_jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, open: open, onOpenChange: (details) => setOpen(details.open), closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center", children: _jsxs(Dialog.Content, { className: "mx-auto min-h-auto min-w-[21.438rem] max-w-[400px] overflow-y-auto rounded-xl px-4 py-5 mt-40", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsxs("div", { className: "group flex flex-col space-y-5 text-sm text-text-quarterary-brand", children: [_jsx("h2", { className: "font-semibold text-lg text-text-primary-900", children: quest?.name || 'Quest' }), _jsx("p", { children: quest?.description ||
                                             'Ready for a challenge? Complete them all and get amazing rewards!' }), milestones.map((milestone) => (_jsxs("div", { className: "flex flex-col space-y-2.5 rounded-xl bg-bg-tertiary p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "font-medium text-base text-white", children: milestone.label }), milestone.isCompleted && (_jsx("div", { className: "flex w-fit items-center gap-1 rounded-full border border-utility-success-200 bg-utility-success-50 px-2 py-0.5 font-medium text-utility-success-700 text-xs", children: "Complete" }))] }), milestone.description ? (_jsx(Prose, { dangerouslySetInnerHTML: {
                                                     __html: milestone.description,
                                                 } })) : milestone.bonus ? (_jsxs("p", { className: "ml-1", children: [milestone.key === 'REGISTRATION' &&
@@ -107,7 +121,9 @@ function Rules(props) {
                                                     }
                                                 }, "aria-label": `Complete ${milestone.label}`, children: [milestone.key === 'ACCOUNT_VERIFICATION' ? (_jsx(FileCheck02Icon, { className: "size-5" })) : (_jsx(CoinsHandIcon, { className: "size-5" })), milestone.key === 'FIRST_DEPOSIT'
                                                         ? 'Deposit'
-                                                        : 'Verify Account'] }))] }, milestone.key))), quest?.bonus && (_jsx("div", { className: "flex h-full items-end", children: allMilestonesCompleted ? (_jsx(Button, { size: "sm", onClick: () => setOpen(false), "aria-label": "Close", className: "w-full", children: "Close" })) : (_jsx("div", { className: "w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center text-white", children: _jsxs("p", { children: ["Complete target to", ' ', _jsxs("span", { className: "text-brand-400", children: ["\u20B1", quest?.bonus] }), ' ', "bonus!"] }) })) }))] })] }) })] }) }));
+                                                        : 'Verify Account'] })), !milestone.isCompleted &&
+                                                milestone.key === 'LINK_FACEBOOK_ACCOUNT' && (_jsx(FacebookSignInTrigger, { text: 'Link Facebook Account', className: 'items-center justify-center rounded-md font-semibold shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none h-10 gap-md px-3 text-sm flex w-full bg-button-primary-bg text-button-primary-fg' })), !milestone.isCompleted &&
+                                                milestone.key === 'LINK_GOOGLE_ACCOUNT' && (_jsx(GoogleSignInButton, { text: 'Link Google Account', className: 'items-center justify-center rounded-md font-semibold shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none h-10 gap-md px-3 text-sm flex w-full bg-button-primary-bg text-button-primary-fg' }))] }, milestone.key))), quest?.bonus && (_jsx("div", { className: "flex h-full items-end", children: allMilestonesCompleted ? (_jsx(Button, { size: "sm", onClick: () => setOpen(false), "aria-label": "Close", className: "w-full", children: "Close" })) : (_jsx("div", { className: "w-full rounded-md border border-bg-primary-hover bg-button-secondary-bg px-3.5 py-2.5 text-center text-white", children: _jsxs("p", { children: ["Complete target to", ' ', _jsxs("span", { className: "text-brand-400", children: ["\u20B1", quest?.bonus] }), ' ', "bonus!"] }) })) }))] })] }) })] }) }));
 }
 function QuestMilestone({ label, bonus, isCompleted = false, }) {
     const localeInfo = useLocaleInfo();

package/dist/components/Quests/RemainingTime.d.ts

@@ -1,5 +1,5 @@
 interface RemainingTimeProps {
     endOfDay?: boolean;
 }
-export declare function RemainingTime({ endOfDay: useEndOfDay }: RemainingTimeProps): import("react/jsx-runtime").JSX.Element;
+export declare function RemainingTime({ endOfDay: useEndOfDay, }: RemainingTimeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Quests/RemainingTime.js

@@ -4,7 +4,7 @@ import { useRemainingTime } from '../../client/hooks/useRemainingTime.js';
 import { ClockStopWatchIcon } from '../../icons/ClockStopWatchIcon.js';
 import { Badge } from '../../ui/Badge/index.js';
 import { useQuestContext } from './QuestsContext.js';
-export function RemainingTime({ endOfDay: useEndOfDay = false }) {
+export function RemainingTime({ endOfDay: useEndOfDay = false, }) {
     const quest = useQuestContext();
     const targetDateTime = useEndOfDay
         ? endOfDay(new Date(quest.endDateTime)).toISOString()
@@ -13,11 +13,8 @@ export function RemainingTime({ endOfDay: useEndOfDay = false }) {
     if (quest.status === 'COMPLETED') {
         return (_jsx(Badge.Root, { size: "lg", colorScheme: "success", round: false, children: _jsx(Badge.Label, { children: "Completed" }) }));
     }
-    if (quest.status === 'FAILED') {
+    if (quest.status === 'FAILED' || remainingTime.expired) {
         return (_jsx(Badge.Root, { size: "lg", colorScheme: "danger", round: false, children: _jsx(Badge.Label, { children: "Failed" }) }));
     }
-    if (remainingTime.expired) {
-        return (_jsx(Badge.Root, { size: "lg", colorScheme: "danger", round: false, children: _jsx(Badge.Label, { children: "Expired" }) }));
-    }
     return (_jsxs(Badge.Root, { size: "lg", colorScheme: "brand", round: false, children: [_jsx(Badge.Icon, { children: _jsx(ClockStopWatchIcon, {}) }), _jsx(Badge.Label, { children: remainingTime.toString() })] }));
 }

package/dist/components/SignIn/FacebookSignInTrigger.d.ts

@@ -1 +1,6 @@
-export declare const FacebookSignInTrigger: () => import("react/jsx-runtime").JSX.Element | null;
+interface FacebookSignInTriggerProps {
+    text?: string;
+    className?: string;
+}
+export declare const FacebookSignInTrigger: (props: FacebookSignInTriggerProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/SignIn/FacebookSignInTrigger.js

@@ -9,7 +9,7 @@ import { AUTH_ENDPOINT, PLATFORM_CODE } from '../../constants/index.js';
 import { FacebookIcon } from '../../icons/FacebookIcon.js';
 import { httpRequest } from '../../services/httpRequest.js';
 import { Button } from '../../ui/Button/index.js';
-export const FacebookSignInTrigger = () => {
+export const FacebookSignInTrigger = (props) => {
     const signInStore = useGlobalStore(useShallow((ctx) => ctx.signIn));
     const signIn = useSignInMutation({
         onError: () => {
@@ -46,6 +46,6 @@ export const FacebookSignInTrigger = () => {
                 description: 'Failed to sign in with Facebook. Please try again.',
             });
         }, render: ({ onClick }) => {
-            return (_jsxs(Button, { variant: "outline", onClick: onClick, colorScheme: "gray", className: "mt-lg border-border-primary bg-bg-primary text-text-secondary-700", children: [_jsx(FacebookIcon, { className: "size-6" }), "Continue with Facebook"] }));
+            return (_jsxs(Button, { variant: "outline", onClick: onClick, colorScheme: "gray", className: `mt-lg border-border-primary bg-bg-primary text-text-secondary-700 ${props.className}`, children: [_jsx(FacebookIcon, { className: "size-6" }), props.text ?? 'Continue with Facebook'] }));
         } }));
 };

package/dist/components/SignIn/GoogleSignInTrigger.d.ts

@@ -1,5 +1,7 @@
 import type { ComponentPropsWithRef } from 'react';
 export interface GoogleSignInTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
+    text?: string;
+    className?: string;
 }
 export declare const GoogleSignInTrigger: (props: GoogleSignInTriggerProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SignIn/GoogleSignInTrigger.js

@@ -18,7 +18,7 @@ export const GoogleSignInTrigger = (props) => {
         return null;
     return (_jsx(GoogleOAuthProvider, { clientId: googleClientId, children: _jsx(Trigger, { ...props }) }));
 };
-const Trigger = ({ children, disabled, asChild, onClick, ...props }) => {
+const Trigger = ({ children, disabled, asChild, onClick, text, className, ...props }) => {
     const signInStore = useGlobalStore(useShallow((ctx) => ctx.signIn));
     const signIn = useSignInMutation({
         onError: () => {
@@ -56,5 +56,5 @@ const Trigger = ({ children, disabled, asChild, onClick, ...props }) => {
     return (_jsx(ark.button, { type: "button", onClick: (e) => {
             onClick?.(e);
             signInGoogle();
-        }, asChild: !children ? true : asChild, disabled: signIn.isPending || disabled, ...props, children: children ?? (_jsxs(Button, { variant: "outline", colorScheme: "gray", className: "bg-bg-primary", children: [_jsx(GoogleIcon, { className: "size-6" }), "Continue with Google"] })) }));
+        }, asChild: !children ? true : asChild, disabled: signIn.isPending || disabled, ...props, children: children ?? (_jsxs(Button, { variant: "outline", colorScheme: "gray", className: `bg-bg-primary ${className}`, children: [_jsx(GoogleIcon, { className: "size-6" }), text ?? 'Continue with Google'] })) }));
 };