@appcorp/app-corp-vista 0.2.3 → 0.2.5

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

@@ -0,0 +1,80 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaHeaderV4 = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@headlessui/react");
+var outline_1 = require("@heroicons/react/24/outline");
+var navigation = [
+    { name: 'Product', href: '#' },
+    { name: 'Features', href: '#' },
+    { name: 'Marketplace', href: '#' },
+    { name: 'Company', href: '#' },
+];
+var VistaHeaderV4 = function (_a) {
+    var id = _a.id;
+    var _b = (0, react_1.useState)(false), mobileMenuOpen = _b[0], setMobileMenuOpen = _b[1];
+    return (react_1.default.createElement("header", { className: "bg-indigo-600" },
+        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=white", 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-indigo-300" },
+                    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("div", { className: "hidden lg:flex lg:gap-x-12" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "text-sm/6 font-semibold text-white" }, 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-white" },
+                    "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" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "-mx-3 block rounded-lg px-3 py-2 text-base/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"))))))));
+};
+exports.VistaHeaderV4 = VistaHeaderV4;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VistaHeaderV5: () => React.JSX.Element;

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

@@ -0,0 +1,139 @@
+"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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaHeaderV5 = 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 where your traffic is coming from',
+        href: '#',
+        icon: outline_1.ChartPieIcon,
+    },
+    {
+        name: 'Engagement',
+        description: 'Speak directly to your customers with our engagement tool',
+        href: '#',
+        icon: outline_1.CursorArrowRaysIcon,
+    },
+    { name: 'Security', description: 'Your customers data will be safe and secure', href: '#', icon: outline_1.FingerPrintIcon },
+    {
+        name: 'Integrations',
+        description: 'Your customers data will be safe and secure',
+        href: '#',
+        icon: outline_1.SquaresPlusIcon,
+    },
+];
+var callsToAction = [
+    { name: 'Watch demo', href: '#', icon: solid_1.PlayCircleIcon },
+    { name: 'Contact sales', href: '#', icon: solid_1.PhoneIcon },
+    { name: 'View all products', href: '#', icon: solid_1.RectangleGroupIcon },
+];
+var VistaHeaderV5 = function () {
+    var _a = (0, react_1.useState)(false), mobileMenuOpen = _a[0], setMobileMenuOpen = _a[1];
+    return (react_1.default.createElement("header", { className: "relative isolate z-10 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, null,
+                    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 inset-x-0 top-16 bg-white 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", { "aria-hidden": "true", className: "absolute inset-0 top-1/2 bg-white shadow-lg ring-1 ring-gray-900/5" }),
+                        react_1.default.createElement("div", { className: "relative bg-white" },
+                            react_1.default.createElement("div", { className: "mx-auto grid max-w-7xl grid-cols-4 gap-x-4 px-6 py-10 lg:px-8 xl:gap-x-8" }, products.map(function (item) { return (react_1.default.createElement("div", { key: item.name, className: "group relative rounded-lg p-6 text-sm/6 hover:bg-gray-50" },
+                                react_1.default.createElement("div", { className: "flex size-11 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("a", { href: item.href, className: "mt-6 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: "bg-gray-50" },
+                                react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-6 lg:px-8" },
+                                    react_1.default.createElement("div", { className: "grid grid-cols-3 divide-x divide-gray-900/5 border-x border-gray-900/5" }, 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("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" }, "Company")),
+            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("a", { href: "#", className: "-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50" }, "Company")),
+                        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"))))))));
+};
+exports.VistaHeaderV5 = VistaHeaderV5;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VistaHeaderV6: () => React.JSX.Element;

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

@@ -0,0 +1,79 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaHeaderV6 = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@headlessui/react");
+var outline_1 = require("@heroicons/react/24/outline");
+var navigation = [
+    { name: 'Product', href: '#' },
+    { name: 'Features', href: '#' },
+    { name: 'Marketplace', href: '#' },
+    { name: 'Company', href: '#' },
+];
+var VistaHeaderV6 = 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: "flex 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("div", { className: "hidden lg:flex lg:gap-x-12" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "text-sm/6 font-semibold text-gray-900" }, 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" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "-mx-3 block rounded-lg px-3 py-2 text-base/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"))))))));
+};
+exports.VistaHeaderV6 = VistaHeaderV6;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VistaHeaderV7: () => React.JSX.Element;

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

@@ -0,0 +1,79 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaHeaderV7 = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@headlessui/react");
+var outline_1 = require("@heroicons/react/24/outline");
+var navigation = [
+    { name: 'Product', href: '#' },
+    { name: 'Features', href: '#' },
+    { name: 'Marketplace', href: '#' },
+    { name: 'Company', href: '#' },
+];
+var VistaHeaderV7 = 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 gap-x-6 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: "hidden lg:flex lg:gap-x-12" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "text-sm/6 font-semibold text-gray-900" }, item.name)); })),
+            react_1.default.createElement("div", { className: "flex flex-1 items-center justify-end gap-x-6" },
+                react_1.default.createElement("a", { href: "#", className: "hidden text-sm/6 font-semibold text-gray-900 lg:block" }, "Log in"),
+                react_1.default.createElement("a", { href: "#", className: "rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" }, "Sign up")),
+            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.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 gap-x-6" },
+                    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("a", { href: "#", className: "ml-auto rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" }, "Sign up"),
+                    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" }, navigation.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "-mx-3 block rounded-lg px-3 py-2 text-base/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"))))))));
+};
+exports.VistaHeaderV7 = VistaHeaderV7;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VistaHeaderV8: () => React.JSX.Element;

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

@@ -0,0 +1,136 @@
+"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));
+};
+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"))))))));
+};
+exports.VistaHeaderV8 = VistaHeaderV8;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VistaHeaderV9: () => React.JSX.Element;