@trilogy-ds/react 4.0.6-SC-beta-4 → 4.0.6-beta-2

package/lib/components/list/item/description/ListItemDescription.js

@@ -1,6 +1,7 @@
-import { hashClass } from '../../../../helpers';
-import clsx from 'clsx';
-import * as React from 'react';
+import * as React from "react";
+import clsx from "clsx";
+import { hashClass } from "../../../../helpers";
+import { useTrilogyContext } from "../../../../context";
 /**
  * ListItemDescription Component
  * @param children {React.ReactNode}
@@ -9,7 +10,8 @@ import * as React from 'react';
  */
 var ListItemDescription = function (_a) {
     var children = _a.children, className = _a.className;
-    return React.createElement("dd", { className: hashClass(clsx(className)) }, children);
+    var styled = useTrilogyContext().styled;
+    return React.createElement("dd", { className: hashClass(styled, clsx(className)) }, children);
 };
 export default ListItemDescription;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGlzdEl0ZW1EZXNjcmlwdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvbGlzdC9pdGVtL2Rlc2NyaXB0aW9uL0xpc3RJdGVtRGVzY3JpcHRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRzlCOzs7OztHQUtHO0FBQ0gsSUFBTSxtQkFBbUIsR0FBRyxVQUFDLEVBQWlEO1FBQS9DLFFBQVEsY0FBQSxFQUFFLFNBQVMsZUFBQTtJQUNoRCxPQUFPLDRCQUFJLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUcsUUFBUSxDQUFNLENBQUE7QUFDbkUsQ0FBQyxDQUFBO0FBRUQsZUFBZSxtQkFBbUIsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGlzdEl0ZW1EZXNjcmlwdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvbGlzdC9pdGVtL2Rlc2NyaXB0aW9uL0xpc3RJdGVtRGVzY3JpcHRpb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUU3Qzs7Ozs7R0FLRztBQUNILElBQU0sbUJBQW1CLEdBQUcsVUFBQyxFQUdGO1FBRnpCLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQTtJQUVELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLE9BQU8sNEJBQUksU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLElBQUcsUUFBUSxDQUFNLENBQUE7QUFDM0UsQ0FBQyxDQUFBO0FBRUQsZUFBZSxtQkFBbUIsQ0FBQSJ9

