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

package/lib/components/radio/tiles/RadioTiles.js

@@ -1,9 +1,10 @@
 import { __assign, __rest } from "tslib";
-import { hashClass } from '../../../helpers/hashClassesHelpers';
-import { getAlignClassName } from '../../../objects/facets/Alignable';
+import { useTrilogyContext } from '../../../context';
+import { hashClass } from '../../../helpers';
+import { getAlignClassName } from '../../../objects';
 import { is } from '../../../services';
 import clsx from 'clsx';
-import React from 'react';
+import * as React from 'react';
 /**
  * Columns Item Component - Columns Child
  * @param id {string}
@@ -15,6 +16,7 @@ import React from 'react';
  */
 var RadioTiles = function (_a) {
     var id = _a.id, className = _a.className, children = _a.children, align = _a.align, verticalAlign = _a.verticalAlign, others = __rest(_a, ["id", "className", "children", "align", "verticalAlign"]);
+    var styled = useTrilogyContext().styled;
     var alignClass = null;
     if (align) {
         alignClass =
@@ -31,7 +33,7 @@ var RadioTiles = function (_a) {
                 (getAlignClassName(verticalAlign) === 'aligned-end' && is('aligned-end')) ||
                 null;
     }
-    return (React.createElement("div", __assign({ id: id, className: hashClass(clsx('radio-tiles', className, align && alignClass, verticalAlign && verticalAlignClass)) }, others), children));
+    return (React.createElement("div", __assign({ id: id, className: hashClass(styled, clsx('radio-tiles', className, align && alignClass, verticalAlign && verticalAlignClass)) }, others), children));
 };
 export default RadioTiles;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9UaWxlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvcmFkaW8vdGlsZXMvUmFkaW9UaWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUNBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUM5RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQy9CLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekI7Ozs7Ozs7O0dBUUc7QUFDSCxJQUFNLFVBQVUsR0FBRyxVQUFDLEVBQTZFO0lBQTNFLElBQUEsRUFBRSxRQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFLLE1BQU0sY0FBMUQseURBQTRELENBQUY7SUFDNUUsSUFBSSxVQUFVLEdBQUcsSUFBSSxDQUFBO0lBQ3JCLElBQUksS0FBSyxFQUFFO1FBQ1QsVUFBVTtZQUNSLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLEtBQUssZUFBZSxJQUFJLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO2dCQUN2RSxDQUFDLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxLQUFLLGdCQUFnQixJQUFJLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO2dCQUN6RSxDQUFDLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxLQUFLLGFBQWEsSUFBSSxFQUFFLENBQUMsZUFBZSxDQUFDLENBQUM7Z0JBQ25FLElBQUksQ0FBQTtLQUNQO0lBQ0QsSUFBSSxrQkFBa0IsR0FBRyxJQUFJLENBQUE7SUFDN0IsSUFBSSxhQUFhLEVBQUU7UUFDakIsa0JBQWtCO1lBQ2hCLENBQUMsaUJBQWlCLENBQUMsYUFBYSxDQUFDLEtBQUssZUFBZSxJQUFJLEVBQUUsQ0FBQyxlQUFlLENBQUMsQ0FBQztnQkFDN0UsQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsS0FBSyxnQkFBZ0IsSUFBSSxFQUFFLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztnQkFDL0UsQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsS0FBSyxhQUFhLElBQUksRUFBRSxDQUFDLGFBQWEsQ0FBQyxDQUFDO2dCQUN6RSxJQUFJLENBQUE7S0FDUDtJQUVELE9BQU8sQ0FDTCxzQ0FDRSxFQUFFLEVBQUUsRUFBRSxFQUNOLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRSxTQUFTLEVBQUUsS0FBSyxJQUFJLFVBQVUsRUFBRSxhQUFhLElBQUksa0JBQWtCLENBQUMsQ0FBQyxJQUMxRyxNQUFNLEdBRVQsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsVUFBVSxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9UaWxlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvcmFkaW8vdGlsZXMvUmFkaW9UaWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUNBLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQy9CLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5Qjs7Ozs7Ozs7R0FRRztBQUNILElBQU0sVUFBVSxHQUFHLFVBQUMsRUFBNkU7SUFBM0UsSUFBQSxFQUFFLFFBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUssTUFBTSxjQUExRCx5REFBNEQsQ0FBRjtJQUNwRSxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFJLFVBQVUsR0FBRyxJQUFJLENBQUE7SUFDckIsSUFBSSxLQUFLLEVBQUU7UUFDVCxVQUFVO1lBQ1IsQ0FBQyxpQkFBaUIsQ0FBQyxLQUFLLENBQUMsS0FBSyxlQUFlLElBQUksRUFBRSxDQUFDLGlCQUFpQixDQUFDLENBQUM7Z0JBQ3ZFLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLEtBQUssZ0JBQWdCLElBQUksRUFBRSxDQUFDLGtCQUFrQixDQUFDLENBQUM7Z0JBQ3pFLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLEtBQUssYUFBYSxJQUFJLEVBQUUsQ0FBQyxlQUFlLENBQUMsQ0FBQztnQkFDbkUsSUFBSSxDQUFBO0tBQ1A7SUFDRCxJQUFJLGtCQUFrQixHQUFHLElBQUksQ0FBQTtJQUM3QixJQUFJLGFBQWEsRUFBRTtRQUNqQixrQkFBa0I7WUFDaEIsQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsS0FBSyxlQUFlLElBQUksRUFBRSxDQUFDLGVBQWUsQ0FBQyxDQUFDO2dCQUM3RSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsQ0FBQyxLQUFLLGdCQUFnQixJQUFJLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO2dCQUMvRSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsQ0FBQyxLQUFLLGFBQWEsSUFBSSxFQUFFLENBQUMsYUFBYSxDQUFDLENBQUM7Z0JBQ3pFLElBQUksQ0FBQTtLQUNQO0lBRUQsT0FBTyxDQUNMLHNDQUNFLEVBQUUsRUFBRSxFQUFFLEVBQ04sU0FBUyxFQUFFLFNBQVMsQ0FDbEIsTUFBTSxFQUNOLElBQUksQ0FBQyxhQUFhLEVBQUUsU0FBUyxFQUFFLEtBQUssSUFBSSxVQUFVLEVBQUUsYUFBYSxJQUFJLGtCQUFrQixDQUFDLENBQ3pGLElBQ0csTUFBTSxHQUVULFFBQVEsQ0FDTCxDQUNQLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLFVBQVUsQ0FBQSJ9

package/lib/components/radio/tiles/RadioTilesProps.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AlignableProps } from '../../../objects/facets/Alignable';
+import { AlignableProps } from '../../../objects';
 import { CommonProps } from '../../../objects/facets/CommonProps';
 /**
  * Columns Item Interface

package/lib/components/radio/tiles/index.d.ts

@@ -1,2 +1,2 @@
-import RadioTiles from '../../../components/radio/tiles/RadioTiles';
+import RadioTiles from './RadioTiles';
 export default RadioTiles;

package/lib/components/radio/tiles/index.js

@@ -1,3 +1,3 @@
-import RadioTiles from '../../../components/radio/tiles/RadioTiles';
+import RadioTiles from './RadioTiles';
 export default RadioTiles;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3JhZGlvL3RpbGVzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sVUFBVSxNQUFNLHFDQUFxQyxDQUFBO0FBRTVELGVBQWUsVUFBVSxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3JhZGlvL3RpbGVzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sVUFBVSxNQUFNLGNBQWMsQ0FBQTtBQUVyQyxlQUFlLFVBQVUsQ0FBQSJ9

package/lib/components/radio/tiles/tile/RadioTile.js

@@ -1,5 +1,6 @@
 import { __assign, __rest } from "tslib";
 import { Icon, IconSize } from '../../../../components/icon';
+import { useTrilogyContext } from '../../../../context';
 import { hashClass } from '../../../../helpers/hashClassesHelpers';
 import { is } from '../../../../services/classify';
 import clsx from 'clsx';
@@ -22,9 +23,10 @@ import React from 'react';
  */
 var RadioTile = function (_a) {
     var checked = _a.checked, className = _a.className, disabled = _a.disabled, readonly = _a.readonly, _b = _a.id, id = _b === void 0 ? React.useId() : _b, label = _a.label, onChange = _a.onChange, name = _a.name, value = _a.value, description = _a.description, icon = _a.icon, horizontal = _a.horizontal, others = __rest(_a, ["checked", "className", "disabled", "readonly", "id", "label", "onChange", "name", "value", "description", "icon", "horizontal"]);
-    return (React.createElement("div", { className: hashClass(clsx('radio-tile', horizontal && is('horizontal'), className)) },
-        React.createElement("input", __assign({ type: 'radio', readOnly: readonly, id: id, disabled: disabled, name: name, value: value, checked: checked, onChange: onChange && !disabled && !readonly
-                ? function (e) {
+    var styled = useTrilogyContext().styled;
+    return (React.createElement("div", { className: hashClass(styled, clsx('radio-tile', horizontal && is('horizontal'), className)) },
+        React.createElement("input", __assign({ type: 'radio', readOnly: readonly, id: id, disabled: disabled, name: name, value: value, checked: checked, onChange: function (e) {
+                if (onChange && !disabled && !readonly) {
                     onChange({
                         radioId: e.target.id,
                         radioValue: e.target.value,
@@ -32,14 +34,14 @@ var RadioTile = function (_a) {
                         radioChecked: e.target.checked,
                     });
                 }
-                : undefined }, others)),
-        React.createElement("label", { htmlFor: id, className: hashClass(clsx('radio-label')) },
+            } }, others)),
+        React.createElement("label", { htmlFor: id, className: hashClass(styled, clsx('radio-label')) },
             icon && React.createElement(Icon, { name: icon, size: IconSize.MEDIUM }),
             horizontal ? (React.createElement("span", null,
-                React.createElement("span", { className: hashClass(clsx('radio-title')) }, label),
-                description && React.createElement("span", { className: hashClass(clsx('radio-description')) }, description))) : (React.createElement(React.Fragment, null,
-                React.createElement("span", { className: hashClass(clsx('radio-title')) }, label),
-                description && React.createElement("span", { className: hashClass(clsx('radio-description')) }, description))))));
+                React.createElement("span", { className: hashClass(styled, clsx('radio-title')) }, label),
+                description && React.createElement("span", { className: hashClass(styled, clsx('radio-description')) }, description))) : (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: hashClass(styled, clsx('radio-title')) }, label),
+                description && React.createElement("span", { className: hashClass(styled, clsx('radio-description')) }, description))))));
 };
 export default RadioTile;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9UaWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vY29tcG9uZW50cy9yYWRpby90aWxlcy90aWxlL1JhZGlvVGlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFbEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCOzs7Ozs7Ozs7Ozs7Ozs7R0FlRztBQUNILElBQU0sU0FBUyxHQUFHLFVBQUMsRUFjRjtJQWJmLElBQUEsT0FBTyxhQUFBLEVBQ1AsU0FBUyxlQUFBLEVBQ1QsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsVUFBa0IsRUFBbEIsRUFBRSxtQkFBRyxLQUFLLENBQUMsS0FBSyxFQUFFLEtBQUEsRUFDbEIsS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsSUFBSSxVQUFBLEVBQ0osS0FBSyxXQUFBLEVBQ0wsV0FBVyxpQkFBQSxFQUNYLElBQUksVUFBQSxFQUNKLFVBQVUsZ0JBQUEsRUFDUCxNQUFNLGNBYlEsaUlBY2xCLENBRFU7SUFFVCxPQUFPLENBQ0wsNkJBQUssU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLFVBQVUsSUFBSSxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUM7UUFDdEYsd0NBQ0UsSUFBSSxFQUFDLE9BQU8sRUFDWixRQUFRLEVBQUUsUUFBUSxFQUNsQixFQUFFLEVBQUUsRUFBRSxFQUNOLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLElBQUksRUFBRSxJQUFJLEVBQ1YsS0FBSyxFQUFFLEtBQUssRUFDWixPQUFPLEVBQUUsT0FBTyxFQUNoQixRQUFRLEVBQ04sUUFBUSxJQUFJLENBQUMsUUFBUSxJQUFJLENBQUMsUUFBUTtnQkFDaEMsQ0FBQyxDQUFDLFVBQUMsQ0FBQztvQkFDQSxRQUFRLENBQUM7d0JBQ1AsT0FBTyxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsRUFBRTt3QkFDcEIsVUFBVSxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsS0FBSzt3QkFDMUIsU0FBUyxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsSUFBSTt3QkFDeEIsWUFBWSxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsT0FBTztxQkFDL0IsQ0FBQyxDQUFBO2dCQUNKLENBQUM7Z0JBQ0gsQ0FBQyxDQUFDLFNBQVMsSUFFWCxNQUFNLEVBQ1Y7UUFDRiwrQkFBTyxPQUFPLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQzFELElBQUksSUFBSSxvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsUUFBUSxDQUFDLE1BQU0sR0FBSTtZQUNuRCxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQ1o7Z0JBQ0UsOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsSUFBRyxLQUFLLENBQVE7Z0JBQzlELFdBQVcsSUFBSSw4QkFBTSxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLElBQUcsV0FBVyxDQUFRLENBQ3RGLENBQ1IsQ0FBQyxDQUFDLENBQUMsQ0FDRjtnQkFDRSw4QkFBTSxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxJQUFHLEtBQUssQ0FBUTtnQkFDOUQsV0FBVyxJQUFJLDhCQUFNLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLENBQUMsSUFBRyxXQUFXLENBQVEsQ0FDMUYsQ0FDSixDQUNLLENBQ0osQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxTQUFTLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9UaWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vY29tcG9uZW50cy9yYWRpby90aWxlcy90aWxlL1JhZGlvVGlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFbEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6Qjs7Ozs7Ozs7Ozs7Ozs7O0dBZUc7QUFDSCxJQUFNLFNBQVMsR0FBRyxVQUFDLEVBY0Y7SUFiZixJQUFBLE9BQU8sYUFBQSxFQUNQLFNBQVMsZUFBQSxFQUNULFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLFVBQWtCLEVBQWxCLEVBQUUsbUJBQUcsS0FBSyxDQUFDLEtBQUssRUFBRSxLQUFBLEVBQ2xCLEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLElBQUksVUFBQSxFQUNKLEtBQUssV0FBQSxFQUNMLFdBQVcsaUJBQUEsRUFDWCxJQUFJLFVBQUEsRUFDSixVQUFVLGdCQUFBLEVBQ1AsTUFBTSxjQWJRLGlJQWNsQixDQURVO0lBRUQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsT0FBTyxDQUNMLDZCQUFLLFNBQVMsRUFBRSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxZQUFZLEVBQUUsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQztRQUM5Rix3Q0FDRSxJQUFJLEVBQUMsT0FBTyxFQUNaLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLEVBQUUsRUFBRSxFQUFFLEVBQ04sUUFBUSxFQUFFLFFBQVEsRUFDbEIsSUFBSSxFQUFFLElBQUksRUFDVixLQUFLLEVBQUUsS0FBSyxFQUNaLE9BQU8sRUFBRSxPQUFPLEVBQ2hCLFFBQVEsRUFBRSxVQUFDLENBQUM7Z0JBQ1YsSUFBSSxRQUFRLElBQUksQ0FBQyxRQUFRLElBQUksQ0FBQyxRQUFRLEVBQUU7b0JBQ3RDLFFBQVEsQ0FBQzt3QkFDUCxPQUFPLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxFQUFFO3dCQUNwQixVQUFVLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxLQUFLO3dCQUMxQixTQUFTLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxJQUFJO3dCQUN4QixZQUFZLEVBQUUsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxPQUFPO3FCQUMvQixDQUFDLENBQUE7aUJBQ0g7WUFDSCxDQUFDLElBQ0csTUFBTSxFQUNWO1FBQ0YsK0JBQU8sT0FBTyxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7WUFDbEUsSUFBSSxJQUFJLG9CQUFDLElBQUksSUFBQyxJQUFJLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxRQUFRLENBQUMsTUFBTSxHQUFJO1lBQ25ELFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FDWjtnQkFDRSw4QkFBTSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsSUFBRyxLQUFLLENBQVE7Z0JBQ3RFLFdBQVcsSUFBSSw4QkFBTSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsbUJBQW1CLENBQUMsQ0FBQyxJQUFHLFdBQVcsQ0FBUSxDQUM5RixDQUNSLENBQUMsQ0FBQyxDQUFDLENBQ0Y7Z0JBQ0UsOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLElBQUcsS0FBSyxDQUFRO2dCQUN0RSxXQUFXLElBQUksOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLG1CQUFtQixDQUFDLENBQUMsSUFBRyxXQUFXLENBQVEsQ0FDbEcsQ0FDSixDQUNLLENBQ0osQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxTQUFTLENBQUEifQ==

