@zauru-sdk/components 1.0.11

package/.eslintrc.cjs

@@ -0,0 +1,83 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.js"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.0.11](https://github.com/intuitiva/zauru-typescript-sdk/compare/v1.0.10...v1.0.11) (2024-03-18)
+
+**Note:** Version bump only for package @zauru-sdk/components

package/LICENCE.md

@@ -0,0 +1,11 @@
+# Released under MIT License
+
+Copyright (c) 2013 Mark Otto.
+
+Copyright (c) 2017 Andrew Fong.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/Alerts/Alert.d.ts

@@ -0,0 +1,9 @@
+type AlertType = "success" | "error" | "info" | "warning";
+export type AlertProps = {
+    type: AlertType;
+    title: string;
+    description: string;
+    onClose?: () => void;
+};
+export declare const showAlert: (alertProps: AlertProps) => void;
+export {};

package/dist/Alerts/Alert.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import { ExitSvg } from "../Icons/Icons";
+import { AnimatePresence, motion } from "framer-motion";
+const Alert = ({ type, title, description, onClose }) => {
+    const [, setLifetime] = useState(4000);
+    const [progress, setProgress] = useState(0);
+    const intervalRef = useRef(null);
+    const getColor = () => {
+        switch (type) {
+            case "success":
+                return "bg-green-100 text-green-800";
+            case "error":
+                return "bg-red-100 text-red-800";
+            case "info":
+                return "bg-blue-100 text-blue-800";
+            case "warning":
+                return "bg-yellow-100 text-yellow-800";
+            default:
+                return "bg-gray-100 text-gray-800";
+        }
+    };
+    useEffect(() => {
+        const startTimer = () => {
+            intervalRef.current = setInterval(() => {
+                setLifetime((lifetime) => {
+                    if (lifetime <= 0) {
+                        onClose && onClose();
+                        clearInterval(intervalRef.current);
+                        return 0;
+                    }
+                    else {
+                        setProgress((4000 - lifetime) / 4000);
+                        return lifetime - 50;
+                    }
+                });
+            }, 50);
+        };
+        const pauseTimer = () => {
+            clearInterval(intervalRef.current);
+        };
+        startTimer();
+        return () => {
+            pauseTimer();
+        };
+    }, [onClose]);
+    return (_jsxs(motion.div, { initial: { y: -50, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: -50, opacity: 0 }, className: `fixed top-0 right-0 w-80 mt-10 mr-10 rounded-md shadow-lg ${getColor()} p-4 transition-transform duration-300`, style: {
+            zIndex: 1000,
+            transform: `translateY(calc(var(--alert-offset, 0)))`,
+        }, onMouseEnter: () => clearInterval(intervalRef.current), onMouseLeave: () => {
+            intervalRef.current = setInterval(() => {
+                setLifetime((lifetime) => {
+                    if (lifetime <= 0) {
+                        onClose && onClose();
+                        clearInterval(intervalRef.current);
+                        return 0;
+                    }
+                    else {
+                        setProgress((4000 - lifetime) / 4000);
+                        return lifetime - 50;
+                    }
+                });
+            }, 50);
+        }, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "font-semibold", children: title }), _jsx("button", { className: "text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500 transition duration-150 ease-in-out", onClick: () => {
+                            setLifetime(0);
+                            onClose && onClose();
+                        }, children: _jsx(ExitSvg, {}) })] }), _jsx("div", { className: "mt-2", children: _jsx("p", { className: "text-sm overflow-wrap break-words", children: description }) }), _jsx("div", { className: "relative h-1 mt-4 bg-gray-200 rounded", children: _jsx("div", { className: `absolute left-0 top-0 h-full ${getColor()} rounded`, style: { width: `${progress * 100}%` } }) })] }));
+};
+let activeAlerts = [];
+export const showAlert = (alertProps) => {
+    if (typeof document === "undefined") {
+        return;
+    }
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const onClose = () => {
+        root.unmount();
+        container.remove();
+        activeAlerts = activeAlerts.filter((alert) => alert !== container);
+        updateAlertOffsets();
+    };
+    const asyncOnClose = () => {
+        setTimeout(() => {
+            onClose();
+        }, 0);
+    };
+    activeAlerts.push(container);
+    updateAlertOffsets();
+    const root = createRoot(container);
+    root.render(_jsx(AnimatePresence, { children: _jsx(Alert, { ...alertProps, onClose: asyncOnClose }) }));
+};
+const updateAlertOffsets = () => {
+    activeAlerts.forEach((alertContainer, index) => {
+        alertContainer.style.setProperty("--alert-offset", `${index * 100}px`);
+    });
+};

