@appcorp/app-corp-vista 0.2.99 → 0.3.1

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

@@ -0,0 +1,90 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavBar = void 0;
+var react_1 = __importDefault(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 image_1 = __importDefault(require("next/image"));
+var vista_button_v1_1 = require("../vista-button-v1/vista-button-v1");
+var vista_button_type_1 = require("../../type/vista-button-type");
+var NavBar = function (_a) {
+    var companyName = _a.companyName, ctaButtonHandler = _a.ctaButtonHandler, ctaButtonLabel = _a.ctaButtonLabel, handleMenuOpen = _a.handleMenuOpen, items = _a.items, _b = _a.loginVisible, loginVisible = _b === void 0 ? false : _b, logoAlt = _a.logoAlt, _c = _a.logoContainerClassName, logoContainerClassName = _c === void 0 ? '' : _c, logoSrc = _a.logoSrc, menuOpen = _a.menuOpen;
+    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-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 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 }, 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 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 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 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 dark:text-white" },
+                                                name,
+                                                react_1.default.createElement("span", { className: "absolute inset-0" })),
+                                            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-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 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 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(vista_button_v1_1.VistaButtonV1, { handleOnClick: ctaButtonHandler, label: ctaButtonLabel, size: vista_button_type_1.VISTA_BUTTON_SIZE.MD, variant: vista_button_type_1.VISTA_BUTTON_VARIANT.PRIMARY })))),
+        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 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(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 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 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 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 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(vista_button_v1_1.VistaButtonV1, { variant: vista_button_type_1.VISTA_BUTTON_VARIANT.PRIMARY, handleOnClick: ctaButtonHandler, label: ctaButtonLabel, className: "my-8" }))))))));
+};
+exports.NavBar = NavBar;

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

@@ -6,10 +6,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VistaHeaderV8 = void 0;
 var react_1 = __importDefault(require("react"));
-var nav_bar_1 = require("../vista-header-v1/nav-bar");
+var nav_bar_1 = require("./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, containerClassName = _a.containerClassName;
+    var companyName = _a.companyName, containerClassName = _a.containerClassName, handleMenuOpen = _a.handleMenuOpen, items = _a.items, _b = _a.loginVisible, loginVisible = _b === void 0 ? false : _b, logoAlt = _a.logoAlt, logoSrc = _a.logoSrc, menuOpen = _a.menuOpen, ctaButtonHandler = _a.ctaButtonHandler, ctaButtonLabel = _a.ctaButtonLabel;
     return (react_1.default.createElement("header", { className: "bg-gray-50 dark:bg-gray-800 ".concat(containerClassName) },
-        react_1.default.createElement(nav_bar_1.NavBar, { companyName: companyName, handleMenuOpen: handleMenuOpen, items: items, loginVisible: loginVisible, logoAlt: logoAlt, logoSrc: logoSrc, menuOpen: menuOpen })));
+        react_1.default.createElement(nav_bar_1.NavBar, { companyName: companyName, handleMenuOpen: handleMenuOpen, items: items, loginVisible: loginVisible, logoAlt: logoAlt, logoSrc: logoSrc, menuOpen: menuOpen, ctaButtonHandler: ctaButtonHandler, ctaButtonLabel: ctaButtonLabel })));
 };
 exports.VistaHeaderV8 = VistaHeaderV8;

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

@@ -39,25 +39,62 @@ 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 },
+    {
+        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: '#', description: 'Learn more about our company values and mission to empower others' },
-    { name: 'Careers', href: '#', description: 'Looking for you next career opportunity? See all of our open positions' },
+    {
+        name: 'About us',
+        href: '#',
+        description: 'Learn more about our company values and mission to empower others',
+    },
+    {
+        name: 'Careers',
+        href: '#',
+        description: 'Looking for you next career opportunity? See all of our open positions',
+    },
     {
         name: 'Support',
         href: '#',
         description: 'Get in touch with our dedicated support team or reach out on our community forums',
     },
