@appcorp/app-corp-vista 0.2.77 → 0.2.79

package/molecules/vista-cta-v3/vista-cta-v3.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { VistaCtaV3Props } from '../../type/vista-cta-type';
+export declare const VistaCtaV3: FC<VistaCtaV3Props>;

package/molecules/vista-cta-v3/vista-cta-v3.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaCtaV3 = void 0;
+var react_1 = __importDefault(require("react"));
+var VistaCtaV3 = function () {
+    return (react_1.default.createElement("div", { className: "bg-white" },
+        react_1.default.createElement("div", { className: "mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8" },
+            react_1.default.createElement("div", { className: "relative isolate overflow-hidden bg-gray-900 px-6 py-24 text-center shadow-2xl sm:rounded-3xl sm:px-16" },
+                react_1.default.createElement("h2", { className: "text-4xl font-semibold tracking-tight text-balance text-white sm:text-5xl" }, "Boost your productivity today"),
+                react_1.default.createElement("p", { className: "mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-300" }, "Incididunt sint fugiat pariatur cupidatat consectetur sit cillum anim id veniam aliqua proident excepteur commodo do ea."),
+                react_1.default.createElement("div", { className: "mt-10 flex items-center justify-center gap-x-6" },
+                    react_1.default.createElement("a", { href: "#", className: "rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-xs hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" },
+                        ' ',
+                        "Get started",
+                        ' '),
+                    react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-white" },
+                        "Learn more",
+                        react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192"))),
+                react_1.default.createElement("svg", { viewBox: "0 0 1024 1024", "aria-hidden": "true", className: "absolute top-1/2 left-1/2 -z-10 size-256 -translate-x-1/2 mask-[radial-gradient(closest-side,white,transparent)]" },
+                    react_1.default.createElement("circle", { r: 512, cx: 512, cy: 512, fill: "url(#827591b1-ce8c-4110-b064-7cb85a0b1217)", fillOpacity: "0.7" }),
+                    react_1.default.createElement("defs", null,
+                        react_1.default.createElement("radialGradient", { id: "827591b1-ce8c-4110-b064-7cb85a0b1217" },
+                            react_1.default.createElement("stop", { stopColor: "#7775D6" }),
+                            react_1.default.createElement("stop", { offset: 1, stopColor: "#E935C1" }))))))));
+};
+exports.VistaCtaV3 = VistaCtaV3;

package/molecules/vista-cta-v5/vista-cta-v5.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { VistaCtaV5Props } from '../../type/vista-cta-type';
+export declare const VistaCtaV5: FC<VistaCtaV5Props>;

package/molecules/vista-cta-v5/vista-cta-v5.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaCtaV5 = void 0;
+var react_1 = __importDefault(require("react"));
+var VistaCtaV5 = function () {
+    return (react_1.default.createElement("div", { className: "relative isolate overflow-hidden bg-gray-900" },
+        react_1.default.createElement("div", { className: "px-6 py-24 sm:px-6 sm:py-32 lg:px-8" },
+            react_1.default.createElement("div", { className: "mx-auto max-w-2xl text-center" },
+                react_1.default.createElement("h2", { className: "text-4xl font-semibold tracking-tight text-balance text-white sm:text-5xl" }, "Boost your productivity. Start using our app today."),
+                react_1.default.createElement("p", { className: "mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-300" }, "Incididunt sint fugiat pariatur cupidatat consectetur sit cillum anim id veniam aliqua proident excepteur commodo do ea."),
+                react_1.default.createElement("div", { className: "mt-10 flex items-center justify-center gap-x-6" },
+                    react_1.default.createElement("a", { href: "#", className: "rounded-md bg-white/15 px-3.5 py-2.5 text-sm font-semibold text-white inset-ring inset-ring-white/5 hover:bg-white/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" }, "Get started"),
+                    react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-white hover:text-gray-300" },
+                        "Learn more ",
+                        react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192"))))),
+        react_1.default.createElement("svg", { viewBox: "0 0 1024 1024", "aria-hidden": "true", className: "absolute top-1/2 left-1/2 -z-10 size-256 -translate-x-1/2 mask-[radial-gradient(closest-side,white,transparent)]" },
+            react_1.default.createElement("circle", { r: 512, cx: 512, cy: 512, fill: "url(#8d958450-c69f-4251-94bc-4e091a323369)", fillOpacity: "0.7" }),
+            react_1.default.createElement("defs", null,
+                react_1.default.createElement("radialGradient", { id: "8d958450-c69f-4251-94bc-4e091a323369" },
+                    react_1.default.createElement("stop", { stopColor: "#7775D6" }),
+                    react_1.default.createElement("stop", { offset: 1, stopColor: "#E935C1" }))))));
+};
+exports.VistaCtaV5 = VistaCtaV5;

package/molecules/vista-header-v1/nav-bar.js

@@ -15,75 +15,75 @@ var NavBar = function (_a) {
     return (react_1.default.createElement("div", { className: "shadow-md" },
         react_1.default.createElement("nav", { "aria-label": "Global", className: "mx-auto flex max-w-7xl items-center justify-between p-1 lg:px-8" },
             react_1.default.createElement("div", { className: "flex lg:flex-1" },
-                react_1.default.createElement("div", { className: "relative w-36 h-20 ".concat(logoContainerClassName) },
-                    react_1.default.createElement(image_1.default, { alt: logoAlt, className: "object-contain", fill: true, height: 0, sizes: "26vw", src: logoSrc, width: 0 }))),
+                react_1.default.createElement("div", { className: "relative w-16 h-16 ".concat(logoContainerClassName) },
+                    react_1.default.createElement(image_1.default, { alt: logoAlt, className: "object-contain", fill: true, height: 0, priority: true, sizes: "16vw", src: logoSrc, width: 0 }))),
             react_1.default.createElement("div", { className: "flex lg:hidden" },
                 react_1.default.createElement("button", { className: "-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700", onClick: function () { return handleMenuOpen(true); }, type: "button" },
                     react_1.default.createElement("span", { className: "sr-only" }, "Open main menu"),
-                    react_1.default.createElement(outline_1.Bars3Icon, { "aria-hidden": "true", className: "size-6" }))),
+                    react_1.default.createElement(outline_1.Bars3Icon, { "aria-hidden": "true", className: "size-6 text-gray-700 dark:text-gray-300" }))),
             react_1.default.createElement(react_2.PopoverGroup, { className: "hidden lg:flex lg:gap-x-12" }, items.map(function (_a) {
                 var cta = _a.cta, handleOnClick = _a.handleOnClick, megaMenu = _a.megaMenu, name = _a.name;
                 var multiGrid = megaMenu && megaMenu.length > 5 ? true : false;
                 if (megaMenu && (megaMenu === null || megaMenu === void 0 ? void 0 : megaMenu.length) > 1) {
-                    return (react_1.default.createElement(react_2.Popover, { key: name, className: "" }, function (_a) {
+                    return (react_1.default.createElement(react_2.Popover, { key: name }, function (_a) {
                         var open = _a.open, close = _a.close;
                         return (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(react_2.PopoverButton, { className: "flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900 cursor-pointer", onClick: handleOnClick },
+                            react_1.default.createElement(react_2.PopoverButton, { className: "flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900 dark:text-white cursor-pointer", onClick: handleOnClick },
                                 name,
                                 react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none text-gray-400" })),
-                            open && (react_1.default.createElement(react_2.PopoverPanel, { className: "absolute left-1/2 z-10 mt-3 w-screen ".concat(multiGrid ? 'max-w-4xl' : 'max-w-md', " -translate-x-1/2 overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in"), transition: true },
+                            open && (react_1.default.createElement(react_2.PopoverPanel, { className: "absolute left-1/2 z-10 mt-3 w-screen ".concat(multiGrid ? 'max-w-4xl' : 'max-w-md', " -translate-x-1/2 overflow-hidden rounded-3xl bg-white dark:bg-gray-500 shadow-lg ring-1 ring-gray-900/5 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in"), transition: true },
                                 react_1.default.createElement("div", { className: "".concat(multiGrid ? 'grid grid-cols-2 gap-4' : 'p-4') }, megaMenu.map(function (_a) {
                                     var name = _a.name, handleChildOnClick = _a.handleOnClick, description = _a.description, icon = _a.icon;
-                                    return (react_1.default.createElement("div", { key: name, className: "group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50" },
+                                    return (react_1.default.createElement("div", { key: name, className: "group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50 dark:hover:bg-gray-600" },
                                         icon && (react_1.default.createElement("div", { className: "flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white" }, icon)),
                                         react_1.default.createElement("div", { className: "flex-auto" },
                                             react_1.default.createElement("button", { onClick: function () {
                                                     handleChildOnClick();
                                                     close();
-                                                }, className: "block font-semibold text-primary" },
+                                                }, className: "block font-semibold text-primary dark:text-white" },
                                                 name,
                                                 react_1.default.createElement("span", { className: "absolute inset-0" })),
-                                            react_1.default.createElement("p", { className: "mt-1 text-gray-600" }, description))));
+                                            react_1.default.createElement("p", { className: "mt-1 text-gray-600 dark:text-gray-200" }, description))));
                                 })),
-                                react_1.default.createElement("div", { className: "grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50" }, cta && cta.length > 1 && cta.map(function (_a) {
+                                react_1.default.createElement("div", { className: "grid grid-cols-2 divide-x divide-gray-900/5 bg-white dark:bg-gray-600" }, cta && cta.length > 1 && cta.map(function (_a) {
                                     var icon = _a.icon, name = _a.name, handleOnClick = _a.handleOnClick;
-                                    return (react_1.default.createElement("button", { key: name, onClick: handleOnClick, className: "flex items-center justify-center gap-x-2.5 p-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-100" },
+                                    return (react_1.default.createElement("button", { key: name, onClick: handleOnClick, className: "flex items-center justify-center gap-x-2.5 p-3 text-sm/6 font-semibold text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700" },
                                         icon,
                                         name));
                                 }))))));
                     }));
                 }
                 ;
-                return (react_1.default.createElement("div", { className: "text-sm/6 font-semibold text-gray-900 cursor-pointer", key: name, onClick: handleOnClick }, name));
+                return (react_1.default.createElement("div", { className: "text-sm/6 font-semibold text-gray-900 dark:text-white cursor-pointer", key: name, onClick: handleOnClick }, name));
             })),
             react_1.default.createElement("div", { className: "hidden lg:flex lg:flex-1 lg:justify-end" }, loginVisible && (react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" },
                 "Log in ",
                 react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192"))))),
         react_1.default.createElement(react_2.Dialog, { open: menuOpen, onClose: handleMenuOpen, className: "lg:hidden" },
             react_1.default.createElement("div", { className: "fixed inset-0 z-50" }),
-            react_1.default.createElement(react_2.DialogPanel, { className: "fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10" },
+            react_1.default.createElement(react_2.DialogPanel, { className: "fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white dark:bg-gray-700 p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10" },
                 react_1.default.createElement("div", { className: "flex items-center justify-between" },
                     react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
                         react_1.default.createElement("span", { className: "sr-only" }, companyName),
-                        react_1.default.createElement("img", { alt: logoAlt, className: "h-8 w-auto", src: logoSrc })),
+                        react_1.default.createElement(image_1.default, { alt: logoAlt, className: "h-8 w-auto", height: 32, src: logoSrc, width: 32 })),
                     react_1.default.createElement("button", { type: "button", onClick: function () { return handleMenuOpen(false); }, className: "-m-2.5 rounded-md p-2.5 text-gray-700" },
                         react_1.default.createElement("span", { className: "sr-only" }, "Close menu"),
-                        react_1.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "size-6" }))),
+                        react_1.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "size-6 text-gray-700 dark:text-gray-300" }))),
                 react_1.default.createElement("div", { className: "mt-6 flow-root" },
                     react_1.default.createElement("div", { className: "-my-6 divide-y divide-gray-500/10" },
                         react_1.default.createElement("div", { className: "space-y-2 py-6" }, items.map(function (item) {
                             if (item.megaMenu) {
                                 return (react_1.default.createElement(react_2.Disclosure, { as: "div", className: "-mx-3", key: item.name },
-                                    react_1.default.createElement(react_2.DisclosureButton, { className: "group flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" },
+                                    react_1.default.createElement(react_2.DisclosureButton, { className: "group flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-800" },
                                         item.name,
                                         react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none group-data-open:rotate-180" })),
                                     react_1.default.createElement(react_2.DisclosurePanel, { className: "mt-2 space-y-2" }, item.megaMenu.map(function (_a) {
                                         var name = _a.name, handleOnClick = _a.handleOnClick;
-                                        return (react_1.default.createElement(react_2.DisclosureButton, { className: "block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 hover:bg-gray-50", key: name, onClick: handleOnClick }, name));
+                                        return (react_1.default.createElement(react_2.DisclosureButton, { className: "block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-800 w-full text-left", key: name, onClick: handleOnClick }, name));
                                     }))));
                             }
                             ;
-                            return (react_1.default.createElement("div", { className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50", key: item.name, onClick: item.handleOnClick }, item.name));
+                            return (react_1.default.createElement("div", { className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-800", key: item.name, onClick: item.handleOnClick }, item.name));
                         })),
                         loginVisible && (react_1.default.createElement("div", { className: "py-6" },
                             react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Log in")))))))));

package/molecules/vista-header-v8/vista-header-v8.d.ts

@@ -1,2 +1,3 @@
-import React from 'react';
-export declare const VistaHeaderV8: () => React.JSX.Element;
+import { FC } from 'react';
+import { VistaHeaderV8Props } from '../../type/vista-header-type';
+export declare const VistaHeaderV8: FC<VistaHeaderV8Props>;

package/molecules/vista-header-v8/vista-header-v8.js

@@ -1,136 +1,15 @@
+'use client';
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VistaHeaderV8 = void 0;
-var react_1 = __importStar(require("react"));
-var react_2 = require("@headlessui/react");
-var outline_1 = require("@heroicons/react/24/outline");
-var solid_1 = require("@heroicons/react/20/solid");
-var products = [
-    { name: 'Analytics', description: 'Get a better understanding of your traffic', href: '#', icon: outline_1.ChartPieIcon },
-    { name: 'Engagement', description: 'Speak directly to your customers', href: '#', icon: outline_1.CursorArrowRaysIcon },
-    { name: 'Security', description: 'Your customers’ data will be safe and secure', href: '#', icon: outline_1.FingerPrintIcon },
-    { name: 'Integrations', description: 'Connect with third-party tools', href: '#', icon: outline_1.SquaresPlusIcon },
-    { name: 'Automations', description: 'Build strategic funnels that will convert', href: '#', icon: outline_1.ArrowPathIcon },
-];
-var callsToAction = [
-    { name: 'Watch demo', href: '#', icon: solid_1.PlayCircleIcon },
-    { name: 'Contact sales', href: '#', icon: solid_1.PhoneIcon },
-];
-var company = [
-    { name: 'About us', href: '#' },
-    { name: 'Careers', href: '#' },
-    { name: 'Support', href: '#' },
-    { name: 'Press', href: '#' },
-    { name: 'Blog', href: '#' },
-];
-var VistaHeaderV8 = function () {
-    var _a = (0, react_1.useState)(false), mobileMenuOpen = _a[0], setMobileMenuOpen = _a[1];
-    return (react_1.default.createElement("header", { className: "bg-white" },
-        react_1.default.createElement("nav", { "aria-label": "Global", className: "mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" },
-            react_1.default.createElement("div", { className: "flex lg:flex-1" },
-                react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
-                    react_1.default.createElement("span", { className: "sr-only" }, "Your Company"),
-                    react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600", className: "h-8 w-auto" }))),
-            react_1.default.createElement("div", { className: "flex lg:hidden" },
-                react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(true); }, className: "-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" },
-                    react_1.default.createElement("span", { className: "sr-only" }, "Open main menu"),
-                    react_1.default.createElement(outline_1.Bars3Icon, { "aria-hidden": "true", className: "size-6" }))),
-            react_1.default.createElement(react_2.PopoverGroup, { className: "hidden lg:flex lg:gap-x-12" },
-                react_1.default.createElement(react_2.Popover, { className: "relative" },
-                    react_1.default.createElement(react_2.PopoverButton, { className: "flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900" },
-                        "Product",
-                        react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none text-gray-400" })),
-                    react_1.default.createElement(react_2.PopoverPanel, { transition: true, className: "absolute left-1/2 z-10 mt-3 w-screen max-w-md -translate-x-1/2 overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in" },
-                        react_1.default.createElement("div", { className: "p-4" }, products.map(function (item) { return (react_1.default.createElement("div", { key: item.name, className: "group relative flex gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50" },
-                            react_1.default.createElement("div", { className: "mt-1 flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white" },
-                                react_1.default.createElement(item.icon, { "aria-hidden": "true", className: "size-6 text-gray-600 group-hover:text-indigo-600" })),
-                            react_1.default.createElement("div", { className: "flex-auto" },
-                                react_1.default.createElement("a", { href: item.href, className: "block font-semibold text-gray-900" },
-                                    item.name,
-                                    react_1.default.createElement("span", { className: "absolute inset-0" })),
-                                react_1.default.createElement("p", { className: "mt-1 text-gray-600" }, item.description)))); })),
-                        react_1.default.createElement("div", { className: "grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50" }, callsToAction.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "flex items-center justify-center gap-x-2.5 p-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-100" },
-                            react_1.default.createElement(item.icon, { "aria-hidden": "true", className: "size-5 flex-none text-gray-400" }),
-                            item.name)); })))),
-                react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" }, "Features"),
-                react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" }, "Marketplace"),
-                react_1.default.createElement(react_2.Popover, { className: "relative" },
-                    react_1.default.createElement(react_2.PopoverButton, { className: "flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900" },
-                        "Company",
-                        react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none text-gray-400" })),
-                    react_1.default.createElement(react_2.PopoverPanel, { transition: true, className: "absolute left-1/2 z-10 mt-3 w-56 -translate-x-1/2 rounded-xl bg-white p-2 shadow-lg ring-1 ring-gray-900/5 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in" }, company.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "block rounded-lg px-3 py-2 text-sm/6 font-semibold text-gray-900 hover:bg-gray-50" }, item.name)); })))),
-            react_1.default.createElement("div", { className: "hidden lg:flex lg:flex-1 lg:justify-end" },
-                react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" },
-                    "Log in ",
-                    react_1.default.createElement("span", { "aria-hidden": "true" }, "\u2192")))),
-        react_1.default.createElement(react_2.Dialog, { open: mobileMenuOpen, onClose: setMobileMenuOpen, className: "lg:hidden" },
-            react_1.default.createElement("div", { className: "fixed inset-0 z-50" }),
-            react_1.default.createElement(react_2.DialogPanel, { className: "fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10" },
-                react_1.default.createElement("div", { className: "flex items-center justify-between" },
-                    react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
-                        react_1.default.createElement("span", { className: "sr-only" }, "Your Company"),
-                        react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600", className: "h-8 w-auto" })),
-                    react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(false); }, className: "-m-2.5 rounded-md p-2.5 text-gray-700" },
-                        react_1.default.createElement("span", { className: "sr-only" }, "Close menu"),
-                        react_1.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "size-6" }))),
-                react_1.default.createElement("div", { className: "mt-6 flow-root" },
-                    react_1.default.createElement("div", { className: "-my-6 divide-y divide-gray-500/10" },
-                        react_1.default.createElement("div", { className: "space-y-2 py-6" },
-                            react_1.default.createElement(react_2.Disclosure, { as: "div", className: "-mx-3" },
-                                react_1.default.createElement(react_2.DisclosureButton, { className: "group flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" },
-                                    "Product",
-                                    react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none group-data-open:rotate-180" })),
-                                react_1.default.createElement(react_2.DisclosurePanel, { className: "mt-2 space-y-2" }, __spreadArray(__spreadArray([], products, true), callsToAction, true).map(function (item) { return (react_1.default.createElement(react_2.DisclosureButton, { key: item.name, as: "a", href: item.href, className: "block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 hover:bg-gray-50" }, item.name)); }))),
-                            react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Features"),
-                            react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Marketplace"),
-                            react_1.default.createElement(react_2.Disclosure, { as: "div", className: "-mx-3" },
-                                react_1.default.createElement(react_2.DisclosureButton, { className: "group flex w-full items-center justify-between rounded-lg py-2 pr-3.5 pl-3 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" },
-                                    "Company",
-                                    react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none group-data-open:rotate-180" })),
-                                react_1.default.createElement(react_2.DisclosurePanel, { className: "mt-2 space-y-2" }, company.map(function (item) { return (react_1.default.createElement(react_2.DisclosureButton, { key: item.name, as: "a", href: item.href, className: "block rounded-lg py-2 pr-3 pl-6 text-sm/7 font-semibold text-gray-900 hover:bg-gray-50" }, item.name)); })))),
-                        react_1.default.createElement("div", { className: "py-6" },
-                            react_1.default.createElement("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Log in"))))))));
+var react_1 = __importDefault(require("react"));
+var nav_bar_1 = require("../vista-header-v1/nav-bar");
+var VistaHeaderV8 = function (_a) {
+    var companyName = _a.companyName, handleMenuOpen = _a.handleMenuOpen, items = _a.items, _b = _a.loginVisible, loginVisible = _b === void 0 ? false : _b, logoAlt = _a.logoAlt, logoSrc = _a.logoSrc, menuOpen = _a.menuOpen;
+    return (react_1.default.createElement("header", { className: "bg-gray-50 dark:bg-gray-700" },
+        react_1.default.createElement(nav_bar_1.NavBar, { companyName: companyName, handleMenuOpen: handleMenuOpen, items: items, loginVisible: loginVisible, logoAlt: logoAlt, logoSrc: logoSrc, menuOpen: menuOpen })));
 };
 exports.VistaHeaderV8 = VistaHeaderV8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/app-corp-vista",
-  "version": "0.2.77",
+  "version": "0.2.79",
   "scripts": {
     "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib && cp yarn.lock lib",
     "build:next": "next build",

package/type/vista-cta-type.d.ts

@@ -0,0 +1,4 @@
+export interface VistaCtaV3Props {
+}
+export interface VistaCtaV5Props {
+}

package/type/vista-cta-type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/type/vista-header-type.d.ts

@@ -45,7 +45,14 @@ export interface VistaHeaderV7Props {
     id: string;
 }
 export interface VistaHeaderV8Props {
-    id: string;
+    companyName: string;
+    handleMenuOpen: () => void;
+    items: VistaHeaderV1Item[];
+    loginVisible?: boolean;
+    logoAlt: string;
+    logoContainerClassName?: string;
+    logoSrc: string;
+    menuOpen: boolean;
 }
 export interface VistaHeaderV9Props {
     id: string;