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

package/lib/components/range/hooks/useRange.js

@@ -0,0 +1,63 @@
+import { __read } from "tslib";
+import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
+import React from 'react';
+export var useRange = function (_a) {
+    var valueMin = _a.valueMin, valueMax = _a.valueMax, max = _a.max, gap = _a.gap, name = _a.name, onChangeMin = _a.onChangeMin, onChangeMax = _a.onChangeMax;
+    try {
+        var _b = __read(React.useState(valueMin !== null && valueMin !== void 0 ? valueMin : 0), 2), cursorMin_1 = _b[0], setCursorMin_1 = _b[1];
+        var _c = __read(React.useState(valueMax !== null && valueMax !== void 0 ? valueMax : max), 2), cursorMax_1 = _c[0], setCursorMax_1 = _c[1];
+        var refTrack_1 = React.useRef(null);
+        React.useEffect(function () {
+            if (refTrack_1.current) {
+                var track = refTrack_1.current;
+                track.style.background = "linear-gradient(to right, ".concat(getColorStyle(TrilogyColor.MAIN_FADE), " ").concat((cursorMin_1 / max) * 100, "% , ").concat(getColorStyle(TrilogyColor.MAIN), " ").concat((cursorMin_1 / max) * 100, "% , ").concat(getColorStyle(TrilogyColor.MAIN), " ").concat((cursorMax_1 / max) * 100, "%, ").concat(getColorStyle(TrilogyColor.MAIN_FADE), " ").concat((cursorMax_1 / max) * 100, "%) ");
+            }
+        }, [cursorMin_1, cursorMax_1]);
+        React.useEffect(function () {
+            setCursorMin_1(valueMin || 0);
+        }, [valueMin]);
+        React.useEffect(function () {
+            setCursorMax_1(valueMax || max);
+        }, [valueMax]);
+        var handleChangeCursorMin = React.useCallback(function (e) {
+            if (Number(e.target.value) < cursorMax_1 - gap)
+                setCursorMin_1(Number(e.target.value));
+        }, [cursorMax_1, cursorMin_1]);
+        var handleChangeCursorMax = React.useCallback(function (e) {
+            if (Number(e.target.value) > cursorMin_1 + gap)
+                setCursorMax_1(Number(e.target.value));
+        }, [cursorMax_1, cursorMin_1]);
+        var handleMouseUpMin = React.useCallback(function () {
+            if (onChangeMin) {
+                onChangeMin({
+                    inputName: name,
+                    inputValue: cursorMin_1,
+                });
+            }
+        }, [onChangeMin, name, cursorMin_1]);
+        var handleMouseUpMax = React.useCallback(function () {
+            if (onChangeMax) {
+                onChangeMax({
+                    inputName: name,
+                    inputValue: cursorMax_1,
+                });
+            }
+        }, [onChangeMax, name, cursorMax_1]);
+        return {
+            cursorMax: cursorMax_1,
+            cursorMin: cursorMin_1,
+            refTrack: refTrack_1,
+            handleMouseUpMin: handleMouseUpMin,
+            handleChangeCursorMin: handleChangeCursorMin,
+            handleMouseUpMax: handleMouseUpMax,
+            handleChangeCursorMax: handleChangeCursorMax,
+        };
+    }
+    catch (_d) {
+        return {
+            cursorMax: valueMax !== null && valueMax !== void 0 ? valueMax : max,
+            cursorMin: valueMin,
+        };
+    }
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlUmFuZ2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3JhbmdlL2hvb2tzL3VzZVJhbmdlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFhekIsTUFBTSxDQUFDLElBQU0sUUFBUSxHQUFHLFVBQUMsRUFBd0U7UUFBdEUsUUFBUSxjQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsR0FBRyxTQUFBLEVBQUUsR0FBRyxTQUFBLEVBQUUsSUFBSSxVQUFBLEVBQUUsV0FBVyxpQkFBQSxFQUFFLFdBQVcsaUJBQUE7SUFDckYsSUFBSTtRQUNJLElBQUEsS0FBQSxPQUE0QixLQUFLLENBQUMsUUFBUSxDQUFTLFFBQVEsYUFBUixRQUFRLGNBQVIsUUFBUSxHQUFJLENBQUMsQ0FBQyxJQUFBLEVBQWhFLFdBQVMsUUFBQSxFQUFFLGNBQVksUUFBeUMsQ0FBQTtRQUNqRSxJQUFBLEtBQUEsT0FBNEIsS0FBSyxDQUFDLFFBQVEsQ0FBUyxRQUFRLGFBQVIsUUFBUSxjQUFSLFFBQVEsR0FBSSxHQUFHLENBQUMsSUFBQSxFQUFsRSxXQUFTLFFBQUEsRUFBRSxjQUFZLFFBQTJDLENBQUE7UUFDekUsSUFBTSxVQUFRLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsQ0FBQTtRQUVuQyxLQUFLLENBQUMsU0FBUyxDQUFDO1lBQ2QsSUFBSSxVQUFRLENBQUMsT0FBTyxFQUFFO2dCQUNwQixJQUFNLEtBQUssR0FBRyxVQUFRLENBQUMsT0FBc0IsQ0FBQTtnQkFDN0MsS0FBSyxDQUFDLEtBQUssQ0FBQyxVQUFVLEdBQUcsb0NBQTZCLGFBQWEsQ0FBQyxZQUFZLENBQUMsU0FBUyxDQUFDLGNBQ3pGLENBQUMsV0FBUyxHQUFHLEdBQUcsQ0FBQyxHQUFHLEdBQUcsaUJB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

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

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

package/lib/components/range/index.js

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

package/lib/components/rows/Rows.js

@@ -1,9 +1,8 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
 import { hashClass } from '../../helpers';
-import clsx from 'clsx';
-import { useTrilogyContext } from '../../context';
 import { has, is } from '../../services';
+import clsx from 'clsx';
+import * as React from 'react';
 /**
  * Rows Component
  * @param children {React.ReactNode} Rows children
@@ -12,8 +11,7 @@ import { has, is } from '../../services';
  */
 var Rows = function (_a) {
     var className = _a.className, id = _a.id, gap = _a.gap, others = __rest(_a, ["className", "id", "gap"]);
-    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)));
+    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)));
 };
 export default Rows;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUm93cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcm93cy9Sb3dzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBRXBDOzs7OztHQUtHO0FBQ0gsSUFBTSxJQUFJLEdBQUcsVUFBQyxFQUE0QztJQUExQyxJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLEdBQUcsU0FBQSxFQUFLLE1BQU0sY0FBL0IsMEJBQWlDLENBQUY7SUFDbkMsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsT0FBTyxDQUNMLHNDQUNFLEVBQUUsRUFBRSxFQUFFLEVBQ04sU0FBUyxFQUFFLFNBQVMsQ0FDbEIsTUFBTSxFQUNOLElBQUksQ0FBQyxNQUFNLEVBQUUsR0FBRyxJQUFJLEdBQUcsQ0FBQyxjQUFPLEdBQUcsQ0FBRSxDQUFDLEVBQUUsT0FBTyxHQUFHLEtBQUssV0FBVyxJQUFJLEdBQUcsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUM1RyxJQUNHLE1BQU0sRUFDVixDQUNILENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLElBQUksQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUm93cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvcm93cy9Sb3dzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUNwQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHOUI7Ozs7O0dBS0c7QUFDSCxJQUFNLElBQUksR0FBRyxVQUFDLEVBQTRDO0lBQTFDLElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsR0FBRyxTQUFBLEVBQUssTUFBTSxjQUEvQiwwQkFBaUMsQ0FBRjtJQUMzQyxPQUFPLENBQ0wsc0NBQ0UsRUFBRSxFQUFFLEVBQUUsRUFDTixTQUFTLEVBQUUsU0FBUyxDQUNsQixJQUFJLENBQUMsTUFBTSxFQUFFLEdBQUcsSUFBSSxHQUFHLENBQUMsY0FBTyxHQUFHLENBQUUsQ0FBQyxFQUFFLE9BQU8sR0FBRyxLQUFLLFdBQVcsSUFBSSxHQUFHLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQyxTQUFTLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FDNUcsSUFDRyxNQUFNLEVBQ1YsQ0FDSCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxJQUFJLENBQUEifQ==

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

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

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,9 +1,8 @@
-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";
+import { hashClass } from '../../helpers';
+import { ScrollDirectionEnum } from '../../objects';
+import { is } from '../../services';
+import clsx from 'clsx';
+import * as React from 'react';
 /**
  * Scroll View Component
  * @param children {React.ReactNode} ScrollView child
@@ -22,20 +21,19 @@ import { ScrollDirectionEnum } from "../../objects";
  */
 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(styled, clsx("scroll-view", scrollDirection && scrollDirectionClassName()));
