josenanodev-react-components-library 0.0.12 → 0.0.15

package/dist/cjs/components/Multicalendar/subcomponents/individuals/ListElement/ListElement.js

@@ -1,14 +1,14 @@
-"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"));
-require("./ListElement.css");
-const ListElement = ({ listElementId, ReactListElementChildren, height, }) => {
-    return (react_1.default.createElement("div", { className: "list-element", style: {
-            height: height,
-        } },
-        react_1.default.createElement(ReactListElementChildren, { listElementId: listElementId })));
-};
-exports.default = react_1.default.memo(ListElement);
+"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"));
+require("./ListElement.css");
+const ListElement = ({ listElementId, ReactListElementChildren, height, }) => {
+    return (react_1.default.createElement("div", { className: "list-element", style: {
+            height: height,
+        } },
+        react_1.default.createElement(ReactListElementChildren, { listElementId: listElementId })));
+};
+exports.default = react_1.default.memo(ListElement);

package/dist/cjs/components/Multicalendar/subcomponents/individuals/ListElement/types.d.ts

@@ -1,7 +1,7 @@
-import { ReactListElementChildrenType } from "../../../types";
-
-export interface ListElementPropsType {
-  listElementId: string | number;
-  ReactListElementChildren: ReactListElementChildrenType;
-  height: number;
-}
+import { ReactListElementChildrenType } from "../../../types";
+
+export interface ListElementPropsType {
+  listElementId: string | number;
+  ReactListElementChildren: ReactListElementChildrenType;
+  height: number;
+}

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

@@ -1,45 +1,45 @@
-import { languageType } from "../../languages/types";
-
-export interface MulticalendarPropsType {
-  multicalendarId: string;
-  ReactCellChildren: ReactCellChildrenType;
-  ReactListElementChildren: ReactListElementChildrenType;
-  listElementsIdsArray: string[] | number[];
-  language: languageType;
-  pastDatesVisible?: boolean
-  cellsWidth?: number;
-  cellsHeight?: number;
-  verticalAxisWidth?: number;
-  horizontalAxisHeight?: number;
-  pastDaysInitialQuantity?: number;
-  futureDaysInitialQuantity?: number;
-  chunkRenderX?: number;
-  chunkRenderY?: number;
-  draggingOverDateCells?: boolean;
-  dynamicDaysQuantity?: boolean;
-  waitTimeForCalls?: number;
-  callsOnScrollingMoves?: Function;
-  callsOnScrollingStops?: Function;
-  aditionalControlsComponents?: JSX.Element | JSX.Element[]
-  upperLeftComponent?: JSX.Element
-}
-
-export interface RenderCoordinatesType {
-  x: number;
-  y: number;
-}
-
-export type ReactCellChildrenType = React.ElementType<CellChildrenPropsType>;
-
-export type ReactListElementChildrenType =
-  React.ElementType<ListElementChildrenPropsType>;
-
-export type CellChildrenPropsType = { [key: string]: any } & {
-  /**Date in SQL format, i.e. 1993-03-29 */
-  date: string;
-  listElementId: string | number;
-};
-
-export type ListElementChildrenPropsType = { [key: string]: any } & {
-  listElementId: string | number;
-};
+import { languageType } from "../../languages/types";
+
+export interface MulticalendarPropsType {
+  multicalendarId: string;
+  ReactCellChildren: ReactCellChildrenType;
+  ReactListElementChildren: ReactListElementChildrenType;
+  listElementsIdsArray: string[] | number[];
+  language: languageType;
+  pastDatesVisible?: boolean
+  cellsWidth?: number;
+  cellsHeight?: number;
+  verticalAxisWidth?: number;
+  horizontalAxisHeight?: number;
+  pastDaysInitialQuantity?: number;
+  futureDaysInitialQuantity?: number;
+  chunkRenderX?: number;
+  chunkRenderY?: number;
+  draggingOverDateCells?: boolean;
+  dynamicDaysQuantity?: boolean;
+  waitTimeForCalls?: number;
+  callsOnScrollingMoves?: Function;
+  callsOnScrollingStops?: Function;
+  aditionalControlsComponents?: JSX.Element | JSX.Element[]
+  upperLeftComponent?: JSX.Element
+}
+
+export interface RenderCoordinatesType {
+  x: number;
+  y: number;
+}
+
+export type ReactCellChildrenType = React.ElementType<CellChildrenPropsType>;
+
+export type ReactListElementChildrenType =
+  React.ElementType<ListElementChildrenPropsType>;
+
+export type CellChildrenPropsType = { [key: string]: any } & {
+  /**Date in SQL format, i.e. 1993-03-29 */
+  date: string;
+  listElementId: string | number;
+};
+
+export type ListElementChildrenPropsType = { [key: string]: any } & {
+  listElementId: string | number;
+};

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

