@appcorp/app-corp-vista 0.1.100 → 0.2.1

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

@@ -53,7 +53,7 @@ var VistaComboboxV1 = function (_a) {
             var id = _a.id;
             return id === selectedItem.id;
         })[0];
-    }, [selectedItem]);
+    }, [selectedItem, listItems]);
     return (react_1.default.createElement(react_2.Combobox, { as: "div", className: "".concat(comboboxClassName), onChange: function (v) { return handleOnChange(nodeSelectKey, v); }, value: (filteredItem === null || filteredItem === void 0 ? void 0 : filteredItem[selectKey1]) || selectedItem[selectKey1] || '', disabled: disabled },
         react_1.default.createElement(react_2.Label, { className: "block text-sm/6 font-medium text-gray-900 dark:text-white ".concat(labelClassName) },
             label,

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

@@ -48,7 +48,7 @@ var VistaSelectV1 = function (_a) {
             var id = _a.id;
             return id === selectedItem.id;
         })[0];
-    }, [selectedItem]);
+    }, [selectedItem, listItems]);
     return (react_1.default.createElement("div", { className: className },
         react_1.default.createElement(react_2.Listbox, { value: selectedItem, onChange: function (v) { return handleOnChange(nodeSelectKey, v); } },
             label && (react_1.default.createElement(react_2.Label, { className: "block text-sm/6 font-medium text-gray-900 dark:text-white", id: nodeSelectKey },

package/organisms/vista-product-features-v1/vista-product-features-v1.d.ts

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

package/organisms/vista-product-features-v1/vista-product-features-v1.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaProductFeaturesV1 = void 0;
+var react_1 = __importDefault(require("react"));
+var VistaProductFeaturesV1 = function () {
+    return (react_1.default.createElement("div", { className: "bg-gray-50" },
+        react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8" },
+            react_1.default.createElement("section", { "aria-labelledby": "details-heading" },
+                react_1.default.createElement("div", { className: "flex flex-col items-center text-center" },
+                    react_1.default.createElement("h2", { id: "details-heading", className: "text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl" }, "The Fine Details"),
+                    react_1.default.createElement("p", { className: "mt-3 max-w-3xl text-lg text-gray-600" }, "Our patented padded snack sleeve construction protects your favorite treats from getting smooshed during all-day adventures, long shifts at work, and tough travel schedules.")),
+                react_1.default.createElement("div", { className: "mt-16 grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:gap-x-8" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("img", { alt: "Drawstring top with elastic loop closure and textured interior padding.", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-04-detail-product-shot-01.jpg", className: "aspect-3/2 w-full rounded-lg object-cover" }),
+                        react_1.default.createElement("p", { className: "mt-8 text-base text-gray-500" }, "The 20L model has enough space for 370 candy bars, 6 cylinders of chips, 1220 standard gumballs, or any combination of on-the-go treats that your heart desires. Yes, we did the math.")),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("img", { alt: "Front zipper pouch with included key ring.", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-04-detail-product-shot-02.jpg", className: "aspect-3/2 w-full rounded-lg object-cover" }),
+                        react_1.default.createElement("p", { className: "mt-8 text-base text-gray-500" }, "Up your snack organization game with multiple compartment options. The quick-access stash pouch is ready for even the most unexpected snack attacks and sharing needs.")))))));
+};
+exports.VistaProductFeaturesV1 = VistaProductFeaturesV1;

package/organisms/vista-product-features-v2/vista-product-features-v2.d.ts

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

package/organisms/vista-product-features-v2/vista-product-features-v2.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaProductFeaturesV2 = void 0;
+var react_1 = __importDefault(require("react"));
+var features = [
+    { name: 'Origin', description: 'Designed by Good Goods, Inc.' },
+    { name: 'Material', description: 'Solid walnut base with rare earth magnets and polycarbonate add-ons.' },
+    { name: 'Dimensions', description: '15" x 3.75" x .75"' },
+    { name: 'Finish', description: 'Hand sanded and finished with natural oil' },
+    { name: 'Includes', description: 'Pen Tray, Phone Tray, Small Tray, Large Tray, Sticky Note Holder' },
+    { name: 'Considerations', description: 'Made from natural materials. Grain and color vary with each item.' },
+];
+var VistaProductFeaturesV2 = function () {
+    return (react_1.default.createElement("div", { className: "bg-white" },
+        react_1.default.createElement("div", { "aria-hidden": "true", className: "relative" },
+            react_1.default.createElement("img", { alt: "", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-02-full-width.jpg", className: "h-96 w-full object-cover" }),
+            react_1.default.createElement("div", { className: "absolute inset-0 bg-linear-to-t from-white" })),
+        react_1.default.createElement("div", { className: "relative mx-auto -mt-12 max-w-7xl px-4 pb-16 sm:px-6 sm:pb-24 lg:px-8" },
+            react_1.default.createElement("div", { className: "mx-auto max-w-2xl text-center lg:max-w-4xl" },
+                react_1.default.createElement("h2", { className: "text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl" }, "Technical Specifications"),
+                react_1.default.createElement("p", { className: "mt-4 text-gray-500" }, "Organize is a system to keep your desk tidy and photo-worthy all day long. Procrastinate your work while you meticulously arrange items into dedicated trays.")),
+            react_1.default.createElement("dl", { className: "mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none lg:grid-cols-3 lg:gap-x-8" }, features.map(function (feature) { return (react_1.default.createElement("div", { key: feature.name, className: "border-t border-gray-200 pt-4" },
+                react_1.default.createElement("dt", { className: "font-medium text-gray-900" }, feature.name),
+                react_1.default.createElement("dd", { className: "mt-2 text-sm text-gray-500" }, feature.description))); })))));
+};
+exports.VistaProductFeaturesV2 = VistaProductFeaturesV2;

package/organisms/vista-product-features-v3/vista-product-features-v3.d.ts

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

package/organisms/vista-product-features-v3/vista-product-features-v3.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaProductFeaturesV3 = void 0;
+var react_1 = __importDefault(require("react"));
+var features = [
+    { name: 'Origin', description: 'Designed by Good Goods, Inc.' },
+    { name: 'Material', description: 'Solid walnut base with rare earth magnets and powder coated steel card cover' },
+    { name: 'Dimensions', description: '6.25" x 3.55" x 1.15"' },
+    { name: 'Finish', description: 'Hand sanded and finished with natural oil' },
+    { name: 'Includes', description: 'Wood card tray and 3 refill packs' },
+    { name: 'Considerations', description: 'Made from natural materials. Grain and color vary with each item.' },
+];
+var VistaProductFeaturesV3 = function () {
+    return (react_1.default.createElement("div", { className: "bg-white" },
+        react_1.default.createElement("div", { className: "mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-8 gap-y-16 px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:grid-cols-2 lg:px-8" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("h2", { className: "text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl" }, "Technical Specifications"),
+                react_1.default.createElement("p", { className: "mt-4 text-gray-500" }, "The walnut wood card tray is precision milled to perfectly fit a stack of Focus cards. The powder coated steel divider separates active cards from new ones, or can be used to archive important task lists."),
+                react_1.default.createElement("dl", { className: "mt-16 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:gap-x-8" }, features.map(function (feature) { return (react_1.default.createElement("div", { key: feature.name, className: "border-t border-gray-200 pt-4" },
+                    react_1.default.createElement("dt", { className: "font-medium text-gray-900" }, feature.name),
+                    react_1.default.createElement("dd", { className: "mt-2 text-sm text-gray-500" }, feature.description))); }))),
+            react_1.default.createElement("div", { className: "grid grid-cols-2 grid-rows-2 gap-4 sm:gap-6 lg:gap-8" },
+                react_1.default.createElement("img", { alt: "Walnut card tray with white powder coated steel divider and 3 punchout holes.", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-03-detail-01.jpg", className: "rounded-lg bg-gray-100" }),
+                react_1.default.createElement("img", { alt: "Top down view of walnut card tray with embedded magnets and card groove.", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-03-detail-02.jpg", className: "rounded-lg bg-gray-100" }),
+                react_1.default.createElement("img", { alt: "Side of walnut card tray with card groove and recessed card area.", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-03-detail-03.jpg", className: "rounded-lg bg-gray-100" }),
+                react_1.default.createElement("img", { alt: "Walnut card tray filled with cards and card angled in dedicated groove.", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-03-detail-04.jpg", className: "rounded-lg bg-gray-100" })))));
+};
+exports.VistaProductFeaturesV3 = VistaProductFeaturesV3;

package/organisms/vista-product-features-v4/vista-product-features-v4.d.ts

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

package/organisms/vista-product-features-v4/vista-product-features-v4.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaProductFeaturesV4 = void 0;
+var react_1 = __importDefault(require("react"));
+var features = [
+    {
+        name: 'Adventure-ready',
+        description: 'The Drawstring Canister is water and tear resistant with durable canvas construction. This bag holds up to the demands of daily use while keeping your snacks secure.',
+        imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-04-detail-03.jpg',
+        imageAlt: 'Printed photo of bag being tossed into the sky on top of grass.',
+    },
+    {
+        name: 'Minimal and clean',
+        description: "Everything you need, nothing you don't. This bag has the simple, contemporary design that enables you to tell everyone you know about how essentialism is the only rational way to live life.",
+        imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-04-detail-01.jpg',
+        imageAlt: 'Double stitched black canvas hook loop.',
+    },
+    {
+        name: 'Organized',
+        description: 'Never lose your snacks again with our patent-pending snack stash pocket system. With dedicated pouches for each of your snacking needs, the Drawstring Canister unlocks new levels of efficiency and convenience.',
+        imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-04-detail-02.jpg',
+        imageAlt: 'Black canvas body with chrome zipper and key ring.',
+    },
+];
+var VistaProductFeaturesV4 = function () {
+    return (react_1.default.createElement("div", { className: "bg-white" },
+        react_1.default.createElement("div", { className: "mx-auto max-w-7xl py-24 sm:px-2 sm:py-32 lg:px-4" },
+            react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 lg:max-w-none" },
+                react_1.default.createElement("div", { className: "max-w-3xl" },
+                    react_1.default.createElement("h2", { className: "font-semibold text-gray-500" }, "Drawstring Canister"),
+                    react_1.default.createElement("p", { className: "mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl" }, "Use it your way"),
+                    react_1.default.createElement("p", { className: "mt-4 text-gray-500" }, "The Drawstring Canister comes with multiple strap and handle options to adapt throughout your day. Shoulder sling it, backpack it, or handy carry it.")),
+                react_1.default.createElement("div", { className: "mt-10 space-y-16 border-t border-gray-200 pt-10 sm:mt-16 sm:pt-16" }, features.map(function (feature) { return (react_1.default.createElement("div", { key: feature.name, className: "flex flex-col-reverse lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8" },
+                    react_1.default.createElement("div", { className: "mt-6 lg:col-span-5 lg:mt-0 xl:col-span-4" },
+                        react_1.default.createElement("h3", { className: "text-lg font-medium text-gray-900" }, feature.name),
+                        react_1.default.createElement("p", { className: "mt-2 text-sm text-gray-500" }, feature.description)),
+                    react_1.default.createElement("div", { className: "flex-auto lg:col-span-7 xl:col-span-8" },
+                        react_1.default.createElement("img", { alt: feature.imageAlt, src: feature.imageSrc, className: "aspect-5/2 w-full rounded-lg bg-gray-100 object-cover" })))); }))))));
+};
+exports.VistaProductFeaturesV4 = VistaProductFeaturesV4;

package/organisms/vista-product-features-v5/vista-product-features-v5.d.ts

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

package/organisms/vista-product-features-v5/vista-product-features-v5.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaProductFeaturesV5 = void 0;
+var react_1 = __importDefault(require("react"));
+var features = [
+    {
+        name: 'Durable',
+        description: 'The leather cover and machined steel disc binding stand up to daily use for years to come.',
+    },
+    {
+        name: 'Refillable',
+        description: 'Buy it once and refill as often as you need. Subscribe and save on routine refills.',
+    },
+    {
+        name: 'Thoughtfully designed',
+        description: 'The comfortable disc binding allows you to quickly rearrange pages or combine lined, graph, and blank refills.',
+    },
+    { name: 'Locally made', description: 'Responsibly and sustainably made real close to wherever you are, somehow.' },
+];
+var VistaProductFeaturesV5 = function () {
+    return (react_1.default.createElement("div", { className: "bg-white" },
+        react_1.default.createElement("section", { "aria-labelledby": "features-heading", className: "relative" },
+            react_1.default.createElement("img", { alt: "Black leather journal with silver steel disc binding resting on wooden shelf with machined steel pen.", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/confirmation-page-01-hero.jpg", className: "aspect-3/2 w-full object-cover sm:aspect-5/2 lg:absolute lg:aspect-auto lg:h-full lg:w-1/2 lg:pr-4 xl:pr-16" }),
+            react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 pt-16 pb-24 sm:px-6 sm:pb-32 lg:grid lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8 lg:pt-32" },
+                react_1.default.createElement("div", { className: "lg:col-start-2" },
+                    react_1.default.createElement("h2", { id: "features-heading", className: "font-medium text-gray-500" }, "Leatherbound Daily Journal"),
+                    react_1.default.createElement("p", { className: "mt-4 text-4xl font-bold tracking-tight text-gray-900" }, "All in the Details"),
+                    react_1.default.createElement("p", { className: "mt-4 text-gray-500" }, "Weve obsessed over every detail of this handcrafted journal to bring you the best materials for daily use."),
+                    react_1.default.createElement("dl", { className: "mt-10 grid grid-cols-1 gap-x-8 gap-y-10 text-sm sm:grid-cols-2" }, features.map(function (feature) { return (react_1.default.createElement("div", { key: feature.name },
+                        react_1.default.createElement("dt", { className: "font-medium text-gray-900" }, feature.name),
+                        react_1.default.createElement("dd", { className: "mt-2 text-gray-500" }, feature.description))); })))))));
+};
+exports.VistaProductFeaturesV5 = VistaProductFeaturesV5;

package/organisms/vista-product-features-v6/vista-product-features-v6.d.ts

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

package/organisms/vista-product-features-v6/vista-product-features-v6.js

@@ -0,0 +1,103 @@
+"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.VistaProductFeaturesV6 = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@headlessui/react");
+var tabs = [
+    {
+        name: 'Design',
+        features: [
+            {
+                name: 'Adaptive and modular',
+                description: 'The Organize base set allows you to configure and evolve your setup as your items and habits change. The included trays and optional add-ons are easily rearranged to achieve that perfect setup.',
+                imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-06-detail-01.jpg',
+                imageAlt: 'Maple organizer base with slots, supporting white polycarbonate trays of various sizes.',
+            },
+        ],
+    },
+    {
+        name: 'Material',
+        features: [
+            {
+                name: 'Natural wood options',
+                description: 'Organize has options for rich walnut and bright maple base materials. Accent your desk with a contrasting material, or match similar woods for a calm and cohesive look. Every base is hand sanded and finished.',
+                imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-06-detail-02.jpg',
+                imageAlt: 'Walnut organizer base with pen, sticky note, phone, and bin trays, next to modular drink coaster attachment.',
+            },
+        ],
+    },
+    {
+        name: 'Considerations',
+        features: [
+            {
+                name: 'Helpful around the home',
+                description: "Our customers use Organize throughout the house to bring efficiency to many daily routines. Enjoy Organize in your workspace, kitchen, living room, entry way, garage, and more. We can't wait to see how you'll use it!",
+                imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-06-detail-03.jpg',
+                imageAlt: 'Walnut organizer base with white polycarbonate trays in the kitchen with various kitchen utensils.',
+            },
+        ],
+    },
+    {
+        name: 'Included',
+        features: [
+            {
+                name: "Everything you'll need",
+                description: 'The Organize base set includes the pen, phone, small, and large trays to help you group all your essential items. Expand your set with the drink coaster and headphone stand add-ons.',
+                imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-06-detail-04.jpg',
+                imageAlt: 'Walnut organizer system on black leather desk mat on top of white desk.',
+            },
+        ],
+    },
+];
+var VistaProductFeaturesV6 = function () {
+    return (react_1.default.createElement("div", { className: "bg-white" },
+        react_1.default.createElement("section", { "aria-labelledby": "features-heading", className: "mx-auto max-w-7xl py-32 sm:px-2 lg:px-8" },
+            react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 lg:max-w-none lg:px-0" },
+                react_1.default.createElement("div", { className: "max-w-3xl" },
+                    react_1.default.createElement("h2", { id: "features-heading", className: "text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl" }, "Technical Specifications"),
+                    react_1.default.createElement("p", { className: "mt-4 text-gray-500" }, "The Organize modular system offers endless options for arranging your favorite and most used items. Keep everything at reach and in its place, while dressing up your workspace.")),
+                react_1.default.createElement(react_2.TabGroup, { className: "mt-4" },
+                    react_1.default.createElement("div", { className: "-mx-4 flex overflow-x-auto sm:mx-0" },
+                        react_1.default.createElement("div", { className: "flex-auto border-b border-gray-200 px-4 sm:px-0" },
+                            react_1.default.createElement(react_2.TabList, { className: "-mb-px flex space-x-10" }, tabs.map(function (tab) { return (react_1.default.createElement(react_2.Tab, { key: tab.name, className: "border-b-2 border-transparent py-6 text-sm font-medium whitespace-nowrap text-gray-500 hover:border-gray-300 hover:text-gray-700 data-selected:border-indigo-500 data-selected:text-indigo-600" }, tab.name)); })))),
+                    react_1.default.createElement(react_2.TabPanels, { as: react_1.Fragment }, tabs.map(function (tab) { return (react_1.default.createElement(react_2.TabPanel, { key: tab.name, className: "space-y-16 pt-10 lg:pt-16" }, tab.features.map(function (feature) { return (react_1.default.createElement("div", { key: feature.name, className: "flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8" },
+                        react_1.default.createElement("div", { className: "mt-6 lg:col-span-5 lg:mt-0" },
+                            react_1.default.createElement("h3", { className: "text-lg font-medium text-gray-900" }, feature.name),
+                            react_1.default.createElement("p", { className: "mt-2 text-sm text-gray-500" }, feature.description)),
+                        react_1.default.createElement("div", { className: "lg:col-span-7" },
+                            react_1.default.createElement("img", { alt: feature.imageAlt, src: feature.imageSrc, className: "aspect-2/1 w-full rounded-lg bg-gray-100 object-cover sm:aspect-5/2" })))); }))); })))))));
+};
+exports.VistaProductFeaturesV6 = VistaProductFeaturesV6;

package/organisms/vista-product-features-v7/vista-product-features-v7.d.ts

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

package/organisms/vista-product-features-v7/vista-product-features-v7.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaProductFeaturesV7 = void 0;
+var react_1 = __importDefault(require("react"));
+var class_names_1 = require("../../utils/class-names");
+var features = [
+    {
+        name: 'Minimal and thoughtful',
+        description: 'Our laptop sleeve is compact and precisely fits 13" devices. The zipper allows you to access the interior with ease, and the front pouch provides a convenient place for your charger cable.',
+        imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-07-detail-01.jpg',
+        imageAlt: 'White canvas laptop sleeve with gray felt interior, silver zipper, and tan leather zipper pull.',
+    },
+    {
+        name: 'Refined details',
+        description: 'We design every detail with the best materials and finishes. This laptop sleeve features durable canvas with double-stitched construction, a felt interior, and a high quality zipper that hold up to daily use.',
+        imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-07-detail-02.jpg',
+        imageAlt: 'Detail of zipper pull with tan leather and silver rivet.',
+    },
+];
+var VistaProductFeaturesV7 = function () {
+    return (react_1.default.createElement("div", { className: "bg-white" },
+        react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8" },
+            react_1.default.createElement("div", { className: "mx-auto max-w-3xl text-center" },
+                react_1.default.createElement("h2", { className: "text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl" }, "Protect your device"),
+                react_1.default.createElement("p", { className: "mt-4 text-gray-500" }, "As a digital creative, your laptop or tablet is at the center of your work. Keep your device safe with a fabric sleeve that matches in quality and looks.")),
+            react_1.default.createElement("div", { className: "mt-16 space-y-16" }, features.map(function (feature, featureIdx) { return (react_1.default.createElement("div", { key: feature.name, className: "flex flex-col-reverse lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8" },
+                react_1.default.createElement("div", { className: (0, class_names_1.classNames)(featureIdx % 2 === 0 ? 'lg:col-start-1' : 'lg:col-start-8 xl:col-start-9', 'mt-6 lg:col-span-5 lg:row-start-1 lg:mt-0 xl:col-span-4') },
+                    react_1.default.createElement("h3", { className: "text-lg font-medium text-gray-900" }, feature.name),
+                    react_1.default.createElement("p", { className: "mt-2 text-sm text-gray-500" }, feature.description)),
+                react_1.default.createElement("div", { className: (0, class_names_1.classNames)(featureIdx % 2 === 0 ? 'lg:col-start-6 xl:col-start-5' : 'lg:col-start-1', 'flex-auto lg:col-span-7 lg:row-start-1 xl:col-span-8') },
+                    react_1.default.createElement("img", { alt: feature.imageAlt, src: feature.imageSrc, className: "aspect-5/2 w-full rounded-lg bg-gray-100 object-cover" })))); })))));
+};
+exports.VistaProductFeaturesV7 = VistaProductFeaturesV7;

package/organisms/vista-product-features-v8/vista-product-features-v8.d.ts

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

package/organisms/vista-product-features-v8/vista-product-features-v8.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaProductFeaturesV8 = void 0;
+var react_1 = __importDefault(require("react"));
+var features = [
+    {
+        name: 'Three card types',
+        description: 'Today, Next, and Someday cards allow you to defer your dreams into the future.',
+        imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-08-detail-01.jpg',
+        imageAlt: 'Green cardstock box containing white, beige, and brown cards.',
+    },
+    {
+        name: 'The perfect mix',
+        description: 'Each refill pack contains plenty of cards to last you a month of procrastination.',
+        imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-08-detail-02.jpg',
+        imageAlt: 'Green cardstock box open with 50 cards inside.',
+    },
+    {
+        name: 'Dot grid backs',
+        description: 'Flip a card over to doodle during meetings when you should be listening.',
+        imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-08-detail-03.jpg',
+        imageAlt: 'Detail of white today card, beige next card, and brown someday card with dot grid.',
+    },
+    {
+        name: 'Refill packs',
+        description: 'Subscribe and save on routine refill packs to keep you productive all year long.',
+        imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-08-detail-04.jpg',
+        imageAlt: 'Stack of three green cardstock boxes with 3 hole cutouts showing cards inside.',
+    },
+];
+var VistaProductFeaturesV8 = function () {
+    return (react_1.default.createElement("div", { className: "bg-white" },
+        react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8" },
+            react_1.default.createElement("div", { className: "max-w-3xl" },
+                react_1.default.createElement("h2", { id: "features-heading", className: "font-medium text-gray-500" }, "Focus"),
+                react_1.default.createElement("p", { className: "mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl" }, "Simple productivity"),
+                react_1.default.createElement("p", { className: "mt-4 text-gray-500" }, "Focus allows you to plan 10 daily tasks, while also thinking ahead about whats next. Forget distracting digital apps and embrace these small, sturdy pieces of paper.")),
+            react_1.default.createElement("div", { className: "mt-11 grid grid-cols-1 items-start gap-x-6 gap-y-16 sm:mt-16 sm:grid-cols-2 lg:grid-cols-4 lg:gap-x-8" }, features.map(function (feature) { return (react_1.default.createElement("div", { key: feature.name, className: "flex flex-col-reverse" },
+                react_1.default.createElement("div", { className: "mt-6" },
+                    react_1.default.createElement("h3", { className: "text-sm font-medium text-gray-900" }, feature.name),
+                    react_1.default.createElement("p", { className: "mt-2 text-sm text-gray-500" }, feature.description)),
+                react_1.default.createElement("img", { alt: feature.imageAlt, src: feature.imageSrc, className: "aspect-square w-full rounded-lg bg-gray-100 object-cover" }))); })))));
+};
+exports.VistaProductFeaturesV8 = VistaProductFeaturesV8;

package/organisms/vista-product-features-v9/vista-product-features-v9.d.ts

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

package/organisms/vista-product-features-v9/vista-product-features-v9.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaProductFeaturesV9 = void 0;
+var react_1 = __importDefault(require("react"));
+var features = [
+    {
+        name: 'Three card types',
+        description: 'Today, Next, and Someday cards allow you to defer your dreams into the future.',
+        imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-08-detail-01.jpg',
+        imageAlt: 'Green cardstock box containing white, beige, and brown cards.',
+    },
+    {
+        name: 'The perfect mix',
+        description: 'Each refill pack contains plenty of cards to last you a month of procrastination.',
+        imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-08-detail-02.jpg',
+        imageAlt: 'Green cardstock box open with 50 cards inside.',
+    },
+    {
+        name: 'Dot grid backs',
+        description: 'Flip a card over to doodle during meetings when you should be listening.',
+        imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-08-detail-03.jpg',
+        imageAlt: 'Detail of white today card, beige next card, and brown someday card with dot grid.',
+    },
+    {
+        name: 'Refill packs',
+        description: 'Subscribe and save on routine refill packs to keep you productive all year long.',
+        imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-08-detail-04.jpg',
+        imageAlt: 'Stack of three green cardstock boxes with 3 hole cutouts showing cards inside.',
+    },
+];
+var VistaProductFeaturesV9 = function () {
+    return (react_1.default.createElement("div", { className: "bg-white" },
+        react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8" },
+            react_1.default.createElement("div", { className: "grid grid-cols-1 items-center gap-x-8 gap-y-16 lg:grid-cols-2" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", { className: "border-b border-gray-200 pb-10" },
+                        react_1.default.createElement("h2", { className: "font-medium text-gray-500" }, "Machined Kettle"),
+                        react_1.default.createElement("p", { className: "mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl" }, "Elegant simplicity")),
+                    react_1.default.createElement("dl", { className: "mt-10 space-y-10" }, features.map(function (feature) { return (react_1.default.createElement("div", { key: feature.name },
+                        react_1.default.createElement("dt", { className: "text-sm font-medium text-gray-900" }, feature.name),
+                        react_1.default.createElement("dd", { className: "mt-3 text-sm text-gray-500" }, feature.description))); }))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("img", { alt: "Black kettle with long pour spot and angled body on marble counter next to coffee mug and pour-over system.", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-09-main-detail.jpg", className: "aspect-square w-full rounded-lg bg-gray-100 object-cover" }),
+                    react_1.default.createElement("div", { className: "mt-4 grid grid-cols-2 gap-4 sm:mt-6 sm:gap-6 lg:mt-8 lg:gap-8" },
+                        react_1.default.createElement("img", { alt: "Detail of temperature setting button on kettle bass with digital degree readout.", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-09-detail-01.jpg", className: "aspect-square w-full rounded-lg bg-gray-100 object-cover" }),
+                        react_1.default.createElement("img", { alt: "Kettle spout pouring boiling water into coffee grounds in pour-over mug.", src: "https://tailwindcss.com/plus-assets/img/ecommerce-images/product-feature-09-detail-02.jpg", className: "aspect-square w-full rounded-lg bg-gray-100 object-cover" })))))));
+};
+exports.VistaProductFeaturesV9 = VistaProductFeaturesV9;

package/package.json

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

package/pdf-templates/debit-receipt-template-v1.d.ts

@@ -0,0 +1,2 @@
+import { Template } from '@pdfme/common';
+export declare const debitReceiptTemplateV1: Template;

package/pdf-templates/debit-receipt-template-v1.js

@@ -0,0 +1,319 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.debitReceiptTemplateV1 = void 0;
+var common_1 = require("@pdfme/common");
+exports.debitReceiptTemplateV1 = {
+    basePdf: common_1.BLANK_A4_PDF,
+    schemas: [
+        [
+            {
+                name: 'logo',
+                type: 'image',
+                position: { x: 10, y: 10 },
+                content: '',
+                width: 20.86,
+                height: 17,
+                required: false,
+                readOnly: false,
+            },
+            {
+                name: 'heading',
+                type: 'text',
+                position: { x: 130, y: 10 },
+                content: '',
+                width: 69.87,
+                height: 18.98,
+                rotate: 0,
+                alignment: 'right',
+                verticalAlignment: 'middle',
+                fontSize: 25,
+                lineHeight: 1,
+                characterSpacing: 0,
+                fontColor: '#E5CD8B',
+                backgroundColor: '',
+                opacity: 1,
+                dynamicFontSize: { min: 6, max: 30, fit: 'vertical' },
+                fontName: 'font_light',
+                readOnly: false,
+            },
+            {
+                name: 'clientLabel',
+                type: 'text',
+                position: { x: 10, y: 60 },
+                content: '',
+                width: 84.68,
+                height: 10,
+                rotate: 0,
+                alignment: 'left',
+                verticalAlignment: 'top',
+                fontSize: 10,
+                fontWeight: 400,
+                lineHeight: 1,
+                characterSpacing: 0,
+                fontColor: '#2C3139',
+                backgroundColor: '',
+                opacity: 1,
+                dynamicFontSize: { min: 6, max: 10, fit: 'vertical' },
+                fontName: 'font_bold',
+                readOnly: false,
+            },
+            {
+                name: 'clientValue',
+                type: 'text',
+                content: '',
+                position: { x: 10, y: 65 },
+                width: 84.95,
+                height: 17.67,
+                rotate: 0,
+                alignment: 'left',
+                verticalAlignment: 'top',
+                fontSize: 9,
+                lineHeight: 1.4,
+                characterSpacing: 0,
+                fontColor: '#909E98',
+                backgroundColor: '',
+                opacity: 1,
+                dynamicFontSize: { min: 6, max: 10, fit: 'vertical' },
+                fontName: 'font_light',
+                readOnly: false,
+            },
+            {
+                name: 'refNo',
+                type: 'text',
+                content: '',
+                position: { x: 130, y: 29.72 },
+                width: 70.13,
+                height: 36.43,
+                rotate: 0,
+                alignment: 'right',
+                verticalAlignment: 'right',
+                fontSize: 9,
+                lineHeight: 1,
+                characterSpacing: 0,
+                fontColor: '#2C3139',
+                backgroundColor: '',
+                opacity: 1,
+                dynamicFontSize: { min: 6, max: 10, fit: 'vertical' },
+                fontName: 'font_bold',
+                readOnly: false,
+            },
+            {
+                name: 'items',
+                type: 'table',
+                position: { x: 10, y: 90 },
+                width: 190,
+                height: 13.528,
+                showHead: true,
+                head: ['NO.', 'CHAT SESSION ID', 'TYPE', 'DATE', 'INTRO AMOUNT', 'AMOUNT'],
+                headWidthPercentages: [
+                    6,
+                    30,
+                    16,
+                    15,
+                    18,
+                    15,
+                ],
+                fontName: 'font_regular',
+                tableStyles: { borderWidth: 0, borderColor: '#000000' },
+                headStyles: {
+                    fontName: 'font_bold',
+                    fontSize: 10,
+                    characterSpacing: 0,
+                    alignment: 'left',
+                    verticalAlignment: 'middle',
+                    lineHeight: 1,
+                    fontColor: '#2C3139',
+                    borderColor: '#EFEFD1',
+                    backgroundColor: '',
+                    borderWidth: { top: 0, right: 0, bottom: 1, left: 0 },
+                    padding: { top: 2, right: 2, bottom: 2, left: 2 },
+                },
+                bodyStyles: {
+                    fontName: 'font_regular',
+                    fontSize: 10,
+                    characterSpacing: 0,
+                    alignment: 'left',
+                    verticalAlignment: 'middle',
+                    lineHeight: 1,
+                    fontColor: '#7c7e7d',
+                    borderColor: '#ECF1F1',
+                    backgroundColor: '#D3D3D3',
+                    alternateBackgroundColor: '#FFFFFF',
+                    borderWidth: { top: 0, right: 0, bottom: 0.75, left: 0 },
+                    padding: { top: 2, right: 2, bottom: 2, left: 2 },
+                },
+                columnStyles: {
+                    alignment: { 0: 'left', 1: 'left', 2: 'left', 3: 'left', 4: 'left', 5: 'right' },
+                },
+                readOnly: false,
+                content: '[]',
+            },
+            {
+                name: 'subTotalLabel',
+                type: 'text',
+                position: { x: 126.59, y: 110 },
+                content: '',
+                width: 25.42,
+                height: 8.61,
+                rotate: 0,
+                alignment: 'left',
+                verticalAlignment: 'middle',
+                fontSize: 10,
+                lineHeight: 1,
+                characterSpacing: 0,
+                fontColor: '#2C3139',
+                backgroundColor: '',
+                opacity: 1,
+                dynamicFontSize: { min: 6, max: 10, fit: 'vertical' },
+                fontName: 'font_bold',
+                readOnly: false,
+            },
+            {
+                name: 'subTotalValue',
+                type: 'text',
+                content: '$500',
+                position: { x: 167.26, y: 110 },
+                width: 32.48,
+                height: 7.56,
+                rotate: 0,
+                alignment: 'right',
+                verticalAlignment: 'middle',
+                fontSize: 10,
+                lineHeight: 1,
+                characterSpacing: 0,
+                fontColor: '#2C3139',
+                backgroundColor: '',
+                opacity: 1,
+                dynamicFontSize: { min: 6, max: 10, fit: 'vertical' },
+                fontName: 'font_regular',
+                readOnly: false,
+            },
+            {
+                name: 'subTotalDivider',
+                type: 'line',
+                position: { x: 127.09, y: 118 },
+                width: 71.91,
+                height: 1,
+                rotate: 0,
+                opacity: 1,
+                readOnly: true,
+                color: '#ECF1F1',
+            },
+            {
+                name: 'totalLabel',
+                type: 'text',
+                position: { x: 128.05, y: 123 },
+                content: '',
+                width: 22.01,
+                height: 10.2,
+                rotate: 0,
+                alignment: 'left',
+                verticalAlignment: 'middle',
+                fontSize: 14,
+                lineHeight: 1,
+                characterSpacing: 0,
+                fontColor: '#2C3139',
+                fontName: 'font_bold',
+                backgroundColor: '',
+                dynamicFontSize: { min: 6, max: 14, fit: 'vertical' },
+                opacity: 1,
+                readOnly: false,
+            },
+            {
+                name: 'totalValue',
+                type: 'text',
+                content: '',
+                position: { x: 167.26, y: 123 },
+                width: 32.48,
+                height: 9.94,
+                rotate: 0,
+                alignment: 'right',
+                verticalAlignment: 'middle',
+                fontSize: 14,
+                lineHeight: 1,
+                characterSpacing: 0,
+                fontColor: '#2C3139',
+                backgroundColor: '',
+                opacity: 1,
+                dynamicFontSize: { min: 6, max: 14, fit: 'vertical' },
+                fontName: 'font_regular',
+                readOnly: false,
+            },
+            {
+                name: 'marketingNote',
+                type: 'text',
+                position: { x: 177, y: 103 },
+                required: false,
+                content: '',
+                width: 60,
+                height: 8,
+                rotate: 90,
+                alignment: 'middle',
+                verticalAlignment: 'middle',
+                fontSize: 8,
+                lineHeight: 1,
+                characterSpacing: 0,
+                fontColor: '#909E98',
+                backgroundColor: '',
+                opacity: 1,
+                strikethrough: false,
+                underline: false,
+                dynamicFontSize: { min: 6, max: 8, fit: 'vertical' },
+                fontName: 'font_light',
+                readOnly: false,
+            },
+            {
+                name: 'companyValue',
+                type: 'text',
+                content: '',
+                position: { x: 10, y: 35 },
+                width: 84.95,
+                height: 17.67,
+                rotate: 0,
+                alignment: 'left',
+                verticalAlignment: 'top',
+                fontSize: 9,
+                lineHeight: 1.4,
+                characterSpacing: 0,
+                fontColor: '#909E98',
+                backgroundColor: '',
+                opacity: 1,
+                dynamicFontSize: { min: 6, max: 10, fit: 'vertical' },
+                fontName: 'font_light',
+                readOnly: false,
+            },
+            {
+                name: 'companyLabel',
+                type: 'text',
+                position: { x: 10, y: 30 },
+                content: '',
+                width: 84.68,
+                height: 10,
+                rotate: 0,
+                alignment: 'left',
+                verticalAlignment: 'top',
+                fontSize: 10,
+                fontWeight: 400,
+                lineHeight: 1,
+                characterSpacing: 0,
+                fontColor: '#2C3139',
+                backgroundColor: '',
+                opacity: 1,
+                dynamicFontSize: { min: 6, max: 10, fit: 'vertical' },
+                fontName: 'font_bold',
+                readOnly: false,
+            },
+            {
+                name: 'totalDivider',
+                type: 'line',
+                position: { x: 127.09, y: 133 },
+                width: 72.91,
+                height: 1.2,
+                rotate: 0,
+                opacity: 1,
+                readOnly: false,
+                color: '#EFEFD1',
+            },
+        ],
+    ],
+};

package/type/vista-product-features-type.d.ts

@@ -0,0 +1,27 @@
+export interface VistaProductFeaturesV1Props {
+    id: string;
+}
+export interface VistaProductFeaturesV2Props {
+    id: string;
+}
+export interface VistaProductFeaturesV3Props {
+    id: string;
+}
+export interface VistaProductFeaturesV4Props {
+    id: string;
+}
+export interface VistaProductFeaturesV5Props {
+    id: string;
+}
+export interface VistaProductFeaturesV6Props {
+    id: string;
+}
+export interface VistaProductFeaturesV7Props {
+    id: string;
+}
+export interface VistaProductFeaturesV8Props {
+    id: string;
+}
+export interface VistaProductFeaturesV9Props {
+    id: string;
+}

package/type/vista-product-features-type.js

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