@appcorp/app-corp-vista 0.0.1

package/molecules/vista-stats-v1.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaStatsV1 = void 0;
+var react_1 = __importDefault(require("react"));
+var class_names_1 = require("../utils/class-names");
+var VistaStatsV1 = function (_a) {
+    var items = _a.items;
+    return (react_1.default.createElement("dl", { className: "mx-auto grid grid-cols-1 gap-px bg-gray-900/5 sm:grid-cols-2 lg:grid-cols-4 border border-gray-300 rounded-lg" }, items
+        .sort(function (a, b) { return a.order - b.order; })
+        .filter(function (_a) {
+        var enabled = _a.enabled;
+        return enabled;
+    })
+        .map(function (_a, inx) {
+        var name = _a.name, changeType = _a.changeType, change = _a.change, value = _a.value;
+        return (react_1.default.createElement("div", { key: name, className: "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 bg-white px-4 py-10 sm:px-6 xl:px-8 ".concat(inx === 0 && 'rounded-l-lg', " ").concat(inx === items.length - 1 && 'rounded-r-lg') },
+            react_1.default.createElement("dt", { className: "text-sm/6 font-medium text-gray-500" }, name),
+            react_1.default.createElement("dd", { className: (0, class_names_1.classNames)(changeType === 'negative' ? 'text-red-600' : 'text-green-600', 'text-xs font-medium') }, change),
+            react_1.default.createElement("dd", { className: "w-full flex-none text-3xl/10 font-medium tracking-tight text-gray-900" }, value)));
+    })));
+};
+exports.VistaStatsV1 = VistaStatsV1;

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

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

package/molecules/vista-stats-v2.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaStatsV2 = void 0;
+var react_1 = __importDefault(require("react"));
+var VistaStatsV2 = function (_a) {
+    var items = _a.items;
+    return (react_1.default.createElement("div", { className: "bg-gray-900 rounded-lg" },
+        react_1.default.createElement("div", { className: "mx-auto max-w-7xl" },
+            react_1.default.createElement("div", { className: "grid grid-cols-1 gap-px bg-white/5 sm:grid-cols-2 lg:grid-cols-4" }, items
+                .sort(function (a, b) { return a.order - b.order; })
+                .filter(function (_a) {
+                var enabled = _a.enabled;
+                return enabled;
+            })
+                .map(function (_a) {
+                var name = _a.name, unit = _a.unit, value = _a.value;
+                return (react_1.default.createElement("div", { key: name, className: "bg-gray-900 px-4 py-6 sm:px-6 lg:px-8" },
+                    react_1.default.createElement("p", { className: "text-sm/6 font-medium text-gray-400" }, name),
+                    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-white" }, value),
+                        unit && react_1.default.createElement("span", { className: "text-sm text-gray-400" }, unit))));
+            })))));
+};
+exports.VistaStatsV2 = VistaStatsV2;

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

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

package/molecules/vista-stats-v3.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaStatsV3 = void 0;
+var react_1 = __importDefault(require("react"));
+var VistaStatsV3 = function (_a) {
+    var items = _a.items;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("h3", { className: "text-base font-semibold text-gray-900" }, "Last 30 days"),
+        react_1.default.createElement("dl", { className: "mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3" }, items.map(function (_a) {
+            var name = _a.name, value = _a.value;
+            return (react_1.default.createElement("div", { key: name, className: "overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6" },
+                react_1.default.createElement("dt", { className: "truncate text-sm font-medium text-gray-500" }, name),
+                react_1.default.createElement("dd", { className: "mt-1 text-3xl font-semibold tracking-tight text-gray-900" }, value)));
+        }))));
+};
+exports.VistaStatsV3 = VistaStatsV3;

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

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

package/molecules/vista-stats-v4.js