+    var classes = hashClass(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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2Nyb2xsVmlldy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2Nyb2xsLXZpZXcvU2Nyb2xsVmlldy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDL0IsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRS9DOzs7Ozs7Ozs7Ozs7Ozs7R0FlRztBQUNILElBQU0sVUFBVSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ2pDLFVBQUMsRUFBaUMsRUFBRSxHQUFHO1FBQXBDLEVBQUUsUUFBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxRQUFRLGNBQUE7SUFDdEIsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSx3QkFBd0IsR0FBRztRQUMvQixRQUFRLGVBQWUsRUFBRTtZQUN2QixLQUFLLG1CQUFtQixhQUFuQixtQkFBbUIsdUJBQW5CLG1CQUFtQixDQUFFLFVBQVU7Z0JBQ2xDLE9BQU8sRUFBRSxDQUFDLFlBQVksQ0FBQyxDQUFBO1lBQ3pCLEtBQUssbUJBQW1CLGFBQW5CLG1CQUFtQix1QkFBbkIsbUJBQW1CLENBQUUsUUFBUTtnQkFDaEMsT0FBTyxFQUFFLENBQUMsVUFBVSxDQUFDLENBQUE7WUFDdkI7Z0JBQ0UsT0FBTyxFQUFFLENBQUE7U0FDWjtJQUNILENBQUMsQ0FBQTtJQUVELElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FBQyxhQUFhLEVBQUUsZUFBZSxJQUFJLHdCQUF3QixFQUFFLENBQUMsQ0FDbkUsQ0FBQTtJQUNELE9BQU8sQ0FDTCw2QkFBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLEVBQUUsSUFDdEMsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsVUFBVSxDQUFDLFdBQVcsR0FBRyxZQUFZLENBQUE7QUFFckMsZUFBZSxVQUFVLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2Nyb2xsVmlldy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2Nyb2xsLXZpZXcvU2Nyb2xsVmlldy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDL0MsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUMvQixPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHOUI7Ozs7Ozs7Ozs7Ozs7OztHQWVHO0FBQ0gsSUFBTSxVQUFVLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDakMsVUFBQyxFQUFpQyxFQUFFLEdBQUc7UUFBcEMsRUFBRSxRQUFBLEVBQUUsZUFBZSxxQkFBQSxFQUFFLFFBQVEsY0FBQTtJQUM5QixJQUFNLHdCQUF3QixHQUFHO1FBQy9CLFFBQVEsZUFBZSxFQUFFO1lBQ3ZCLEtBQUssbUJBQW1CLGFBQW5CLG1CQUFtQix1QkFBbkIsbUJBQW1CLENBQUUsVUFBVTtnQkFDbEMsT0FBTyxFQUFFLENBQUMsWUFBWSxDQUFDLENBQUE7WUFDekIsS0FBSyxtQkFBbUIsYUFBbkIsbUJBQW1CLHVCQUFuQixtQkFBbUIsQ0FBRSxRQUFRO2dCQUNoQyxPQUFPLEVBQUUsQ0FBQyxVQUFVLENBQUMsQ0FBQTtZQUN2QjtnQkFDRSxPQUFPLEVBQUUsQ0FBQTtTQUNaO0lBQ0gsQ0FBQyxDQUFBO0lBRUQsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUUsZUFBZSxJQUFJLHdCQUF3QixFQUFFLENBQUMsQ0FBQyxDQUFBO0lBQzdGLE9BQU8sQ0FDTCw2QkFBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLEVBQUUsSUFDdEMsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsVUFBVSxDQUFDLFdBQVcsR0FBRyxZQUFZLENBQUE7QUFFckMsZUFBZSxVQUFVLENBQUEifQ==

package/lib/components/section/Section.js

@@ -1,10 +1,9 @@
 import { __assign, __rest } from "tslib";
-import React from 'react';
-import { has, is } from '../../services';
+import { hashClass } from '../../helpers';
 import { getBackgroundClassName } from '../../objects';
+import { has, is } from '../../services';
 import clsx from 'clsx';
-import { hashClass } from '../../helpers';
-import { useTrilogyContext } from '../../context';
+import React from 'react';
 /**
  * Section Component - Manages the main margins of the page and takes up all the available width.
  * @param children {React.ReactNode}
@@ -18,11 +17,10 @@ import { useTrilogyContext } from '../../context';
  **/
 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 styled = useTrilogyContext().styled;
-    var _className = hashClass(styled, clsx('section', className, backgroundColor && has(getBackgroundClassName(backgroundColor)), backgroundSrc && has('background'), inverted && is('inverted'), skeleton && is('loading')));
+    var _className = hashClass(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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3BDLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNsRCxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFN0M7Ozs7Ozs7Ozs7SUFVSTtBQUNKLElBQU0sT0FBTyxHQUFHLFVBQUMsRUFBOEY7SUFBNUYsSUFBQSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxlQUFlLHFCQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFFLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBOUUsK0VBQWdGLENBQUY7SUFDckYsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxVQUFVLEdBQUcsU0FBUyxDQUMxQixNQUFNLEVBQ04sSUFBSSxDQUNGLFNBQVMsRUFDVCxTQUFTLEVBQ1QsZUFBZSxJQUFJLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxlQUFlLENBQUMsQ0FBQyxFQUMvRCxhQUFhLElBQUksR0FBRyxDQUFDLFlBQVksQ0FBQyxFQUNsQyxRQUFRLElBQUksRUFBRSxDQUFDLFVBQVUsQ0FBQyxFQUMxQixRQUFRLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxDQUMxQixDQUNGLENBQUE7SUFFRCxPQUFPLENBQ0wsMENBQ0UsRUFBRSxFQUFFLEVBQUUsSUFDRixDQUFDLGFBQWEsSUFBSTtRQUNwQixLQUFLLEVBQUUsRUFBRSxlQUFlLEVBQUUsY0FBTyxhQUFhLE1BQUcsRUFBRTtLQUNwRCxDQUFDLElBQ0YsU0FBUyxFQUFFLFVBQVUsSUFDakIsTUFBTSxFQUNWLENBQ0gsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsT0FBTyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDbEQsT0FBTyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDcEMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUd6Qjs7Ozs7Ozs7OztJQVVJO0FBQ0osSUFBTSxPQUFPLEdBQUcsVUFBQyxFQUE4RjtJQUE1RixJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUE5RSwrRUFBZ0YsQ0FBRjtJQUM3RixJQUFNLFVBQVUsR0FBRyxTQUFTLENBQzFCLElBQUksQ0FDRixTQUFTLEVBQ1QsU0FBUyxFQUNULGVBQWUsSUFBSSxHQUFHLENBQUMsc0JBQXNCLENBQUMsZUFBZSxDQUFDLENBQUMsRUFDL0QsYUFBYSxJQUFJLEdBQUcsQ0FBQyxZQUFZLENBQUMsRUFDbEMsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFDMUIsUUFBUSxJQUFJLEVBQUUsQ0FBQyxTQUFTLENBQUMsQ0FDMUIsQ0FDRixDQUFBO0lBRUQsT0FBTyxDQUNMLDBDQUNFLEVBQUUsRUFBRSxFQUFFLElBQ0YsQ0FBQyxhQUFhLElBQUk7UUFDcEIsS0FBSyxFQUFFLEVBQUUsZUFBZSxFQUFFLGNBQU8sYUFBYSxNQUFHLEVBQUU7S0FDcEQsQ0FBQyxJQUNGLFNBQVMsRUFBRSxVQUFVLElBQ2pCLE1BQU0sRUFDVixDQUNILENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLE9BQU8sQ0FBQSJ9

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

@@ -1,14 +1,20 @@
 /// <reference types="react" />
-import { SegmentControlProps } from './SegmentControlProps';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { SegmentControlProps } from '../../components/segment-control/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;
+declare const SegmentControl: {
+    ({ className, id, onClick, children, activeIndex, align }: SegmentControlProps): JSX.Element;
+    displayName: ComponentName;
+};
 export default SegmentControl;

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

@@ -1,25 +1,26 @@
-import { __read } from "tslib";
-import React, { useState } from 'react';
-import SegmentControlItem from './item';
-import { hashClass } from '../../helpers';
+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 clsx from 'clsx';
-import { useTrilogyContext } from '../../context';
-import { getJustifiedClassName } from '../../objects';
+import React from 'react';
 /**
  * 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 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 classes = hashClass(clsx('segmented-control', align && getJustifiedClassName(align), className));
+    var _b = useSegmentControl({ activeIndex: activeIndex, onClick: onClick }), activateIndex = _b.activateIndex, handleClick = _b.handleClick;
     var isActive = function (index, childPropsActive) {
         if (typeof childPropsActive !== 'undefined' && !activateIndex) {
             return childPropsActive;
@@ -28,33 +29,20 @@ var SegmentControl = function (_a) {
             return true;
         }
     };
-    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 &&
+    return (React.createElement("div", { 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: function (event) {
-                    toggleActive(event, index);
-                    if (child) {
-                        if (child.props.onClick) {
-                            child.props.onClick(event);
-                        }
-                    }
-                },
+                onClick: handleClick
+                    ? function (e) { return handleClick(e, index, child); }
+                    : undefined,
             };
             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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9TZWdtZW50Q29udHJvbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ3ZDLE9BQU8sa0JBQWtCLE1BQU0sUUFBUSxDQUFBO0FBRXZDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFakQ7Ozs7Ozs7OztHQVNHO0FBQ0gsSUFBTSxjQUFjLEdBQUcsVUFBQyxFQUE2RTtRQUEzRSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxXQUFXLGlCQUFBLEVBQUUsS0FBSyxXQUFBO0lBQ3BFLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLG1CQUFtQixFQUFFLEtBQUssSUFBSSxxQkFBcUIsQ0FBQyxLQUFLLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBQ3hHLElBQUEsS0FBQSxPQUFvQyxRQUFRLENBQVMsV0FBVyxJQUFJLENBQUMsQ0FBQyxJQUFBLEVBQXJFLGFBQWEsUUFBQSxFQUFFLGdCQUFnQixRQUFzQyxDQUFBO0lBRTVFLElBQU0sUUFBUSxHQUFHLFVBQUMsS0FBYSxFQUFFLGdCQUFpQztRQUNoRSxJQUFJLE9BQU8sZ0JBQWdCLEtBQUssV0FBVyxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQzdELE9BQU8sZ0JBQWdCLENBQUE7U0FDeEI7UUFDRCxJQUFJLEtBQUssS0FBSyxhQUFhLEVBQUU7WUFDM0IsT0FBTyxJQUFJLENBQUE7U0FDWjtJQUNILENBQUMsQ0FBQTtJQUVELElBQU0sWUFBWSxHQUFHLFVBQUMsQ0FBbUIsRUFBRSxLQUFhO1FBQ3RELGdCQUFnQixDQUFDLEtBQUssQ0FBQyxDQUFBO1FBQ3ZCLElBQUksT0FBTztZQUFFLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQTtJQUN6QixDQUFDLENBQUE7SUFFRCxLQUFLLENBQUMsU0FBUyxDQUFDO1FBQ2QsZ0JBQWdCLENBQUMsYUFBYSxDQUFDLENBQUE7SUFDakMsQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQTtJQUVuQixPQUFPLENBQ0wsNkJBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUM1QixRQUFRO1FBQ1AsS0FBSyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUM7UUFDdkIsOERBQThEO1FBQzlELFFBQVEsQ0FBQyxHQUFHLENBQUMsVUFBQyxLQUFVLEVBQUUsS0FBYTtZQUNyQyxJQUFNLEtBQUssR0FBRztnQkFDWixNQUFNLEVBQUUsT0FBTyxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLEtBQUs7Z0JBQzdELFFBQVEsRUFBRSxLQUFLLENBQUMsS0FBSyxDQUFDLFFBQVE7Z0JBQzlCLEdBQUcsRUFBRSxLQUFLO2dCQUNWLE9BQU8sRUFBRSxVQUFDLEtBQXVCO29CQUMvQixZQUFZLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUFBO29CQUMxQixJQUFJLEtBQUssRUFBRTt3QkFDVCxJQUFJLEtBQUssQ0FBQyxLQUFLLENBQUMsT0FBTyxFQUFFOzRCQUN2QixLQUFLLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQTt5QkFDM0I7cUJBQ0Y7Z0JBQ0gsQ0FBQzthQUNGLENBQUE7WUFFRCxPQUFPLEtBQUssSUFBSSxPQUFPLEtBQUssQ0FBQyxPQUFPLEVBQUUsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQ3BELG9CQUFDLGtCQUFrQixJQUNqQixRQUFRLEVBQUUsS0FBSyxDQUFDLFFBQVEsRUFDeEIsTUFBTSxFQUFFLEtBQUssQ0FBQyxNQUFNLEVBQ3BCLEdBQUcsRUFBRSxLQUFLLENBQUMsR0FBRyxFQUNkLE9BQU8sRUFBRSxVQUFDLENBQVUsSUFBSyxPQUFBLE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRyxDQUFDLENBQUMsRUFBWixDQUFZLElBRXBDLEtBQUssQ0FDYSxDQUN0QixDQUFDLENBQUMsQ0FBQyxDQUNGLEtBQUssQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUNqQyxDQUFBO1FBQ0gsQ0FBQyxDQUFDLENBQ0EsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxjQUFjLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9TZWdtZW50Q29udHJvbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHNEQUFzRCxDQUFBO0FBQ3hGLE9BQU8sa0JBQWtCLE1BQU0sbUNBQW1DLENBQUE7QUFFbEUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3BFLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFekI7Ozs7Ozs7Ozs7O0dBV0c7QUFDSCxJQUFNLGNBQWMsR0FBRyxVQUFDLEVBQTZFO1FBQTNFLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFdBQVcsaUJBQUEsRUFBRSxLQUFLLFdBQUE7SUFDNUUsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxLQUFLLElBQUkscUJBQXFCLENBQUMsS0FBSyxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsQ0FBQTtJQUNoRyxJQUFBLEtBQWlDLGlCQUFpQixDQUFDLEVBQUUsV0FBVyxhQUFBLEVBQUUsT0FBTyxTQUFBLEVBQUUsQ0FBQyxFQUExRSxhQUFhLG1CQUFBLEVBQUUsV0FBVyxpQkFBZ0QsQ0FBQTtJQUVsRixJQUFNLFFBQVEsR0FBRyxVQUFDLEtBQWEsRUFBRSxnQkFBaUM7UUFDaEUsSUFBSSxPQUFPLGdCQUFnQixLQUFLLFdBQVcsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUM3RCxPQUFPLGdCQUFnQixDQUFBO1NBQ3hCO1FBQ0QsSUFBSSxLQUFLLEtBQUssYUFBYSxFQUFFO1lBQzNCLE9BQU8sSUFBSSxDQUFBO1NBQ1o7SUFDSCxDQUFDLENBQUE7SUFFRCxPQUFPLENBQ0wsNkJBQUssU0FBUyxFQUFFLE9BQU8sSUFDcEIsUUFBUTtRQUNQLEtBQUssQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDO1FBQ3ZCLFFBQVEsQ0FBQyxHQUFHLENBQUMsVUFBQyxLQUFLLEVBQUUsS0FBSztZQUN4QixJQUFNLEtBQUssR0FBRztnQkFDWixNQUFNLEVBQUUsT0FBTyxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLEtBQUs7Z0JBQzdELFFBQVEsRUFBRSxLQUFLLENBQUMsS0FBSyxDQUFDLFFBQVE7Z0JBQzlCLEdBQUcsRUFBRSxLQUFLO2dCQUNWLE9BQU8sRUFBRSxXQUFXO29CQUNsQixDQUFDLENBQUMsVUFBQyxDQUF3QyxJQUFLLE9BQUEsV0FBVyxDQUFDLENBQUMsRUFBRSxLQUFLLEVBQUUsS0FBSyxDQUFDLEVBQTVCLENBQTRCO29CQUM1RSxDQUFDLENBQUMsU0FBUzthQUNkLENBQUE7WUFFRCxPQUFPLEtBQUssSUFBSSxPQUFPLEtBQUssQ0FBQyxPQUFPLEVBQUUsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQ3BELG9CQUFDLGtCQUFrQixJQUNqQixRQUFRLEVBQUUsS0FBSyxDQUFDLFFBQVEsRUFDeEIsTUFBTSxFQUFFLEtBQUssQ0FBQyxNQUFNLEVBQ3BCLEdBQUcsRUFBRSxLQUFLLENBQUMsR0FBRyxFQUNkLE9BQU8sRUFBRSxVQUFDLENBQVUsSUFBSyxPQUFBLE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRyxDQUFDLENBQUMsRUFBWixDQUFZLElBRXBDLEtBQUssQ0FDYSxDQUN0QixDQUFDLENBQUMsQ0FBQyxDQUNGLEtBQUssQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFLEtBQUssQ0FBQyxDQUNqQyxDQUFBO1FBQ0gsQ0FBQyxDQUFDLENBQ0EsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsY0FBYyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsY0FBYyxDQUFBO0FBQ3pELGVBQWUsY0FBYyxDQUFBIn0=

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { SegmentControlProps } from './SegmentControlProps';
 import { ComponentName } from '../../components/enumsComponentsName';
+import { SegmentControlProps } from './SegmentControlProps';
 /**
  * SegmentControl Component
  * @param children {ReactNode} Children for SegmentControl

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

@@ -1,11 +1,11 @@
 import { __assign, __read, __rest } from "tslib";
+import { ComponentName } from '../../components/enumsComponentsName';
+import { Text, TextLevels } from '../../components/text';
+import { View } from '../../components/view';
+import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
 import React, { useState } from 'react';
 import { StyleSheet } from 'react-native';
-import { View } from '../../components/view';
-import { Text, TextLevels } from '../../components/text';
 import SegmentedControlItem from './item';
-import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
-import { ComponentName } from '../../components/enumsComponentsName';
 /**
  * SegmentControl Component
  * @param children {ReactNode} Children for SegmentControl
@@ -38,10 +38,12 @@ var SegmentControl = function (_a) {
         segmentedControl: {
             flexDirection: 'row',
             width: '100%',
-            backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_FADE),
+            backgroundColor: getColorStyle(TrilogyColor.BACKGROUND),
             borderRadius: 4,
             padding: 4,
             paddingRight: -4,
+            borderWidth: 1,
+            borderColor: getColorStyle(TrilogyColor.NEUTRAL),
         },
     });
     return (React.createElement(View, { style: styles.padding },
@@ -71,4 +73,4 @@ var SegmentControl = function (_a) {
 };
 SegmentControl.displayName = ComponentName.SegmentControl;
 export default SegmentControl;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvU2VnbWVudENvbnRyb2wubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdkMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUV6QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLG9CQUFvQixNQUFNLFFBQVEsQ0FBQTtBQUN6QyxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7O0dBTUc7QUFDSCxJQUFNLGNBQWMsR0FBRyxVQUFDLEVBQWtFO0lBQWhFLElBQUEsUUFBUSxjQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsV0FBVyxpQkFBQSxFQUFLLE1BQU0sY0FBM0Msc0NBQTZDLENBQUY7SUFDM0QsSUFBQSxLQUFBLE9BQW9DLFFBQVEsQ0FBQyxXQUFXLElBQUksQ0FBQyxDQUFDLElBQUEsRUFBN0QsYUFBYSxRQUFBLEVBQUUsZ0JBQWdCLFFBQThCLENBQUE7SUFFcEUsSUFBTSxRQUFRLEdBQUcsVUFBQyxLQUFhLEVBQUUsZ0JBQWlDO1FBQ2hFLElBQUksT0FBTyxnQkFBZ0IsS0FBSyxXQUFXLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDN0QsT0FBTyxnQkFBZ0IsQ0FBQTtTQUN4QjtRQUNELElBQUksS0FBSyxLQUFLLGFBQWEsRUFBRTtZQUMzQixPQUFPLElBQUksQ0FBQTtTQUNaO0lBQ0gsQ0FBQyxDQUFBO0lB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvU2VnbWVudENvbnRyb2wubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3hDLE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDcEUsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdkMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUN6QyxPQUFPLG9CQUFvQixNQUFNLFFBQVEsQ0FBQTtBQUd6Qzs7Ozs7O0dBTUc7QUFDSCxJQUFNLGNBQWMsR0FBRyxVQUFDLEVBQWtFO0lBQWhFLElBQUEsUUFBUSxjQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsV0FBVyxpQkFBQSxFQUFLLE1BQU0sY0FBM0Msc0NBQTZDLENBQUY7SUFDM0QsSUFBQSxLQUFBLE9BQW9DLFFBQVEsQ0FBQyxXQUFXLElBQUksQ0FBQyxDQUFDLElBQUEsRUFBN0QsYUFBYSxRQUFBLEVBQUUsZ0JBQWdCLFFBQThCLENBQUE7SUFFcEUsSUFBTSxRQUFRLEdBQUcsVUFBQyxLQUFhLEVBQUUsZ0JBQWlDO1FBQ2hFLElBQUksT0FBTyxnQkFBZ0IsS0FBSyxXQUFXLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDN0QsT0FBTyxnQkFBZ0IsQ0FBQTtTQUN4QjtRQUNELElBQUksS0FBSyxLQUFLLGFBQWEsRUFBRTtZQUMzQixPQUFPLElBQUksQ0FBQTtTQUNaO0lBQ0gsQ0FBQyxDQUFBO0lB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

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/hooks/useSegmentControl.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ClickEvent } from '../../../events/OnClickEvent';
+interface IParams {
+    activeIndex?: number;
+    onClick?: ClickEvent;
+}
+export declare const useSegmentControl: ({ activeIndex, onClick }: IParams) => {
+    handleClick: (event: React.MouseEvent, index: number, child: React.ReactElement) => void;
+    activateIndex: number;
+} | {
+    activateIndex: number | undefined;
+    handleClick?: undefined;
+};
+export {};

package/lib/components/segment-control/hooks/useSegmentControl.js

@@ -0,0 +1,31 @@
+import { __read } from "tslib";
+import React from 'react';
+export var useSegmentControl = function (_a) {
+    var activeIndex = _a.activeIndex, onClick = _a.onClick;
+    try {
+        var _b = __read(React.useState(activeIndex || 0), 2), activateIndex_1 = _b[0], setActivateIndex_1 = _b[1];
+        var toggleActive_1 = React.useCallback(function (e, index) {
+            setActivateIndex_1(index);
+            if (onClick)
+                onClick(e);
+        }, [onClick]);
+        var handleClick = React.useCallback(function (event, index, child) {
+            toggleActive_1(event, index);
+            if (child) {
+                if (child.props.onClick) {
+                    child.props.onClick(event);
+                }
+            }
+        }, [toggleActive_1]);
+        React.useEffect(function () {
+            setActivateIndex_1(activateIndex_1);
+        }, [activateIndex_1]);
+        return { handleClick: handleClick, activateIndex: activateIndex_1 };
+    }
+    catch (_c) {
+        return {
+            activateIndex: activeIndex,
+        };
+    }
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlU2VnbWVudENvbnRyb2wuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9ob29rcy91c2VTZWdtZW50Q29udHJvbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQVF6QixNQUFNLENBQUMsSUFBTSxpQkFBaUIsR0FBRyxVQUFDLEVBQWlDO1FBQS9CLFdBQVcsaUJBQUEsRUFBRSxPQUFPLGFBQUE7SUFDdEQsSUFBSTtRQUNJLElBQUEsS0FBQSxPQUFvQyxLQUFLLENBQUMsUUFBUSxDQUFTLFdBQVcsSUFBSSxDQUFDLENBQUMsSUFBQSxFQUEzRSxlQUFhLFFBQUEsRUFBRSxrQkFBZ0IsUUFBNEMsQ0FBQTtRQUVsRixJQUFNLGNBQVksR0FBRyxLQUFLLENBQUMsV0FBVyxDQUNwQyxVQUFDLENBQW1CLEVBQUUsS0FBYTtZQUNqQyxrQkFBZ0IsQ0FBQyxLQUFLLENBQUMsQ0FBQTtZQUN2QixJQUFJLE9BQU87Z0JBQUUsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFBO1FBQ3pCLENBQUMsRUFDRCxDQUFDLE9BQU8sQ0FBQyxDQUNWLENBQUE7UUFFRCxJQUFNLFdBQVcsR0FBRyxLQUFLLENBQUMsV0FBVyxDQUNuQyxVQUFDLEtBQXVCLEVBQUUsS0FBYSxFQUFFLEtBQXlCO1lBQ2hFLGNBQVksQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQUE7WUFDMUIsSUFBSSxLQUFLLEVBQUU7Z0JBQ1QsSUFBSSxLQUFLLENBQUMsS0FBSyxDQUFDLE9BQU8sRUFBRTtvQkFDdkIsS0FBSyxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUE7aUJBQzNCO2FBQ0Y7UUFDSCxDQUFDLEVBQ0QsQ0FBQyxjQUFZLENBQUMsQ0FDZixDQUFBO1FBRUQsS0FBSyxDQUFDLFNBQVMsQ0FBQztZQUNkLGtCQUFnQixDQUFDLGVBQWEsQ0FBQyxDQUFBO1FBQ2pDLENBQUMsRUFBRSxDQUFDLGVBQWEsQ0FBQyxDQUFDLENBQUE7UUFFbkIsT0FBTyxFQUFFLFdBQVcsYUFBQSxFQUFFLGFBQWEsaUJBQUEsRUFBRSxDQUFBO0tBQ3RDO0lBQUMsV0FBTTtRQUNOLE9BQU87WUFDTCxhQUFhLEVBQUUsV0FBVztTQUMzQixDQUFBO0tBQ0Y7QUFDSCxDQUFDLENBQUEifQ==

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

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

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

@@ -1,8 +1,8 @@
-import { __read } from "tslib";
-import React, { useEffect, useState } from 'react';
-import { hashClass } from '../../../helpers';
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { useSegmentControlItem } from '../../../components/segment-control/item/hooks/useSegmentControlItem';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
 import clsx from 'clsx';
-import { useTrilogyContext } from '../../../context';
+import React from 'react';
 /**
  * SegmentControl Item Component
  * @param active {boolean} active segmentedControl item
@@ -15,19 +15,9 @@ import { useTrilogyContext } from '../../../context';
  */
 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 = __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));
