josenanodev-react-components-library 0.2.18 → 1.0.0

package/dist/cjs/components/ParallelSelectionList/ParallelSelectionList.js

@@ -1,146 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
-require("./ParallelSelectionList.css");
-//Icons
-const bs_1 = require("react-icons/bs");
-//Hooks
-const useResizeObserver_1 = __importDefault(require("../../hooks/useResizeObserver"));
-const ParallelSelectionList = ({ dataList, applyAction, cancelAction, onSelectionChange, leftListTitle, rightListTitle, leftListApplyAllButtonText, rightListApplyAllButtonText, searchBarsVisible, applyButonText, cancelButtonText, preSelectedDatumsIds = [], listElementsHeight = 50, }) => {
-    //Refs
-    const leftListRef = (0, react_2.useRef)(null);
-    const rightListRef = (0, react_2.useRef)(null);
-    //useState
-    const [selectedDatumsIds, setSelectedDatumsIds] = (0, react_2.useState)(preSelectedDatumsIds);
-    const [filteredLeftList, setFilteredLeftList] = (0, react_2.useState)([]);
-    const [filteredRightList, setFilteredRightList] = (0, react_2.useState)([]);
-    const [leftListFirstVisibleElementIndex, setLeftListFirstVisibleElementIndex] = (0, react_2.useState)(0);
-    const [leftListLastVisibleElementIndex, setLeftListLastVisibleElementIndex] = (0, react_2.useState)(0);
-    const [rightListFirstVisibleElementIndex, setRightListFirstVisibleElementIndex] = (0, react_2.useState)(0);
-    const [rightListLastVisibleElementIndex, setRightListLastVisibleElementIndex] = (0, react_2.useState)(0);
-    const [leftListSearchValue, setLeftListSearchValue] = (0, react_2.useState)("");
-    const [rightListSearchValue, setRightListSearchValue] = (0, react_2.useState)("");
-    //hooks
-    const [leftListWidth, leftListHeight] = (0, useResizeObserver_1.default)(leftListRef);
-    const [rightListWidth, rightListHeight] = (0, useResizeObserver_1.default)(rightListRef);
-    //Functions
-    const addToSelectedDatumsIds = (datumIdsArray) => {
-        const selectedDatumsIdsClone = [...selectedDatumsIds];
-        datumIdsArray.forEach((datumId) => {
-            if (!selectedDatumsIds.includes(datumId)) {
-                selectedDatumsIdsClone.push(datumId);
-            }
-        });
-        setSelectedDatumsIds(selectedDatumsIdsClone);
-    };
-    const removeFromSelectedDatumsIds = (datumIdsArray) => {
-        const selectedDatumsIdsClone = [...selectedDatumsIds];
-        datumIdsArray.forEach((datumId) => {
-            if (selectedDatumsIds.includes(datumId)) {
-                selectedDatumsIdsClone.splice(selectedDatumsIdsClone.indexOf(datumId), 1);
-            }
-        });
-        setSelectedDatumsIds(selectedDatumsIdsClone);
-    };
-    //useEffects
-    (0, react_2.useEffect)(() => {
-        let dataListClone = [...dataList];
-        dataListClone = dataListClone.filter((datum) => !selectedDatumsIds.includes(datum._id));
-        dataListClone = dataListClone.filter((datum) => datum.searchValue.toLowerCase().includes(leftListSearchValue.toLowerCase()));
-        setFilteredLeftList(dataListClone);
-    }, [leftListSearchValue, dataList, selectedDatumsIds]);
-    (0, react_2.useEffect)(() => {
-        let dataListClone = [...dataList];
-        dataListClone = dataListClone.filter((datum) => selectedDatumsIds.includes(datum._id));
-        dataListClone = dataListClone.filter((datum) => datum.searchValue.toLowerCase().includes(rightListSearchValue.toLowerCase()));
-        setFilteredRightList(dataListClone);
-    }, [rightListSearchValue, dataList, selectedDatumsIds]);
-    (0, react_2.useEffect)(() => {
-        if (leftListRef.current && leftListRef.current.clientHeight !== 0) {
-            setLeftListLastVisibleElementIndex(leftListFirstVisibleElementIndex +
-                Math.floor(leftListRef.current.clientHeight / listElementsHeight) +
-                2);
-        }
-        else {
-            setLeftListLastVisibleElementIndex(filteredLeftList.length);
-        }
-    }, [
-        leftListHeight,
-        leftListWidth,
-        leftListFirstVisibleElementIndex,
-        listElementsHeight,
-        filteredLeftList.length,
-    ]);
-    (0, react_2.useEffect)(() => {
-        if (rightListRef.current && rightListRef.current.clientHeight !== 0) {
-            setRightListLastVisibleElementIndex(rightListFirstVisibleElementIndex +
-                Math.floor(rightListRef.current.clientHeight / listElementsHeight) +
-                2);
-        }
-        else {
-            setRightListLastVisibleElementIndex(filteredRightList.length);
-        }
-    }, [
-        rightListHeight,
-        rightListWidth,
-        rightListFirstVisibleElementIndex,
-        listElementsHeight,
-        filteredRightList.length,
-    ]);
-    (0, react_2.useEffect)(() => {
-        //I know what I am doing... maybe
-        if (onSelectionChange) {
-            onSelectionChange(selectedDatumsIds);
-        }
-        // eslint-disable-next-line
-    }, [selectedDatumsIds]);
-    return (react_1.default.createElement("div", { className: "parallel-selection-list" },
-        react_1.default.createElement("div", { className: "div-left-list" },
-            react_1.default.createElement("p", { className: "list-title" }, leftListTitle),
-            searchBarsVisible && (react_1.default.createElement("div", { className: "div-search-bar" },
-                react_1.default.createElement(bs_1.BsSearch, null),
-                react_1.default.createElement("input", { type: "text", value: leftListSearchValue, onChange: (event) => setLeftListSearchValue(event.target.value) }))),
-            react_1.default.createElement("div", { className: "list-container" },
-                react_1.default.createElement("button", { className: "apply-all-button", onClick: () => addToSelectedDatumsIds(filteredLeftList.map((datum) => datum._id)) },
-                    leftListApplyAllButtonText,
-                    " ",
-                    react_1.default.createElement(bs_1.BsChevronDoubleRight, null)),
-                react_1.default.createElement("div", { ref: leftListRef, className: "scrollable-section", onScroll: (event) => setLeftListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
-                    react_1.default.createElement("div", { className: "resizable-div-for-scroll", style: {
-                            paddingTop: leftListFirstVisibleElementIndex * listElementsHeight,
-                            height: filteredLeftList.length * listElementsHeight,
-                        } }, filteredLeftList
-                        .slice(leftListFirstVisibleElementIndex, leftListLastVisibleElementIndex)
-                        .map((datum) => (react_1.default.createElement("div", { key: datum._id, className: "div-datum-wrapper", style: { height: listElementsHeight } },
-                        datum.customComponent ? (react_1.default.createElement("div", { className: "div-custom-component-wrapper" }, datum.customComponent)) : (react_1.default.createElement("p", { className: "visible-default-name", title: datum.visibleDefaultName }, datum.visibleDefaultName)),
-                        react_1.default.createElement("button", { className: "apply-to-one-button", onClick: () => addToSelectedDatumsIds([datum._id]) },
-                            react_1.default.createElement(bs_1.BsChevronRight, null))))))))),
-        react_1.default.createElement("div", { className: "div-right-list" },
-            react_1.default.createElement("p", { className: "list-title" }, rightListTitle),
-            searchBarsVisible && (react_1.default.createElement("div", { className: "div-search-bar" },
-                react_1.default.createElement(bs_1.BsSearch, null),
-                react_1.default.createElement("input", { type: "text", value: rightListSearchValue, onChange: (event) => setRightListSearchValue(event.target.value) }))),
-            react_1.default.createElement("div", { className: "list-container" },
-                react_1.default.createElement("button", { className: "apply-all-button", onClick: () => removeFromSelectedDatumsIds(filteredRightList.map((datum) => datum._id)) },
-                    react_1.default.createElement(bs_1.BsChevronDoubleLeft, null),
-                    " ",
-                    rightListApplyAllButtonText),
-                react_1.default.createElement("div", { ref: rightListRef, className: "scrollable-section", onScroll: (event) => setRightListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
-                    react_1.default.createElement("div", { className: "resizable-div-for-scroll", style: {
-                            paddingTop: rightListFirstVisibleElementIndex * listElementsHeight,
-                            height: filteredRightList.length * listElementsHeight,
-                        } }, filteredRightList
-                        .slice(rightListFirstVisibleElementIndex, rightListLastVisibleElementIndex)
-                        .map((datum) => (react_1.default.createElement("div", { key: datum._id, className: "div-datum-wrapper", style: { height: listElementsHeight } },
-                        react_1.default.createElement("button", { className: "apply-to-one-button", onClick: () => removeFromSelectedDatumsIds([datum._id]) },
-                            react_1.default.createElement(bs_1.BsChevronLeft, null)),
-                        datum.customComponent ? (react_1.default.createElement("div", { className: "div-custom-component-wrapper" }, datum.customComponent)) : (react_1.default.createElement("p", { className: "visible-default-name", title: datum.visibleDefaultName }, datum.visibleDefaultName))))))))),
-        react_1.default.createElement("div", { className: "div-action-buttons" },
-            react_1.default.createElement("button", { className: "cancel-button", onClick: () => cancelAction() }, cancelButtonText ? cancelButtonText : "Cancel"),
-            react_1.default.createElement("button", { className: "apply-button", onClick: () => applyAction(selectedDatumsIds) }, applyButonText ? applyButonText : "Apply"))));
-};
-exports.default = ParallelSelectionList;

package/dist/cjs/components/ParallelSelectionList/types.d.ts

@@ -1,22 +0,0 @@
-export interface ParallelSelectionListPropsTypes {
-  dataList: ListDatumType[];
-  applyAction: (dataListId: ListDatumType["_id"][]) => void;
-  cancelAction: Function;
-  onSelectionChange?: (dataListId: ListDatumType["_id"][]) => void;
-  leftListTitle?: string;
-  rightListTitle?: string;
-  leftListApplyAllButtonText?: string;
-  rightListApplyAllButtonText?: string;
-  searchBarsVisible?: boolean;
-  applyButonText?: string;
-  cancelButtonText?: string;
-  preSelectedDatumsIds?: ListDatumType["_id"][];
-  listElementsHeight?: number;
-}
-
-export type ListDatumType = {
-  _id: string;
-  searchValue: string;
-  visibleDefaultName: string;
-  customComponent?: JSX.Element;
-};

package/dist/cjs/components/PopUp/PopUp.css

@@ -1,15 +0,0 @@
-.pop-up {
-  background-color: rgb(255, 255, 255);
-  border-color: rgb(235, 235, 235);
-  border-style: solid;
-  border-width: 0px 1px 1px;
-  box-shadow: rgb(0 0 0 / 15%) 0px 14px 36px 2px;
-  padding: 0px;
-  position: absolute;
-  overflow: auto;
-  box-sizing: border-box;
-}
-
-.pop-up.pop-up-hidden {
-  display: none;
-}

package/dist/cjs/components/PopUp/PopUp.js

@@ -1,50 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-require("./PopUp.css");
-//hooks
-const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
-const PopUp = ({ open = false, children, closeAction, outBoundClickClosesPopUp, aditionalInlineStyle = {}, aditionalClass, activationButtonRef, }) => {
-    //Refs
-    const popUpRef = (0, react_1.useRef)(null);
-    //Hooks
-    (0, useOutsideClick_1.default)(popUpRef, () => {
-        if (outBoundClickClosesPopUp) {
-            setOpenState(false);
-            if (closeAction)
-                closeAction();
-        }
-    }, activationButtonRef ? [activationButtonRef] : []);
-    //useState
-    const [openState, setOpenState] = (0, react_1.useState)(open);
-    return (react_1.default.createElement("div", { ref: popUpRef, className: "pop-up" +
-            ((closeAction && open) || (!closeAction && openState) ? "" : " pop-up-hidden") +
-            (aditionalClass ? " " + aditionalClass : ""), style: open ? aditionalInlineStyle : {} }, children));
-};
-exports.default = PopUp;

package/dist/cjs/components/PopUp/types.d.ts

@@ -1,9 +0,0 @@
-export interface PopUpPropsType {
-  children: JSX.Element | JSX.Element[];
-  open: boolean;
-  closeAction?: Function;
-  outBoundClickClosesPopUp?: boolean;
-  aditionalInlineStyle?: React.CSSProperties;
-  aditionalClass?: string;
-  activationButtonRef?: React.MutableRefObject<HTMLElement | null>;
-}

package/dist/cjs/components/ProgressBar/ProgressBar.css

@@ -1,39 +0,0 @@
-.progress-bar {
-  height: 40px;
-  width: 100%;
-  position: relative;
-  opacity: 0.9;
-  backdrop-filter: blur(10px);
-}
-
-.progress-bar .fillable-body {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  background-color: dimgray;
-  border-radius: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  overflow: hidden;
-}
-
-.progress-bar .fillable-body .filler {
-  height: 100%;
-  box-sizing: border-box;
-  transition: all 0.2s;
-  border-radius: 100px;
-}
-
-.progress-bar .fillable-body p {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  font-weight: 600;
-  color: white;
-}

package/dist/cjs/components/ProgressBar/ProgressBar.js

@@ -1,56 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-require("./ProgressBar.css");
-const ProgressBar = ({ totalSize, currentValue, color = "var(--secondary-color)", }) => {
-    var _a;
-    //useRef
-    const fillableBodyRef = (0, react_1.useRef)(null);
-    //useStates
-    const [currentPercentage, setCurrentPercentage] = (0, react_1.useState)(totalSize !== 0 ? currentValue / totalSize : 0);
-    const [barWidth, setBarWidth] = (0, react_1.useState)(0);
-    //useEffects
-    (0, react_1.useEffect)(() => {
-        if (totalSize !== 0) {
-            setCurrentPercentage(currentValue / totalSize);
-        }
-        else {
-            setCurrentPercentage(0);
-        }
-    }, [totalSize, currentValue]);
-    (0, react_1.useEffect)(() => {
-        if (fillableBodyRef.current !== null) {
-            setBarWidth(fillableBodyRef.current.clientWidth);
-        }
-    }, [(_a = fillableBodyRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight]);
-    return (react_1.default.createElement("div", { className: "progress-bar" },
-        react_1.default.createElement("div", { ref: fillableBodyRef, className: "fillable-body" },
-            react_1.default.createElement("div", { className: "filler", style: { width: barWidth * currentPercentage, backgroundColor: color } }),
-            react_1.default.createElement("p", null,
-                (currentPercentage * 100).toFixed(0),
-                "%"))));
-};
-exports.default = ProgressBar;

package/dist/cjs/components/ProgressBar/types.d.ts

@@ -1,7 +0,0 @@
-import { languageType } from "../../../assets/languages/types";
-
-export interface ProgressBarPropsType {
-  totalSize: number;
-  currentValue: number;
-  color?: string,
-}

package/dist/cjs/components/SearchBar/SearchBar.css

@@ -1,35 +0,0 @@
-.search-bar .div-search-bar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgb(185, 185, 185);
-  box-sizing: border-box;
-  margin: 2px 10px;
-  padding: 5px 0px;
-  border-radius: 6px;
-}
-
-.search-bar .div-search-bar input {
-  width: 100%;
-  border: none;
-}
-
-.search-bar .div-search-bar input:focus {
-  border: none;
-  outline: none;
-}
-
-.search-bar .div-search-bar svg {
-  width: 36px;
-  padding: 0px 10px;
-}
-
-.search-bar .div-search-bar .icono-search-bar-opciones {
-  cursor: pointer;
-  transition: all 0.5s;
-}
-
-.search-bar .div-search-bar .icono-search-bar-opciones.icono-search-bar-opciones-desactivado {
-  cursor: not-allowed;
-  color: rgb(184, 184, 184);
-}

package/dist/cjs/components/SearchBar/SearchBar.js

@@ -1,54 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-require("./SearchBar.css");
-//Icons
-const bs_1 = require("react-icons/bs");
-const SearchBar = ({ actionOnEnter = () => { }, actionOnAlteringText = () => { }, actionOnEmptyText = () => { }, optionsButtonVisible, actionOnClickOptionsButton = () => { }, placeholder = "", initialValue = "", disabled = false, }) => {
-    //Estados
-    const [searchValue, setSearchValue] = (0, react_1.useState)(initialValue);
-    return (react_1.default.createElement("form", { className: "search-bar", onSubmit: (e) => {
-            e.preventDefault();
-            let searchElement = e.target.elements.namedItem("search-bar-name");
-            if (searchElement !== null)
-                actionOnEnter(searchElement.value);
-        } },
-        react_1.default.createElement("div", { className: "div-search-bar" },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(bs_1.BsSearch, null)),
-            react_1.default.createElement("input", { name: "search-bar-name", type: "text", placeholder: placeholder, disabled: disabled, onChange: (e) => {
-                    setSearchValue(e.target.value);
-                    if (e.target.value)
-                        actionOnAlteringText();
-                    if (!e.target.value)
-                        actionOnEmptyText();
-                }, value: searchValue }),
-            optionsButtonVisible && (react_1.default.createElement("div", { className: disabled
-                    ? "icono-search-bar-opciones icono-search-bar-opciones-disabled"
-                    : "icono-search-bar-opciones", onClick: () => actionOnClickOptionsButton() },
-                react_1.default.createElement(bs_1.BsSliders, null))))));
-};
-exports.default = SearchBar;

package/dist/cjs/components/SearchBar/types.d.ts

@@ -1,10 +0,0 @@
-export interface SearchBarPropsType {
-  actionOnEnter?: function;
-  actionOnAlteringText?: function;
-  actionOnEmptyText?: function;
-  optionsButtonVisible: boolean;
-  actionOnClickOptionsButton?: function;
-  placeholder: string;
-  initialValue?: string;
-  disabled?: boolean;
-}

package/dist/cjs/components/SideBar/SideBar.css

@@ -1,53 +0,0 @@
-.side-bar {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  z-index: 2;
-  background-color: rgb(253, 253, 253);
-  box-shadow: 5px 0px 15px 0px rgb(206 206 206);
-  transition: all 0.5s ease-in-out;
-  animation: fade-in-side-bar 1s ease-in;
-}
-
-.side-bar .sidebar-close-button {
-  position: absolute;
-  top: 3px;
-  z-index: 2;
-  height: 30px;
-  width: 30px;
-  background-color: rgba(247, 247, 247, 0.7);
-  border-radius: 20px;
-  border: none;
-  outline: none;
-  transition: all 0.3s;
-  color: dimgray;
-  font-size: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.side-bar .sidebar-close-button:hover {
-  color: var(--primary-color);
-  background-color: rgba(236, 236, 236, 0.7);
-}
-
-.side-bar .sidebar-close-button svg.open{
-  transform: rotate(0deg);
-  transition: all 0.5s;
-}
-
-.side-bar .sidebar-close-button svg.close{
-  transform: rotate(180deg);
-  transition: all 0.5s;
-}
-
-@keyframes fade-in-side-bar {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}

package/dist/cjs/components/SideBar/SideBar.js

@@ -1,70 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-require("./SideBar.css");
-//Hooks
-const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
-const useResizeObserver_1 = __importDefault(require("../../hooks/useResizeObserver"));
-//Icons
-const bs_1 = require("react-icons/bs");
-/**
- * NOTE: Parent Node must have position: relative, to work correctly with the side bar
- */
-const SideBar = ({ side, open = false, children, closeAction, outBoundClickClosesSideBar, aditionalInlineStyle = {}, }) => {
-    //Refs
-    const sideBarRef = (0, react_1.useRef)(null);
-    //Hooks
-    const [elementWidth] = (0, useResizeObserver_1.default)(sideBarRef);
-    (0, useOutsideClick_1.default)(sideBarRef, () => {
-        if (outBoundClickClosesSideBar)
-            if (closeAction) {
-                closeAction();
-            }
-            else {
-                setOpenState(false);
-            }
-    });
-    //useState
-    const [openState, setOpenState] = (0, react_1.useState)(open);
-    return (react_1.default.createElement("div", { ref: sideBarRef, className: "side-bar", style: Object.assign({ [side === "left" ? "right" : "left"]: (closeAction && open) || (!closeAction && openState)
-                ? `calc(100% - ${elementWidth}px)`
-                : closeAction
-                    ? "100%"
-                    : `calc(100% - 30px)` }, aditionalInlineStyle) },
-        react_1.default.createElement("button", { style: side === "left" ? { right: 0 } : { left: 0 }, className: "sidebar-close-button", onClick: () => {
-                if (closeAction) {
-                    closeAction();
-                }
-                else {
-                    setOpenState(!openState);
-                }
-            } }, side === "left" ? (react_1.default.createElement(bs_1.BsChevronLeft, { className: (closeAction && open) || (!closeAction && openState) ? "open" : "close" })) : (react_1.default.createElement(bs_1.BsChevronRight, { className: (closeAction && open) || (!closeAction && openState) ? "open" : "close" }))),
-        children));
-};
-exports.default = SideBar;

package/dist/cjs/components/SideBar/types.d.ts

@@ -1,8 +0,0 @@
-export interface SideBarPropsType {
-  side: "left" | "right";
-  children: JSX.Element | JSX.Element[];
-  open: boolean;
-  closeAction?: Function;
-  outBoundClickClosesSideBar?: boolean;
-  aditionalInlineStyle?: React.CSSProperties;
-}

package/dist/cjs/components/Slider/Slider.css

@@ -1,51 +0,0 @@
-.slider {
-  display: flex;
-  align-items: center;
-}
-
-.slider .left-fill {
-  border: 2px solid rgb(216, 216, 216);
-  background-color: var(--secondary-color);
-}
-
-.slider .right-fill {
-  border: 2px solid rgb(216, 216, 216);
-  background-color: rgb(211, 211, 211);
-}
-
-.slider .sphere {
-  border-radius: 100%;
-  box-shadow: 0px 0px 20px 2px #a7a7a7;
-  background-color: rgb(255, 255, 255);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: grab;
-  z-index: 2;
-}
-
-.slider .sphere p {
-  margin: 0;
-  font-size: 12px;
-  font-weight: 600;
-  color: #757575;
-  width: 25%;
-}
-
-.slider .sphere input {
-  width: 70%;
-  border: none;
-  background-color: transparent;
-  text-align: right;
-  font-size: 12px;
-  font-weight: 600;
-  color: #757575;
-}
-
-.slider .sphere input::-webkit-inner-spin-button {
-  display: none;
-}
-
-.slider .sphere input:focus {
-  outline: none;
-}