@trilogy-ds/react 0.0.3-calendar → 0.0.3-storybook

package/lib/components/fab/Fab.native.js

@@ -5,17 +5,19 @@ import { Icon, IconColor, IconSize } from "../../components/icon";
 import { ComponentName } from "../../components/enumsComponentsName";
 import { Text } from "../../components/text";
 /**
- * Fab Native Component
- * @param children {string} label fab button
- * @param extended {boolean} extend fab button
- * @param iconName {IconName | IconNameValues} name of icon
+ * Fab Component - Floating Action Button
+ * @param children {ReactNode} Text or content of the fab button
+ * @param extended {boolean} Extended fab mode (shows text alongside icon)
+ * @param iconName {IconName | IconNameValues} Icon to display inside the button
  * @param accessibilityLabel {string} Accessibility label
- * @param onClick {ClickEvent} onClick Event
- * @param top {number} position top
- * @param left {number} position left
- * @param bottom {number} position bottom
- * @param right {number} position right
- * @param disabled {boolean} disabled button
+ * @param onClick {ClickEvent} Click event handler
+ * @param top {number} Top position offset
+ * @param bottom {number} Bottom position offset
+ * @param left {number} Left position offset
+ * @param right {number} Right position offset
+ * @param disabled {boolean} Disabled state
+ * @param testId {string} Test Id for Test Integration
+ * @param id {string} Custom id attribute
  */
 var Fab = React.forwardRef(function (_a, ref) {
     var children = _a.children, accessibilityLabel = _a.accessibilityLabel, iconName = _a.iconName, extended = _a.extended, onClick = _a.onClick, top = _a.top, bottom = _a.bottom, left = _a.left, right = _a.right, disabled = _a.disabled, testId = _a.testId;
@@ -61,4 +63,4 @@ var Fab = React.forwardRef(function (_a, ref) {
 });
 Fab.displayName = ComponentName.Fab;
 export default Fab;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmFiLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvZmFiL0ZhYi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFM0QsT0FBTyxFQUFFLFNBQVMsRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLGNBQWMsRUFBRSxlQUFlLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDbkcsT0FBTyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQVksUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDdkUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUV4Qzs7Ozs7Ozs7Ozs7O0dBWUc7QUFDSCxJQUFNLEdBQUcsR0FBSSxLQUFLLENBQUMsVUFBVSxDQUF5QixVQUFDLEVBWXpDLEVBQUUsR0FBRztRQVhKLFFBQVEsY0FBQSxFQUNSLGtCQUFrQix3QkFBQSxFQUNsQixRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixPQUFPLGFBQUEsRUFDUCxHQUFHLFNBQUEsRUFDSCxNQUFNLFlBQUEsRUFDTixJQUFJLFVBQUEsRUFDSixLQUFLLFdBQUEsRUFDTCxRQUFRLGNBQUEsRUFDUixNQUFNLFlBQUE7SUFFbkIsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixNQUFNLEVBQUU7WUFDTixlQUFlLEVBQUUsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUM7WUFDakQsY0FBYyxFQUFFLFFBQVE7WUFDeEIsVUFBVSxFQUFFLFFBQVE7WUFDcEIsWUFBWSxFQUFFLEVBQUU7WUFDaEIsU0FBUyxFQUFFLEVBQUU7WUFDYixNQUFNLEVBQUUs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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmFiLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvZmFiL0ZhYi5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFFM0QsT0FBTyxFQUFFLFNBQVMsRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLGNBQWMsRUFBRSxlQUFlLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDbkcsT0FBTyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQVksUUFBUSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDdkUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxJQUFJLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUV4Qzs7Ozs7Ozs7Ozs7Ozs7R0FjRztBQUNILElBQU0sR0FBRyxHQUFJLEtBQUssQ0FBQyxVQUFVLENBQXlCLFVBQUMsRUFZekMsRUFBRSxHQUFHO1FBWEosUUFBUSxjQUFBLEVBQ1Isa0JBQWtCLHdCQUFBLEVBQ2xCLFFBQVEsY0FBQSxFQUNSLFFBQVEsY0FBQSxFQUNSLE9BQU8sYUFBQSxFQUNQLEdBQUcsU0FBQSxFQUNILE1BQU0sWUFBQSxFQUNOLElBQUksVUFBQSxFQUNKLEtBQUssV0FBQSxFQUNMLFFBQVEsY0FBQSxFQUNSLE1BQU0sWUFBQTtJQUVuQixJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLE1BQU0sRUFBRTtZQUNOLGVBQWUsRUFBRSxhQUFhLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQztZQUNqRCxjQUFjLEVBQUUsUUFBUTtZQUN4QixVQUFVLEVBQUUsUUFBUTtZQUNwQixZQUFZLEVBQUUsRUFBRTtZQUNoQixTQUFTLEVBQUUsRUFBRTtZQUNiLE1BQU0sRUFB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

package/lib/components/fab/FabPropsDefaults.js

@@ -29,13 +29,17 @@ export default {
       "tri-arrow-left",
       "tri-arrow-right",
       "tri-arrow-up",
+      "tri-arrow-high",
       "tri-bell",
+      "tri-calendar",
       "tri-check-circle",
       "tri-check",
       "tri-exclamation-circle",
       "tri-eye-slash",
       "tri-eye",
+      "tri-file-attached",
       "tri-infos-circle",
+      "tri-micro",
       "tri-search",
       "tri-times",
       "tri-trash",
@@ -47,18 +51,24 @@ export default {
       "tri-picto-payment-mastercard",
       "tri-picto-payment-paypal",
       "tri-picto-payment-visa",
+      "tri-paperclip",
+      "tri-clock",
       "tri-alert",
       "tri-arrow-down",
       "tri-arrow-left",
       "tri-arrow-right",
       "tri-arrow-up",
+      "tri-arrow-high",
       "tri-bell",
+      "tri-calendar",
       "tri-check-circle",
       "tri-check",
       "tri-exclamation-circle",
       "tri-eye-slash",
       "tri-eye",
+      "tri-file-attached",
       "tri-infos-circle",
+      "tri-micro",
       "tri-search",
       "tri-times",
       "tri-trash",
@@ -69,7 +79,9 @@ export default {
       "tri-picto-payment-cb",
       "tri-picto-payment-mastercard",
       "tri-picto-payment-paypal",
-      "tri-picto-payment-visa"
+      "tri-picto-payment-visa",
+      "tri-paperclip",
+      "tri-clock"
     ]
   },
   "fixed": {

package/lib/components/flex-box/FlexBox.d.ts

@@ -2,16 +2,22 @@ import React from 'react';
 import { FlexBoxProps } from './FlexBoxProps';
 /**
  * @beta
- * FlexBox component
- * @param children {React.ReactNode} Box child
- * @param className {string} Additional css classes
- * @param id {string} Id attribute
- * @param gap {number | { mobile?: number; tablet?: number; desktop?: number }} Gap between children
- * @param direction { 'row' | 'column' | 'row-reverse' | 'column-reverse' | { mobile?: 'row' | 'column' | 'row-reverse' | 'column-reverse'; tablet?: 'row' | 'column' | 'row-reverse' | 'column-reverse'; desktop?: 'row' | 'column' | 'row-reverse' | 'column-reverse' } } Flex direction
- * @param align { 'start' | 'end' | 'center' | 'stretch' | 'baseline' | { mobile?: 'start' | 'end' | 'center' | 'stretch' | 'baseline'; tablet?: 'start' | 'end' | 'center' | 'stretch' | 'baseline'; desktop?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' } } Align items
- * @param justify { 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | { mobile?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'; tablet?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'; desktop?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' } } Justify content
- * @param scrollable {boolean} scrollable mode (overflow-x: auto)
+ * FlexBox Component - Flexible box layout container
+ * @param children {React.ReactNode} FlexBox child elements
+ * @param gap {number | { mobile?: number; tablet?: number; desktop?: number }} Gap between children (supports responsive values)
+ * @param direction { 'row' | 'column' | 'row-reverse' | 'column-reverse' | { mobile?: ...; tablet?: ...; desktop?: ... } } Flex direction (supports responsive values)
+ * @param align { 'start' | 'end' | 'center' | 'stretch' | 'baseline' | { mobile?: ...; tablet?: ...; desktop?: ... } } Align items (supports responsive values)
+ * @param justify { 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | { mobile?: ...; tablet?: ...; desktop?: ... } } Justify content (supports responsive values)
+ * @param scrollable {boolean} Enable horizontal scrolling (overflow-x: auto)
  * @param fullheight {boolean} Full height (height: 100%)
+ * @param testId {string} Test Id for Test Integration
+ * @param id {string} Custom id attribute
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param mobile {boolean} Apply mobile-specific layout class
+ * @param className {string} Additional CSS Classes
+ * @param wrap { boolean | { mobile?: boolean; tablet?: boolean; desktop?: boolean } } Wrap flex content (supports responsive values)
+ * - -------------------------- NATIVE PROPERTIES -------------------------------
+ * @param fullBleed {boolean} Extend to full screen width (ignores container padding)
  */
 declare const FlexBox: React.ForwardRefExoticComponent<FlexBoxProps & React.RefAttributes<HTMLDivElement>>;
 export default FlexBox;

package/lib/components/flex-box/FlexBox.js

@@ -3,7 +3,6 @@ import { ComponentName } from '../../components/enumsComponentsName';
 import { useTrilogyContext } from '../../context';
 import { hashClass } from '../../helpers/hashClassesHelpers';
 import { getAlignClassName } from '../../objects/facets/Alignable';
-import { getJustifyClassName } from '../../objects/facets/Justifiable';
 import { has, is } from '../../services';
 import clsx from 'clsx';
 import React from 'react';
@@ -15,38 +14,86 @@ var generateClassNames = function (_a) {
         return [getClassName(value)];
     }
     if (typeof value === 'object') {
-        var breakpoints = ['tablet', 'mobile', 'desktop'];
+        var breakpoints = ['mobile', 'tablet', 'desktop', 'widescreen', 'fullhd'];
         return breakpoints
             .filter(function (key) { return key in value && value[key] !== undefined; })
             .map(function (key) { return "".concat(getClassName(value[key]), "-").concat(key); });
     }
     return [];
 };
+var generateWrapClassNames = function (_a) {
+    var value = _a.value, getClassName = _a.getClassName;
+    if (!value)
+        return [];
+    if (typeof value === 'boolean') {
+        return value ? [getClassName(true)] : [];
+    }
+    if (typeof value === 'object') {
+        var breakpoints = ['mobile', 'tablet', 'desktop', 'widescreen', 'fullhd'];
+        return breakpoints
+            .filter(function (key) { return key in value && value[key] === true; })
+            .map(function (key) { return "".concat(getClassName(true), "-").concat(key); });
+    }
+    return [];
+};
+/**
+ * Internal Jusitify class name generator fix (to remove & update real function for V5)
+ * @param justifyContent
+ * @returns
+ */
+var getJustifyClassName = function (justifyContent) {
+    if (!justifyContent)
+        return 'flex-start';
+    switch (true) {
+        case ['CENTER', 'JUSTIFIED_CENTER'].includes(justifyContent):
+            return 'justified-center';
+        case ['START', 'JUSTIFIED_START'].includes(justifyContent):
+            return 'justified-start';
+        case ['END', 'JUSTIFIED_END'].includes(justifyContent):
+            return 'justified-end';
+        case ['SPACE_BETWEEN', 'SPACE_BETWEEN'].includes(justifyContent):
+            return 'spaced-between';
+        case justifyContent === 'SPACE_EVENLY':
+            return 'spaced-evenly';
+        case justifyContent === 'SPACE_AROUND':
+            return 'spaced-around';
+        default:
+            return 'justified-start';
+    }
+};
 /**
  * @beta
- * FlexBox component
- * @param children {React.ReactNode} Box child
- * @param className {string} Additional css classes
- * @param id {string} Id attribute
- * @param gap {number | { mobile?: number; tablet?: number; desktop?: number }} Gap between children
- * @param direction { 'row' | 'column' | 'row-reverse' | 'column-reverse' | { mobile?: 'row' | 'column' | 'row-reverse' | 'column-reverse'; tablet?: 'row' | 'column' | 'row-reverse' | 'column-reverse'; desktop?: 'row' | 'column' | 'row-reverse' | 'column-reverse' } } Flex direction
- * @param align { 'start' | 'end' | 'center' | 'stretch' | 'baseline' | { mobile?: 'start' | 'end' | 'center' | 'stretch' | 'baseline'; tablet?: 'start' | 'end' | 'center' | 'stretch' | 'baseline'; desktop?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' } } Align items
- * @param justify { 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | { mobile?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'; tablet?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'; desktop?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' } } Justify content
- * @param scrollable {boolean} scrollable mode (overflow-x: auto)
+ * FlexBox Component - Flexible box layout container
+ * @param children {React.ReactNode} FlexBox child elements
+ * @param gap {number | { mobile?: number; tablet?: number; desktop?: number }} Gap between children (supports responsive values)
+ * @param direction { 'row' | 'column' | 'row-reverse' | 'column-reverse' | { mobile?: ...; tablet?: ...; desktop?: ... } } Flex direction (supports responsive values)
+ * @param align { 'start' | 'end' | 'center' | 'stretch' | 'baseline' | { mobile?: ...; tablet?: ...; desktop?: ... } } Align items (supports responsive values)
+ * @param justify { 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | { mobile?: ...; tablet?: ...; desktop?: ... } } Justify content (supports responsive values)
+ * @param scrollable {boolean} Enable horizontal scrolling (overflow-x: auto)
  * @param fullheight {boolean} Full height (height: 100%)
+ * @param testId {string} Test Id for Test Integration
+ * @param id {string} Custom id attribute
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param mobile {boolean} Apply mobile-specific layout class
+ * @param className {string} Additional CSS Classes
+ * @param wrap { boolean | { mobile?: boolean; tablet?: boolean; desktop?: boolean } } Wrap flex content (supports responsive values)
+ * - -------------------------- NATIVE PROPERTIES -------------------------------
+ * @param fullBleed {boolean} Extend to full screen width (ignores container padding)
  */
 var FlexBox = React.forwardRef(function (_a, ref) {
-    var className = _a.className, id = _a.id, gap = _a.gap, direction = _a.direction, align = _a.align, justify = _a.justify, scrollable = _a.scrollable, fullheight = _a.fullheight, others = __rest(_a, ["className", "id", "gap", "direction", "align", "justify", "scrollable", "fullheight"]);
+    var className = _a.className, id = _a.id, gap = _a.gap, direction = _a.direction, align = _a.align, justify = _a.justify, wrap = _a.wrap, scrollable = _a.scrollable, fullheight = _a.fullheight, mobile = _a.mobile, testId = _a.testId, others = __rest(_a, ["className", "id", "gap", "direction", "align", "justify", "wrap", "scrollable", "fullheight", "mobile", "testId"]);
     var styled = useTrilogyContext().styled;
-    var classes = hashClass(styled, clsx(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([
+    var gapClasses = gap === 0 ? [is('gapless')] : generateClassNames({ value: gap, getClassName: function (val) { return has("gap-".concat(val)); } });
+    var classes = hashClass(styled, clsx(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([
         'flex-box'
-    ], __read(generateClassNames({ value: direction, getClassName: function (val) { return is("direction-".concat(val)); } })), false), __read(generateClassNames({ value: align, getClassName: function (val) { return is(getAlignClassName(val)); } })), false), __read(generateClassNames({ value: justify, getClassName: function (val) { return is(getJustifyClassName(val)); } })), false), __read(generateClassNames({ value: gap, getClassName: function (val) { return has("gap-".concat(val)); } })), false), [
+    ], __read(generateClassNames({ value: direction, getClassName: function (val) { return is("direction-".concat(val)); } })), false), __read(generateClassNames({ value: align, getClassName: function (val) { return is(getAlignClassName(val)); } })), false), __read(generateClassNames({ value: justify, getClassName: function (val) { return is(getJustifyClassName(val)); } })), false), __read(gapClasses), false), __read(generateWrapClassNames({ value: wrap, getClassName: function (val) { return is("wrap"); } })), false), [
         scrollable && is('scrollable'),
         fullheight && is('fullheight'),
+        mobile && is('mobile'),
         className,
     ], false)));