-    { name: 'Blog', href: '#', description: 'Read our latest announcements and get perspectives from our team' },
+    {
+        name: 'Blog',
+        href: '#',
+        description: 'Read our latest announcements and get perspectives from our team',
+    },
 ];
 var VistaHeaderV9 = function () {
     var _a = (0, react_1.useState)(false), mobileMenuOpen = _a[0], setMobileMenuOpen = _a[1];

package/molecules/vista-modal-v1/vista-modal-v1.d.ts

@@ -1,3 +1,3 @@
-import { FC } from "react";
-import { VistaModalV1Props } from "../../type/vista-modal-type";
+import { FC } from 'react';
+import { VistaModalV1Props } from '../../type/vista-modal-type';
 export declare const VistaModalV1: FC<VistaModalV1Props>;

package/molecules/vista-notification-v1/vista-notification-v1.js

@@ -14,11 +14,11 @@ var VistaNotificationV1 = function (_a) {
     var _b, _c;
     var description = _a.description, handleIsVisible = _a.handleIsVisible, heading = _a.heading, isVisible = _a.isVisible, _d = _a.variant, variant = _d === void 0 ? vista_notification_type_1.VISTA_NOTIFICATION_V1_VARIANT.DEFAULT : _d;
     var iconMap = (_b = {},
-        _b[vista_notification_type_1.VISTA_NOTIFICATION_V1_VARIANT.DEFAULT] = react_1.default.createElement(outline_1.BellAlertIcon, { className: "size-6 text-purple-400" }),
-        _b[vista_notification_type_1.VISTA_NOTIFICATION_V1_VARIANT.ERROR] = react_1.default.createElement(solid_1.XMarkIcon, { className: "size-6 text-red-400" }),
-        _b[vista_notification_type_1.VISTA_NOTIFICATION_V1_VARIANT.INFO] = react_1.default.createElement(outline_1.InformationCircleIcon, { className: "size-6 text-sky-400" }),
-        _b[vista_notification_type_1.VISTA_NOTIFICATION_V1_VARIANT.SUCCESS] = react_1.default.createElement(outline_1.CheckCircleIcon, { className: "size-6 text-green-400" }),
-        _b[vista_notification_type_1.VISTA_NOTIFICATION_V1_VARIANT.WARNING] = react_1.default.createElement(outline_1.ExclamationTriangleIcon, { className: "size-6 text-amber-400" }),
+        _b[vista_notification_type_1.VISTA_NOTIFICATION_V1_VARIANT.DEFAULT] = (react_1.default.createElement(outline_1.BellAlertIcon, { className: "size-6 text-purple-400" })),
+        _b[vista_notification_type_1.VISTA_NOTIFICATION_V1_VARIANT.ERROR] = (react_1.default.createElement(solid_1.XMarkIcon, { className: "size-6 text-red-400" })),
+        _b[vista_notification_type_1.VISTA_NOTIFICATION_V1_VARIANT.INFO] = (react_1.default.createElement(outline_1.InformationCircleIcon, { className: "size-6 text-sky-400" })),
+        _b[vista_notification_type_1.VISTA_NOTIFICATION_V1_VARIANT.SUCCESS] = (react_1.default.createElement(outline_1.CheckCircleIcon, { className: "size-6 text-green-400" })),
+        _b[vista_notification_type_1.VISTA_NOTIFICATION_V1_VARIANT.WARNING] = (react_1.default.createElement(outline_1.ExclamationTriangleIcon, { className: "size-6 text-amber-400" })),
         _b);
     var headingMap = (_c = {},
         _c[vista_notification_type_1.VISTA_NOTIFICATION_V1_VARIANT.DEFAULT] = 'Done',

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

@@ -10,7 +10,9 @@ var react_2 = require("@headlessui/react");
 var outline_1 = require("@heroicons/react/24/outline");
 var solid_1 = require("@heroicons/react/20/solid");
 var VistaNotificationV3 = function (_a) {
-    var heading = _a.heading, description = _a.description, handleIsVisible = _a.handleIsVisible, handleAction = _a.handleAction, isVisible = _a.isVisible, actions = _a.actions;
+    var heading = _a.heading, description = _a.description, handleIsVisible = _a.handleIsVisible, 
+    // handleAction,
+    isVisible = _a.isVisible, actions = _a.actions;
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { "aria-live": "assertive", className: "pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6" },
             react_1.default.createElement("div", { className: "flex w-full flex-col items-center space-y-4 sm:items-end" },

package/molecules/vista-progress-v2/vista-progress-v2.js

@@ -67,8 +67,8 @@ var VistaProgressV2 = function (_a) {
                             react_1.default.createElement("svg", { fill: "none", viewBox: "0 0 22 80", preserveAspectRatio: "none", className: "size-full text-gray-300" },
                                 react_1.default.createElement("path", { d: "M0 -2L20 40L0 82", stroke: "currentcolor", vectorEffect: "non-scaling-stroke", strokeLinejoin: "round" })))))));
             }))),