package/dist/Alerts/ErrorBoundaryAlert/ErrorBoundaryAlert.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    title: string;
+    description: string;
+};
+export declare const ErrorBoundaryAlert: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Alerts/ErrorBoundaryAlert/ErrorBoundaryAlert.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ErrorBoundaryAlert = (props) => {
+    const { title, description } = props;
+    return (_jsx("div", { className: "rounded-full top-20 mx-auto p-3", children: _jsx("div", { className: "p-4 text-red-900 bg-red-100 border border-red-200 rounded-md", children: _jsxs("div", { className: "flex justify-between flex-wrap", children: [_jsxs("div", { className: "w-0 flex-1 flex", children: [_jsx("div", { className: "mr-3 pt-1", children: _jsx("svg", { width: "26", height: "26", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: _jsx("path", { d: "M13.6086 3.247l8.1916 15.8c.0999.2.1998.5.1998.8 0 1-.7992 1.8-1.7982 1.8H3.7188c-.2997 0-.4995-.1-.7992-.2-.7992-.5-1.1988-1.5-.6993-2.4 5.3067-10.1184 8.0706-15.385 8.2915-15.8.3314-.6222.8681-.8886 1.4817-.897.6135-.008 1.273.2807 1.6151.897zM12 18.95c.718 0 1.3-.582 1.3-1.3 0-.718-.582-1.3-1.3-1.3-.718 0-1.3.582-1.3 1.3 0 .718.582 1.3 1.3 1.3zm-.8895-10.203v5.4c0 .5.4.9.9.9s.9-.4.9-.9v-5.3c0-.5-.4-.9-.9-.9s-.9.4-.9.8z" }) }) }), _jsxs("div", { children: [_jsx("h4", { className: "text-md leading-6 font-medium", children: title?.toString() }), _jsx("p", { className: "text-sm", children: description?.toString() })] })] }), _jsx("div", { children: _jsx("button", { type: "button", className: "rounded-md focus:outline-none focus:ring-2 focus:ring-red-500", children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: _jsx("path", { d: "M17.6555 6.3331a.9.9 0 0 1 .001 1.2728l-4.1032 4.1085a.4.4 0 0 0 0 .5653l4.1031 4.1088a.9002.9002 0 0 1 .0797 1.1807l-.0806.092a.9.9 0 0 1-1.2728-.0009l-4.1006-4.1068a.4.4 0 0 0-.5662 0l-4.099 4.1068a.9.9 0 1 1-1.2738-1.2718l4.1027-4.1089a.4.4 0 0 0 0-.5652L6.343 7.6059a.9002.9002 0 0 1-.0796-1.1807l.0806-.092a.9.9 0 0 1 1.2728.0009l4.099 4.1055a.4.4 0 0 0 .5662 0l4.1006-4.1055a.9.9 0 0 1 1.2728-.001z" }) }) }) })] }) }) }));
+};

package/dist/Alerts/StaticAlert.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    className?: string;
+    title: string;
+    description: any;
+    showCloseButton?: boolean;
+    onClose?: () => void;
+    type?: "success" | "info";
+    loading?: boolean;
+};
+export declare const StaticAlert: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Alerts/StaticAlert.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getConfig = (type) => {
+    switch (type) {
+        case "info":
+            return {
+                containerClassName: "text-blue-900 bg-blue-100 border border-blue-200 rounded-md",
+                buttonClassName: "rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                path: (_jsx("path", { d: "M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2" })),
+            };
+        case "success":
+            return {
+                containerClassName: "text-green-900 bg-green-100 border border-green-200 rounded-md",
+                buttonClassName: "rounded-md focus:outline-none focus:ring-2 focus:ring-green-500",
+                path: (_jsx("path", { d: "M8.445 12.6675A.9.9 0 0 0 7.1424 13.91l2.5726 2.7448c.3679.3856.9884.3689 1.335-.036l5.591-7.0366a.9.9 0 0 0-1.3674-1.1705l-4.6548 5.9132a.4.4 0 0 1-.607.0252l-1.567-1.6826zM1.9995 12c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 10-10 10-10-4.5-10-10z" })),
+            };
+        default:
+            return {
+                containerClassName: "text-blue-900 bg-blue-100 border border-blue-200 rounded-md",
+                buttonClassName: "rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+                path: (_jsx("path", { d: "M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2" })),
+            };
+    }
+};
+export const StaticAlert = (props) => {
+    const { className, title, description, onClose, type = "info", loading = false, } = props;
+    const config = getConfig(type);
+    return (_jsx("div", { className: `${className} ${config.containerClassName} ${loading ? " hidden" : ""}`, children: _jsxs("div", { className: "flex justify-between flex-wrap", children: [_jsxs("div", { className: "w-0 flex-1 flex", children: [_jsx("div", { className: "mr-3 pt-1", children: _jsx("svg", { width: "26", height: "26", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: config.path }) }), _jsxs("div", { children: [_jsx("h4", { className: "text-md leading-6 font-medium", children: title }), _jsx("div", { className: "text-sm", children: description })] })] }), onClose && (_jsx("div", { children: _jsx("button", { type: "button", className: `${config.buttonClassName}`, onClick: onClose, children: _jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: _jsx("path", { d: "M17.6555 6.3331a.9.9 0 0 1 .001 1.2728l-4.1032 4.1085a.4.4 0 0 0 0 .5653l4.1031 4.1088a.9002.9002 0 0 1 .0797 1.1807l-.0806.092a.9.9 0 0 1-1.2728-.0009l-4.1006-4.1068a.4.4 0 0 0-.5662 0l-4.099 4.1068a.9.9 0 1 1-1.2738-1.2718l4.1027-4.1089a.4.4 0 0 0 0-.5652L6.343 7.6059a.9002.9002 0 0 1-.0796-1.1807l.0806-.092a.9.9 0 0 1 1.2728.0009l4.099 4.1055a.4.4 0 0 0 .5662 0l4.1006-4.1055a.9.9 0 0 1 1.2728-.001z" }) }) }) }))] }) }));
+};

