@opexa/portal-components 0.0.2 → 0.0.4

package/dist/components/Promo/Promo.jsx

@@ -0,0 +1,50 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { prefetchPromoQuery } from '../../hooks/usePromoQuery/prefetchPromoQuery.js';
+import { PromoContent } from './PromoContent.jsx';
+export function Promo(props) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, prefetchPromoQuery(props.id)];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/, <PromoContent id={props.id}/>];
+            }
+        });
+    });
+}

package/dist/components/Promo/PromoContent.d.ts

@@ -0,0 +1,2 @@
+import type { PromoProps } from './Promo.jsx';
+export declare function PromoContent(props: PromoProps): import("react").JSX.Element;

package/dist/components/Promo/PromoContent.jsx

@@ -0,0 +1,18 @@
+'use client';
+import { usePromoQuery } from '../../hooks/usePromoQuery/usePromoQuery.js';
+export function PromoContent(props) {
+    var promoQuery = usePromoQuery(props.id);
+    if (promoQuery.isLoading) {
+        return <p>Loading...</p>;
+    }
+    if (promoQuery.isError) {
+        return <p>Error: {promoQuery.error.message}</p>;
+    }
+    if (!promoQuery.data) {
+        return <p>No promo data found.</p>;
+    }
+    return (<div>
+      <h1>{promoQuery.data.name}</h1>
+      <p>{promoQuery.data.description}</p>
+    </div>);
+}

package/dist/components/Promo/index.d.ts

@@ -0,0 +1 @@
+export * from './Promo.jsx';

package/dist/components/Promo/index.js

@@ -0,0 +1 @@
+export * from './Promo.jsx';

package/dist/components/Promos/PromoCarousel.d.ts

@@ -0,0 +1,2 @@
+import type { PromosProps } from './Promos.jsx';
+export declare function PromoCarousel(props: PromosProps): import("react").JSX.Element;

package/dist/components/Promos/PromoCarousel.jsx

@@ -0,0 +1,110 @@
+'use client';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import useEmblaCarousel from 'embla-carousel-react';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { usePromosQuery } from '../../hooks/usePromosQuery/usePromosQuery.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.jsx';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.jsx';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.jsx';
+import { Gift01Icon } from '../../icons/Gift01Icon.jsx';
+import { Button } from '../../ui/index.js';
+import { Empty } from '../Empty/index.js';
+import { PromosItem } from './PromoItem.jsx';
+export function PromoCarousel(props) {
+    var _this = this;
+    var promosQuery = usePromosQuery({});
+    var promos = promosQuery.data || [];
+    var _a = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+        breakpoints: {
+            '(min-width: 1024px)': {
+                slidesToScroll: 3,
+            },
+        },
+    }), emblaRef = _a[0], emblaApi = _a[1];
+    var _b = useState(true), prevBtnDisabled = _b[0], setPrevBtnDisabled = _b[1];
+    var _c = useState(true), nextBtnDisabled = _c[0], setNextBtnDisabled = _c[1];
+    var onPrevButtonClick = useCallback(function () { return emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollPrev(); }, [emblaApi]);
+    var onNextButtonClick = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollNext();
+            return [2 /*return*/];
+        });
+    }); }, [emblaApi]);
+    var onSelect = useCallback(function (emblaApi) {
+        setPrevBtnDisabled(!(emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.canScrollPrev()));
+        setNextBtnDisabled(!(emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.canScrollNext()));
+    }, []);
+    useEffect(function () {
+        if (!emblaApi)
+            return;
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect).on('select', onSelect);
+    }, [emblaApi, onSelect]);
+    return (<div className={props.className}>
+      <div className="flex items-center">
+        <h2 className="text-lg font-semibold">{props.heading}</h2>
+        <div className="grow"/>
+        <div className="flex items-center justify-center gap-xl">
+          <Link href={props.seeAllUrl} className="flex gap-sm text-sm font-semibold">
+            See All
+            <ChevronRightIcon className="size-5 lg:hidden"/>
+          </Link>
+          <div className="hidden lg:flex">
+            <Button variant="outline" colorScheme="gray" className="rounded-r-none border-r-0" onClick={onPrevButtonClick} disabled={prevBtnDisabled} aria-label="Previous">
+              <ArrowLeftIcon className="size-5"/>
+            </Button>
+            <Button variant="outline" colorScheme="gray" className="rounded-l-none" onClick={onNextButtonClick} disabled={nextBtnDisabled} aria-label="Next">
+              <ArrowRightIcon className="size-5"/>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {promos.length <= 0 && (<Empty icon={Gift01Icon} title="No Promos" message="No promo is currently available." className="mt-lg"/>)}
+
+      {promos.length >= 1 && (<div ref={emblaRef} className="relative mt-lg lg:overflow-hidden">
+          <div className={twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/1)] grid-flow-col gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/3)] lg:gap-md')}>
+            {promos.map(function (promo) { return (<PromosItem key={promo.id} promo={promo} shouldShowDescription={props.shouldShowDescription}/>); })}
+          </div>
+        </div>)}
+    </div>);
+}