-        react_1.default.createElement("div", { className: 'h-full p-4' }, getCurrentStep.component),
-        react_1.default.createElement("div", { className: 'rounded-md border border-gray-300 flex justify-between items-center px-8 py-4' }, actions
+        react_1.default.createElement("div", { className: "h-full p-4" }, getCurrentStep.component),
+        react_1.default.createElement("div", { className: "rounded-md border border-gray-300 flex justify-between items-center px-8 py-4" }, actions
             .filter(function (_a) {
             var enabled = _a.enabled;
             return enabled;

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

@@ -11,7 +11,8 @@ var VistaProgressV3 = function (_a) {
         react_1.default.createElement("p", { className: "text-sm font-medium" },
             "Step ",
             steps.findIndex(function (step) { return step.status === 'current'; }) + 1,
-            " of ",
+            " of",
+            ' ',
             steps.length),
         react_1.default.createElement("ol", { role: "list", className: "ml-8 flex items-center space-x-5" }, steps.map(function (step) { return (react_1.default.createElement("li", { key: step.name }, step.status === 'complete' ? (react_1.default.createElement("a", { href: step.href, className: "block size-2.5 rounded-full bg-indigo-600 hover:bg-indigo-900" },
             react_1.default.createElement("span", { className: "sr-only" }, step.name))) : step.status === 'current' ? (react_1.default.createElement("a", { href: step.href, "aria-current": "step", className: "relative flex items-center justify-center" },

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

@@ -5,8 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VistaProgressV8 = void 0;
 var react_1 = __importDefault(require("react"));
-var VistaProgressV8 = function (_a) {
-    var steps = _a.steps;
+var VistaProgressV8 = function () {
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("h4", { className: "sr-only" }, "Status"),
         react_1.default.createElement("p", { className: "text-sm font-medium text-gray-900" }, "Migrating MySQL database..."),

package/molecules/vista-select-v1/vista-select-v1.js

@@ -65,6 +65,6 @@ var VistaSelectV1 = function (_a) {
                         item[selectKey1],
                         " ",
                         item[selectKey2]),
-                    react_1.default.createElement("span", { className: "absolute inset-y-0 right-0 flex items-center pr-4 text-primary group-data-[focus]:text-white" }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem[selectKey1]) === item[selectKey1] && react_1.default.createElement(solid_1.CheckIcon, { "aria-hidden": "true", className: "size-5" })))); }))))));
+                    react_1.default.createElement("span", { className: "absolute inset-y-0 right-0 flex items-center pr-4 text-primary group-data-[focus]:text-white" }, (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem[selectKey1]) === item[selectKey1] && (react_1.default.createElement(solid_1.CheckIcon, { "aria-hidden": "true", className: "size-5" }))))); }))))));
 };
 exports.VistaSelectV1 = VistaSelectV1;

package/molecules/vista-stacked-avatar-v1/vista-stacked-avatar-v1.js

@@ -9,7 +9,7 @@ var vista_avatar_type_1 = require("../../type/vista-avatar-type");
 var vista_avatar_v1_1 = require("../vista-avatar-v1/vista-avatar-v1");
 var VistaStackedAvatarV1 = function (_a) {
     var avatars = _a.avatars, size = _a.size;
-    return (react_1.default.createElement("div", { className: 'flex -space-x-4 overflow-hidden' }, avatars
+    return (react_1.default.createElement("div", { className: "flex -space-x-4 overflow-hidden" }, avatars
         .sort(function (a, b) { return a.order - b.order; })
         .filter(function (_a) {
         var enabled = _a.enabled;
@@ -17,7 +17,7 @@ var VistaStackedAvatarV1 = function (_a) {
     })
         .map(function (_a) {
         var id = _a.id, alt = _a.alt, src = _a.src;
-        return (react_1.default.createElement(vista_avatar_v1_1.VistaAvatarV1, { alt: alt, className: 'ring-2 ring-white', key: id, rounded: vista_avatar_type_1.VISTA_AVATAR_ROUNDED.FULL, size: size, src: src }));
+        return (react_1.default.createElement(vista_avatar_v1_1.VistaAvatarV1, { alt: alt, className: "ring-2 ring-white", key: id, rounded: vista_avatar_type_1.VISTA_AVATAR_ROUNDED.FULL, size: size, src: src }));
     })));
 };
 exports.VistaStackedAvatarV1 = VistaStackedAvatarV1;

package/molecules/vista-stats-v1.d.ts

@@ -1,3 +1,3 @@
-import { FC } from "react";
-import { VistaStatsV1Props } from "../type/vista-stats-type";
+import { FC } from 'react';
+import { VistaStatsV1Props } from '../type/vista-stats-type';
 export declare const VistaStatsV1: FC<VistaStatsV1Props>;

package/molecules/vista-stats-v1.js

@@ -7,7 +7,9 @@ exports.VistaStatsV1 = void 0;
 var react_1 = __importDefault(require("react"));
 var class_names_1 = require("../utils/class-names");
 var VistaStatsV1 = function (_a) {
-    var containerClassName = _a.containerClassName, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, items = _a.items;
+    var containerClassName = _a.containerClassName, 
+    // isLoading = false,
+    items = _a.items;
     return (react_1.default.createElement("dl", { className: "grid grid-cols-1 gap-px sm:grid-cols-2 lg:grid-cols-4 border border-gray-300 rounded-lg ".concat(containerClassName) }, items
         .sort(function (a, b) { return a.order - b.order; })
         .filter(function (_a) {

package/molecules/vista-stats-v2.d.ts

@@ -1,3 +1,3 @@
-import { FC } from "react";
-import { VistaStatsV2Props } from "../type/vista-stats-type";
+import { FC } from 'react';
+import { VistaStatsV2Props } from '../type/vista-stats-type';
 export declare const VistaStatsV2: FC<VistaStatsV2Props>;

package/molecules/vista-stats-v2.js

@@ -22,7 +22,7 @@ var VistaStatsV2 = function (_a) {
                     react_1.default.createElement("p", { className: "text-sm/6 font-medium text-gray-800 dark:text-gray-200" }, name),
                     isLoading ? (react_1.default.createElement(vista_shimmer_v1_1.VistaShimmerV1, null)) : (react_1.default.createElement("p", { className: "mt-2 flex items-baseline gap-x-2" },
                         react_1.default.createElement("span", { className: "text-4xl font-semibold tracking-tight text-primary dark:text-white" }, value),
-                        unit && react_1.default.createElement("span", { className: "text-sm text-primary dark:text-gray-200" }, unit)))));
+                        unit && (react_1.default.createElement("span", { className: "text-sm text-primary dark:text-gray-200" }, unit))))));
             })))));
 };
 exports.VistaStatsV2 = VistaStatsV2;

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