-    return React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others));
+    return React.createElement("div", __assign({ ref: ref, id: id, className: classes, "data-testid": testId }, others));
 });
 FlexBox.displayName = ComponentName.FlexBox;
 export default FlexBox;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEJveC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvZmxleC1ib3gvRmxleEJveC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBUyxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQ3JFLE9BQU8sRUFBRSxtQkFBbUIsRUFBVyxNQUFNLDhCQUE4QixDQUFBO0FBQzNFLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3BDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFvQnpCLElBQU0sa0JBQWtCLEdBQUcsVUFBQyxFQUFpRDtRQUEvQyxLQUFLLFdBQUEsRUFBRSxZQUFZLGtCQUFBO0lBQy9DLElBQUksQ0FBQyxLQUFLO1FBQUUsT0FBTyxFQUFFLENBQUE7SUFFckIsSUFBSSxPQUFPLEtBQUssS0FBSyxRQUFRLElBQUksT0FBTyxLQUFLLEtBQUssUUFBUSxFQUFFO1FBQzFELE9BQU8sQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQTtLQUM3QjtJQUVELElBQUksT0FBTyxLQUFLLEtBQUssUUFBUSxFQUFFO1FBQzdCLElBQU0sV0FBVyxHQUFHLENBQUMsUUFBUSxFQUFFLFFBQVEsRUFBRSxTQUFTLENBQVUsQ0FBQTtRQUM1RCxPQUFPLFdBQVc7YUFDZixNQUFNLENBQUMsVUFBQyxHQUFHLElBQUssT0FBQSxHQUFHLElBQUksS0FBSyxJQUFLLEtBQTZDLENBQUMsR0FBRyxDQUFDLEtBQUssU0FBUyxFQUFqRixDQUFpRixDQUFDO2FBQ2xHLEdBQUcsQ0FBQyxVQUFDLEdBQUcsSUFBSyxPQUFBLFVBQUcsWUFBWSxDQUFFLEtBQTZDLENBQUMsR0FBRyxDQUFDLENBQUMsY0FBSSxHQUFHLENBQUUsRUFBN0UsQ0FBNkUsQ0FBQyxDQUFBO0tBQy9GO0lBRUQsT0FBTyxFQUFFLENBQUE7QUFDWCxDQUFDLENBQUE7QUFFRDs7Ozs7Ozs7Ozs7O0dBWUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM5QixVQUFDLEVBQW9GLEVBQUUsR0FBRztJQUF2RixJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLEdBQUcsU0FBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLEtBQUssV0FBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUssTUFBTSxjQUFsRix1RkFBb0YsQ0FBRjtJQUN6RSxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJO1FBQ0YsVUFBVTtjQUNQLGtCQUFrQixDQUFDLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsVUFBQyxHQUFHLElBQUssT0FBQSxFQUFFLENBQUMsb0JBQWEsR0FBRyxDQUFFLENBQUMsRUFBdEIsQ0FBc0IsRUFBRSxDQUFDLGtCQUN2RixrQkFBa0IsQ0FBQyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsWUFBWSxFQUFFLFVBQUMsR0FBRyxJQUFLLE9BQUEsRUFBRSxDQUFDLGlCQUFpQixDQUFDLEdBQWEsQ0FBQyxDQUFDLEVBQXBDLENBQW9DLEVBQUUsQ0FBQyxrQkFDakcsa0JBQWtCLENBQUMsRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLFlBQVksRUFBRSxVQUFDLEdBQUcsSUFBSyxPQUFBLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQyxHQUFhLENBQUMsQ0FBQyxFQUF0QyxDQUFzQyxFQUFFLENBQUMsa0JBQ3JHLGtCQUFrQixDQUFDLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxZQUFZLEVBQUUsVUFBQyxHQUFHLElBQUssT0FBQSxHQUFHLENBQUMsY0FBTyxHQUFHLENBQUUsQ0FBQyxFQUFqQixDQUFpQixFQUFFLENBQUM7UUFDL0UsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUM7UUFDOUIsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUM7UUFDOUIsU0FBUztjQUNULENBQ0gsQ0FBQTtJQUVELE9BQU8sc0NBQUssR0FBRyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTSxFQUFJLENBQUE7QUFDbEUsQ0FBQyxDQUNGLENBQUE7QUFFRCxPQUFPLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxPQUFPLENBQUE7QUFDM0MsZUFBZSxPQUFPLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEJveC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvZmxleC1ib3gvRmxleEJveC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBUyxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBRXJFLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3BDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUF5QnpCLElBQU0sa0JBQWtCLEdBQUcsVUFBQyxFQUFpRDtRQUEvQyxLQUFLLFdBQUEsRUFBRSxZQUFZLGtCQUFBO0lBQy9DLElBQUksQ0FBQyxLQUFLO1FBQUUsT0FBTyxFQUFFLENBQUE7SUFFckIsSUFBSSxPQUFPLEtBQUssS0FBSyxRQUFRLElBQUksT0FBTyxLQUFLLEtBQUssUUFBUSxFQUFFO1FBQzFELE9BQU8sQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQTtLQUM3QjtJQUVELElBQUksT0FBTyxLQUFLLEtBQUssUUFBUSxFQUFFO1FBQzdCLElBQU0sV0FBVyxHQUFHLENBQUMsUUFBUSxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFFBQVEsQ0FBVSxDQUFBO1FBQ3BGLE9BQU8sV0FBVzthQUNmLE1BQU0sQ0FBQyxVQUFDLEdBQUcsSUFBSyxPQUFBLEdBQUcsSUFBSSxLQUFLLElBQUssS0FBNkMsQ0FBQyxHQUFHLENBQUMsS0FBSyxTQUFTLEVBQWpGLENBQWlGLENBQUM7YUFDbEcsR0FBRyxDQUFDLFVBQUMsR0FBRyxJQUFL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

