@trilogy-ds/react 0.0.27-esm-cjs → 0.0.28-esm-cjs

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

@@ -37,12 +37,13 @@ module.exports = __toCommonJS(FlexBox_native_exports);
 
 // objects/facets/Alignable/index.ts
 var getAlignStyle = (alignType) => {
-  switch (alignType) {
-    case "ALIGNED_CENTER":
+  if (!alignType) return "flex-start";
+  switch (true) {
+    case ["ALIGNED_CENTER", "CENTER"].includes(alignType):
       return "center";
-    case "ALIGNED_START":
+    case ["START", "ALIGNED_START"].includes(alignType):
       return "flex-start";
-    case "ALIGNED_END":
+    case ["ALIGNED_END", "END"].includes(alignType):
       return "flex-end";
     default:
       return "flex-start";
@@ -51,15 +52,18 @@ var getAlignStyle = (alignType) => {
 
 // objects/facets/Justifiable/index.ts
 var getJustifyStyle = (justifyContent) => {
-  switch (justifyContent) {
-    case "JUSTIFIED_CENTER":
+  if (!justifyContent) return "flex-start";
+  switch (true) {
+    case ["CENTER", "JUSTIFIED_CENTER"].includes(justifyContent):
       return "center";
-    case "JUSTIFIED_START":
+    case ["START", "JUSTIFIED_START"].includes(justifyContent):
       return "flex-start";
-    case "JUSTIFIED_END":
+    case ["END", "JUSTIFIED_END"].includes(justifyContent):
       return "flex-end";
-    case "SPACE_BETWEEN":
+    case ["SPACE_BETWEEN", "SPACE_BETWEEN"].includes(justifyContent):
       return "space-between";
+    case justifyContent === "SPACE_AROUND":
+      return "space-around";
     default:
       return "flex-start";
   }
@@ -67,7 +71,7 @@ var getJustifyStyle = (justifyContent) => {
 
 // components/flex-box/FlexBox.native.tsx
 var import_react11 = __toESM(require("react"));
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 
 // components/columns/ColumnsTypes.ts
 var ColumnsGapValue = [0, 4, 8, 12, 16, 24, 32, 40, 48, 54, 62];
@@ -214,7 +218,8 @@ var colors = {
   ["DISABLED_FADE" /* DISABLED_FADE */]: ["#D1D1D1", "disabled-fade", "white"],
   ["NEUTRAL" /* NEUTRAL */]: ["#707070", "grey", "white"],
   ["NEUTRAL_FADE" /* NEUTRAL_FADE */]: ["#F4F4F4", "grey-fade", "white"],
-  ["STROKE" /* STROKE */]: ["#BBC1CE", "stroke", "white"]
+  ["STROKE" /* STROKE */]: ["#BBC1CE", "stroke", "white"],
+  ["STROKE_FADE" /* STROKE_FADE */]: ["#BBC1CE", "stroke-fade", "white"]
 };
 var getColorStyle = (trilogyColor) => {
   if (typeof navigator !== "undefined" && navigator.userAgent === void 0) {
@@ -270,17 +275,95 @@ var isIOS = import_react_native2.Platform.OS === "ios";
 
 // components/icon/Icon.native.tsx
 var import_react7 = __toESM(require("react"));
-var import_react_native3 = require("react-native");
+var import_react_native4 = require("react-native");
+var import_css = require("react-native-svg/css");
 
-// components/skeleton/Skeleton.tsx
+// components/skeleton/Skeleton.native.tsx
 var import_react6 = __toESM(require("react"));
-var Skeleton = () => {
-  return /* @__PURE__ */ import_react6.default.createElement("div", null);
+var import_react_native3 = require("react-native");
+var Skeleton = ({
+  style,
+  width = "100%",
+  height = 20,
+  backgroundColor = "#E1E9EE",
+  shimmerColor = "#F7F8F8",
+  duration = 1200,
+  borderRadius = 4,
+  children,
+  testID
+}) => {
+  const shimmerValue = (0, import_react6.useRef)(new import_react_native3.Animated.Value(0)).current;
+  const [containerWidth, setContainerWidth] = import_react6.default.useState(200);
+  (0, import_react6.useEffect)(() => {
+    const shimmerAnimation = import_react_native3.Animated.loop(
+      import_react_native3.Animated.timing(shimmerValue, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true
+      }),
+      { iterations: -1 }
+    );
+    shimmerAnimation.start();
+    return () => shimmerAnimation.stop();
+  }, [shimmerValue, duration]);
+  const translateX = shimmerValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-containerWidth, containerWidth]
+  });
+  const opacity = shimmerValue.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [0.3, 0.8, 0.3]
+  });
+  const containerStyle = {
+    width: children ? void 0 : width,
+    height: children ? void 0 : height,
+    backgroundColor,
+    borderRadius,
+    overflow: "hidden",
+    alignSelf: children ? "flex-start" : void 0,
+    ...style
+  };
+  const handleLayout = (event) => {
+    const { width: layoutWidth } = event.nativeEvent.layout;
+    setContainerWidth(layoutWidth);
+  };
+  if (children) {
+    return /* @__PURE__ */ import_react6.default.createElement(import_react_native3.View, { style: containerStyle, testID, onLayout: handleLayout }, /* @__PURE__ */ import_react6.default.createElement(import_react_native3.View, { style: { opacity: 0 } }, children), /* @__PURE__ */ import_react6.default.createElement(
+      import_react_native3.Animated.View,
+      {
+        style: [
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: containerWidth * 0.7,
+            height: "100%",
+            backgroundColor: shimmerColor,
+            opacity,
+            transform: [{ translateX }]
+          }
+        ]
+      }
+    ));
+  }
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_native3.View, { style: containerStyle, testID, onLayout: handleLayout }, /* @__PURE__ */ import_react6.default.createElement(
+    import_react_native3.Animated.View,
+    {
+      style: [
+        {
+          width: containerWidth * 0.7,
+          height: "100%",
+          backgroundColor: shimmerColor,
+          opacity,
+          transform: [{ translateX }]
+        }
+      ]
+    }
+  ));
 };
-var Skeleton_default = Skeleton;
+var Skeleton_native_default = Skeleton;
 
 // components/icon/Icon.native.tsx
-var import_css = require("react-native-svg/css");
 var Icon = import_react7.default.forwardRef(
   ({ size, name, circled, stretched, color, backgroundColor, onClick, align, skeleton, testId, ...others }, ref) => {
     const {
@@ -293,7 +376,7 @@ var Icon = import_react7.default.forwardRef(
     const background = backgroundColor && getColorStyle(backgroundColor) || circled && getColorStyle("MAIN" /* MAIN */) || "";
     const iconSkeletonRadius = size === "huge" /* HUGE */ && 50 || size === "large" /* LARGE */ && 35 || size === "medium" /* MEDIUM */ && 25 || size === "small" /* SMALL */ && 15 || size === "smaller" /* SMALLER */ && 10 || 15;
     const circledWidth = size === "huge" /* HUGE */ && 99 || size === "large" /* LARGE */ && 66 || size === "medium" /* MEDIUM */ && 48 || size === "small" /* SMALL */ && 32 || size === "smaller" /* SMALLER */ && 38 || 32;
-    const styles = import_react_native3.StyleSheet.create({
+    const styles = import_react_native4.StyleSheet.create({
       rootView: {
         alignSelf: getAlignStyle(align)
       },
@@ -337,7 +420,7 @@ var Icon = import_react7.default.forwardRef(
       }
     });
     const IconSkeleton = () => /* @__PURE__ */ import_react7.default.createElement(
-      Skeleton_default,
+      Skeleton_native_default,
       {
         style: styles.skeleton,
         width: circledWidth,
@@ -349,10 +432,10 @@ var Icon = import_react7.default.forwardRef(
     if (skeleton) {
       return /* @__PURE__ */ import_react7.default.createElement(IconSkeleton, null);
     }
-    let iconView = /* @__PURE__ */ import_react7.default.createElement(import_react_native3.View, null);
+    let iconView = /* @__PURE__ */ import_react7.default.createElement(import_react_native4.View, null);
     if (name && icons) {
       if (stretched && !circled) {
-        iconView = /* @__PURE__ */ import_react7.default.createElement(import_react_native3.View, { style: styles.stretched, testID: `${testId}-stretched` }, /* @__PURE__ */ import_react7.default.createElement(
+        iconView = /* @__PURE__ */ import_react7.default.createElement(import_react_native4.View, { style: styles.stretched, testID: `${testId}-stretched` }, /* @__PURE__ */ import_react7.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles.iconCircled, styles.icon],
@@ -363,7 +446,7 @@ var Icon = import_react7.default.forwardRef(
           }
         ));
       } else if (circled) {
-        iconView = /* @__PURE__ */ import_react7.default.createElement(import_react_native3.View, { style: styles.circled, testID: `${testId}-circled` }, /* @__PURE__ */ import_react7.default.createElement(
+        iconView = /* @__PURE__ */ import_react7.default.createElement(import_react_native4.View, { style: styles.circled, testID: `${testId}-circled` }, /* @__PURE__ */ import_react7.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles.iconCircled, styles.icon],
@@ -374,7 +457,7 @@ var Icon = import_react7.default.forwardRef(
           }
         ));
       } else {
-        iconView = /* @__PURE__ */ import_react7.default.createElement(import_react_native3.View, { style: styles.iconContainer, ...others }, /* @__PURE__ */ import_react7.default.createElement(
+        iconView = /* @__PURE__ */ import_react7.default.createElement(import_react_native4.View, { style: styles.iconContainer, ...others }, /* @__PURE__ */ import_react7.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles.icon, style],
@@ -386,8 +469,8 @@ var Icon = import_react7.default.forwardRef(
         ));
       }
     }
-    return onClick ? /* @__PURE__ */ import_react7.default.createElement(import_react_native3.View, { style: styles.rootView, testID: testId, ref }, /* @__PURE__ */ import_react7.default.createElement(
-      import_react_native3.TouchableOpacity,
+    return onClick ? /* @__PURE__ */ import_react7.default.createElement(import_react_native4.View, { style: styles.rootView, testID: testId, ref }, /* @__PURE__ */ import_react7.default.createElement(
+      import_react_native4.TouchableOpacity,
       {
         style: { width: "100%" },
         onPress: onClick,
@@ -395,7 +478,7 @@ var Icon = import_react7.default.forwardRef(
         testID: `${testId}-pressable`
       },
       iconView
-    )) : /* @__PURE__ */ import_react7.default.createElement(import_react_native3.View, { style: styles.rootView, testID: testId, ref }, iconView);
+    )) : /* @__PURE__ */ import_react7.default.createElement(import_react_native4.View, { style: styles.rootView, testID: testId, ref }, iconView);
   }
 );
 Icon.displayName = "Icon" /* Icon */;
@@ -414,7 +497,7 @@ var import_react8 = require("react");
 
 // components/columns/column/Column.native.tsx
 var import_react9 = __toESM(require("react"));
-var import_react_native4 = require("react-native");
+var import_react_native5 = require("react-native");
 var Column = import_react9.default.memo(
   import_react9.default.forwardRef(
     ({ children, narrow, size, verticalAlign, ...others }, ref) => {
@@ -445,7 +528,7 @@ var Column = import_react9.default.memo(
         [verticalAlign]
       );
       return /* @__PURE__ */ import_react9.default.createElement(
-        import_react_native4.View,
+        import_react_native5.View,
         {
           ref,
           style: [scrollable && scrollableStyle, !scrollable && noScrollableStyle, justifyContentStyle],
@@ -479,7 +562,7 @@ var FlexBox = import_react11.default.forwardRef(
       (event) => {
         if (!width) {
           const { width: width2 } = event.nativeEvent.layout;
-          if (fullBleed) setEnlarge((import_react_native5.Dimensions.get("screen").width - width2) / 2);
+          if (fullBleed) setEnlarge((import_react_native6.Dimensions.get("screen").width - width2) / 2);
           setWidth(width2);
         }
       },
@@ -487,7 +570,7 @@ var FlexBox = import_react11.default.forwardRef(
     );
     const gapIndex = gap && typeof gap === "number" && gap || gap && (gap == null ? void 0 : gap.mobile) || 0;
     const realGap = import_react11.default.useMemo(() => typeof gap === "undefined" ? 8 : ColumnsGapValue[gapIndex], [gap]);
-    const styles = import_react_native5.StyleSheet.create({
+    const styles = import_react_native6.StyleSheet.create({
       columns: {
         flexDirection: !isValueDirection ? direction == null ? void 0 : direction.mobile : direction,
         gap: realGap,
@@ -500,7 +583,9 @@ var FlexBox = import_react11.default.forwardRef(
       },
       columnsScrollable: {
         paddingHorizontal: enlarge,
-        gap: realGap
+        gap: realGap,
+        alignItems: !isValueAlign ? getAlignStyle(align == null ? void 0 : align.mobile) : getAlignStyle(align),
+        justifyContent: !isValueJustify ? getJustifyStyle(justify == null ? void 0 : justify.mobile) : getJustifyStyle(justify)
       }
     });
     return /* @__PURE__ */ import_react11.default.createElement(
@@ -513,9 +598,9 @@ var FlexBox = import_react11.default.forwardRef(
           childrenLength: import_react11.default.Children.count(children)
         }
       },
-      !scrollable && /* @__PURE__ */ import_react11.default.createElement(import_react_native5.View, { id, ref, onLayout: onLayoutHandler, style: [styles.columns], ...others }, children),
+      !scrollable && /* @__PURE__ */ import_react11.default.createElement(import_react_native6.View, { id, ref, onLayout: onLayoutHandler, style: [styles.columns], ...others }, children),
       scrollable && /* @__PURE__ */ import_react11.default.createElement(
-        import_react_native5.View,
+        import_react_native6.View,
         {
           id,
           onLayout: onLayoutHandler,
@@ -524,7 +609,7 @@ var FlexBox = import_react11.default.forwardRef(
           }
         },
         /* @__PURE__ */ import_react11.default.createElement(
-          import_react_native5.ScrollView,
+          import_react_native6.ScrollView,
           {
             horizontal: true,
             contentContainerStyle: styles.columnsScrollable,

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

@@ -1,64 +1,64 @@
 "use client";
 import {
   FlexBox_native_default
-} from "../../chunk-6GGZCKVV.mjs";
+} from "../../chunk-WEN3Q6CZ.mjs";
 import "../../chunk-7OJ5USHM.mjs";
 import "../../chunk-BPUIBIGG.mjs";
-import "../../chunk-ZNF2AXYR.mjs";
-import "../../chunk-NRTMJLXK.mjs";
+import "../../chunk-WWWZCWQK.mjs";
+import "../../chunk-V4SC5SC7.mjs";
 import "../../chunk-LOROW3UU.mjs";
 import "../../chunk-7M6BHGK7.mjs";
+import "../../chunk-VNWHCGCD.mjs";
+import "../../chunk-5GU35YAB.mjs";
 import "../../chunk-TFNM3EBG.mjs";
-import "../../chunk-YYKMIPNP.mjs";
+import "../../chunk-IPZTVXIE.mjs";
 import "../../chunk-ZEJDFWMP.mjs";
-import "../../chunk-VNWHCGCD.mjs";
-import "../../chunk-IH4PWIOS.mjs";
-import "../../chunk-3KNG5WUQ.mjs";
+import "../../chunk-WFIXFBGQ.mjs";
 import "../../chunk-D5HHHZDS.mjs";
-import "../../chunk-YUT5XXYL.mjs";
-import "../../chunk-VN3J3W35.mjs";
+import "../../chunk-IMU5WNB3.mjs";
+import "../../chunk-YCEN6SBK.mjs";
 import "../../chunk-7L5452RP.mjs";
 import "../../chunk-2K2TD7FH.mjs";
-import "../../chunk-TRGKFKYP.mjs";
-import "../../chunk-JZARKY6T.mjs";
+import "../../chunk-5XWBQO3M.mjs";
+import "../../chunk-7M4UWOKO.mjs";
+import "../../chunk-7DJ5V2J7.mjs";
+import "../../chunk-A2OOIRKG.mjs";
 import "../../chunk-R6PFY5VS.mjs";
 import "../../chunk-KUF5FQNN.mjs";
-import "../../chunk-UZO5VCH2.mjs";
-import "../../chunk-JJA6BOVR.mjs";
 import "../../chunk-LHDHBH5T.mjs";
-import "../../chunk-3XMSRU64.mjs";
+import "../../chunk-RXBVZD3M.mjs";
 import "../../chunk-L5TMSDJR.mjs";
 import "../../chunk-GP5CJGRF.mjs";
-import "../../chunk-UTA75ELV.mjs";
-import "../../chunk-L25MU6JT.mjs";
 import "../../chunk-6TNYDJM7.mjs";
 import "../../chunk-HQXKHRER.mjs";
 import "../../chunk-NVH4ZPGW.mjs";
 import "../../chunk-62DJK35E.mjs";
 import "../../chunk-PAEZ47M2.mjs";
 import "../../chunk-A2ASOVUR.mjs";
-import "../../chunk-FTTU4DJW.mjs";
-import "../../chunk-L7CNF7H6.mjs";
+import "../../chunk-3XMSRU64.mjs";
 import "../../chunk-RJO5KKUW.mjs";
 import "../../chunk-R7HI6GOP.mjs";
 import "../../chunk-SUNBSFL4.mjs";
-import "../../chunk-THOTRBD4.mjs";
-import "../../chunk-QOEJLTZN.mjs";
+import "../../chunk-UTA75ELV.mjs";
+import "../../chunk-L25MU6JT.mjs";
 import "../../chunk-B6WC6WS2.mjs";
 import "../../chunk-MAX3RSBG.mjs";
+import "../../chunk-FTTU4DJW.mjs";
+import "../../chunk-L7CNF7H6.mjs";
 import "../../chunk-6BTWLQPI.mjs";
 import "../../chunk-G6BHSMLA.mjs";
+import "../../chunk-THOTRBD4.mjs";
 import "../../chunk-XIQL4ZTN.mjs";
 import "../../chunk-UUXUTBLZ.mjs";
-import "../../chunk-RXBVZD3M.mjs";
+import "../../chunk-QOEJLTZN.mjs";
 import "../../chunk-IGMJNGTZ.mjs";
 import "../../chunk-ATW7ITPH.mjs";
-import "../../chunk-L4UDEKQK.mjs";
-import "../../chunk-CD6DMMCL.mjs";
+import "../../chunk-DBSMMWLO.mjs";
+import "../../chunk-X63WVV4X.mjs";
 import "../../chunk-RYABO2EX.mjs";
 import "../../chunk-6IKR6FTJ.mjs";
 import "../../chunk-4UHBBNZ7.mjs";
-import "../../chunk-VDLM4YQP.mjs";
+import "../../chunk-M6FZOPDH.mjs";
 import "../../chunk-QIPGVLHJ.mjs";
 export {
   FlexBox_native_default as default

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

@@ -50,11 +50,11 @@ export default {
     "type": "enum",
     "values": [
       "undefined",
-      "AlignProps",
       "CENTER",
       "START",
       "END",
-      "STRETCH"
+      "STRETCH",
+      "AlignProps"
     ]
   },
   "justify": {

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

@@ -1,17 +1,17 @@
 "use client";
 import {
   FlexItem_default
-} from "../../../chunk-LGVBN3MW.mjs";
+} from "../../../chunk-UL7E4VXO.mjs";
 import "../../../chunk-SWVRRUW7.mjs";
 import "../../../chunk-PKMC2LCN.mjs";
-import "../../../chunk-CQLUHQ2S.mjs";
+import "../../../chunk-X6SQUIXU.mjs";
 import "../../../chunk-HZ3DFWF6.mjs";
 import "../../../chunk-XGS2TGKN.mjs";
 import "../../../chunk-SJHSDGQP.mjs";
-import "../../../chunk-CD6DMMCL.mjs";
+import "../../../chunk-X63WVV4X.mjs";
 import "../../../chunk-6IKR6FTJ.mjs";
-import "../../../chunk-5VEQNIGA.mjs";
-import "../../../chunk-VDLM4YQP.mjs";
+import "../../../chunk-OXCSBRU5.mjs";
+import "../../../chunk-M6FZOPDH.mjs";
 import "../../../chunk-QIPGVLHJ.mjs";
 export {
   FlexItem_default as default

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

@@ -37,12 +37,13 @@ module.exports = __toCommonJS(FlexItem_native_exports);
 
 // objects/facets/Alignable/index.ts
 var getAlignStyle = (alignType) => {
-  switch (alignType) {
-    case "ALIGNED_CENTER":
+  if (!alignType) return "flex-start";
+  switch (true) {
+    case ["ALIGNED_CENTER", "CENTER"].includes(alignType):
       return "center";
-    case "ALIGNED_START":
+    case ["START", "ALIGNED_START"].includes(alignType):
       return "flex-start";
-    case "ALIGNED_END":
+    case ["ALIGNED_END", "END"].includes(alignType):
       return "flex-end";
     default:
       return "flex-start";

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

@@ -1,10 +1,10 @@
 "use client";
 import {
   FlexItem_native_default
-} from "../../../chunk-ARA7YCBH.mjs";
+} from "../../../chunk-HZZLLQ65.mjs";
 import "../../../chunk-7OJ5USHM.mjs";
-import "../../../chunk-CD6DMMCL.mjs";
-import "../../../chunk-VDLM4YQP.mjs";
+import "../../../chunk-X63WVV4X.mjs";
+import "../../../chunk-M6FZOPDH.mjs";
 import "../../../chunk-QIPGVLHJ.mjs";
 export {
   FlexItem_native_default as default

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

@@ -51,7 +51,15 @@ export default {
       "ALIGNED_CENTER",
       "ALIGNED_START",
       "ALIGNED_END",
-      "ALIGNED_STRETCH"
+      "ALIGNED_STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH"
     ]
   },
   "verticalAlign": {
@@ -65,7 +73,15 @@ export default {
       "ALIGNED_CENTER",
       "ALIGNED_START",
       "ALIGNED_END",
-      "ALIGNED_STRETCH"
+      "ALIGNED_STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH"
     ]
   },
   "id": {

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

@@ -111,32 +111,6 @@ var getAlignClassName = (alignType) => {
   }
 };
 
-// objects/facets/Justifiable/index.ts
-var getJustifyClassName = (justifyContent) => {
-  switch (justifyContent) {
-    case "JUSTIFIED_CENTER":
-      return "centered";
-    case "CENTER":
-      return "justified-center";
-    case "JUSTIFIED_START":
-      return "justified-start";
-    case "START":
-      return "justified-start";
-    case "JUSTIFIED_END":
-      return "justified-end";
-    case "END":
-      return "justified-end";
-    case "SPACE_BETWEEN":
-      return "spaced-between";
-    case "SPACE_AROUND":
-      return "spaced-around";
-    case "SPACE_EVENLY":
-      return "spaced-evenly";
-    default:
-      return "justified-start";
-  }
-};
-
 // services/classify/index.ts
 function classify(prefix) {
   return (classname) => classname !== "" ? `${prefix}-${classname.toLowerCase()}` : "";
@@ -169,9 +143,29 @@ var generateWrapClassNames = ({ value, getClassName }) => {
   }
   return [];
 };
+var getJustifyClassName = (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";
+  }
+};
 var FlexBox = import_react4.default.forwardRef(
   ({ className, id, gap, direction, align, justify, wrap, scrollable, fullheight, mobile, ...others }, ref) => {
     const { styled } = useTrilogyContext();
+    const gapClasses = gap === 0 ? [is("gapless")] : generateClassNames({ value: gap, getClassName: (val) => has(`gap-${val}`) });
     const classes = hashClass(
       styled,
       (0, import_clsx.default)([
@@ -179,7 +173,7 @@ var FlexBox = import_react4.default.forwardRef(
         ...generateClassNames({ value: direction, getClassName: (val) => is(`direction-${val}`) }),
         ...generateClassNames({ value: align, getClassName: (val) => is(getAlignClassName(val)) }),
         ...generateClassNames({ value: justify, getClassName: (val) => is(getJustifyClassName(val)) }),
-        ...generateClassNames({ value: gap, getClassName: (val) => has(`gap-${val}`) }),
+        ...gapClasses,
         ...generateWrapClassNames({ value: wrap, getClassName: (val) => is(`wrap`) }),
         scrollable && is("scrollable"),
         fullheight && is("fullheight"),

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

@@ -2,22 +2,21 @@
 import "../../chunk-K7ITOY4C.mjs";
 import {
   FlexItem_default
-} from "../../chunk-LGVBN3MW.mjs";
+} from "../../chunk-UL7E4VXO.mjs";
 import {
   FlexBox_default
-} from "../../chunk-UAXY4YT3.mjs";
+} from "../../chunk-QLZP7GBB.mjs";
 import "../../chunk-A35Q44N2.mjs";
 import "../../chunk-SWVRRUW7.mjs";
 import "../../chunk-PKMC2LCN.mjs";
-import "../../chunk-CQLUHQ2S.mjs";
+import "../../chunk-X6SQUIXU.mjs";
 import "../../chunk-HZ3DFWF6.mjs";
 import "../../chunk-XGS2TGKN.mjs";
 import "../../chunk-SJHSDGQP.mjs";
-import "../../chunk-L4UDEKQK.mjs";
-import "../../chunk-CD6DMMCL.mjs";
+import "../../chunk-X63WVV4X.mjs";
 import "../../chunk-6IKR6FTJ.mjs";
-import "../../chunk-5VEQNIGA.mjs";
-import "../../chunk-VDLM4YQP.mjs";
+import "../../chunk-OXCSBRU5.mjs";
+import "../../chunk-M6FZOPDH.mjs";
 import "../../chunk-QIPGVLHJ.mjs";
 export {
   FlexBox_default as FlexBox,