@@ -1,3 +1,3 @@
-import { FC } from "react";
-import { VistaStatsV3Props } from "../type/vista-stats-type";
+import { FC } from 'react';
+import { VistaStatsV3Props } from '../type/vista-stats-type';
 export declare const VistaStatsV3: FC<VistaStatsV3Props>;

package/molecules/vista-stats-v4.d.ts

@@ -1,3 +1,3 @@
-import { FC } from "react";
-import { VistaStatsV4Props } from "../type/vista-stats-type";
+import { FC } from 'react';
+import { VistaStatsV4Props } from '../type/vista-stats-type';
 export declare const VistaStatsV4: FC<VistaStatsV4Props>;

package/molecules/vista-stats-v4.js

@@ -58,12 +58,16 @@ var VistaStatsV4 = function (_a) {
                     react_1.default.createElement("p", { className: "ml-16 truncate text-sm font-medium text-gray-500" }, name)),
                 react_1.default.createElement("dd", { className: "ml-16 flex items-baseline pb-6 sm:pb-7" },
                     react_1.default.createElement("p", { className: "text-2xl font-semibold text-gray-900" }, stat),
-                    react_1.default.createElement("p", { className: (0, class_names_1.classNames)(changeType === 'increase' ? 'text-green-600' : 'text-red-600', 'ml-2 flex items-baseline text-sm font-semibold') },
+                    react_1.default.createElement("p", { className: (0, class_names_1.classNames)(changeType === 'increase'
+                            ? 'text-green-600'
+                            : 'text-red-600', 'ml-2 flex items-baseline text-sm font-semibold') },
                         changeType === 'increase' ? (react_1.default.createElement(solid_1.ArrowUpIcon, { "aria-hidden": "true", className: "size-5 shrink-0 self-center text-green-500" })) : (react_1.default.createElement(solid_1.ArrowDownIcon, { "aria-hidden": "true", className: "size-5 shrink-0 self-center text-red-500" })),
                         react_1.default.createElement("span", { className: "sr-only" },
-                            " ",
+                            ' ',
                             changeType === 'increase' ? 'Increased' : 'Decreased',
-                            " by "),
+                            ' ',
+                            "by",
+                            ' '),
                         change),
                     react_1.default.createElement("div", { className: "absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6" },
                         react_1.default.createElement("div", { className: "text-sm" },

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

@@ -1,3 +1,3 @@
-import { FC } from "react";
-import { VistaStatsV5Props } from "../type/vista-stats-type";
+import { FC } from 'react';
+import { VistaStatsV5Props } from '../type/vista-stats-type';
 export declare const VistaStatsV5: FC<VistaStatsV5Props>;

package/molecules/vista-stats-v5.js

@@ -27,12 +27,16 @@ var VistaStatsV5 = function (_a) {
                         react_1.default.createElement("span", { className: "ml-2 text-sm font-medium text-gray-500" },
                             "from ",
                             previousStat)),
-                    react_1.default.createElement("div", { className: (0, class_names_1.classNames)(changeType === 'increase' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800', 'inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-medium md:mt-2 lg:mt-0') },
+                    react_1.default.createElement("div", { className: (0, class_names_1.classNames)(changeType === 'increase'
+                            ? 'bg-green-100 text-green-800'
+                            : 'bg-red-100 text-red-800', 'inline-flex items-baseline rounded-full px-2.5 py-0.5 text-sm font-medium md:mt-2 lg:mt-0') },
                         changeType === 'increase' ? (react_1.default.createElement(solid_1.ArrowUpIcon, { "aria-hidden": "true", className: "-ml-1 mr-0.5 size-5 shrink-0 self-center text-green-500" })) : (react_1.default.createElement(solid_1.ArrowDownIcon, { "aria-hidden": "true", className: "-ml-1 mr-0.5 size-5 shrink-0 self-center text-red-500" })),
                         react_1.default.createElement("span", { className: "sr-only" },
-                            " ",
+                            ' ',
                             changeType === 'increase' ? 'Increased' : 'Decreased',
-                            " by "),
+                            ' ',
+                            "by",
+                            ' '),
                         change))));
         }))));
 };