@@ -1,15 +1,15 @@
-.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: relative;
-  overflow: auto;
-  box-sizing: border-box;
-}
-
-.pop-up.pop-up-hidden {
-  display: none;
-}
+.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: relative;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.pop-up.pop-up-hidden {
+  display: none;
+}

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import "./PopUp.css";
-import { PopUpProps } from "./types";
-declare const PopUp: ({ open, children, closeAction, outBoundClickClosesPopUp, aditionalInlineStyle, aditionalClass, }: PopUpProps) => JSX.Element;
-export default PopUp;
+/// <reference types="react" />
+import "./PopUp.css";
+import { PopUpProps } from "./types";
+declare const PopUp: ({ open, children, closeAction, outBoundClickClosesPopUp, aditionalInlineStyle, aditionalClass, }: PopUpProps) => JSX.Element;
+export default PopUp;

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

@@ -1,50 +1,50 @@
-"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"));
-const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
-require("./PopUp.css");
-const PopUp = ({ open = false, children, closeAction, outBoundClickClosesPopUp, aditionalInlineStyle = {}, aditionalClass, }) => {
-    //Refs
-    const popUpRef = (0, react_1.useRef)(null);
-    //Hooks
-    (0, useOutsideClick_1.default)(popUpRef, () => {
-        if (outBoundClickClosesPopUp) {
-            setOpenState(false);
-            if (closeAction)
-                closeAction();
-        }
-    });
-    //Estados
-    const [openState, setOpenState] = (0, react_1.useState)(open);
-    //useState
-    return (react_1.default.createElement("div", { ref: popUpRef, className: "pop-up" +
-            ((closeAction && open) || (!closeAction && openState) ? "" : " pop-up-hidden") +
-            (aditionalClass ? " " + aditionalClass : ""), style: aditionalInlineStyle }, children));
-};
-exports.default = PopUp;
+"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"));
+const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
+require("./PopUp.css");
+const PopUp = ({ open = false, children, closeAction, outBoundClickClosesPopUp, aditionalInlineStyle = {}, aditionalClass, }) => {
+    //Refs
+    const popUpRef = (0, react_1.useRef)(null);
+    //Hooks
+    (0, useOutsideClick_1.default)(popUpRef, () => {
+        if (outBoundClickClosesPopUp) {
+            setOpenState(false);
+            if (closeAction)
+                closeAction();
+        }
+    });
+    //Estados
+    const [openState, setOpenState] = (0, react_1.useState)(open);
+    //useState
+    return (react_1.default.createElement("div", { ref: popUpRef, className: "pop-up" +
+            ((closeAction && open) || (!closeAction && openState) ? "" : " pop-up-hidden") +
+            (aditionalClass ? " " + aditionalClass : ""), style: aditionalInlineStyle }, children));
+};
+exports.default = PopUp;

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

