@trilogy-ds/react 0.0.3-beta-v4 → 0.0.3-calendar

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

@@ -4,13 +4,14 @@ import { hashClass } from "../../helpers";
 import clsx from "clsx";
 import { is } from "../../services";
 import { ScrollDirectionEnum } from "../../objects";
+import { ComponentName } from "../enumsComponentsName";
 /**
  * Scroll View Component
  * @param children {React.ReactNode} ScrollView child
  * @param id {string} Id for Web / TestID for Native
  * @param scrollDirection {Direction} Scroll vertically or horizontally
  * - -------------- WEB PROPERTIES -----------------
- * @param className {string} Additionnal css classes
+ * @param className {string} Additional css classes
  * - -------------- NATIVE PROPERTIES ---------------
  * @param footer {React.ReactNode} ScrollView footer
  * @param bounce {boolean} Bounce effect on scroll
@@ -36,6 +37,6 @@ var ScrollView = React.forwardRef(function (_a, ref) {
     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 = ComponentName.ScrollView;
 export default ScrollView;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2Nyb2xsVmlldy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2Nyb2xsLXZpZXcvU2Nyb2xsVmlldy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDL0IsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRS9DOzs7Ozs7Ozs7Ozs7Ozs7R0FlRztBQUNILElBQU0sVUFBVSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ2pDLFVBQUMsRUFBaUMsRUFBRSxHQUFHO1FBQXBDLEVBQUUsUUFBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxRQUFRLGNBQUE7SUFDdEIsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSx3QkFBd0IsR0FBRztRQUMvQixRQUFRLGVBQWUsRUFBRTtZQUN2QixLQUFLLG1CQUFtQixhQUFuQixtQkFBbUIsdUJBQW5CLG1CQUFtQixDQUFFLFVBQVU7Z0JBQ2xDLE9BQU8sRUFBRSxDQUFDLFlBQVksQ0FBQyxDQUFBO1lBQ3pCLEtBQUssbUJBQW1CLGFBQW5CLG1CQUFtQix1QkFBbkIsbUJBQW1CLENBQUUsUUFBUTtnQkFDaEMsT0FBTyxFQUFFLENBQUMsVUFBVSxDQUFDLENBQUE7WUFDdkI7Z0JBQ0UsT0FBTyxFQUFFLENBQUE7U0FDWjtJQUNILENBQUMsQ0FBQTtJQUVELElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FBQyxhQUFhLEVBQUUsZUFBZSxJQUFJLHdCQUF3QixFQUFFLENBQUMsQ0FDbkUsQ0FBQTtJQUNELE9BQU8sQ0FDTCw2QkFBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLEVBQUUsSUFDdEMsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsVUFBVSxDQUFDLFdBQVcsR0FBRyxZQUFZLENBQUE7QUFFckMsZUFBZSxVQUFVLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2Nyb2xsVmlldy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2Nyb2xsLXZpZXcvU2Nyb2xsVmlldy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFFOUIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDL0IsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQy9DLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUV0RDs7Ozs7Ozs7Ozs7Ozs7O0dBZUc7QUFDSCxJQUFNLFVBQVUsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNqQyxVQUFDLEVBQWlDLEVBQUUsR0FBRztRQUFwQyxFQUFFLFFBQUEsRUFBRSxlQUFlLHFCQUFBLEVBQUUsUUFBUSxjQUFBO0lBQ3RCLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sd0JBQXdCLEdBQUc7UUFDL0IsUUFBUSxlQUFlLEVBQUU7WUFDdkIsS0FBSyxtQkFBbUIsYUFBbkIsbUJBQW1CLHVCQUFuQixtQkFBbUIsQ0FBRSxVQUFVO2dCQUNsQyxPQUFPLEVBQUUsQ0FBQyxZQUFZLENBQUMsQ0FBQTtZQUN6QixLQUFLLG1CQUFtQixhQUFuQixtQkFBbUIsdUJBQW5CLG1CQUFtQixDQUFFLFFBQVE7Z0JBQ2hDLE9BQU8sRUFBRSxDQUFDLFVBQVUsQ0FBQyxDQUFBO1lBQ3ZCO2dCQUNFLE9BQU8sRUFBRSxDQUFBO1NBQ1o7SUFDSCxDQUFDLENBQUE7SUFFRCxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJLENBQUMsYUFBYSxFQUFFLGVBQWUsSUFBSSx3QkFBd0IsRUFBRSxDQUFDLENBQ25FLENBQUE7SUFDRCxPQUFPLENBQ0wsNkJBQUssR0FBRyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxFQUFFLElBQ3RDLFFBQVEsQ0FDTCxDQUNQLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUVELFVBQVUsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFVBQVUsQ0FBQTtBQUNqRCxlQUFlLFVBQVUsQ0FBQSJ9

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { ScrollView as ScrollViewNative } from "react-native";
-import { ScrollViewProps } from "./ScrollViewProps";
+import * as React from 'react';
+import { ScrollView as ScrollViewNative } from 'react-native';
+import { ScrollViewProps } from './ScrollViewProps';
 declare const ScrollView: React.ForwardRefExoticComponent<ScrollViewProps & React.RefAttributes<ScrollViewNative>>;
 export default ScrollView;

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

@@ -1,8 +1,9 @@
 import { __assign, __read, __rest } from "tslib";
-import * as React from "react";
-import { StyleSheet, Platform, ScrollView as ScrollViewNative, View, RefreshControl, } from "react-native";
-import { getColorStyle, ScrollDirectionEnum } from "../../objects";
-import { ComponentName } from "../../components/enumsComponentsName";
+import { ComponentName } from '../../components/enumsComponentsName';
+import { isAndroid, isIOS } from '../../helpers/device.native';
+import { getColorStyle, ScrollDirectionEnum } from '../../objects';
+import * as React from 'react';
+import { RefreshControl, ScrollView as ScrollViewNative, StyleSheet, View } from 'react-native';
 var ScrollView = React.forwardRef(function (_a, ref) {
     var children = _a.children, footer = _a.footer, bounce = _a.bounce, centerContent = _a.centerContent, refresh = _a.refresh, onRefresh = _a.onRefresh, refreshControlColor = _a.refreshControlColor, id = _a.id, scrollDirection = _a.scrollDirection, others = __rest(_a, ["children", "footer", "bounce", "centerContent", "refresh", "onRefresh", "refreshControlColor", "id", "scrollDirection"]);
     var _b = __read(React.useState(false), 2), refreshing = _b[0], setRefreshing = _b[1];
@@ -16,12 +17,12 @@ var ScrollView = React.forwardRef(function (_a, ref) {
     var styles = StyleSheet.create({
         stickyContent: {
             flexGrow: 1,
-            justifyContent: "space-between",
-            flexDirection: "column",
+            justifyContent: 'space-between',
+            flexDirection: 'column',
         },
     });
     if (footer) {
-        return (React.createElement(ScrollViewNative, __assign({ horizontal: scrollDirection === ScrollDirectionEnum.HORIZONTAL, testID: id, showsVerticalScrollIndicator: false, contentContainerStyle: styles.stickyContent, bounces: bounce && Platform.OS === "ios" && true, overScrollMode: (bounce && Platform.OS === "android" && "always") || "never" }, (refresh && {
+        return (React.createElement(ScrollViewNative, __assign({ horizontal: scrollDirection === ScrollDirectionEnum.HORIZONTAL, testID: id, showsVerticalScrollIndicator: false, contentContainerStyle: styles.stickyContent, bounces: bounce && isIOS && true, overScrollMode: (bounce && isAndroid && 'always') || 'never' }, (refresh && {
             refreshControl: (React.createElement(RefreshControl, { tintColor: refreshControlColor && getColorStyle(refreshControlColor), colors: refreshControlColor && [getColorStyle(refreshControlColor)], refreshing: refreshing, onRefresh: function () {
                     onRefreshing();
                     if (onRefresh) {
@@ -31,19 +32,19 @@ var ScrollView = React.forwardRef(function (_a, ref) {
         }), others),
             React.createElement(View, { style: {
                     flex: 1,
-                    justifyContent: centerContent ? "center" : "flex-start",
+                    justifyContent: centerContent ? 'center' : 'flex-start',
                 } }, children),
-            React.createElement(View, { style: { justifyContent: "flex-end" } }, footer)));
+            React.createElement(View, { style: { justifyContent: 'flex-end' } }, footer)));
     }
-    return (React.createElement(ScrollViewNative, __assign({ horizontal: scrollDirection === ScrollDirectionEnum.HORIZONTAL, testID: id, contentContainerStyle: { flexGrow: 1 }, ref: ref, showsVerticalScrollIndicator: false, bounces: bounce && Platform.OS === "ios" && true, overScrollMode: (bounce && Platform.OS === "android" && "always") || "never" }, (refresh && {
+    return (React.createElement(ScrollViewNative, __assign({ horizontal: scrollDirection === ScrollDirectionEnum.HORIZONTAL, testID: id, contentContainerStyle: { flexGrow: 1 }, ref: ref, showsVerticalScrollIndicator: false, bounces: bounce && isIOS && true, overScrollMode: (bounce && isAndroid && 'always') || 'never' }, (refresh && {
         refreshControl: (React.createElement(RefreshControl, { tintColor: refreshControlColor && getColorStyle(refreshControlColor), colors: refreshControlColor && [getColorStyle(refreshControlColor)], refreshing: refreshing, onRefresh: function () {
                 onRefreshing();
                 if (onRefresh) {
                     onRefresh();
                 }
             } })),
-    }), others), centerContent ? (React.createElement(View, { style: { flex: 1, justifyContent: "center" } }, children)) : (children)));
+    }), others), centerContent ? React.createElement(View, { style: { flex: 1, justifyContent: 'center' } }, children) : children));
 });
 ScrollView.displayName = ComponentName.ScrollView;
 export default ScrollView;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2Nyb2xsVmlldy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3Njcm9sbC12aWV3L1Njcm9sbFZpZXcubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUNMLFVBQVUsRUFDVixRQUFRLEVBQ1IsVUFBVSxJQUFJLGdCQUFnQixFQUM5QixJQUFJLEVBQ0osY0FBYyxHQUNmLE1BQU0sY0FBYyxDQUFBO0FBQ3JCLE9BQU8sRUFBRSxhQUFhLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFOUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBcUJoRSxJQUFNLFVBQVUsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNqQyxVQUNFLEVBV2tCLEVBQ2xCLEdBQWtCO0lBWGhCLElBQUEsUUFBUSxjQUFBLEVBQ1IsTUFBTSxZQUFBLEVBQ04sTUFBTSxZQUFBLEVBQ04sYUFBYSxtQkFBQSxFQUNiLE9BQU8sYUFBQSxFQUNQLFNBQVMsZUFBQSxFQUNULG1CQUFtQix5QkFBQSxFQUNuQixFQUFFLFFBQUEsRUFDRixlQUFlLHFCQUFBLEVBQ1osTUFBTSxjQVZYLHlIQVdDLENBRFU7SUFJTCxJQUFBLEtBQUEsT0FBOEIsS0FBSyxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsSUFBQSxFQUFsRCxVQUFVLFFBQUEsRUFBRSxhQUFhLFFBQXlCLENBQUE7SUFFekQsSUFBTSxJQUFJLEdBQUcsVUFBQyxPQUFlO1FBQzNCLE9BQU8sSUFBSSxPQUFPLENBQUMsVUFBQyxPQUFPLElBQUssT0FBQSxVQUFVLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBQyxFQUE1QixDQUE0QixDQUFDLENBQUE7SUFDL0QsQ0FBQyxDQUFBO0lBRUQsSUFBTSxZQUFZLEdBQUcsS0FBSyxDQUFDLFdBQVcsQ0FBQztRQUNyQyxh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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2Nyb2xsVmlldy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3Njcm9sbC12aWV3L1Njcm9sbFZpZXcubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0seUJBQXlCLENBQUE7QUFDMUQsT0FBTyxFQUFFLGFBQWEsRUFBRSxtQkFBbUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM5RCxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsY0FBYyxFQUFFLFVBQVUsSUFBSSxnQkFBZ0IsRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBc0IvRixJQUFNLFVBQVUsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNqQyxVQUNFLEVBV0MsRUFDRCxHQUFHO0lBWEQsSUFBQSxRQUFRLGNBQUEsRUFDUixNQUFNLFlBQUEsRUFDTixNQUFNLFlBQUEsRUFDTixhQUFhLG1CQUFBLEVBQ2IsT0FBTyxhQUFBLEVBQ1AsU0FBUyxlQUFBLEVBQ1QsbUJBQW1CLHlCQUFBLEVBQ25CLEVBQUUsUUFBQSxFQUNGLGVBQWUscUJBQUEsRUFDWixNQUFNLGNBVlgseUhBV0MsQ0FEVTtJQUlMLElBQUEsS0FBQSxPQUE4QixLQUFLLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxJQUFBLEVBQWxELFVBQVUsUUFBQSxFQUFFLGFBQWEsUUFBeUIsQ0FBQTtJQUV6RCxJQUFNLElBQUksR0FBRyxVQUFDLE9BQWU7UUFDM0IsT0FBTyxJQUFJLE9BQU8sQ0FBQyxVQUFDLE9BQU8sSUFBSyxPQUFBLFVBQVUsQ0FBQyxPQUFPLEVBQUUsT0FBTyxDQUFDLEVBQTVCLENBQTRCLENBQUMsQ0FBQTtJQUMvRCxDQUFDLENBQUE7SUFFRCxJQUFN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

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ScrollDirectionEnum, ScrollDirectionEnumValues, TrilogyColor, TrilogyColorValues } from '../../objects';
+import { ScrollView } from 'react-native';
 /**
  * ScroView Interface
  */