package/molecules/vista-table-footer-v1.js

@@ -29,7 +29,7 @@ var VistaTableFooterV1 = function (_a) {
         react_1.default.createElement("div", { className: "col-span-6 flex flex-row items-center justify-end gap-4" },
             react_1.default.createElement("div", { className: "min-w-36 ".concat(selectClassName) },
                 react_1.default.createElement(vista_select_v1_1.VistaSelectV1, { handleOnChange: handleOnSelect, listItems: listOptions, nodeSelectKey: nodeSelectKey, selectKey1: selectKey1, selectKey2: selectKey2, selectedItem: selectedItem })),
-            react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { className: "".concat(previousClassName), dir: dir, disabled: isPreviousDisabled, handleOnClick: handlePreviousOnClick, label: previousLabel, prefixIcon: react_1.default.createElement(solid_1.ChevronLeftIcon, { className: 'size-5' }), size: vista_button_type_1.VISTA_BUTTON_SIZE.LG }),
-            react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { className: "".concat(nextClassName), dir: dir, disabled: isNextDisabled, handleOnClick: handleNextOnClick, label: nextLabel, size: vista_button_type_1.VISTA_BUTTON_SIZE.LG, suffixIcon: react_1.default.createElement(solid_1.ChevronRightIcon, { className: 'size-5' }) }))));
+            react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { className: "".concat(previousClassName), dir: dir, disabled: isPreviousDisabled, handleOnClick: handlePreviousOnClick, label: previousLabel, prefixIcon: react_1.default.createElement(solid_1.ChevronLeftIcon, { className: "size-5" }), size: vista_button_type_1.VISTA_BUTTON_SIZE.LG }),
+            react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { className: "".concat(nextClassName), dir: dir, disabled: isNextDisabled, handleOnClick: handleNextOnClick, label: nextLabel, size: vista_button_type_1.VISTA_BUTTON_SIZE.LG, suffixIcon: react_1.default.createElement(solid_1.ChevronRightIcon, { className: "size-5" }) }))));
 };
 exports.VistaTableFooterV1 = VistaTableFooterV1;

package/molecules/vista-table-header-v1.js