+    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));
 };
+SegmentControlItem.displayName = ComponentName.SegmentControlItem;
 export default SegmentControlItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvaXRlbS9TZWdtZW50Q29udHJvbEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFFbEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7Ozs7R0FTRztBQUNILElBQU0sa0JBQWtCLEdBQUcsVUFBQyxFQU9GO1FBTnhCLE1BQU0sWUFBQSxFQUNOLE9BQU8sYUFBQSxFQUNQLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLFFBQVEsY0FBQTtJQUVGLElBQUEsS0FBQSxPQUE4QixRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQS9ELFVBQVUsUUFBQSxFQUFFLGFBQWEsUUFBc0MsQ0FBQTtJQUM5RCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxTQUFTLENBQUM7UUFDUixhQUFhLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxDQUFBO0lBQ2hDLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUE7SUFFWixPQUFPLENBQ0wsZ0NBQ0UsRUFBRSxFQUFFLEVBQUUsRUFDTixRQUFRLEVBQUUsUUFBUSxFQUNsQixTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsd0JBQXdCLEVBQUUsU0FBUyxFQUFFLEVBQUUsV0FBVyxFQUFFLFVBQVUsRUFBRSxDQUFDLENBQUMsRUFDcEcsT0FBTyxFQUFFLFVBQUMsQ0FBbUI7WUFDM0IsSUFBTSxNQUFNLEdBQUcsQ0FBQyxDQUFDLE1BQXlCLENBQUE7WUFDMUMsYUFBYSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsQ0FBQTtZQUM5QixNQUFNLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQTtZQUN0QixJQUFJLE9BQU8sRUFBRTtnQkFDWCxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUE7YUFDWDtRQUNILENBQUMsSUFFQSxRQUFRLENBQ0YsQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxrQkFBa0IsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvaXRlbS9TZWdtZW50Q29udHJvbEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSwrREFBK0QsQ0FBQTtBQUVyRyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6Qjs7Ozs7Ozs7O0dBU0c7QUFDSCxJQUFNLGtCQUFrQixHQUFHLFVBQUMsRUFPRjtRQU54QixNQUFNLFlBQUEsRUFDTixPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDUixTQUFTLGVBQUEsRUFDVCxFQUFFLFFBQUEsRUFDRixRQUFRLGNBQUE7SUFFRixJQUFBLEtBQThCLHFCQUFxQixDQUFDLEVBQUUsTUFBTSxRQUFBLEVBQUUsT0FBTyxTQUFBLEVBQUUsQ0FBQyxFQUF0RSxVQUFVLGdCQUFBLEVBQUUsV0FBVyxpQkFBK0MsQ0FBQTtJQUU5RSxPQUFPLENBQ0wsZ0NBQ0UsRUFBRSxFQUFFLEVBQUUsRUFDTixRQUFRLEVBQUUsUUFBUSxFQUNsQixTQUFTLEVBQUUsU0FBUyxDQUFDLElBQUksQ0FBQyx3QkFBd0IsRUFBRSxTQUFTLEVBQUUsRUFBRSxXQUFXLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQyxFQUM1RixPQUFPLEVBQUUsV0FBVyxJQUVuQixRQUFRLENBQ0YsQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsa0JBQWtCLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQTtBQUNqRSxlQUFlLGtCQUFrQixDQUFBIn0=

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { SegmentControlItemProps } from './SegmentControlItemProps';
 import { ComponentName } from '../../../components/enumsComponentsName';
