@trilogy-ds/react 0.0.17-esm-cjs → 0.0.19-esm-cjs

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

@@ -1,14 +1,14 @@
 "use client";
 import {
   FlexBox_default
-} from "../../chunk-SKSWO5HE.mjs";
+} from "../../chunk-QE4JSIR3.mjs";
 import "../../chunk-A35Q44N2.mjs";
 import "../../chunk-SWVRRUW7.mjs";
 import "../../chunk-UFMRE754.mjs";
 import "../../chunk-ZB4OWTDD.mjs";
 import "../../chunk-L4UDEKQK.mjs";
-import "../../chunk-HV6TXVFA.mjs";
-import "../../chunk-NTS75UVH.mjs";
+import "../../chunk-CD6DMMCL.mjs";
+import "../../chunk-VDLM4YQP.mjs";
 import "../../chunk-QIPGVLHJ.mjs";
 export {
   FlexBox_default as default

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

@@ -66,7 +66,7 @@ var getJustifyStyle = (justifyContent) => {
 };
 
 // components/flex-box/FlexBox.native.tsx
-var import_react11 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_react_native5 = require("react-native");
 
 // components/columns/ColumnsTypes.ts
@@ -74,16 +74,28 @@ var ColumnsGapValue = [0, 4, 8, 12, 16, 24, 32, 40, 48, 54, 62];
 
 // components/columns/context/index.tsx
 var import_react = __toESM(require("react"));
-var ColumnsContext = import_react.default.createContext({
+var defaultContextValue = {
   scrollable: false,
   width: 0,
   realGap: 16,
   childrensLength: 1
-});
+};
+var ColumnsContext = import_react.default.createContext(defaultContextValue);
 
 // components/columns/Columns.native.tsx
 var import_react2 = __toESM(require("react"));
 var import_react_native = require("react-native");
+var staticStyles = import_react_native.StyleSheet.create({
+  centered: {
+    justifyContent: "center"
+  },
+  multiline: {
+    flexWrap: "wrap"
+  },
+  mobile: {
+    flexDirection: "column"
+  }
+});
 var Columns = import_react2.default.forwardRef(
   ({ children, align, gap, verticalAlign, fullBleed, scrollable, multiline, fullheight, ...others }, ref) => {
     const [width, setWidth] = (0, import_react2.useState)(0);
@@ -101,76 +113,67 @@ var Columns = import_react2.default.forwardRef(
       [fullBleed, width]
     );
     const realGap = import_react2.default.useMemo(() => typeof gap === "undefined" && 16 || ColumnsGapValue[gap], [gap]);
-    const styles = import_react_native.StyleSheet.create({
-      columns: {
-        width: fullBleed && width ? width + enlarge * 2 : "100%",
-        marginHorizontal: -enlarge,
-        paddingHorizontal: enlarge,
-        flexDirection: "row",
-        gap: realGap,
-        height: fullheight ? "100%" : "auto"
-      },
-      centered: {
-        justifyContent: "center"
-      },
-      verticalAlign: {
-        alignItems: getAlignStyle(verticalAlign)
-      },
-      multiline: {
-        flexWrap: "wrap"
-      },
-      scrollContainer: {
-        paddingHorizontal: enlarge,
-        gap: realGap
+    const dynamicStyles = import_react2.default.useMemo(
+      () => ({
+        columns: {
+          width: fullBleed && width ? width + enlarge * 2 : "100%",
+          marginHorizontal: -enlarge,
+          paddingHorizontal: enlarge,
+          flexDirection: "row",
+          gap: realGap,
+          height: fullheight ? "100%" : "auto"
+        },
+        verticalAlign: {
+          alignItems: getAlignStyle(verticalAlign)
+        },
+        scrollContainer: {
+          paddingHorizontal: enlarge,
+          gap: realGap
+        }
+      }),
+      [fullBleed, width, enlarge, realGap, fullheight, verticalAlign]
+    );
+    const contextValue = import_react2.default.useMemo(
+      () => ({
+        width,
+        realGap,
+        scrollable: scrollable || false,
+        childrensLength: import_react2.default.Children.count(children)
+      }),
+      [width, realGap, scrollable, children]
+    );
+    return /* @__PURE__ */ import_react2.default.createElement(ColumnsContext.Provider, { value: contextValue }, !scrollable && /* @__PURE__ */ import_react2.default.createElement(
+      import_react_native.View,
+      {
+        ref,
+        onLayout: onLayoutHandler,
+        style: [
+          dynamicStyles.columns,
+          multiline && staticStyles.multiline,
+          align === "ALIGNED_CENTER" /* ALIGNED_CENTER */ && staticStyles.centered,
+          verticalAlign && dynamicStyles.verticalAlign
+        ],
+        ...others
       },
-      mobile: {
-        flexDirection: "column"
-      }
-    });
-    return /* @__PURE__ */ import_react2.default.createElement(
-      ColumnsContext.Provider,
+      children
+    ), scrollable && /* @__PURE__ */ import_react2.default.createElement(
+      import_react_native.View,
       {
-        value: {
-          width,
-          realGap,
-          scrollable: scrollable || false,
-          childrensLength: import_react2.default.Children.count(children)
+        onLayout: onLayoutHandler,
+        style: {
+          marginHorizontal: -enlarge
         }
       },
-      !scrollable && /* @__PURE__ */ import_react2.default.createElement(
-        import_react_native.View,
+      /* @__PURE__ */ import_react2.default.createElement(
+        import_react_native.ScrollView,
         {
-          ref,
-          onLayout: onLayoutHandler,
-          style: [
-            styles.columns,
-            multiline && styles.multiline,
-            align === "ALIGNED_CENTER" /* ALIGNED_CENTER */ && styles.centered,
-            verticalAlign && styles.verticalAlign
-          ],
-          ...others
+          horizontal: true,
+          contentContainerStyle: dynamicStyles.scrollContainer,
+          showsHorizontalScrollIndicator: false
         },
         children
-      ),
-      scrollable && /* @__PURE__ */ import_react2.default.createElement(
-        import_react_native.View,
-        {
-          onLayout: onLayoutHandler,
-          style: {
-            marginHorizontal: -enlarge
-          }
-        },
-        /* @__PURE__ */ import_react2.default.createElement(
-          import_react_native.ScrollView,
-          {
-            horizontal: true,
-            contentContainerStyle: styles.scrollContainer,
-            showsHorizontalScrollIndicator: false
-          },
-          children
-        )
       )
-    );
+    ));
   }
 );
 Columns.displayName = "Columns" /* Columns */;
@@ -183,11 +186,11 @@ var defaultTheme = {
   colors,
   fontFamily: { regular: "poppins-regular", medium: "poppins-medium", bold: "poppins-semibold" }
 };
-var defaultContextValue = {
+var defaultContextValue2 = {
   theme: defaultTheme,
   setTheme: () => void 0
 };
-var TrilogyThemeContext = import_react3.default.createContext(defaultContextValue);
+var TrilogyThemeContext = import_react3.default.createContext(defaultContextValue2);
 
 // objects/facets/Color/index.native.tsx
 var import_react4 = require("react");
@@ -196,6 +199,7 @@ var colors = {
   ["MAIN" /* MAIN */]: ["#3d5d7e", "main", "white"],
   ["MAIN_FADE" /* MAIN_FADE */]: ["#BBC6CD", "main-fade", "white"],
   ["ACCENT" /* ACCENT */]: ["#da641b", "accent", "white"],
+  ["ACCENT_FADE" /* ACCENT_FADE */]: ["#faebe3", "accent-fade", "white"],
   ["FONT" /* FONT */]: ["#3d5d7e", "main", "white"],
   ["FONT_PLACEHOLDER" /* FONT_PLACEHOLDER */]: ["#687a87", "font-placeholder", "white"],
   ["SUCCESS" /* SUCCESS */]: ["#007B52", "success", "white"],
@@ -293,6 +297,12 @@ var Icon = import_react6.default.forwardRef(
       icon: {
         transform: isIOS ? stretched && [{ skewX: "20deg" }] || [{ skewX: "0deg" }] : []
       },
+      iconContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+        width: defaultSize,
+        height: defaultSize
+      },
       stretched: {
         justifyContent: "center",
         alignItems: "center",
@@ -347,7 +357,7 @@ var Icon = import_react6.default.forwardRef(
           }
         ));
       } else {
-        iconView = /* @__PURE__ */ import_react6.default.createElement(import_react_native3.View, { ...others }, /* @__PURE__ */ import_react6.default.createElement(
+        iconView = /* @__PURE__ */ import_react6.default.createElement(import_react_native3.View, { style: styles.iconContainer, ...others }, /* @__PURE__ */ import_react6.default.createElement(
           import_css.WithLocalSvg,
           {
             style: [styles.icon, style],
@@ -382,63 +392,58 @@ var STATUS_COLORS = {
   DEFAULT: { color: "MAIN" /* MAIN */, backgroundColor: "MAIN_FADE" /* MAIN_FADE */ }
 };
 
-// context/providerTheme/index.tsx
-var import_react7 = __toESM(require("react"));
-var defaultTheme2 = {
-  icons: {},
-  colors: {},
-  fontFamily: {}
-};
-var defaultContextValue2 = {
-  theme: defaultTheme2,
-  setTheme: () => void 0
-};
-var TrilogyThemeContext2 = import_react7.default.createContext(defaultContextValue2);
-
-// objects/Typography/TypographyBold/index.tsx
-var import_react8 = require("react");
+// objects/Typography/TypographyBold/index.native.tsx
+var import_react7 = require("react");
 
 // components/columns/column/Column.native.tsx
-var import_react9 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_react_native4 = require("react-native");
-var Column = import_react9.default.forwardRef(
-  ({ children, narrow, size, verticalAlign, ...others }, ref) => {
-    const { width, realGap, scrollable, childrensLength } = import_react9.default.useContext(ColumnsContext);
-    const scrollableStyle = import_react9.default.useMemo(
-      () => ({
-        width: size ? size / 12 * width - realGap * ((childrensLength - 1) / childrensLength) : narrow ? "auto" : width - 2 * realGap
-      }),
-      [size, narrow, width, realGap, childrensLength]
-    );
-    const noScrollableStyle = import_react9.default.useMemo(
-      () => ({
-        flex: narrow ? 0 : 1,
-        flexGrow: size || narrow ? 0 : 1,
-        flexShrink: narrow ? 1 : 0,
-        flexBasis: size ? size / 12 * width - realGap * ((childrensLength - 1) / childrensLength) : "auto"
-      }),
-      [size, narrow, width, realGap, childrensLength]
-    );
-    return /* @__PURE__ */ import_react9.default.createElement(
-      import_react_native4.View,
-      {
-        ref,
-        style: [
-          scrollable && scrollableStyle,
-          !scrollable && noScrollableStyle,
-          { justifyContent: getAlignStyle(verticalAlign) }
-        ],
-        ...others
-      },
-      children
-    );
-  }
+var Column = import_react8.default.memo(
+  import_react8.default.forwardRef(
+    ({ children, narrow, size, verticalAlign, ...others }, ref) => {
+      const { width, realGap, scrollable, childrensLength } = import_react8.default.useContext(ColumnsContext);
+      const calculatedWidth = import_react8.default.useMemo(
+        () => size ? size / 12 * width - realGap * ((childrensLength - 1) / childrensLength) : null,
+        [size, width, realGap, childrensLength]
+      );
+      const scrollableStyle = import_react8.default.useMemo(
+        () => ({
+          width: calculatedWidth || (narrow ? "auto" : width - 2 * realGap)
+        }),
+        [calculatedWidth, narrow, width, realGap]
+      );
+      const noScrollableStyle = import_react8.default.useMemo(
+        () => ({
+          flex: narrow ? 0 : 1,
+          flexGrow: size || narrow ? 0 : 1,
+          flexShrink: narrow ? 1 : 0,
+          flexBasis: calculatedWidth || "auto"
+        }),
+        [narrow, size, calculatedWidth]
+      );
+      const justifyContentStyle = import_react8.default.useMemo(
+        () => ({
+          justifyContent: getAlignStyle(verticalAlign)
+        }),
+        [verticalAlign]
+      );
+      return /* @__PURE__ */ import_react8.default.createElement(
+        import_react_native4.View,
+        {
+          ref,
+          style: [scrollable && scrollableStyle, !scrollable && noScrollableStyle, justifyContentStyle],
+          ...others
+        },
+        children
+      );
+    }
+  )
 );
 Column.displayName = "Column" /* Column */;
 
 // components/flex-box/context/index.tsx
-var import_react10 = __toESM(require("react"));
-var FlexBoxContext = import_react10.default.createContext({
+var import_react9 = __toESM(require("react"));
+var FlexBoxContext = import_react9.default.createContext({
   scrollable: false,
   width: 0,
   realGap: 16,
@@ -446,12 +451,14 @@ var FlexBoxContext = import_react10.default.createContext({
 });
 
 // components/flex-box/FlexBox.native.tsx
-var FlexBox = import_react11.default.forwardRef(
+var FlexBox = import_react10.default.forwardRef(
   ({ id, gap, direction = "row", align, justify, scrollable, fullBleed, children, fullheight, ...others }, ref) => {
-    const [width, setWidth] = (0, import_react11.useState)(0);
-    const [enlarge, setEnlarge] = (0, import_react11.useState)(0);
+    const [width, setWidth] = (0, import_react10.useState)(0);
+    const [enlarge, setEnlarge] = (0, import_react10.useState)(0);
     const isValueDirection = typeof direction === "string";
-    const onLayoutHandler = import_react11.default.useCallback(
+    const isValueAlign = typeof align === "string";
+    const isValueJustify = typeof justify === "string";
+    const onLayoutHandler = import_react10.default.useCallback(
       (event) => {
         if (!width) {
           const { width: width2 } = event.nativeEvent.layout;
@@ -462,13 +469,13 @@ var FlexBox = import_react11.default.forwardRef(
       [fullBleed, width]
     );
     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 realGap = import_react10.default.useMemo(() => typeof gap === "undefined" ? 8 : ColumnsGapValue[gapIndex], [gap]);
     const styles = import_react_native5.StyleSheet.create({
       columns: {
         flexDirection: !isValueDirection ? direction == null ? void 0 : direction.mobile : direction,
         gap: realGap,
-        alignItems: getAlignStyle(align),
-        justifyContent: getJustifyStyle(justify),
+        alignItems: !isValueAlign ? getAlignStyle(align == null ? void 0 : align.mobile) : getAlignStyle(align),
+        justifyContent: !isValueJustify ? getJustifyStyle(justify == null ? void 0 : justify.mobile) : getJustifyStyle(justify),
         width: fullBleed && width ? width + enlarge * 2 : "100%",
         marginHorizontal: -enlarge,
         paddingHorizontal: enlarge,
@@ -479,18 +486,18 @@ var FlexBox = import_react11.default.forwardRef(
         gap: realGap
       }
     });
-    return /* @__PURE__ */ import_react11.default.createElement(
+    return /* @__PURE__ */ import_react10.default.createElement(
       FlexBoxContext.Provider,
       {
         value: {
           width,
           realGap,
           scrollable: scrollable || false,
-          childrenLength: import_react11.default.Children.count(children)
+          childrenLength: import_react10.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(
+      !scrollable && /* @__PURE__ */ import_react10.default.createElement(import_react_native5.View, { id, ref, onLayout: onLayoutHandler, style: [styles.columns], ...others }, children),
+      scrollable && /* @__PURE__ */ import_react10.default.createElement(
         import_react_native5.View,
         {
           id,
@@ -499,7 +506,7 @@ var FlexBox = import_react11.default.forwardRef(
             marginHorizontal: -enlarge
           }
         },
-        /* @__PURE__ */ import_react11.default.createElement(
+        /* @__PURE__ */ import_react10.default.createElement(
           import_react_native5.ScrollView,
           {
             horizontal: true,

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

@@ -1,25 +1,27 @@
 "use client";
 import {
   FlexBox_native_default
-} from "../../chunk-SLTXO73P.mjs";
+} from "../../chunk-6GGZCKVV.mjs";
 import "../../chunk-7OJ5USHM.mjs";
 import "../../chunk-BPUIBIGG.mjs";
-import "../../chunk-UV7KNMPY.mjs";
-import "../../chunk-5RU72DNI.mjs";
-import "../../chunk-JZ3SSSRS.mjs";
+import "../../chunk-ZNF2AXYR.mjs";
+import "../../chunk-NRTMJLXK.mjs";
+import "../../chunk-LOROW3UU.mjs";
 import "../../chunk-7M6BHGK7.mjs";
 import "../../chunk-VNWHCGCD.mjs";
-import "../../chunk-SJ5DUOZ6.mjs";
+import "../../chunk-X67AAUB2.mjs";
 import "../../chunk-TFNM3EBG.mjs";
-import "../../chunk-MKOK7VNZ.mjs";
+import "../../chunk-YKUYXBXK.mjs";
 import "../../chunk-ZEJDFWMP.mjs";
-import "../../chunk-KNRXLZZP.mjs";
+import "../../chunk-MB55ARZ7.mjs";
 import "../../chunk-D5HHHZDS.mjs";
-import "../../chunk-2CYVOYRM.mjs";
+import "../../chunk-3LXODEBD.mjs";
+import "../../chunk-WVL5S3CD.mjs";
 import "../../chunk-7L5452RP.mjs";
-import "../../chunk-H6FVJB5Z.mjs";
+import "../../chunk-2K2TD7FH.mjs";
+import "../../chunk-UPP3GX33.mjs";
+import "../../chunk-E4YRRUI3.mjs";
 import "../../chunk-CWIO3GEP.mjs";
-import "../../chunk-VI2KFLCZ.mjs";
 import "../../chunk-R6PFY5VS.mjs";
 import "../../chunk-KUF5FQNN.mjs";
 import "../../chunk-RXBVZD3M.mjs";
@@ -43,20 +45,17 @@ import "../../chunk-XIQL4ZTN.mjs";
 import "../../chunk-UUXUTBLZ.mjs";
 import "../../chunk-QOEJLTZN.mjs";
 import "../../chunk-B6WC6WS2.mjs";
-import "../../chunk-K2VWHGPL.mjs";
+import "../../chunk-MAX3RSBG.mjs";
 import "../../chunk-6BTWLQPI.mjs";
 import "../../chunk-G6BHSMLA.mjs";
 import "../../chunk-THOTRBD4.mjs";
 import "../../chunk-ATW7ITPH.mjs";
 import "../../chunk-IGMJNGTZ.mjs";
-import "../../chunk-5QUXSOHX.mjs";
 import "../../chunk-L4UDEKQK.mjs";
-import "../../chunk-P372ZF3A.mjs";
-import "../../chunk-HV6TXVFA.mjs";
-import "../../chunk-CYNSXZSV.mjs";
-import "../../chunk-YK5HPRX4.mjs";
+import "../../chunk-CD6DMMCL.mjs";
+import "../../chunk-RYABO2EX.mjs";
 import "../../chunk-4UHBBNZ7.mjs";
-import "../../chunk-NTS75UVH.mjs";
+import "../../chunk-VDLM4YQP.mjs";
 import "../../chunk-QIPGVLHJ.mjs";
 export {
   FlexBox_native_default as default

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

@@ -1,28 +1,34 @@
+/// <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;
+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 type WrapProps = ResponsiveValue<boolean>;
 export interface FlexBoxProps extends CommonProps {
     children?: React.ReactNode;
     gap?: FlexBoxSize | GapSize;
     direction?: Direction | DirectionEnum | DirectionEnumValues;
-    align?: Align;
-    justify?: Justify;
+    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;
+export {};

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

@@ -1,28 +1,34 @@
+/// <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;
+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 type WrapProps = ResponsiveValue<boolean>;
 export interface FlexBoxProps extends CommonProps {
     children?: React.ReactNode;
     gap?: FlexBoxSize | GapSize;
     direction?: Direction | DirectionEnum | DirectionEnumValues;
-    align?: Align;
-    justify?: Justify;
+    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;
+export {};

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

@@ -37,15 +37,20 @@ export default {
       "undefined",
       "row",
       "column",
+      "Direction",
       "row",
       "column",
-      "Direction"
+      "row-reverse",
+      "column-reverse",
+      "row-reverse",
+      "column-reverse"
     ]
   },
   "align": {
     "type": "enum",
     "values": [
       "undefined",
+      "AlignProps",
       "CENTER",
       "START",
       "END",
@@ -56,6 +61,7 @@ export default {
     "type": "enum",
     "values": [
       "undefined",
+      "JustifyProps",
       "CENTER",
       "START",
       "END",
@@ -64,6 +70,15 @@ export default {
       "SPACE_EVENLY"
     ]
   },
+  "wrap": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true",
+      "WrapProps"
+    ]
+  },
   "scrollable": {
     "type": "boolean",
     "values": [
@@ -88,6 +103,14 @@ export default {
       "true"
     ]
   },
+  "mobile": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
   "id": {
     "type": "string",
     "values": [

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

@@ -0,0 +1,37 @@
+export default {
+  "mobile": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "T"
+    ]
+  },
+  "tablet": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "T"
+    ]
+  },
+  "desktop": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "T"
+    ]
+  },
+  "widescreen": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "T"
+    ]
+  },
+  "fullhd": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "T"
+    ]
+  }
+};