@trilogy-ds/react 4.8.2-beta-2 → 4.9.0-beta-build-1

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var enumsComponentsName_1 = require("../../components/enumsComponentsName");
+var context_1 = require("../../context");
+var hashClassesHelpers_1 = require("../../helpers/hashClassesHelpers");
+var Alignable_1 = require("../../objects/facets/Alignable");
+var Justifiable_1 = require("../../objects/facets/Justifiable");
+var services_1 = require("../../services");
+var clsx_1 = tslib_1.__importDefault(require("clsx"));
+var react_1 = tslib_1.__importDefault(require("react"));
+/**
+ * @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' } Align items
+ * @param justify { 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' } Justify content
+ * @param scrollable {boolean} scrollable mode (overflow-x: auto)
+ * @param fullheight {boolean} Full height (height: 100%)
+ */
+var FlexBox = react_1.default.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 = tslib_1.__rest(_a, ["className", "id", "gap", "direction", "align", "justify", "scrollable", "fullheight"]);
+    var styled = (0, context_1.useTrilogyContext)().styled;
+    var isNumber = typeof gap === 'number';
+    var isValueDirection = typeof direction === 'string';
+    var classes = (0, hashClassesHelpers_1.hashClass)(styled, (0, clsx_1.default)('flex-box', isValueDirection && direction && (0, services_1.is)("direction-".concat(direction)), !isValueDirection && (direction === null || direction === void 0 ? void 0 : direction.desktop) && (0, services_1.is)("direction-".concat(direction.desktop, "-desktop")), !isValueDirection && (direction === null || direction === void 0 ? void 0 : direction.mobile) && (0, services_1.is)("direction-".concat(direction.mobile, "-mobile")), !isValueDirection && (direction === null || direction === void 0 ? void 0 : direction.tablet) && (0, services_1.is)("direction-".concat(direction.tablet, "-tablet")), align && (0, services_1.is)((0, Alignable_1.getAlignClassName)(align)), justify && (0, services_1.is)((0, Justifiable_1.getJustifyClassName)(justify)), scrollable && (0, services_1.is)('scrollable'), !isNumber && (gap === null || gap === void 0 ? void 0 : gap.mobile) && (0, services_1.has)("gap-mobile-".concat(gap.mobile)), !isNumber && (gap === null || gap === void 0 ? void 0 : gap.tablet) && (0, services_1.has)("gap-tablet-".concat(gap.tablet)), !isNumber && (gap === null || gap === void 0 ? void 0 : gap.desktop) && (0, services_1.has)("gap-desktop-".concat(gap.desktop)), isNumber && (0, services_1.has)("gap-".concat(gap)), fullheight && (0, services_1.is)('fullheight'), className));
+    return react_1.default.createElement("div", tslib_1.__assign({ ref: ref, id: id, className: classes }, others));
+});
+FlexBox.displayName = enumsComponentsName_1.ComponentName.FlexBox;
+exports.default = FlexBox;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEJveC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvZmxleC1ib3gvRmxleEJveC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBQUEsd0VBQWdFO0FBQ2hFLHFDQUE2QztBQUM3QyxtRUFBd0Q7QUFDeEQsd0RBQThEO0FBQzlELDREQUFrRTtBQUNsRSx1Q0FBb0M7QUFDcEMsc0RBQXVCO0FBQ3ZCLHdEQUF5QjtBQUd6Qjs7Ozs7Ozs7Ozs7O0dBWUc7QUFDSCxJQUFNLE9BQU8sR0FBRyxlQUFLLENBQUMsVUFBVSxDQUM5QixVQUFDLEVBQW9GLEVBQUUsR0FBRztJQUF2RixJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLEdBQUcsU0FBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLEtBQUssV0FBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUssTUFBTSxzQkFBbEYsdUZBQW9GLENBQUY7SUFDekUsSUFBQSxNQUFNLEdBQUssSUFBQSwyQkFBaUIsR0FBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFNLFFBQVEsR0FBRyxPQUFPLEdBQUcsS0FBSyxRQUFRLENBQUE7SUFDeEMsSUFBTSxnQkFBZ0IsR0FBRyxPQUFPLFNBQVMsS0FBSyxRQUFRLENBQUE7SUFDdEQsSUFBTSxPQUFPLEdBQUcsSUFBQSw4QkFBUyxFQUN2QixNQUFNLEVBQ04sSUFBQSxjQUFJLEVBQ0YsVUFBVSxFQUNWLGdCQUFnQixJQUFJLFNBQVMsSUFBSSxJQUFBLGFBQUUsRUFBQyxvQkFBYSxTQUFTLENBQUUsQ0FBQyxFQUM3RCxDQUFDLGdCQUFnQixLQUFJLFNBQVMsYUFBVCxTQUFTLHVCQUFULFNBQVMsQ0FBRSxPQUFPLENBQUEsSUFBSSxJQUFBLGFBQUUsRUFBQyxvQkFBYSxTQUFTLENBQUMsT0FBTyxhQUFVLENBQUMsRUFDdkYsQ0FBQyxnQkFBZ0IsS0FBSSxTQUFTLGFBQVQsU0FBUyx1QkFBVCxTQUFTLENBQUUsTUFBTSxDQUFBLElBQUksSUFBQSxhQUFFLEVBQUMsb0JBQWEsU0FBUyxDQUFDLE1BQU0sWUFBUyxDQUFDLEVBQ3BGLENBQUMsZ0JBQWdCLEtBQUksU0FBUyxhQUFULFNBQVMsdUJBQVQsU0FBUyxDQUFFLE1BQU0sQ0FBQSxJQUFJLElBQUEsYUFBRSxFQUFDLG9CQUFhLFNBQVMsQ0FBQyxNQUFNLFlBQVMsQ0FBQyxFQUNwRixLQUFLLElBQUksSUFBQSxhQUFFLEVBQUMsSUFBQSw2QkFBaUIsRUFBQyxLQUFLLENBQUMsQ0FBQyxFQUNyQyxPQUFPLElBQUksSUFBQSxhQUFFLEVBQUMsSUFBQSxpQ0FBbUIsRUFBQyxPQUFPLENBQUMsQ0FBQyxFQUMzQyxVQUFVLElBQUksSUFBQSxhQUFFLEVBQUMsWUFBWSxDQUFDLEVBQzlCLENBQUMsUUFBUSxLQUFJLEdBQUcsYUFBSCxHQUFHLHVCQUFILEdBQUcsQ0FBRSxNQUFNLENBQUEsSUFBSSxJQUFBLGNBQUcsRUFBQyxxQkFBYyxHQUFHLENBQUMsTUFBTSxDQUFFLENBQUMsRUFDM0QsQ0FBQyxRQUFRLEtBQUksR0FBRyxhQUFILEdBQUcsdUJBQUgsR0FBRyxDQUFFLE1BQU0sQ0FBQSxJQUFJLElBQUEsY0FBRyxFQUFDLHFCQUFjLEdBQUcsQ0FBQyxNQUFNLENBQUUsQ0FBQyxFQUMzRCxDQUFDLFFBQVEsS0FBSSxHQUFHLGFBQUgsR0FBRyx1QkFBSCxHQUFHLENBQUUsT0FBTyxDQUFBLElBQUksSUFBQSxjQUFHLEVBQUMsc0JBQWUsR0FBRyxDQUFDLE9BQU8sQ0FBRSxDQUFDLEVBQzlELFFBQVEsSUFBSSxJQUFBLGNBQUcsRUFBQyxjQUFPLEdBQUcsQ0FBRSxDQUFDLEVBQzdCLFVBQVUsSUFBSSxJQUFBLGFBQUUsRUFBQyxZQUFZLENBQUMsRUFDOUIsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sd0RBQUssR0FBRyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTSxFQUFJLENBQUE7QUFDbEUsQ0FBQyxDQUNGLENBQUE7QUFFRCxPQUFPLENBQUMsV0FBVyxHQUFHLG1DQUFhLENBQUMsT0FBTyxDQUFBO0FBQzNDLGtCQUFlLE9BQU8sQ0FBQSJ9

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

