@trilogy-ds/react 4.0.7-SC-beta-1 → 4.0.7-beta-1

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=

package/lib/components/popover/Popover.js

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

package/lib/components/price/Price.js

@@ -1,4 +1,5 @@
 import { __assign, __rest } from "tslib";
+import { useTrilogyContext } from '../../context';
 import { hashClass } from '../../helpers';
 import { Alignable } from '../../objects';
 import { has, is } from '../../services/classify';
@@ -27,8 +28,9 @@ import { checkCents } from './PriceHelpers';
 var Price = function (_a) {
     var _b, _c;
     var className = _a.className, id = _a.id, amount = _a.amount, mention = _a.mention, period = _a.period, _d = _a.hideCents, hideCents = _d === void 0 ? false : _d, level = _a.level, inverted = _a.inverted, align = _a.align, accessibilityLabel = _a.accessibilityLabel, oldAmount = _a.oldAmount, overline = _a.overline, others = __rest(_a, ["className", "id", "amount", "mention", "period", "hideCents", "level", "inverted", "align", "accessibilityLabel", "oldAmount", "overline"]);
-    var classes = hashClass(clsx('price', inverted && is('inverted'), overline && has('suptitle'), className));
-    var classesStrike = hashClass(clsx('price', inverted && is('inverted'), oldAmount && 'strike', overline && has('suptitle'), className));
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('price', inverted && is('inverted'), overline && has('suptitle'), className));
+    var classesStrike = hashClass(styled, clsx('price', inverted && is('inverted'), oldAmount && 'strike', overline && has('suptitle'), className));
     var amountComponent = null;
     var oldAmountComponent = null;
     var tagAmountComponent = null;