@@ -15,3 +16,5 @@ export interface ScrollViewProps {
     id?: string;
     scrollDirection?: ScrollDirectionEnum | ScrollDirectionEnumValues;
 }
+export type ScrollViewRef = HTMLDivElement;
+export type ScrollViewNativeRef = ScrollView;

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

@@ -79,7 +79,9 @@ export default {
       "MAIN",
       "MAIN_FADE",
       "ACCENT",
+      "ACCENT_FADE",
       "FONT",
+      "FONT_PLACEHOLDER",
       "SUCCESS",
       "SUCCESS_FADE",
       "INFO",
@@ -92,9 +94,12 @@ export default {
       "DISABLED_FADE",
       "NEUTRAL",
       "NEUTRAL_FADE",
+      "STROKE",
       "WHITE",
       "MAIN_FADE",
+      "ACCENT_FADE",
       "FONT",
+      "FONT_PLACEHOLDER",
       "SUCCESS_FADE",
       "INFO_FADE",
       "WARNING_FADE",
@@ -102,7 +107,8 @@ export default {
       "DISABLED",
       "DISABLED_FADE",
       "NEUTRAL",
-      "NEUTRAL_FADE"
+      "NEUTRAL_FADE",
+      "STROKE"
     ]
   },
   "id": {

package/lib/components/section/Section.d.ts

@@ -6,10 +6,10 @@ import { SectionProps } from './SectionProps';
  * @param backgroundColor {TrilogyColor} Section Background Color
  * @param backgroundSrc {string} Source of background Image
  * - -------------- WEB PROPERTIES ---------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param inverted {boolean} Inverted Section Color
  * @param skeleton {boolean} Skeleton before loaded
  * - -------------- NATIVE PROPERTIES ---------------
  **/
-declare const Section: ({ className, id, skeleton, backgroundColor, backgroundSrc, inverted, ...others }: SectionProps) => React.JSX.Element;
+declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
 export default Section;

package/lib/components/section/Section.js

@@ -5,24 +5,26 @@ import { getBackgroundClassName } from '../../objects';
 import clsx from 'clsx';
 import { hashClass } from '../../helpers';
 import { useTrilogyContext } from '../../context';
+import { ComponentName } from '../enumsComponentsName';
 /**
  * Section Component - Manages the main margins of the page and takes up all the available width.
  * @param children {React.ReactNode}
  * @param backgroundColor {TrilogyColor} Section Background Color
  * @param backgroundSrc {string} Source of background Image
  * - -------------- WEB PROPERTIES ---------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param inverted {boolean} Inverted Section Color
  * @param skeleton {boolean} Skeleton before loaded
  * - -------------- NATIVE PROPERTIES ---------------
  **/
-var Section = function (_a) {
+var Section = React.forwardRef(function (_a, ref) {
     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')));
-    return (React.createElement("section", __assign({ id: id }, (backgroundSrc && {
+    return (React.createElement("section", __assign({ ref: ref, id: id }, (backgroundSrc && {
         style: { backgroundImage: "url(".concat(backgroundSrc, ")") },
     }), { className: _className }, others)));
-};
+});
+Section.displayName = ComponentName.Section;
 export default Section;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3BDLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNsRCxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFFN0M7Ozs7Ozs7Ozs7SUFVSTtBQUNKLElBQU0sT0FBTyxHQUFHLFVBQUMsRUFBOEY7SUFBNUYsSUFBQSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxlQUFlLHFCQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFFLFFBQVEsY0FBQSxFQUFLLE1BQU0sY0FBOUUsK0VBQWdGLENBQUY7SUFDckYsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxVQUFVLEdBQUcsU0FBUyxDQUMxQixNQUFNLEVBQ04sSUFBSSxDQUNGLFNBQVMsRUFDVCxTQUFTLEVBQ1QsZUFBZSxJQUFJLEdBQUcsQ0FBQyxzQkFBc0IsQ0FBQyxlQUFlLENBQUMsQ0FBQyxFQUMvRCxhQUFhLElBQUksR0FBRyxDQUFDLFlBQVksQ0FBQyxFQUNsQyxRQUFRLElBQUksRUFBRSxDQUFDLFVBQVUsQ0FBQyxFQUMxQixRQUFRLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxDQUMxQixDQUNGLENBQUE7SUFFRCxPQUFPLENBQ0wsMENBQ0UsRUFBRSxFQUFFLEVBQUUsSUFDRixDQUFDLGFBQWEsSUFBSTtRQUNwQixLQUFLLEVBQUUsRUFBRSxlQUFlLEVBQUUsY0FBTyxhQUFhLE1BQUcsRUFBRTtLQUNwRCxDQUFDLElBQ0YsU0FBUyxFQUFFLFVBQVUsSUFDakIsTUFBTSxFQUNWLENBQ0gsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsT0FBTyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvc2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3BDLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNsRCxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBRXREOzs7Ozs7Ozs7O0lBVUk7QUFDSixJQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUEyQixVQUFDLEVBQWdGLEVBQUUsR0FBRztJQUFuRixJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLGVBQWUscUJBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUE5RSwrRUFBZ0YsQ0FBRjtJQUNoSSxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxJQUFNLFVBQVUsR0FBRyxTQUFTLENBQzFCLE1BQU0sRUFDTixJQUFJLENBQ0YsU0FBUyxFQUNULFNBQVMsRUFDVCxlQUFlLElBQUksR0FBRyxDQUFDLHNCQUFzQixDQUFDLGVBQWUsQ0FBQyxDQUFDLEVBQy9ELGFBQWEsSUFBSSxHQUFHLENBQUMsWUFBWSxDQUFDLEVBQ2xDLFFBQVEsSUFBSSxFQUFFLENBQUMsVUFBVSxDQUFDLEVBQzFCLFFBQVEsSUFBSSxFQUFFLENBQUMsU0FBUyxDQUFDLENBQzFCLENBQ0YsQ0FBQTtJQUVELE9BQU8sQ0FDTCwwQ0FDRSxHQUFHLEVBQUUsR0FBRyxFQUNSLEVBQUUsRUFBRSxFQUFFLElBQ0YsQ0FBQyxhQUFhLElBQUk7UUFDcEIsS0FBSyxFQUFFLEVBQUUsZUFBZSxFQUFFLGNBQU8sYUFBYSxNQUFHLEVBQUU7S0FDcEQsQ0FBQyxJQUNGLFNBQVMsRUFBRSxVQUFVLElBQ2pCLE1BQU0sRUFDVixDQUNILENBQUE7QUFDSCxDQUFDLENBQUMsQ0FBQTtBQUVGLE9BQU8sQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLE9BQU8sQ0FBQTtBQUMzQyxlQUFlLE9BQU8sQ0FBQSJ9

package/lib/components/section/Section.native.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { View } from 'react-native';
 import { SectionProps } from './SectionProps';
-import { ComponentName } from '../../components/enumsComponentsName';
 /**
  * Section Component - Manages the main margins of the page and takes up all the available width.
  * @param children {React.ReactNode}
@@ -8,8 +8,5 @@ import { ComponentName } from '../../components/enumsComponentsName';
  * @param backgroundSrc {string} Source of background Image
  * @param paddingless {boolean} remove padding
  **/
-declare const Section: {
-    ({ backgroundColor, backgroundSrc, children }: SectionProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<View>>;
 export default Section;

package/lib/components/section/Section.native.js

@@ -1,7 +1,8 @@
+import { __assign, __rest } from "tslib";
+import { ComponentName } from '../../components/enumsComponentsName';
+import { getColorStyle, TrilogyColor } from '../../objects';
 import * as React from 'react';
 import { ImageBackground, StyleSheet, View } from 'react-native';
-import { getColorStyle, TrilogyColor } from '../../objects';
-import { ComponentName } from '../../components/enumsComponentsName';
 /**
  * Section Component - Manages the main margins of the page and takes up all the available width.
  * @param children {React.ReactNode}
@@ -9,26 +10,22 @@ import { ComponentName } from '../../components/enumsComponentsName';
  * @param backgroundSrc {string} Source of background Image
  * @param paddingless {boolean} remove padding
  **/
-var Section = function (_a) {
-    var backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, children = _a.children;
+var Section = React.forwardRef(function (_a, ref) {
+    var backgroundColor = _a.backgroundColor, backgroundSrc = _a.backgroundSrc, children = _a.children, style = _a.style, others = __rest(_a, ["backgroundColor", "backgroundSrc", "children", "style"]);
     var colorBgc = getColorStyle(TrilogyColor.BACKGROUND);
     var styles = StyleSheet.create({
-        section: {
-            backgroundColor: backgroundColor ? getColorStyle(backgroundColor) : colorBgc,
-            paddingTop: 32,
-            paddingBottom: 32,
-            paddingRight: 24,
-            paddingLeft: 24,
-            width: 'auto',
-        },
-        sectionImage: {
-            width: '100%',
-            minHeight: 100,
-            height: 'auto',
+        container: {
+            backgroundColor: backgroundSrc ? undefined : backgroundColor ? getColorStyle(backgroundColor) : colorBgc,
+            paddingVertical: 32,
+            paddingHorizontal: 24,
         },
     });
-    return (React.createElement(View, { style: styles.section }, backgroundSrc ? (React.createElement(ImageBackground, { style: styles.sectionImage, source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc } }, children)) : (children)));
-};
+    if (backgroundSrc) {
+        return (React.createElement(ImageBackground, { resizeMode: 'cover', source: typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc } },
+            React.createElement(View, __assign({ ref: ref, style: [styles.container, style] }, others), children)));
+    }
+    return (React.createElement(View, __assign({ ref: ref, style: [styles.container, style] }, others), children));
+});
 Section.displayName = ComponentName.Section;
 export default Section;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlY3Rpb24vU2VjdGlvbi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxlQUFlLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUN2RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFFaEU7Ozs7OztJQU1JO0FBQ0osSUFBTSxPQUFPLEdBQUcsVUFBQyxFQUEwRDtRQUF4RCxlQUFlLHFCQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFFLFFBQVEsY0FBQTtJQUN6RCxJQUFNLFFBQVEsR0FBRyxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxDQUFBO0lBRXZELElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsT0FBTyxFQUFFO1lBQ1AsZUFBZSxFQUFFLGVBQWUsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRO1lBQzVFLFVBQVUsRUFBRSxFQUFFO1lBQ2QsYUFBYSxFQUFFLEVBQUU7WUFDakIsWUFBWSxFQUFFLEVBQUU7WUFDaEIsV0FBVyxFQUFFLEVBQUU7WUFDZixLQUFLLEVBQUUsTUFBTTtTQUNkO1FBQ0QsWUFBWSxFQUFFO1lBQ1osS0FBSyxFQUFFLE1BQU07WUFDYixTQUFTLEVBQUUsR0FBRztZQUNkLE1BQU0sRUFBRSxNQUFNO1NBQ2Y7S0FDRixDQUFDLENBQUE7SUFFRixPQUFPLENBQ0wsb0JBQUMsSUFBSSxJQUFDLEtBQUssRUFBRSxNQUFNLENBQUMsT0FBTyxJQUN4QixhQUFhLENBQUMsQ0FBQyxDQUFDLENBQ2Ysb0JBQUMsZUFBZSxJQUNkLEtBQUssRUFBRSxNQUFNLENBQUMsWUFBWSxFQUMxQixNQUFNLEVBQUUsT0FBTyxhQUFhLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLEVBQUUsR0FBRyxFQUFFLGFBQWEsRUFBRSxJQUVqRixRQUFRLENBQ08sQ0FDbkIsQ0FBQyxDQUFDLENBQUMsQ0FDRixRQUFRLENBQ1QsQ0FDSSxDQUNSLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxPQUFPLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxPQUFPLENBQUE7QUFFM0MsZUFBZSxPQUFPLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlY3Rpb24vU2VjdGlvbi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDdkQsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLGVBQWUsRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBR2hFOzs7Ozs7SUFNSTtBQUNKLElBQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQWlDLFVBQUMsRUFBOEQsRUFBRSxHQUFHO0lBQWpFLElBQUEsZUFBZSxxQkFBQSxFQUFFLGFBQWEsbUJBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxLQUFLLFdBQUEsRUFBSyxNQUFNLGNBQTVELHlEQUE4RCxDQUFGO0lBQzVILElBQU0sUUFBUSxHQUFHLGFBQWEsQ0FBQyxZQUFZLENBQUMsVUFBVSxDQUFDLENBQUE7SUFFdkQsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixTQUFTLEVBQUU7WUFDVCxlQUFlLEVBQUUsYUFBYSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxRQUFRO1lBQ3hHLGVBQWUsRUFBRSxFQUFFO1lBQ25CLGlCQUFpQixFQUFFLEVBQUU7U0FDdEI7S0FDRixDQUFDLENBQUE7SUFFRixJQUFJLGFBQWEsRUFBRTtRQUNqQixPQUFPLENBQ0wsb0JBQUMsZUFBZSxJQUNkLFVBQVUsRUFBQyxPQUFPLEVBQ2xCLE1BQU0sRUFBRSxPQUFPLGFBQWEsS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsRUFBRSxHQUFHLEVBQUUsYUFBYSxFQUFFO1lBRWxGLG9CQUFDLElBQUksYUFBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxDQUFDLE1BQU0sQ0FBQyxTQUFTLEVBQUUsS0FBSyxDQUFDLElBQU0sTUFBTSxHQUN6RCxRQUFRLENBQ0osQ0FDUyxDQUNuQixDQUFBO0tBQ0Y7SUFFRCxPQUFPLENBQ0wsb0JBQUMsSUFBSSxhQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLENBQUMsTUFBTSxDQUFDLFNBQVMsRUFBRSxLQUFLLENBQUMsSUFBTSxNQUFNLEdBQ3pELFFBQVEsQ0FDSixDQUNSLENBQUE7QUFDSCxDQUFDLENBQUMsQ0FBQTtBQUVGLE9BQU8sQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLE9BQU8sQ0FBQTtBQUMzQyxlQUFlLE9BQU8sQ0FBQSJ9

package/lib/components/section/SectionProps.d.ts

@@ -1,8 +1,16 @@
+import type { View } from 'react-native';
 import type { BackgroundProps, ChildrenWithNoText } from '../../objects';
 import { CommonProps } from '../../objects/facets/CommonProps';
+type Styles = {
+    [key: string]: any;
+};
 /**
  * Section Interface
  */
 export interface SectionProps extends BackgroundProps, ChildrenWithNoText, CommonProps {
     skeleton?: boolean;
+    style?: Styles;
 }
+export type SectionRef = HTMLElement;
+export type SectionNativeRef = View;
+export {};

package/lib/components/section/SectionPropsDefaults.js

@@ -7,6 +7,13 @@ export default {
       "true"
     ]
   },
+  "style": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "Styles"
+    ]
+  },
   "backgroundColor": {
     "type": "enum",
     "values": [
@@ -21,7 +28,9 @@ export default {
       "MAIN",
       "MAIN_FADE",
       "ACCENT",
+      "ACCENT_FADE",
       "FONT",
+      "FONT_PLACEHOLDER",
       "SUCCESS",
       "SUCCESS_FADE",
       "INFO",
@@ -34,9 +43,12 @@ export default {
       "DISABLED_FADE",
       "NEUTRAL",
       "NEUTRAL_FADE",
+      "STROKE",
       "WHITE",
       "MAIN_FADE",
+      "ACCENT_FADE",
       "FONT",
+      "FONT_PLACEHOLDER",
       "SUCCESS_FADE",
       "INFO_FADE",
       "WARNING_FADE",
@@ -44,7 +56,8 @@ export default {
       "DISABLED",
       "DISABLED_FADE",
       "NEUTRAL",
-      "NEUTRAL_FADE"
+      "NEUTRAL_FADE",
+      "STROKE"
     ]
   },
   "backgroundSrc": {

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { SegmentControlProps } from './SegmentControlProps';
 /**
  * SegmentControl Component
@@ -7,8 +7,8 @@ import { SegmentControlProps } from './SegmentControlProps';
  * @param activeIndex {number} default active SegmentControl index
  * @param disabled {boolean} disabled SegmentControl
  * - -------------- WEB PROPERTIES ---------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * - -------------- NATIVE PROPERTIES ---------------
  */
-declare const SegmentControl: ({ className, id, onClick, children, activeIndex, align }: SegmentControlProps) => JSX.Element;
+declare const SegmentControl: React.ForwardRefExoticComponent<SegmentControlProps & React.RefAttributes<HTMLDivElement>>;
 export default SegmentControl;

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

@@ -1,10 +1,11 @@
-import { __read } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import React, { useState } from 'react';
 import SegmentControlItem from './item';
 import { hashClass } from '../../helpers';
 import clsx from 'clsx';
 import { useTrilogyContext } from '../../context';
 import { getJustifiedClassName } from '../../objects';
+import { ComponentName } from '../enumsComponentsName';
 /**
  * SegmentControl Component
  * @param children {ReactNode} Children for SegmentControl
@@ -12,11 +13,11 @@ import { getJustifiedClassName } from '../../objects';
  * @param activeIndex {number} default active SegmentControl index
  * @param disabled {boolean} disabled SegmentControl
  * - -------------- WEB PROPERTIES ---------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * - -------------- NATIVE PROPERTIES ---------------
  */
-var SegmentControl = function (_a) {
-    var className = _a.className, id = _a.id, onClick = _a.onClick, children = _a.children, activeIndex = _a.activeIndex, align = _a.align;
+var SegmentControl = React.forwardRef(function (_a, ref) {
+    var className = _a.className, id = _a.id, onClick = _a.onClick, children = _a.children, activeIndex = _a.activeIndex, align = _a.align, others = __rest(_a, ["className", "id", "onClick", "children", "activeIndex", "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];
@@ -36,7 +37,7 @@ var SegmentControl = function (_a) {
     React.useEffect(function () {
         setActivateIndex(activateIndex);
     }, [activateIndex]);
-    return (React.createElement("div", { id: id, className: classes }, children &&
+    return (React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others), children &&
         Array.isArray(children) &&
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         children.map(function (child, index) {
@@ -55,6 +56,7 @@ var SegmentControl = function (_a) {
             };
             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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL3NlZ21lbnQtY29udHJvbC9TZWdtZW50Q29udHJvbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQ3ZDLE9BQU8sa0JBQWtCLE1BQU0sUUFBUSxDQUFBO0FBRXZDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDakQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBRXREOzs7Ozs7Ozs7R0FTRztBQUNILElBQU0sY0FBYyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQXlDLFVBQUMsRUFBbUUsRUFBRSxHQUFHO0lBQXRFLElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsV0FBVyxpQkFBQSxFQUFFLEtBQUssV0FBQSxFQUFLLE1BQU0sY0FBakUsa0VBQW1FLENBQUY7SUFDeEksSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsbUJBQW1CLEVBQUUsS0FBSyxJQUFJLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUE7SUFDeEcsSUFBQSxLQUFBLE9BQW9DLFFBQVEsQ0FBUyxXQUFXLElBQUksQ0FBQyxDQUFDLElBQUEsRUFBckUsYUFBYSxRQUFBLEVBQUUsZ0JBQWdCLFFBQXNDLENBQUE7SUFFNUUsSUFBTSxRQUFRLEdBQUcsVUFBQyxLQUFhLEVBQUUsZ0JBQWlDO1FBQ2hFLElBQUksT0FBTyxnQkFBZ0IsS0FBSyxXQUFXLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDN0QsT0FBTyxnQkFBZ0IsQ0FBQTtTQUN4QjtRQUNELElBQUksS0FBSyxLQUFLLGFBQWEsRUFBRTtZQUMzQixPQUFPLElBQUksQ0FBQTtTQUNaO0lBQ0gsQ0FBQyxDQUFBO0lBRUQsSUFBTSxZQUFZLEdBQUcsVUFBQyxDQUFtQixFQUFFLEtBQWE7UUFDdEQsZ0JBQWdCLENBQUMsS0FBSyxDQUFDLENBQUE7UUFDdkIsSUFBSSxPQUFPO1lBQUUsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFBO0lBQ3pCLENBQUMsQ0FBQTtJQUVELEtBQUssQ0FBQyxTQUFTLENBQUM7UUFDZCxnQkFBZ0IsQ0FBQyxhQUFhLENBQUMsQ0FBQTtJQUNqQyxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFBO0lBRW5CLE9BQU8sQ0FDTCxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNLEdBQ2xELFFBQVE7UUFDUCxLQUFLLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQztRQUN2Qiw4REFBOEQ7UUFDOUQsUUFBUSxDQUFDLEdBQUcsQ0FBQyxVQUFDLEtBQVUsRUFBRSxLQUFhO1lBQ3JDLElBQU0sS0FBSyxHQUFHO2dCQUNaLE1BQU0sRUFBRSxPQUFPLENBQUMsUUFBUSxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDLElBQUksS0FBSztnQkFDN0QsUUFBUSxFQUFFLEtBQUssQ0FBQyxLQUFLLENBQUMsUUFBUTtnQkFDOUIsR0FBRyxFQUFFLEtBQUs7Z0JBQ1YsT0FBTyxFQUFFLFVBQUMsS0FBdUI7b0JBQy9CLFlBQVksQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQUE7b0JBQzFCLElBQUksS0FBSyxFQUFFO3dCQUNULElBQUksS0FBSyxDQUFDLEtBQUssQ0FBQyxPQUFPLEVBQUU7NEJBQ3ZCLEtBQUssQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFBO3lCQUMzQjtxQkFDRjtnQkFDSCxDQUFDO2FBQ0YsQ0FBQTtZQUVELE9BQU8sS0FBSyxJQUFJLE9BQU8sS0FBSyxDQUFDLE9BQU8sRUFBRSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FDcEQsb0JBQUMsa0JBQWtCLElBQ2pCLFFBQVEsRUFBRSxLQUFLLENBQUMsUUFBUSxFQUN4QixNQUFNLEVBQUUsS0FBSyxDQUFDLE1BQU0sRUFDcEIsR0FBRyxFQUFFLEtBQUssQ0FBQyxHQUFHLEVBQ2QsT0FBTyxFQUFFLFVBQUMsQ0FBVSxJQUFLLE9BQUEsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLENBQUMsQ0FBQyxFQUFaLENBQVksSUFFcEMsS0FBSyxDQUNhLENBQ3RCLENBQUMsQ0FBQyxDQUFDLENBQ0YsS0FBSyxDQUFDLFlBQVksQ0FBQyxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQ2pDLENBQUE7UUFDSCxDQUFDLENBQUMsQ0FDQSxDQUNQLENBQUE7QUFDSCxDQUFDLENBQUMsQ0FBQTtBQUVGLGNBQWMsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLGNBQWMsQ0FBQTtBQUN6RCxlQUFlLGNBQWMsQ0FBQSJ9

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
+import React from 'react';
 import { SegmentControlProps } from './SegmentControlProps';
-import { ComponentName } from '../../components/enumsComponentsName';
 /**
  * SegmentControl Component
  * @param children {ReactNode} Children for SegmentControl
@@ -8,8 +7,5 @@ import { ComponentName } from '../../components/enumsComponentsName';
  * @param activeIndex {number} default active SegmentControl index
  * @param disabled {boolean} disabled SegmentControl
  */
-declare const SegmentControl: {
-    ({ children, onClick, activeIndex, ...others }: SegmentControlProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const SegmentControl: React.ForwardRefExoticComponent<SegmentControlProps & React.RefAttributes<import("react-native").View>>;
 export default 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
@@ -13,7 +13,7 @@ import { ComponentName } from '../../components/enumsComponentsName';
  * @param activeIndex {number} default active SegmentControl index
  * @param disabled {boolean} disabled SegmentControl
  */
-var SegmentControl = function (_a) {
+var SegmentControl = React.forwardRef(function (_a, ref) {
     var children = _a.children, onClick = _a.onClick, activeIndex = _a.activeIndex, others = __rest(_a, ["children", "onClick", "activeIndex"]);
     var _b = __read(useState(activeIndex || 0), 2), activateIndex = _b[0], setActivateIndex = _b[1];
     var isActive = function (index, childPropsActive) {
@@ -38,13 +38,15 @@ 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 },
+    return (React.createElement(View, { ref: ref, style: styles.padding },
         React.createElement(View, __assign({ style: styles.segmentedControl }, others), children &&
             Array.isArray(children) &&
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -68,7 +70,7 @@ var SegmentControl = function (_a) {
                         React.createElement(Text, { level: TextLevels.ONE }, String(child)))) : (React.cloneElement(child, props));
                 }
             }))));
-};
+});
 SegmentControl.displayName = ComponentName.SegmentControl;
 export default SegmentControl;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvU2VnbWVudENvbnRyb2wubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdkMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUV6QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLG9CQUFvQixNQUFNLFFBQVEsQ0FBQTtBQUN6QyxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBQ3BFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7O0dBTUc7QUFDSCxJQUFNLGNBQWMsR0FBRyxVQUFDLEVBQWtFO0lBQWhFLElBQUEsUUFBUSxjQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsV0FBVyxpQkFBQSxFQUFLLE1BQU0sY0FBM0Msc0NBQTZDLENBQUY7SUFDM0QsSUFBQSxLQUFBLE9BQW9DLFFBQVEsQ0FBQyxXQUFXLElBQUksQ0FBQyxDQUFDLElBQUEsRUFBN0QsYUFBYSxRQUFBLEVBQUUsZ0JBQWdCLFFBQThCLENBQUE7SUFFcEUsSUFBTSxRQUFRLEdBQUcsVUFBQyxLQUFhLEVBQUUsZ0JBQWlDO1FBQ2hFLElBQUksT0FBTyxnQkFBZ0IsS0FBSyxXQUFXLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDN0QsT0FBTyxnQkFBZ0IsQ0FBQTtTQUN4QjtRQUNELElBQUksS0FBSyxLQUFLLGFBQWEsRUFBRTtZQUMzQixPQUFPLElBQUksQ0FBQTtTQUNaO0lBQ0gsQ0FBQyxDQUFBO0lB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2wubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvU2VnbWVudENvbnRyb2wubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3hDLE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDcEUsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdkMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUN6QyxPQUFPLG9CQUFvQixNQUFNLFFBQVEsQ0FBQTtBQUd6Qzs7Ozs7O0dBTUc7QUFDSCxJQUFNLGNBQWMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUErQyxVQUFDLEVBQTZDLEVBQUUsR0FBRztJQUFoRCxJQUFBLFFBQVEsY0FBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFdBQVcsaUJBQUEsRUFBSyxNQUFNLGNBQTNDLHNDQUE2QyxDQUFGO0lBQzFILElBQUEsS0FBQSxPQUFvQyxRQUFRLENBQUMsV0FBVyxJQUFJLENBQUMsQ0FBQyxJQUFBLEVBQTdELGFBQWEsUUFBQSxFQUFFLGdCQUFnQixRQUE4QixDQUFBO0lBRXBFLElBQU0sUUFBUSxHQUFHLFVBQUMsS0FBYSxFQUFFLGdCQUFpQztRQUNoRSxJQUFJLE9BQU8sZ0JBQWdCLEtBQUssV0FBVyxJQUFJLENBQUMsYUFBYSxFQUFFO1lBQzdELE9BQU8sZ0JBQWdCLENBQUE7U0FDeEI7UUFDRCxJQUFJLEtBQUssS0FBSyxhQUFhLEVBQUU7WUFDM0IsT0FBTyxJ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

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { View } from 'react-native';
 import { Clickable } from '../../objects/facets/Clickable';
 import { CommonProps } from '../../objects/facets/CommonProps';
 import { Alignable, AlignableValues } from '../../objects';
@@ -10,3 +11,5 @@ export interface SegmentControlProps extends Clickable, CommonProps {
     activeIndex?: number;
     align?: Alignable | AlignableValues;
 }
+export type SegmentControlRef = HTMLDivElement;
+export type SegmentControlNativeRef = View;

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

@@ -27,9 +27,11 @@ export default {
       "ALIGNED_CENTER",
       "ALIGNED_START",
       "ALIGNED_END",
+      "ALIGNED_STRETCH",
       "ALIGNED_CENTER",
       "ALIGNED_START",
-      "ALIGNED_END"
+      "ALIGNED_END",
+      "ALIGNED_STRETCH"
     ]
   },
   "onClick": {

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { SegmentControlItemProps } from './SegmentControlItemProps';
 /**
  * SegmentControl Item Component
@@ -8,7 +8,7 @@ import { SegmentControlItemProps } from './SegmentControlItemProps';
  * @param disabled {boolean} disable onClick on item
  * @param inverted {boolean} invert color of active item
  * - -------------- WEB PROPERTIES ---------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  */
-declare const SegmentControlItem: ({ active, onClick, disabled, className, id, children, }: SegmentControlItemProps) => JSX.Element;
+declare const SegmentControlItem: React.ForwardRefExoticComponent<SegmentControlItemProps & React.RefAttributes<HTMLButtonElement>>;
 export default SegmentControlItem;

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

@@ -1,8 +1,9 @@
-import { __read } from "tslib";
-import React, { useEffect, useState } from 'react';
+import { __assign, __read, __rest } from "tslib";
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { useTrilogyContext } from '../../../context';
 import { hashClass } from '../../../helpers';
 import clsx from 'clsx';
-import { useTrilogyContext } from '../../../context';
+import React, { useEffect, useState } from 'react';
 /**
  * SegmentControl Item Component
  * @param active {boolean} active segmentedControl item
@@ -11,23 +12,24 @@ import { useTrilogyContext } from '../../../context';
  * @param disabled {boolean} disable onClick on item
  * @param inverted {boolean} invert color of active item
  * - -------------- WEB PROPERTIES ---------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  */
-var SegmentControlItem = function (_a) {
-    var active = _a.active, onClick = _a.onClick, disabled = _a.disabled, className = _a.className, id = _a.id, children = _a.children;
+var SegmentControlItem = React.forwardRef(function (_a, ref) {
+    var active = _a.active, onClick = _a.onClick, disabled = _a.disabled, className = _a.className, id = _a.id, children = _a.children, others = __rest(_a, ["active", "onClick", "disabled", "className", "id", "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) {
+    return (React.createElement("button", __assign({ type: 'button', ref: ref, 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));
-};
+        } }, others), children));
+});
+SegmentControlItem.displayName = ComponentName.SegmentControlItem;
 export default SegmentControlItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvaXRlbS9TZWdtZW50Q29udHJvbEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFFbEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7Ozs7R0FTRztBQUNILElBQU0sa0JBQWtCLEdBQUcsVUFBQyxFQU9GO1FBTnhCLE1BQU0sWUFBQSxFQUNOLE9BQU8sYUFBQSxFQUNQLFFBQVEsY0FBQSxFQUNSLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLFFBQVEsY0FBQTtJQUVGLElBQUEsS0FBQSxPQUE4QixRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQS9ELFVBQVUsUUFBQSxFQUFFLGFBQWEsUUFBc0MsQ0FBQTtJQUM5RCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxTQUFTLENBQUM7UUFDUixhQUFhLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxDQUFBO0lBQ2hDLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUE7SUFFWixPQUFPLENBQ0wsZ0NBQ0UsRUFBRSxFQUFFLEVBQUUsRUFDTixRQUFRLEVBQUUsUUFBUSxFQUNsQixTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsd0JBQXdCLEVBQUUsU0FBUyxFQUFFLEVBQUUsV0FBVyxFQUFFLFVBQVUsRUFBRSxDQUFDLENBQUMsRUFDcEcsT0FBTyxFQUFFLFVBQUMsQ0FBbUI7WUFDM0IsSUFBTSxNQUFNLEdBQUcsQ0FBQyxDQUFDLE1BQXlCLENBQUE7WUFDMUMsYUFBYSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsQ0FBQTtZQUM5QixNQUFNLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQTtZQUN0QixJQUFJLE9BQU8sRUFBRTtnQkFDWCxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUE7YUFDWDtRQUNILENBQUMsSUFFQSxRQUFRLENBQ0YsQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxrQkFBa0IsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VnbWVudENvbnRyb2xJdGVtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWdtZW50LWNvbnRyb2wvaXRlbS9TZWdtZW50Q29udHJvbEl0ZW0udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxFQUFFLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUdsRDs7Ozs7Ozs7O0dBU0c7QUFDSCxJQUFNLGtCQUFrQixHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ3pDLFVBQUMsRUFBaUUsRUFBRSxHQUFHO0lBQXBFLElBQUEsTUFBTSxZQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUEvRCxnRUFBaUUsQ0FBRjtJQUN4RCxJQUFBLEtBQUEsT0FBOEIsUUFBUSxDQUFVLE1BQU0sSUFBSSxLQUFLLENBQUMsSUFBQSxFQUEvRCxVQUFVLFFBQUEsRUFBRSxhQUFhLFFBQXNDLENBQUE7SUFDOUQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsU0FBUyxDQUFDO1FBQ1IsYUFBYSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsQ0FBQTtJQUNoQyxDQUFDLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFBO0lBRVosT0FBTyxDQUNMLHlDQUNFLElBQUksRUFBQyxRQUFRLEVBQ2IsR0FBRyxFQUFFLEdBQUcsRUFDUixFQUFFLEVBQUUsRUFBRSxFQUNOLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLFNBQVMsRUFBRSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyx3QkFBd0IsRUFBRSxTQUFTLEVBQUUsRUFBRSxXQUFXLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQyxFQUNwRyxPQUFPLEVBQUUsVUFBQyxDQUFtQjtZQUMzQixJQUFNLE1BQU0sR0FBRyxDQUFDLENBQUMsTUFBeUIsQ0FBQTtZQUMxQyxhQUFhLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQyxDQUFBO1lBQzlCLE1BQU0sQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFBO1lBQ3RCLElBQUksT0FBTyxFQUFFO2dCQUNYLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQTthQUNYO1FBQ0gsQ0FBQyxJQUNHLE1BQU0sR0FFVCxRQUFRLENBQ0YsQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxrQkFBa0IsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLGtCQUFrQixDQUFBO0FBQ2pFLGVBQWUsa0JBQWtCLENBQUEifQ==