sccoreui 2.3.5 → 2.3.7

package/dist/assets/sccoreui.css

@@ -5519,7 +5519,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
   /* box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12); */
   border-radius: 8px;
   border: 1px solid #eaecf0;
-  padding: 10px 16px 10px 16px;
+  padding: 12px 16px 12px 16px;
 }
 .p-card:hover {
   box-shadow: 0px 0px 2px #c5c5c5;

package/dist/components/progress-steps/progress-steps.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressSteps = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("primereact/button");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+require("./progress-steps.scss");
+const react_1 = require("react");
+const ProgressSteps = (props) => {
+    const { stepsItems, orientation, activeIndex, withButtons = true, icons, className, style, } = props;
+    const [currentActive, setCurrentActive] = (0, react_1.useState)(activeIndex || 0);
+    const progressRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!orientation || orientation === "horizontal") {
+            progressRef.current.style.width = `${(currentActive / (stepsItems.length - 1)) * 100}%`;
+        }
+        else {
+            progressRef.current.style.height = `${(currentActive / (stepsItems.length - 1)) * 100}%`;
+        }
+    }, [currentActive]);
+    const handleNext = () => {
+        if (currentActive > stepsItems.length) {
+            setCurrentActive(stepsItems.length);
+        }
+        else {
+            setCurrentActive(currentActive + 1);
+        }
+    };
+    const handlePrev = () => {
+        if (currentActive < 1) {
+            setCurrentActive(1);
+        }
+        else {
+            setCurrentActive(currentActive - 1);
+        }
+    };
+    const orientationClass = !orientation ? "horizontal" : orientation;
+    const userClassNames = !className ? "" : className;
+    if (!stepsItems) {
+        throw new Error("stepItems must be specified in order to generate steps");
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `progress-container flex justify-content-between relative ${orientationClass === "horizontal"
+                    ? "flex-row max-w-full"
+                    : "flex-column max-h-full"} ${orientationClass} ${userClassNames}`, style: style }, { children: [(0, jsx_runtime_1.jsx)("div", { className: `progressbar bg-primary-600 absolute ${orientationClass}`, ref: progressRef }), stepsItems.map((eachItem, index) => ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: `progress-step-item ${orientationClass === "horizontal"
+                            ? "flex flex-column align-items-center gap-5"
+                            : "flex align-items-start gap-5"}  ${orientationClass}`, onClick: () => {
+                            if (eachItem.action) {
+                                eachItem.action();
+                            }
+                        } }, { children: [!icons ? ((0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: index === currentActive
+                                    ? "step-current"
+                                    : index > currentActive
+                                        ? "step-unvisited"
+                                        : "step-checked" })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: index === currentActive
+                                    ? icons.current
+                                    : index > currentActive
+                                        ? icons.unvisited
+                                        : icons.visited })), !eachItem.template ? ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: eachItem.title }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `flex flex-column line-height-2 ${orientationClass === "horizontal"
+                                    ? "align-items-center"
+                                    : "align-items-start"} ${orientationClass}` }, { children: eachItem.template })))] }), eachItem.id)))] })), withButtons && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex${orientationClass === "horizontal"
+                    ? ""
+                    : " flex-column align-self-center"} gap-2 mt-5` }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: currentActive === 0, onClick: handlePrev }, { children: "Prev" })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: currentActive === stepsItems.length - 1, onClick: handleNext }, { children: "Next" }))] })))] }));
+};
+exports.ProgressSteps = ProgressSteps;
+const ProgressStepsComponent = () => {
+    const itemTemplate = (label, description) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-semibold" }, { children: label })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal" }, { children: description }))] }));
+    const items = [
+        {
+            id: "1",
+            template: itemTemplate("Your Details", "Provide Your Details"),
+        },
+        {
+            id: "2",
+            template: itemTemplate("Company details", "A few details of your company"),
+        },
+        {
+            id: "3",
+            template: itemTemplate("Invite your team", "Start collaborating"),
+        },
+    ];
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center justify-content-between gap-5 h-30rem" }, { children: [(0, jsx_runtime_1.jsx)(exports.ProgressSteps, { stepsItems: items }), (0, jsx_runtime_1.jsx)(exports.ProgressSteps, { stepsItems: items, orientation: "vertical" })] })));
+};
+exports.default = ProgressStepsComponent;

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chart = exports.ProgressSpinner = exports.Skeleton = exports.Chip = exports.Chips = exports.Rating = exports.InputTextarea = exports.InputSwitch = exports.InputMask = exports.SpeedDial = exports.SplitButton = exports.DataViewLayoutOptions = exports.DataView = exports.Toast = exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.Slider = exports.Card = exports.Dialog = exports.Password = exports.confirmPopup = exports.ConfirmDialog = exports.RadioButton = exports.Badge = exports.Tooltip = exports.Calendar = exports.Image = exports.AvatarGroup = exports.Avatar = exports.classNames = exports.Paginator = exports.MultiSelect = exports.FileUpload = exports.TabMenu = exports.TabPanel = exports.TabView = exports.Sidebar = exports.Column = exports.DataTable = exports.Checkbox = exports.AutoComplete = exports.ColorPicker = exports.AccordionTab = exports.Accordion = exports.InputText = exports.Dropdown = exports.Button = void 0;
-exports.ProgressBar = exports.Divider = exports.MegaMenu = exports.BreadCrumb = void 0;
+exports.CircleProgressComponent = exports.ProgressSteps = exports.ProgressBar = exports.Divider = exports.MegaMenu = exports.BreadCrumb = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = tslib_1.__importDefault(require("react-dom/client"));
@@ -112,4 +112,8 @@ var divider_1 = require("./components/divider/divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return tslib_1.__importDefault(divider_1).default; } });
 var progress_bar_1 = require("./components/progress-bar/progress-bar");
 Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return tslib_1.__importDefault(progress_bar_1).default; } });
+var progress_steps_1 = require("./components/progress-steps/progress-steps");
+Object.defineProperty(exports, "ProgressSteps", { enumerable: true, get: function () { return tslib_1.__importDefault(progress_steps_1).default; } });
+var circle_progress_bar_1 = require("./components/progress_bar_round/circle-progress-bar");
+Object.defineProperty(exports, "CircleProgressComponent", { enumerable: true, get: function () { return tslib_1.__importDefault(circle_progress_bar_1).default; } });
 client_1.default.createRoot(document.getElementById('root')).render((0, jsx_runtime_1.jsx)(App_1.default, {}));

package/dist/pages/file-upload/file-upload.js

@@ -6,7 +6,7 @@ const fileupload_1 = require("primereact/fileupload");
 const react_1 = require("react");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
 const progressbar_1 = require("primereact/progressbar");
-const circle_progress_bar_1 = tslib_1.__importDefault(require("../progress_bar_round/circle-progress-bar"));
+const circle_progress_bar_1 = tslib_1.__importDefault(require("../../components/progress_bar_round/circle-progress-bar"));
 const checkbox_1 = require("primereact/checkbox");
 require("./file-upload.scss");
 // import { Checkbox } from "primereact/checkbox";

package/dist/pages/home.js

@@ -22,7 +22,7 @@ const tooltip_1 = tslib_1.__importDefault(require("./tooltip/tooltip"));
 const loader_indicator_1 = tslib_1.__importDefault(require("./loader-indicator/loader-indicator"));
 const pagination_1 = tslib_1.__importDefault(require("../pages/paginator/pagination"));
 const shadows_1 = tslib_1.__importDefault(require("../pages/shadows/shadows"));
-const progress_steps_1 = tslib_1.__importDefault(require("./progress-steps/progress-steps"));
+const progress_steps_1 = tslib_1.__importDefault(require("../components/progress-steps/progress-steps"));
 const tabs_1 = tslib_1.__importDefault(require("./tabs/tabs"));
 const breadcrumb_1 = tslib_1.__importDefault(require("./breadcrumb/breadcrumb"));
 const button_1 = tslib_1.__importDefault(require("./button/button"));

package/dist/pages/progress-bar/progress-bar.js

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const progressbar_1 = require("primereact/progressbar");
 const react_1 = require("react");
 const slider_1 = require("primereact/slider");
-const circle_progress_bar_1 = tslib_1.__importDefault(require("../progress_bar_round/circle-progress-bar"));
-const half_circle_progres_bar_1 = tslib_1.__importDefault(require("../progress_bar_round/half-circle-progres-bar"));
+const circle_progress_bar_1 = tslib_1.__importDefault(require("../../components/progress_bar_round/circle-progress-bar"));
+const half_circle_progres_bar_1 = tslib_1.__importDefault(require("../../components/progress_bar_round/half-circle-progres-bar"));
 require("./progress-bar.scss");
 const ProgressBarComponent = () => {
     const [value, setValue] = (0, react_1.useState)("");
@@ -16,12 +16,12 @@ const ProgressBarComponent = () => {
                                             left: `${value}%`,
                                             transition: "left 1s ease-in-out",
                                             transform: "translate(-50%, -50%)",
-                                        }, className: "px-3 p-progress-value h-2rem border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, 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: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative " }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
+                                        }, className: "px-3 p-progress-value bg-white shadow-3 h-2rem border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, 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: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: " col-6 md:col-4 lg:col-3 px-7 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "relative " }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
                                             position: "absolute",
                                             top: -24,
                                             left: `${value}%`,
                                             transition: "left 1s ease-in-out",
                                             transform: "translate(-50%, -50%)",
-                                        }, className: "p-progress-value h-2rem px-3 border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-end" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-full" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-progress-value py-2 flex align-items-center  text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(circle_progress_bar_1.default, { text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 8, strokeBgColor: "var(--gray-300)" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(half_circle_progres_bar_1.default, { text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 8, strokeBgColor: "var(--gray-300)" }) }))] })) }))] }));
+                                        }, className: "p-progress-value bg-white shadow-3 h-2rem px-3 border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-end" }, { children: [(0, jsx_runtime_1.jsx)(progressbar_1.ProgressBar, { value: value, className: "w-full" }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "p-progress-value bg-white shadow-3 py-2 flex align-items-center  text-center text-sm" }, { children: [value, "%"] }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(circle_progress_bar_1.default, { text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 8, strokeBgColor: "var(--gray-300)" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 mt-8 flex flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(half_circle_progres_bar_1.default, { text: "Active users", value: value, height: 200, strokeColor: "var(--primary-500)", strokeWidth: 8, strokeBgColor: "var(--gray-300)" }) }))] })) }))] }));
 };
 exports.default = ProgressBarComponent;

package/dist/types/{pages → components}/progress-steps/progress-steps.d.ts

@@ -1,5 +1,5 @@
 import "./progress-steps.scss";
-import { StepsItemProps } from "../types/type";
+import { StepsItemProps } from "../../pages/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/index.d.ts

@@ -1,6 +1,7 @@
 import { DropdownChangeEvent } from 'primereact/dropdown';
 import { ColorPickerChangeEvent } from 'primereact/colorpicker';
 import { SliderChangeEvent } from 'primereact/slider';
+import { FileUploadHandlerEvent, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions } from 'primereact/fileupload';
 import { CarouselResponsiveOption } from 'primereact/carousel';
 import { MenuItem } from 'primereact/menuitem';
 export { default as Button } from './components/button/button';
@@ -54,4 +55,6 @@ export { default as BreadCrumb } from './components/breadcrumb/breacrumb';
 export { default as MegaMenu } from './components/megamenu/mega-menu';
 export { default as Divider } from './components/divider/divider';
 export { default as ProgressBar } from './components/progress-bar/progress-bar';
-export type { DropdownChangeEvent, CarouselResponsiveOption, ColorPickerChangeEvent, SliderChangeEvent, MenuItem };
+export { default as ProgressSteps } from './components/progress-steps/progress-steps';
+export { default as CircleProgressComponent } from './components/progress_bar_round/circle-progress-bar';
+export type { DropdownChangeEvent, CarouselResponsiveOption, ColorPickerChangeEvent, SliderChangeEvent, MenuItem, FileUploadHandlerEvent, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions };

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

@@ -8,14 +8,22 @@ export interface CustomActionEvent {
 }
 export interface StepItem {
     id: string;
-    template: JSX.Element;
+    title?: string;
+    template?: JSX.Element;
     action?(event?: CustomActionEvent): void;
     style?: React.CSSProperties | undefined;
     className?: string | undefined;
 }
+export interface StepIcons {
+    unvisited: React.HTMLAttributes<HTMLSpanElement | SVGSVGElement> | undefined;
+    visited: React.HTMLAttributes<HTMLSpanElement | SVGSVGElement> | undefined;
+    current: React.HTMLAttributes<HTMLSpanElement | SVGSVGElement> | undefined;
+}
 export interface StepsItemProps {
     stepsItems: StepItem[];
     orientation?: "horizontal" | "vertical";
+    withButtons?: boolean;
+    icons?: StepIcons;
     activeIndex?: number;
     style?: React.CSSProperties | undefined;
     className?: string | undefined;

package/package.json

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

package/dist/pages/progress-steps/progress-steps.js

@@ -1,82 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressSteps = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const button_1 = require("primereact/button");
-const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-require("./progress-steps.scss");
-const react_1 = require("react");
-const ProgressSteps = (props) => {
-    const { stepsItems, orientation, activeIndex, className, style } = props;
-    const [currentActive, setCurrentActive] = (0, react_1.useState)(activeIndex || 0);
-    const progressRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (!orientation || orientation === "horizontal") {
-            progressRef.current.style.width = `${(currentActive / (stepsItems.length - 1)) * 100}%`;
-        }
-        else {
-            progressRef.current.style.height = `${(currentActive / (stepsItems.length - 1)) * 100}%`;
-        }
-    }, [currentActive]);
-    const handleNext = () => {
-        if (currentActive > stepsItems.length) {
-            setCurrentActive(stepsItems.length);
-        }
-        else {
-            setCurrentActive(currentActive + 1);
-        }
-    };
-    const handlePrev = () => {
-        if (currentActive < 1) {
-            setCurrentActive(1);
-        }
-        else {
-            setCurrentActive(currentActive - 1);
-        }
-    };
-    const orientationClass = !orientation ? "horizontal" : orientation;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `progress-container mb-2 ${orientationClass} ${className}`, style: style }, { children: [(0, jsx_runtime_1.jsx)("div", { className: `progressbar ${orientationClass}`, ref: progressRef }), stepsItems.map((eachItem, index) => ((0, jsx_runtime_1.jsxs)("section", Object.assign({ className: `progress-step-item  ${orientationClass}`, onClick: () => {
-                            if (eachItem.action) {
-                                eachItem.action();
-                            }
-                        } }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: index === currentActive
-                                    ? "step-current"
-                                    : index > currentActive
-                                        ? "step-unvisited"
-                                        : "step-checked" }), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: eachItem.template })] }), eachItem.id)))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2 mt-8" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: currentActive === 0, onClick: handlePrev }, { children: "Prev" })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ disabled: currentActive === stepsItems.length - 1, onClick: handleNext }, { children: "Next" }))] }))] }));
-};
-exports.ProgressSteps = ProgressSteps;
-const ProgressStepsComponent = () => {
-    const itemTemplate = (label, description, orientation = "horizontal") => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `step-item-data ${orientation}` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-semibold" }, { children: label })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal" }, { children: description }))] })));
-    const itemsHorizontal = [
-        {
-            id: "1",
-            template: itemTemplate("Your Details", "Please provide Your Details"),
-        },
-        {
-            id: "2",
-            template: itemTemplate("Company details", "A few details about your company"),
-        },
-        {
-            id: "3",
-            template: itemTemplate("Invite your team", "Start collaborating with your team"),
-        },
-    ];
-    const itemsVertical = [
-        {
-            id: "1",
-            template: itemTemplate("Your Details", "Please provide Your Details", "vertical"),
-        },
-        {
-            id: "2",
-            template: itemTemplate("Company details", "A few details about your company", "vertical"),
-        },
-        {
-            id: "3",
-            template: itemTemplate("Invite your team", "Start collaborating with your team", "vertical"),
-        },
-    ];
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-8 ml-8 mt-8 pl-8" }, { children: [(0, jsx_runtime_1.jsx)(exports.ProgressSteps, { stepsItems: itemsHorizontal }), (0, jsx_runtime_1.jsx)(exports.ProgressSteps, { stepsItems: itemsVertical, orientation: "vertical" })] })));
-};
-exports.default = ProgressStepsComponent;