argous 1.2.247 → 1.3.3

package/dist/components/Carousel/Carousel.js

@@ -26,107 +26,112 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 };
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@material-ui/core");
-var clsx_1 = __importDefault(require("clsx"));
+var material_1 = require("@mui/material");
+var clsx_1 = require("clsx");
 var react_1 = __importStar(require("react"));
 var io_1 = require("react-icons/io");
-var useStyles = (0, core_1.makeStyles)(function (theme) { return ({
-    container: {
-        height: '100%',
-        width: '100%'
-    },
-    carouselContainer: {
-        width: '100%',
-        height: function (_a) {
-            var indicator = _a.indicator, indicatorPadding = _a.indicatorPadding;
-            return (indicator) ? "calc(100% - ".concat(indicatorPadding * 2, "px)") : '100%';
-        },
-        minWidth: '100%',
-        display: 'flex',
-        alignItems: 'center'
-    },
-    carousel: {
-        width: '100%',
-        height: '100%',
-        margin: 'auto',
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'row',
-        overflow: 'hidden',
-        scrollBehavior: 'smooth',
-        '&>*:not(:last-child)': {
-            marginRight: function (_a) {
-                var itemSpacing = _a.itemSpacing;
-                return (itemSpacing || '');
-            }
-        }
-    },
-    button: {
-        display: 'flex',
-        alignItems: 'center',
-        cursor: 'pointer',
-        border: 0,
-        padding: 0,
-        backgroundColor: '#0000',
-        color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
-        '&:hover': {
-            color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .6)' : 'rgba(255, 255, 255, .8)'
-        },
-        '&:disabled': {
-            color: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .23)' : 'rgba(255, 255, 255, .3)',
-            backgroundColor: 'transparent',
-            cursor: 'default',
-            pointerEvents: 'none'
-        }
-    },
-    leftButton: {
-        left: 0
-    },
-    rightButton: {
-        right: 0
-    },
-    indicator: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: function (_a) {
-            var indicatorGap = _a.indicatorGap;
-            return (indicatorGap || '');
-        },
-        padding: function (_a) {
-            var indicatorPadding = _a.indicatorPadding, indicatorSize = _a.indicatorSize, iconSize = _a.iconSize;
-            return "".concat(indicatorPadding - (indicatorSize / 2), "px ").concat(iconSize, "px");
-        },
-        '& span': {
-            width: function (_a) {
-                var indicatorSize = _a.indicatorSize;
-                return (indicatorSize || '');
+var classes = {
+    container: 'argous-carousel-container',
+    carouselContainer: 'argous-carousel-carousel-container',
+    carousel: 'argous-carousel-carousel',
+    button: 'argous-carousel-button',
+    leftButton: 'argous-carousel-left-button',
+    rightButton: 'argous-carousel-right-button',
+    indicator: 'argous-carousel-indicator',
+    currentIndicator: 'argous-carousel-current-indicator',
+};
+var carouselStyles = function (_a) {
+    var itemSpacing = _a.itemSpacing, indicator = _a.indicator, indicatorSize = _a.indicatorSize, indicatorGap = _a.indicatorGap, indicatorPadding = _a.indicatorPadding, iconSize = _a.iconSize;
+    return function (theme) {
+        var _a;
+        return (_a = {},
+            _a[".".concat(classes.container)] = {
+                height: '100%',
+                width: '100%'
             },
-            height: function (_a) {
-                var indicatorSize = _a.indicatorSize;
-                return (indicatorSize || '');
+            _a[".".concat(classes.carouselContainer)] = {
+                width: '100%',
+                height: indicator ? "calc(100% - ".concat(indicatorPadding * 2, "px)") : '100%',
+                minWidth: '100%',
+                display: 'flex',
+                alignItems: 'center'
             },
-            borderRadius: '50%',
-            backgroundColor: (theme.palette.type === 'light') ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
-            transition: 'background-color 500ms'
-        }
-    },
-    currentIndicator: {
-        backgroundColor: (theme.palette.type === 'light') ? '#000 !important' : '#fff !important'
-    }
-}); });
+            _a[".".concat(classes.carousel)] = {
+                width: '100%',
+                height: '100%',
+                margin: 'auto',
+                display: 'flex',
+                alignItems: 'center',
+                flexDirection: 'row',
+                overflow: 'hidden',
+                scrollBehavior: 'smooth',
+                '&>*:not(:last-child)': {
+                    marginRight: itemSpacing || ''
+                }
+            },
+            _a[".".concat(classes.button)] = {
+                display: 'flex',
+                alignItems: 'center',
+                cursor: 'pointer',
+                border: 0,
+                padding: 0,
+                backgroundColor: '#0000',
+                color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
+                '&:hover': {
+                    color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, .6)' : 'rgba(255, 255, 255, .8)'
+                },
+                '&:disabled': {
+                    color: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, .23)' : 'rgba(255, 255, 255, .3)',
+                    backgroundColor: 'transparent',
+                    cursor: 'default',
+                    pointerEvents: 'none'
+                }
+            },
+            _a[".".concat(classes.leftButton)] = {
+                left: 0
+            },
+            _a[".".concat(classes.rightButton)] = {
+                right: 0
+            },
+            _a[".".concat(classes.indicator)] = {
+                display: 'flex',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: indicatorGap || '',
+                padding: "".concat(indicatorPadding - (indicatorSize / 2), "px ").concat(iconSize, "px"),
+                '& span': {
+                    width: indicatorSize || '',
+                    height: indicatorSize || '',
+                    borderRadius: '50%',
+                    backgroundColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, .4)' : 'rgba(255, 255, 255, .5)',
+                    transition: 'background-color 500ms'
+                }
+            },
+            _a[".".concat(classes.currentIndicator)] = {
+                backgroundColor: theme.palette.mode === 'light' ? '#000 !important' : '#fff !important'
+            },
+            _a);
+    };
+};
 var CAROUSEL_ID = 'carousel';
 var initialState = {
     position: 0,
@@ -135,7 +140,6 @@ var initialState = {
 var Carousel = function (_a) {
     var _b, _c, _d;
     var id = _a.id, _e = _a.leftIcon, LEFT_ICON = _e === void 0 ? io_1.IoIosArrowBack : _e, _f = _a.rightIcon, RIGHT_ICON = _f === void 0 ? io_1.IoIosArrowForward : _f, _g = _a.iconSize, iconSize = _g === void 0 ? 20 : _g, _h = _a.scrollSensitivity, scrollSensitivity = _h === void 0 ? 2 : _h, _j = _a.itemSpacing, itemSpacing = _j === void 0 ? '.5rem' : _j, children = _a.children, _k = _a.buttons, buttons = _k === void 0 ? true : _k, indicator = _a.indicator, _l = _a.indicatorSize, indicatorSize = _l === void 0 ? 6 : _l, _m = _a.indicatorGap, indicatorGap = _m === void 0 ? 10 : _m, _o = _a.indicatorPadding, indicatorPadding = _o === void 0 ? 20 : _o, carouselStyle = _a.carouselStyle, onClick = _a.onClick, buttonClassName = _a.buttonClassName, indicatorClassName = _a.indicatorClassName, currentIndicatorClassName = _a.currentIndicatorClassName;
-    var classes = useStyles({ itemSpacing: itemSpacing, indicator: indicator, indicatorSize: indicatorSize, indicatorGap: indicatorGap, indicatorPadding: indicatorPadding, iconSize: iconSize });
     var _p = (0, react_1.useState)(initialState), state = _p[0], setState = _p[1];
     var position = state.position, indicatorArray = state.indicatorArray;
     var carousel = (0, react_1.useRef)(null);
@@ -176,7 +180,9 @@ var Carousel = function (_a) {
         }
         (position === children.length) && logicSetState({ type: 'position', value: (children.length - 1) });
     }, [itemSpacing, leftButtonId, rightButtonId, position, children.length]);
-    (0, react_1.useEffect)(function () { return control(); }, [control]);
+    (0, react_1.useEffect)(function () {
+        control();
+    }, [control]);
     control();
     var createIndicatorArray = (0, react_1.useCallback)(function () {
         var _a, _b;
@@ -184,7 +190,10 @@ var Carousel = function (_a) {
         var newIndicatorArray = Array.from(Array(childrenLength).keys());
         logicSetState({ type: 'indicatorArray', value: newIndicatorArray });
     }, []);
-    (0, react_1.useEffect)(function () { return (indicator) && createIndicatorArray(); }, [indicator, children, createIndicatorArray]);
+    (0, react_1.useEffect)(function () {
+        if (indicator)
+            createIndicatorArray();
+    }, [indicator, children, createIndicatorArray]);
     var handleCarouselClick = function (e, direction) {
         if (!childWidth || (typeof childWidth !== 'number'))
             return;
@@ -212,15 +221,16 @@ var Carousel = function (_a) {
         }, ((childWidth <= 500) ? 500 : (childWidth * ((childWidth > 1000) ? 0.6 : 0.9)) || 500));
     };
     return react_1.default.createElement("div", { id: carouselId, className: classes.container },
+        react_1.default.createElement(material_1.GlobalStyles, { styles: carouselStyles({ itemSpacing: itemSpacing, indicator: indicator, indicatorSize: indicatorSize, indicatorGap: indicatorGap, indicatorPadding: indicatorPadding, iconSize: iconSize }) }),
         react_1.default.createElement("div", { className: classes.carouselContainer },
-            (buttons && LEFT_ICON) && (react_1.default.createElement("button", { id: leftButtonId, onClick: function (e) { return handleCarouselClick(e, 'left'); }, className: (0, clsx_1.default)(classes.button, classes.leftButton, buttonClassName) },
+            (buttons && LEFT_ICON) && (react_1.default.createElement("button", { id: leftButtonId, onClick: function (e) { return handleCarouselClick(e, 'left'); }, className: (0, clsx_1.clsx)(classes.button, classes.leftButton, buttonClassName) },
                 react_1.default.createElement(LEFT_ICON, { size: iconSize, className: classes.leftButton }))),
             react_1.default.createElement("div", { ref: carousel, style: __assign({}, carouselStyle), className: classes.carousel }, children),
-            (buttons && RIGHT_ICON) && (react_1.default.createElement("button", { id: rightButtonId, onClick: function (e) { return handleCarouselClick(e, 'right'); }, className: (0, clsx_1.default)(classes.button, classes.rightButton, buttonClassName) },
+            (buttons && RIGHT_ICON) && (react_1.default.createElement("button", { id: rightButtonId, onClick: function (e) { return handleCarouselClick(e, 'right'); }, className: (0, clsx_1.clsx)(classes.button, classes.rightButton, buttonClassName) },
                 react_1.default.createElement(RIGHT_ICON, { size: iconSize, className: classes.rightButton })))),
-        (indicator) && (react_1.default.createElement("div", { className: (0, clsx_1.default)(classes.indicator, indicatorClassName) }, indicatorArray.map(function (_, index) {
+        (indicator) && (react_1.default.createElement("div", { className: (0, clsx_1.clsx)(classes.indicator, indicatorClassName) }, indicatorArray.map(function (_, index) {
             var _a;
-            return (react_1.default.createElement("span", { key: "indicator-".concat(index), className: (0, clsx_1.default)((_a = {},
+            return (react_1.default.createElement("span", { key: "indicator-".concat(index), className: (0, clsx_1.clsx)((_a = {},
                     _a[classes.currentIndicator] = (position === index),
                     _a[currentIndicatorClassName] = (position === index),
                     _a)) }));

package/dist/components/CartaoUsuario/CartaoUsuario.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -32,8 +42,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
@@ -63,7 +73,7 @@ var __1 = require("../");
 var fieldsRedux_1 = require("../../fieldsRedux");
 var utils_1 = require("../../utils");
 var api_1 = require("../../utils/api");
-var core_1 = require("@material-ui/core");
+var material_1 = require("@mui/material");
 var react_1 = __importStar(require("react"));
 var io_1 = require("react-icons/io");
 var md_1 = require("react-icons/md");
@@ -133,35 +143,35 @@ function CartaoUsuario(_a) {
         limpar.current = false;
     }
     if (localIdUsuario && mostrar)
-        return (react_1.default.createElement(core_1.Portal, null,
-            react_1.default.createElement(core_1.Popper, { onClick: function (e) { return e.stopPropagation(); }, style: { zIndex: 5 }, onMouseLeave: mouseLeave, onMouseEnter: mouseEnter, open: (!!anchor || !!localAnchor) && !!dados.dsNomeUsuario, anchorEl: anchor || localAnchor },
-                react_1.default.createElement(core_1.Card, { variant: 'outlined', style: { padding: '10px', maxWidth: '350px' } },
-                    react_1.default.createElement(core_1.Grid, { container: true, spacing: 1 },
-                        react_1.default.createElement(core_1.Grid, { item: true, xs: 'auto' },
+        return (react_1.default.createElement(material_1.Portal, null,
+            react_1.default.createElement(material_1.Popper, { onClick: function (e) { return e.stopPropagation(); }, style: { zIndex: 5 }, onMouseLeave: mouseLeave, onMouseEnter: mouseEnter, open: (!!anchor || !!localAnchor) && !!dados.dsNomeUsuario, anchorEl: anchor || localAnchor },
+                react_1.default.createElement(material_1.Card, { variant: 'outlined', style: { padding: '10px', maxWidth: '350px' } },
+                    react_1.default.createElement(material_1.Grid, { container: true, spacing: 1 },
+                        react_1.default.createElement(material_1.Grid, { size: 'auto' },
                             react_1.default.createElement(__1.ArgousAvatar, { style: { width: '50px', height: '50px', margin: '10px' }, nome: dados.dsNomeUsuario, idUsuario: idUsuario || localIdUsuario })),
-                        react_1.default.createElement(core_1.Grid, { item: true, xs: 'auto' },
-                            react_1.default.createElement(core_1.Typography, { variant: 'h6', style: { overflow: 'hidden', width: '250px', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, dados.dsNomeUsuario),
-                            react_1.default.createElement(core_1.Typography, { variant: 'body2', style: { width: '250px' } }, dados.dsFuncaoUsuario),
-                            react_1.default.createElement(core_1.Typography, { variant: 'caption', style: { width: '250px' } }, dados.dsSetor)),
+                        react_1.default.createElement(material_1.Grid, { size: 'auto' },
+                            react_1.default.createElement(material_1.Typography, { variant: 'h6', style: { overflow: 'hidden', width: '250px', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, dados.dsNomeUsuario),
+                            react_1.default.createElement(material_1.Typography, { variant: 'body2', style: { width: '250px' } }, dados.dsFuncaoUsuario),
+                            react_1.default.createElement(material_1.Typography, { variant: 'caption', style: { width: '250px' } }, dados.dsSetor)),
                         dados.dtExclusaoUsuario ?
-                            react_1.default.createElement(core_1.Typography, { variant: 'h6' },
+                            react_1.default.createElement(material_1.Typography, { variant: 'h6' },
                                 "Usu\u00E1rio excluido em ",
                                 dados.dtExclusaoUsuario)
                             :
                                 ((idUsuario && (idUsuarioLogado !== idUsuario)) || (localIdUsuario && (idUsuarioLogado !== localIdUsuario))) &&
                                     react_1.default.createElement(react_1.default.Fragment, null,
                                         dados.nrRamalUsuario &&
-                                            react_1.default.createElement(core_1.Grid, { item: true, xs: true },
-                                                react_1.default.createElement(core_1.Button, { fullWidth: true, variant: 'contained', href: "tel: ".concat(dados.nrRamalUsuario), title: "Ramal: ".concat(dados.nrRamalUsuario) },
+                                            react_1.default.createElement(material_1.Grid, { size: 'grow' },
+                                                react_1.default.createElement(material_1.Button, { fullWidth: true, variant: 'contained', href: "tel: ".concat(dados.nrRamalUsuario), title: "Ramal: ".concat(dados.nrRamalUsuario) },
                                                     react_1.default.createElement(io_1.IoIosCall, null),
                                                     "\u00A0",
                                                     dados.nrRamalUsuario)),
-                                        react_1.default.createElement(core_1.Grid, { item: true, xs: true },
-                                            react_1.default.createElement(core_1.Button, { fullWidth: true, variant: 'contained', href: "mailto: ".concat(dados.dsEmailUsuario), title: dados.dsEmailUsuario },
+                                        react_1.default.createElement(material_1.Grid, { size: 'grow' },
+                                            react_1.default.createElement(material_1.Button, { fullWidth: true, variant: 'contained', href: "mailto: ".concat(dados.dsEmailUsuario), title: dados.dsEmailUsuario },
                                                 react_1.default.createElement(md_1.MdMail, null),
                                                 "\u00A0Email")),
-                                        react_1.default.createElement(core_1.Grid, { item: true, xs: true },
-                                            react_1.default.createElement(core_1.Button, { fullWidth: true, variant: 'contained', onClick: function () { return (0, fieldsRedux_1.setAnotherProgramField)('janelaChatOpen', retornaUser(), 'argousSystem'); }, title: 'Abrir chat de conversa' },
+                                        react_1.default.createElement(material_1.Grid, { size: 'grow' },
+                                            react_1.default.createElement(material_1.Button, { fullWidth: true, variant: 'contained', onClick: function () { return (0, fieldsRedux_1.setAnotherProgramField)('janelaChatOpen', retornaUser(), 'argousSystem'); }, title: 'Abrir chat de conversa' },
                                                 react_1.default.createElement(md_1.MdMessage, null),
                                                 "\u00A0Mensagem"))))))));
     return null;

package/dist/components/Collapse/Collapse.d.ts

@@ -1,5 +1,5 @@
-import { StandardProps } from '@material-ui/core';
-import { TransitionProps } from '@material-ui/core/transitions/transition';
+import { StandardProps } from '@mui/material';
+import { TransitionProps } from '@mui/material/transitions';
 import * as React from 'react';
 
 export interface CollapseProps extends StandardProps<TransitionProps, CollapseClassKey, 'timeout'> {
@@ -57,4 +57,4 @@ export type CollapseClassKey = 'container' | 'entered' | 'hidden' | 'wrapper' |
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition#Transition-props)
  */
 
-export default function Collapse(props: CollapseProps): JSX.Element;
+export default function Collapse(props: CollapseProps): JSX.Element;

package/dist/components/Collapse/Collapse.js

@@ -26,13 +26,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -49,56 +59,93 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.styles = void 0;
-var core_1 = require("@material-ui/core");
-var transitions_1 = require("@material-ui/core/styles/transitions");
-var withStyles_1 = __importDefault(require("@material-ui/core/styles/withStyles"));
-var utils_1 = require("@material-ui/core/transitions/utils");
-var clsx_1 = __importDefault(require("clsx"));
+var material_1 = require("@mui/material");
+var clsx_1 = require("clsx");
 var prop_types_1 = __importDefault(require("prop-types"));
 var React = __importStar(require("react"));
 var react_transition_group_1 = require("react-transition-group");
-var styles = function (theme) { return ({
-    /* Styles applied to the container element. */
-    container: {
-        position: 'relative',
-        overflow: 'hidden',
-        height: 0,
-        transition: theme.transitions.create('height'),
-        '&$horizontal': {
-            width: 0,
-            height: 'auto',
-            transition: theme.transitions.create('width'),
-        },
-    },
-    /* Pseudo-class applied to the root element if `orientation="horizontal"`. */
-    horizontal: {},
-    /* Styles applied to the container element when the transition has entered. */
-    entered: {
-        height: 'auto',
-        overflow: 'visible',
-        '&$horizontal': {
-            height: 'initial',
-            width: 'auto',
+var defaultTransitionDuration = {
+    standard: 300,
+};
+var getTransitionDuration = function (timeout, mode) {
+    if (timeout === null || timeout === undefined || timeout === 'auto') {
+        return undefined;
+    }
+    if (typeof timeout === 'number' || typeof timeout === 'string') {
+        return timeout;
+    }
+    return timeout[mode];
+};
+var getTransitionProps = function (_a, _b) {
+    var _c = _a.style, style = _c === void 0 ? {} : _c, timeout = _a.timeout;
+    var mode = _b.mode;
+    return ({
+        duration: style.transitionDuration || getTransitionDuration(timeout, mode),
+        easing: style.transitionTimingFunction,
+        delay: style.transitionDelay,
+    });
+};
+var collapseClasses = {
+    container: 'argous-collapse-container',
+    horizontal: 'argous-collapse-horizontal',
+    entered: 'argous-collapse-entered',
+    hidden: 'argous-collapse-hidden',
+    wrapper: 'argous-collapse-wrapper',
+    wrapperInner: 'argous-collapse-wrapper-inner',
+};
+var mergeClasses = function (defaultClasses, overrideClasses) {
+    if (overrideClasses === void 0) { overrideClasses = {}; }
+    return Object.keys(defaultClasses).reduce(function (acc, key) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[key] = overrideClasses[key] || defaultClasses[key], _a)));
+    }, {});
+};
+var styles = function (theme) {
+    var _a, _b, _c, _d;
+    return (_a = {},
+        /* Styles applied to the container element. */
+        _a[".".concat(collapseClasses.container)] = (_b = {
+                position: 'relative',
+                overflow: 'hidden',
+                height: 0,
+                transition: theme.transitions.create('height')
+            },
+            _b["&.".concat(collapseClasses.horizontal)] = {
+                width: 0,
+                height: 'auto',
+                transition: theme.transitions.create('width'),
+            },
+            _b),
+        /* Styles applied to the container element when the transition has entered. */
+        _a[".".concat(collapseClasses.entered)] = (_c = {
+                height: 'auto',
+                overflow: 'visible'
+            },
+            _c["&.".concat(collapseClasses.horizontal)] = {
+                height: 'initial',
+                width: 'auto',
+            },
+            _c),
+        /* Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px. */
+        _a[".".concat(collapseClasses.hidden)] = {
+            visibility: 'hidden',
         },
-    },
-    /* Styles applied to the container element when the transition has exited and `collapsedHeight` != 0px. */
-    hidden: {
-        visibility: 'hidden',
-    },
-    /* Styles applied to the outer wrapper element. */
-    wrapper: {
-        // Hack to get children with a negative margin to not falsify the height computation.
-        display: 'flex',
-    },
-    /* Styles applied to the inner wrapper element. */
-    wrapperInner: {
-        width: '100%',
-        '&$horizontal': {
-            // width: 'initial',
-            height: '100%',
+        /* Styles applied to the outer wrapper element. */
+        _a[".".concat(collapseClasses.wrapper)] = {
+            // Hack to get children with a negative margin to not falsify the height computation.
+            display: 'flex',
         },
-    },
-}); };
+        /* Styles applied to the inner wrapper element. */
+        _a[".".concat(collapseClasses.wrapperInner)] = (_d = {
+                width: '100%'
+            },
+            _d["&.".concat(collapseClasses.horizontal)] = {
+                // width: 'initial',
+                height: '100%',
+            },
+            _d),
+        _a);
+};
 exports.styles = styles;
 /**
  * The Collapse transition is used by the
@@ -106,12 +153,13 @@ exports.styles = styles;
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 var Collapse = React.forwardRef(function Collapse(props, ref) {
-    var children = props.children, classes = props.classes, className = props.className, _a = props.collapsedHeight, collapsedHeight = _a === void 0 ? '0px' : _a, _b = props.collapsedSize, collapsedSizeProp = _b === void 0 ? '0px' : _b, _c = props.component, Component = _c === void 0 ? 'div' : _c, inProp = props.in, onEnter = props.onEnter, onEntered = props.onEntered, onEntering = props.onEntering, onExit = props.onExit, onExiting = props.onExiting, _d = props.orientation, orientation = _d === void 0 ? 'vertical' : _d, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.timeout, timeout = _f === void 0 ? transitions_1.duration.standard : _f, 
+    var children = props.children, _a = props.classes, classesProp = _a === void 0 ? {} : _a, className = props.className, _b = props.collapsedHeight, collapsedHeight = _b === void 0 ? '0px' : _b, _c = props.collapsedSize, collapsedSizeProp = _c === void 0 ? '0px' : _c, _d = props.component, Component = _d === void 0 ? 'div' : _d, inProp = props.in, onEnter = props.onEnter, onEntered = props.onEntered, onEntering = props.onEntering, onExit = props.onExit, onExiting = props.onExiting, _e = props.orientation, orientation = _e === void 0 ? 'vertical' : _e, _f = props.style, style = _f === void 0 ? {} : _f, _g = props.timeout, timeout = _g === void 0 ? defaultTransitionDuration.standard : _g, 
     // eslint-disable-next-line react/prop-types
-    _g = props.TransitionComponent, 
+    _h = props.TransitionComponent, 
     // eslint-disable-next-line react/prop-types
-    TransitionComponent = _g === void 0 ? react_transition_group_1.Transition : _g, other = __rest(props, ["children", "classes", "className", "collapsedHeight", "collapsedSize", "component", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExiting", "orientation", "style", "timeout", "TransitionComponent"]);
-    var theme = (0, core_1.useTheme)();
+    TransitionComponent = _h === void 0 ? react_transition_group_1.Transition : _h, other = __rest(props, ["children", "classes", "className", "collapsedHeight", "collapsedSize", "component", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExiting", "orientation", "style", "timeout", "TransitionComponent"]);
+    var theme = (0, material_1.useTheme)();
+    var classes = mergeClasses(collapseClasses, classesProp);
     var timer = React.useRef();
     var wrapperRef = React.useRef(null);
     var autoTransitionDuration = React.useRef();
@@ -138,7 +186,7 @@ var Collapse = React.forwardRef(function Collapse(props, ref) {
         var wrapperSize = wrapperRef.current[isHorizontal ? 'clientWidth' : 'clientHeight'];
         // After the size is read reset the position back to default
         wrapperRef.current.style.position = '';
-        var transitionDuration = (0, utils_1.getTransitionProps)({ style: style, timeout: timeout }, {
+        var transitionDuration = getTransitionProps({ style: style, timeout: timeout }, {
             mode: 'enter',
         }).duration;
         if (timeout === 'auto') {
@@ -170,7 +218,7 @@ var Collapse = React.forwardRef(function Collapse(props, ref) {
     };
     var handleExiting = function (node) {
         var wrapperSize = wrapperRef.current[isHorizontal ? 'clientWidth' : 'clientHeight'];
-        var transitionDuration = (0, utils_1.getTransitionProps)({ style: style, timeout: timeout }, {
+        var transitionDuration = getTransitionProps({ style: style, timeout: timeout }, {
             mode: 'exit',
         }).duration;
         if (timeout === 'auto') {
@@ -194,18 +242,20 @@ var Collapse = React.forwardRef(function Collapse(props, ref) {
             timer.current = setTimeout(next, autoTransitionDuration.current || 0);
         }
     };
-    return (React.createElement(TransitionComponent, __assign({ in: inProp, onEnter: handleEnter, onEntered: handleEntered, onEntering: handleEntering, onExit: handleExit, onExiting: handleExiting, addEndListener: addEndListener, timeout: timeout === 'auto' ? null : timeout }, other), function (state, childProps) {
-        var _a, _b, _c;
-        return (React.createElement(Component, __assign({ className: (0, clsx_1.default)(classes.container, (_a = {},
-                _a[classes.horizontal] = isHorizontal,
-                _a[classes.entered] = state === 'entered',
-                _a[classes.hidden] = state === 'exited' && !inProp && collapsedSize === '0px',
-                _a), className), style: __assign((_b = {}, _b[isHorizontal ? 'minWidth' : 'minHeight'] = collapsedSize, _b), style), ref: ref }, childProps),
-            React.createElement("div", { className: classes.wrapper, ref: wrapperRef },
-                React.createElement("div", { className: (0, clsx_1.default)(classes.wrapperInner, (_c = {},
-                        _c[classes.horizontal] = isHorizontal,
-                        _c)) }, children))));
-    }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(material_1.GlobalStyles, { styles: exports.styles }),
+        React.createElement(TransitionComponent, __assign({ in: inProp, onEnter: handleEnter, onEntered: handleEntered, onEntering: handleEntering, onExit: handleExit, onExiting: handleExiting, addEndListener: addEndListener, timeout: timeout === 'auto' ? null : timeout }, other), function (state, childProps) {
+            var _a, _b, _c;
+            return (React.createElement(Component, __assign({ className: (0, clsx_1.clsx)(classes.container, (_a = {},
+                    _a[classes.horizontal] = isHorizontal,
+                    _a[classes.entered] = state === 'entered',
+                    _a[classes.hidden] = state === 'exited' && !inProp && collapsedSize === '0px',
+                    _a), className), style: __assign((_b = {}, _b[isHorizontal ? 'minWidth' : 'minHeight'] = collapsedSize, _b), style), ref: ref }, childProps),
+                React.createElement("div", { className: classes.wrapper, ref: wrapperRef },
+                    React.createElement("div", { className: (0, clsx_1.clsx)(classes.wrapperInner, (_c = {},
+                            _c[classes.horizontal] = isHorizontal,
+                            _c)) }, children))));
+        })));
 });
 Collapse.propTypes = {
     // ----------------------------- Warning --------------------------------
@@ -291,4 +341,4 @@ Collapse.propTypes = {
     ]),
 };
 Collapse.muiSupportAuto = true;
-exports.default = (0, withStyles_1.default)(exports.styles, { name: 'MuiCollapse' })(Collapse);
+exports.default = Collapse;