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

package/lib/components/otp/Otp.js

@@ -1,69 +1,11 @@
-import { __assign, __read, __rest } from "tslib";
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import { useOtp } from '../../components/otp/hooks/useOtp';
 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, { 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);
-    }
-};
+import React from 'react';
 /**
  * OTP Code Component
  * @param value {string} Code Text Input
@@ -81,47 +23,29 @@ var inputOnKeyUp = function (e) {
  */
 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 _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);
-    };
+    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;
     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: function () {
-                if (!disabled) {
-                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(true);
+        React.createElement("div", { id: id, className: classes, onClick: onFocus
+                ? function () {
+                    if (!disabled) {
+                        onFocus === null || onFocus === void 0 ? void 0 : onFocus(true);
+                    }
                 }
-            } }, 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))));
+                : 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))));
 };
 export default Otp;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9vdHAvT3RwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQTtBQUNuRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ3RELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUsxRCxJQUFNLFlBQVksR0FBRyxVQUFDLEdBQXVCLEVBQUUsUUFBZ0I7SUFDN0QsSUFBSSxDQUFDLEdBQUc7UUFBRSxPQUFPLElBQUksS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUMvQyxPQUFPLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUMsR0FBRyxDQUFDLFVBQUMsSUFBSSxJQUFLLE9BQUEsQ0FBQyxJQUFJLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQyxFQUFuQyxDQUFtQyxDQUFDLENBQUE7QUFDekUsQ0FBQyxDQUFBO0FBRUQsSUFBTSxZQUFZLEdBQUcsVUFBQyxJQUFvQjtJQUN4QyxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsVUFBQyxJQUFJLElBQUssT0FBQSxDQUFDLElBQUksS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiT3RwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9vdHAvT3RwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLCtCQUErQixDQUFBO0FBQ3RELE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUN0RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6Qjs7Ozs7Ozs7Ozs7Ozs7R0FjRztBQUNILElBQU0sR0FBRyxHQUFHLFVBQUMsRUFjRjtJQWJULElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsS0FBSyxXQUFBLEVBQ0wsY0FBVSxFQUFWLE1BQU0sbUJBQUcsQ0FBQyxLQUFBLEVBQ1YsUUFBUSxjQUFBLEVBQ1IsS0FBSyxXQUFBLEVBQ0wsV0FBVyxpQkFBQSxFQUNYLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLEtBQUssV0FBQSxFQUNMLElBQUksVUFBQSxFQUNKLFNBQVMsZUFBQSxFQUNOLE1BQU0sY0FiRSwrSEFjWixDQURVO0lBRVQsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsS0FBSyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBQ3RFLElBQUEsS0FBMkQsTUFBTSxDQUFDO1FBQ3RFLEtBQUssT0FBQTtRQUNMLFFBQVEsVUFBQTtRQUNSLFFBQVEsVUFBQTtRQUNSLFdBQVcsYUFBQTtRQUNYLE1BQU0sUUFBQTtLQUNQLENBQUMsRUFOTSxTQUFTLGVBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUUsWUFBWSxrQkFBQSxFQUFFLFlBQVksa0JBTTFELENBQUE7SUFFRixPQUFPLENBQ0w7UUFDRyxLQUFLLElBQUksQ0FDUixvQkFBQyxJQUFJLElBQ0gsTUFBTSxFQUFFLFVBQVUsQ0FBQyxDQUFDLEVBQ3BCLElBQUksRUFDRixDQUFDLFFBQVEsSUFBSSxlQUFlLENBQUMsWUFBWSxDQUFDO2dCQUMxQyxDQUFDLEtBQUssSUFBSSxlQUFlLENBQUMsVUFBVSxDQUFDO2dCQUNyQyxlQUFlLENBQUMsU0FBUyxJQUcxQixLQUFLLENBQ0QsQ0FDUjtRQUNELDZCQUNFLEVBQUUsRUFBRSxFQUFFLEVBQ04sU0FBUyxFQUFFLE9BQU8sRUFDbEIsT0FBTyxFQUNMLE9BQU87Z0JBQ0wsQ0FBQyxDQUFDO29CQUNFLElBQUksQ0FBQyxRQUFRLEVBQUU7d0JBQ2IsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLElBQUksQ0FBQyxDQUFBO3FCQUNoQjtnQkFDSCxDQUFDO2dCQUNILENBQUMsQ0FBQyxTQUFTLElBR2QseUJBQUksS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLElBQUksRUFBRSxVQUFFLEdBQUcsQ0FBQyxVQUFDLENBQUMsRUFBRSxLQUFLOztZQUFLLE9BQUEsQ0FDM0MseURBQ2lCLFFBQVEsRUFDdkIsUUFBUSxFQUFFLENBQUMsRUFDWCxHQUFHLEVBQUUsS0FBSyxFQUNWLElBQUksRUFBQyxNQUFNLEVBQ1gsU0FBUyxFQUFDLFNBQVMsRUFDbkIsWUFBWSxFQUFDLGVBQWUsRUFDNUIsU0FBUyxFQUFFLEtBQUssS0FBSyxDQUFDLElBQUksU0FBUyxFQUNuQyxPQUFPLEVBQUMsUUFBTyxFQUNmLFNBQVMsRUFBRSxNQUFNLEVBQ2pCLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQ2pDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQyxDQUFDLFVBQUcsTUFBQSxTQUFTLENBQUMsS0FBSyxDQUFDLG1DQUFJLEVBQUUsQ0FBRSxDQUFDLENBQUMsQ0FBQyxTQUFTLEVBQ3RELE9BQU8sRUFBRSxZQUFZLEVBQ3JCLE9BQU8sRUFBRSxZQUFZLEVBQ3JCLFFBQVEsRUFBRSxhQUFhLENBQUMsQ0FBQyxDQUFDLFVBQUMsQ0FBQyxJQUFLLE9BQUEsYUFBYSxDQUFDLENBQUMsRUFBRSxLQUFLLENBQUMsRUFBdkIsQ0FBdUIsQ0FBQyxDQUFDLENBQUMsU0FBUyxFQUNwRSxRQUFRLEVBQUUsUUFBUSxJQUNkLE1BQU0sRUFDVixDQUNILENBQUE7U0FBQSxDQUFDLENBQ0U7UUFDTCxJQUFJLElBQUksQ0FDUCxvQkFBQyxJQUFJLElBQ0gsU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsRUFDbEMsTUFBTSxFQUFFLFVBQVUsQ0FBQyxDQUFDLEVBQ3BCLElBQUksRUFBRSxDQUFDLEtBQUssSUFBSSxlQUFlLENBQUMsVUFBVSxDQUFDLElBQUksZUFBZSxDQUFDLFNBQVMsSUFFdkUsSUFBSSxDQUNBLENBQ1IsQ0FDQSxDQUNKLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLEdBQUcsQ0FBQSJ9