package/dist/components/Promos/PromoGrid.d.ts

@@ -0,0 +1,2 @@
+import type { PromosProps } from './Promos.jsx';
+export declare function PromoGrid(props: PromosProps): import("react").JSX.Element;

package/dist/components/Promos/PromoGrid.jsx

@@ -0,0 +1,24 @@
+'use client';
+import { twMerge } from 'tailwind-merge';
+import { usePromosQuery } from '../../hooks/usePromosQuery/usePromosQuery.js';
+import { Gift01Icon } from '../../icons/Gift01Icon.jsx';
+import { Empty } from '../Empty/index.js';
+import { PromosItem } from './PromoItem.jsx';
+export function PromoGrid(props) {
+    var promosQuery = usePromosQuery({});
+    var promos = promosQuery.data || [];
+    return (<div className={props.className}>
+      <div className="flex items-center">
+        <h2 className="text-lg font-semibold">{props.heading}</h2>
+        <div className="grow"/>
+      </div>
+
+      {promos.length <= 0 && (<Empty icon={Gift01Icon} title="No Promos" message="No promo is currently available." className="mt-lg"/>)}
+
+      {promos.length >= 1 && (<div className="relative mt-lg lg:overflow-hidden">
+          <div className={twMerge('grid grid-cols-1 gap-sm lg:grid-cols-3 lg:gap-md')}>
+            {promos.map(function (promo) { return (<PromosItem key={promo.id} promo={promo} shouldShowDescription={props.shouldShowDescription}/>); })}
+          </div>
+        </div>)}
+    </div>);
+}

package/dist/components/Promos/PromoItem.d.ts

@@ -0,0 +1,7 @@
+import type { Promo } from '@opexa/portal-sdk-core';
+interface PromosItemProps {
+    promo: Promo;
+    shouldShowDescription?: boolean;
+}
+export declare function PromosItem(props: PromosItemProps): import("react").JSX.Element;
+export {};

package/dist/components/Promos/PromoItem.jsx

@@ -0,0 +1,24 @@
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { twJoin } from 'tailwind-merge';
+import { Button } from '../../ui/index.js';
+export function PromosItem(props) {
+    var promo = props.promo;
+    var router = useRouter();
+    return (<div key={promo.id} className="border-gray-50 bg-accent-50 relative flex h-full flex-col rounded-md border">
+      {promo.banner.url && (<Image src={promo.banner.url} alt={promo.name} width={1200} height={500} priority className="aspect-[1200/500] w-full rounded-t-md object-cover"/>)}
+      <div className="flex flex-grow flex-col p-4">
+        <p className={twJoin('w-full text-xl font-bold', props.shouldShowDescription ? 'text-start' : 'text-center')}>
+          {promo.name}
+        </p>
+
+        {props.shouldShowDescription && promo.description && (<p className="text-gray-600 mb-2 line-clamp-2 w-full overflow-hidden text-start text-sm" dangerouslySetInnerHTML={{ __html: promo.description }}/>)}
+
+        <div className="mt-auto pt-4">
+          <Button className="w-full" variant="outline" onClick={function () { return router.push("/promos/".concat(promo.id)); }}>
+            Read More
+          </Button>
+        </div>
+      </div>
+    </div>);
+}