@@ -0,0 +1,78 @@
+"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.VistaStatsV4 = void 0;
+var react_1 = __importStar(require("react"));
+var solid_1 = require("@heroicons/react/20/solid");
+var class_names_1 = require("../utils/class-names");
+var VistaStatsV4 = function (_a) {
+    var items = _a.items;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("h3", { className: "text-base font-semibold text-gray-900" }, "Last 30 days"),
+        react_1.default.createElement("dl", { className: "mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3" }, items
+            .sort(function (a, b) { return a.order - b.order; })
+            .filter(function (_a) {
+            var enabled = _a.enabled;
+            return enabled;
+        })
+            .map(function (_a) {
+            var id = _a.id, icon = _a.icon, stat = _a.stat, changeType = _a.changeType, change = _a.change, name = _a.name;
+            return (react_1.default.createElement("div", { key: id, className: "relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6" },
+                react_1.default.createElement("dt", null,
+                    react_1.default.createElement("div", { className: "absolute rounded-md bg-indigo-500 p-3" }, (0, react_1.createElement)(icon, {
+                        ariaHidden: true,
+                        className: 'size-6 text-white',
+                    })),
+                    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') },
+                        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 "),
+                        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" },
+                            react_1.default.createElement("a", { href: "#", className: "font-medium text-indigo-600 hover:text-indigo-500" },
+                                "View all",
+                                react_1.default.createElement("span", { className: "sr-only" },
+                                    " ",
+                                    name,
+                                    " stats")))))));
+        }))));
+};
+exports.VistaStatsV4 = VistaStatsV4;

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

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

package/molecules/vista-stats-v5.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaStatsV5 = void 0;
+var react_1 = __importDefault(require("react"));
+var solid_1 = require("@heroicons/react/20/solid");
+var class_names_1 = require("../utils/class-names");
+var VistaStatsV5 = function (_a) {
+    var items = _a.items;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("h3", { className: "text-base font-semibold text-gray-900" }, "Last 30 days"),
+        react_1.default.createElement("dl", { className: "mt-5 grid grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow md:grid-cols-3 md:divide-x md:divide-y-0" }, items
+            .sort(function (a, b) { return a.order - b.order; })
+            .filter(function (_a) {
+            var enabled = _a.enabled;
+            return enabled;
+        })
+            .map(function (_a) {
+            var name = _a.name, stat = _a.stat, change = _a.change, changeType = _a.changeType, previousStat = _a.previousStat;
+            return (react_1.default.createElement("div", { key: name, className: "px-4 py-5 sm:p-6" },
+                react_1.default.createElement("dt", { className: "text-base font-normal text-gray-900" }, name),
+                react_1.default.createElement("dd", { className: "mt-1 flex items-baseline justify-between md:block lg:flex" },
+                    react_1.default.createElement("div", { className: "flex items-baseline text-2xl font-semibold text-indigo-600" },
+                        stat,
+                        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') },
+                        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 "),
+                        change))));
+        }))));
+};
+exports.VistaStatsV5 = VistaStatsV5;

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

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

package/molecules/vista-toggle-v1.js

@@ -0,0 +1,16 @@
+'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.VistaToggleV1 = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@headlessui/react");
+var VistaToggleV1 = function (_a) {
+    var enabled = _a.enabled, setEnabled = _a.setEnabled;
+    return (react_1.default.createElement(react_2.Switch, { checked: enabled, onChange: setEnabled, className: "group relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 data-[checked]:bg-indigo-600" },
+        react_1.default.createElement("span", { className: "sr-only" }, "Use setting"),
+        react_1.default.createElement("span", { "aria-hidden": "true", className: "pointer-events-none inline-block size-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out group-data-[checked]:translate-x-5" })));
+};
+exports.VistaToggleV1 = VistaToggleV1;

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

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

package/molecules/vista-toggle-v2.js

@@ -0,0 +1,18 @@
+'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.VistaToggleV2 = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@headlessui/react");
+var VistaToggleV2 = function (_a) {
+    var enabled = _a.enabled, setEnabled = _a.setEnabled;
+    return (react_1.default.createElement(react_2.Switch, { checked: enabled, onChange: setEnabled, className: "group relative inline-flex h-5 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" },
+        react_1.default.createElement("span", { className: "sr-only" }, "Use setting"),
+        react_1.default.createElement("span", { "aria-hidden": "true", className: "pointer-events-none absolute size-full rounded-md bg-white" }),
+        react_1.default.createElement("span", { "aria-hidden": "true", className: "pointer-events-none absolute mx-auto h-4 w-9 rounded-full bg-gray-200 transition-colors duration-200 ease-in-out group-data-[checked]:bg-indigo-600" }),
+        react_1.default.createElement("span", { "aria-hidden": "true", className: "pointer-events-none absolute left-0 inline-block size-5 transform rounded-full border border-gray-200 bg-white shadow ring-0 transition-transform duration-200 ease-in-out group-data-[checked]:translate-x-5" })));
+};
+exports.VistaToggleV2 = VistaToggleV2;

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

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