package/lib/components/radio/tiles/tile/index.d.ts

@@ -1,2 +1,2 @@
-import RadioTile from '../../../../components/radio/tiles/tile/RadioTile';
+import RadioTile from './RadioTile';
 export default RadioTile;

package/lib/components/radio/tiles/tile/index.js

@@ -1,3 +1,3 @@
-import RadioTile from '../../../../components/radio/tiles/tile/RadioTile';
+import RadioTile from './RadioTile';
 export default RadioTile;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9jb21wb25lbnRzL3JhZGlvL3RpbGVzL3RpbGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxTQUFTLE1BQU0seUNBQXlDLENBQUE7QUFFL0QsZUFBZSxTQUFTLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9jb21wb25lbnRzL3JhZGlvL3RpbGVzL3RpbGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxTQUFTLE1BQU0sYUFBYSxDQUFBO0FBRW5DLGVBQWUsU0FBUyxDQUFBIn0=

package/lib/components/range/Range.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { RangeProps } from '../../components/range/RangeProps';
+import { RangeProps } from './RangeProps';
 /**
  * Range Component
  * - -------------------------- MOBILE PROPERTIES -------------------------------

package/lib/components/range/Range.js

@@ -1,7 +1,10 @@
-import { useRange } from '../../components/range/hooks/useRange';
-import { hashClass } from '../../helpers/hashClassesHelpers';
+import { __read } from "tslib";
+import * as React from 'react';
+import { getColorStyle, TrilogyColor } from '../../objects';
+import { hashClass } from '../../helpers';
 import clsx from 'clsx';
-import React from 'react';
+import { useTrilogyContext } from '../../context';
+import shortid from 'shortid';
 /**
  * Range Component
  * - -------------------------- MOBILE PROPERTIES -------------------------------
@@ -15,25 +18,64 @@ import React from 'react';
  * @param onChangeMax {function} on change max cursor
  */
 var Range = function (_a) {
-    var className = _a.className, _b = _a.id, id = _b === void 0 ? React.useId() : _b, min = _a.min, max = _a.max, label = _a.label, valueMin = _a.valueMin, valueMax = _a.valueMax, unit = _a.unit, onChangeMin = _a.onChangeMin, onChangeMax = _a.onChangeMax, name = _a.name, _c = _a.gap, gap = _c === void 0 ? 0 : _c;
-    var _d = useRange({ min: min, max: max, valueMin: valueMin, valueMax: valueMax, onChangeMin: onChangeMin, onChangeMax: onChangeMax, gap: gap, name: name }), cursorMax = _d.cursorMax, cursorMin = _d.cursorMin, refTrack = _d.refTrack, handleMouseUpMin = _d.handleMouseUpMin, handleChangeCursorMin = _d.handleChangeCursorMin, handleMouseUpMax = _d.handleMouseUpMax, handleChangeCursorMax = _d.handleChangeCursorMax;
-    return (React.createElement("div", { id: id, className: hashClass(clsx('range-container', className)) },
-        React.createElement("label", { className: hashClass(clsx('range-label')) }, label),
-        React.createElement("div", { className: hashClass(clsx('range')) },
-            React.createElement("div", { ref: refTrack, className: hashClass(clsx('range-track')) }),
-            React.createElement("input", { className: hashClass(clsx('range-cursor range-cursor-min')), onMouseUp: handleMouseUpMin, onChange: handleChangeCursorMin, value: cursorMin, type: 'range', min: min, max: max, name: name, id: "".concat(id, "-min"), "aria-label": label }),
-            React.createElement("input", { className: hashClass(clsx('range-cursor range-cursor-max')), onMouseUp: handleMouseUpMax, onChange: handleChangeCursorMax, value: cursorMax, type: 'range', min: min, max: max, name: name, id: "".concat(id, "-max"), "aria-label": label })),
-        React.createElement("div", { className: hashClass(clsx('range-values')) },
+    var className = _a.className, _b = _a.id, id = _b === void 0 ? shortid.generate() : _b, min = _a.min, max = _a.max, label = _a.label, valueMin = _a.valueMin, valueMax = _a.valueMax, unit = _a.unit, onChangeMin = _a.onChangeMin, onChangeMax = _a.onChangeMax, name = _a.name, _c = _a.gap, gap = _c === void 0 ? 0 : _c;
+    var styled = useTrilogyContext().styled;
+    var _d = __read(React.useState(valueMin !== null && valueMin !== void 0 ? valueMin : 0), 2), cursorMin = _d[0], setCursorMin = _d[1];
+    var _e = __read(React.useState(valueMax !== null && valueMax !== void 0 ? valueMax : max), 2), cursorMax = _e[0], setCursorMax = _e[1];
+    var refTrack = React.useRef(null);
+    React.useEffect(function () {
+        if (refTrack.current) {
+            var track = refTrack.current;
+            track.style.background = "linear-gradient(to right, ".concat(getColorStyle(TrilogyColor.MAIN_FADE), " ").concat((cursorMin / max) * 100, "% , ").concat(getColorStyle(TrilogyColor.MAIN), " ").concat((cursorMin / max) * 100, "% , ").concat(getColorStyle(TrilogyColor.MAIN), " ").concat((cursorMax / max) * 100, "%, ").concat(getColorStyle(TrilogyColor.MAIN_FADE), " ").concat((cursorMax / max) * 100, "%) ");
+        }
+    }, [cursorMin, cursorMax]);
+    React.useEffect(function () {
+        setCursorMin(valueMin || 0);
+    }, [valueMin]);
+    React.useEffect(function () {
+        setCursorMax(valueMax || max);
+    }, [valueMax]);
+    var handleChangeCursorMin = React.useCallback(function (e) {
+        if (Number(e.target.value) < cursorMax - gap)
+            setCursorMin(Number(e.target.value));
+    }, [cursorMax, cursorMin]);
+    var handleChangeCursorMax = React.useCallback(function (e) {
+        if (Number(e.target.value) > cursorMin + gap)
+            setCursorMax(Number(e.target.value));
+    }, [cursorMax, cursorMin]);
+    var handleMouseUpMin = React.useCallback(function () {
+        if (onChangeMin) {
+            onChangeMin({
+                inputName: name,
+                inputValue: cursorMin,
+            });
+        }
+    }, [onChangeMin, name, cursorMin]);
+    var handleMouseUpMax = React.useCallback(function () {
+        if (onChangeMax) {
+            onChangeMax({
+                inputName: name,
+                inputValue: cursorMax,
+            });
+        }
+    }, [onChangeMax, name, cursorMax]);
+    return (React.createElement("div", { id: id, className: hashClass(styled, clsx('range-container', className)) },
+        React.createElement("label", { className: hashClass(styled, clsx('range-label')) }, label),
+        React.createElement("div", { className: hashClass(styled, clsx('range')) },
+            React.createElement("div", { ref: refTrack, className: hashClass(styled, clsx('range-track')) }),
+            React.createElement("input", { className: hashClass(styled, clsx('range-cursor range-cursor-min')), onMouseUp: handleMouseUpMin, onChange: handleChangeCursorMin, value: cursorMin, type: 'range', min: min, max: max, name: name, id: "".concat(id, "-min"), "aria-label": label }),
+            React.createElement("input", { className: hashClass(styled, clsx('range-cursor range-cursor-max')), onMouseUp: handleMouseUpMax, onChange: handleChangeCursorMax, value: cursorMax, type: 'range', min: min, max: max, name: name, id: "".concat(id, "-max"), "aria-label": label })),
+        React.createElement("div", { className: hashClass(styled, clsx('range-values')) },
             React.createElement("div", null,
-                React.createElement("span", { className: hashClass(clsx('range-value-min')) }, cursorMin),
+                React.createElement("span", { className: hashClass(styled, clsx('range-value-min')) }, cursorMin),
                 unit && React.createElement("span", null,
                     " ",
                     unit)),
             React.createElement("div", null,
-                React.createElement("span", { className: hashClass(clsx('range-value-max')) }, cursorMax),
+                React.createElement("span", { className: hashClass(styled, clsx('range-value-max')) }, cursorMax),
                 unit && React.createElement("span", null,
                     " ",
                     unit)))));
 };
 export default Range;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFuZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3JhbmdlL1JhbmdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sbUNBQW1DLENBQUE7QUFDNUQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekI7Ozs7Ozs7Ozs7O0dBV0c7QUFDSCxJQUFNLEtBQUssR0FBRyxVQUFDLEVBYUY7UUFaWCxTQUFTLGVBQUEsRUFDVCxVQUFrQixFQUFsQixFQUFFLG1CQUFHLEtBQUssQ0FBQyxLQUFLLEVBQUUsS0FBQSxFQUNsQixHQUFHLFNBQUEsRUFDSCxHQUFHLFNBQUEsRUFDSCxLQUFLLFdBQUEsRUFDTCxRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixJQUFJLFVBQUEsRUFDSixXQUFXLGlCQUFBLEVBQ1gsV0FBVyxpQkFBQSxFQUNYLElBQUksVUFBQSxFQUNKLFdBQU8sRUFBUCxHQUFHLG1CQUFHLENBQUMsS0FBQTtJQUVELElBQUEsS0FRRixRQUFRLENBQUMsRUFBRSxHQUFHLEtBQUEsRUFBRSxHQUFHLEtBQUEsRUFBRSxRQUFRLFVBQUEsRUFBRSxRQUFRLFVBQUEsRUFBRSxXQUFXLGFBQUEsRUFBRSxXQUFXLGFBQUEsRUFBRSxHQUFHLEtBQUEsRUFBRSxJQUFJLE1BQUEsRUFBRSxDQUFDLEVBUGpGLFNBQVMsZUFBQSxFQUNULFNBQVMsZUFBQSxFQUNULFFBQVEsY0FBQSxFQUNSLGdCQUFnQixzQkFBQSxFQUNoQixxQkFBcUIsMkJBQUEsRUFDckIsZ0JBQWdCLHNCQUFBLEVBQ2hCLHFCQUFxQiwyQkFDNEQsQ0FBQTtJQUVuRixPQUFPLENBQ0wsNkJBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxTQUFTLENBQUMsQ0FBQztRQUNuRSwrQkFBTyxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxJQUFHLEtBQUssQ0FBUztRQUNqRSw2QkFBSyxTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztZQUN0Qyw2QkFBSyxHQUFHLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDLEdBQVE7WUFDckUsK0JBQ0UsU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMsK0JBQStCLENBQUMsQ0FBQyxFQUMzRCxTQUFTLEVBQUUsZ0JBQWdCLEVBQzNCLFFBQVEsRUFBRSxxQkFBcUIsRUFDL0IsS0FBSyxFQUFFLFNBQVMsRUFDaEIsSUFBSSxFQUFDLE9BQU8sRUFDWixHQUFHLEVBQUUsR0FBRyxFQUNSLEdBQUcsRUFBRSxHQUFHLEVBQ1IsSUFBSSxFQUFFLElBQUksRUFDVixFQUFFLEVBQUUsVUFBRyxFQUFFLFNBQU0sZ0JBQ0gsS0FBSyxHQUNqQjtZQUNGLCtCQUNFLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLCtCQUErQixDQUFDLENBQUMsRUFDM0QsU0FBUyxFQUFFLGdCQUFnQixFQUMzQixRQUFRLEVBQUUscUJBQXFCLEVBQy9CLEtBQUssRUFBRSxTQUFTLEVBQ2hCLElBQUksRUFBQyxPQUFPLEVBQ1osR0FBRyxFQUFFLEdBQUcsRUFDUixHQUFHLEVBQUUsR0FBRyxFQUNSLElBQUksRUFBRSxJQUFJLEVBQ1YsRUFBRSxFQUFFLFVBQUcsRUFBRSxTQUFNLGdCQUNILEtBQUssR0FDakIsQ0FDRTtRQUNOLDZCQUFLLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1lBQzdDO2dCQUNFLDhCQUFNLFNBQVMsRUFBRSxTQUFTLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLENBQUMsSUFBRyxTQUFTLENBQVE7Z0JBQ3RFLElBQUksSUFBSTs7b0JBQVEsSUFBSSxDQUFRLENBQ3pCO1lBQ047Z0JBQ0UsOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxJQUFHLFNBQVMsQ0FBUTtnQkFDdEUsSUFBSSxJQUFJOztvQkFBUSxJQUFJLENBQVEsQ0FDekIsQ0FDRixDQUNGLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsS0FBSyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFuZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3JhbmdlL1JhbmdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFdkQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sT0FBTyxNQUFNLFNBQVMsQ0FBQTtBQUU3Qjs7Ozs7Ozs7Ozs7R0FXRztBQUNILElBQU0sS0FBSyxHQUFHLFVBQUMsRUFhRjtRQVpYLFNBQVMsZUFBQSxFQUNULFVBQXVCLEVBQXZCLEVBQUUsbUJBQUcsT0FBTyxDQUFDLFFBQVEsRUFBRSxLQUFBLEVBQ3ZCLEdBQUcsU0FBQSxFQUNILEdBQUcsU0FBQSxFQUNILEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLElBQUksVUFBQSxFQUNKLFdBQVcsaUJBQUEsRUFDWCxXQUFXLGlCQUFBLEVBQ1gsSUFBSSxVQUFBLEVBQ0osV0FBTyxFQUFQLEdBQUcsbUJBQUcsQ0FBQyxLQUFBO0lBRUMsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFaEMsSUFBQSxLQUFBLE9BQTRCLEtBQUssQ0FBQyxRQUFRLENBQVMsUUFBUSxhQUFSLFFBQVEsY0FBUixRQUFRLEdBQUksQ0FBQyxDQUFDLElBQUEsRUFBaEUsU0FBUyxRQUFBLEVBQUUsWUFBWSxRQUF5QyxDQUFBO0lBQ2pFLElBQUEsS0FBQSxPQUE0QixLQUFLLENBQUMsUUFBUSxDQUFTLFFBQVEsYUFBUixRQUFRLGNBQVIsUUFBUSxHQUFJLEdBQUcsQ0FBQyxJQUFB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

package/lib/components/range/RangeProps.d.ts

@@ -1,9 +1,8 @@
 /**
  * range Interface
  */
-import { Accessibility } from '../../objects/facets/Accessibility';
+import { Accessibility, Dev } from '../../objects';
 import { CommonProps } from '../../objects/facets/CommonProps';
-import { Dev } from '../../objects/facets/Dev';
 export type InputChangeEventHandlerNative = (event: {
     inputValue: number[];
     inputName: string;

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

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

package/lib/components/range/index.js

@@ -1,3 +1,3 @@
-import Range from '../../components/range/Range';
+import Range from './Range';
 export { Range };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3JhbmdlL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLDBCQUEwQixDQUFBO0FBRTVDLE9BQU8sRUFBRSxLQUFLLEVBQUUsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3JhbmdlL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLFNBQVMsQ0FBQTtBQUUzQixPQUFPLEVBQUUsS0FBSyxFQUFFLENBQUEifQ==

package/lib/components/rows/Rows.js

@@ -1,8 +1,9 @@
 import { __assign, __rest } from "tslib";
+import * as React from 'react';
 import { hashClass } from '../../helpers';
-import { has, is } from '../../services';
 import clsx from 'clsx';
-import * as React from 'react';
+import { useTrilogyContext } from '../../context';
+import { has, is } from '../../services';
 /**
  * Rows Component
  * @param children {React.ReactNode} Rows children
@@ -11,7 +12,8 @@ import * as React from 'react';
  */
 var Rows = function (_a) {
     var className = _a.className, id = _a.id, gap = _a.gap, others = __rest(_a, ["className", "id", "gap"]);
-    return (React.createElement("div", __assign({ id: id, className: hashClass(clsx('rows', gap && has("gap-".concat(gap)), typeof gap !== 'undefined' && gap === 0 && is('gapless'), className)) }, others)));
+    var styled = useTrilogyContext().styled;
+    return (React.createElement("div", __assign({ id: id, className: hashClass(styled, clsx('rows', gap && has("gap-".concat(gap)), typeof gap !== 'undefined' && gap === 0 && is('gapless'), className)) }, others)));
 };
 export default Rows;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUm93cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcm93cy9Sb3dzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUNwQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHOUI7Ozs7O0dBS0c7QUFDSCxJQUFNLElBQUksR0FBRyxVQUFDLEVBQTRDO0lBQTFDLElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsR0FBRyxTQUFBLEVBQUssTUFBTSxjQUEvQiwwQkFBaUMsQ0FBRjtJQUMzQyxPQUFPLENBQ0wsc0NBQ0UsRUFBRSxFQUFFLEVBQUUsRUFDTixTQUFTLEVBQUUsU0FBUyxDQUNsQixJQUFJLENBQUMsTUFBTSxFQUFFLEdBQUcsSUFBSSxHQUFHLENBQUMsY0FBTyxHQUFHLENBQUUsQ0FBQyxFQUFFLE9BQU8sR0FBRyxLQUFLLFdBQVcsSUFBSSxHQUFHLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQyxTQUFTLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FDNUcsSUFDRyxNQUFNLEVBQ1YsQ0FDSCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxJQUFJLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUm93cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcm93cy9Sb3dzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBRXBDOzs7OztHQUtHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsVUFBQyxFQUE0QztJQUExQyxJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLEdBQUcsU0FBQSxFQUFLLE1BQU0sY0FBL0IsMEJBQWlDLENBQUY7SUFDbkMsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsT0FBTyxDQUNMLHNDQUNFLEVBQUUsRUFBRSxFQUFFLEVBQ04sU0FBUyxFQUFFLFNBQVMsQ0FDbEIsTUFBTSxFQUNOLElBQUksQ0FBQyxNQUFNLEVBQUUsR0FBRyxJQUFJLEdBQUcsQ0FBQyxjQUFPLEdBQUcsQ0FBRSxDQUFDLEVBQUUsT0FBTyxHQUFHLEtBQUssV0FBVyxJQUFJLEdBQUcsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUM1RyxJQUNHLE1BQU0sRUFDVixDQUNILENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLElBQUksQ0FBQSJ9

package/lib/components/rows/row/Row.js

@@ -1,8 +1,9 @@
 import { __assign, __rest } from "tslib";
-import { hashClass } from '../../../helpers';
+import * as React from 'react';
 import { is } from '../../../services/classify';
+import { hashClass } from '../../../helpers';
 import clsx from 'clsx';
-import * as React from 'react';
+import { useTrilogyContext } from '../../../context';
 /**
  * Rows Item Component
  * @param narrow {boolean} Align same elements horizontaly
@@ -12,8 +13,9 @@ import * as React from 'react';
  */
 var Row = function (_a) {
     var className = _a.className, id = _a.id, narrow = _a.narrow, others = __rest(_a, ["className", "id", "narrow"]);
-    var classes = hashClass(clsx('row', narrow && is('narrow'), className));
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('row', narrow && is('narrow'), className));
     return React.createElement("div", __assign({ id: id, className: classes }, others));
 };
 export default Row;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUm93LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9yb3dzL3Jvdy9Sb3cudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHOUI7Ozs7OztHQU1HO0FBQ0gsSUFBTSxHQUFHLEdBQUcsVUFBQyxFQUE4QztJQUE1QyxJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLE1BQU0sWUFBQSxFQUFLLE1BQU0sY0FBbEMsNkJBQW9DLENBQUY7SUFDN0MsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsTUFBTSxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBQ3pFLE9BQU8sc0NBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU0sRUFBSSxDQUFBO0FBQ3hELENBQUMsQ0FBQTtBQUVELGVBQWUsR0FBRyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUm93LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9yb3dzL3Jvdy9Sb3cudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7R0FNRztBQUNILElBQU0sR0FBRyxHQUFHLFVBQUMsRUFBOEM7SUFBNUMsSUFBQSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxNQUFNLFlBQUEsRUFBSyxNQUFNLGNBQWxDLDZCQUFvQyxDQUFGO0lBQ3JDLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBQ3RDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxNQUFNLElBQUksRUFBRSxDQUFDLFFBQVEsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFDakYsT0FBTyxzQ0FBSyxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTSxFQUFJLENBQUE7QUFDeEQsQ0FBQyxDQUFBO0FBRUQsZUFBZSxHQUFHLENBQUEifQ==

package/lib/components/scroll-view/ScrollView.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { ScrollViewProps } from './ScrollViewProps';
+import * as React from "react";
+import { ScrollViewProps } from "./ScrollViewProps";
 /**
  * Scroll View Component
  * @param children {React.ReactNode} ScrollView child

package/lib/components/scroll-view/ScrollView.js

@@ -1,8 +1,9 @@
-import { hashClass } from '../../helpers';
-import { ScrollDirectionEnum } from '../../objects';
-import { is } from '../../services';
-import clsx from 'clsx';
-import * as React from 'react';
+import * as React from "react";
+import { useTrilogyContext } from "../../context";
+import { hashClass } from "../../helpers";
+import clsx from "clsx";
+import { is } from "../../services";
+import { ScrollDirectionEnum } from "../../objects";
 /**
  * Scroll View Component
  * @param children {React.ReactNode} ScrollView child
@@ -21,19 +22,20 @@ import * as React from 'react';
  */
 var ScrollView = React.forwardRef(function (_a, ref) {
     var id = _a.id, scrollDirection = _a.scrollDirection, children = _a.children;
+    var styled = useTrilogyContext().styled;
     var scrollDirectionClassName = function () {
         switch (scrollDirection) {
             case ScrollDirectionEnum === null || ScrollDirectionEnum === void 0 ? void 0 : ScrollDirectionEnum.HORIZONTAL:
-                return is('horizontal');
+                return is("horizontal");
             case ScrollDirectionEnum === null || ScrollDirectionEnum === void 0 ? void 0 : ScrollDirectionEnum.VERTICAL:
-                return is('vertical');
+                return is("vertical");
             default:
-                return '';
+                return "";
         }
     };
-    var classes = hashClass(clsx('scroll-view', scrollDirection && scrollDirectionClassName()));
+    var classes = hashClass(styled, clsx("scroll-view", scrollDirection && scrollDirectionClassName()));
     return (React.createElement("div", { ref: ref, className: classes, id: id }, children));
 });
-ScrollView.displayName = 'ScrollView';
+ScrollView.displayName = "ScrollView";
 export default ScrollView;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2Nyb2xsVmlldy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2Nyb2xsLXZpZXcvU2Nyb2xsVmlldy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDL0MsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUMvQixPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHOUI7Ozs7Ozs7Ozs7Ozs7OztHQWVHO0FBQ0gsSUFBTSxVQUFVLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDakMsVUFBQyxFQUFpQyxFQUFFLEdBQUc7UUFBcEMsRUFBRSxRQUFBLEVBQUUsZUFBZSxxQkFBQSxFQUFFLFFBQVEsY0FBQTtJQUM5QixJQUFNLHdCQUF3QixHQUFHO1FBQy9CLFFBQVEsZUFBZSxFQUFFO1lBQ3ZCLEtBQUssbUJBQW1CLGFBQW5CLG1CQUFtQix1QkFBbkIsbUJBQW1CLENBQUUsVUFBVTtnQkFDbEMsT0FBTyxFQUFFLENBQUMsWUFBWSxDQUFDLENBQUE7WUFDekIsS0FBSyxtQkFBbUIsYUFBbkIsbUJBQW1CLHVCQUFuQixtQkFBbUIsQ0FBRSxRQUFRO2dCQUNoQyxPQUFPLEVBQUUsQ0FBQyxVQUFVLENBQUMsQ0FBQTtZQUN2QjtnQkFDRSxPQUFPLEVBQUUsQ0FBQTtTQUNaO0lBQ0gsQ0FBQyxDQUFBO0lBRUQsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUUsZUFBZSxJQUFJLHdCQUF3QixFQUFFLENBQUMsQ0FBQyxDQUFBO0lBQzdGLE9BQU8sQ0FDTCw2QkFBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLEVBQUUsSUFDdEMsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsVUFBVSxDQUFDLFdBQVcsR0FBRyxZQUFZLENBQUE7QUFFckMsZUFBZSxVQUFVLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2Nyb2xsVmlldy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2Nyb2xsLXZpZXcvU2Nyb2xsVmlldy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDL0IsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRS9DOzs7Ozs7Ozs7Ozs7Ozs7R0FlRztBQUNILElBQU0sVUFBVSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ2pDLFVBQUMsRUFBaUMsRUFBRSxHQUFHO1FBQXBDLEVBQUUsUUFBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxRQUFRLGNBQUE7SUFDdEIsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSx3QkFBd0IsR0FBRztRQUMvQixRQUFRLGVBQWUsRUFBRTtZQUN2QixLQUFLLG1CQUFtQixhQUFuQixtQkFBbUIsdUJBQW5CLG1CQUFtQixDQUFFLFVBQVU7Z0JBQ2xDLE9BQU8sRUFBRSxDQUFDLFlBQVksQ0FBQyxDQUFBO1lBQ3pCLEtBQUssbUJBQW1CLGFBQW5CLG1CQUFtQix1QkFBbkIsbUJBQW1CLENBQUUsUUFBUTtnQkFDaEMsT0FBTyxFQUFFLENBQUMsVUFBVSxDQUFDLENBQUE7WUFDdkI7Z0JBQ0UsT0FBTyxFQUFFLENBQUE7U0FDWjtJQUNILENBQUMsQ0FBQTtJQUVELElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FBQyxhQUFhLEVBQUUsZUFBZSxJQUFJLHdCQUF3QixFQUFFLENBQUMsQ0FDbkUsQ0FBQTtJQUNELE9BQU8sQ0FDTCw2QkFBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLEVBQUUsSUFDdEMsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsVUFBVSxDQUFDLFdBQVcsR0FBRyxZQUFZLENBQUE7QUFFckMsZUFBZSxVQUFVLENBQUEifQ==

package/lib/components/section/Section.js

@@ -1,9 +1,10 @@
 import { __assign, __rest } from "tslib";
-import { hashClass } from '../../helpers';
-import { getBackgroundClassName } from '../../objects';
+import React from 'react';
 import { has, is } from '../../services';
+import { getBackgroundClassName } from '../../objects';
 import clsx from 'clsx';
-import React from 'react';
+import { hashClass } from '../../helpers';
+import { useTrilogyContext } from '../../context';
 /**
  * Section Component - Manages the main margins of the page and takes up all the available width.
  * @param children {React.ReactNode}
@@ -17,10 +18,11 @@ import React from 'react';
  **/
 var Section = function (_a) {
     var className = _a.className, id = _a.id, skeleton = _a.skeleton, backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, inverted = _a.inverted, others = __rest(_a, ["className", "id", "skeleton", "backgroundColor", "backgroundSrc", "inverted"]);
-    var _className = hashClass(clsx('section', className, backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has('background'), inverted && is('inverted'), skeleton && is('loading')));
+    var styled = useTrilogyContext().styled;
+    var _className = hashClass(styled, clsx('section', className, backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has('background'), inverted && is('inverted'), skeleton && is('loading')));
     return (React.createElement("section", __assign({ id: id }, (backgroundSrc && {
         style: { backgroundImage: "url(".concat(backgroundSrc, ")") },
     }), { className: _className }, others)));
 };
 export default Section;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDbEQsT0FBTyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDcEMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUd6Qjs7Ozs7Ozs7OztJQVVJO0FBQ0osSUFBTSxPQUFPLEdBQUcsVUFBQyxFQUE4RjtJQUE1RixJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUE5RSwrRUFBZ0YsQ0FBRjtJQUM3RixJQUFNLFVBQVUsR0FBRyxTQUFTLENBQzFCLElBQUksQ0FDRixTQUFTLEVBQ1QsU0FBUyxFQUNULGVBQWUsSUFBSSxHQUFHLENBQUMsc0JBQXNCLENBQUMsZUFBZSxDQUFDLENBQUMsRUFDL0QsYUFBYSxJQUFJLEdBQUcsQ0FBQyxZQUFZLENBQUMsRUFDbEMsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFDMUIsUUFBUSxJQUFJLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FDMUIsQ0FDRixDQUFBO0lBRUQsT0FBTyxDQUNMLDBDQUNFLEVBQUUsRUFBRSxFQUFFLElBQ0YsQ0FBQyxhQUFhLElBQUk7UUFDcEIsS0FBSyxFQUFFLEVBQUUsZUFBZSxFQUFFLGNBQU8sYUFBYSxNQUFHLEVBQUU7S0FDcEQsQ0FBQyxJQUNGLFNBQVMsRUFBRSxVQUFVLElBQ2pCLE1BQU0sRUFDVixDQUNILENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLE9BQU8sQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3BDLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNsRCxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFN0M7Ozs7Ozs7Ozs7SUFVSTtBQUNKLElBQU0sT0FBTyxHQUFHLFVBQUMsRUFBOEY7SUFBNUYsSUFBQSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxlQUFlLHFCQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFFLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBOUUsK0VBQWdGLENBQUY7SUFDckYsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxVQUFVLEdBQUcsU0FBUyxDQUMxQixNQUFNLEVBQ04sSUFBSSxDQUNGLFNBQVMsRUFDVCxTQUFTLEVBQ1QsZUFBZSxJQUFJLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxlQUFlLENBQUMsQ0FBQyxFQUMvRCxhQUFhLElBQUksR0FBRyxDQUFDLFlBQVksQ0FBQyxFQUNsQyxRQUFRLElBQUksRUFBRSxDQUFDLFVBQVUsQ0FBQyxFQUMxQixRQUFRLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxDQUMxQixDQUNGLENBQUE7SUFFRCxPQUFPLENBQ0wsMENBQ0UsRUFBRSxFQUFFLEVBQUUsSUFDRixDQUFDLGFBQWEsSUFBSTtRQUNwQixLQUFLLEVBQUUsRUFBRSxlQUFlLEVBQUUsY0FBTyxhQUFhLE1BQUcsRUFBRTtLQUNwRCxDQUFDLElBQ0YsU0FBUyxFQUFFLFVBQVUsSUFDakIsTUFBTSxFQUNWLENBQ0gsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsT0FBTyxDQUFBIn0=

package/lib/components/segment-control/SegmentControl.d.ts

@@ -1,20 +1,14 @@
 /// <reference types="react" />
-import { ComponentName } from '../../components/enumsComponentsName';
-import { SegmentControlProps } from '../../components/segment-control/SegmentControlProps';
+import { SegmentControlProps } from './SegmentControlProps';
 /**
  * SegmentControl Component
  * @param children {ReactNode} Children for SegmentControl
  * @param onClick onClick event
  * @param activeIndex {number} default active SegmentControl index
  * @param disabled {boolean} disabled SegmentControl
- * @param marginless {boolean} delete margin
  * - -------------- WEB PROPERTIES ---------------
  * @param className {string} Additionnal CSS Classes
  * - -------------- NATIVE PROPERTIES ---------------
- * @param inverted {boolean} invert color SegmentControl
  */
-declare const SegmentControl: {
-    ({ className, id, onClick, children, activeIndex, align }: SegmentControlProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const SegmentControl: ({ className, id, onClick, children, activeIndex, align }: SegmentControlProps) => JSX.Element;
 export default SegmentControl;

package/lib/components/segment-control/SegmentControl.js

@@ -1,26 +1,25 @@
-import { ComponentName } from '../../components/enumsComponentsName';
-import { useSegmentControl } from '../../components/segment-control/hooks/useSegmentControl';
-import SegmentControlItem from '../../components/segment-control/item';
-import { hashClass } from '../../helpers/hashClassesHelpers';
-import { getJustifiedClassName } from '../../objects/facets/Justifiable';
+import { __read } from "tslib";
+import React, { useState } from 'react';
+import SegmentControlItem from './item';
+import { hashClass } from '../../helpers';
 import clsx from 'clsx';
-import React from 'react';
+import { useTrilogyContext } from '../../context';
+import { getJustifiedClassName } from '../../objects';
 /**
  * SegmentControl Component
  * @param children {ReactNode} Children for SegmentControl
  * @param onClick onClick event
  * @param activeIndex {number} default active SegmentControl index
  * @param disabled {boolean} disabled SegmentControl
- * @param marginless {boolean} delete margin
  * - -------------- WEB PROPERTIES ---------------
  * @param className {string} Additionnal CSS Classes
  * - -------------- NATIVE PROPERTIES ---------------
- * @param inverted {boolean} invert color SegmentControl
  */
 var SegmentControl = function (_a) {
     var className = _a.className, id = _a.id, onClick = _a.onClick, children = _a.children, activeIndex = _a.activeIndex, align = _a.align;
-    var classes = hashClass(clsx('segmented-control', align && getJustifiedClassName(align), className));
-    var _b = useSegmentControl({ activeIndex: activeIndex, onClick: onClick }), activateIndex = _b.activateIndex, handleClick = _b.handleClick;
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('segmented-control', align && getJustifiedClassName(align), className));
+    var _b = __read(useState(activeIndex || 0), 2), activateIndex = _b[0], setActivateIndex = _b[1];
     var isActive = function (index, childPropsActive) {
         if (typeof childPropsActive !== 'undefined' && !activateIndex) {
             return childPropsActive;
@@ -29,20 +28,33 @@ var SegmentControl = function (_a) {
             return true;
         }
     };
-    return (React.createElement("div", { className: classes }, children &&
+    var toggleActive = function (e, index) {
+        setActivateIndex(index);
+        if (onClick)
+            onClick(e);
+    };
+    React.useEffect(function () {
+        setActivateIndex(activateIndex);
+    }, [activateIndex]);
+    return (React.createElement("div", { id: id, className: classes }, children &&
         Array.isArray(children) &&
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         children.map(function (child, index) {
             var props = {
                 active: Boolean(isActive(index, child.props.active)) || false,
                 disabled: child.props.disabled,
                 key: index,
-                onClick: handleClick
-                    ? function (e) { return handleClick(e, index, child); }
-                    : undefined,
+                onClick: function (event) {
+                    toggleActive(event, index);
+                    if (child) {
+                        if (child.props.onClick) {
+                            child.props.onClick(event);
+                        }
+                    }
+                },
             };
             return child && typeof child.valueOf() === 'string' ? (React.createElement(SegmentControlItem, { disabled: props.disabled, active: props.active, key: props.key, onClick: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e); } }, child)) : (React.cloneElement(child, props));
         })));
 };
-SegmentControl.displayName = ComponentName.SegmentControl;
 export default SegmentControl;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9TZWdtZW50Q29udHJvbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHNEQUFzRCxDQUFBO0FBQ3hGLE9BQU8sa0JBQWtCLE1BQU0sbUNBQW1DLENBQUE7QUFFbEUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3BFLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekI7Ozs7Ozs7Ozs7O0dBV0c7QUFDSCxJQUFNLGNBQWMsR0FBRyxVQUFDLEVBQTZFO1FBQTNFLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFdBQVcsaUJBQUEsRUFBRSxLQUFLLFdBQUE7SUFDNUUsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxLQUFLLElBQUkscUJBQXFCLENBQUMsS0FBSyxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUNoRyxJQUFBLEtBQWlDLGlCQUFpQixDQUFDLEVBQUUsV0FBVyxhQUFBLEVBQUUsT0FBTyxTQUFBLEVBQUUsQ0FBQyxFQUExRSxhQUFhLG1CQUFBLEVBQUUsV0FBVyxpQkFBZ0QsQ0FBQTtJQUVsRixJQUFNLFFBQVEsR0FBRyxVQUFDLEtBQWEsRUFBRSxnQkFBaUM7UUFDaEUsSUFBSSxPQUFPLGdCQUFnQixLQUFLLFdBQVcsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUM3RCxPQUFPLGdCQUFnQixDQUFBO1NBQ3hCO1FBQ0QsSUFBSSxLQUFLLEtBQUssYUFBYSxFQUFFO1lBQzNCLE9BQU8sSUFBSSxDQUFBO1NBQ1o7SUFDSCxDQUFDLENBQUE7SUFFRCxPQUFPLENBQ0wsNkJBQUssU0FBUyxFQUFFLE9BQU8sSUFDcEIsUUFBUTtRQUNQLEtBQUssQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDO1FBQ3ZCLFFBQVEsQ0FBQyxHQUFHLENBQUMsVUFBQyxLQUFLLEVBQUUsS0FBSztZQUN4QixJQUFNLEtBQUssR0FBRztnQkFDWixNQUFNLEVBQUUsT0FBTyxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLEtBQUs7Z0JBQzdELFFBQVEsRUFBRSxLQUFLLENBQUMsS0FBSyxDQUFDLFFBQVE7Z0JBQzlCLEdBQUcsRUFBRSxLQUFLO2dCQUNWLE9BQU8sRUFBRSxXQUFXO29CQUNsQixDQUFDLENBQUMsVUFBQyxDQUF3QyxJQUFLLE9BQUEsV0FBVyxDQUFDLENBQUMsRUFBRSxLQUFLLEVBQUUsS0FBSyxDQUFDLEVBQTVCLENBQTRCO29CQUM1RSxDQUFDLENBQUMsU0FBUzthQUNkLENBQUE7WUFFRCxPQUFPLEtBQUssSUFBSSxPQUFPLEtBQUssQ0FBQyxPQUFPLEVBQUUsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQ3BELG9CQUFDLGtCQUFrQixJQUNqQixRQUFRLEVBQUUsS0FBSyxDQUFDLFFBQVEsRUFDeEIsTUFBTSxFQUFFLEtBQUssQ0FBQyxNQUFNLEVBQ3BCLEdBQUcsRUFBRSxLQUFLLENBQUMsR0FBRyxFQUNkLE9BQU8sRUFBRSxVQUFDLENBQVUsSUFBSyxPQUFBLE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRyxDQUFDLENBQUMsRUFBWixDQUFZLElBRXBDLEtBQUssQ0FDYSxDQUN0QixDQUFDLENBQUMsQ0FBQyxDQUNGLEtBQUssQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUNqQyxDQUFBO1FBQ0gsQ0FBQyxDQUFDLENBQ0EsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsY0FBYyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsY0FBYyxDQUFBO0FBQ3pELGVBQWUsY0FBYyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9TZWdtZW50Q29udHJvbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ3ZDLE9BQU8sa0JBQWtCLE1BQU0sUUFBUSxDQUFBO0FBRXZDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFakQ7Ozs7Ozs7OztHQVNHO0FBQ0gsSUFBTSxjQUFjLEdBQUcsVUFBQyxFQUE2RTtRQUEzRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxXQUFXLGlCQUFBLEVBQUUsS0FBSyxXQUFBO0lBQ3BFLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLG1CQUFtQixFQUFFLEtBQUssSUFBSSxxQkFBcUIsQ0FBQyxLQUFLLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBQ3hHLElBQUEsS0FBQSxPQUFvQyxRQUFRLENBQVMsV0FBVyxJQUFJLENBQUMsQ0FBQyxJQUFBLEVBQXJFLGFBQWEsUUFBQSxFQUFFLGdCQUFnQixRQUFzQyxDQUFBO0lBRTVFLElBQU0sUUFBUSxHQUFHLFVBQUMsS0FBYSxFQUFFLGdCQUFpQztRQUNoRSxJQUFJLE9BQU8sZ0JBQWdCLEtBQUssV0FBVyxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQzdELE9BQU8sZ0JBQWdCLENBQUE7U0FDeEI7UUFDRCxJQUFJLEtBQUssS0FBSyxhQUFhLEVBQUU7WUFDM0IsT0FBTyxJQUFJLENBQUE7U0FDWjtJQUNILENBQUMsQ0FBQTtJQUVELElBQU0sWUFBWSxHQUFHLFVBQUMsQ0FBbUIsRUFBRSxLQUFhO1FBQ3RELGdCQUFnQixDQUFDLEtBQUssQ0FBQyxDQUFBO1FBQ3ZCLElBQUksT0FBTztZQUFFLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQTtJQUN6QixDQUFDLENBQUE7SUFFRCxLQUFLLENBQUMsU0FBUyxDQUFDO1FBQ2QsZ0JBQWdCLENBQUMsYUFBYSxDQUFDLENBQUE7SUFDakMsQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQTtJQUVuQixPQUFPLENBQ0wsNkJBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUM1QixRQUFRO1FBQ1AsS0FBSyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUM7UUFDdkIsOERBQThEO1FBQzlELFFBQVEsQ0FBQyxHQUFHLENBQUMsVUFBQyxLQUFVLEVBQUUsS0FBYTtZQUNyQyxJQUFNLEtBQUssR0FBRztnQkFDWixNQUFNLEVBQUUsT0FBTyxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLEtBQUs7Z0JBQzdELFFBQVEsRUFBRSxLQUFLLENBQUMsS0FBSyxDQUFDLFFBQVE7Z0JBQzlCLEdBQUcsRUFBRSxLQUFLO2dCQUNWLE9BQU8sRUFBRSxVQUFDLEtBQXVCO29CQUMvQixZQUFZLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFBO29CQUMxQixJQUFJLEtBQUssRUFBRTt3QkFDVCxJQUFJLEtBQUssQ0FBQyxLQUFLLENBQUMsT0FBTyxFQUFFOzRCQUN2QixLQUFLLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQTt5QkFDM0I7cUJBQ0Y7Z0JBQ0gsQ0FBQzthQUNGLENBQUE7WUFFRCxPQUFPLEtBQUssSUFBSSxPQUFPLEtBQUssQ0FBQyxPQUFPLEVBQUUsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQ3BELG9CQUFDLGtCQUFrQixJQUNqQixRQUFRLEVBQUUsS0FBSyxDQUFDLFFBQVEsRUFDeEIsTUFBTSxFQUFFLEtBQUssQ0FBQyxNQUFNLEVBQ3BCLEdBQUcsRUFBRSxLQUFLLENBQUMsR0FBRyxFQUNkLE9BQU8sRUFBRSxVQUFDLENBQVUsSUFBSyxPQUFBLE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRyxDQUFDLENBQUMsRUFBWixDQUFZLElBRXBDLEtBQUssQ0FDYSxDQUN0QixDQUFDLENBQUMsQ0FBQyxDQUNGLEtBQUssQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUNqQyxDQUFBO1FBQ0gsQ0FBQyxDQUFDLENBQ0EsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxjQUFjLENBQUEifQ==

package/lib/components/segment-control/SegmentControlProps.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { Alignable, AlignableValues } from '../../objects/facets/Alignable';
 import { Clickable } from '../../objects/facets/Clickable';
 import { CommonProps } from '../../objects/facets/CommonProps';
+import { Alignable, AlignableValues } from '../../objects';
 /**
  * SegmentedControl Interface
  */

package/lib/components/segment-control/item/SegmentControlItem.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import { ComponentName } from '../../../components/enumsComponentsName';
-import { SegmentControlItemProps } from '../../../components/segment-control/item/SegmentControlItemProps';
+import { SegmentControlItemProps } from './SegmentControlItemProps';
 /**
  * SegmentControl Item Component
  * @param active {boolean} active segmentedControl item
@@ -11,8 +10,5 @@ import { SegmentControlItemProps } from '../../../components/segment-control/ite
  * - -------------- WEB PROPERTIES ---------------
  * @param className {string} Additionnal CSS Classes
  */
-declare const SegmentControlItem: {
-    ({ active, onClick, disabled, className, id, children, }: SegmentControlItemProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const SegmentControlItem: ({ active, onClick, disabled, className, id, children, }: SegmentControlItemProps) => JSX.Element;
 export default SegmentControlItem;

package/lib/components/segment-control/item/SegmentControlItem.js

@@ -1,8 +1,8 @@
-import { ComponentName } from '../../../components/enumsComponentsName';
-import { useSegmentControlItem } from '../../../components/segment-control/item/hooks/useSegmentControlItem';
-import { hashClass } from '../../../helpers/hashClassesHelpers';
+import { __read } from "tslib";
+import React, { useEffect, useState } from 'react';
+import { hashClass } from '../../../helpers';
 import clsx from 'clsx';
-import React from 'react';
+import { useTrilogyContext } from '../../../context';
 /**
  * SegmentControl Item Component
  * @param active {boolean} active segmentedControl item
@@ -15,9 +15,19 @@ import React from 'react';
  */
 var SegmentControlItem = function (_a) {
     var active = _a.active, onClick = _a.onClick, disabled = _a.disabled, className = _a.className, id = _a.id, children = _a.children;
-    var _b = useSegmentControlItem({ active: active, onClick: onClick }), activeItem = _b.activeItem, handleClick = _b.handleClick;
-    return (React.createElement("button", { id: id, disabled: disabled, className: hashClass(clsx('segmented-control-item', className, { 'is-active': activeItem })), onClick: handleClick }, children));
+    var _b = __read(useState(active || false), 2), activeItem = _b[0], setActiveItem = _b[1];
+    var styled = useTrilogyContext().styled;
+    useEffect(function () {
+        setActiveItem(active || false);
+    }, [active]);
+    return (React.createElement("button", { id: id, disabled: disabled, className: hashClass(styled, clsx('segmented-control-item', className, { 'is-active': activeItem })), onClick: function (e) {
+            var target = e.target;
+            setActiveItem(active || false);
+            target.active = active;
+            if (onClick) {
+                onClick(e);
+            }
+        } }, children));
 };
-SegmentControlItem.displayName = ComponentName.SegmentControlItem;
 export default SegmentControlItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvaXRlbS9TZWdtZW50Q29udHJvbEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSwrREFBK0QsQ0FBQTtBQUVyRyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6Qjs7Ozs7Ozs7O0dBU0c7QUFDSCxJQUFNLGtCQUFrQixHQUFHLFVBQUMsRUFPRjtRQU54QixNQUFNLFlBQUEsRUFDTixPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDUixTQUFTLGVBQUEsRUFDVCxFQUFFLFFBQUEsRUFDRixRQUFRLGNBQUE7SUFFRixJQUFBLEtBQThCLHFCQUFxQixDQUFDLEVBQUUsTUFBTSxRQUFBLEVBQUUsT0FBTyxTQUFBLEVBQUUsQ0FBQyxFQUF0RSxVQUFVLGdCQUFBLEVBQUUsV0FBVyxpQkFBK0MsQ0FBQTtJQUU5RSxPQUFPLENBQ0wsZ0NBQ0UsRUFBRSxFQUFFLEVBQUUsRUFDTixRQUFRLEVBQUUsUUFBUSxFQUNsQixTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyx3QkFBd0IsRUFBRSxTQUFTLEVBQUUsRUFBRSxXQUFXLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQyxFQUM1RixPQUFPLEVBQUUsV0FBVyxJQUVuQixRQUFRLENBQ0YsQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsa0JBQWtCLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQTtBQUNqRSxlQUFlLGtCQUFrQixDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvaXRlbS9TZWdtZW50Q29udHJvbEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFFbEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7Ozs7R0FTRztBQUNILElBQU0sa0JBQWtCLEdBQUcsVUFBQyxFQU9GO1FBTnhCLE1BQU0sWUFBQSxFQUNOLE9BQU8sYUFBQSxFQUNQLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLFFBQVEsY0FBQTtJQUVGLElBQUEsS0FBQSxPQUE4QixRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQS9ELFVBQVUsUUFBQSxFQUFFLGFBQWEsUUFBc0MsQ0FBQTtJQUM5RCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxTQUFTLENBQUM7UUFDUixhQUFhLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxDQUFBO0lBQ2hDLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUE7SUFFWixPQUFPLENBQ0wsZ0NBQ0UsRUFBRSxFQUFFLEVBQUUsRUFDTixRQUFRLEVBQUUsUUFBUSxFQUNsQixTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsd0JBQXdCLEVBQUUsU0FBUyxFQUFFLEVBQUUsV0FBVyxFQUFFLFVBQVUsRUFBRSxDQUFDLENBQUMsRUFDcEcsT0FBTyxFQUFFLFVBQUMsQ0FBbUI7WUFDM0IsSUFBTSxNQUFNLEdBQUcsQ0FBQyxDQUFDLE1BQXlCLENBQUE7WUFDMUMsYUFBYSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsQ0FBQTtZQUM5QixNQUFNLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQTtZQUN0QixJQUFJLE9BQU8sRUFBRTtnQkFDWCxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUE7YUFDWDtRQUNILENBQUMsSUFFQSxRQUFRLENBQ0YsQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxrQkFBa0IsQ0FBQSJ9