package/lib/components/modal/Modal.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ModalProps } from '../../components/modal/ModalProps';
+import { ModalProps } from './ModalProps';
 /**
  * Modal Component
  * @param active {boolean} Activated Modal

package/lib/components/modal/Modal.js

@@ -1,11 +1,13 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { ButtonType } from '../../components/button';
-import { useModal } from '../../components/modal/hooks/useModal';
 import { Title, TitleLevels, TitleMarkup } from '../../components/title';
+import { useTrilogyContext } from '../../context/index';
 import { hashClass } from '../../helpers/hashClassesHelpers';
 import { is } from '../../services';
 import clsx from 'clsx';
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import shortid from 'shortid';
+var modalGeneratedId = shortid.generate();
 /**
  * Modal Component
  * @param active {boolean} Activated Modal
@@ -22,20 +24,78 @@ import React from 'react';
  */
 var Modal = function (_a) {
     var children = _a.children, className = _a.className, id = _a.id, _b = _a.accessibilityLabel, accessibilityLabel = _b === void 0 ? 'Close' : _b, active = _a.active, onClose = _a.onClose, onOpen = _a.onOpen, panel = _a.panel, size = _a.size, _c = _a.hideCloseButton, hideCloseButton = _c === void 0 ? false : _c, trigger = _a.trigger, _d = _a.unClosable, unClosable = _d === void 0 ? false : _d, title = _a.title, others = __rest(_a, ["children", "className", "id", "accessibilityLabel", "active", "onClose", "onOpen", "panel", "size", "hideCloseButton", "trigger", "unClosable", "title"]);
-    var modalGeneratedId = React.useId();
-    var _e = useModal({
-        active: active,
-        onClose: onClose,
-    }), display = _e.display, refModal = _e.refModal, onKeyDown = _e.onKeyDown, handleClickModal = _e.handleClickModal, modal = _e.modal, refBtnModal = _e.refBtnModal, buttonRef = _e.buttonRef, handleCloseModal = _e.handleCloseModal;
-    var classes = React.useMemo(function () { return hashClass(clsx('modal', display && is('active'), size && is(size), panel && is('panel'), className)); }, [display, panel, className]);
+    var modal = useRef(null);
+    var _e = __read(useState(active || false), 2), display = _e[0], setDisplay = _e[1];
+    var styled = useTrilogyContext().styled;
+    var refsActions = useRef([]);
+    var refBtnModal = useRef(null);
+    var refModal = useRef(null);
+    var _f = __read(useState(0), 2), setIndexFocusable = _f[1];
+    var handleClose = React.useCallback(function (onCloseFunc, e) {
+        setDisplay(false);
+        refBtnModal.current && refBtnModal.current.focus();
+        setIndexFocusable(0);
+        if (onCloseFunc)
+            onCloseFunc(e);
+    }, [refBtnModal.current]);
+    var classes = React.useMemo(function () { return hashClass(styled, clsx('modal', display && is('active'), size && is(size), panel && is('panel'), className)); }, [display, panel, className, styled]);
+    var onKeyDown = useCallback(function (event) {
+        if (display && refsActions.current) {
+            var refs_1 = refsActions.current.filter(function (ref) { return ref; });
+            var key = event.key;
+            if (key === 'Tab') {
+                event.preventDefault();
+                setIndexFocusable(function (prev) {
+                    var _a;
+                    var nextIndex = (prev + 1) % refs_1.length;
+                    refs_1[nextIndex] && ((_a = refs_1[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus());
+                    return nextIndex;
+                });
+            }
+            if (key === 'Escape') {
+                event.preventDefault();
+                setDisplay(false);
+                refBtnModal.current && refBtnModal.current.focus();
+                setIndexFocusable(0);
+                onClose && onClose();
+            }
+        }
+    }, [refsActions.current.length, display]);
+    useEffect(function () {
+        display && refsActions.current[0] && refsActions.current[0].focus();
+    }, [display, refsActions === null || refsActions === void 0 ? void 0 : refsActions.current.length]);
+    useEffect(function () {
+        setDisplay(function (prev) {
+            if (prev) {
+                refBtnModal.current && refBtnModal.current.focus();
+                setIndexFocusable(0);
+            }
+            return active || false;
+        });
+    }, [active]);
+    useEffect(function () {
+        if (refModal.current) {
+            var footer = refModal.current.querySelector('[data-modal-footer]');
+            var getCTA = footer === null || footer === void 0 ? void 0 : footer.querySelectorAll('button');
+            if (getCTA)
+                getCTA.forEach(function (el, i) { return (refsActions.current[i + 1] = el); });
+        }
+    }, [refModal.current]);
     return (React.createElement("div", { onKeyDown: onKeyDown, ref: refModal },
         trigger && React.cloneElement(trigger, { ref: refBtnModal, 'aria-haspopup': 'dialog' }),
-        React.createElement("div", __assign({ id: id, className: classes, role: 'dialog', "aria-labelledby": modalGeneratedId, "aria-modal": true, onClick: handleClickModal }, others),
-            React.createElement("div", { ref: modal, className: hashClass(clsx('modal-content')) },
-                React.createElement("div", { className: hashClass(clsx('modal-header')) },
-                    hideCloseButton !== true && (React.createElement("button", { onClick: handleCloseModal, className: hashClass(clsx('modal-close', is('large'))), type: ButtonType.BUTTON, ref: buttonRef }, accessibilityLabel && React.createElement("span", { className: 'sr-only' }, accessibilityLabel))),
+        React.createElement("div", __assign({ id: id, className: classes, role: 'dialog', "aria-labelledby": modalGeneratedId, "aria-modal": true, onClick: function (e) {
+                var _a;
+                if (!((_a = modal === null || modal === void 0 ? void 0 : modal.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                    handleClose(onClose, e);
+                }
+            } }, others),
+            React.createElement("div", { ref: modal, className: hashClass(styled, clsx('modal-content')) },
+                React.createElement("div", { className: hashClass(styled, clsx('modal-header')) },
+                    hideCloseButton !== true && (React.createElement("button", { onClick: function (e) {
+                            handleClose(onClose, e);
+                        }, className: hashClass(styled, clsx('modal-close', is('large'))), type: ButtonType.BUTTON, ref: function (el) { return el && (refsActions.current[0] = el); } }, accessibilityLabel && React.createElement("span", { className: 'sr-only' }, accessibilityLabel))),
                     React.createElement(Title, { id: modalGeneratedId, level: TitleLevels.THREE, markup: TitleMarkup.H1 }, title)),
                 children && children))));
 };
 export default Modal;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL01vZGFsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBRWhELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQTtBQUM1RCxPQUFPLEVBQUUsS0FBSyxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQTtBQUNwRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUMvQixPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCOzs7Ozs7Ozs7Ozs7O0dBYUc7QUFDSCxJQUFNLEtBQUssR0FBRyxVQUFDLEVBZUY7SUFkWCxJQUFBLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLDBCQUE0QixFQUE1QixrQkFBa0IsbUJBQUcsT0FBTyxLQUFBLEVBQzVCLE1BQU0sWUFBQSxFQUNOLE9BQU8sYUFBQSxFQUNQLE1BQU0sWUFBQSxFQUNOLEtBQUssV0FBQSxFQUNMLElBQUksVUFBQSxFQUNKLHVCQUF1QixFQUF2QixlQUFlLG1CQUFHLEtBQUssS0FBQSxFQUN2QixPQUFPLGFBQUEsRUFDUCxrQkFBa0IsRUFBbEIsVUFBVSxtQkFBRyxLQUFLLEtBQUEsRUFDbEIsS0FBSyxXQUFBLEVBQ0YsTUFBTSxjQWRJLDBKQWVkLENBRFU7SUFFVCxJQUFNLGdCQUFnQixHQUFHLEtBQUssQ0FBQyxLQUFLLEVBQUUsQ0FBQTtJQUNoQyxJQUFBLEtBQXNHLFFBQVEsQ0FBQztRQUNuSCxNQUFNLFFBQUE7UUFDTixPQUFPLFNBQUE7S0FDUixDQUFDLEVBSE0sT0FBTyxhQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsZ0JBQWdCLHNCQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsV0FBVyxpQkFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLGdCQUFnQixzQkFHckcsQ0FBQTtJQUVGLElBQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQzNCLGNBQU0sT0FBQSxTQUFTLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxPQUFPLElBQUksRUFBRSxDQUFDLFFBQVEsQ0FBQyxFQUFFLElBQUksSUFBSSxFQUFFLENBQUMsSUFBSSxDQUFDLEVBQUUsS0FBSyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxFQUFwRyxDQUFvRyxFQUMxRyxDQUFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsU0FBUyxDQUFDLENBQzVCLENBQUE7SUFFRCxPQUFPLENBQ0wsNkJBQUssU0FBUyxFQUFFLFNBQVMsRUFBRSxHQUFHLEVBQUUsUUFBUTtRQUNyQyxPQUFPLElBQUksS0FBSyxDQUFDLFlBQVksQ0FBQyxPQUE2QixFQUFFLEVBQUUsR0FBRyxFQUFFLFdBQVcsRUFBRSxlQUFlLEVBQUUsUUFBUSxFQUFFLENBQUM7UUFDOUcsc0NBQ0UsRUFBRSxFQUFFLEVBQUUsRUFDTixTQUFTLEVBQUUsT0FBTyxFQUNsQixJQUFJLEVBQUMsUUFBUSxxQkFDSSxnQkFBZ0IsZ0JBQ3JCLElBQUksRUFDaEIsT0FBTyxFQUFFLGdCQUFnQixJQUNyQixNQUFNO1lBRVYsNkJBQUssR0FBRyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsQ0FBQztnQkFDMUQsNkJBQUssU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7b0JBQzVDLGVBQWUsS0FBSyxJQUFJLElBQUksQ0FDM0IsZ0NBQ0UsT0FBTyxFQUFFLGdCQUFnQixFQUN6QixTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUUsRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFDdEQsSUFBSSxFQUFFLFVBQVUsQ0FBQyxNQUFNLEVBQ3ZCLEdBQUcsRUFBRSxTQUFTLElBRWIsa0JBQWtCLElBQUksOEJBQU0sU0FBUyxFQUFDLFNBQVMsSUFBRSxrQkFBa0IsQ0FBUSxDQUNyRSxDQUNWO29CQUNELG9CQUFDLEtBQUssSUFBQyxFQUFFLEVBQUUsZ0JBQWdCLEVBQUUsS0FBSyxFQUFFLFdBQVcsQ0FBQyxLQUFLLEVBQUUsTUFBTSxFQUFFLFdBQVcsQ0FBQyxFQUFFLElBQzFFLEtBQUssQ0FDQSxDQUNKO2dCQUNMLFFBQVEsSUFBSSxRQUFRLENBQ2pCLENBQ0YsQ0FDRixDQUNQLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLEtBQUssQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL01vZGFsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQ2hELE9BQU8sRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLFdBQVcsRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBRW5ELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQy9CLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssRUFBRSxFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN2RSxPQUFPLE9BQU8sTUFBTSxTQUFTLENBQUE7QUFHN0IsSUFBTSxnQkFBZ0IsR0FBRyxPQUFPLENBQUMsUUFBUSxFQUFFLENBQUE7QUFFM0M7Ozs7Ozs7Ozs7Ozs7R0FhRztBQUNILElBQU0sS0FBSyxHQUFHLFVBQUMsRUFlRjtJQWRYLElBQUEsUUFBUSxjQUFBLEVBQ1IsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsMEJBQTRCLEVBQTVCLGtCQUFrQixtQkFBRyxPQUFPLEtBQUEsRUFDNUIsTUFBTSxZQUFBLEVBQ04sT0FBTyxhQUFBLEVBQ1AsTUFBTSxZQUFBLEVBQ04sS0FBSyxXQUFBLEVBQ0wsSUFBSSxVQUFBLEVBQ0osdUJBQXVCLEVBQXZCLGVBQWUsbUJBQUcsS0FBSyxLQUFBLEVBQ3ZCLE9BQU8sYUFBQSxFQUNQLGtCQUFrQixFQUFsQixVQUFVLG1CQUFHLEtBQUssS0FBQSxFQUNsQixLQUFLLFdBQUEsRUFDRixNQUFNLGNBZEksMEpBZWQsQ0FE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

package/lib/components/modal/ModalProps.d.ts

@@ -1,9 +1,8 @@
+import { ReactNode } from 'react';
 import { ModalSize } from '../../components/modal/ModalEnum';
 import { ClickEvent } from '../../events/OnClickEvent';
-import { Accessibility } from '../../objects/facets/Accessibility';
+import { Accessibility, Dev } from '../../objects';
 import { CommonProps } from '../../objects/facets/CommonProps';
-import { Dev } from '../../objects/facets/Dev';
-import { ReactNode } from 'react';
 /**
  * Modal Interface
  */

package/lib/components/modal/body/ModalBody.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ModalBodyProps } from '../../../components/modal/body/ModalBodyProps';
+import { ModalBodyProps } from './ModalBodyProps';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}

package/lib/components/modal/body/ModalBody.js

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import { hashClass } from '../../../helpers';
 import clsx from 'clsx';
-import React from 'react';
+import { useTrilogyContext } from '../../../context';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}
@@ -10,7 +11,8 @@ import React from 'react';
  */
 var ModalBody = function (_a) {
     var children = _a.children, className = _a.className, id = _a.id;
-    return (React.createElement("div", { id: id, className: hashClass(clsx('modal-body', className)) }, children));
+    var styled = useTrilogyContext().styled;
+    return (React.createElement("div", { id: id, className: hashClass(styled, clsx('modal-body', className)) }, children));
 };
 export default ModalBody;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxCb2R5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9ib2R5L01vZGFsQm9keS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCOzs7Ozs7R0FNRztBQUNILElBQU0sU0FBUyxHQUFHLFVBQUMsRUFBMkM7UUFBekMsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBO0lBQzFDLE9BQU8sQ0FDTCw2QkFBSyxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRSxTQUFTLENBQUMsQ0FBQyxJQUM3RCxRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxTQUFTLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxCb2R5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9tb2RhbC9ib2R5L01vZGFsQm9keS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7R0FNRztBQUNILElBQU0sU0FBUyxHQUFHLFVBQUMsRUFBMkM7UUFBekMsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBO0lBQ2xDLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLE9BQU8sQ0FDTCw2QkFBSyxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxZQUFZLEVBQUUsU0FBUyxDQUFDLENBQUMsSUFDckUsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsU0FBUyxDQUFBIn0=

package/lib/components/modal/footer/ModalFooter.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ModalFooterProps } from '../../../components/modal/footer/ModalFooterProps';
+import { ModalFooterProps } from './ModalFooterProps';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}

package/lib/components/modal/footer/ModalFooter.js

@@ -1,6 +1,7 @@
-import { hashClass } from '../../../helpers/hashClassesHelpers';
+import { useTrilogyContext } from '../../../context';
+import { hashClass } from '../../../helpers';
 import clsx from 'clsx';
-import React from 'react';
+import * as React from 'react';
 /**
  * Modal Footer Component
  * @param children {React.ReactNode}
@@ -10,7 +11,8 @@ import React from 'react';
  */
 var ModalFooter = function (_a) {
     var children = _a.children, className = _a.className, id = _a.id;
-    return (React.createElement("div", { "data-modal-footer": '', id: id, className: hashClass(clsx('modal-footer', className)) }, children));
+    var styled = useTrilogyContext().styled;
+    return (React.createElement("div", { "data-modal-footer": '', id: id, className: hashClass(styled, clsx('modal-footer', className)) }, children));
 };
 export default ModalFooter;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxGb290ZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2Zvb3Rlci9Nb2RhbEZvb3Rlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekI7Ozs7OztHQU1HO0FBQ0gsSUFBTSxXQUFXLEdBQUcsVUFBQyxFQUE2QztRQUEzQyxRQUFRLGNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUE7SUFDNUMsT0FBTyxDQUNMLGtEQUF1QixFQUFFLEVBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsU0FBUyxDQUFDLENBQUMsSUFDcEYsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsV0FBVyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTW9kYWxGb290ZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2Zvb3Rlci9Nb2RhbEZvb3Rlci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRzlCOzs7Ozs7R0FNRztBQUNILElBQU0sV0FBVyxHQUFHLFVBQUMsRUFBNkM7UUFBM0MsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBO0lBQ3BDLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLE9BQU8sQ0FDTCxrREFBdUIsRUFBRSxFQUFDLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLGNBQWMsRUFBRSxTQUFTLENBQUMsQ0FBQyxJQUM1RixRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxXQUFXLENBQUEifQ==

package/lib/components/modal/index.d.ts

@@ -1,5 +1,5 @@
-import Modal from '../../components/modal/Modal';
-import ModalBody from '../../components/modal/body/ModalBody';
-import ModalFooter from '../../components/modal/footer/ModalFooter';
-export * from '../../components/modal/ModalEnum';
+import Modal from './Modal';
+import ModalFooter from './footer/ModalFooter';
+import ModalBody from './body/ModalBody';
+export * from './ModalEnum';
 export { Modal, ModalBody, ModalFooter };

package/lib/components/modal/index.js

@@ -1,6 +1,6 @@
-import Modal from '../../components/modal/Modal';
-import ModalBody from '../../components/modal/body/ModalBody';
-import ModalFooter from '../../components/modal/footer/ModalFooter';
-export * from '../../components/modal/ModalEnum';
+import Modal from './Modal';
+import ModalFooter from './footer/ModalFooter';
+import ModalBody from './body/ModalBody';
+export * from './ModalEnum';
 export { Modal, ModalBody, ModalFooter };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLDBCQUEwQixDQUFBO0FBQzVDLE9BQU8sU0FBUyxNQUFNLG1DQUFtQyxDQUFBO0FBQ3pELE9BQU8sV0FBVyxNQUFNLHVDQUF1QyxDQUFBO0FBRS9ELGNBQWMsOEJBQThCLENBQUE7QUFDNUMsT0FBTyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL21vZGFsL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLFNBQVMsQ0FBQTtBQUMzQixPQUFPLFdBQVcsTUFBTSxzQkFBc0IsQ0FBQTtBQUM5QyxPQUFPLFNBQVMsTUFBTSxrQkFBa0IsQ0FBQTtBQUV4QyxjQUFjLGFBQWEsQ0FBQTtBQUUzQixPQUFPLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxXQUFXLEVBQUUsQ0FBQSJ9

package/lib/components/otp/Otp.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { OtpProps } from '../../components/otp/OtpProps';
+import { OtpProps } from './OtpProps';
 /**
  * OTP Code Component
  * @param value {string} Code Text Input

package/lib/components/otp/Otp.js

@@ -1,11 +1,69 @@
-import { __assign, __read, __rest, __spreadArray } from "tslib";
-import { useOtp } from '../../components/otp/hooks/useOtp';
+import { __assign, __read, __rest } from "tslib";
 import { Text, TextMarkup } from '../../components/text';
+import { useTrilogyContext } from '../../context/index';
 import { hashClass } from '../../helpers/hashClassesHelpers';
 import { TypographyColor } from '../../objects/Typography';
 import { is } from '../../services/classify';
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+var stringToCode = function (str, codeSize) {
+    if (!str)
+        return new Array(codeSize).fill(null);
+    return str.split('').map(function (char) { return (char === '' ? null : Number(char)); });
+};
+var codeToString = function (code) {
+    return code.map(function (char) { return (char === null ? '_' : char); }).join('');
+};
+var isCompleted = function (myCode) {
+    return myCode.every(function (code) { return code !== null; });
+};
+var focusToNextInput = function (target, value) {
+    var nextElementSibling = target.nextElementSibling;
+    if (nextElementSibling) {
+        if (value)
+            nextElementSibling.value = value;
+        if (target.value.length)
+            nextElementSibling.focus();
+    }
+    else {
+        target.focus();
+    }
+};
+var focusToPrevInput = function (target) {
+    var previousElementSibling = target.previousElementSibling;
+    if (previousElementSibling) {
+        previousElementSibling.focus();
+    }
+    else {
+        target.focus();
+    }
+};
+var updateCodeInput = function (value, index, code) {
+    var numberValue = Number(value);
+    if (isNaN(numberValue) || value.length < 1) {
+        return code;
+    }
+    var newCodeInput = code.map(function (code, idx) {
+        return idx === index ? Number(value.slice(0, 1)) : code;
+    });
+    return updateCodeInput(value.slice(1), index + 1, newCodeInput);
+};
+var inputOnKeyUp = function (e) {
+    var key = e.key;
+    var target = e.target;
+    if (key === 'ArrowRight' || key === 'ArrowDown') {
+        return focusToNextInput(target);
+    }
+    if (key === 'ArrowLeft' || key === 'ArrowUp') {
+        return focusToPrevInput(target);
+    }
+    if (key === 'Backspace') {
+        return target.value === '' && focusToPrevInput(target);
+    }
+    if (key >= '0' && key <= '9') {
+        focusToNextInput(target);
+    }
+};
 /**
  * OTP Code Component
  * @param value {string} Code Text Input
@@ -23,29 +81,47 @@ import React from 'react';
  */
 var Otp = function (_a) {
     var className = _a.className, id = _a.id, value = _a.value, _b = _a.length, length = _b === void 0 ? 6 : _b, disabled = _a.disabled, error = _a.error, onCompleted = _a.onCompleted, onChange = _a.onChange, onFocus = _a.onFocus, label = _a.label, help = _a.help, autoFocus = _a.autoFocus, others = __rest(_a, ["className", "id", "value", "length", "disabled", "error", "onCompleted", "onChange", "onFocus", "label", "help", "autoFocus"]);
-    var classes = hashClass(clsx('otp-list', error && is('error'), className));
-    var _c = useOtp({
-        value: value,
-        disabled: disabled,
-        onChange: onChange,
-        onCompleted: onCompleted,
-        length: length,
-    }), codeInput = _c.codeInput, inputOnChange = _c.inputOnChange, inputOnFocus = _c.inputOnFocus, inputOnKeyUp = _c.inputOnKeyUp;
+    var _c = __read(useState(stringToCode(value, length) || new Array(length).fill(null)), 2), codeInput = _c[0], setCodeInput = _c[1];
+    var hasChanged = useRef(false);
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('otp-list', error && is('error'), className));
+    useEffect(function () {
+        if (!disabled) {
+            isCompleted(codeInput) && (onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(codeToString(codeInput)));
+        }
+    }, [length, codeInput, onCompleted, disabled]);
+    useEffect(function () {
+        hasChanged.current = codeInput.find(function (code) { return code !== null; }) !== undefined;
+        if (hasChanged.current) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(codeToString(codeInput));
+        }
+    }, [codeInput]);
+    var inputOnChange = function (e, idx) {
+        var target = e.target;
+        var targetValue = target.value.trim();
+        if (targetValue.length > 0) {
+            setCodeInput(updateCodeInput(targetValue, idx, codeInput));
+        }
+        else {
+            setCodeInput(codeInput.map(function (code, index) {
+                return index === idx ? null : code;
+            }));
+        }
+    };
+    var inputOnFocus = function (e) {
+        var target = e.target;
+        target.setSelectionRange(0, target.value.length);
+    };
     return (React.createElement(React.Fragment, null,
         label && (React.createElement(Text, { markup: TextMarkup.P, typo: (disabled && TypographyColor.TEXT_NEUTRAL) ||
                 (error && TypographyColor.TEXT_ERROR) ||
                 TypographyColor.TEXT_MAIN }, label)),
-        React.createElement("div", { id: id, className: classes, onClick: onFocus
-                ? function () {
-                    if (!disabled) {
-                        onFocus === null || onFocus === void 0 ? void 0 : onFocus(true);
-                    }
+        React.createElement("div", { id: id, className: classes, onClick: function () {
+                if (!disabled) {
+                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(true);
                 }
-                : undefined }, __spreadArray([], __read(Array(length).keys()), false).map(function (_, index) {
-            var _a;
-            return (React.createElement("input", __assign({ "aria-disabled": disabled, tabIndex: 0, key: index, type: 'text', inputMode: 'numeric', autoComplete: 'one-time-code', autoFocus: index === 0 && autoFocus, pattern: '\\d{1}', maxLength: length, className: hashClass(clsx('otp')), value: value ? "".concat((_a = codeInput[index]) !== null && _a !== void 0 ? _a : '') : undefined, onKeyUp: inputOnKeyUp, onFocus: inputOnFocus, onChange: inputOnChange ? function (e) { return inputOnChange(e, index); } : undefined, disabled: disabled }, others)));
-        })),
-        help && (React.createElement(Text, { className: hashClass(clsx('help')), markup: TextMarkup.P, typo: (error && TypographyColor.TEXT_ERROR) || TypographyColor.TEXT_MAIN }, help))));
+            } }, codeInput.map(function (digit, idx) { return (React.createElement("input", __assign({ "aria-disabled": disabled, tabIndex: 0, key: idx, type: 'text', inputMode: 'numeric', autoComplete: 'one-time-code', autoFocus: idx === 0 && autoFocus, pattern: '\\d{1}', maxLength: length, className: hashClass(styled, clsx('otp')), value: "".concat(digit !== null && digit !== void 0 ? digit : ''), onKeyUp: inputOnKeyUp, onFocus: inputOnFocus, onChange: function (e) { return inputOnChange(e, idx); }, disabled: disabled }, others))); })),
+        help && (React.createElement(Text, { className: hashClass(styled, clsx('help')), markup: TextMarkup.P, typo: (error && TypographyColor.TEXT_ERROR) || TypographyColor.TEXT_MAIN }, help))));
 };
 export default Otp;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9vdHAvT3RwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLCtCQUErQixDQUFBO0FBQ3RELE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUN0RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6Qjs7Ozs7Ozs7Ozs7Ozs7R0FjRztBQUNILElBQU0sR0FBRyxHQUFHLFVBQUMsRUFjRjtJQWJULElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsS0FBSyxXQUFBLEVBQ0wsY0FBVSxFQUFWLE1BQU0sbUJBQUcsQ0FBQyxLQUFBLEVBQ1YsUUFBUSxjQUFBLEVBQ1IsS0FBSyxXQUFBLEVBQ0wsV0FBVyxpQkFBQSxFQUNYLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLEtBQUssV0FBQSxFQUNMLElBQUksVUFBQSxFQUNKLFNBQVMsZUFBQSxFQUNOLE1BQU0sY0FiRSwrSEFjWixDQURVO0lBRVQsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsS0FBSyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBQ3RFLElBQUEsS0FBMkQsTUFBTSxDQUFDO1FBQ3RFLEtBQUssT0FBQTtRQUNMLFFBQVEsVUFBQTtRQUNSLFFBQVEsVUFBQTtRQUNSLFdBQVcsYUFBQTtRQUNYLE1BQU0sUUFBQTtLQUNQLENBQUMsRUFOTSxTQUFTLGVBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUUsWUFBWSxrQkFBQSxFQUFFLFlBQVksa0JBTTFELENBQUE7SUFFRixPQUFPLENBQ0w7UUFDRyxLQUFLLElBQUksQ0FDUixvQkFBQyxJQUFJLElBQ0gsTUFBTSxFQUFFLFVBQVUsQ0FBQyxDQUFDLEVBQ3BCLElBQUksRUFDRixDQUFDLFFBQVEsSUFBSSxlQUFlLENBQUMsWUFBWSxDQUFDO2dCQUMxQyxDQUFDLEtBQUssSUFBSSxlQUFlLENBQUMsVUFBVSxDQUFDO2dCQUNyQyxlQUFlLENBQUMsU0FBUyxJQUcxQixLQUFLLENBQ0QsQ0FDUjtRQUNELDZCQUNFLEVBQUUsRUFBRSxFQUFFLEVBQ04sU0FBUyxFQUFFLE9BQU8sRUFDbEIsT0FBTyxFQUNMLE9BQU87Z0JBQ0wsQ0FBQyxDQUFDO29CQUNFLElBQUksQ0FBQyxRQUFRLEVBQUU7d0JBQ2IsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLElBQUksQ0FBQyxDQUFBO3FCQUNoQjtnQkFDSCxDQUFDO2dCQUNILENBQUMsQ0FBQyxTQUFTLElBR2QseUJBQUksS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLElBQUksRUFBRSxVQUFFLEdBQUcsQ0FBQyxVQUFDLENBQUMsRUFBRSxLQUFLOztZQUFLLE9BQUEsQ0FDM0MseURBQ2lCLFFBQVEsRUFDdkIsUUFBUSxFQUFFLENBQUMsRUFDWCxHQUFHLEVBQUUsS0FBSyxFQUNWLElBQUksRUFBQyxNQUFNLEVBQ1gsU0FBUyxFQUFDLFNBQVMsRUFDbkIsWUFBWSxFQUFDLGVBQWUsRUFDNUIsU0FBUyxFQUFFLEtBQUssS0FBSyxDQUFDLElBQUksU0FBUyxFQUNuQyxPQUFPLEVBQUMsUUFBTyxFQUNmLFNBQVMsRUFBRSxNQUFNLEVBQ2pCLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQ2pDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDLFVBQUcsTUFBQSxTQUFTLENBQUMsS0FBSyxDQUFDLG1DQUFJLEVBQUUsQ0FBRSxDQUFDLENBQUMsQ0FBQyxTQUFTLEVBQ3RELE9BQU8sRUFBRSxZQUFZLEVBQ3JCLE9BQU8sRUFBRSxZQUFZLEVBQ3JCLFFBQVEsRUFBRSxhQUFhLENBQUMsQ0FBQyxDQUFDLFVBQUMsQ0FBQyxJQUFLLE9BQUEsYUFBYSxDQUFDLENBQUMsRUFBRSxLQUFLLENBQUMsRUFBdkIsQ0FBdUIsQ0FBQyxDQUFDLENBQUMsU0FBUyxFQUNwRSxRQUFRLEVBQUUsUUFBUSxJQUNkLE1BQU0sRUFDVixDQUNILENBQUE7U0FBQSxDQUFDLENBQ0U7UUFDTCxJQUFJLElBQUksQ0FDUCxvQkFBQyxJQUFJLElBQ0gsU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsRUFDbEMsTUFBTSxFQUFFLFVBQVUsQ0FBQyxDQUFDLEVBQ3BCLElBQUksRUFBRSxDQUFDLEtBQUssSUFBSSxlQUFlLENBQUMsVUFBVSxDQUFDLElBQUksZUFBZSxDQUFDLFNBQVMsSUFFdkUsSUFBSSxDQUNBLENBQ1IsQ0FDQSxDQUNKLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLEdBQUcsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9vdHAvT3RwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ3RELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUsxRCxJQUFNLFlBQVksR0FBRyxVQUFDLEdBQXVCLEVBQUUsUUFBZ0I7SUFDN0QsSUFBSSxDQUFDLEdBQUc7UUFBRSxPQUFPLElBQUksS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUMvQyxPQUFPLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLFVBQUMsSUFBSSxJQUFLLE9BQUEsQ0FBQyxJQUFJLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQyxFQUFuQyxDQUFtQyxDQUFDLENBQUE7QUFDekUsQ0FBQyxDQUFBO0FBRUQsSUFBTSxZQUFZLEdBQUcsVUFBQyxJQUFvQjtJQUN4QyxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsVUFBQyxJQUFJLElBQUssT0FBQSxDQUFDLElBQUksS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENB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