package/lib/components/flex-box/FlexBox.native.d.ts

@@ -1,5 +1,19 @@
 import React from 'react';
 import { View } from 'react-native';
 import { FlexBoxProps } from './FlexBoxProps';
+/**
+ * @beta
+ * FlexBox Component - Flexible box layout container
+ * @param children {React.ReactNode} FlexBox child elements
+ * @param gap {number | { mobile?: number; tablet?: number; desktop?: number }} Gap between children (supports responsive values)
+ * @param direction { 'row' | 'column' | 'row-reverse' | 'column-reverse' | { mobile?: ...; tablet?: ...; desktop?: ... } } Flex direction (supports responsive values)
+ * @param align { 'start' | 'end' | 'center' | 'stretch' | 'baseline' | { mobile?: ...; tablet?: ...; desktop?: ... } } Align items (supports responsive values)
+ * @param justify { 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | { mobile?: ...; tablet?: ...; desktop?: ... } } Justify content (supports responsive values)
+ * @param scrollable {boolean} Enable horizontal scrolling (overflow-x: auto)
+ * @param fullheight {boolean} Full height (height: 100%)
+ * @param testId {string} Test Id for Test Integration
+ * @param id {string} Custom id attribute
+ * @param fullBleed {boolean} Extend to full screen width (ignores container padding)
+ */
 declare const FlexBox: React.ForwardRefExoticComponent<FlexBoxProps & React.RefAttributes<View>>;
 export default FlexBox;