@@ -16,7 +16,7 @@ var VistaTableHeaderV1 = function (_a) {
             react_1.default.createElement("h1", { className: "text-base font-semibold text-gray-900 dark:text-white" }, tableHeading),
             react_1.default.createElement("p", { className: "mt-2 text-sm text-gray-900 dark:text-white" }, tableDescription)),
         react_1.default.createElement("div", { className: "mt-4 flex gap-4 sm:mt-0 sm:flex-none" },
-            searchEnabled && (react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { disabled: searchDisabled, handleOnChange: handleSearchInput, handleSuffixOnClick: handleSuffixOnClick, id: searchId, placeholder: searchPlaceholder, suffix: react_1.default.createElement(outline_1.XMarkIcon, { className: 'size-5' }), value: searchValue })),
+            searchEnabled && (react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { disabled: searchDisabled, handleOnChange: handleSearchInput, handleSuffixOnClick: handleSuffixOnClick, id: searchId, placeholder: searchPlaceholder, suffix: react_1.default.createElement(outline_1.XMarkIcon, { className: "size-5" }), value: searchValue })),
             headerActions
                 .filter(function (_a) {
                 var enabled = _a.enabled;

package/molecules/vista-upload-v1/vista-upload-v1.js

@@ -89,11 +89,11 @@ var VistaUploadV1 = function (_a) {
                         react_1.default.createElement("span", null, "Upload a file"),
                         react_1.default.createElement("input", { className: "sr-only", disabled: disabled, id: id, multiple: multiple, name: id, onChange: handleOnChange, ref: inputRef, required: required, type: type })),
                     react_1.default.createElement("p", { className: "pl-1" }, "or drag and drop")),
-                fileInfo && (react_1.default.createElement("p", { className: "text-xs/5 text-gray-500" }, fileInfo)))),
-            imageUrls && (imageUrls === null || imageUrls === void 0 ? void 0 : imageUrls.length) > 0 && (react_1.default.createElement("div", { className: 'slider-container w-full' },
-                react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { className: 'absolute top-3 right-3', handleOnClick: handleClearImage, icon: react_1.default.createElement(outline_1.XMarkIcon, { className: 'size-6' }), variant: vista_button_type_1.VISTA_BUTTON_VARIANT.ICON }),
-                react_1.default.createElement(DynamicReactSlick, __assign({}, slickConfig), imageUrls.map(function (url, ind) { return (react_1.default.createElement("div", { key: ind, className: 'h-full w-full flex mx-auto' },
-                    react_1.default.createElement(image_1.default, { alt: 'upload', className: 'mx-auto object-contain', sizes: '50vw', height: 100, src: url, width: 150 }))); }))))),
+                fileInfo && react_1.default.createElement("p", { className: "text-xs/5 text-gray-500" }, fileInfo))),
+            imageUrls && (imageUrls === null || imageUrls === void 0 ? void 0 : imageUrls.length) > 0 && (react_1.default.createElement("div", { className: "slider-container w-full" },
+                react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { className: "absolute top-3 right-3", handleOnClick: handleClearImage, icon: react_1.default.createElement(outline_1.XMarkIcon, { className: "size-6" }), variant: vista_button_type_1.VISTA_BUTTON_VARIANT.ICON }),
+                react_1.default.createElement(DynamicReactSlick, __assign({}, slickConfig), imageUrls.map(function (url, ind) { return (react_1.default.createElement("div", { key: ind, className: "h-full w-full flex mx-auto" },
+                    react_1.default.createElement(image_1.default, { alt: "upload", className: "mx-auto object-contain", sizes: "50vw", height: 100, src: url, width: 150 }))); }))))),
         info && !error && (react_1.default.createElement("p", { id: "".concat(id, "-info"), className: "mt-2 text-sm text-primary" }, info)),
         error && !info && (react_1.default.createElement("p", { id: "".concat(id, "-error"), className: "mt-2 text-sm text-red-500 dark:text-red-500" }, error))));
 };

package/molecules/vista-vertical-divider-v1.d.ts

@@ -1,3 +1,3 @@
-import { FC } from "react";
-import { VistaVerticalDividerV1Props } from "../type/vista-vertical-divider-type";
+import { FC } from 'react';
+import { VistaVerticalDividerV1Props } from '../type/vista-vertical-divider-type';
 export declare const VistaVerticalDividerV1: FC<VistaVerticalDividerV1Props>;

package/molecules/vista-vertical-divider-v2.d.ts

@@ -1,3 +1,3 @@
-import { FC } from "react";
-import { VistaVerticalDividerV2Props } from "../type/vista-vertical-divider-type";
+import { FC } from 'react';
+import { VistaVerticalDividerV2Props } from '../type/vista-vertical-divider-type';
 export declare const VistaVerticalDividerV2: FC<VistaVerticalDividerV2Props>;

package/molecules/vista-vertical-divider-v2.js

@@ -42,7 +42,7 @@ var VistaVerticalDividerV2 = function (_a) {
             react_1.default.createElement("div", { className: "w-full border-t border-gray-300" })),
         react_1.default.createElement("div", { className: "relative flex justify-center" },
             react_1.default.createElement("span", { className: "bg-white px-2 text-gray-500" }, (0, react_1.createElement)(icon, {
-                className: 'size-5 text-gray-500'
+                className: 'size-5 text-gray-500',
             })))));
 };
 exports.VistaVerticalDividerV2 = VistaVerticalDividerV2;

package/molecules/vista-vertical-divider-v3.d.ts

@@ -1,3 +1,3 @@
-import { FC } from "react";
-import { VistaVerticalDividerV3Props } from "../type/vista-vertical-divider-type";
+import { FC } from 'react';
+import { VistaVerticalDividerV3Props } from '../type/vista-vertical-divider-type';
 export declare const VistaVerticalDividerV3: FC<VistaVerticalDividerV3Props>;

package/molecules/vista-vertical-divider-v4.d.ts

@@ -1,3 +1,3 @@
-import { FC } from "react";
-import { VistaVerticalDividerV4Props } from "../type/vista-vertical-divider-type";
+import { FC } from 'react';
+import { VistaVerticalDividerV4Props } from '../type/vista-vertical-divider-type';
 export declare const VistaVerticalDividerV4: FC<VistaVerticalDividerV4Props>;

package/molecules/vista-vertical-divider-v5.d.ts