package/molecules/vista-toggle-v3.js

@@ -0,0 +1,22 @@
+'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.VistaToggleV3 = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@headlessui/react");
+var VistaToggleV3 = function (_a) {
+    var enabled = _a.enabled, setEnabled = _a.setEnabled;
+    return (react_1.default.createElement(react_2.Switch, { checked: enabled, onChange: setEnabled, className: "group relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 data-[checked]:bg-indigo-600" },
+        react_1.default.createElement("span", { className: "sr-only" }, "Use setting"),
+        react_1.default.createElement("span", { className: "pointer-events-none relative inline-block size-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out group-data-[checked]:translate-x-5" },
+            react_1.default.createElement("span", { "aria-hidden": "true", className: "absolute inset-0 flex size-full items-center justify-center transition-opacity duration-200 ease-in group-data-[checked]:opacity-0 group-data-[checked]:duration-100 group-data-[checked]:ease-out" },
+                react_1.default.createElement("svg", { fill: "none", viewBox: "0 0 12 12", className: "size-3 text-gray-400" },
+                    react_1.default.createElement("path", { d: "M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }))),
+            react_1.default.createElement("span", { "aria-hidden": "true", className: "absolute inset-0 flex size-full items-center justify-center opacity-0 transition-opacity duration-100 ease-out group-data-[checked]:opacity-100 group-data-[checked]:duration-200 group-data-[checked]:ease-in" },
+                react_1.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 12 12", className: "size-3 text-indigo-600" },
+                    react_1.default.createElement("path", { d: "M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" }))))));
+};
+exports.VistaToggleV3 = VistaToggleV3;

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

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

package/molecules/vista-toggle-v4.js

@@ -0,0 +1,19 @@
+'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.VistaToggleV4 = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@headlessui/react");
+var VistaToggleV4 = function (_a) {
+    var description = _a.description, enabled = _a.enabled, label = _a.label, setEnabled = _a.setEnabled;
+    return (react_1.default.createElement(react_2.Field, { className: "flex items-center justify-between" },
+        react_1.default.createElement("span", { className: "flex grow flex-col" },
+            react_1.default.createElement(react_2.Label, { as: "span", passive: true, className: "text-sm/6 font-medium text-gray-900" }, label),
+            react_1.default.createElement(react_2.Description, { as: "span", className: "text-sm text-gray-500" }, description)),
+        react_1.default.createElement(react_2.Switch, { checked: enabled, onChange: setEnabled, className: "group relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 data-[checked]:bg-indigo-600" },
+            react_1.default.createElement("span", { "aria-hidden": "true", className: "pointer-events-none inline-block size-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out group-data-[checked]:translate-x-5" }))));
+};
+exports.VistaToggleV4 = VistaToggleV4;

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

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

package/molecules/vista-toggle-v5.js

@@ -0,0 +1,20 @@
+'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.VistaToggleV5 = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@headlessui/react");
+var VistaToggleV5 = function (_a) {
+    var description = _a.description, enabled = _a.enabled, label = _a.label, setEnabled = _a.setEnabled;
+    return (react_1.default.createElement(react_2.Field, { className: "flex items-center" },
+        react_1.default.createElement(react_2.Switch, { checked: enabled, onChange: setEnabled, className: "group relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 data-[checked]:bg-indigo-600" },
+            react_1.default.createElement("span", { "aria-hidden": "true", className: "pointer-events-none inline-block size-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out group-data-[checked]:translate-x-5" })),
+        react_1.default.createElement(react_2.Label, { as: "span", className: "ml-3 text-sm" },
+            react_1.default.createElement("span", { className: "font-medium text-gray-900" }, label),
+            ' ',
+            react_1.default.createElement("span", { className: "text-gray-500" }, description))));
+};
+exports.VistaToggleV5 = VistaToggleV5;

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

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

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaVerticalDividerV1 = void 0;
+var react_1 = __importDefault(require("react"));
+var VistaVerticalDividerV1 = function (_a) {
+    var label = _a.label;
+    return (react_1.default.createElement("div", { className: "relative" },
+        react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-0 flex items-center" },
+            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-sm text-gray-500" }, label))));
+};
+exports.VistaVerticalDividerV1 = VistaVerticalDividerV1;

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,48 @@
+"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.VistaVerticalDividerV2 = void 0;
+var react_1 = __importStar(require("react"));
+var VistaVerticalDividerV2 = function (_a) {
+    var icon = _a.icon;
+    return (react_1.default.createElement("div", { className: "relative" },
+        react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-0 flex items-center" },
+            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'
+            })))));
+};
+exports.VistaVerticalDividerV2 = VistaVerticalDividerV2;

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

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

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaVerticalDividerV3 = void 0;
+var react_1 = __importDefault(require("react"));
+var VistaVerticalDividerV3 = function (_a) {
+    var label = _a.label;
+    return (react_1.default.createElement("div", { className: "relative" },
+        react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-0 flex items-center" },
+            react_1.default.createElement("div", { className: "w-full border-t border-gray-300" })),
+        react_1.default.createElement("div", { className: "relative flex justify-start" },
+            react_1.default.createElement("span", { className: "bg-white pr-2 text-sm text-gray-500" }, label))));
+};
+exports.VistaVerticalDividerV3 = VistaVerticalDividerV3;

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

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

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaVerticalDividerV4 = void 0;
+var react_1 = __importDefault(require("react"));
+var VistaVerticalDividerV4 = function (_a) {
+    var label = _a.label;
+    return (react_1.default.createElement("div", { className: "relative" },
+        react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-0 flex items-center" },
+            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-3 text-base font-semibold text-gray-900" }, label))));
+};
+exports.VistaVerticalDividerV4 = VistaVerticalDividerV4;

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

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

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VistaVerticalDividerV5 = void 0;
+var react_1 = __importDefault(require("react"));
+var VistaVerticalDividerV5 = function (_a) {
+    var label = _a.label;
+    return (react_1.default.createElement("div", { className: "relative" },
+        react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-0 flex items-center" },
+            react_1.default.createElement("div", { className: "w-full border-t border-gray-300" })),
+        react_1.default.createElement("div", { className: "relative flex justify-start" },
+            react_1.default.createElement("span", { className: "bg-white pr-3 text-base font-semibold text-gray-900" }, label))));
+};
+exports.VistaVerticalDividerV5 = VistaVerticalDividerV5;

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

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

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

@@ -0,0 +1,51 @@
+"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.VistaVerticalDividerV6 = void 0;
+var react_1 = __importStar(require("react"));
+var VistaVerticalDividerV6 = function (_a) {
+    var handleOnClick = _a.handleOnClick, icon = _a.icon, label = _a.label;
+    return (react_1.default.createElement("div", { className: "relative" },
+        react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-0 flex items-center" },
+            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("button", { className: "inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50", type: "button", onClick: handleOnClick },
+                (0, react_1.createElement)(icon, {
+                    'aria-hidden': true,
+                    className: '-ml-1 -mr-0.5 size-5 text-gray-400',
+                }),
+                label))));
+};
+exports.VistaVerticalDividerV6 = VistaVerticalDividerV6;

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

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

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

@@ -0,0 +1,52 @@
+"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.VistaVerticalDividerV7 = void 0;
+var react_1 = __importStar(require("react"));
+var VistaVerticalDividerV7 = function (_a) {
+    var handleOnClick = _a.handleOnClick, icon = _a.icon, label = _a.label, title = _a.title;
+    return (react_1.default.createElement("div", { className: "relative" },
+        react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-0 flex items-center" },
+            react_1.default.createElement("div", { className: "w-full border-t border-gray-300" })),
+        react_1.default.createElement("div", { className: "relative flex items-center justify-between" },
+            react_1.default.createElement("span", { className: "bg-white pr-3 text-base font-semibold text-gray-900" }, title),
+            react_1.default.createElement("button", { className: "inline-flex items-center gap-x-1.5 rounded-full bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50", type: "button", onClick: handleOnClick },
+                (0, react_1.createElement)(icon, {
+                    'aria-hidden': true,
+                    className: '-ml-1 -mr-0.5 size-5 text-gray-400',
+                }),
+                react_1.default.createElement("span", null, label)))));
+};
+exports.VistaVerticalDividerV7 = VistaVerticalDividerV7;

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

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