package/dist/Icons/Icons.d.ts

@@ -0,0 +1,47 @@
+import type { NavBarStateProps } from "../NavBar/NavBar.types";
+export declare const applicationDropDownIconColor = "text-slate-500";
+export declare const MenuAlt4Svg: (props: NavBarStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ExitSvg: () => import("react/jsx-runtime").JSX.Element;
+export declare const EyeSvg: () => import("react/jsx-runtime").JSX.Element;
+export declare const PencilSvg: () => import("react/jsx-runtime").JSX.Element;
+export declare const TrashSvg: () => import("react/jsx-runtime").JSX.Element;
+export declare const PdfDownloadSvg: () => import("react/jsx-runtime").JSX.Element;
+export declare const SearchSVG: () => import("react/jsx-runtime").JSX.Element;
+export declare const PlusSvg: () => import("react/jsx-runtime").JSX.Element;
+export declare const SpinnerSvg: () => import("react/jsx-runtime").JSX.Element;
+export declare const PlusSvgIcon: () => void;
+export declare const WhitePencilSvg: () => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonTrashSvg: () => import("react/jsx-runtime").JSX.Element;
+export declare const PrinterButtonIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const CloseSvgIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ChangeSvgIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ReturnButtonSvgIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const SpreadsheetSvgIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ArrowToRigth: () => import("react/jsx-runtime").JSX.Element;
+export declare const DropDownArrowSvgIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const OpcionButtonSvgIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const NewButtonSvgIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ReportButtonIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const NewNavbarButtonIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const UserDropdownIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ReportDropDownIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ChangeDropDownSvgIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const LogoutDropDownSvgIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const NewDropdownSvgIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const BigChecklistIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingBarSpinnerSvg: () => import("react/jsx-runtime").JSX.Element;
+export declare const IdeaIconSVG: () => import("react/jsx-runtime").JSX.Element;
+export declare const CalendarIconSVG: () => import("react/jsx-runtime").JSX.Element;
+export declare const ClockIconSVG: () => import("react/jsx-runtime").JSX.Element;
+export declare const FinishLabRemisionSVG: () => import("react/jsx-runtime").JSX.Element;
+export declare const SendMessageIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const CheckIconSVG: () => import("react/jsx-runtime").JSX.Element;
+export declare const PrintIconSVG: () => import("react/jsx-runtime").JSX.Element;
+export declare const DownloadIconSVG: () => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingIconSVG: () => import("react/jsx-runtime").JSX.Element;
+export declare const AttachmentIconSVG: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomIconFromImage: ({ imageName, height, width, }: {
+    imageName: string;
+    width?: number | undefined;
+    height?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/Icons/Icons.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { greenColorIcon, progressBarLightTextColor, progressBarSpinnerFillColor, } from "./StylesConstants";
+export const applicationDropDownIconColor = "text-slate-500";
+export const MenuAlt4Svg = (props) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `transition duration-100 ease h-8 w-8 ${props.NavBarOpen ? "transform rotate-90" : ""}`, viewBox: "0 0 20 20", fill: "white", children: _jsx("path", { fillRule: "evenodd", d: "M3 7a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 13a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z", clipRule: "evenodd" }) }));
+export const ExitSvg = () => (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: _jsx("path", { d: "M17.6555 6.3331a.9.9 0 0 1 .001 1.2728l-4.1032 4.1085a.4.4 0 0 0 0 .5653l4.1031 4.1088a.9002.9002 0 0 1 .0797 1.1807l-.0806.092a.9.9 0 0 1-1.2728-.0009l-4.1006-4.1068a.4.4 0 0 0-.5662 0l-4.099 4.1068a.9.9 0 1 1-1.2738-1.2718l4.1027-4.1089a.4.4 0 0 0 0-.5652L6.343 7.6059a.9002.9002 0 0 1-.0796-1.1807l.0806-.092a.9.9 0 0 1 1.2728.0009l4.099 4.1055a.4.4 0 0 0 .5662 0l4.1006-4.1055a.9.9 0 0 1 1.2728-.001z" }) }));
+export const EyeSvg = () => (_jsxs("svg", { className: "h-6 w-6 text-blue-900 mt-2", width: "24", height: "24", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("circle", { cx: "12", cy: "12", r: "2" }), _jsx("path", { d: "M2 12l1.5 2a11 11 0 0 0 17 0l1.5 -2" }), _jsx("path", { d: "M2 12l1.5 -2a11 11 0 0 1 17 0l1.5 2" })] }));
+export const PencilSvg = () => (_jsxs("svg", { className: "h-6 w-6 text-blue-900", width: "24", height: "24", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4" }), _jsx("line", { x1: "13.5", y1: "6.5", x2: "17.5", y2: "10.5" })] }));
+export const TrashSvg = () => (_jsxs("svg", { className: "h-6 w-6 text-blue-900", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "3 6 5 6 21 6" }), _jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }), _jsx("line", { x1: "10", y1: "11", x2: "10", y2: "17" }), _jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })] }));
+export const PdfDownloadSvg = () => (_jsx("svg", { className: "h-6 w-6 text-blue-900", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M14 2v7h3l-4 4-4-4h3V2" }) }));
+export const SearchSVG = () => (_jsxs("svg", { className: "h-4 w-4 text-blue-900", width: "24", height: "24", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [" ", _jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("circle", { cx: "10", cy: "10", r: "7" }), _jsx("line", { x1: "21", y1: "21", x2: "15", y2: "15" })] }));
+export const PlusSvg = () => (_jsxs("svg", { className: "h-6 w-6 text-blue-900", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), _jsx("line", { x1: "12", y1: "8", x2: "12", y2: "16" }), _jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12" })] }));
+export const SpinnerSvg = () => (_jsxs("svg", { role: "status", className: "inline w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), _jsx("path", { d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" })] }));
+export const PlusSvgIcon = () => {
+    _jsxs("svg", { className: "h-8 w-8 text-indigo-800", width: "24", height: "24", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] });
+};
+// =============================|  Button Icons | ==============================================
+export const WhitePencilSvg = () => (_jsxs("svg", { className: "h-6 w-6 text-white-900 inline mr-1 pb-1", width: "24", height: "24", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4" }), _jsx("line", { x1: "13.5", y1: "6.5", x2: "17.5", y2: "10.5" })] }));
+export const ButtonTrashSvg = () => (_jsxs("svg", { className: "h-6 w-6 text-white-900 inline mr-1 pb-1", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "3 6 5 6 21 6" }), _jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }), _jsx("line", { x1: "10", y1: "11", x2: "10", y2: "17" }), _jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })] }));
+export const PrinterButtonIcon = () => {
+    return (_jsxs("svg", { className: "h-6 w-6 text-white-900 inline mr-1 pb-1", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "6 9 6 2 18 2 18 9" }), _jsx("path", { d: "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" }), _jsx("rect", { x: "6", y: "14", width: "12", height: "8" })] }));
+};
+export const CloseSvgIcon = () => {
+    return (_jsx("svg", { className: "h-6 w-6 text-grey-800", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) }));
+};
+export const ChangeSvgIcon = () => {
+    return (_jsxs("svg", { className: "h-5 w-5 mr-1 pb-1 text-white-500 inline", width: "24", height: "24", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("circle", { cx: "5", cy: "18", r: "2" }), _jsx("circle", { cx: "19", cy: "6", r: "2" }), _jsx("path", { d: "M19 8v5a5 5 0 0 1 -5 5h-3l3 -3m0 6l-3 -3" }), _jsx("path", { d: "M5 16v-5a5 5 0 0 1 5 -5h3l-3 -3m0 6l3 -3" })] }));
+};
+export const ReturnButtonSvgIcon = () => {
+    return (_jsxs("svg", { className: "h-6 w-6 text-white-500 mr-1 pb-1 inline", width: "24", height: "24", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M15 11l4 4l-4 4m4 -4h-11a4 4 0 0 1 0 -8h1" })] }));
+};
+export const SpreadsheetSvgIcon = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 text-white-500 inline mr-1", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }));
+};
+export const ArrowToRigth = () => {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 50 50", width: "25", height: "50", children: [_jsx("line", { x1: "10", y1: "25", x2: "40", y2: "25", stroke: "black", "stroke-width": "2" }), _jsx("polygon", { points: "40,25 30,35 30,15", fill: "black" })] }));
+};
+export const DropDownArrowSvgIcon = () => {
+    return (_jsx("svg", { className: "w-5 h-5 mx-1", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12 15.713L18.01 9.70299L16.597 8.28799L12 12.888L7.40399 8.28799L5.98999 9.70199L12 15.713Z", fill: "currentColor" }) }));
+};
+export const OpcionButtonSvgIcon = () => {
+    return (_jsxs("svg", { className: "h-6 w-6 text-white-500 inline", width: "24", height: "24", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }));
+};
+export const NewButtonSvgIcon = () => {
+    return (_jsxs("svg", { className: "h-5 w-5 text-white-500 inline mr-1", width: "24", height: "24", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }));
+};
+export const ReportButtonIcon = () => {
+    return (_jsxs("svg", { className: "h-5 w-5 text-white-500 inline mx-1", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14 2 14 8 20 8" }), _jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }), _jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }), _jsx("polyline", { points: "10 9 9 9 8 9" })] }));
+};
+// =============================|  Nav Bar Icons | ==============================================
+export const NewNavbarButtonIcon = () => {
+    return (_jsxs("svg", { className: `h-5 w-5 text-white-500 inline pb-1`, width: "24", height: "24", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }));
+};
+// =============================|  Nav Bar dropdown Icons | ==============================================
+export const UserDropdownIcon = () => {
+    return (_jsxs("svg", { className: `h-8 w-8 mx-1 ${applicationDropDownIconColor}`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }), _jsx("circle", { cx: "12", cy: "7", r: "4" })] }));
+};
+export const ReportDropDownIcon = () => {
+    return (_jsxs("svg", { className: `h-5 w-5 ${applicationDropDownIconColor} inline mr-1`, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14 2 14 8 20 8" }), _jsx("line", { x1: "16", y1: "13", x2: "8", y2: "13" }), _jsx("line", { x1: "16", y1: "17", x2: "8", y2: "17" }), _jsx("polyline", { points: "10 9 9 9 8 9" })] }));
+};
+export const ChangeDropDownSvgIcon = () => {
+    return (_jsxs("svg", { className: `h-5 w-5 ${applicationDropDownIconColor} inline mr-1`, width: "24", height: "24", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("circle", { cx: "5", cy: "18", r: "2" }), _jsx("circle", { cx: "19", cy: "6", r: "2" }), _jsx("path", { d: "M19 8v5a5 5 0 0 1 -5 5h-3l3 -3m0 6l-3 -3" }), _jsx("path", { d: "M5 16v-5a5 5 0 0 1 5 -5h3l-3 -3m0 6l3 -3" })] }));
+};
+export const LogoutDropDownSvgIcon = () => {
+    return (_jsxs("svg", { className: `h-5 w-5 mr-1 ${applicationDropDownIconColor} inline mr-1`, width: "24", height: "24", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" }), _jsx("path", { d: "M7 12h14l-3 -3m0 6l3 -3" })] }));
+};
+export const NewDropdownSvgIcon = () => {
+    return (_jsxs("svg", { className: `h-5 w-5 mr-1 ${applicationDropDownIconColor} inline mr-1`, width: "24", height: "24", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] }));
+};
+// =============================| Info Page Icons | ==============================================
+export const BigChecklistIcon = () => {
+    return (_jsxs("svg", { className: `h-32 w-32 ${greenColorIcon}`, width: "24", height: "24", viewBox: "0 0 24 24", strokeWidth: "2", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z" }), _jsx("path", { d: "M3.5 5.5l1.5 1.5l2.5 -2.5" }), _jsx("path", { d: "M3.5 11.5l1.5 1.5l2.5 -2.5" }), _jsx("path", { d: "M3.5 17.5l1.5 1.5l2.5 -2.5" }), _jsx("line", { x1: "11", y1: "6", x2: "20", y2: "6" }), _jsx("line", { x1: "11", y1: "12", x2: "20", y2: "12" }), _jsx("line", { x1: "11", y1: "18", x2: "20", y2: "18" })] }));
+};
+// =============================| label Icons | ==============================================
+export const LoadingBarSpinnerSvg = () => (_jsxs("svg", { role: "status", className: `inline w-3 h-3 mr-1 mb-0.5 ${progressBarLightTextColor} animate-spin dark:text-gray-600 ${progressBarSpinnerFillColor} dark:fill-gray-300`, viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), _jsx("path", { d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" })] }));
+export const IdeaIconSVG = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: "32px", height: "32px", children: _jsx("path", { d: "M 6.8125 2.40625 L 5.40625 3.8125 L 7.5 5.90625 L 8.90625 4.5 Z M 25.1875 2.40625 L 23.09375 4.5 L 24.5 5.90625 L 26.59375 3.8125 Z M 16 3.03125 C 15.671875 3.035156 15.335938 3.054688 15 3.09375 C 14.988281 3.09375 14.980469 3.09375 14.96875 3.09375 C 10.914063 3.558594 7.6875 6.835938 7.125 10.875 C 6.675781 14.125 8.015625 17.070313 10.25 18.96875 C 11.207031 19.789063 11.796875 20.882813 12 22 L 12 28 L 14.28125 28 C 14.628906 28.597656 15.261719 29 16 29 C 16.738281 29 17.371094 28.597656 17.71875 28 L 20 28 L 20 24 L 20.09375 24 L 20.09375 22.8125 C 20.09375 21.347656 20.855469 19.867188 22.09375 18.71875 C 23.75 17.0625 25 14.707031 25 12 C 25 7.058594 20.933594 2.984375 16 3.03125 Z M 16 5.03125 C 19.863281 4.976563 23 8.140625 23 12 C 23 14.09375 22.03125 15.9375 20.6875 17.28125 L 20.71875 17.3125 C 19.375 18.566406 18.515625 20.207031 18.28125 22 L 13.90625 22 C 13.6875 20.285156 12.949219 18.628906 11.5625 17.4375 C 9.796875 15.933594 8.742188 13.675781 9.09375 11.125 C 9.53125 7.972656 12.085938 5.441406 15.21875 5.09375 C 15.480469 5.0625 15.742188 5.035156 16 5.03125 Z M 2 12 L 2 14 L 5 14 L 5 12 Z M 27 12 L 27 14 L 30 14 L 30 12 Z M 7.5 20.09375 L 5.40625 22.1875 L 6.8125 23.59375 L 8.90625 21.5 Z M 24.5 20.09375 L 23.09375 21.5 L 25.1875 23.59375 L 26.59375 22.1875 Z M 14 24 L 18 24 L 18 26 L 14 26 Z" }) }));
+export const CalendarIconSVG = () => (_jsx("svg", { "aria-hidden": "true", className: "w-5 h-5 text-gray-500", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", d: "M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z", clipRule: "evenodd" }) }));
+export const ClockIconSVG = () => (_jsx("svg", { "aria-hidden": "true", className: "w-5 h-5 text-gray-500", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", d: "M10 2a8 8 0 100 16 8 8 0 000-16zm0 1a7 7 0 100 14 7 7 0 000-14zM9 5a1 1 0 012 0v4a1 1 0 01.293.707l1 1a1 1 0 11-1.414 1.414L10 11H9V5z", clipRule: "evenodd" }) }));
+export const FinishLabRemisionSVG = () => {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "2", y: "2", width: "14", height: "20" }), _jsx("line", { x1: "2", y1: "6", x2: "16", y2: "6" }), _jsx("path", { d: "M19,2 L22,2 L22,16 C22,17.1046 21.1046,18 20,18 L18,18 C16.8954,18 16,17.1046 16,16 L16,2 L19,2 Z" }), _jsx("polyline", { points: "16 6 18 8 22 4" })] }));
+};
+export const SendMessageIcon = () => {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", id: "send", children: [_jsx("path", { fill: "#000", fillRule: "evenodd", d: "M3.48935 7.06989C2.63559 4.93551 4.87248 2.8773 6.92858 3.90535L18.6458 9.76397C20.4884 10.6853 20.4884 13.3148 18.6458 14.2361L6.92857 20.0947C4.87247 21.1228 2.6356 19.0646 3.48935 16.9302L5.4614 12L3.48935 7.06989ZM6.48136 4.79977C5.2477 4.18294 3.90557 5.41788 4.41782 6.6985L6.46416 11.8143C6.51184 11.9335 6.51184 12.0665 6.46416 12.1857L4.41782 17.3016C3.90557 18.5822 5.2477 19.8171 6.48136 19.2003L18.1986 13.3417C19.3042 12.7889 19.3042 11.2112 18.1986 10.6584L6.48136 4.79977Z", clipRule: "evenodd" }), _jsx("path", { fill: "#000", fillRule: "evenodd", d: "M5.5 11.5H10V12.5H5.5V11.5Z", clipRule: "evenodd" })] }));
+};
+export const CheckIconSVG = () => {
+    return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }));
+};
+export const PrintIconSVG = () => {
+    return (_jsxs("svg", { className: "h-6 w-6 text-blue-400", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: "0.5", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M19 8h-1V3H6v5H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zM8 5h8v3H8V5zm8 12v2H8v-4h8v2zm2-2v-2H6v2H4v-4c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v4h-2z" }), _jsx("circle", { cx: "18", cy: "11.5", r: "1" })] }));
+};
+export const DownloadIconSVG = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "22", id: "download", children: _jsx("g", { fill: "none", "fill-rule": "evenodd", stroke: "#000", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", children: _jsx("path", { d: "M1 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3M6 11l4 4 4-4M10 1v14" }) }) }));
+};
+export const LoadingIconSVG = () => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", id: "loading", className: "animate-spin", children: _jsx("path", { fill: "#88e2de", d: "M50.287 32A18.287 18.287 0 1 1 32 13.713a1.5 1.5 0 1 1 0 3A15.287 15.287 0 1 0 47.287 32a1.5 1.5 0 0 1 3 0Z", name: "Loading" }) }));
+};
+export const AttachmentIconSVG = () => {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 100 100", id: "attachment", children: [_jsx("g", { children: _jsx("path", { d: "M18.8 85.1c-7.8-7.8-7.8-20.5 0-28.3L63.1 13c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8L38.6 76.7c-3.1 3.1-8.2 3.1-11.3 0-3.1-3.1-3.1-8.2 0-11.3l22.3-21.8c.8-.8 2.1-.8 2.8 0 .8.8.8 2.1 0 2.8L30.2 68.2c-1.5 1.5-1.5 4.1 0 5.6 1.6 1.6 4.1 1.6 5.7 0L80.2 30c3.9-3.9 3.9-10.2 0-14.1-3.9-3.9-10.2-3.9-14.1 0L21.7 59.7c-6.2 6.2-6.2 16.4 0 22.6 6.3 6.2 16.4 6.2 22.6 0l38.3-37.8c.8-.8 2.1-.8 2.8 0 .8.8.8 2.1 0 2.8L47.1 85.2c-7.8 7.7-20.4 7.8-28.3-.1z" }) }), _jsx("g", { children: _jsx("path", { fill: "#00F", d: "M664-510v1684h-1784V-510H664m8-8h-1800v1700H672V-518z" }) })] }));
+};
+export const CustomIconFromImage = ({ imageName, height = 6, width = 6, }) => {
+    // Asegúrate de que el nombre de la imagen incluya la extensión adecuada (por ejemplo, .png)
+    const imagePath = `/icons/${imageName}`;
+    return (_jsx("img", { src: imagePath, alt: imageName, className: `h-${height} w-${width} inline mr-1 pb-1`, style: {
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            fill: "none",
+            backgroundColor: "transparent",
+        } }));
+};

package/dist/Icons/StylesConstants.d.ts

@@ -0,0 +1,26 @@
+export declare const styleGreenBackground = "bg-green-600";
+export declare const styleActiveGreenBackground = "active:bg-green-800";
+export declare const styleRedBackground = "bg-red-600";
+export declare const styleActiveRedBackground = "active:bg-red-800";
+export declare const styleInactiveButtonBackground = "bg-zinc-300";
+export declare const styleActiveInactiveButtonBackground = "active:bg-zinc-200";
+export declare const styleStandardBackgroundColor = "bg-slate-900";
+export declare const styleStandardActiveBackgroundColor = "active:bg-slate-800";
+export declare const buttonIconTableColor = "text-slate-700";
+export declare const greenColorIcon = "text-emerald-600";
+export declare const redColorIcon = "text-red-600";
+export declare const applicationDropDownIconColor = "text-slate-900";
+export declare const inputIconColor = "text-zinc-400";
+export declare const lastRowSelectedBackground = "lightgreen";
+export declare const greenDropdownHover = "hover:bg-red-100";
+export declare const redDropdownHover = "hover:bg-green-100";
+export declare const standardDropdownHover = "hover:bg-gray-100";
+export declare const standarBorderColor = "border-slate-500";
+export declare const alertBorderColor = "border-red-500";
+export declare const sectionNormalBackgroundColor = "bg-neutral-100";
+export declare const inProgressProcessAlertBackgroundColor = "bg-yellow-900";
+export declare const progressBarLightBackground = "bg-slate-200";
+export declare const progressBarBackground = "bg-slate-600";
+export declare const progressBarTextColor = "text-slate-800";
+export declare const progressBarLightTextColor = "text-slate-300";
+export declare const progressBarSpinnerFillColor = "fill-slate-800";

package/dist/Icons/StylesConstants.js

@@ -0,0 +1,34 @@
+// ============================| Background colors |============================
+export const styleGreenBackground = "bg-green-600";
+export const styleActiveGreenBackground = "active:bg-green-800";
+export const styleRedBackground = "bg-red-600";
+export const styleActiveRedBackground = "active:bg-red-800";
+export const styleInactiveButtonBackground = "bg-zinc-300";
+export const styleActiveInactiveButtonBackground = "active:bg-zinc-200";
+export const styleStandardBackgroundColor = "bg-slate-900";
+export const styleStandardActiveBackgroundColor = "active:bg-slate-800";
+// ==============================| Icons Colors |=================================
+export const buttonIconTableColor = "text-slate-700";
+export const greenColorIcon = "text-emerald-600";
+export const redColorIcon = "text-red-600";
+export const applicationDropDownIconColor = "text-slate-900";
+export const inputIconColor = "text-zinc-400";
+// ==============================| Table Utils Colors |============================
+// CSS Color Nams, RGB, Hexadecimal
+export const lastRowSelectedBackground = "lightgreen";
+// ==============================| Dropdown Hover |=================================
+export const greenDropdownHover = "hover:bg-red-100";
+export const redDropdownHover = "hover:bg-green-100";
+export const standardDropdownHover = "hover:bg-gray-100";
+// ===============================| Border Colors | =================================
+export const standarBorderColor = "border-slate-500";
+export const alertBorderColor = "border-red-500";
+// ===============================| Section Background Color | =================================
+export const sectionNormalBackgroundColor = "bg-neutral-100";
+export const inProgressProcessAlertBackgroundColor = "bg-yellow-900";
+// ===============================| Progress Bar Styles | =================================
+export const progressBarLightBackground = "bg-slate-200";
+export const progressBarBackground = "bg-slate-600";
+export const progressBarTextColor = "text-slate-800";
+export const progressBarLightTextColor = "text-slate-300";
+export const progressBarSpinnerFillColor = "fill-slate-800";

package/dist/NavBar/NavBar.d.ts

@@ -0,0 +1,2 @@
+import type { NavBarProps } from "./NavBar.types";
+export declare const NavBar: ({ title, loggedIn, items, selectedColor, }: NavBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/NavBar/NavBar.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { DropDownArrowSvgIcon, LogoutDropDownSvgIcon, MenuAlt4Svg, OpcionButtonSvgIcon, } from "../Icons/Icons";
+import { COLORS } from "./NavBar.utils";
+import { Link } from "@remix-run/react";
+const DropDownLinkButton = ({ text, path, icon, buttonHover, }) => (_jsx(Link, { className: `block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 ${buttonHover ?? ""} dark:hover:bg-gray-700 dark:hover:text-white`, to: path, prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: text })] }) }));
+const OptionsDropDownButton = ({ color, options, name }) => {
+    const [showOptionsMenu, setShowOptionsMenu] = useState(true);
+    return (_jsx("div", { className: "nav-item ml-auto", children: _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "relative inline-block", children: [_jsxs("button", { onClick: () => setShowOptionsMenu(!showOptionsMenu), className: `relative flex items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`, children: [name ?? _jsx(OpcionButtonSvgIcon, {}), _jsx(DropDownArrowSvgIcon, {})] }), _jsx("div", { className: "absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800", hidden: showOptionsMenu, onMouseLeave: () => setShowOptionsMenu(true), children: options.map((option) => option) })] }) }) }));
+};
+const NavItem = ({ name, link, icon, color, specialColor, childrens = [], }) => (_jsx("li", { className: "nav-item", children: childrens.length > 0 ? (_jsx(OptionsDropDownButton, { name: name, color: color, options: childrens.map((x, index) => (_jsx(DropDownLinkButton, { text: x.name, path: x.link, buttonHover: "hover:bg-red-100" }, index))) })) : (_jsx("div", { className: `${specialColor ? specialColor.bg700 : color.bg700} container text-white w-56 sm:w-auto h-10 text-sm py-1 uppercase rounded shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150 `, children: _jsx(Link, { className: "px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75", to: link, prefetch: "none", children: _jsxs("div", { className: "mx-auto pt-2", children: [icon, _jsx("span", { children: name })] }) }) })) }));
+export const NavBar = ({ title, loggedIn, items, selectedColor, }) => {
+    const color = COLORS[selectedColor];
+    const [NavBarOpen, setNavBarOpen] = useState(false);
+    const options = (_jsxs(_Fragment, { children: [_jsx("ul", { children: loggedIn && (_jsx("div", { className: "flex flex-col sm:flex-row ", children: items
+                        .filter((item) => item.loggedIn)
+                        .map((item, index) => {
+                        const specialColor = item.color
+                            ? COLORS[item.color]
+                            : undefined;
+                        return (_jsx(NavItem, { name: item.name, link: item.link, icon: item.icon, specialColor: specialColor, color: color, childrens: item.childrens?.map((x) => {
+                                return { ...x };
+                            }) }, index));
+                    }) })) }), _jsx("ul", { className: "sm:flex sm:flex-col ml-auto lg:flex-row", children: loggedIn ? (_jsx(OptionsDropDownButton, { color: color, options: [
+                        _jsx(DropDownLinkButton, { text: "Cerrar Sesi\u00F3n", path: "/logout", icon: _jsx(LogoutDropDownSvgIcon, {}), buttonHover: "hover:bg-red-100" }, 0),
+                    ] })) : (items
+                    .filter((item) => !item.loggedIn)
+                    .map((item, index) => {
+                    return (_jsx(NavItem, { name: item.name, link: item.link, icon: item.icon, color: color }, index));
+                })) })] }));
+    return (_jsx("nav", { className: `py-3 ${color.bg600}`, children: _jsxs("div", { className: "flex items-center justify-between ml-5 mr-5", children: [_jsxs("div", { className: "flex justify-between w-full lg:w-auto", children: [_jsx(Link, { className: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white", to: "/home", prefetch: "none", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "inline-block mr-2 mb-2 align-middle", children: _jsx("img", { className: "w-auto h-7", src: "/logo.png", alt: "logo-zauru" }) }), title] }) }), _jsx("button", { className: `rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`, "aria-label": "Toggle mobile menu", type: "button", onClick: () => setNavBarOpen(!NavBarOpen), children: _jsx(MenuAlt4Svg, { NavBarOpen: NavBarOpen, setNavBarOpen: undefined }) })] }), _jsx("div", { className: `lg:hidden absolute top-0 left-0 z-50 w-64 h-full ${color.bg700} shadow-lg transform ${NavBarOpen ? "translate-x-0" : "-translate-x-full"} transition-transform duration-300 ease-in-out`, children: options }), _jsx("div", { className: "hidden lg:flex w-full lg:w-auto", children: options })] }) }));
+};