@@ -0,0 +1,33 @@
+import { __assign, __rest } from "tslib";
+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';
+/**
+ * @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' } Align items
+ * @param justify { 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' } Justify content
+ * @param scrollable {boolean} scrollable mode (overflow-x: auto)
+ * @param fullheight {boolean} Full height (height: 100%)
+ */
+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 styled = useTrilogyContext().styled;
+    var isNumber = typeof gap === 'number';
+    var isValueDirection = typeof direction === 'string';
+    var classes = hashClass(styled, clsx('flex-box', isValueDirection && direction && is("direction-".concat(direction)), !isValueDirection && (direction === null || direction === void 0 ? void 0 : direction.desktop) && is("direction-".concat(direction.desktop, "-desktop")), !isValueDirection && (direction === null || direction === void 0 ? void 0 : direction.mobile) && is("direction-".concat(direction.mobile, "-mobile")), !isValueDirection && (direction === null || direction === void 0 ? void 0 : direction.tablet) && is("direction-".concat(direction.tablet, "-tablet")), align && is(getAlignClassName(align)), justify && is(getJustifyClassName(justify)), scrollable && is('scrollable'), !isNumber && (gap === null || gap === void 0 ? void 0 : gap.mobile) && has("gap-mobile-".concat(gap.mobile)), !isNumber && (gap === null || gap === void 0 ? void 0 : gap.tablet) && has("gap-tablet-".concat(gap.tablet)), !isNumber && (gap === null || gap === void 0 ? void 0 : gap.desktop) && has("gap-desktop-".concat(gap.desktop)), isNumber && has("gap-".concat(gap)), fullheight && is('fullheight'), className));
+    return React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others));
+});
+FlexBox.displayName = ComponentName.FlexBox;
+export default FlexBox;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEJveC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvZmxleC1ib3gvRmxleEJveC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQzlELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ2xFLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBQ3BDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHekI7Ozs7Ozs7Ozs7OztHQVlHO0FBQ0gsSUFBTSxPQUFPLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDOUIsVUFBQyxFQUFvRixFQUFFLEdBQUc7SUFBdkYsSUFBQSxTQUFTLGVBQUEsRUFBRSxFQUFFLFFBQUEsRUFBRSxHQUFHLFNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFLLE1BQU0sY0FBbEYsdUZBQW9GLENBQUY7SUFDekUsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxRQUFRLEdBQUcsT0FBTyxHQUFHLEtBQUssUUFBUSxDQUFBO0lBQ3hDLElBQU0sZ0JBQWdCLEdBQUcsT0FBTyxTQUFTLEtBQUssUUFBUSxDQUFBO0lBQ3RELElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixVQUFVLEVBQ1YsZ0JBQWdCLElBQUksU0FBUyxJQUFJLEVBQUUsQ0FBQyxvQkFBYSxTQUFTLENBQUUsQ0FBQyxFQUM3RCxDQUFDLGdCQUFnQixLQUFJLFNBQVMsYUFBVCxTQUFTLHVCQUFULFNBQVMsQ0FBRSxPQUFPLENBQUEsSUFBSSxFQUFFLENBQUMsb0JBQWEsU0FBUyxDQUFDLE9BQU8sYUFBVSxDQUFDLEVBQ3ZGLENBQUMsZ0JBQWdCLEtBQUksU0FBUyxhQUFULFNBQVMsdUJBQVQsU0FBUyxDQUFFLE1BQU0sQ0FBQSxJQUFJLEVBQUUsQ0FBQyxvQkFBYSxTQUFTLENBQUMsTUFBTSxZQUFTLENBQUMsRUFDcEYsQ0FBQyxnQkFBZ0IsS0FBSSxTQUFTLGFBQVQsU0FBUyx1QkFBVCxTQUFTLENBQUUsTUFBTSxDQUFBLElBQUksRUFBRSxDQUFDLG9CQUFhLFNBQVMsQ0FBQyxNQUFNLFlBQVMsQ0FBQyxFQUNwRixLQUFLLElBQUksRUFBRSxDQUFDLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQ3JDLE9BQU8sSUFBSSxFQUFFLENBQUMsbUJBQW1CLENBQUMsT0FBTyxDQUFDLENBQUMsRUFDM0MsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDOUIsQ0FBQyxRQUFRLEtBQUksR0FBRyxhQUFILEdBQUcsdUJBQUgsR0FBRyxDQUFFLE1BQU0sQ0FBQSxJQUFJLEdBQUcsQ0FBQyxxQkFBYyxHQUFHLENBQUMsTUFBTSxDQUFFLENBQUMsRUFDM0QsQ0FBQyxRQUFRLEtBQUksR0FBRyxhQUFILEdBQUcsdUJBQUgsR0FBRyxDQUFFLE1BQU0sQ0FBQSxJQUFJLEdBQUcsQ0FBQyxxQkFBYyxHQUFHLENBQUMsTUFBTSxDQUFFLENBQUMsRUFDM0QsQ0FBQyxRQUFRLEtBQUksR0FBRyxhQUFILEdBQUcsdUJBQUgsR0FBRyxDQUFFLE9BQU8sQ0FBQSxJQUFJLEdBQUcsQ0FBQyxzQkFBZSxHQUFHLENBQUMsT0FBTyxDQUFFLENBQUMsRUFDOUQsUUFBUSxJQUFJLEdBQUcsQ0FBQyxjQUFPLEdBQUcsQ0FBRSxDQUFDLEVBQzdCLFVBQVUsSUFBSSxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQzlCLFNBQVMsQ0FDVixDQUNGLENBQUE7SUFFRCxPQUFPLHNDQUFLLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU0sRUFBSSxDQUFBO0FBQ2xFLENBQUMsQ0FDRixDQUFBO0FBRUQsT0FBTyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsT0FBTyxDQUFBO0FBQzNDLGVBQWUsT0FBTyxDQUFBIn0=

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { View } from 'react-native';
+import { FlexBoxProps } from './FlexBoxProps';
+declare const FlexBox: React.ForwardRefExoticComponent<FlexBoxProps & React.RefAttributes<View>>;
+export default FlexBox;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { View } from 'react-native';
+import { FlexBoxProps } from './FlexBoxProps';
+declare const FlexBox: React.ForwardRefExoticComponent<FlexBoxProps & React.RefAttributes<View>>;
+export default FlexBox;

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

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var enumsComponentsName_1 = require("../../components/enumsComponentsName");
+var Alignable_1 = require("../../objects/facets/Alignable");
+var Justifiable_1 = require("../../objects/facets/Justifiable");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_native_1 = require("react-native");
+var columns_1 = require("../columns");
+var context_1 = require("./context");
+var FlexBox = react_1.default.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 = tslib_1.__rest(_a, ["id", "gap", "direction", "align", "justify", "scrollable", "fullBleed", "children", "fullheight"]);
+    var _c = tslib_1.__read((0, react_1.useState)(0), 2), width = _c[0], setWidth = _c[1];
+    var _d = tslib_1.__read((0, react_1.useState)(0), 2), enlarge = _d[0], setEnlarge = _d[1];
+    var isValueDirection = typeof direction === 'string';
+    var onLayoutHandler = react_1.default.useCallback(function (event) {
+        if (!width) {
+            var width_1 = event.nativeEvent.layout.width;
+            if (fullBleed)
+                setEnlarge((react_native_1.Dimensions.get('screen').width - width_1) / 2);
+            setWidth(width_1);
+        }
+    }, [fullBleed, width]);
+    var gapIndex = (gap && typeof gap === 'number' && gap) || (gap && (gap === null || gap === void 0 ? void 0 : gap.mobile)) || 0;
+    var realGap = react_1.default.useMemo(function () { return (typeof gap === 'undefined' ? 8 : columns_1.ColumnsGapValue[gapIndex]); }, [gap]);
+    var styles = react_native_1.StyleSheet.create({
+        columns: {
+            flexDirection: !isValueDirection ? direction === null || direction === void 0 ? void 0 : direction.mobile : direction,
+            gap: realGap,
+            alignItems: (0, Alignable_1.getAlignStyle)(align),
+            justifyContent: (0, Justifiable_1.getJustifyStyle)(justify),
+            width: fullBleed && width ? width + enlarge * 2 : '100%',
+            marginHorizontal: -enlarge,
+            paddingHorizontal: enlarge,
+            height: fullheight ? '100%' : 'auto',
+        },
+        columnsScrollable: {
+            paddingHorizontal: enlarge,
+            gap: realGap,
+        },
+    });
+    return (react_1.default.createElement(context_1.FlexBoxContext.Provider, { value: {
+            width: width,
+            realGap: realGap,
+            scrollable: scrollable || false,
+            childrenLength: react_1.default.Children.count(children),
+        } },
+        !scrollable && (react_1.default.createElement(react_native_1.View, tslib_1.__assign({ id: id, ref: ref, onLayout: onLayoutHandler, style: [styles.columns] }, others), children)),
+        scrollable && (react_1.default.createElement(react_native_1.View, { id: id, onLayout: onLayoutHandler, style: {
+                marginHorizontal: -enlarge,
+            } },
+            react_1.default.createElement(react_native_1.ScrollView, { horizontal: true, contentContainerStyle: styles.columnsScrollable, showsHorizontalScrollIndicator: false }, children)))));
+});
+FlexBox.displayName = enumsComponentsName_1.ComponentName.FlexBox;
+exports.default = FlexBox;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEJveC5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2ZsZXgtYm94L0ZsZXhCb3gubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7QUFBQSx3RUFBZ0U7QUFDaEUsd0RBQTBEO0FBQzFELDREQUE4RDtBQUM5RCxxREFBdUM7QUFDdkMsNkNBQTBGO0FBQzFGLHNDQUE0QztBQUU1QyxxQ0FBMEM7QUFFMUMsSUFBTSxPQUFPLEdBQUcsZUFBSyxDQUFDLFVBQVUsQ0FDOUIsVUFBQyxFQUFzRyxFQUFFLEdBQUc7SUFBekcsSUFBQSxFQUFFLFFBQUEsRUFBRSxHQUFHLFNBQUEsRUFBRSxpQkFBaUIsRUFBakIsU0FBUyxtQkFBRyxLQUFLLEtBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFLLE1BQU0sc0JBQXBHLG1HQUFzRyxDQUFGO0lBQzdGLElBQUEsS0FBQSxlQUFvQixJQUFBLGdCQUFRLEVBQUMsQ0FBQyxDQUFDLElBQUEsRUFBOUIsS0FBSyxRQUFBLEVBQUUsUUFBUSxRQUFlLENBQUE7SUFDL0IsSUFBQSxLQUFBLGVBQXdCLElBQUEsZ0JBQVEsRUFBQyxDQUFDLENBQUMsSUFBQSxFQUFsQyxPQUFPLFFBQUEsRUFBRSxVQUFVLFFBQWUsQ0FBQTtJQUN6QyxJQUFNLGdCQUFnQixHQUFHLE9BQU8sU0FBUyxLQUFLLFFBQVEsQ0FBQTtJQUV0RCxJQUFNLGVBQWUsR0FBRyxlQUFLLENBQUMsV0FBVyxDQUN2QyxVQUFDLEtBQXdCO1FBQ3ZCLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDRixJQUFBLE9BQUssR0FBSyxLQUFLLENBQUMsV0FBVyxDQUFDLE1BQU0sTUFBN0IsQ0FBNkI7WUFDMUMsSUFBSSxTQUFTO2dCQUFFLFVBQVUsQ0FBQyxDQUFDLHlCQUFVLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxDQUFDLEtBQUssR0FBRyxPQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQTtZQUN2RSxRQUFRLENBQUMsT0FBSyxDQUFDLENBQUE7U0FDaEI7SUFDSCxDQUFDLEVBQ0QsQ0FBQyxTQUFTLEVBQUUsS0FBSyxDQUFDLENBQ25CLENBQUE7SUFFRCxJQUFNLFFBQVEsR0FBRyxDQUFDLEdBQUcsSUFBSSxPQUFPLEdBQUcsS0FBSyxRQUFRLElBQUksR0FBRyxDQUFDLElBQUksQ0FBQyxHQUFHLEtBQUksR0FBRyxhQUFILEdBQUcsdUJBQUgsR0FBRyxDQUFFLE1BQU0sQ0FBQSxDQUFDLElBQUksQ0FBQyxDQUFBO0lBQ3JGLElBQU0sT0FBTyxHQUFHLGVBQUssQ0FBQyxPQUFPLENBQUMsY0FBTSxPQUFBLENBQUMsT0FBTyxHQUFHLEtBQUssV0FBVyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLHlCQUFlLENBQUMsUUFBUSxDQUFDLENBQUMsRUFBNUQsQ0FBNEQsRUFBRSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUE7SUFFeEcsSUFBTSxNQUFNLEdBQUcseUJBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsT0FBTyxFQUFFO1lBQ1AsYUFBYSxFQUFFLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLFNBQVMsYUFBVCxTQUFTLHVCQUFULFNBQVMsQ0FBRSxNQUFNLENBQUMsQ0FBQyxDQUFDLFNBQVM7WUFDaEUsR0FBRyxFQUFFLE9BQU87WUFDWixVQUFVLEVBQUUsSUFBQSx5QkFBYSxFQUFDLEtBQUssQ0FBQztZQUNoQyxjQUFjLEVBQUUsSUFBQSw2QkFBZSxFQUFDLE9BQU8sQ0FBQztZQUN4QyxLQUFLLEVBQUUsU0FBUyxJQUFJLEtBQUssQ0FBQyxDQUFDLENBQUMsS0FBSyxHQUFHLE9BQU8sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU07WUFDeEQsZ0JBQWdCLEVBQUUsQ0FBQyxPQUFPO1lBQzFCLGlCQUFpQixFQUFFLE9BQU87WUFDMUIsTUFBTSxFQUFFLFVBQVUsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNO1NBQ3JDO1FBQ0QsaUJBQWlCLEVBQUU7WUFDakIsaUJBQWlCLEVBQUUsT0FBTztZQUMxQixHQUFHLEVBQUUsT0FBTztTQUNiO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUNMLDhCQUFDLHdCQUFjLENBQUMsUUFBUSxJQUN0QixLQUFLLEVBQUU7WUFDTCxLQUFLLE9BQUE7WUFDTCxPQUFPLFNBQUE7WUFDUCxVQUFVLEVBQUUsVUFBVSxJQUFJLEtBQUs7WUFDL0IsY0FBYyxFQUFFLGVBQUssQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQztTQUMvQztRQUVBLENBQUMsVUFBVSxJQUFJLENBQ2QsOEJBQUMsbUJBQUkscUJBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxlQUFlLEVBQUUsS0FBSyxFQUFFLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxJQUFNLE1BQU0sR0FDbkYsUUFBUSxDQUNKLENBQ1I7UUFFQSxVQUFVLElBQUksQ0FDYiw4QkFBQyxtQkFBSSxJQUNILEVBQUUsRUFBRSxFQUFFLEVBQ04sUUFBUSxFQUFFLGVBQWUsRUFDekIsS0FBSyxFQUFFO2dCQUNMLGdCQUFnQixFQUFFLENBQUMsT0FBTzthQUMzQjtZQUVELDhCQUFDLHlCQUFVLElBQ1QsVUFBVSxRQUNWLHFCQUFxQixFQUFFLE1BQU0sQ0FBQyxpQkFBaUIsRUFDL0MsOEJBQThCLEVBQUUsS0FBSyxJQUVwQyxRQUFRLENBQ0UsQ0FDUixDQUNSLENBQ3VCLENBQzNCLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUVELE9BQU8sQ0FBQyxXQUFXLEdBQUcsbUNBQWEsQ0FBQyxPQUFPLENBQUE7QUFDM0Msa0JBQWUsT0FBTyxDQUFBIn0=

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