@@ -1,3 +1,3 @@
-import { FC } from "react";
-import { VistaVerticalDividerV5Props } from "../type/vista-vertical-divider-type";
+import { FC } from 'react';
+import { VistaVerticalDividerV5Props } from '../type/vista-vertical-divider-type';
 export declare const VistaVerticalDividerV5: FC<VistaVerticalDividerV5Props>;

package/molecules/vista-vertical-divider-v6.d.ts

@@ -1,3 +1,3 @@
-import { FC } from "react";
-import { VistaVerticalDividerV6Props } from "../type/vista-vertical-divider-type";
+import { FC } from 'react';
+import { VistaVerticalDividerV6Props } from '../type/vista-vertical-divider-type';
 export declare const VistaVerticalDividerV6: FC<VistaVerticalDividerV6Props>;

package/molecules/vista-vertical-divider-v7.d.ts

@@ -1,3 +1,3 @@
-import { FC } from "react";
-import { VistaVerticalDividerV7Props } from "../type/vista-vertical-divider-type";
+import { FC } from 'react';
+import { VistaVerticalDividerV7Props } from '../type/vista-vertical-divider-type';
 export declare const VistaVerticalDividerV7: FC<VistaVerticalDividerV7Props>;

package/molecules/vista-vertical-divider-v8.d.ts

@@ -1,3 +1,3 @@
-import { FC } from "react";
-import { VistaVerticalDividerV8Props } from "../type/vista-vertical-divider-type";
+import { FC } from 'react';
+import { VistaVerticalDividerV8Props } from '../type/vista-vertical-divider-type';
 export declare const VistaVerticalDividerV8: FC<VistaVerticalDividerV8Props>;

package/organisms/vista-chat-v2/vista-chat-v2.js

@@ -12,13 +12,24 @@ var vista_text_input_v1_1 = require("../../molecules/vista-text-input-v1");
 var vista_button_v1_1 = require("../../molecules/vista-button-v1/vista-button-v1");
 var vista_button_type_1 = require("../../type/vista-button-type");
 var vista_chat_bubble_v1_1 = require("../../molecules/vista-chat-bubble-v1/vista-chat-bubble-v1");