package/lib/components/otp/index.d.ts

@@ -1,2 +1,2 @@
-import Otp from '../../components/otp/Otp';
+import Otp from './Otp';
 export { Otp };

package/lib/components/otp/index.js

@@ -1,3 +1,3 @@
-import Otp from '../../components/otp/Otp';
+import Otp from './Otp';
 export { Otp };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL290cC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEdBQUcsTUFBTSxzQkFBc0IsQ0FBQTtBQUV0QyxPQUFPLEVBQUUsR0FBRyxFQUFFLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL290cC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEdBQUcsTUFBTSxPQUFPLENBQUE7QUFFdkIsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFBIn0=

package/lib/components/pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PaginationProps } from '../../components/pagination/PaginationProps';
+import { PaginationProps } from './PaginationProps';
 /**
  * Pagination Component
  * @param count {number} Number elements

package/lib/components/pagination/Pagination.js

@@ -1,9 +1,9 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import React, { useEffect, useRef, useState } from 'react';
 import { Icon, IconName } from '../../components/icon';
-import { usePagination } from '../../components/pagination/hooks/usePagination';
-import { hashClass } from '../../helpers/hashClassesHelpers';
+import { hashClass } from '../../helpers';
 import clsx from 'clsx';
-import React from 'react';
+import { useTrilogyContext } from '../../context';
 /**
  * Pagination Component
  * @param count {number} Number elements
@@ -17,24 +17,73 @@ import React from 'react';
  */
 var Pagination = function (_a) {
     var className = _a.className, id = _a.id, length = _a.length, _b = _a.defaultPage, defaultPage = _b === void 0 ? 1 : _b, onClick = _a.onClick, href = _a.href, others = __rest(_a, ["className", "id", "length", "defaultPage", "onClick", "href"]);
-    var classes = hashClass(clsx('pagination', className));
-    var _c = usePagination({
-        defaultPage: defaultPage,
-        onClick: onClick,
-        length: length,
-    }), currentPage = _c.currentPage, handleClickNext = _c.handleClickNext, handleClickPage = _c.handleClickPage, handleClickPrev = _c.handleClickPrev, pager = _c.pager;
+    var _c = __read(useState(defaultPage), 2), currentPage = _c[0], setCurrentPage = _c[1];
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('pagination', className));
+    var prevCurrentPage = useRef(currentPage);
+    var pager = React.useMemo(function () {
+        // Calculate total pages
+        var startPage = 1;
+        var endPage = 5;
+        if (length <= 5) {
+            // less than pageSize(default is 5) total pages so show all
+            startPage = 1;
+            endPage = length;
+        }
+        else {
+            // more than 3 total pages so calculate start and end pages
+            if (currentPage <= 3) {
+                startPage = 1;
+                endPage = 4;
+            }
+            else if (currentPage + 3 >= length) {
+                startPage = length - 3;
+                endPage = length;
+            }
+            else {
+                startPage = currentPage - 1;
+                endPage = currentPage + 1;
+            }
+        }
+        // Create an array of pages
+        var pages = __spreadArray([], __read(Array(endPage + 1 - startPage).keys()), false).map(function (i) { return startPage + i; });
+        // Set pager object
+        return {
+            currentPage: currentPage,
+            length: length,
+            endPage: endPage,
+            pages: pages,
+        };
+    }, [currentPage, length]);
+    useEffect(function () {
+        if (onClick && prevCurrentPage.current !== pager.currentPage) {
+            onClick(pager);
+        }
+        setCurrentPage(pager.currentPage);
+        prevCurrentPage.current = pager.currentPage;
+    }, [pager.currentPage]);
     return (React.createElement("nav", __assign({ id: id, className: classes }, others),
-        React.createElement("a", __assign({ className: hashClass(clsx('pagination-previous')) }, (currentPage === 1 ? { 'aria-disabled': true } : {}), { onClick: handleClickPrev, href: href === null || href === void 0 ? void 0 : href(currentPage - 1) }),
+        React.createElement("a", __assign({ className: hashClass(styled, clsx('pagination-previous')) }, (currentPage === 1 ? { 'aria-disabled': true } : {}), { onClick: function () {
+                if (currentPage !== 1) {
+                    setCurrentPage(currentPage - 1);
+                }
+            }, href: href === null || href === void 0 ? void 0 : href(currentPage - 1) }),
             React.createElement(Icon, { name: IconName.ARROW_LEFT })),
-        React.createElement("ul", { className: hashClass(clsx('pagination-list')) },
+        React.createElement("ul", { className: hashClass(styled, clsx('pagination-list')) },
             !pager.pages.includes(1) && (React.createElement("li", null,
-                React.createElement("span", { className: hashClass(clsx('pagination-ellipsis')) }, "\u2026"))),
+                React.createElement("span", { className: hashClass(styled, clsx('pagination-ellipsis')) }, "\u2026"))),
             pager.pages.map(function (pageNumber) { return (React.createElement("li", { key: pageNumber },
-                React.createElement("a", __assign({ className: hashClass(clsx('pagination-link')) }, (currentPage === pageNumber ? { 'aria-current': true } : {}), { "aria-label": "Aller \u00E0 la page ".concat(pageNumber), onClick: handleClickPage ? function () { return handleClickPage(pageNumber); } : undefined, href: href === null || href === void 0 ? void 0 : href(pageNumber) }), pageNumber))); }),
+                React.createElement("a", __assign({ className: hashClass(styled, clsx('pagination-link')) }, (currentPage === pageNumber ? { 'aria-current': true } : {}), { "aria-label": "Aller \u00E0 la page ".concat(pageNumber), onClick: function () {
+                        setCurrentPage(pageNumber);
+                    }, href: href === null || href === void 0 ? void 0 : href(pageNumber) }), pageNumber))); }),
             !pager.pages.includes(length) && (React.createElement("li", null,
-                React.createElement("span", { className: hashClass(clsx('pagination-ellipsis')) }, "\u2026")))),
-        React.createElement("a", __assign({ className: hashClass(clsx('pagination-next')) }, (currentPage === Math.max(length) ? { 'aria-disabled': true } : {}), { onClick: handleClickNext, href: href === null || href === void 0 ? void 0 : href(currentPage + 1) }),
+                React.createElement("span", { className: hashClass(styled, clsx('pagination-ellipsis')) }, "\u2026")))),
+        React.createElement("a", __assign({ className: hashClass(styled, clsx('pagination-next')) }, (currentPage === Math.max(length) ? { 'aria-disabled': true } : {}), { onClick: function () {
+                if (currentPage !== Math.max(length)) {
+                    setCurrentPage(currentPage + 1);
+                }
+            }, href: href === null || href === void 0 ? void 0 : href(currentPage + 1) }),
             React.createElement(Icon, { name: IconName.ARROW_RIGHT }))));
 };
 export default Pagination;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFnaW5hdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcGFnaW5hdGlvbi9QYWdpbmF0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sNkNBQTZDLENBQUE7QUFFM0UsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekI7Ozs7Ozs7Ozs7R0FVRztBQUNILElBQU0sVUFBVSxHQUFHLFVBQUMsRUFRRjtJQVBoQixJQUFBLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLE1BQU0sWUFBQSxFQUNOLG1CQUFlLEVBQWYsV0FBVyxtQkFBRyxDQUFDLEtBQUEsRUFDZixPQUFPLGFBQUEsRUFDUCxJQUFJLFVBQUEsRUFDRCxNQUFNLGNBUFMsK0RBUW5CLENBRFU7SUFFVCxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRWxELElBQUEsS0FBNEUsYUFBYSxDQUFDO1FBQzlGLFdBQVcsYUFBQTtRQUNYLE9BQU8sU0FBQTtRQUNQLE1BQU0sUUFBQTtLQUNQLENBQUMsRUFKTSxXQUFXLGlCQUFBLEVBQUUsZUFBZSxxQkFBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxlQUFlLHFCQUFBLEVBQUUsS0FBSyxXQUkzRSxDQUFBO0lBRUYsT0FBTyxDQUNMLHNDQUFLLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNO1FBQ3pDLG9DQUNFLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLHFCQUFxQixDQUFDLENBQUMsSUFDN0MsQ0FBQyxXQUFXLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLGVBQWUsRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQ3hELE9BQU8sRUFBRSxlQUFlLEVBQ3hCLElBQUksRUFBRSxJQUFJLGFBQUosSUFBSSx1QkFBSixJQUFJLENBQUcsV0FBVyxHQUFHLENBQUMsQ0FBQztZQUU3QixvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxVQUFVLEdBQUksQ0FDakM7UUFDSiw0QkFBSSxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1lBQzlDLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FDM0I7Z0JBQ0UsOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMsQ0FBQyxhQUFVLENBQzlELENBQ047WUFDQSxLQUFLLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxVQUFDLFVBQVUsSUFBSyxPQUFBLENBQy9CLDRCQUFJLEdBQUcsRUFBRSxVQUFVO2dCQUNqQixvQ0FDRSxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLElBQ3pDLENBQUMsV0FBVyxLQUFLLFVBQVUsQ0FBQyxDQUFDLENBQUMsRUFBRSxjQUFjLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxrQkFDcEQsK0JBQW1CLFVBQVUsQ0FBRSxFQUMzQyxPQUFPLEVBQUUsZUFBZSxDQUFDLENBQUMsQ0FBQyxjQUFNLE9BQUEsZUFBZSxDQUFDLFVBQVUsQ0FBQyxFQUEzQixDQUEyQixDQUFDLENBQUMsQ0FBQyxTQUFTLEVBQ3hFLElBQUksRUFBRSxJQUFJLGFBQUosSUFBSSx1QkFBSixJQUFJLENBQUcsVUFBVSxDQUFDLEtBRXZCLFVBQVUsQ0FDVCxDQUNELENBQ04sRUFaZ0MsQ0FZaEMsQ0FBQztZQUNELENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLElBQUksQ0FDaEM7Z0JBQ0UsOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMsQ0FBQyxhQUFVLENBQzlELENBQ04sQ0FDRTtRQUNMLG9DQUNFLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLENBQUMsSUFDekMsQ0FBQyxXQUFXLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxlQUFlLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxJQUN2RSxPQUFPLEVBQUUsZUFBZSxFQUN4QixJQUFJLEVBQUUsSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFHLFdBQVcsR0FBRyxDQUFDLENBQUM7WUFFN0Isb0JBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxRQUFRLENBQUMsV0FBVyxHQUFJLENBQ2xDLENBQ0EsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxVQUFVLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFnaW5hdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcGFnaW5hdGlvbi9QYWdpbmF0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUMxRCxPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRWxELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUc3Qzs7Ozs7Ozs7OztHQVVHO0FBQ0gsSUFBTSxVQUFVLEdBQUcsVUFBQyxFQVFGO0lBUGhCLElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsTUFBTSxZQUFBLEVBQ04sbUJBQWUsRUFBZixXQUFXLG1CQUFHLENBQUMsS0FBQSxFQUNmLE9BQU8sYUFBQSxFQUNQLElBQUksVUFBQSxFQUNELE1BQU0sY0FQUywrREFRbkIsQ0FEVTtJQUVILElBQUEsS0FBQSxPQUFnQyxRQUFRLENBQVMsV0FBVyxDQUFDLElBQUEsRUFBNUQsV0FBVyxRQUFBLEVBQUUsY0FBYyxRQUFpQyxDQUFBO0lBQzNELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFlBQVksRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRWhFLElBQU0sZUFBZSxHQUFHLE1BQU0sQ0FBUyxXQUFXLENBQUMsQ0FBQTtJQUNuRCxJQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFRO1FBQ2pDLHdCQUF3QjtRQUV4QixJQUFJLFNBQVMsR0FBRyxD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