package/lib/components/flex-box/FlexBox.native.js

@@ -6,8 +6,22 @@ import React, { useState } from 'react';
 import { Dimensions, ScrollView, StyleSheet, View } from 'react-native';
 import { ColumnsGapValue } from '../columns';
 import { FlexBoxContext } from './context';
+/**
+ * @beta
+ * FlexBox Component - Flexible box layout container
+ * @param children {React.ReactNode} FlexBox child elements
+ * @param gap {number | { mobile?: number; tablet?: number; desktop?: number }} Gap between children (supports responsive values)
+ * @param direction { 'row' | 'column' | 'row-reverse' | 'column-reverse' | { mobile?: ...; tablet?: ...; desktop?: ... } } Flex direction (supports responsive values)
+ * @param align { 'start' | 'end' | 'center' | 'stretch' | 'baseline' | { mobile?: ...; tablet?: ...; desktop?: ... } } Align items (supports responsive values)
+ * @param justify { 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' | { mobile?: ...; tablet?: ...; desktop?: ... } } Justify content (supports responsive values)
+ * @param scrollable {boolean} Enable horizontal scrolling (overflow-x: auto)
+ * @param fullheight {boolean} Full height (height: 100%)
+ * @param testId {string} Test Id for Test Integration
+ * @param id {string} Custom id attribute
+ * @param fullBleed {boolean} Extend to full screen width (ignores container padding)
+ */
 var FlexBox = React.forwardRef(function (_a, ref) {
-    var id = _a.id, gap = _a.gap, _b = _a.direction, direction = _b === void 0 ? 'row' : _b, align = _a.align, justify = _a.justify, scrollable = _a.scrollable, fullBleed = _a.fullBleed, children = _a.children, fullheight = _a.fullheight, others = __rest(_a, ["id", "gap", "direction", "align", "justify", "scrollable", "fullBleed", "children", "fullheight"]);
+    var id = _a.id, gap = _a.gap, _b = _a.direction, direction = _b === void 0 ? 'row' : _b, align = _a.align, justify = _a.justify, scrollable = _a.scrollable, fullBleed = _a.fullBleed, children = _a.children, fullheight = _a.fullheight, testId = _a.testId, others = __rest(_a, ["id", "gap", "direction", "align", "justify", "scrollable", "fullBleed", "children", "fullheight", "testId"]);
     var _c = __read(useState(0), 2), width = _c[0], setWidth = _c[1];
     var _d = __read(useState(0), 2), enlarge = _d[0], setEnlarge = _d[1];
     var isValueDirection = typeof direction === 'string';
@@ -37,6 +51,8 @@ var FlexBox = React.forwardRef(function (_a, ref) {
         columnsScrollable: {
             paddingHorizontal: enlarge,
             gap: realGap,
+            alignItems: !isValueAlign ? getAlignStyle(align === null || align === void 0 ? void 0 : align.mobile) : getAlignStyle(align),
+            justifyContent: !isValueJustify ? getJustifyStyle(justify === null || justify === void 0 ? void 0 : justify.mobile) : getJustifyStyle(justify),
         },
     });
     return (React.createElement(FlexBoxContext.Provider, { value: {
@@ -45,12 +61,12 @@ var FlexBox = React.forwardRef(function (_a, ref) {
             scrollable: scrollable || false,
             childrenLength: React.Children.count(children),
         } },
-        !scrollable && (React.createElement(View, __assign({ id: id, ref: ref, onLayout: onLayoutHandler, style: [styles.columns] }, others), children)),
-        scrollable && (React.createElement(View, { id: id, onLayout: onLayoutHandler, style: {
+        !scrollable && (React.createElement(View, __assign({ testID: testId, id: id, ref: ref, onLayout: onLayoutHandler, style: [styles.columns] }, others), children)),
+        scrollable && (React.createElement(View, { testID: testId, id: id, onLayout: onLayoutHandler, style: {
                 marginHorizontal: -enlarge,
             } },
             React.createElement(ScrollView, { horizontal: true, contentContainerStyle: styles.columnsScrollable, showsHorizontalScrollIndicator: false }, children)))));
 });
 FlexBox.displayName = ComponentName.FlexBox;
 export default FlexBox;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEJveC5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ZsZXgtYm94L0ZsZXhCb3gubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUMxRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDOUQsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdkMsT0FBTyxFQUFFLFVBQVUsRUFBcUIsVUFBVSxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDMUYsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUU1QyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTFDLElBQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzlCLFVBQUMsRUFBc0csRUFBRSxHQUFHO0lBQXpHLElBQUEsRUFBRSxRQUFBLEVBQUUsR0FBRyxTQUFBLEVBQUUsaUJBQWlCLEVBQWpCLFNBQVMsbUJBQUcsS0FBSyxLQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBSyxNQUFNLGNBQXBHLG1HQUFzRyxDQUFGO0lBQzdGLElBQUEsS0FBQSxPQUFvQixRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUEsRUFBOUIsS0FBSyxRQUFBLEVBQUUsUUFBUSxRQUFlLENBQUE7SUFDL0IsSUFBQSxLQUFBLE9BQXdCLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBQSxFQUFsQyxPQUFPLFFBQUEsRUFBRSxVQUFVLFFBQWUsQ0FBQTtJ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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEJveC5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ZsZXgtYm94L0ZsZXhCb3gubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUMxRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDOUQsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdkMsT0FBTyxFQUFFLFVBQVUsRUFBcUIsVUFBVSxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDMUYsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUU1QyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTFDOzs7Ozs7Ozs7Ozs7O0dBYUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM5QixVQUFDLEVBQThHLEVBQUUsR0FBRztJQUFqSCxJQUFBLEVBQUUsUUFBQSxFQUFFLEdBQUcsU0FBQSxFQUFFLGlCQUFpQixFQUFqQixTQUFTLG1CQUFHLEtBQUssS0FBQSxFQUFFLEtBQUssV0FBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUssTUFBTSxjQUE1Ryw2R0FBOEcsQ0FBRjtJQUNyRyxJQUFBLEtBQUEsT0FBb0IsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFBLEVBQTlCLEtBQUssUUFBQSxFQUFFLFFBQVEsUUFBZSxDQUFBO0lBQy9CLElBQUEsS0FBQSxPQUF3QixRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUEs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

package/lib/components/flex-box/FlexBoxProps.d.ts

@@ -5,24 +5,30 @@ import { Justify } from '../../objects/facets/Justifiable';
 import { View } from 'react-native';
 import { CommonProps } from '../../objects/facets/CommonProps';
 import { GapSize } from '../columns';
+import { Dev } from '../../objects/facets/Dev';
 interface ResponsiveValue<T> {
     mobile?: T;
     tablet?: T;
     desktop?: T;
+    widescreen?: T;
+    fullhd?: T;
 }
 export type FlexBoxSize = ResponsiveValue<GapSize>;
 export type Direction = ResponsiveValue<DirectionEnum | DirectionEnumValues>;
 export type AlignProps = ResponsiveValue<Align>;
 export type JustifyProps = ResponsiveValue<Justify>;
-export interface FlexBoxProps extends CommonProps {
+export type WrapProps = ResponsiveValue<boolean>;
+export interface FlexBoxProps extends CommonProps, Dev {
     children?: React.ReactNode;
     gap?: FlexBoxSize | GapSize;
     direction?: Direction | DirectionEnum | DirectionEnumValues;
     align?: AlignProps | Align;
     justify?: JustifyProps | Justify;
+    wrap?: WrapProps | boolean;
     scrollable?: boolean;
     fullBleed?: boolean;
     fullheight?: boolean;
+    mobile?: boolean;
 }
 export type FlexBoxRef = HTMLDivElement;
 export type FlexBoxNativeRef = View;

package/lib/components/flex-box/FlexBoxPropsDefaults.js

@@ -36,12 +36,12 @@ export default {
     "values": [
       "undefined",
       "row",
-      "column",
       "Direction",
       "row",
       "column",
       "row-reverse",
       "column-reverse",
+      "column",
       "row-reverse",
       "column-reverse"
     ]
@@ -50,24 +50,33 @@ export default {
     "type": "enum",
     "values": [
       "undefined",
-      "AlignProps",
       "CENTER",
       "START",
       "END",
-      "STRETCH"
+      "STRETCH",
+      "AlignProps"
     ]
   },
   "justify": {
     "type": "enum",
     "values": [
       "undefined",
-      "JustifyProps",
       "CENTER",
       "START",
       "END",
       "SPACE_BETWEEN",
       "SPACE_AROUND",
-      "SPACE_EVENLY"
+      "SPACE_EVENLY",
+      "JustifyProps"
+    ]
+  },
+  "wrap": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true",
+      "WrapProps"
     ]
   },
   "scrollable": {
@@ -94,6 +103,14 @@ export default {
       "true"
     ]
   },
+  "mobile": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "id": {
     "type": "string",
     "values": [
@@ -107,5 +124,12 @@ export default {
       "undefined",
       "string"
     ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
   }
 };

package/lib/components/flex-box/ResponsiveValueDefaults.js

@@ -19,5 +19,19 @@ export default {
       "undefined",
       "T"
     ]
+  },
+  "widescreen": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "T"
+    ]
+  },
+  "fullhd": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "T"
+    ]
   }
 };

package/lib/components/flex-box/flex-item/FlexItem.d.ts

@@ -3,26 +3,13 @@ import { FlexItemProps } from '../../../components/flex-box/flex-item/FlexItemPr
 /**
  * FlexItem Component - FlexBox Child
  * @param size {FlexItemSize} Size 1-12
- * @param verticalCentered {boolean} Vertical center item
- * @param centered {boolean} center item
  * @param children {React.ReactNode}
- * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param testId {string} Test Id for Test Integration
+ * @param id {string} Custom id attribute
  * @param narrow {boolean} Narrow item
+ * @param verticalAlign { 'start' | 'end' | 'center' | 'stretch' | 'baseline' } Vertical alignment of the item
+ * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additional CSS Classes
- * @param mobileSize {FlexItemSize} Apply => is-size-mobile
- * @param tabletSize {FlexItemSize} Apply => is-size-tablet
- * @param touchSize {FlexItemSize} Apply => is-size-touch
- * @param desktopSize {FlexItemSize} Apply => is-size-desktop
- * @param widescreenSize {FlexItemSize} Apply => is-size-widescreen
- * @param fullhdSize {FlexItemSize} Apply => is-size-fullhd
- * @param offset {FlexItemSize} Apply => is-offset
- * @param mobileOffset {FlexItemSize} Apply => is-offset-mobile
- * @param tabletOffset {FlexItemSize} Apply => is-offset-tablet
- * @param touchOffset {FlexItemSize} Apply => is-offset-touch
- * @param desktopOffset {FlexItemSize} Apply => is-offset-desktop
- * @param widescreenOffset {FlexItemSize} Apply => is-offset-widescreen
- * @param fullhdOffset {FlexItemSize} Apply => is-offset-fullhd
- * @param align { Alignable | AlignableValues} align content
  */
 declare const FlexItem: React.ForwardRefExoticComponent<FlexItemProps & React.RefAttributes<HTMLDivElement>>;
 export default FlexItem;

package/lib/components/flex-box/flex-item/FlexItem.js

@@ -9,34 +9,21 @@ import React from 'react';
 /**
  * FlexItem Component - FlexBox Child
  * @param size {FlexItemSize} Size 1-12
- * @param verticalCentered {boolean} Vertical center item
- * @param centered {boolean} center item
  * @param children {React.ReactNode}
- * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param testId {string} Test Id for Test Integration
+ * @param id {string} Custom id attribute
  * @param narrow {boolean} Narrow item
+ * @param verticalAlign { 'start' | 'end' | 'center' | 'stretch' | 'baseline' } Vertical alignment of the item
+ * - -------------------------- WEB PROPERTIES -------------------------------
  * @param className {string} Additional CSS Classes
- * @param mobileSize {FlexItemSize} Apply => is-size-mobile
- * @param tabletSize {FlexItemSize} Apply => is-size-tablet
- * @param touchSize {FlexItemSize} Apply => is-size-touch
- * @param desktopSize {FlexItemSize} Apply => is-size-desktop
- * @param widescreenSize {FlexItemSize} Apply => is-size-widescreen
- * @param fullhdSize {FlexItemSize} Apply => is-size-fullhd
- * @param offset {FlexItemSize} Apply => is-offset
- * @param mobileOffset {FlexItemSize} Apply => is-offset-mobile
- * @param tabletOffset {FlexItemSize} Apply => is-offset-tablet
- * @param touchOffset {FlexItemSize} Apply => is-offset-touch
- * @param desktopOffset {FlexItemSize} Apply => is-offset-desktop
- * @param widescreenOffset {FlexItemSize} Apply => is-offset-widescreen
- * @param fullhdOffset {FlexItemSize} Apply => is-offset-fullhd
- * @param align { Alignable | AlignableValues} align content
  */
 var FlexItem = React.forwardRef(function (_a, ref) {
-    var className = _a.className, id = _a.id, size = _a.size, narrow = _a.narrow, verticalAlign = _a.verticalAlign, others = __rest(_a, ["className", "id", "size", "narrow", "verticalAlign"]);
+    var className = _a.className, id = _a.id, size = _a.size, narrow = _a.narrow, verticalAlign = _a.verticalAlign, testId = _a.testId, others = __rest(_a, ["className", "id", "size", "narrow", "verticalAlign", "testId"]);
     var styled = useTrilogyContext().styled;
     var isNumber = typeof size === 'number';
-    var classes = hashClass(styled, clsx('flex-item', size && isNumber && is("".concat(size)), size && !isNumber && (size === null || size === void 0 ? void 0 : size.desktop) && is("".concat(size.desktop, "-desktop")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.mobile) && is("".concat(size.mobile, "-mobile")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.tablet) && is("".concat(size.tablet, "-tablet")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.touch) && is("".concat(size.touch, "-touch")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.wideScreen) && is("".concat(size.wideScreen, "-widescreen")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.fullHd) && is("".concat(size.fullHd, "-fullhd")), narrow && is('narrow'), verticalAlign && is(getAlignClassName(verticalAlign)), className));
-    return React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others));
+    var classes = hashClass(styled, clsx('flex-item', size && isNumber && is("".concat(size)), size && !isNumber && (size === null || size === void 0 ? void 0 : size.desktop) && is("".concat(size.desktop, "-desktop")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.mobile) && is("".concat(size.mobile, "-mobile")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.tablet) && is("".concat(size.tablet, "-tablet")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.touch) && is("".concat(size.touch, "-touch")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.widescreen) && is("".concat(size.widescreen, "-widescreen")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.fullhd) && is("".concat(size.fullhd, "-fullhd")), narrow && is('narrow'), verticalAlign && is(getAlignClassName(verticalAlign)), className));
+    return React.createElement("div", __assign({ ref: ref, id: id, className: classes, "data-testid": testId }, others));
 });
 FlexItem.displayName = ComponentName.FlexItem;
 export default FlexItem;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEl0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2ZsZXgtYm94L2ZsZXgtaXRlbS9GbGV4SXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQzlELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBR3pCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXVCRztBQUVILElBQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQy9CLFVBQUMsRUFBeUQsRUFBRSxHQUFHO0lBQTVELElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsSUFBSSxVQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFLLE1BQU0sY0FBdkQsc0RBQXlELENBQUY7SUFDOUMsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxRQUFRLEdBQUcsT0FBTyxJQUFJLEtBQUssUUFBUSxDQUFBO0lBQ3pDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixXQUFXLEVBQ1gsSUFBSSxJQUFJLFFBQVEsSUFBSSxFQUFFLENBQUMsVUFBRyxJQUFJLENBQUUsQ0FBQyxFQUNqQyxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLE9BQU8sQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxPQUFPLGFBQVUsQ0FBQyxFQUNuRSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLE1BQU0sQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxNQUFNLFlBQVMsQ0FBQyxFQUNoRSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLE1BQU0sQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxNQUFNLFlBQVMsQ0FBQyxFQUNoRSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLEtBQUssQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxLQUFLLFdBQVEsQ0FBQyxFQUM3RCxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLFVBQVUsQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxVQUFVLGdCQUFhLENBQUMsRUFDNUUsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFJLElBQUksYUFBSixJQUFJLHVCQUFKLElBQUksQ0FBRSxNQUFNLENBQUEsSUFBSSxFQUFFLENBQUMsVUFBRyxJQUFJLENBQUMsTUFBTSxZQUFTLENBQUMsRUFDaEUsTUFBTSxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFDdEIsYUFBYSxJQUFJLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsQ0FBQyxFQUNyRCxTQUFTLENBQ1YsQ0FDRixDQUFBO0lBRUQsT0FBTyxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNLEVBQUksQ0FBQTtBQUNsRSxDQUFDLENBQ0YsQ0FBQTtBQUNELFFBQVEsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFFBQVEsQ0FBQTtBQUM3QyxlQUFlLFFBQVEsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEl0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2ZsZXgtYm94L2ZsZXgtaXRlbS9GbGV4SXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQzlELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBR3pCOzs7Ozs7Ozs7O0dBVUc7QUFDSCxJQUFNLFFBQVEsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUMvQixVQUFDLEVBQWlFLEVBQUUsR0FBRztJQUFwRSxJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLElBQUksVUFBQSxFQUFFLE1BQU0sWUFBQSxFQUFFLGFBQWEsbUJBQUEsRUFBRSxNQUFNLFlBQUEsRUFBSyxNQUFNLGNBQS9ELGdFQUFpRSxDQUFGO0lBQ3RELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sUUFBUSxHQUFHLE9BQU8sSUFBSSxLQUFLLFFBQVEsQ0FBQTtJQUN6QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJLENBQ0YsV0FBVyxFQUNYLElBQUksSUFBSSxRQUFRLElBQUksRUFBRSxDQUFDLFVBQUcsSUFBSSxDQUFFLENBQUMsRUFDakMsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFJLElBQUksYUFBSixJQUFJLHVCQUFKLElBQUksQ0FBRSxPQUFPLENBQUEsSUFBSSxFQUFFLENBQUMsVUFBRyxJQUFJLENBQUMsT0FBTyxhQUFVLENBQUMsRUFDbkUsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFJLElBQUksYUFBSixJQUFJLHVCQUFKLElBQUksQ0FBRSxNQUFNLENBQUEsSUFBSSxFQUFFLENBQUMsVUFBRyxJQUFJLENBQUMsTUFBTSxZQUFTLENBQUMsRUFDaEUsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFJLElBQUksYUFBSixJQUFJLHVCQUFKLElBQUksQ0FBRSxNQUFNLENBQUEsSUFBSSxFQUFFLENBQUMsVUFBRyxJQUFJLENBQUMsTUFBTSxZQUFTLENBQUMsRUFDaEUsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFJLElBQUksYUFBSixJQUFJLHVCQUFKLElBQUksQ0FBRSxLQUFLLENBQUEsSUFBSSxFQUFFLENBQUMsVUFBRyxJQUFJLENBQUMsS0FBSyxXQUFRLENBQUMsRUFDN0QsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFJLElBQUksYUFBSixJQUFJLHVCQUFKLElBQUksQ0FBRSxVQUFVLENBQUEsSUFBSSxFQUFFLENBQUMsVUFBRyxJQUFJLENBQUMsVUFBVSxnQkFBYSxDQUFDLEVBQzVFLElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSSxJQUFJLGFBQUosSUFBSSx1QkFBSixJQUFJLENBQUUsTUFBTSxDQUFBLElBQUksRUFBRSxDQUFDLFVBQUcsSUFBSSxDQUFDLE1BQU0sWUFBUyxDQUFDLEVBQ2hFLE1BQU0sSUFBSSxFQUFFLENBQUMsUUFBUSxDQUFDLEVBQ3RCLGFBQWEsSUFBSSxFQUFFLENBQUMsaUJBQWlCLENBQUMsYUFBYSxDQUFDLENBQUMsRUFDckQsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sc0NBQUssR0FBRyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLGlCQUFlLE1BQU0sSUFBTSxNQUFNLEVBQUksQ0FBQTtBQUN2RixDQUFDLENBQ0YsQ0FBQTtBQUNELFFBQVEsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFFBQVEsQ0FBQTtBQUM3QyxlQUFlLFFBQVEsQ0FBQSJ9