package/lib/components/otp/hooks/useOtp.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+interface IProps {
+    value?: string;
+    disabled?: boolean;
+    onChange?: (code?: string) => void;
+    onCompleted?: (code?: string) => void;
+    length: number;
+}
+export declare const useOtp: ({ value, disabled, length, onChange, onCompleted }: IProps) => {
+    codeInput: (number | null)[];
+    inputOnKeyUp?: undefined;
+    inputOnFocus?: undefined;
+    inputOnChange?: undefined;
+} | {
+    codeInput: (number | null)[];
+    inputOnKeyUp: (e: React.KeyboardEvent<HTMLInputElement>) => false | void;
+    inputOnFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+    inputOnChange: (e: React.ChangeEvent<HTMLInputElement>, idx: number) => void;
+};
+export {};

package/lib/components/otp/hooks/useOtp.js

@@ -0,0 +1,100 @@
+import { __read } from "tslib";
+import { isServer } from '../../../helpers/isServer';
+import React from 'react';
+export var useOtp = function (_a) {
+    var value = _a.value, disabled = _a.disabled, length = _a.length, onChange = _a.onChange, onCompleted = _a.onCompleted;
+    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);
+        }
+    };
+    if (isServer) {
+        return {
+            codeInput: stringToCode(value, length) || new Array(length).fill(null),
+        };
+    }
+    var _b = __read(React.useState(stringToCode(value, length) || new Array(length).fill(null)), 2), codeInput = _b[0], setCodeInput = _b[1];
+    var hasChanged = React.useRef(false);
+    React.useEffect(function () {
+        if (!disabled) {
+            isCompleted(codeInput) && (onCompleted === null || onCompleted === void 0 ? void 0 : onCompleted(codeToString(codeInput)));
+        }
+    }, [length, codeInput, onCompleted, disabled]);
+    React.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 { codeInput: codeInput, inputOnKeyUp: inputOnKeyUp, inputOnFocus: inputOnFocus, inputOnChange: inputOnChange };
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlT3RwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9vdHAvaG9va3MvdXNlT3RwLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBQzdDLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQVV6QixNQUFNLENBQUMsSUFBTSxNQUFNLEdBQUcsVUFBQyxFQUEwRDtRQUF4RCxLQUFLLFdBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxNQUFNLFlBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxXQUFXLGlCQUFBO0lBR3JFLElBQU0sWUFBWSxHQUFHLFVBQUMsR0FBdUIsRUFBRSxRQUFnQjtRQUM3RCxJQUFJLENBQUMsR0FBRztZQUFFLE9BQU8sSUFBSSxLQUFLLENBQUMsUUFBUSxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFBO1FBQy9DLE9BQU8sR0FBRyxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQyxHQUFHLENBQUMsVUFBQyxJQUFJLElBQUssT0FBQSxDQUFDLElBQUksS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDLEVBQW5DLENBQW1DLENBQUMsQ0FBQTtJQUN6RSxDQUFDLENBQUE7SUFFRCxJQUFNLFlBQVksR0FBRyxVQUFDLElBQW9CO1FBQ3hDLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQyxVQUFDLElBQUksSUFBSyxPQUFBLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsRUFBNUIsQ0FBNEIsQ0FBQyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQTtJQUNsRSxDQUFDLENBQUE7SUFFRCxJQUFNLFdBQVcsR0FBRyxVQUFDLE1BQXNCO1FBQ3pDLE9BQU8sTUFB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

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

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