package/dist/components/Promos/Promos.d.ts

@@ -0,0 +1,11 @@
+export interface PromosProps {
+    heading: string;
+    seeAllUrl: string;
+    /** @default true */
+    shouldShowDescription?: boolean;
+    /** @default 1 */
+    className?: string;
+    /** @default 'carousel' */
+    layout?: 'carousel' | 'grid';
+}
+export declare function Promos(props: PromosProps): Promise<import("react").JSX.Element>;

package/dist/components/Promos/Promos.jsx

@@ -0,0 +1,57 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { prefetchPromosQuery } from '../../hooks/usePromosQuery/prefetchPromosQuery.js';
+import { PromoCarousel } from './PromoCarousel.jsx';
+import { PromoGrid } from './PromoGrid.jsx';
+export function Promos(props) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, prefetchPromosQuery()];
+                case 1:
+                    _a.sent();
+                    if (props.layout === 'grid') {
+                        return [2 /*return*/, <PromoGrid {...props}/>];
+                    }
+                    else {
+                        return [2 /*return*/, <PromoCarousel {...props}/>];
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    });
+}

package/dist/components/Promos/PromosContent.d.ts

@@ -0,0 +1,2 @@
+import type { PromosProps } from './Promos.jsx';
+export declare function PromosContent(props: PromosProps): import("react").JSX.Element;

package/dist/components/Promos/PromosContent.jsx

@@ -0,0 +1,110 @@
+'use client';
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import useEmblaCarousel from 'embla-carousel-react';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { usePromosQuery } from '../../hooks/usePromosQuery/usePromosQuery.js';
+import { ArrowLeftIcon } from '../../icons/ArrowLeftIcon.jsx';
+import { ArrowRightIcon } from '../../icons/ArrowRightIcon.jsx';
+import { ChevronRightIcon } from '../../icons/ChevronRightIcon.jsx';
+import { Gift01Icon } from '../../icons/Gift01Icon.jsx';
+import { Button } from '../../ui/index.js';
+import { Empty } from '../Empty/index.js';
+import { PromosItem } from './PromoItem.jsx';
+export function PromosContent(props) {
+    var _this = this;
+    var promosQuery = usePromosQuery({});
+    var promos = promosQuery.data || [];
+    var _a = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+        breakpoints: {
+            '(min-width: 1024px)': {
+                slidesToScroll: 3,
+            },
+        },
+    }), emblaRef = _a[0], emblaApi = _a[1];
+    var _b = useState(true), prevBtnDisabled = _b[0], setPrevBtnDisabled = _b[1];
+    var _c = useState(true), nextBtnDisabled = _c[0], setNextBtnDisabled = _c[1];
+    var onPrevButtonClick = useCallback(function () { return emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollPrev(); }, [emblaApi]);
+    var onNextButtonClick = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.scrollNext();
+            return [2 /*return*/];
+        });
+    }); }, [emblaApi]);
+    var onSelect = useCallback(function (emblaApi) {
+        setPrevBtnDisabled(!(emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.canScrollPrev()));
+        setNextBtnDisabled(!(emblaApi === null || emblaApi === void 0 ? void 0 : emblaApi.canScrollNext()));
+    }, []);
+    useEffect(function () {
+        if (!emblaApi)
+            return;
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect).on('select', onSelect);
+    }, [emblaApi, onSelect]);
+    return (<div className={props.className}>
+      <div className="flex items-center">
+        <h2 className="text-lg font-semibold">{props.heading}</h2>
+        <div className="grow"/>
+        <div className="flex items-center justify-center gap-xl">
+          <Link href={props.seeAllUrl} className="flex gap-sm text-sm font-semibold">
+            See All
+            <ChevronRightIcon className="size-5 lg:hidden"/>
+          </Link>
+          <div className="hidden lg:flex">
+            <Button variant="outline" colorScheme="gray" className="rounded-r-none border-r-0" onClick={onPrevButtonClick} disabled={prevBtnDisabled} aria-label="Previous">
+              <ArrowLeftIcon className="size-5"/>
+            </Button>
+            <Button variant="outline" colorScheme="gray" className="rounded-l-none" onClick={onNextButtonClick} disabled={nextBtnDisabled} aria-label="Next">
+              <ArrowRightIcon className="size-5"/>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {promos.length <= 0 && (<Empty icon={Gift01Icon} title="No Promos" message="No promo is currently available." className="mt-lg"/>)}
+
+      {promos.length >= 1 && (<div ref={emblaRef} className="relative mt-lg lg:overflow-hidden">
+          <div className={twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/1)] grid-flow-col gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/3)] lg:gap-md')}>
+            {promos.map(function (promo) { return (<PromosItem key={promo.id} promo={promo} shouldShowDescription={props.shouldShowDescription}/>); })}
+          </div>
+        </div>)}
+    </div>);
+}