+var vista_vertical_divider_v1_1 = require("../../molecules/vista-vertical-divider-v1");
+var util_functions_1 = require("@react-pakistan/util-functions");
 var VistaChatV2 = function (_a) {
     var actionItems = _a.actionItems, buttonDenominations = _a.buttonDenominations, chatId = _a.chatId, chatValue = _a.chatValue, _b = _a.containerClassName, containerClassName = _b === void 0 ? '' : _b, _c = _a.estimatedBalance, estimatedBalance = _c === void 0 ? '' : _c, handleChatOnChange = _a.handleChatOnChange, handleOnBlur = _a.handleOnBlur, handleOnFocus = _a.handleOnFocus, handlePayment = _a.handlePayment, isBalanceLow = _a.isBalanceLow, messages = _a.messages, name = _a.name, paymentLoading = _a.paymentLoading, psychic = _a.psychic, sideBarHeading = _a.sideBarHeading, sideBarNode = _a.sideBarNode, timer = _a.timer, typing = _a.typing, user = _a.user;
     var renderChatMessages = function () {
-        return (react_1.default.createElement("div", { className: 'overflow-y-scroll' }, messages.map((function (_a, ind) {
+        var lastDate = '';
+        return (react_1.default.createElement("div", { className: "overflow-y-scroll" }, messages.map(function (_a, ind) {
+            var _b, _c;
             var createdAt = _a.createdAt, id = _a.id, isUser = _a.isUser, message = _a.message;
-            return (react_1.default.createElement(vista_chat_bubble_v1_1.VistaChatBubbleV1, { createdAt: createdAt, isUser: isUser, key: id, message: message, psychic: psychic, user: user, isLast: ind === messages.length - 1 }));
-        }))));
+            var shouldShowDivider = ((_b = lastDate.split(' ')) === null || _b === void 0 ? void 0 : _b[0]) === ((_c = createdAt.split(' ')) === null || _c === void 0 ? void 0 : _c[0])
+                ? false
+                : true;
+            lastDate = createdAt;
+            return (react_1.default.createElement("div", { key: id },
+                shouldShowDivider && (react_1.default.createElement("div", { className: "pt-8" },
+                    react_1.default.createElement(vista_vertical_divider_v1_1.VistaVerticalDividerV1, { label: (0, util_functions_1.formatDate)(createdAt, util_functions_1.DATE_FORMATS.DAY_DD_MM_YY_COMPACT) }))),
+                react_1.default.createElement(vista_chat_bubble_v1_1.VistaChatBubbleV1, { createdAt: createdAt, isUser: isUser, message: message, psychic: psychic, user: user, isLast: ind === messages.length - 1 })));
+        })));
     };
     var handleOnKeyDown = function (e) {
         if (e.key === 'Enter') {
@@ -30,17 +41,17 @@ var VistaChatV2 = function (_a) {
         react_1.default.createElement("section", { className: "col-span-9 flex flex-col" },
             react_1.default.createElement(vista_chat_heading_v1_1.VistaChatHeadingV1, { heading: name, timer: timer, estimatedBalance: estimatedBalance }),
             react_1.default.createElement("div", { className: "overflow-y-auto h-full flex flex-col justify-end p-4" }, renderChatMessages()),
-            isBalanceLow && (react_1.default.createElement("div", { className: 'grid grid-cols-5 m-4 p-4 border-2 border-primary border-dashed rounded-md justify-between items-center bg-cyan-200' },
-                react_1.default.createElement("div", { className: 'col-span-2' },
-                    react_1.default.createElement("p", { className: 'text-md font-semibold' }, "You are running out of your Kismaa credits, click one of the buttons to top up your account.")),
+            isBalanceLow && (react_1.default.createElement("div", { className: "grid grid-cols-5 m-4 p-4 border-2 border-primary border-dashed rounded-md justify-between items-center bg-cyan-200" },
+                react_1.default.createElement("div", { className: "col-span-2" },
+                    react_1.default.createElement("p", { className: "text-md font-semibold" }, "You are running out of your Kismaa credits, click one of the buttons to top up your account.")),
                 react_1.default.createElement("div", { className: "flex flex-row justify-end gap-4 col-span-3" }, buttonDenominations.map(function (_a) {
                     var loading = _a.loading, value = _a.value;
                     return (react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { className: "min-w-[120px] disabled:cursor-not-allowed", disabled: paymentLoading === loading, handleOnClick: function () { return handlePayment(loading, value); }, key: value, label: "Top up $".concat(value), loading: paymentLoading === loading, size: vista_button_type_1.VISTA_BUTTON_SIZE.LG }));
                 })))),
-            react_1.default.createElement("div", { className: 'pl-4' }, typing && (react_1.default.createElement("p", { className: 'text-xs italic pb-1 text-primary' }, typing))),
+            react_1.default.createElement("div", { className: "pl-4" }, typing && (react_1.default.createElement("p", { className: "text-xs italic pb-1 text-primary" }, typing))),
             react_1.default.createElement("div", { className: "flex flex-row items-center gap-4 border-t border-gray-200 p-4" },
-                react_1.default.createElement("div", { className: 'w-full' },
-                    react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnBlur: handleOnBlur, handleOnChange: handleChatOnChange, handleOnFocus: handleOnFocus, handleOnKeyDown: handleOnKeyDown, id: chatId, placeholder: 'Enter message...', value: chatValue })),
+                react_1.default.createElement("div", { className: "w-full" },
+                    react_1.default.createElement(vista_text_input_v1_1.VistaTextInputV1, { handleOnBlur: handleOnBlur, handleOnChange: handleChatOnChange, handleOnFocus: handleOnFocus, handleOnKeyDown: handleOnKeyDown, id: chatId, placeholder: "Enter message...", value: chatValue })),
                 actionItems
                     .slice(0, 2)
                     .filter(function (_a) {

package/organisms/vista-dashboard-header-v1/vista-dashboard-header-v1.js

@@ -8,7 +8,7 @@ var react_1 = __importDefault(require("react"));
 var vista_dashboard_tab_navigator_v1_1 = require("../../molecules/vista-dashboard-tab-navigator-v1/vista-dashboard-tab-navigator-v1");
 var VistaDashboardHeaderV1 = function (_a) {
     var heading = _a.heading, items = _a.items;
-    return (react_1.default.createElement("div", { className: 'shadow-md' },
+    return (react_1.default.createElement("div", { className: "shadow-md" },
         react_1.default.createElement("h1", { className: "sr-only" }, heading),
         react_1.default.createElement("header", { className: "border-b border-white/5" },
             react_1.default.createElement("nav", { className: "flex overflow-x-auto py-4" },

package/organisms/vista-feature-v14/vista-feature-v14.js

@@ -23,8 +23,8 @@ var VistaFeatureV14 = function () {
                                 react_1.default.createElement("img", { alt: "", src: "https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80", className: "size-6 flex-none rounded-full" }),
                                 react_1.default.createElement("div", null,
                                     react_1.default.createElement("span", { className: "font-semibold text-gray-900" }, "Maria Hill"),
-                                    " \u2013",
                                     ' ',
+                                    "\u2013 ",
                                     react_1.default.createElement("span", { className: "text-gray-600" }, "Marketing Manager")))))),
                 react_1.default.createElement("img", { alt: "Product screenshot", src: "https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png", width: 2432, height: 1442, className: "w-3xl max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-228 md:-ml-4 lg:ml-0" })))));
 };