sccoreui 2.3.4 → 2.3.6

package/dist/pages/slideout-menus/slideout-menus.js

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const button_1 = require("primereact/button");
-const sidebar_1 = require("primereact/sidebar");
-const react_1 = require("react");
-const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const tabview_1 = require("primereact/tabview");
-const avatar_png_1 = tslib_1.__importDefault(require("../../assets/images/avatar.png"));
-const checkbox_1 = require("primereact/checkbox");
-const Payment_method_card_white_png_1 = tslib_1.__importDefault(require("../../assets/images/Payment-method-card-white.png"));
-const Payment_method_master_card_png_1 = tslib_1.__importDefault(require("../../assets/images/Payment-method-master-card.png"));
-const Payment_method_apple_card_png_1 = tslib_1.__importDefault(require("../../assets/images/Payment-method-apple-card.png"));
-const inputtext_1 = require("primereact/inputtext");
-const SlideoutMenuComponent = () => {
-    const [visibleRight, setVisibleRight] = (0, react_1.useState)(false);
-    const [visibleRight2, setVisibleRight2] = (0, react_1.useState)(false);
-    const [visibleRight3, setVisibleRight3] = (0, react_1.useState)(false);
-    const [isChecked, setIsChecked] = (0, react_1.useState)(false);
-    const [emailValue, setEmailValue] = (0, react_1.useState)("");
-    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: "Slideout Menus" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "grid my-8" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "col-12 md:col-4 flex justify-content-between px-4" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Label discription", onClick: () => setVisibleRight(true) }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Messaging", onClick: () => setVisibleRight2(true) }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: "Payment Cards", onClick: () => setVisibleRight3(true) }), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ visible: visibleRight, position: "right", onHide: () => setVisibleRight(false), className: "w-25rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full align-items-start gap-3 mb-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "slide-out-menu-header-round-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "text-gray-900 text-xl my-0 line-height-3 font-semibold" }, { children: "Heading" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal" }, { children: "Lorem ipsum dolor sit amet." }))] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column align-items-start my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-1 font-normal text-base" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odio dictumst tempus magna elit cras posuere cursus pulvinar id. Facilisis at eu amet ornare enim arcu malesuada rutrum a." })), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-50 w-full h-5rem border-round-lg mt-3" })] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column align-items-start my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-1 font-normal text-base" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odio dictumst tempus magna elit cras posuere cursus pulvinar id. Facilisis at eu amet ornare enim arcu malesuada rutrum a." })), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-50 w-full h-5rem border-round-lg mt-3" })] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column align-items-start my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsx)("label", Object.assign({ className: "text-gray-700 text-base font-medium" }, { children: "Label" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-1 font-normal text-base" }, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Odio dictumst tempus magna elit cras posuere cursus pulvinar id. Facilisis at eu amet ornare enim arcu malesuada rutrum a." })), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-50 w-full h-5rem border-round-lg mt-3" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "sideout-menu-footer" }, { children: [(0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-6  flex align-items-center justify-content-end gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, className: "", label: "Cancle" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "", label: "Save" })] }))] }))] })), (0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, Object.assign({ visible: visibleRight2, position: "right", onHide: () => setVisibleRight2(false), className: "w-25rem" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full flex-column align-items-start mb-3" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "text-gray-900 text-xl my-0 line-height-3 font-semibold" }, { children: "Messages" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal" }, { children: "Lorem ipsum dolor sit amet." }))] })), (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box w-full flex justify-content-between md:flex-column not-expand mt-6" }, { children: [(0, jsx_runtime_1.jsxs)(tabview_1.TabPanel, Object.assign({ header: "Recent" }, { children: [(0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1 my-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 border-circle absolute border-1 border-white", style: {
-                                                                            position: "absolute",
-                                                                            right: "0",
-                                                                            height: "12px",
-                                                                            width: "12px",
-                                                                            bottom: "0",
-                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Phoenix Baker" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "Just now" })), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 p-1 border-circle absolute border-1 border-white", style: {
-                                                                                    position: "absolute",
-                                                                                    right: "1px",
-                                                                                    top: "1px"
-                                                                                } })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@phoenix" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal my-1" }, { children: "Looks good!" }))] }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1 my-4" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-gray-300 border-circle absolute border-1 border-white", style: {
-                                                                            position: "absolute",
-                                                                            right: "0",
-                                                                            height: "12px",
-                                                                            width: "12px",
-                                                                            bottom: "0",
-                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Lana Steiner" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "2 mins ago" })), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-500 p-1 border-circle absolute border-1 border-white", style: {
-                                                                                    position: "absolute",
-                                                                                    right: "1px",
-                                                                                    top: "1px"
-                                                                                } })] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@lana" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal my-1" }, { children: "Thanks so much, happy with that." }))] }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-start gap-2 my-3 pl-1" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-3rem h-3rem border-circle flex align-items-center justify-content-center relative " }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar_png_1.default, className: " border-circle w-3rem h-3rem p-avatar-focus" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-gray-300 border-circle absolute border-1 border-white", style: {
-                                                                            position: "absolute",
-                                                                            right: "0",
-                                                                            height: "12px",
-                                                                            width: "12px",
-                                                                            bottom: "0",
-                                                                        } })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex flex-column" }, { children: [(0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "relative w-full line-height-1" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium text-base text-gray-700 line-height-2" }, { children: "Orlando Diggs" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm ml-2 font-normal line-height-1 text-gray-600" }, { children: "3:42pm 20 Jan 2022" }))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-600 font-normal" }, { children: "@orlando" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex bg-white align-items-start gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "file-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start pl-1 w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base w-full text-gray-700 line-height-2 font-medium" }, { children: "Datasheet_draft_02.pdf" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-gray-700 line-height-2 font-normal my-1" }, { children: "720 KB" }))] }))] }))] }))] }))] })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Groups" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Archive" })] }))] })) })), (0, jsx_runtime_1.jsxs)(sidebar_1.Sidebar, Object.assign({ visible: visibleRight3, position: "right", onHide: () => setVisibleRight3(false), className: "w-25rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full align-items-start gap-3 mb-3" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "slide-out-menu-header-round-payment-card-icon-primary-100" }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex w-full flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ className: "text-gray-900 text-xl my-0 line-height-3 font-semibold" }, { children: "Payment method" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-base line-height-2 font-normal" }, { children: "Update your plan payment details." }))] }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 pl-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between my-2 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""}  w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_card_white_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-800 text-lg font-medium line-height-2" }, { children: "Visa ending in 1234" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal line-height-2" }, { children: "Up to 10 users and 20GB indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold text-base" }, { children: "Edit" }))] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between my-2 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""}  w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_master_card_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-800 text-lg font-medium line-height-2" }, { children: "Mastercard ending in 1234" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal line-height-2" }, { children: "Up to 20 users and 40GB indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold text-base" }, { children: "Edit" }))] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between my-2 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""}  w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_apple_card_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-800 text-lg font-medium line-height-2" }, { children: "Visa ending in 1234" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal line-height-2" }, { children: "Unlimited users and unlimited indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold text-base" }, { children: "Edit" }))] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex align-items-start justify-content-between my-2 gap-3 p-4 border-round-xl p-checkbox-group ${isChecked ? "p-group-highlight" : ""}  w-full`, onClick: () => setIsChecked(!isChecked) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: Payment_method_card_white_png_1.default, alt: "." }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column align-items-start w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-800 text-lg font-medium line-height-2" }, { children: "Stripe (Visa ending 1234)" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 text-lg font-normal line-height-2" }, { children: "Unlimited users and unlimited indiviual data." })), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex align-items-center gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-500" }, { children: "Set as default" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-semibold text-base" }, { children: "Edit" }))] }))] })), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { onClick: () => setIsChecked(!isChecked), checked: isChecked, className: "p-checkcircle", icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "check-selected-white" }) })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full flex align-items-center justify-content-end gap-2 my-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "payment-method-plus-icon" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base text-primary-400 font-semibold" }, { children: "Add payment method" }))] })), (0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1 my-6" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-start" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 line-height-2 text-base font-medium" }, { children: "Billing contact" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 line-height-2 text-base font-normal" }, { children: "Add a second billing contact email." })), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: "Email", className: "font-medium text-gray-700 text-base mb-1 mt-4" }, { children: "Email address" })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: " p-input-icon-left message-box p-input-icon-right w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "message-box" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "help-circle" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: emailValue, id: "Email", onChange: (e) => {
-                                                        setEmailValue(e.target.value);
-                                                    }, "aria-describedby": "username-help", placeholder: "Enter your email address", className: "w-full text-lg font-normal text-gray-500 hover:text-gray-900" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "sideout-menu-footer my-5" }, { children: [(0, jsx_runtime_1.jsx)("hr", { className: "w-full my-0 border-gray-200 border-1" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-6  flex align-items-center justify-content-end gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { outlined: true, className: "", label: "Cancle" }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "", label: "Confirm" })] }))] }))] }))] })) }))] }));
-};
-exports.default = SlideoutMenuComponent;

package/dist/pages/sliders/slider.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const slider_1 = require("primereact/slider");
-function SliderComponent() {
-    const [value, setValue] = (0, react_1.useState)([10, 10]);
-    console.log(value);
-    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 mb-4" }, { children: "Input" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid my-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-6 md:col-4 lg:col-3 px-7 flex mt-8 flex-column justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-full", range: true }) })), (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: "relative w-full " }, { children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-full", range: true }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
-                                        position: "absolute",
-                                        height: "34px",
-                                        top: -35,
-                                        alignSelf: "stretch",
-                                        left: `${value[0]}%`,
-                                        transform: "translate(-50%, -50%)",
-                                    }, className: "px-3 bg-white border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-lg" }, { children: [value[0], "%"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
-                                        position: "absolute",
-                                        height: "34px",
-                                        top: -35,
-                                        alignSelf: "stretch",
-                                        left: `${value[1]}%`,
-                                        transform: "translate(-50%, -50%)",
-                                    }, className: "px-3 bg-white border-1 border-gray-200 py-2 flex align-items-center border-round-lg text-center text-lg" }, { children: [value[1], "%"] }))] })) })), (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: "relative w-full" }, { children: [(0, jsx_runtime_1.jsx)(slider_1.Slider, { value: value, onChange: (e) => setValue(e.value), className: "w-full", range: true }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
-                                        position: "absolute",
-                                        height: "34px",
-                                        top: -35,
-                                        alignSelf: "stretch",
-                                        left: `${value[0]}%`,
-                                        transform: "translate(-50%, -50%)",
-                                    }, className: "px-3 bg-white border-gray-200 py-2 flex align-items-center text-center text-lg" }, { children: [value[0], "%"] })), (0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
-                                        position: "absolute",
-                                        height: "34px",
-                                        top: -35,
-                                        alignSelf: "stretch",
-                                        left: `${value[1]}%`,
-                                        transform: "translate(-50%, -50%)",
-                                    }, className: "px-3 bg-white  border-gray-200 py-2 flex align-items-center  text-center text-lg" }, { children: [value[1], "%"] }))] })) }))] }))] }));
-}
-exports.default = SliderComponent;