package/dist/components/Promos/index.d.ts

@@ -0,0 +1 @@
+export * from './Promos.jsx';

package/dist/components/Promos/index.js

@@ -0,0 +1 @@
+export * from './Promos.jsx';

package/dist/components/Protected/Protected.d.ts

@@ -0,0 +1,6 @@
+interface ProtectedProps {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+}
+export declare function Protected(props: ProtectedProps): import("react").ReactNode;
+export {};

package/dist/components/Protected/Protected.jsx

@@ -0,0 +1,9 @@
+'use client';
+import { useSessionQuery } from '../../hooks/useSessionQuery/useSessionQuery.js';
+export function Protected(props) {
+    var _a, _b;
+    var query = useSessionQuery();
+    return ((_a = query.data) === null || _a === void 0 ? void 0 : _a.status) === 'authenticated'
+        ? props.children
+        : ((_b = props.fallback) !== null && _b !== void 0 ? _b : null);
+}

package/dist/components/Protected/index.d.ts

@@ -0,0 +1 @@
+export * from './Protected.jsx';

package/dist/components/Protected/index.js

@@ -0,0 +1 @@
+export * from './Protected.jsx';

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

@@ -0,0 +1,8 @@
+import { type ImageProps } from 'next/image';
+import type { ReactNode } from 'react';
+export interface SignInProps {
+    logo: ImageProps['src'];
+    banner: ImageProps['src'];
+    children?: ReactNode;
+}
+export declare function SignIn(props: SignInProps): import("react").JSX.Element;

package/dist/components/SignIn/SignIn.jsx

@@ -0,0 +1,39 @@
+'use client';
+import { Portal } from '@ark-ui/react';
+import Image from 'next/image';
+import { useShallow } from 'zustand/shallow';
+import { useGlobalStore } from '../../hooks/useGlobalStore.js';
+import { XIcon } from '../../icons/XIcon.jsx';
+import { Dialog } from '../../ui/index.js';
+import { SignInForm } from './SignInForm.jsx';
+export function SignIn(props) {
+    var _a;
+    var signInStore = useGlobalStore(useShallow(function (popups) { return popups.signIn; }));
+    return (<Dialog.Root open={signInStore.open} onOpenChange={function (details) {
+            signInStore.setOpen(details.open);
+        }} lazyMount unmountOnExit closeOnEscape={false} closeOnInteractOutside={false}>
+      <Dialog.Trigger asChild>
+        {(_a = props.children) !== null && _a !== void 0 ? _a : (<button type="button" className="px-3.5 font-semibold">
+            Login
+          </button>)}
+      </Dialog.Trigger>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content className="mx-auto flex h-full w-full items-start lg:h-auto lg:w-fit">
+            <Image src={props.banner} alt="h-auto w-[400px]" width={400} height={800} className="hidden rounded-l-xl lg:block"/>
+
+            <div className="relative flex w-full flex-col items-start self-stretch bg-white p-3xl lg:w-[400px] lg:rounded-r-xl">
+              <Dialog.CloseTrigger>
+                <XIcon />
+              </Dialog.CloseTrigger>
+
+              <Image src={props.logo} alt="" width={200} height={100} className="mx-auto h-auto w-[120px]" draggable={false}/>
+
+              <SignInForm />
+            </div>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>);
+}

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

@@ -0,0 +1 @@
+export declare function SignInForm(): import("react").JSX.Element;