package/lib/components/flex-box/flex-item/FlexItem.native.d.ts

@@ -4,26 +4,11 @@ import { View } from 'react-native';
 /**
  * FlexItem Component - FlexBox Child
  * @param size {FlexItemSize} Size 1-12
- * @param verticalCentered {boolean} Vertical center item
- * @param centered {boolean} center item
  * @param children {React.ReactNode}
- * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param testId {string} Test Id for Test Integration
+ * @param id {string} Custom id attribute
  * @param narrow {boolean} Narrow item
- * @param className {string} Additional CSS Classes
- * @param mobileSize {FlexItemSize} Apply => is-size-mobile
- * @param tabletSize {FlexItemSize} Apply => is-size-tablet
- * @param touchSize {FlexItemSize} Apply => is-size-touch
- * @param desktopSize {FlexItemSize} Apply => is-size-desktop
- * @param widescreenSize {FlexItemSize} Apply => is-size-widescreen
- * @param fullhdSize {FlexItemSize} Apply => is-size-fullhd
- * @param offset {FlexItemSize} Apply => is-offset
- * @param mobileOffset {FlexItemSize} Apply => is-offset-mobile
- * @param tabletOffset {FlexItemSize} Apply => is-offset-tablet
- * @param touchOffset {FlexItemSize} Apply => is-offset-touch
- * @param desktopOffset {FlexItemSize} Apply => is-offset-desktop
- * @param widescreenOffset {FlexItemSize} Apply => is-offset-widescreen
- * @param fullhdOffset {FlexItemSize} Apply => is-offset-fullhd
- * @param align { Alignable | AlignableValues} align content
+ * @param verticalAlign { 'start' | 'end' | 'center' | 'stretch' | 'baseline' } Vertical alignment of the item
  */
 declare const FlexItem: React.ForwardRefExoticComponent<FlexItemProps & React.RefAttributes<View>>;
 export default FlexItem;