sccoreui 2.3.2 → 2.3.3

package/dist/pages/tabels/table.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const datatable_1 = require("primereact/datatable");
+const column_1 = require("primereact/column");
+const utils_1 = require("primereact/utils");
+const ripple_1 = require("primereact/ripple");
+const button_1 = require("primereact/button");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const table_data_1 = require("./table-data");
+const checkbox_1 = require("primereact/checkbox");
+const avatargroup_1 = require("primereact/avatargroup");
+const avatar_1 = require("primereact/avatar");
+const progressbar_1 = require("primereact/progressbar");
+const TableComponent = () => {
+    const statusTemplate1 = (rowData) => {
+        return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-green-50 border-round-2xl flex align-items-center gap-1 px-2 text-green-700 w-4rem text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-600 p-1" }), " ", rowData.status] })));
+    };
+    const statusTemplate2 = (rowData) => {
+        return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: `bg-transparent border-round-2xl px-2 border-1 ${rowData.status === "Customer"
+                ? "border-green-600 text-green-700"
+                : "border-gray-600 text-gray-700"}` }, { children: rowData.status })));
+    };
+    const emptyStateTemplate1 = () => {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column justify-content-center align-items-center h-20rem gap-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "warning-icon" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-center gap-1" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "font-semibold text-gray-900 line-height-3 text-lg text-center m-0" }, { children: "Something went wrong..." })), (0, jsx_runtime_1.jsxs)("p", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal text-center m-0" }, { children: ["We had some trouble loading this page. Please refresh ", (0, jsx_runtime_1.jsx)("br", {}), " the page to try again or get in touch if the problem sticks ", (0, jsx_runtime_1.jsx)("br", {}), "around!"] }))] })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-3 mt-4" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, label: "Contact support" }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Refresh Page" })] }))] })));
+    };
+    const nameHeaderTemplate = () => {
+        return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "text-sm text-gray-600 flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected" }) }), "Name"] })));
+    };
+    const nameBodyTemplate = (rowData) => {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: false }), (0, jsx_runtime_1.jsx)("img", { src: rowData.image, className: "border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "line-height-2" }, { children: rowData.name })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "line-height-2" }, { children: ["@", rowData.name.split(" ")[0]] }))] }))] })));
+    };
+    const roleHeaderTemplate = () => {
+        return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-1" }, { children: ["Role ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" })] })));
+    };
+    const teamsBodyTemplate = (rowData) => {
+        const { teams } = rowData;
+        return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex gap-1" }, { children: [teams.slice(0, 3).map((eachName) => ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: `${eachName === "Design"
+                        ? "bg-primary-50 text-primary-700"
+                        : eachName === "Product"
+                            ? "bg-blue-50 text-blue-700"
+                            : "bg-indigo-50 text-indigo-700"} text-sm font-medium border-round-2xl px-2` }, { children: eachName }), eachName))), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "bg-gray-100 border-round-2xl px-2 text-gray-700" }, { children: ["+", teams.length - 3] }))] })));
+    };
+    const actionButtonTemplate1 = () => {
+        return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: "pi pi-trash" }), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: "pi pi-pencil" })] })));
+    };
+    const actionButtonTemplate2 = () => {
+        return (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, icon: "pi pi-ellipsis-v" });
+    };
+    const pagenatorTemplate = {
+        layout: "PrevPageLink PageLinks CurrentPageReport NextPageLink",
+        PrevPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
+        },
+        PageLinks: (options) => {
+            if ((options.view.startPage === options.page &&
+                options.view.startPage !== 0) ||
+                (options.view.endPage === options.page &&
+                    options.page + 1 !== options.totalPages)) {
+                const className = (0, utils_1.classNames)(options.className, { "p-disabled": true });
+                return (0, jsx_runtime_1.jsx)("span", Object.assign({ className: className }, { children: "..." }));
+            }
+            return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: options.className, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
+        },
+        NextPageLink: (options) => {
+            return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-700" })] })));
+        },
+        CurrentPageReport: (options) => {
+            return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                    color: "var(--gray-700)",
+                    userSelect: "none",
+                    width: "120px",
+                    textAlign: "center",
+                }, className: "flex md:hidden line-height-2 text-base" }, { children: ["Page ", options.first, " of ", options.totalRecords] })));
+        },
+    };
+    const tableHeaderTemplate1 = () => {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 text-xl font-semibold bg-white text-gray-900" }, { children: ["Team Members", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "border-round-2xl px-2 font-medium bg-primary-50 text-primary-700 text-sm" }, { children: "100 users" })), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "ml-auto", icon: "pi pi-ellipsis-v" })] })));
+    };
+    const tableHeaderTemplate2 = () => {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column gap-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-900 font-semibold text-xl line-height-4" }, { children: "Customers" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base line-height-2" }, { children: "These companies have purchased in the last 12 months." }))] })), (0, jsx_runtime_1.jsx)(button_1.Button, { text: true, className: "ml-auto", icon: "pi pi-ellipsis-v" })] })));
+    };
+    const companyBodyTemplate = (rowData) => {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: rowData.image, className: "border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-900 font-medium text-base line-height-2" }, { children: rowData.name })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base line-height-2" }, { children: rowData.website }))] }))] })));
+    };
+    const aboutBodyTemplate = (rowData) => {
+        return ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-900 font-normal text-base line-height-2" }, { children: rowData.about.title })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base line-height-2" }, { children: rowData.about.description }))] })));
+    };
+    const usersBodyTemplate = (rowData) => {
+        return ((0, jsx_runtime_1.jsxs)(avatargroup_1.AvatarGroup, Object.assign({ className: "w-10" }, { children: [rowData.users.slice(0, 5).map((eachUser) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { image: eachUser, shape: "circle", size: "large" }, eachUser))), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { label: `+${rowData.users.length - 5}`, shape: "circle", size: "large", className: "bg-gray-100 text-gray-600 text-base font-medium" })] })));
+    };
+    const licenseBodyTemplate = (rowData) => {
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-10rem align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: rowData.licenseUse, className: "w-10" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " px-3 w-2  flex align-items-start text-center text-sm" }, { children: [rowData.licenseUse, "%"] }))] })));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-8" }, { children: [(0, jsx_runtime_1.jsxs)(datatable_1.DataTable, Object.assign({ value: table_data_1.teamData, paginator: true, paginatorClassName: "bg-square px-6 py-3", paginatorTemplate: pagenatorTemplate, showSelectAll: true, rows: 10, rowClassName: () => "h-5rem", header: tableHeaderTemplate1, emptyMessage: emptyStateTemplate1, className: "w-full" }, { children: [(0, jsx_runtime_1.jsx)(column_1.Column, { header: nameHeaderTemplate, body: nameBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { width: "18rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Status", sortable: true, headerClassName: "h-3rem text-sm text-gray-600", body: statusTemplate1, style: { width: "7rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: roleHeaderTemplate, headerClassName: "h-3rem text-sm text-gray-600", field: "role", style: { width: "11rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Email address", headerClassName: "h-3rem text-sm text-gray-600", field: "email", style: { width: "14rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Teams", body: teamsBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { width: "18rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { body: actionButtonTemplate1, style: { width: "7rem" } })] })), (0, jsx_runtime_1.jsxs)(datatable_1.DataTable, Object.assign({ value: table_data_1.customersData, showSelectAll: true, rows: 10, rowClassName: () => "h-5rem", header: tableHeaderTemplate2, emptyMessage: "No customers found.", className: "w-full" }, { children: [(0, jsx_runtime_1.jsx)(column_1.Column, { header: "Company", body: companyBodyTemplate, sortable: true, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "18rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Status", body: statusTemplate2, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "10rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "About", body: aboutBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "20rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "Users", body: usersBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "10rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { header: "License Use", body: licenseBodyTemplate, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "14rem" } }), (0, jsx_runtime_1.jsx)(column_1.Column, { body: actionButtonTemplate2, headerClassName: "h-3rem text-sm text-gray-600", style: { maxWidth: "4rem" } })] }))] })));
+};
+exports.default = TableComponent;

package/dist/pages/tabs/tabs.js

@@ -4,6 +4,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const tabview_1 = require("primereact/tabview");
 require("./tabs.scss");
 const TabsComponent = () => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Tabs" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid w-10 ml-auto mr-auto" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light border" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light expand border" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Team", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark flex flex-row md:flex-column not-expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "dddddddddddddddddddddd At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "0000000000000000000000 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Team" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "344444444444444444444 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fghfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Email" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fgxhfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "3" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark not-expand border-no-radius " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details", className: "bg-primary-800" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand border-no-radius" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box flex flex-row md:flex-column not-expand" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "55555555555s excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Tabs" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid w-10 ml-auto mr-auto" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light border" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light expand border" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Team", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark responsive flex flex-row md:flex-column not-expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "dddddddddddddddddddddd At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "0000000000000000000000 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Team" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "344444444444444444444 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fghfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Email" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fgxhfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "3" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark not-expand border-no-radius " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details", className: "bg-primary-800" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand border-no-radius" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box responsive flex flex-row md:flex-column not-expand" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "55555555555s excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 tab-badge border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex my-8" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) }))] }))] }));
 };
 exports.default = TabsComponent;

package/dist/pages/tags/tags.js

@@ -34,19 +34,19 @@ const TagComponent = () => {
                                                 el.remove();
                                             } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-gray-400-large" }) }))] })), className: "bg-white chip-image px-2 py-1 border-gray-300 border-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
                                                 setchecked(!checked);
-                                            } }), (0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "img" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-5", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "image" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
+                                            } }), (0, jsx_runtime_1.jsx)("img", { src: label_image_png_1.default, alt: "img" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img", className: "w-1rem h-1rem" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-5", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "image" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
                                                 const el = document.getElementById("chip-5");
                                                 el.remove();
-                                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-gray-400-large" }) }))] })), className: "bg-white chip-image border-gray-300 border-1 px-2 py-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm pr-1" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
+                                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-gray-400-large" }) }))] })), className: "bg-white chip-image border-gray-300 border-1 px-2 py-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img", className: "w-1rem h-1rem" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm pr-1" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
                                                 setchecked(!checked);
-                                            } }), (0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-6", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
+                                            } }), (0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img", className: "w-1rem h-1rem" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-6", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
                                                 setchecked(!checked);
                                             } }), (0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "image" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
                                                 const el = document.getElementById("chip-6");
                                                 el.remove();
                                             } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-gray-400-large" }) }))] })), className: "bg-white chip-image border-gray-300 border-1 px-2 py-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {
                                                 setchecked(!checked);
-                                            } }), (0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-7", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
+                                            } }), (0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, alt: "img", className: "h-1rem w-1rem" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable"] })) })), (0, jsx_runtime_1.jsx)(chip_1.Chip, { id: "chip-7", template: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: () => {
                                                 const el = document.getElementById("chip-7");
                                                 el.remove();
                                             } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "close-chip-gray-400-large" }) }))] })), className: "bg-white border-gray-300 border-1 px-2 py-1 border-round-lg gap-1 flex align-items-center text-gray-700 font-medium text-sm" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "border-circle bg-green-500 p-1" }), "Lable", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-gray-100 text-gray-700 text-sm border-round-sm" }, { children: "5" }))] })) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-between col-12 md:col-6 lg:col-4 xl:col-3 px-6 my-4" }, { children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, Object.assign({ className: "bg-white text-gray-700 border-gray-300 border-1 px-2 py-1" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 font-medium text-sm" }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checked, onChange: () => {

package/dist/types/pages/content-dividers/content-dividers.d.ts

@@ -0,0 +1,2 @@
+declare const ContentDividersComponent: () => import("react/jsx-runtime").JSX.Element;
+export default ContentDividersComponent;

package/dist/types/pages/date-picker/date-picker.d.ts

@@ -0,0 +1,2 @@
+declare const DatePickerComponent: () => import("react/jsx-runtime").JSX.Element;
+export default DatePickerComponent;

package/dist/types/pages/file-upload/file-upload.d.ts

@@ -0,0 +1,3 @@
+import "./file-upload.scss";
+declare const FileUploadComponent: () => import("react/jsx-runtime").JSX.Element;
+export default FileUploadComponent;

package/dist/types/pages/loader-indicator/loader-indicator.d.ts

@@ -0,0 +1,3 @@
+import "./loader-indicator.scss";
+declare const LoaderIndicatorComponent: () => import("react/jsx-runtime").JSX.Element;
+export default LoaderIndicatorComponent;

package/dist/types/pages/progress-steps/progress-steps.d.ts

@@ -1,2 +1,5 @@
+import "./progress-steps.scss";
+import { StepsItemProps } from "../types/type";
+export declare const ProgressSteps: (props: StepsItemProps) => JSX.Element;
 declare const ProgressStepsComponent: () => import("react/jsx-runtime").JSX.Element;
 export default ProgressStepsComponent;

package/dist/types/pages/progress_bar_round/circle-progress-bar.d.ts

@@ -0,0 +1,11 @@
+interface SVGProps {
+    height?: number;
+    strokeWidth?: number;
+    strokeColor?: string;
+    strokeBgColor?: string;
+    value?: number;
+    text?: string;
+    textDisabled?: boolean;
+}
+declare const CircleProgressComponent: ({ height, strokeWidth, text, strokeColor, strokeBgColor, value, textDisabled }: SVGProps) => import("react/jsx-runtime").JSX.Element;
+export default CircleProgressComponent;

package/dist/types/pages/progress_bar_round/half-circle-progres-bar.d.ts

@@ -0,0 +1,11 @@
+interface SVGProps {
+    height?: number;
+    strokeWidth?: number;
+    strokeColor?: string;
+    strokeBgColor?: string;
+    value?: number;
+    text?: string;
+    textDisabled?: boolean;
+}
+declare const HalfProgressComponent: ({ height, strokeWidth, text, strokeColor, strokeBgColor, value, textDisabled }: SVGProps) => import("react/jsx-runtime").JSX.Element;
+export default HalfProgressComponent;

package/dist/types/pages/slideout-menus/slideout-menus.d.ts

@@ -0,0 +1,2 @@
+declare const SlideoutMenuComponent: () => import("react/jsx-runtime").JSX.Element;
+export default SlideoutMenuComponent;

package/dist/types/pages/tabels/table-data.d.ts

@@ -0,0 +1,28 @@
+export interface TeamDataItem {
+    id: number;
+    name: string;
+    image: string;
+    company: string;
+    email: string;
+    role: string;
+    status: "Active" | "Inactive";
+    purchase: string;
+    teams: string[];
+    date: string;
+}
+export interface CustomerAbout {
+    title: string;
+    description: string;
+}
+export interface CustomerDataItem {
+    id: number;
+    name: string;
+    image: string;
+    website: string;
+    status: "Customer" | "Churned";
+    about: CustomerAbout;
+    users: string[];
+    licenseUse: number;
+}
+export declare const teamData: TeamDataItem[];
+export declare const customersData: CustomerDataItem[];

package/dist/types/pages/tabels/table.d.ts

@@ -0,0 +1,2 @@
+declare const TableComponent: () => JSX.Element;
+export default TableComponent;

package/dist/types/pages/types/type.d.ts

@@ -2,3 +2,21 @@ export interface City {
     name: string;
     code: string;
 }
+export interface CustomActionEvent {
+    event: React.SyntheticEvent;
+    item: StepItem;
+}
+export interface StepItem {
+    id: string;
+    template: JSX.Element;
+    action?(event?: CustomActionEvent): void;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+}
+export interface StepsItemProps {
+    stepsItems: StepItem[];
+    orientation?: "horizontal" | "vertical";
+    activeIndex?: number;
+    style?: React.CSSProperties | undefined;
+    className?: string | undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",