package/lib/components/pagination/PaginationProps.d.ts

@@ -1,7 +1,6 @@
-import { Pager } from '../../components/pagination/PaginationEnum';
-import { Accessibility } from '../../objects/facets/Accessibility';
+import { Accessibility, Dev } from '../../objects';
+import { Pager } from './PaginationEnum';
 import { CommonProps } from '../../objects/facets/CommonProps';
-import { Dev } from '../../objects/facets/Dev';
 /**
  * Pagination Interface
  */

package/lib/components/pagination/index.d.ts

@@ -1,3 +1,3 @@
-import Pagination from '../../components/pagination/Pagination';
-export * from '../../components/pagination/PaginationEnum';
+import Pagination from './Pagination';
 export { Pagination };
+export * from './PaginationEnum';

package/lib/components/pagination/index.js

@@ -1,4 +1,4 @@
-import Pagination from '../../components/pagination/Pagination';
-export * from '../../components/pagination/PaginationEnum';
+import Pagination from './Pagination';
 export { Pagination };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3BhZ2luYXRpb24vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxVQUFVLE1BQU0sb0NBQW9DLENBQUE7QUFFM0QsY0FBYyx3Q0FBd0MsQ0FBQTtBQUN0RCxPQUFPLEVBQUUsVUFBVSxFQUFFLENBQUEifQ==
+export * from './PaginationEnum';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3BhZ2luYXRpb24vaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxVQUFVLE1BQU0sY0FBYyxDQUFBO0FBRXJDLE9BQU8sRUFBRSxVQUFVLEVBQUUsQ0FBQTtBQUVyQixjQUFjLGtCQUFrQixDQUFBIn0=