@@ -42,13 +44,13 @@ var Price = function (_a) {
         var centsDisplayed = (!hideCents && "\u20AC".concat(cents)) || '€';
         oldAmountComponent = (React.createElement("span", __assign({ "aria-hidden": 'true', className: classesStrike }, others),
             React.createElement(Text, { markup: TextMarkup.SPAN }, "".concat(wholeStrike)),
-            React.createElement("span", { className: hashClass(clsx('price-details')) },
-                React.createElement("span", { className: hashClass(clsx('cents')) },
+            React.createElement("span", { className: hashClass(styled, clsx('price-details')) },
+                React.createElement("span", { className: hashClass(styled, clsx('cents')) },
                     centsDisplayed === '€' ? React.createElement(React.Fragment, null,
                         "\u00A0",
                         centsDisplayed) : centsDisplayed,
                     mention && React.createElement("sup", null, mention)),
-                period && React.createElement("span", { className: hashClass(clsx('period')) },
+                period && React.createElement("span", { className: hashClass(styled, clsx('period')) },
                     "/",
                     period))));
     }
@@ -62,25 +64,25 @@ var Price = function (_a) {
         var centsDisplayed = (!hideCents && "\u20AC".concat(cents)) || '€';
         amountComponent = (React.createElement("span", __assign({ "aria-hidden": 'true', "aria-label": accessibilityLabel, className: classes }, others),
             React.createElement(Text, { markup: TextMarkup.SPAN }, "".concat(whole)),
-            React.createElement("span", { className: hashClass(clsx('price-details')) },
-                React.createElement("span", { className: hashClass(clsx('cents')) },
+            React.createElement("span", { className: hashClass(styled, clsx('price-details')) },
+                React.createElement("span", { className: hashClass(styled, clsx('cents')) },
                     centsDisplayed === '€' ? React.createElement(React.Fragment, null,
                         "\u00A0",
                         centsDisplayed) : centsDisplayed,
                     mention && React.createElement("sup", null, mention)),
-                period && React.createElement("span", { className: hashClass(clsx('period')) },
+                period && React.createElement("span", { className: hashClass(styled, clsx('period')) },
                     "/",
                     period))));
     }
-    return (React.createElement("div", { id: id, className: hashClass(clsx('price-container', is("level-".concat(level || '1')), (align == Alignable.ALIGNED_START && is('justified-left')) ||
+    return (React.createElement("div", { id: id, className: hashClass(styled, clsx('price-container', is("level-".concat(level || '1')), (align == Alignable.ALIGNED_START && is('justified-left')) ||
             (align == Alignable.ALIGNED_CENTER && is('justified-center')) ||
             (align == Alignable.ALIGNED_END && is('justified-right')) ||
             '')) },
-        overline && React.createElement("p", { className: hashClass(clsx('overline')) }, overline),
+        overline && React.createElement("p", { className: hashClass(styled, clsx('overline')) }, overline),
         oldAmountComponent,
         amountComponent,
         tagAmountComponent,
         accessibilityLabel && React.createElement("p", { className: 'sr-only' }, accessibilityLabel)));
 };
 export default Price;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3ByaWNlL1ByaWNlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDN0MsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sU0FBUyxDQUFBO0FBQzFDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQTtBQUczQzs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FpQkc7QUFDSCxJQUFNLEtBQUssR0FBRyxVQUFDLEVBY0Y7O0lBYlgsSUFBQSxTQUFTLGVBQUEsRUFDVCxFQUFFLFFBQUEsRUFDRixNQUFNLFlBQUEsRUFDTixPQUFPLGFBQUEsRUFDUCxNQUFNLFlBQUEsRUFDTixpQkFBaUIsRUFBakIsU0FBUyxtQkFBRyxLQUFLLEtBQUEsRUFDakIsS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsS0FBSyxXQUFBLEVBQ0wsa0JBQWtCLHdCQUFBLEVBQ2xCLFNBQVMsZUFBQSxFQUNULFFBQVEsY0FBQSxFQUNMLE1BQU0sY0FiSSw0SUFjZCxDQURVO0lBRVQsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFBRSxRQUFRLElBQUksR0FBRyxDQUFDLFVBQVUsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFFNUcsSUFBTSxhQUFhLEdBQUcsU0FBUyxDQUM3QixJQUFJLENBQUMsT0FB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3ByaWNlL1ByaWNlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQzdDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxNQUFNLFNBQVMsQ0FBQTtBQUMxQyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0JBQWdCLENBQUE7QUFHM0M7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUJHO0FBQ0gsSUFBTSxLQUFLLEdBQUcsVUFBQyxFQWNGOztJQWJYLElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsTUFBTSxZQUFBLEVBQ04sT0FBTyxhQUFBLEVBQ1AsTUFBTSxZQUFBLEVBQ04saUJBQWlCLEVBQWpCLFNBQVMsbUJBQUcsS0FBSyxLQUFBLEVBQ2pCLEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLEtBQUssV0FBQSxFQUNMLGtCQUFrQix3QkFBQSxFQUNsQixTQUFTLGVBQUEsRUFDVCxRQUFRLGNBQUEsRUFDTCxNQUFNLGNBYkksNElBY2QsQ0FEVTtJQUVELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE9BQU8sRUFBRSxRQUFRLElBQUksRUFBRSxDQUFDLFVBQVUsQ0FBQyxFQUFFLFFBQVEsSUFBSSxHQUFHLENBQUMsVUFBVSxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUVwSCxJQUFNLGFBQWEsR0FBRyxTQUFTLENBQzdCLE1BQU0sRUFDTixJQUFJLENBQUMsT0FBTyxFQUFFLFFBQVEsSUFBSSxFQUFFLENBQUMsVUFBVSxDQUFDLEVBQUUsU0FBUyxJQUFJLFFBQVEsRUFBRSxRQUFRLElBQUksR0FBRyxDQUFDLFVBQVUsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUN6RyxDQUFBO0lBRUQsSUFBSSxlQUFlLEdBQUcsSUFBSSxDQUFBO0lBQzFCLElBQUksa0JBQWtCLEdBQUcsSUFBSSxDQUFBO0lBQzdCLElBQU0sa0JBQWtCLEdBQUcsSUFBSSxDQUFBO0lBRS9CLElBQUksU0FBUyxLQUFLLFNBQVMsRUFBRTtRQUMzQixJQUFNLGdCQUFnQixHQUFHLFNBQVMsSUFBSSxTQUFTLEdBQUcsQ0FBQyxDQUFBO1FBQ25ELElBQU0sb0JBQW9CLEdBQUcsU0FBUyxJQUFJLElBQUksQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUE7UUFDN0QsSUFBTSxtQkFBbUIsR0FBRyxvQkFBb0IsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLG9CQUFvQixDQUFDLENBQUE7UUFDcEYsSUFBTSxXQUFXLEdBQUcsZ0JBQWdCLElBQUksbUJBQW1CLENBQUMsQ0FBQyxDQUFDLENBQUMsbUJBQW1CLENBQUMsQ0FBQyxDQUFDLG1CQUFtQixDQUFBO1FBRXhHLElBQUksS0FBSyxHQUFHLFVBQVUsQ0FBQyxDQUFBLE1BQUEsb0JBQW9CLENBQUMsUUFBUSxFQUFFLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQywwQ0FBRSxTQUFTLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxLQUFJLEVBQUUsQ0FBQyxDQUFBO1FBQy9GLEtBQUssR0FBRyxDQUFDLEtBQUssSUFBSSxLQUFLLENBQUMsTUFBTSxLQUFLLENBQUMsSUFBSSxVQUFHLEtBQUssTUFBRyxDQUFDLElBQUksS0FBSyxDQUFBO1FBQzdELElBQU0sY0FBYyxHQUFHLENBQUMsQ0FBQyxTQUFTLElBQUksZ0JBQUksS0FBSyxDQUFFLENBQUMsSUFBSSxHQUFHLENBQUE7UUFFekQsa0JBQWtCLEdBQUcsQ0FDbkIsc0RBQWtCLE1BQU0sRUFBQyxTQUFTLEVBQUUsYUFBYSxJQUFNLE1BQU07WUFDM0Qsb0JBQUMsSUFBSSxJQUFDLE1BQU0sRUFBRSxVQUFVLENBQUMsSUFBSSxJQUFHLFVBQUcsV0FBVyxDQUFFLENBQVE7WUFDeEQsOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDO2dCQUN2RCw4QkFBTSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7b0JBQzlDLGNBQWMsS0FBSyxHQUFHLENBQUMsQ0FBQyxDQUFDOzt3QkFBUyxjQUFjLENBQUksQ0FBQyxDQUFDLENBQUMsY0FBYztvQkFDckUsT0FBTyxJQUFJLGlDQUFNLE9BQU8sQ0FBTyxDQUMzQjtnQkFDTixNQUFNLElBQUksOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDOztvQkFBSSxNQUFNLENBQVEsQ0FDMUUsQ0FDRixDQUNSLENBQUE7S0FDRjtJQUVELElBQUksTUFBTSxLQUFLLFNBQVMsRUFBRTtRQUN4QixJQUFNLFVBQVUsR0FBRyxNQUFNLEdBQUcsQ0FBQyxDQUFBO1FBQzdCLElBQU0sY0FBYyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLENBQUE7UUFDdkMsSUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxjQUFjLENBQUMsQ0FBQTtRQUNoRCxJQUFNLEtBQUssR0FBRyxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUE7UUFFekQsSUFBSSxLQUFLLEdBQUcsVUFBVSxDQUFDLENBQUEsTUFBQSxjQUFjLENBQUMsUUFBUSxFQUFFLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQywwQ0FBRSxTQUFTLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxLQUFJLEVBQUUsQ0FBQyxDQUFBO1FBQ3pGLEtBQUssR0FBRyxDQUFDLEtBQUssSUFBSSxLQUFLLENBQUMsTUFBTSxLQUFLLENBQUMsSUFBSSxVQUFHLEtBQUssTUFBRyxDQUFDLElBQUksS0FBSyxDQUFBO1FBQzdELElBQU0sY0FBYyxHQUFHLENBQUMsQ0FBQyxTQUFTLElBQUksZ0JBQUksS0FBSyxDQUFFLENBQUMsSUFBSSxHQUFHLENBQUE7UUFFekQsZUFBZSxHQUFHLENBQ2hCLHNEQUFrQixNQUFNLGdCQUFhLGtCQUFrQixFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTTtZQUNyRixvQkFBQyxJQUFJLElBQUMsTUFBTSxFQUFFLFVBQVUsQ0FBQyxJQUFJLElBQUcsVUFBRyxLQUFLLENBQUUsQ0FBUTtZQUNsRCw4QkFBTSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsZUFBZSxDQUFDLENBQUM7Z0JBQ3ZELDhCQUFNLFNBQVMsRUFBRSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztvQkFDOUMsY0FBYyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUM7O3dCQUFTLGNBQWMsQ0FBSSxDQUFDLENBQUMsQ0FBQyxjQUFjO29CQUNyRSxPQUFPLElBQUksaUNBQU0sT0FBTyxDQUFPLENBQzNCO2dCQUNOLE1BQU0sSUFBSSw4QkFBTSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7O29CQUFJLE1BQU0sQ0FBUSxDQUMxRSxDQUNGLENBQ1IsQ0FBQTtLQUNGO0lBRUQsT0FBTyxDQUNMLDZCQUNFLEVBQUUsRUFBRSxFQUFFLEVBQ04sU0FBUyxFQUFFLFNBQVMsQ0FDbEIsTUFBTSxFQUNOLElBQUksQ0FDRixpQkFBaUIsRUFDakIsRUFBRSxDQUFDLGdCQUFTLEtBQUssSUFBSSxHQUFHLENBQUUsQ0FBQyxFQUMzQixDQUFDLEtBQUssSUFBSSxTQUFTLENBQUMsYUFBYSxJQUFJLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1lBQ3hELENBQUMsS0FBSyxJQUFJLFNBQVMsQ0FBQyxjQUFjLElBQUksRUFBRSxDQUFDLGtCQUFrQixDQUFDLENBQUM7WUFDN0QsQ0FBQyxLQUFLLElBQUksU0FBUyxDQUFDLFdBQVcsSUFBSSxFQUFFLENBQUMsaUJBQWlCLENBQUMsQ0FBQztZQUN6RCxFQUFFLENBQ0wsQ0FDRjtRQUVBLFFBQVEsSUFBSSwyQkFBRyxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsSUFBRyxRQUFRLENBQUs7UUFDN0Usa0JBQWtCO1FBQ2xCLGVBQWU7UUFDZixrQkFBa0I7UUFDbEIsa0JBQWtCLElBQUksMkJBQUcsU0FBUyxFQUFDLFNBQVMsSUFBRSxrQkFBa0IsQ0FBSyxDQUNsRSxDQUNQLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLEtBQUssQ0FBQSJ9

package/lib/components/product-tour/ProductTour.js

@@ -1,10 +1,10 @@
-import { __assign, __rest } from "tslib";
-import { hashClass } from '../../helpers';
+import { __assign, __read, __rest } from "tslib";
+import React, { useEffect, useState } from 'react';
 import { has, is } from '../../services';
-import clsx from 'clsx';
-import React from 'react';
 import { Icon, IconName, IconSize } from '../icon';
-import { useProductTour } from './hooks/useProductTour';
+import { hashClass } from '../../helpers';
+import clsx from 'clsx';
+import { useTrilogyContext } from '../../context';
 /**
  * Product Tour Component
  * @param children {React.ReactNode} Title child
@@ -19,15 +19,19 @@ import { useProductTour } from './hooks/useProductTour';
  */
 var ProductTour = function (_a) {
     var children = _a.children, className = _a.className, id = _a.id, active = _a.active, arrowDirection = _a.arrowDirection, arrowAlign = _a.arrowAlign, closeable = _a.closeable, avatarSrc = _a.avatarSrc, avatarDirection = _a.avatarDirection, others = __rest(_a, ["children", "className", "id", "active", "arrowDirection", "arrowAlign", "closeable", "avatarSrc", "avatarDirection"]);
-    var _b = useProductTour({ active: active }), display = _b.display, handleClick = _b.handleClick;
-    var classes = hashClass(clsx('product-tour', display && is('active'), avatarDirection && has("icon-".concat(avatarDirection)), className));
+    var _b = __read(useState(active || false), 2), display = _b[0], setDisplay = _b[1];
+    var styled = useTrilogyContext().styled;
+    useEffect(function () {
+        setDisplay(active || false);
+    }, [active]);
+    var classes = hashClass(styled, clsx('product-tour', display && is('active'), avatarDirection && has("icon-".concat(avatarDirection)), className));
     return (React.createElement("div", __assign({ id: id, className: classes }, others),
-        arrowDirection && React.createElement("div", { className: hashClass(clsx('arrow', is(arrowDirection), arrowAlign && is(arrowAlign))) }),
-        avatarSrc && (React.createElement("span", { className: hashClass(clsx('icon', is('medium'))) },
-            React.createElement("img", { className: hashClass(clsx(is('rounded'))), src: avatarSrc }))),
-        closeable && (React.createElement("div", { style: { cursor: 'pointer' }, onClick: handleClick },
+        arrowDirection && (React.createElement("div", { className: hashClass(styled, clsx('arrow', is(arrowDirection), arrowAlign && is(arrowAlign))) })),
+        avatarSrc && (React.createElement("span", { className: hashClass(styled, clsx('icon', is('medium'))) },
+            React.createElement("img", { className: hashClass(styled, clsx(is('rounded'))), src: avatarSrc }))),
+        closeable && (React.createElement("div", { style: { cursor: 'pointer' }, onClick: function () { return setDisplay(!display); } },
             React.createElement(Icon, { size: IconSize.SMALL, name: IconName.TIMES, className: 'close' }))),
-        React.createElement("div", { className: hashClass(clsx('product-tour-content')) }, children)));
+        React.createElement("div", { className: hashClass(styled, clsx('product-tour-content')) }, children)));
 };
 export default ProductTour;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJvZHVjdFRvdXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3Byb2R1Y3QtdG91ci9Qcm9kdWN0VG91ci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDcEMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUN6QixPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsTUFBTSxTQUFTLENBQUE7QUFFbEQsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBRXZEOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsSUFBTSxXQUFXLEdBQUcsVUFBQyxFQVdDO0lBVnBCLElBQUEsUUFBUSxjQUFBLEVBQ1IsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsTUFBTSxZQUFBLEVBQ04sY0FBYyxvQkFBQSxFQUNkLFVBQVUsZ0JBQUEsRUFDVixTQUFTLGVBQUEsRUFDVCxTQUFTLGVBQUEsRUFDVCxlQUFlLHFCQUFBLEVBQ1osTUFBTSxjQVZVLHNIQVdwQixDQURVO0lBRUgsSUFBQSxLQUEyQixjQUFjLENBQUMsRUFBRSxNQUFNLFFBQUEsRUFBRSxDQUFDLEVBQW5ELE9BQU8sYUFBQSxFQUFFLFdBQVcsaUJBQStCLENBQUE7SUFFM0QsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUN2QixJQUFJLENBQUMsY0FBYyxFQUFFLE9BQU8sSUFBSSxFQUFFLENBQUMsUUFBUSxDQUFDLEVBQUUsZUFBZSxJQUFJLEdBQUcsQ0FBQyxlQUFRLGVBQWUsQ0FBRSxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQzVHLENBQUE7SUFFRCxPQUFPLENBQ0wsc0NBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU07UUFDeEMsY0FBYyxJQUFJLDZCQUFLLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUMsY0FBYyxDQUFDLEVBQUUsVUFBVSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLEdBQUk7UUFDaEgsU0FBUyxJQUFJLENBQ1osOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDO1lBQ3BELDZCQUFLLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLEVBQUUsR0FBRyxFQUFFLFNBQVMsR0FBSSxDQUM3RCxDQUNSO1FBQ0EsU0FBUyxJQUFJLENBQ1osNkJBQUssS0FBSyxFQUFFLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxFQUFFLE9BQU8sRUFBRSxXQUFXO1lBQ3JELG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsUUFBUSxDQUFDLEtBQUssRUFBRSxJQUFJLEVBQUUsUUFBUSxDQUFDLEtBQUssRUFBRSxTQUFTLEVBQUMsT0FBTyxHQUFHLENBQ2xFLENBQ1A7UUFDRCw2QkFBSyxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDLElBQUcsUUFBUSxDQUFPLENBQ3JFLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsV0FBVyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJvZHVjdFRvdXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3Byb2R1Y3QtdG91ci9Qcm9kdWN0VG91ci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUNsRCxPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUVwQyxPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsTUFBTSxTQUFTLENBQUE7QUFDbEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsSUFBTSxXQUFXLEdBQUcsVUFBQyxFQVdDO0lBVnBCLElBQUEsUUFBUSxjQUFBLEVBQ1IsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsTUFBTSxZQUFBLEVBQ04sY0FBYyxvQkFBQSxFQUNkLFVBQVUsZ0JBQUEsRUFDVixTQUFTLGVBQUEsRUFDVCxTQUFTLGVBQUEsRUFDVCxlQUFlLHFCQUFBLEVBQ1osTUFBTSxjQVZVLHNIQVdwQixDQURVO0lBRUgsSUFBQSxLQUFBLE9BQXdCLFFBQVEsQ0FBVSxNQUFNLElBQUksS0FBSyxDQUFDLElBQUEsRUFBekQsT0FBTyxRQUFBLEVBQUUsVUFBVSxRQUFzQyxDQUFBO0lBQ3hELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLFNBQVMsQ0FBQztRQUNSLFVBQVUsQ0FBQyxNQUFNLElBQUksS0FBSyxDQUFDLENBQUE7SUFDN0IsQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQTtJQUVaLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FBQyxjQUFjLEVBQUUsT0FBTyxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFBRSxlQUFlLElBQUksR0FBRyxDQUFDLGVBQVEsZUFBZSxDQUFFLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FDNUcsQ0FBQTtJQUVELE9BQU8sQ0FDTCxzQ0FBSyxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTTtRQUN4QyxjQUFjLElBQUksQ0FDakIsNkJBQUssU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUMsY0FBYyxDQUFDLEVBQUUsVUFBVSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLEdBQUksQ0FDdkc7UUFDQSxTQUFTLElBQUksQ0FDWiw4QkFBTSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDO1lBQzVELDZCQUFLLFNBQVMsRUFBRSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxFQUFFLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLEdBQUcsRUFBRSxTQUFTLEdBQUksQ0FDckUsQ0FDUjtRQUNBLFNBQVMsSUFBSSxDQUNaLDZCQUFLLEtBQUssRUFBRSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsRUFBRSxPQUFPLEVBQUUsY0FBTSxPQUFBLFVBQVUsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxFQUFwQixDQUFvQjtZQUNwRSxvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxLQUFLLEVBQUUsSUFBSSxFQUFFLFFBQVEsQ0FBQyxLQUFLLEVBQUUsU0FBUyxFQUFDLE9BQU8sR0FBRyxDQUNsRSxDQUNQO1FBQ0QsNkJBQUssU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLHNCQUFzQixDQUFDLENBQUMsSUFBRyxRQUFRLENBQU8sQ0FDN0UsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxXQUFXLENBQUEifQ==

package/lib/components/progress/Progress.d.ts

@@ -1,5 +1,5 @@
-import { ProgressProps } from '../../components/progress/ProgressProps';
-import React from 'react';
+import * as React from 'react';
+import { ProgressProps } from './ProgressProps';
 /**
  * Progress component
  * @param children {ReactNode} Use Children it only if stacked progress

package/lib/components/progress/Progress.js

@@ -1,10 +1,11 @@
 import { __assign, __rest } from "tslib";
-import { Text } from '../../components/text';
-import { hashClass } from '../../helpers/hashClassesHelpers';
-import { getStatusClassName } from '../../objects/facets/Status';
+import * as React from 'react';
 import { is } from '../../services/index';
+import { getStatusClassName } from '../../objects';
+import { hashClass } from '../../helpers';
 import clsx from 'clsx';
-import React from 'react';
+import { useTrilogyContext } from '../../context';
+import { Text } from '../../components/text';
 /**
  * Progress component
  * @param children {ReactNode} Use Children it only if stacked progress
@@ -15,16 +16,17 @@ import React from 'react';
  */
 var Progress = function (_a) {
     var className = _a.className, id = _a.id, value = _a.value, _b = _a.max, max = _b === void 0 ? 100 : _b, status = _a.status, small = _a.small, legendStart = _a.legendStart, legendCenter = _a.legendCenter, legendEnd = _a.legendEnd, others = __rest(_a, ["className", "id", "value", "max", "status", "small", "legendStart", "legendCenter", "legendEnd"]);
-    var classes = hashClass(clsx('progress', status && is(getStatusClassName(status)), !status && is('primary'), small && is('small'), className));
-    return (React.createElement("div", { className: 'progress-container' },
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('progress', status && is(getStatusClassName(status)), !status && is('primary'), small && is('small'), className));
+    return (React.createElement("div", { className: "progress-container" },
         React.createElement("progress", __assign({ id: id, className: classes, value: value, max: max }, others), value),
-        (legendStart || legendCenter || legendEnd) && (React.createElement("div", { className: 'progress-legends' },
-            legendStart && (React.createElement("div", { className: 'progress-legend-start' },
+        (legendStart || legendCenter || legendEnd) && (React.createElement("div", { className: "progress-legends" },
+            legendStart && (React.createElement("div", { className: "progress-legend-start" },
                 React.createElement(Text, null, legendStart))),
-            legendCenter && (React.createElement("div", { className: 'progress-legend-center' },
+            legendCenter && (React.createElement("div", { className: "progress-legend-center" },
                 React.createElement(Text, null, legendCenter))),
-            legendEnd && (React.createElement("div", { className: 'progress-legend-end' },
+            legendEnd && (React.createElement("div", { className: "progress-legend-end" },
                 React.createElement(Text, null, legendEnd)))))));
 };
 export default Progress;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJvZ3Jlc3MuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL1Byb2dyZXNzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3hDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQTtBQUM1RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sa0JBQWtCLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6Qjs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxRQUFRLEdBQUcsVUFBQyxFQVdGO0lBVmQsSUFBQSxTQUFTLGVBQUEsRUFDVCxFQUFFLFFBQUEsRUFDRixLQUFLLFdBQUEsRUFDTCxXQUFTLEVBQVQsR0FBRyxtQkFBRyxHQUFHLEtBQUEsRUFDVCxNQUFNLFlBQUEsRUFDTixLQUFLLFdBQUEsRUFDTCxXQUFXLGlCQUFBLEVBQ1gsWUFBWSxrQkFBQSxFQUNaLFNBQVMsZUFBQSxFQUNOLE1BQU0sY0FWTyxrR0FXakIsQ0FEVTtJQUVULElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsSUFBSSxDQUNGLFVBQVUsRUFDVixNQUFNLElBQUksRUFBRSxDQUFDLGtCQUFrQixDQUFDLE1BQU0sQ0FBQyxDQUFDLEVBQ3hDLENBQUMsTUFBTSxJQUFJLEVBQUUsQ0FBQyxTQUFTLENBQUMsRUFDeEIsS0FBSyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsRUFDcEIsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sQ0FDTCw2QkFBSyxTQUFTLEVBQUMsb0JBQW9CO1FBQ2pDLDJDQUFVLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxHQUFHLElBQU0sTUFBTSxHQUNyRSxLQUFLLENBQ0c7UUFDVixDQUFDLFdBQVcsSUFBSSxZQUFZLElBQUksU0FBUyxDQUFDLElBQUksQ0FDN0MsNkJBQUssU0FBUyxFQUFDLGtCQUFrQjtZQUM5QixXQUFXLElBQUksQ0FDZCw2QkFBSyxTQUFTLEVBQUMsdUJBQXVCO2dCQUNwQyxvQkFBQyxJQUFJLFFBQUUsV0FBVyxDQUFRLENBQ3RCLENBQ1A7WUFDQSxZQUFZLElBQUksQ0FDZiw2QkFBSyxTQUFTLEVBQUMsd0JBQXdCO2dCQUNyQyxvQkFBQyxJQUFJLFFBQUUsWUFBWSxDQUFRLENBQ3ZCLENBQ1A7WUFDQSxTQUFTLElBQUksQ0FDWiw2QkFBSyxTQUFTLEVBQUMscUJBQXFCO2dCQUNsQyxvQkFBQyxJQUFJLFFBQUUsU0FBUyxDQUFRLENBQ3BCLENBQ1AsQ0FDRyxDQUNQLENBQ0csQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxRQUFRLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJvZ3Jlc3MuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL1Byb2dyZXNzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLGtCQUFrQixDQUFBO0FBQ3JDLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM5QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBRXhDOzs7Ozs7O0dBT0c7QUFDSCxJQUFNLFFBQVEsR0FBRyxVQUFDLEVBV2dCO0lBVmQsSUFBQSxTQUFTLGVBQUEsRUFDVCxFQUFFLFFBQUEsRUFDRixLQUFLLFdBQUEsRUFDTCxXQUFTLEVBQVQsR0FBRyxtQkFBRyxHQUFHLEtBQUEsRUFDVCxNQUFNLFlBQUEsRUFDTixLQUFLLFdBQUEsRUFDTCxXQUFXLGlCQUFBLEVBQ1gsWUFBWSxrQkFBQSxFQUNaLFNBQVMsZUFBQSxFQUNOLE1BQU0sY0FWWCxrR0FXQyxDQURVO0lBRW5CLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixVQUFVLEVBQ1YsTUFBTSxJQUFJLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQyxNQUFNLENBQUMsQ0FBQyxFQUN4QyxDQUFDLE1BQU0sSUFBSSxFQUFFLENBQUMsU0FBUyxDQUFDLEVBQ3hCLEtBQUssSUFBSSxFQUFFLENBQUMsT0FBTyxDQUFDLEVBQ3BCLFNBQVMsQ0FDVixDQUNGLENBQUE7SUFFRCxPQUFPLENBQ0wsNkJBQUssU0FBUyxFQUFDLG9CQUFvQjtRQUNqQywyQ0FBVSxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxHQUFHLEVBQUUsR0FBRyxJQUFNLE1BQU0sR0FDckUsS0FBSyxDQUNHO1FBQ1YsQ0FBQyxXQUFXLElBQUksWUFBWSxJQUFJLFNBQVMsQ0FBQyxJQUFJLENBQzdDLDZCQUFLLFNBQVMsRUFBQyxrQkFBa0I7WUFDOUIsV0FBVyxJQUFJLENBQ2QsNkJBQUssU0FBUyxFQUFDLHVCQUF1QjtnQkFDcEMsb0JBQUMsSUFBSSxRQUFFLFdBQVcsQ0FBUSxDQUN0QixDQUNQO1lBQ0EsWUFBWSxJQUFJLENBQ2YsNkJBQUssU0FBUyxFQUFDLHdCQUF3QjtnQkFDckMsb0JBQUMsSUFBSSxRQUFFLFlBQVksQ0FBUSxDQUN2QixDQUNQO1lBQ0EsU0FBUyxJQUFJLENBQ1osNkJBQUssU0FBUyxFQUFDLHFCQUFxQjtnQkFDbEMsb0JBQUMsSUFBSSxRQUFFLFNBQVMsQ0FBUSxDQUNwQixDQUNQLENBQ0csQ0FDUCxDQUNHLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsUUFBUSxDQUFBIn0=

package/lib/components/progress/ProgressProps.d.ts

@@ -1,5 +1,5 @@
-import { CommonProps } from '../../objects/facets/CommonProps';
 import { StatusProps } from '../../objects/facets/Status';
+import { CommonProps } from '../../objects/facets/CommonProps';
 /**
  * Progress Interface
  */

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

@@ -1,4 +1,4 @@
-import Progress from '../../components/progress/Progress';
-import ProgressRadial from '../../components/progress/radial';
-import ProgressRadialItem from '../../components/progress/radial/item/ProgressRadialtem';
+import Progress from './Progress';
+import ProgressRadial from './radial';
+import ProgressRadialItem from './radial/item/ProgressRadialtem';
 export { Progress, ProgressRadial, ProgressRadialItem };

package/lib/components/progress/index.js

@@ -1,5 +1,5 @@
-import Progress from '../../components/progress/Progress';
-import ProgressRadial from '../../components/progress/radial';
-import ProgressRadialItem from '../../components/progress/radial/item/ProgressRadialtem';
+import Progress from './Progress';
+import ProgressRadial from './radial';
+import ProgressRadialItem from './radial/item/ProgressRadialtem';
 export { Progress, ProgressRadial, ProgressRadialItem };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sUUFBUSxNQUFNLGdDQUFnQyxDQUFBO0FBQ3JELE9BQU8sY0FBYyxNQUFNLDhCQUE4QixDQUFBO0FBQ3pELE9BQU8sa0JBQWtCLE1BQU0scURBQXFELENBQUE7QUFFcEYsT0FBTyxFQUFFLFFBQVEsRUFBRSxjQUFjLEVBQUUsa0JBQWtCLEVBQUUsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sUUFBUSxNQUFNLFlBQVksQ0FBQTtBQUNqQyxPQUFPLGNBQWMsTUFBTSxVQUFVLENBQUE7QUFDckMsT0FBTyxrQkFBa0IsTUFBTSxpQ0FBaUMsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsUUFBUSxFQUFFLGNBQWMsRUFBRSxrQkFBa0IsRUFBRSxDQUFBIn0=

package/lib/components/progress/radial/ProgressRadial.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ProgressRadialProps } from '../../../components/progress/radial/ProgressRadialProps';
+import { ProgressRadialProps } from './ProgressRadialProps';
 /**
  * Progress Radial component
  * @param percent {number} Progress percent

package/lib/components/progress/radial/ProgressRadial.js

@@ -1,11 +1,12 @@
-import { __assign, __rest } from "tslib";
-import { useProgressRadial } from '../../../components/progress/radial/hooks/useProgressRadial';
-import { Text, TextLevels } from '../../../components/text';
-import { Title, TitleLevels } from '../../../components/title';
-import { hashClass } from '../../../helpers/hashClassesHelpers';
-import { is } from '../../../services/index';
+import { __assign, __read, __rest } from "tslib";
+import React, { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import React from 'react';
+import { is } from '../../../services/index';
+import { hashClass } from '../../../helpers';
+import { useTrilogyContext } from '../../../context';
+import { Title, TitleLevels } from '../../title';
+import { Text, TextLevels } from '../../text';
+import { getColorStyle } from '../../../objects/facets/Color';
 /**
  * Progress Radial component
  * @param percent {number} Progress percent
@@ -20,9 +21,49 @@ import React from 'react';
  */
 var ProgressRadial = function (_a) {
     var children = _a.children, _b = _a.value, value = _b === void 0 ? 0 : _b, _c = _a.secondValue, secondValue = _c === void 0 ? 0 : _c, label = _a.label, description = _a.description, skeleton = _a.skeleton, className = _a.className, id = _a.id, small = _a.small, others = __rest(_a, ["children", "value", "secondValue", "label", "description", "skeleton", "className", "id", "small"]);
-    var progressRadialRef = useProgressRadial({ value: value, secondValue: secondValue }).progressRadialRef;
-    var classes = hashClass(clsx('progress-radial', skeleton && is('loading'), small && is('small'), className));
-    var classesContent = hashClass(clsx('progress-radial-content'));
+    var styled = useTrilogyContext().styled;
+    var _d = __read(useState(0), 2), firstProgressCurrentValue = _d[0], setFirstProgressCurrentValue = _d[1];
+    var _e = __read(useState(0), 2), secondProgressCurrentValue = _e[0], setSecondProgressCurrentValue = _e[1];
+    var classes = hashClass(styled, clsx('progress-radial', skeleton && is('loading'), small && is('small'), className));
+    var classesContent = hashClass(styled, clsx('progress-radial-content'));
+    var progressRadialRef = useRef(null);
+    // Function to update the background style based on the current progress
+    var updateBackgroundStyle = function (firstValue, secondValue) {
+        var progressRadial = progressRadialRef.current;
+        if (!progressRadial) {
+            return;
+        }
+        var firstProgressDegree = (360 * firstValue) / 100;
+        var secondProgressDegree = (360 * secondValue) / 100;
+        // Ensure the second progress starts where the first ends
+        var secondProgressStartDegree = firstProgressDegree;
+        var styleBackground;
+        styleBackground = "radial-gradient(circle at center, white 58%, transparent 58.1%),";
+        styleBackground += "conic-gradient(#0C7B91 0 ".concat(firstProgressDegree, "deg, ").concat(getColorStyle('MAIN'), " ").concat(secondProgressStartDegree, "deg ").concat(secondProgressStartDegree + secondProgressDegree, "deg, ").concat(getColorStyle('MAIN_FADE'), " ").concat(secondProgressStartDegree + secondProgressDegree, "deg 360deg)");
+        progressRadial.style.background = styleBackground;
+    };
+    useEffect(function () {
+        var animationFrameId;
+        // Reset the current values whenever the provided percent or secondPercent change
+        setFirstProgressCurrentValue(0);
+        setSecondProgressCurrentValue(0);
+        updateBackgroundStyle(value, secondValue); // if percent or secondPercent are 0, update immediately
+        var frame = function () {
+            setFirstProgressCurrentValue(function (currentValue) {
+                return currentValue < value ? currentValue + 1 : currentValue;
+            });
+            setSecondProgressCurrentValue(function (currentValue) {
+                return currentValue < secondValue ? currentValue + 1 : currentValue;
+            });
+            animationFrameId = requestAnimationFrame(frame);
+        };
+        animationFrameId = requestAnimationFrame(frame);
+        // Cleanup
+        return function () { return cancelAnimationFrame(animationFrameId); };
+    }, [value, secondValue]);
+    useEffect(function () {
+        updateBackgroundStyle(firstProgressCurrentValue, secondProgressCurrentValue);
+    }, [firstProgressCurrentValue, secondProgressCurrentValue]);
     return (React.createElement("div", __assign({ id: id }, others, { className: classes, ref: progressRadialRef }),
         React.createElement("div", { className: classesContent },
             label && (React.createElement(Title, { level: TitleLevels.TWO, marginless: true }, label)),
@@ -30,4 +71,4 @@ var ProgressRadial = function (_a) {
             !label && !description && children)));
 };
 export default ProgressRadial;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJvZ3Jlc3NSYWRpYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL3JhZGlhbC9Qcm9ncmVzc1JhZGlhbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUNBLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHNEQUFzRCxDQUFBO0FBQ3hGLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQTtBQUN2RCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLGtCQUFrQixDQUFBO0FBQ3JDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekI7Ozs7Ozs7Ozs7O0dBV0c7QUFDSCxJQUFNLGNBQWMsR0FBRyxVQUFDLEVBV0Y7SUFWcEIsSUFBQSxRQUFRLGNBQUEsRUFDUixhQUFTLEVBQVQsS0FBSyxtQkFBRyxDQUFDLEtBQUEsRUFDVCxtQkFBZSxFQUFmLFdBQVcsbUJBQUcsQ0FBQyxLQUFBLEVBQ2YsS0FBSyxXQUFBLEVBQ0wsV0FBVyxpQkFBQSxFQUNYLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLEtBQUssV0FBQSxFQUNGLE1BQU0sY0FWYSxvR0FXdkIsQ0FEVTtJQUVELElBQUEsaUJBQWlCLEdBQUssaUJBQWlCLENBQUMsRUFBRSxLQUFLLE9BQUEsRUFBRSxXQUFXLGFBQUEsRUFBRSxDQUFDLGtCQUE5QyxDQUE4QztJQUN2RSxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDLGlCQUFpQixFQUFFLFFBQVEsSUFBSSxFQUFFLENBQUMsU0FBUyxDQUFDLEVBQUUsS0FBSyxJQUFJLEVBQUUsQ0FBQyxPQUFPLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBQzlHLElBQU0sY0FBYyxHQUFHLFNBQVMsQ0FBQyxJQUFJLENBQUMseUJBQXlCLENBQUMsQ0FBQyxDQUFBO0lBRWpFLE9BQU8sQ0FDTCxzQ0FBSyxFQUFFLEVBQUUsRUFBRSxJQUFNLE1BQU0sSUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLEdBQUcsRUFBRSxpQkFBaUI7UUFDakUsNkJBQUssU0FBUyxFQUFFLGNBQWM7WUFDM0IsS0FBSyxJQUFJLENBQ1Isb0JBQUMsS0FBSyxJQUFDLEtBQUssRUFBRSxXQUFXLENBQUMsR0FBRyxFQUFFLFVBQVUsVUFDdEMsS0FBSyxDQUNBLENBQ1Q7WUFDQSxXQUFXLElBQUksQ0FDZCxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsVUFBVSxVQUNwQyxXQUFXLENBQ1AsQ0FDUjtZQUNBLENBQUMsS0FBSyxJQUFJLENBQUMsV0FBVyxJQUFJLFFBQVEsQ0FDL0IsQ0FDRixDQUNQLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLGNBQWMsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJvZ3Jlc3NSYWRpYWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL3JhZGlhbC9Qcm9ncmVzc1JhZGlhbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDMUQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBRXZCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQTtBQUM1QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sa0JBQWtCLENBQUE7QUFDNUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0JBQWtCLENBQUE7QUFDcEQsT0FBTyxFQUFFLEtBQUssRUFBRSxXQUFXLEVBQUUsTUFBTSxhQUFhLENBQUE7QUFDaEQsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDN0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBRXREOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsSUFBTSxjQUFjLEdBQUcsVUFBQyxFQVdGO0lBVnBCLElBQUEsUUFBUSxjQUFBLEVBQ1IsYUFBUyxFQUFULEtBQUssbUJBQUcsQ0FBQyxLQUFBLEVBQ1QsbUJBQWUsRUFBZixXQUFXLG1CQUFHLENBQUMsS0FBQSxFQUNmLEtBQUssV0FBQSxFQUNMLFdBQVcsaUJBQUEsRUFDWCxRQUFRLGNBQUEsRUFDUixTQUFTLGVBQUEsRUFDVCxFQUFFLFFBQUEsRUFDRixLQUFLLFdBQUEsRUFDRixNQUFNLGNBVmEsb0dBV3ZCLENBRFU7SUFFRCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUNoQyxJQUFBLEtBQUEsT0FBNEQsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFBLEVBQXRFLHlCQUF5QixRQUFB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

package/lib/components/progress/radial/ProgressRadial.native.js

@@ -21,7 +21,7 @@ import { ComponentName } from '../../../components/enumsComponentsName';
  */
 var ProgressRadial = function (_a) {
     var children = _a.children, value = _a.value, label = _a.label, description = _a.description, status = _a.status, full = _a.full, disk = _a.disk, secondValue = _a.secondValue, secondValueColor = _a.secondValueColor, align = _a.align, skeleton = _a.skeleton, others = __rest(_a, ["children", "value", "label", "description", "status", "full", "disk", "secondValue", "secondValueColor", "align", "skeleton"]);
-    var color = getColorStyle(status || TrilogyColor.MAIN);
+    var color = getColorStyle(status || TrilogyColor.INFO);
     var backgroundColor = getColorStyle(TrilogyColor.MAIN_FADE);
     var percentWidth = value || 0;
     var secondFill = secondValue ? { secondFill: secondValue } : null;

package/lib/components/progress/radial/ProgressRadialProps.d.ts

@@ -1,9 +1,7 @@
-import { ProgressRadialItemProps } from '../../../components/progress/radial/item/ProgressRadialItemProps';
-import { AlignableProps } from '../../../objects/facets/Alignable';
-import { TrilogyColor, TrilogyColorValues } from '../../../objects/facets/Color';
-import { CommonProps } from '../../../objects/facets/CommonProps';
-import { StatusProps } from '../../../objects/facets/Status';
+import { AlignableProps, StatusProps, TrilogyColor, TrilogyColorValues } from '../../../objects';
 import React from 'react';
+import { ProgressRadialItemProps } from './item/ProgressRadialItemProps';
+import { CommonProps } from '../../../objects/facets/CommonProps';
 /**
  * Progress Radial Interface
  */

package/lib/components/progress/radial/index.d.ts

@@ -1,2 +1,2 @@
-import ProgressRadial from '../../../components/progress/radial/ProgressRadial';
+import ProgressRadial from './ProgressRadial';
 export default ProgressRadial;

package/lib/components/progress/radial/index.js

@@ -1,3 +1,3 @@
-import ProgressRadial from '../../../components/progress/radial/ProgressRadial';
+import ProgressRadial from './ProgressRadial';
 export default ProgressRadial;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL3JhZGlhbC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLGNBQWMsTUFBTSw2Q0FBNkMsQ0FBQTtBQUV4RSxlQUFlLGNBQWMsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL3JhZGlhbC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLGNBQWMsTUFBTSxrQkFBa0IsQ0FBQTtBQUU3QyxlQUFlLGNBQWMsQ0FBQSJ9

package/lib/components/progress/radial/item/ProgressRadialItemProps.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TrilogyColor } from '../../../../objects/facets/Color';
+import { TrilogyColor } from '../../../../objects';
 import { CommonProps } from '../../../../objects/facets/CommonProps';
 export interface ProgressRadialItemProps extends CommonProps {
     children?: React.ReactNode;

package/lib/components/progress/radial/item/ProgressRadialtem.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { ProgressRadialItemProps } from '../../../../components/progress/radial/item/ProgressRadialItemProps';
+import { ProgressRadialItemProps } from './ProgressRadialItemProps';
 declare const ProgressRadialItem: ({ color, className, id }: ProgressRadialItemProps) => JSX.Element;
 export default ProgressRadialItem;

package/lib/components/progress/radial/item/ProgressRadialtem.js

@@ -1,10 +1,12 @@
-import { hashClass } from '../../../../helpers/hashClassesHelpers';
-import clsx from 'clsx';
 import * as React from 'react';
+import { hashClass } from '../../../../helpers';
+import clsx from 'clsx';
+import { useTrilogyContext } from '../../../../context';
 var ProgressRadialItem = function (_a) {
     var color = _a.color, className = _a.className, id = _a.id;
-    var classes = hashClass(clsx("progress-circle-slice progress-circle-background-".concat(color), className));
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx("progress-circle-slice progress-circle-background-".concat(color), className));
     return React.createElement("div", { id: id, className: classes });
 };
 export default ProgressRadialItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJvZ3Jlc3NSYWRpYWx0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL3JhZGlhbC9pdGVtL1Byb2dyZXNzUmFkaWFsdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLElBQU0sa0JBQWtCLEdBQUcsVUFBQyxFQUFpRDtRQUEvQyxLQUFLLFdBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUE7SUFDaEQsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQywyREFBb0QsS0FBSyxDQUFFLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUV2RyxPQUFPLDZCQUFLLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sR0FBUSxDQUFBO0FBQ2hELENBQUMsQ0FBQTtBQUVELGVBQWUsa0JBQWtCLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJvZ3Jlc3NSYWRpYWx0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9jb21wb25lbnRzL3Byb2dyZXNzL3JhZGlhbC9pdGVtL1Byb2dyZXNzUmFkaWFsdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFN0MsSUFBTSxrQkFBa0IsR0FBRyxVQUFDLEVBQWlEO1FBQS9DLEtBQUssV0FBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQTtJQUN4QyxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQywyREFBb0QsS0FBSyxDQUFFLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUUvRyxPQUFPLDZCQUFLLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sR0FBUSxDQUFBO0FBQ2hELENBQUMsQ0FBQTtBQUVELGVBQWUsa0JBQWtCLENBQUEifQ==

package/lib/components/progress/radial/item/index.d.ts

@@ -1,2 +1,2 @@
-import ProgressRadialItem from '../../../../components/progress/radial/item/ProgressRadialtem';
+import ProgressRadialItem from './ProgressRadialtem';
 export default ProgressRadialItem;