@@ -0,0 +1,54 @@
+import { __assign, __read, __rest } from "tslib";
+import { ComponentName } from '../../components/enumsComponentsName';
+import { getAlignStyle } from '../../objects/facets/Alignable';
+import { getJustifyStyle } from '../../objects/facets/Justifiable';
+import React, { useState } from 'react';
+import { Dimensions, ScrollView, StyleSheet, View } from 'react-native';
+import { ColumnsGapValue } from '../columns';
+import { FlexBoxContext } from './context';
+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 _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';
+    var onLayoutHandler = React.useCallback(function (event) {
+        if (!width) {
+            var width_1 = event.nativeEvent.layout.width;
+            if (fullBleed)
+                setEnlarge((Dimensions.get('screen').width - width_1) / 2);
+            setWidth(width_1);
+        }
+    }, [fullBleed, width]);
+    var gapIndex = (gap && typeof gap === 'number' && gap) || (gap && (gap === null || gap === void 0 ? void 0 : gap.mobile)) || 0;
+    var realGap = React.useMemo(function () { return (typeof gap === 'undefined' ? 8 : ColumnsGapValue[gapIndex]); }, [gap]);
+    var styles = StyleSheet.create({
+        columns: {
+            flexDirection: !isValueDirection ? direction === null || direction === void 0 ? void 0 : direction.mobile : direction,
+            gap: realGap,
+            alignItems: getAlignStyle(align),
+            justifyContent: getJustifyStyle(justify),
+            width: fullBleed && width ? width + enlarge * 2 : '100%',
+            marginHorizontal: -enlarge,
+            paddingHorizontal: enlarge,
+            height: fullheight ? '100%' : 'auto',
+        },
+        columnsScrollable: {
+            paddingHorizontal: enlarge,
+            gap: realGap,
+        },
+    });
+    return (React.createElement(FlexBoxContext.Provider, { value: {
+            width: width,
+            realGap: realGap,
+            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: {
+                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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

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { Align } from '../../objects/facets/Alignable';
+import { DirectionEnum, DirectionEnumValues } from '../../objects/facets/Direction';
+import { Justify } from '../../objects/facets/Justifiable';
+import { View } from 'react-native';
+import { CommonProps } from '../../objects/facets/CommonProps';
+import { GapSize } from '../columns';
+export interface FlexBoxSize {
+    mobile?: GapSize;
+    tablet?: GapSize;
+    desktop?: GapSize;
+}
+export interface Direction {
+    mobile?: DirectionEnum | DirectionEnumValues;
+    tablet?: DirectionEnum | DirectionEnumValues;
+    desktop?: DirectionEnum | DirectionEnumValues;
+}
+export interface FlexBoxProps extends CommonProps {
+    children?: React.ReactNode;
+    gap?: FlexBoxSize | GapSize;
+    direction?: Direction | DirectionEnum | DirectionEnumValues;
+    align?: Align;
+    justify?: Justify;
+    scrollable?: boolean;
+    fullBleed?: boolean;
+    fullheight?: boolean;
+}
+export type FlexBoxRef = HTMLDivElement;
+export type FlexBoxNativeRef = View;

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { Align } from '../../objects/facets/Alignable';
+import { DirectionEnum, DirectionEnumValues } from '../../objects/facets/Direction';
+import { Justify } from '../../objects/facets/Justifiable';
+import { View } from 'react-native';
+import { CommonProps } from '../../objects/facets/CommonProps';
+import { GapSize } from '../columns';
+export interface FlexBoxSize {
+    mobile?: GapSize;
+    tablet?: GapSize;
+    desktop?: GapSize;
+}
+export interface Direction {
+    mobile?: DirectionEnum | DirectionEnumValues;
+    tablet?: DirectionEnum | DirectionEnumValues;
+    desktop?: DirectionEnum | DirectionEnumValues;
+}
+export interface FlexBoxProps extends CommonProps {
+    children?: React.ReactNode;
+    gap?: FlexBoxSize | GapSize;
+    direction?: Direction | DirectionEnum | DirectionEnumValues;
+    align?: Align;
+    justify?: Justify;
+    scrollable?: boolean;
+    fullBleed?: boolean;
+    fullheight?: boolean;
+}
+export type FlexBoxRef = HTMLDivElement;
+export type FlexBoxNativeRef = View;

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEJveFByb3BzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9mbGV4LWJveC9GbGV4Qm94UHJvcHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9

package/lib/components/flex-box/FlexBoxProps.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEJveFByb3BzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9mbGV4LWJveC9GbGV4Qm94UHJvcHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9

package/lib/components/{stack/StackPropsDefaults.js → flex-box/FlexBoxPropsDefaults.js}

@@ -28,7 +28,7 @@ export default {
       8,
       9,
       10,
-      "StackSize"
+      "FlexBoxSize"
     ]
   },
   "direction": {
@@ -38,7 +38,54 @@ export default {
       "row",
       "column",
       "row",
-      "column"
+      "column",
+      "Direction"
+    ]
+  },
+  "align": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH"
+    ]
+  },
+  "justify": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "CENTER",
+      "START",
+      "END",
+      "SPACE_BETWEEN",
+      "SPACE_AROUND",
+      "SPACE_EVENLY"
+    ]
+  },
+  "scrollable": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "fullBleed": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "fullheight": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
     ]
   },
   "id": {

package/lib/components/flex-box/context/index.d.mts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const FlexBoxContext: React.Context<{
+    scrollable: boolean;
+    width: number;
+    realGap: number;
+    childrenLength: number;
+}>;

package/lib/components/flex-box/context/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const FlexBoxContext: React.Context<{
+    scrollable: boolean;
+    width: number;
+    realGap: number;
+    childrenLength: number;
+}>;

package/lib/components/flex-box/context/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexBoxContext = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+exports.FlexBoxContext = react_1.default.createContext({
+    scrollable: false,
+    width: 0,
+    realGap: 16,
+    childrenLength: 1,
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2ZsZXgtYm94L2NvbnRleHQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSx3REFBeUI7QUFFWixRQUFBLGNBQWMsR0FBRyxlQUFLLENBQUMsYUFBYSxDQUFDO0lBQ2hELFVBQVUsRUFBRSxLQUFLO0lBQ2pCLEtBQUssRUFBRSxDQUFDO0lBQ1IsT0FBTyxFQUFFLEVBQUU7SUFDWCxjQUFjLEVBQUUsQ0FBQztDQUNsQixDQUFDLENBQUEifQ==

package/lib/components/flex-box/context/index.mjs

@@ -0,0 +1,8 @@
+import React from 'react';
+export var FlexBoxContext = React.createContext({
+    scrollable: false,
+    width: 0,
+    realGap: 16,
+    childrenLength: 1,
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2ZsZXgtYm94L2NvbnRleHQvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUV6QixNQUFNLENBQUMsSUFBTSxjQUFjLEdBQUcsS0FBSyxDQUFDLGFBQWEsQ0FBQztJQUNoRCxVQUFVLEVBQUUsS0FBSztJQUNqQixLQUFLLEVBQUUsQ0FBQztJQUNSLE9BQU8sRUFBRSxFQUFFO0lBQ1gsY0FBYyxFQUFFLENBQUM7Q0FDbEIsQ0FBQyxDQUFBIn0=

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FlexItemProps } from '../../../components/flex-box/flex-item/FlexItemProps';
+/**
+ * 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 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
+ */
+declare const FlexItem: React.ForwardRefExoticComponent<FlexItemProps & React.RefAttributes<HTMLDivElement>>;
+export default FlexItem;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FlexItemProps } from '../../../components/flex-box/flex-item/FlexItemProps';
+/**
+ * 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 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
+ */
+declare const FlexItem: React.ForwardRefExoticComponent<FlexItemProps & React.RefAttributes<HTMLDivElement>>;
+export default FlexItem;

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var enumsComponentsName_1 = require("../../../components/enumsComponentsName");
+var context_1 = require("../../../context");
+var hashClassesHelpers_1 = require("../../../helpers/hashClassesHelpers");
+var Alignable_1 = require("../../../objects/facets/Alignable");
+var classify_1 = require("../../../services/classify");
+var clsx_1 = tslib_1.__importDefault(require("clsx"));
+var react_1 = tslib_1.__importDefault(require("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 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
+ */
+var FlexItem = react_1.default.forwardRef(function (_a, ref) {
+    var className = _a.className, id = _a.id, size = _a.size, narrow = _a.narrow, verticalAlign = _a.verticalAlign, others = tslib_1.__rest(_a, ["className", "id", "size", "narrow", "verticalAlign"]);
+    var styled = (0, context_1.useTrilogyContext)().styled;
+    var isNumber = typeof size === 'number';
+    var classes = (0, hashClassesHelpers_1.hashClass)(styled, (0, clsx_1.default)('flex-item', size && isNumber && (0, classify_1.is)("".concat(size)), size && !isNumber && (size === null || size === void 0 ? void 0 : size.desktop) && (0, classify_1.is)("".concat(size.desktop, "-desktop")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.mobile) && (0, classify_1.is)("".concat(size.mobile, "-mobile")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.tablet) && (0, classify_1.is)("".concat(size.tablet, "-tablet")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.touch) && (0, classify_1.is)("".concat(size.touch, "-touch")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.wideScreen) && (0, classify_1.is)("".concat(size.wideScreen, "-widescreen")), size && !isNumber && (size === null || size === void 0 ? void 0 : size.fullHd) && (0, classify_1.is)("".concat(size.fullHd, "-fullhd")), narrow && (0, classify_1.is)('narrow'), verticalAlign && (0, classify_1.is)((0, Alignable_1.getAlignClassName)(verticalAlign)), className));
+    return react_1.default.createElement("div", tslib_1.__assign({ ref: ref, id: id, className: classes }, others));
+});
+FlexItem.displayName = enumsComponentsName_1.ComponentName.FlexItem;
+exports.default = FlexItem;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEl0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2ZsZXgtYm94L2ZsZXgtaXRlbS9GbGV4SXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBQUEsd0VBQWdFO0FBQ2hFLHFDQUE2QztBQUM3QyxtRUFBd0Q7QUFDeEQsd0RBQThEO0FBQzlELGdEQUF3QztBQUN4QyxzREFBdUI7QUFDdkIsd0RBQXlCO0FBR3pCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXVCRztBQUVILElBQU0sUUFBUSxHQUFHLGVBQUssQ0FBQyxVQUFVLENBQy9CLFVBQUMsRUFBeUQsRUFBRSxHQUFHO0lBQTVELElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsSUFBSSxVQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFLLE1BQU0sc0JBQXZELHNEQUF5RCxDQUFGO0lBQzlDLElBQUEsTUFBTSxHQUFLLElBQUEsMkJBQWlCLEdBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxRQUFRLEdBQUcsT0FBTyxJQUFJLEtBQUssUUFBUSxDQUFBO0lBQ3pDLElBQU0sT0FBTyxHQUFHLElBQUEsOEJBQVMsRUFDdkIsTUFBTSxFQUNOLElBQUEsY0FBSSxFQUNGLFdBQVcsRUFDWCxJQUFJLElBQUksUUFBUSxJQUFJLElBQUEsYUFBRSxFQUFDLFVBQUcsSUFBSSxDQUFFLENBQUMsRUFDakMsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFJLElBQUksYUFBSixJQUFJLHVCQUFKLElBQUksQ0FBRSxPQUFPLENBQUEsSUFBSSxJQUFBLGFBQUUsRUFBQyxVQUFHLElBQUksQ0FBQyxPQUFPLGFBQVUsQ0FBQyxFQUNuRSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLE1BQU0sQ0FBQSxJQUFJLElBQUEsYUFBRSxFQUFDLFVBQUcsSUFBSSxDQUFDLE1BQU0sWUFBUyxDQUFDLEVBQ2hFLElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSSxJQUFJLGFBQUosSUFBSSx1QkFBSixJQUFJLENBQUUsTUFBTSxDQUFBLElBQUksSUFBQSxhQUFFLEVBQUMsVUFBRyxJQUFJLENBQUMsTUFBTSxZQUFTLENBQUMsRUFDaEUsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFJLElBQUksYUFBSixJQUFJLHVCQUFKLElBQUksQ0FBRSxLQUFLLENBQUEsSUFBSSxJQUFBLGFBQUUsRUFBQyxVQUFHLElBQUksQ0FBQyxLQUFLLFdBQVEsQ0FBQyxFQUM3RCxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLFVBQVUsQ0FBQSxJQUFJLElBQUEsYUFBRSxFQUFDLFVBQUcsSUFBSSxDQUFDLFVBQVUsZ0JBQWEsQ0FBQyxFQUM1RSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLE1BQU0sQ0FBQSxJQUFJLElBQUEsYUFBRSxFQUFDLFVBQUcsSUFBSSxDQUFDLE1BQU0sWUFBUyxDQUFDLEVBQ2hFLE1BQU0sSUFBSSxJQUFBLGFBQUUsRUFBQyxRQUFRLENBQUMsRUFDdEIsYUFBYSxJQUFJLElBQUEsYUFBRSxFQUFDLElBQUEsNkJBQWlCLEVBQUMsYUFBYSxDQUFDLENBQUMsRUFDckQsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sd0RBQUssR0FBRyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTSxFQUFJLENBQUE7QUFDbEUsQ0FBQyxDQUNGLENBQUE7QUFDRCxRQUFRLENBQUMsV0FBVyxHQUFHLG1DQUFhLENBQUMsUUFBUSxDQUFBO0FBQzdDLGtCQUFlLFFBQVEsQ0FBQSJ9

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

@@ -0,0 +1,42 @@
+import { __assign, __rest } from "tslib";
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { useTrilogyContext } from '../../../context';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
+import { getAlignClassName } from '../../../objects/facets/Alignable';
+import { is } from '../../../services/classify';
+import clsx from 'clsx';
+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 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
+ */
+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 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));
+});
+FlexItem.displayName = ComponentName.FlexItem;
+export default FlexItem;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRmxleEl0ZW0uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2ZsZXgtYm94L2ZsZXgtaXRlbS9GbGV4SXRlbS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDRCQUE0QixDQUFBO0FBQzlELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBR3pCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXVCRztBQUVILElBQU0sUUFBUSxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQy9CLFVBQUMsRUFBeUQsRUFBRSxHQUFHO0lBQTVELElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsSUFBSSxVQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFLLE1BQU0sY0FBdkQsc0RBQXlELENBQUY7SUFDOUMsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxRQUFRLEdBQUcsT0FBTyxJQUFJLEtBQUssUUFBUSxDQUFBO0lBQ3pDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixXQUFXLEVBQ1gsSUFBSSxJQUFJLFFBQVEsSUFBSSxFQUFFLENBQUMsVUFBRyxJQUFJLENBQUUsQ0FBQyxFQUNqQyxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLE9BQU8sQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxPQUFPLGFBQVUsQ0FBQyxFQUNuRSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLE1BQU0sQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxNQUFNLFlBQVMsQ0FBQyxFQUNoRSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLE1BQU0sQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxNQUFNLFlBQVMsQ0FBQyxFQUNoRSxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLEtBQUssQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxLQUFLLFdBQVEsQ0FBQyxFQUM3RCxJQUFJLElBQUksQ0FBQyxRQUFRLEtBQUksSUFBSSxhQUFKLElBQUksdUJBQUosSUFBSSxDQUFFLFVBQVUsQ0FBQSxJQUFJLEVBQUUsQ0FBQyxVQUFHLElBQUksQ0FBQyxVQUFVLGdCQUFhLENBQUMsRUFDNUUsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFJLElBQUksYUFBSixJQUFJLHVCQUFKLElBQUksQ0FBRSxNQUFNLENBQUEsSUFBSSxFQUFFLENBQUMsVUFBRyxJQUFJLENBQUMsTUFBTSxZQUFTLENBQUMsRUFDaEUsTUFBTSxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFDdEIsYUFBYSxJQUFJLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsQ0FBQyxFQUNyRCxTQUFTLENBQ1YsQ0FDRixDQUFBO0lBRUQsT0FBTyxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNLEVBQUksQ0FBQTtBQUNsRSxDQUFDLENBQ0YsQ0FBQTtBQUNELFFBQVEsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFFBQVEsQ0FBQTtBQUM3QyxlQUFlLFFBQVEsQ0FBQSJ9

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

@@ -0,0 +1,29 @@
+import { FlexItemProps } from '../../../components/flex-box/flex-item/FlexItemProps';
+import React from 'react';
+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 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
+ */
+declare const FlexItem: React.ForwardRefExoticComponent<FlexItemProps & React.RefAttributes<View>>;
+export default FlexItem;

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

@@ -0,0 +1,29 @@
+import { FlexItemProps } from '../../../components/flex-box/flex-item/FlexItemProps';
+import React from 'react';
+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 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
+ */
+declare const FlexItem: React.ForwardRefExoticComponent<FlexItemProps & React.RefAttributes<View>>;
+export default FlexItem;