@@ -1,8 +1,8 @@
-export interface PopUpProps {
-  children: JSX.Element | JSX.Element[];
-  open: boolean;
-  closeAction?: Function;
-  outBoundClickClosesPopUp?: boolean;
-  aditionalInlineStyle?: React.CSSProperties;
-  aditionalClass: string;
-}
+export interface PopUpProps {
+  children: JSX.Element | JSX.Element[];
+  open: boolean;
+  closeAction?: Function;
+  outBoundClickClosesPopUp?: boolean;
+  aditionalInlineStyle?: React.CSSProperties;
+  aditionalClass: string;
+}

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

@@ -1,35 +1,35 @@
-.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);
-}
+.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.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import "./SearchBar.css";
-import { SearchBarPropsType } from "./types";
-declare const SearchBar: ({ actionOnEnter, actionOnAlteringText, actionOnEmptyText, optionsButtonVisible, actionOnClickOptionsButton, placeholder, initialValue, disabled, }: SearchBarPropsType) => JSX.Element;
-export default SearchBar;
+/// <reference types="react" />
+import "./SearchBar.css";
+import { SearchBarPropsType } from "./types";
+declare const SearchBar: ({ actionOnEnter, actionOnAlteringText, actionOnEmptyText, optionsButtonVisible, actionOnClickOptionsButton, placeholder, initialValue, disabled, }: SearchBarPropsType) => JSX.Element;
+export default SearchBar;

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

@@ -1,67 +1,67 @@
-"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);
-    const [cachedSearchValue, setCachedSearchValue] = (0, react_1.useState)(initialValue);
-    //useEffect
-    (0, react_1.useEffect)(() => {
-        if (searchValue !== cachedSearchValue) {
-            if (searchValue !== "") {
-                actionOnAlteringText(searchValue);
-            }
-            else if (searchValue === "") {
-                actionOnEmptyText();
-            }
-            setCachedSearchValue(searchValue);
-        }
-    }, [searchValue, cachedSearchValue, actionOnAlteringText, actionOnEmptyText]);
-    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;
+"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);
+    const [cachedSearchValue, setCachedSearchValue] = (0, react_1.useState)(initialValue);
+    //useEffect
+    (0, react_1.useEffect)(() => {
+        if (searchValue !== cachedSearchValue) {
+            if (searchValue !== "") {
+                actionOnAlteringText(searchValue);
+            }
+            else if (searchValue === "") {
+                actionOnEmptyText();
+            }
+            setCachedSearchValue(searchValue);
+        }
+    }, [searchValue, cachedSearchValue, actionOnAlteringText, actionOnEmptyText]);
+    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 +1,10 @@
-export interface SearchBarPropsType {
-  actionOnEnter?: function;
-  actionOnAlteringText?: function;
-  actionOnEmptyText?: function;
-  optionsButtonVisible: boolean;
-  actionOnClickOptionsButton?: function;
-  placeholder: string;
-  initialValue?: string;
-  disabled?: boolean;
-}
+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,50 +1,50 @@
-.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: 0;
-  height: 30px;
-  width: 30px;
-  background-color: transparent;
-  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);
-}
-
-.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;
-  }
-}
+.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: 0;
+  height: 30px;
+  width: 30px;
+  background-color: transparent;
+  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);
+}
+
+.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.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-import "./SideBar.css";
-import { SideBarPropsType } from "./types";
-/**
- * NOTE: Parent Node must have position: relative, to work correctly with the side bar
- */
-declare const SideBar: ({ side, open, children, closeAction, outBoundClickClosesSideBar, aditionalInlineStyle, }: SideBarPropsType) => JSX.Element;
-export default SideBar;
+/// <reference types="react" />
+import "./SideBar.css";
+import { SideBarPropsType } from "./types";
+/**
+ * NOTE: Parent Node must have position: relative, to work correctly with the side bar
+ */
+declare const SideBar: ({ side, open, children, closeAction, outBoundClickClosesSideBar, aditionalInlineStyle, }: SideBarPropsType) => JSX.Element;
+export default SideBar;