+import { SegmentControlItemProps } from './SegmentControlItemProps';
 /**
  * SegmentControlItem Item Component
  * @param active {boolean} active Segment Control item

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

@@ -1,8 +1,8 @@
 import { __assign, __read, __rest } from "tslib";
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { getColorStyle, TrilogyColor } from '../../../objects/facets/Color';
-import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * SegmentControlItem Item Component
  * @param active {boolean} active Segment Control item
@@ -23,7 +23,7 @@ var SegmentControlItem = function (_a) {
             alignItems: 'center',
             backgroundColor: (activeItem && getColorStyle(TrilogyColor.MAIN)) ||
                 (disabled && getColorStyle(TrilogyColor.DISABLED_FADE)) ||
-                getColorStyle(TrilogyColor.NEUTRAL_FADE),
+                getColorStyle(TrilogyColor.BACKGROUND),
         },
         text: {
             paddingHorizontal: 16,
@@ -51,4 +51,4 @@ var SegmentControlItem = function (_a) {
 };
 SegmentControlItem.displayName = ComponentName.SegmentControlItem;
 export default SegmentControlItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VnbWVudC1jb250cm9sL2l0ZW0vU2VnbWVudENvbnRyb2xJdGVtLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUNsRCxPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUVqRSxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxrQkFBa0IsR0FBRyxVQUFDLEVBTUY7SUFMeEIsSUFBQSxNQUFNLFlBQUEsRUFDTixRQUFRLGNBQUEsRUFDUixPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDTCxNQUFNLGNBTGlCLDZDQU0zQixDQURVO0lBRUgsSUFBQSxLQUFBLE9BQThCLFFBQVEsQ0FBVSxNQUFNLElBQUksS0FBSyxDQUFDLElBQUEsRUFBL0QsVUFBVSxRQUFBLEVBQUUsYUFBYSxRQUFzQyxDQUFBO0lBRXRFLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsUUFBUSxFQUFFO1lBQ1IsYUFBYSxFQUFFLFFBQVE7WUFDdkIsSUFBSSxFQUFFLENBQUM7WUFDUCxXQUFXLEVBQUUsQ0FBQztZQUNkLFlBQVksRUFBRSxDQUFDO1lBQ2YsVUFBVSxFQUFFLFFBQVE7WUFDcEIsZUFBZSxFQUNiLENBQUMsVUFBVSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQ2hELENBQUMsUUFBUSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLENBQUM7Z0JBQ3ZELGFBQWEsQ0FBQyxZQUFZLENBQUMsWUFBWSxDQUFDO1NBQzNDO1FBQ0QsSUFBSSxFQUFFO1lBQ0osaUJBQWlCLEVBQUUsRUFBRTtZQUNyQixLQUFLLEVBQ0gsQ0FBQyxVQUFVLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsQ0FBQztnQkFDdEQsQ0FBQyxDQUFDLFVBQVUsSUFBSSxRQUFRLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQztnQkFDakUsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUM7WUFDbEMsY0FBYyxFQUFFLEVBQUU7WUFDbEIsUUFBUSxFQUFFLEVBQUU7WUFDWixTQUFTLEVBQUUsUUFBUTtZQUNuQixpQkFBaUIsRUFBRSxRQUFRO1lBQzNCLFVBQVUsRUFBRSxVQUFVLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsUUFBUTtTQUMxQztLQUNGLENBQUMsQ0FBQTtJQUVGLFNBQVMsQ0FBQztRQUNSLGFBQWEsQ0FBQyxNQUFNLElBQUksS0FBSyxDQUFDLENBQUE7SUFDaEMsQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQTtJQUVaLE9BQU8sQ0FDTCxvQkFBQyxnQkFBZ0IsYUFDZixRQUFRLEVBQUUsUUFBUSxFQUNsQixLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLEVBQ3hCLE9BQU8sRUFBRSxVQUFDLENBQVc7WUFDbkIsSUFBSSxDQUFDLFFBQVEsRUFBRTtnQkFDYixhQUFhLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxDQUFBO2dCQUM5QixJQUFJLE9BQU8sRUFBRTtvQkFDWCxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUE7aUJBQ1g7YUFDRjtRQUNILENBQUMsSUFDRyxNQUFNLEdBRVQsUUFBUSxJQUFJLE9BQU8sUUFBUSxDQUFDLE9BQU8sRUFBRSxLQUFLLFFBQVEsSUFBSSxDQUNyRCxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxJQUFJLEVBQUUsYUFBYSxFQUFFLE1BQU0sRUFBRSxhQUFhLEVBQUUsQ0FBQyxJQUM5RCxNQUFNLENBQUMsUUFBUSxDQUFDLENBQ1osQ0FDUixDQUNnQixDQUNwQixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsa0JBQWtCLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQTtBQUVqRSxlQUFlLGtCQUFrQixDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VnbWVudC1jb250cm9sL2l0ZW0vU2VnbWVudENvbnRyb2xJdGVtLm5hdGl2ZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUNsRCxPQUFPLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUdqRTs7Ozs7OztHQU9HO0FBQ0gsSUFBTSxrQkFBa0IsR0FBRyxVQUFDLEVBTUY7SUFMeEIsSUFBQSxNQUFNLFlBQUEsRUFDTixRQUFRLGNBQUEsRUFDUixPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDTCxNQUFNLGNBTGlCLDZDQU0zQixDQURVO0lBRUgsSUFBQSxLQUFBLE9BQThCLFFBQVEsQ0FBVSxNQUFNLElBQUksS0FBSyxDQUFDLElBQUEsRUFBL0QsVUFBVSxRQUFBLEVBQUUsYUFBYSxRQUFzQyxDQUFBO0lBRXRFLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsUUFBUSxFQUFFO1lBQ1IsYUFBYSxFQUFFLFFBQVE7WUFDdkIsSUFBSSxFQUFFLENBQUM7WUFDUCxXQUFXLEVBQUUsQ0FBQztZQUNkLFlBQVksRUFBRSxDQUFDO1lBQ2YsVUFBVSxFQUFFLFFBQVE7WUFDcEIsZUFBZSxFQUNiLENBQUMsVUFBVSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQ2hELENBQUMsUUFBUSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLENBQUM7Z0JBQ3ZELGFBQWEsQ0FBQyxZQUFZLENBQUMsVUFBVSxDQUFDO1NBQ3pDO1FBQ0QsSUFBSSxFQUFFO1lBQ0osaUJBQWlCLEVBQUUsRUFBRTtZQUNyQixLQUFLLEVBQ0gsQ0FBQyxVQUFVLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsQ0FBQztnQkFDdEQsQ0FBQyxDQUFDLFVBQVUsSUFBSSxRQUFRLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQztnQkFDakUsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUM7WUFDbEMsY0FBYyxFQUFFLEVBQUU7WUFDbEIsUUFBUSxFQUFFLEVBQUU7WUFDWixTQUFTLEVBQUUsUUFBUTtZQUNuQixpQkFBaUIsRUFBRSxRQUFRO1lBQzNCLFVBQVUsRUFBRSxVQUFVLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsUUFBUTtTQUMxQztLQUNGLENBQUMsQ0FBQTtJQUVGLFNBQVMsQ0FBQztRQUNSLGFBQWEsQ0FBQyxNQUFNLElBQUksS0FBSyxDQUFDLENBQUE7SUFDaEMsQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQTtJQUVaLE9BQU8sQ0FDTCxvQkFBQyxnQkFBZ0IsYUFDZixRQUFRLEVBQUUsUUFBUSxFQUNsQixLQUFLLEVBQUUsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLEVBQ3hCLE9BQU8sRUFBRSxVQUFDLENBQVc7WUFDbkIsSUFBSSxDQUFDLFFBQVEsRUFBRTtnQkFDYixhQUFhLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxDQUFBO2dCQUM5QixJQUFJLE9BQU8sRUFBRTtvQkFDWCxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUE7aUJBQ1g7YUFDRjtRQUNILENBQUMsSUFDRyxNQUFNLEdBRVQsUUFBUSxJQUFJLE9BQU8sUUFBUSxDQUFDLE9BQU8sRUFBRSxLQUFLLFFBQVEsSUFBSSxDQUNyRCxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxJQUFJLEVBQUUsYUFBYSxFQUFFLE1BQU0sRUFBRSxhQUFhLEVBQUUsQ0FBQyxJQUM5RCxNQUFNLENBQUMsUUFBUSxDQUFDLENBQ1osQ0FDUixDQUNnQixDQUNwQixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsa0JBQWtCLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQTtBQUVqRSxlQUFlLGtCQUFrQixDQUFBIn0=

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

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

package/lib/components/segment-control/item/hooks/useSegmentControlItem.d.ts

@@ -0,0 +1,14 @@
+import { ClickEvent } from '../../../../events/OnClickEvent';
+import React from 'react';
+interface IParams {
+    active?: boolean;
+    onClick?: ClickEvent;
+}
+export declare const useSegmentControlItem: ({ active, onClick }: IParams) => {
+    activeItem: boolean;
+    handleClick: (e: React.MouseEvent) => void;
+} | {
+    activeItem: boolean | undefined;
+    handleClick?: undefined;
+};
+export {};

package/lib/components/segment-control/item/hooks/useSegmentControlItem.js

@@ -0,0 +1,24 @@
+import { __read } from "tslib";
+import React from 'react';
+export var useSegmentControlItem = function (_a) {
+    var active = _a.active, onClick = _a.onClick;
+    try {
+        var _b = __read(React.useState(active || false), 2), activeItem = _b[0], setActiveItem_1 = _b[1];
+        var handleClick = React.useCallback(function (e) {
+            var target = e.target;
+            setActiveItem_1(active || false);
+            target.active = active;
+            if (onClick) {
+                onClick(e);
+            }
+        }, [onClick, active]);
+        React.useEffect(function () {
+            setActiveItem_1(active || false);
+        }, [active]);
+        return { activeItem: activeItem, handleClick: handleClick };
+    }
+    catch (_c) {
+        return { activeItem: active };
+    }
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlU2VnbWVudENvbnRyb2xJdGVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvaXRlbS9ob29rcy91c2VTZWdtZW50Q29udHJvbEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFDQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFPekIsTUFBTSxDQUFDLElBQU0scUJBQXFCLEdBQUcsVUFBQyxFQUE0QjtRQUExQixNQUFNLFlBQUEsRUFBRSxPQUFPLGFBQUE7SUFDckQsSUFBSTtRQUNJLElBQUEsS0FBQSxPQUE4QixLQUFLLENBQUMsUUFBUSxDQUFVLE1BQU0sSUFBSSxLQUFLLENBQUMsSUFBQSxFQUFyRSxVQUFVLFFBQUEsRUFBRSxlQUFhLFFBQTRDLENBQUE7UUFFNUUsSUFBTSxXQUFXLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FDbkMsVUFBQyxDQUFtQjtZQUNsQixJQUFNLE1BQU0sR0FBRyxDQUFDLENBQUMsTUFBeUIsQ0FBQTtZQUMxQyxlQUFhLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxDQUFBO1lBQzlCLE1BQU0sQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFBO1lBQ3RCLElBQUksT0FBTyxFQUFFO2dCQUNYLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQTthQUNYO1FBQ0gsQ0FBQyxFQUNELENBQUMsT0FBTyxFQUFFLE1BQU0sQ0FBQyxDQUNsQixDQUFBO1FBRUQsS0FBSyxDQUFDLFNBQVMsQ0FBQztZQUNkLGVBQWEsQ0FBQyxNQUFNLElBQUksS0FBSyxDQUFDLENBQUE7UUFDaEMsQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQTtRQUVaLE9BQU8sRUFBRSxVQUFVLFlBQUEsRUFBRSxXQUFXLGFBQUEsRUFBRSxDQUFBO0tBQ25DO0lBQUMsV0FBTTtRQUNOLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxFQUFFLENBQUE7S0FDOUI7QUFDSCxDQUFDLENBQUEifQ==