package/lib/components/otp/index.js

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

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

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

package/lib/components/pagination/Pagination.js

@@ -1,9 +1,9 @@
-import { __assign, __read, __rest, __spreadArray } from "tslib";
-import React, { useEffect, useRef, useState } from 'react';
+import { __assign, __rest } from "tslib";
 import { Icon, IconName } from '../../components/icon';
-import { hashClass } from '../../helpers';
+import { usePagination } from '../../components/pagination/hooks/usePagination';
+import { hashClass } from '../../helpers/hashClassesHelpers';
 import clsx from 'clsx';
-import { useTrilogyContext } from '../../context';
+import React from 'react';
 /**
  * Pagination Component
  * @param count {number} Number elements
@@ -17,73 +17,24 @@ import { useTrilogyContext } from '../../context';
  */
 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 _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]);
+    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;
     return (React.createElement("nav", __assign({ id: id, className: classes }, others),
-        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("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(Icon, { name: IconName.ARROW_LEFT })),
-        React.createElement("ul", { className: hashClass(styled, clsx('pagination-list')) },
+        React.createElement("ul", { className: hashClass(clsx('pagination-list')) },
             !pager.pages.includes(1) && (React.createElement("li", null,
-                React.createElement("span", { className: hashClass(styled, clsx('pagination-ellipsis')) }, "\u2026"))),
+                React.createElement("span", { className: hashClass(clsx('pagination-ellipsis')) }, "\u2026"))),
             pager.pages.map(function (pageNumber) { return (React.createElement("li", { key: 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))); }),
+                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))); }),
             !pager.pages.includes(length) && (React.createElement("li", null,
-                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("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(Icon, { name: IconName.ARROW_RIGHT }))));
 };
 export default Pagination;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFnaW5hdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcGFnaW5hdGlvbi9QYWdpbmF0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUMxRCxPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRWxELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUc3Qzs7Ozs7Ozs7OztHQVVHO0FBQ0gsSUFBTSxVQUFVLEdBQUcsVUFBQyxFQVFGO0lBUGhCLElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsTUFBTSxZQUFBLEVBQ04sbUJBQWUsRUFBZixXQUFXLG1CQUFHLENBQUMsS0FBQSxFQUNmLE9BQU8sYUFBQSxFQUNQLElBQUksVUFBQSxFQUNELE1BQU0sY0FQUywrREFRbkIsQ0FEVTtJQUVILElBQUEsS0FBQSxPQUFnQyxRQUFRLENBQVMsV0FBVyxDQUFDLElBQUEsRUFBNUQsV0FBVyxRQUFBLEVBQUUsY0FBYyxRQUFpQyxDQUFBO0lBQzNELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFlBQVksRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRWhFLElBQU0sZUFBZSxHQUFHLE1BQU0sQ0FBUyxXQUFXLENBQUMsQ0FBQTtJQUNuRCxJQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFRO1FBQ2pDLHdCQUF3QjtRQUV4QixJQUFJLFNBQVMsR0FBRyxD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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUGFnaW5hdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcGFnaW5hdGlvbi9QYWdpbmF0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sNkNBQTZDLENBQUE7QUFFM0UsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekI7Ozs7Ozs7Ozs7R0FVRztBQUNILElBQU0sVUFBVSxHQUFHLFVBQUMsRUFRRjtJQVBoQixJQUFBLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLE1BQU0sWUFBQSxFQUNOLG1CQUFlLEVBQWYsV0FBVyxtQkFBRyxDQUFDLEtBQUEsRUFDZixPQUFPLGFBQUEsRUFDUCxJQUFJLFVBQUEsRUFDRCxNQUFNLGNBUFMsK0RBUW5CLENBRFU7SUFFVCxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRWxELElBQUEsS0FBNEUsYUFBYSxDQUFDO1FBQzlGLFdBQVcsYUFBQTtRQUNYLE9BQU8sU0FBQTtRQUNQLE1BQU0sUUFBQTtLQUNQLENBQUMsRUFKTSxXQUFXLGlCQUFBLEVBQUUsZUFBZSxxQkFBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxlQUFlLHFCQUFBLEVBQUUsS0FBSyxXQUkzRSxDQUFBO0lBRUYsT0FBTyxDQUNMLHNDQUFLLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNO1FBQ3pDLG9DQUNFLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLHFCQUFxQixDQUFDLENBQUMsSUFDN0MsQ0FBQyxXQUFXLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLGVBQWUsRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLElBQ3hELE9BQU8sRUFBRSxlQUFlLEVBQ3hCLElBQUksRUFBRSxJQUFJLGFBQUosSUFBSSx1QkFBSixJQUFJLENBQUcsV0FBVyxHQUFHLENBQUMsQ0FBQztZQUU3QixvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxVQUFVLEdBQUksQ0FDakM7UUFDSiw0QkFBSSxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1lBQzlDLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FDM0I7Z0JBQ0UsOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMsQ0FBQyxhQUFVLENBQzlELENBQ047WUFDQSxLQUFLLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxVQUFDLFVBQVUsSUFBSyxPQUFBLENBQy9CLDRCQUFJLEdBQUcsRUFBRSxVQUFVO2dCQUNqQixvQ0FDRSxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDLElBQ3pDLENBQUMsV0FBVyxLQUFLLFVBQVUsQ0FBQyxDQUFDLENBQUMsRUFBRSxjQUFjLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxrQkFDcEQsK0JBQW1CLFVBQVUsQ0FBRSxFQUMzQyxPQUFPLEVBQUUsZUFBZSxDQUFDLENBQUMsQ0FBQyxjQUFNLE9BQUEsZUFBZSxDQUFDLFVBQVUsQ0FBQyxFQUEzQixDQUEyQixDQUFDLENBQUMsQ0FBQyxTQUFTLEVBQ3hFLElBQUksRUFBRSxJQUFJLGFBQUosSUFBSSx1QkFBSixJQUFJLENBQUcsVUFBVSxDQUFDLEtBRXZCLFVBQVUsQ0FDVCxDQUNELENBQ04sRUFaZ0MsQ0FZaEMsQ0FBQztZQUNELENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLElBQUksQ0FDaEM7Z0JBQ0UsOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMscUJBQXFCLENBQUMsQ0FBQyxhQUFVLENBQzlELENBQ04sQ0FDRTtRQUNMLG9DQUNFLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLENBQUMsSUFDekMsQ0FBQyxXQUFXLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxlQUFlLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxJQUN2RSxPQUFPLEVBQUUsZUFBZSxFQUN4QixJQUFJLEVBQUUsSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFHLFdBQVcsR0FBRyxDQUFDLENBQUM7WUFFN0Isb0JBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxRQUFRLENBQUMsV0FBVyxHQUFJLENBQ2xDLENBQ0EsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxVQUFVLENBQUEifQ==

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

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

package/lib/components/pagination/hooks/usePagination.d.ts

@@ -0,0 +1,25 @@
+import { Pager } from '../../../components/pagination/PaginationEnum';
+interface IProps {
+    length: number;
+    defaultPage: number;
+    onClick?: (pager: Pager) => void;
+}
+export declare const usePagination: ({ defaultPage, onClick, length }: IProps) => {
+    currentPage: number;
+    pager: {
+        currentPage: number;
+        length: number;
+        endPage: number;
+        pages: number[];
+    };
+    handleClickNext?: undefined;
+    handleClickPage?: undefined;
+    handleClickPrev?: undefined;
+} | {
+    currentPage: number;
+    handleClickNext: () => void;
+    handleClickPage: (pageNumber: number) => void;
+    handleClickPrev: () => void;
+    pager: Pager;
+};
+export {};

package/lib/components/pagination/hooks/usePagination.js

@@ -0,0 +1,76 @@
+import { __read, __spreadArray } from "tslib";
+import { isServer } from '../../../helpers/isServer';
+import React from 'react';
+export var usePagination = function (_a) {
+    var defaultPage = _a.defaultPage, onClick = _a.onClick, length = _a.length;
+    if (isServer) {
+        return {
+            currentPage: defaultPage,
+            pager: calcPager(defaultPage, length),
+        };
+    }
+    var _b = __read(React.useState(defaultPage), 2), currentPage = _b[0], setCurrentPage = _b[1];
+    var prevCurrentPage = React.useRef(currentPage);
+    var pager = React.useMemo(function () {
+        return calcPager(currentPage, length);
+    }, [currentPage, length]);
+    var handleClickPrev = React.useCallback(function () {
+        if (currentPage !== 1)
+            setCurrentPage(currentPage - 1);
+    }, [currentPage]);
+    var handleClickNext = React.useCallback(function () {
+        if (currentPage !== Math.max(length))
+            setCurrentPage(currentPage + 1);
+    }, [currentPage]);
+    var handleClickPage = React.useCallback(function (pageNumber) {
+        setCurrentPage(pageNumber);
+    }, []);
+    React.useEffect(function () {
+        if (onClick && prevCurrentPage.current !== pager.currentPage) {
+            onClick(pager);
+        }
+        setCurrentPage(pager.currentPage);
+        prevCurrentPage.current = pager.currentPage;
+    }, [pager.currentPage]);
+    return {
+        currentPage: currentPage,
+        handleClickNext: handleClickNext,
+        handleClickPage: handleClickPage,
+        handleClickPrev: handleClickPrev,
+        pager: pager,
+    };
+};
+var calcPager = function (currentPage, length) {
+    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,
+    };
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlUGFnaW5hdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvcGFnaW5hdGlvbi9ob29rcy91c2VQYWdpbmF0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG9CQUFvQixDQUFBO0FBQzdDLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQVF6QixNQUFNLENBQUMsSUFBTSxhQUFhLEdBQUcsVUFBQyxFQUF3QztRQUF0QyxXQUFXLGlCQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsTUFBTSxZQUFBO0lBQzFELElBQUksUUFBUSxFQUFFO1FBQ1osT0FBTztZQUNMLFdBQVcsRUFBRSxXQUFXO1lBQ3hCLEtBQUssRUFBRSxTQUFTLENBQUMsV0FBVyxFQUFFLE1BQU0sQ0FBQztTQUN0QyxDQUFBO0tBQ0Y7SUFFSyxJQUFBLEtBQUEsT0FBZ0MsS0FBSyxDQUFDLFFBQVEsQ0FBUyxXQUFXLENBQUMsSUFBQSxFQUFsRSxXQUFXLFFBQUEsRUFBRSxjQUFjLFFBQXVDLENBQUE7SUFDekUsSUFBTSxlQUFlLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBUyxXQUFXLENBQUMsQ0FBQTtJQUV6RCxJQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFRO1FBQ2pDLE9BQU8sU0FBUyxDQUFDLFdBQVcsRUFBRSxNQUFNLENBQUMsQ0FBQTtJQUN2QyxDQUFDLEVBQUUsQ0FBQyxXQUFXLEVBQUUsTUFBTSxDQUFDLENBQUMsQ0FBQTtJQUV6QixJQUFNLGVBQWUsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUFDO1FBQ3hDLElBQUksV0FBVyxLQUFLLENBQUM7WUFBRSxjQUFjLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQyxDQUFBO0lBQ3hELENBQUMsRUFBRSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUE7SUFFakIsSUFBTSxlQUFlLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQztRQUN4QyxJQUFJLFdBQVcsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQztZQUFFLGNBQWMsQ0FBQyxXQUFXLEdBQUcsQ0FBQyxDQUFDLENBQUE7SUFDdkUsQ0FBQyxFQUFFLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQTtJQUVqQixJQUFNLGVBQWUsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUFDLFVBQUMsVUFBa0I7UUFDM0QsY0FBYyxDQUFDLFVBQVUsQ0FBQyxDQUFBO0lBQzVCLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQTtJQUVOLEtBQUssQ0FBQyxTQUFTLENBQUM7UUFDZCxJQUFJLE9BQU8sSUFBSSxlQUFlLENBQUMsT0FBTyxLQUFLLEtBQUssQ0FBQyxXQUFXLEVBQUU7WUFDNUQsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFBO1NBQ2Y7UUFDRCxjQUFjLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFBO1FBQ2pDLGVBQWUsQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQTtJQUM3QyxDQUFDLEVBQUUsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQTtJQUV2QixPQUFPO1FBQ0wsV0FBVyxhQUFBO1FBQ1gsZUFBZSxpQkFBQTtRQUNmLGVBQWUsaUJBQUE7UUFDZixlQUFlLGlCQUFBO1FBQ2YsS0FBSyxPQUFBO0tBQ04sQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELElBQU0sU0FBUyxHQUFHLFVBQUMsV0FBbUIsRUFBRSxNQUFjO0lBQ3BELElBQUksU0FBUyxHQUFHLENBQUMsQ0FBQTtJQUNqQixJQUFJLE9BQU8sR0FBRyxDQUFDLENBQUE7SUFFZixJQUFJLE1BQU0sSUFBSSxDQUFDLEVBQUU7UUFDZiwyREFBMkQ7UUFDM0QsU0FBUyxHQUFHLENBQUMsQ0FBQTtRQUNiLE9BQU8sR0FBRyxNQUFNLENBQUE7S0FDakI7U0FBTTtRQUNMLDJEQUEyRDtRQUMzRCxJQUFJLFdBQVcsSUFBSSxDQUFDLEVBQUU7WUFDcEIsU0FBUyxHQUFHLENBQUMsQ0FBQTtZQUNiLE9BQU8sR0FBRyxDQUFDLENBQUE7U0FDWjthQUFNLElBQUksV0FBVyxHQUFHLENBQUMsSUFBSSxNQUFNLEVBQUU7WUFDcEMsU0FBUyxHQUFHLE1BQU0sR0FBRyxDQUFDLENBQUE7WUFDdEIsT0FBTyxHQUFHLE1BQU0sQ0FBQTtTQUNqQjthQUFNO1lBQ0wsU0FBUyxHQUFHLFdBQVcsR0FBRyxDQUFDLENBQUE7WUFDM0IsT0FBTyxHQUFHLFdBQVcsR0FBRyxDQUFDLENBQUE7U0FDMUI7S0FDRjtJQUVELDJCQUEyQjtJQUMzQixJQUFNLEtBQUssR0FBRyx5QkFBSSxLQUFLLENBQUMsT0FBTyxHQUFHLENBQUMsR0FBRyxTQUFTLENBQUMsQ0FBQyxJQUFJLEVBQUUsVUFBRSxHQUFHLENBQUMsVUFBQyxDQUFDLElBQUssT0FBQSxTQUFTLEdBQUcsQ0FBQyxFQUFiLENBQWEsQ0FBQyxDQUFBO0lBRWxGLG1CQUFtQjtJQUNuQixPQUFPO1FBQ0wsV0FBVyxhQUFBO1FBQ1gsTUFBTSxRQUFBO1FBQ04sT0FBTyxTQUFBO1FBQ1AsS0FBSyxPQUFBO0tBQ04sQ0FBQTtBQUNILENBQUMsQ0FBQSJ9

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

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

package/lib/components/pagination/index.js

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

package/lib/components/popover/Popover.js

@@ -1,9 +1,8 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import { is } from '../../services/classify';
 import { hashClass } from '../../helpers/hashClassesHelpers';
+import { is } from '../../services/classify';
 import clsx from 'clsx';
-import { useTrilogyContext } from '../../context/index';
+import * as React from 'react';
 /**
  * Popover Component
  * @param children {ReactNode} Popover children
@@ -17,11 +16,10 @@ import { useTrilogyContext } from '../../context/index';
  */
 var Popover = function (_a) {
     var className = _a.className, id = _a.id, direction = _a.direction, children = _a.children, active = _a.active, arrowPosition = _a.arrowPosition, trigger = _a.trigger, others = __rest(_a, ["className", "id", "direction", "children", "active", "arrowPosition", "trigger"]);
-    var styled = useTrilogyContext().styled;
-    var classes = hashClass(styled, clsx('popover', direction && is("popover-".concat(direction)), active && is('popover-active'), arrowPosition && is("arrow-".concat(arrowPosition)), className));
+    var classes = hashClass(clsx('popover', direction && is("popover-".concat(direction)), active && is('popover-active'), arrowPosition && is("arrow-".concat(arrowPosition)), className));
     return (React.createElement("div", __assign({ id: id, className: classes }, others),
-        React.createElement("div", { className: hashClass(styled, 'popover-content') }, children),
+        React.createElement("div", { className: hashClass('popover-content') }, children),
         trigger && trigger));
 };
 export default Popover;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUG9wb3Zlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcG9wb3Zlci9Qb3BvdmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBRXhDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUJBQWlCLENBQUE7QUFFbkQ7Ozs7Ozs7Ozs7R0FVRztBQUNILElBQU0sT0FBTyxHQUFHLFVBQUMsRUFTa0I7SUFSaEIsSUFBQSxTQUFTLGVBQUEsRUFDVCxFQUFFLFFBQUEsRUFDRixTQUFTLGVBQUEsRUFDVCxRQUFRLGNBQUEsRUFDUixNQUFNLFlBQUEsRUFDTixhQUFhLG1CQUFBLEVBQ2IsT0FBTyxhQUFBLEVBQ0osTUFBTSxjQVJYLGtGQVNDLENBRFU7SUFFbEIsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUN2QixNQUFNLEVBQ04sSUFBSSxDQUNGLFNBQVMsRUFDVCxTQUFTLElBQUksRUFBRSxDQUFDLGtCQUFXLFNBQVMsQ0FBRSxDQUFDLEVBQ3ZDLE1BQU0sSUFBSSxFQUFFLENBQUMsZ0JBQWdCLENBQUMsRUFDOUIsYUFBYSxJQUFJLEVBQUUsQ0FBQyxnQkFBUyxhQUFhLENBQUUsQ0FBQyxFQUM3QyxTQUFTLENBQ1YsQ0FDRixDQUFBO0lBRUQsT0FBTyxDQUNMLHNDQUFLLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNO1FBQ3pDLDZCQUFLLFNBQVMsRUFBRSxTQUFTLENBQUMsTUFBTSxFQUFFLGlCQUFpQixDQUFDLElBQUcsUUFBUSxDQUFPO1FBQ3JFLE9BQU8sSUFBSSxPQUFPLENBQ2YsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxPQUFPLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUG9wb3Zlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcG9wb3Zlci9Qb3BvdmVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHOUI7Ozs7Ozs7Ozs7R0FVRztBQUNILElBQU0sT0FBTyxHQUFHLFVBQUMsRUFTQztJQVJoQixJQUFBLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLFNBQVMsZUFBQSxFQUNULFFBQVEsY0FBQSxFQUNSLE1BQU0sWUFBQSxFQUNOLGFBQWEsbUJBQUEsRUFDYixPQUFPLGFBQUEsRUFDSixNQUFNLGNBUk0sa0ZBU2hCLENBRFU7SUFFVCxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLElBQUksQ0FDRixTQUFTLEVBQ1QsU0FBUyxJQUFJLEVBQUUsQ0FBQyxrQkFBVyxTQUFTLENBQUUsQ0FBQyxFQUN2QyxNQUFNLElBQUksRUFBRSxDQUFDLGdCQUFnQixDQUFDLEVBQzlCLGFBQWEsSUFBSSxFQUFFLENBQUMsZ0JBQVMsYUFBYSxDQUFFLENBQUMsRUFDN0MsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sQ0FDTCxzQ0FBSyxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTTtRQUN6Qyw2QkFBSyxTQUFTLEVBQUUsU0FBUyxDQUFDLGlCQUFpQixDQUFDLElBQUcsUUFBUSxDQUFPO1FBQzdELE9BQU8sSUFBSSxPQUFPLENBQ2YsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxPQUFPLENBQUEifQ==