@trilogy-ds/react 0.0.1-beta-112 → 0.0.1-beta-115

package/lib/components/chips/list/ChipsList.js

@@ -8,10 +8,11 @@ import { useTrilogyContext } from "../../../context";
  * @param children {React.ReactNode}
  * @param multiple {boolean} Selection Multiple With checked icon
  */
-const ChipsList = ({ children, multiple, ...others }) => {
+const ChipsList = React.forwardRef((props, ref) => {
+    const { children, multiple, ...others } = props;
     const { styled } = useTrilogyContext();
     const classes = hashClass(styled, clsx("chips-list", multiple && is("multiple")));
-    return (React.createElement("div", { role: multiple ? "group" : "radiogroup", className: classes, ...others }, children));
-};
+    return (React.createElement("div", { ref: ref, role: 'group', className: classes, ...others }, children));
+});
 export default ChipsList;
 //# sourceMappingURL=ChipsList.js.map

package/lib/components/chips/list/ChipsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipsList.js","sourceRoot":"","sources":["../../../../components/chips/list/ChipsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAA;AAE/B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAE7C;;;;GAIG;AACH,MAAM,SAAS,GAAG,CAAC,EACjB,QAAQ,EACR,QAAQ,EACR,GAAG,MAAM,EACM,EAAe,EAAE;IAChC,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,MAAM,OAAO,GAAG,SAAS,CACvB,MAAM,EACN,IAAI,CAAC,YAAY,EAAE,QAAQ,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAC/C,CAAA;IAED,OAAO,CACL,6BAAK,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAAE,SAAS,EAAE,OAAO,KAAM,MAAM,IACzE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"ChipsList.js","sourceRoot":"","sources":["../../../../components/chips/list/ChipsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAA;AAE/B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAE7C;;;;GAIG;AACH,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAqB,EAAE,GAAoC,EAAE,EAAE;IACjG,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,GAAG,MAAM,EACV,GAAG,KAAK,CAAA;IAET,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,MAAM,OAAO,GAAG,SAAS,CACvB,MAAM,EACN,IAAI,CAAC,YAAY,EAAE,QAAQ,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAC/C,CAAA;IAED,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,OAAO,KAAM,MAAM,IACvD,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/lib/components/chips/list/ChipsListPropsDefaults.js

@@ -0,0 +1,25 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal",
+      "JSXElementConstructor<any>>"
+    ]
+  },
+  "multiple": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  }
+};

package/lib/components/columns/Columns.d.ts

@@ -1,19 +1,17 @@
-/// <reference types="react" />
+import * as React from "react";
 import { ColumnsProps } from "./ColumnsProps";
 /**
  * Columns Component
  * @param centered {boolean} Center columns
  * @param verticalCentered {boolean} Vertical centered columns
- * @param gapless {boolean} Delete margins between columns
- * @param marginSize {ColumnsSize} Delete margins between columns with Size (apply is-variable)
- * @param inlined {boolean} Make colomns scrollable to vertical
+ * @param marginSize {ColumnsSize} Delete margins between columns with Size
+ * @param scrollable {boolean} Make colomns scrollable to vertical
  * @param children {React.ReactNode}
- * @param marginless {boolean}
+ * @param marginless {boolean} delete margin
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param multiline {boolean} Multiline Columns
  * @param className {string} Additionnal CSS Classes
  * @param mobile {boolean} Responsive mode
- * @param flex {boolean} Flex direction
  */
-declare const Columns: ({ className, multiline, inlined, mobile, centered, verticalCentered, gapless, marginSize, flex, marginless, ...others }: ColumnsProps) => JSX.Element;
+declare const Columns: React.ForwardRefExoticComponent<ColumnsProps & React.RefAttributes<HTMLDivElement>>;
 export default Columns;

package/lib/components/columns/Columns.js

@@ -1,27 +1,26 @@
 import * as React from "react";
 import clsx from "clsx";
-import { is } from "../../services/classify";
+import { is, has } from "../../services/classify";
 import { hashClass } from "../../helpers";
 import { useTrilogyContext } from "../../context";
 /**
  * Columns Component
  * @param centered {boolean} Center columns
  * @param verticalCentered {boolean} Vertical centered columns
- * @param gapless {boolean} Delete margins between columns
- * @param marginSize {ColumnsSize} Delete margins between columns with Size (apply is-variable)
- * @param inlined {boolean} Make colomns scrollable to vertical
+ * @param marginSize {ColumnsSize} Delete margins between columns with Size
+ * @param scrollable {boolean} Make colomns scrollable to vertical
  * @param children {React.ReactNode}
- * @param marginless {boolean}
+ * @param marginless {boolean} delete margin
  * - -------------------------- WEB PROPERTIES -------------------------------
  * @param multiline {boolean} Multiline Columns
  * @param className {string} Additionnal CSS Classes
  * @param mobile {boolean} Responsive mode
- * @param flex {boolean} Flex direction
  */
-const Columns = ({ className, multiline, inlined, mobile, centered, verticalCentered, gapless, marginSize, flex, marginless, ...others }) => {
+const Columns = React.forwardRef((props, ref) => {
+    const { className, multiline, scrollable, nbCols, mobile, centered, verticalCentered, gap, fullBleed, marginSize, ...others } = props;
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, clsx("columns", multiline && is("multiline"), inlined && is("inlined"), mobile && is("mobile"), centered && is("centered"), verticalCentered && is("vcentered"), !marginSize && gapless && is("gapless"), !gapless && marginSize && [is("variable"), is(`${marginSize}`)], flex && is("flex"), marginless && is("marginless"), className));
-    return React.createElement("div", { className: classes, ...others });
-};
+    const classes = hashClass(styled, clsx("columns", multiline && is("multiline"), nbCols && has(`${nbCols}-cols`), fullBleed && is("fullbleed"), scrollable && is("scrollable"), gap && has(`gap-${gap}`), mobile && is("mobile"), centered && is("centered"), verticalCentered && is("vcentered"), marginSize && is(`${marginSize}`), className));
+    return React.createElement("div", { ref: ref, className: classes, ...others });
+});
 export default Columns;
 //# sourceMappingURL=Columns.js.map

package/lib/components/columns/Columns.js.map

@@ -1 +1 @@
-{"version":3,"file":"Columns.js","sourceRoot":"","sources":["../../../components/columns/Columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAE7C;;;;;;;;;;;;;;GAcG;AACH,MAAM,OAAO,GAAG,CAAC,EACf,SAAS,EACT,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,OAAO,EACP,UAAU,EACV,IAAI,EACJ,UAAU,EACV,GAAG,MAAM,EACI,EAAe,EAAE;IAC9B,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,MAAM,OAAO,GAAG,SAAS,CACvB,MAAM,EACN,IAAI,CACF,SAAS,EACT,SAAS,IAAI,EAAE,CAAC,WAAW,CAAC,EAC5B,OAAO,IAAI,EAAE,CAAC,SAAS,CAAC,EACxB,MAAM,IAAI,EAAE,CAAC,QAAQ,CAAC,EACtB,QAAQ,IAAI,EAAE,CAAC,UAAU,CAAC,EAC1B,gBAAgB,IAAI,EAAE,CAAC,WAAW,CAAC,EACnC,CAAC,UAAU,IAAI,OAAO,IAAI,EAAE,CAAC,SAAS,CAAC,EACvC,CAAC,OAAO,IAAI,UAAU,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,EAAE,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,CAAC,EAC/D,IAAI,IAAI,EAAE,CAAC,MAAM,CAAC,EAClB,UAAU,IAAI,EAAE,CAAC,YAAY,CAAC,EAC9B,SAAS,CACV,CACF,CAAA;IAED,OAAO,6BAAK,SAAS,EAAE,OAAO,KAAM,MAAM,GAAI,CAAA;AAChD,CAAC,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Columns.js","sourceRoot":"","sources":["../../../components/columns/Columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAG7C;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAkB,EAAE,GAAoC,EAAE,EAAE;IAC5F,MAAM,EACJ,SAAS,EACT,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,GAAG,EACH,SAAS,EACT,UAAU,EACV,GAAG,MAAM,EACV,GAAG,KAAK,CAAA;IAET,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,MAAM,OAAO,GAAG,SAAS,CACvB,MAAM,EACN,IAAI,CACF,SAAS,EACT,SAAS,IAAI,EAAE,CAAC,WAAW,CAAC,EAC5B,MAAM,IAAI,GAAG,CAAC,GAAG,MAAM,OAAO,CAAC,EAC/B,SAAS,IAAI,EAAE,CAAC,WAAW,CAAC,EAC5B,UAAU,IAAI,EAAE,CAAC,YAAY,CAAC,EAC9B,GAAG,IAAI,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC,EACxB,MAAM,IAAI,EAAE,CAAC,QAAQ,CAAC,EACtB,QAAQ,IAAI,EAAE,CAAC,UAAU,CAAC,EAC1B,gBAAgB,IAAI,EAAE,CAAC,WAAW,CAAC,EACnC,UAAU,IAAK,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,EAClC,SAAS,CACV,CACF,CAAA;IAED,OAAO,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,MAAM,GAAI,CAAA;AAC1D,CAAC,CAAC,CAAA;AAEF,eAAe,OAAO,CAAA"}

package/lib/components/columns/Columns.native.d.ts

@@ -6,15 +6,15 @@ import { ComponentName } from "../../components/enumsComponentsName";
  * @param children {React.ReactNode}
  * @param centered {boolean} Center columns
  * @param verticalCentered {boolean} Vertical centered columns
- * @param gapless {boolean} Delete margins between columns
- * @param marginSize {ColumnsSize} Delete margins between columns with Size (apply is-variable)
- * @param inlined {boolean} Make colomns scrollable to vertical. Don't work with props 'marginSize'
+ * @param marginSize {ColumnsSize} Removes margins between columns of the specified size
+ * @param scrollable {boolean} Makes columns vertically scrollable. Note: Incompatible with 'marginSize' prop
+ * @param gap {ColumnsGap} Gap between columns
  */
 export declare const ColumnsContext: React.Context<{
-    inlined: boolean;
+    scrollable: boolean;
 }>;
 declare const Columns: {
-    ({ children, centered, gapless, marginSize, verticalCentered, inlined, ...others }: ColumnsProps): JSX.Element;
+    ({ children, centered, gap, nbCols, verticalCentered, fullBleed, scrollable, multiline, ...others }: ColumnsProps): JSX.Element;
     displayName: ComponentName;
 };
 export default Columns;

package/lib/components/columns/Columns.native.js

@@ -1,73 +1,87 @@
-import React, { createContext } from "react";
-import { ScrollView, StyleSheet } from "react-native";
+import React, { createContext, useState } from "react";
+import { Dimensions, StyleSheet } from "react-native";
 import { View } from "../../components/view";
 import { ComponentName } from "../../components/enumsComponentsName";
+import { ScrollView } from 'react-native';
+import { ColumnsGapValue } from "../../components/columns/ColumnsTypes";
 /**
  * Columns Native Component
  * @param children {React.ReactNode}
  * @param centered {boolean} Center columns
  * @param verticalCentered {boolean} Vertical centered columns
- * @param gapless {boolean} Delete margins between columns
- * @param marginSize {ColumnsSize} Delete margins between columns with Size (apply is-variable)
- * @param inlined {boolean} Make colomns scrollable to vertical. Don't work with props 'marginSize'
+ * @param marginSize {ColumnsSize} Removes margins between columns of the specified size
+ * @param scrollable {boolean} Makes columns vertically scrollable. Note: Incompatible with 'marginSize' prop
+ * @param gap {ColumnsGap} Gap between columns
  */
-export const ColumnsContext = createContext({ inlined: false });
-const Columns = ({ children, centered, gapless, marginSize, verticalCentered, inlined, ...others }) => {
+export const ColumnsContext = createContext({ scrollable: false });
+const Columns = ({ children, centered, gap, nbCols, verticalCentered, fullBleed, scrollable, multiline, ...others }) => {
+    const [width, setWidth] = useState(0);
+    const [enlarge, setEnlarge] = useState(0);
+    const onLayoutHandler = (event) => {
+        if (!width) {
+            const { width } = event.nativeEvent.layout;
+            if (fullBleed) {
+                setEnlarge((Dimensions.get('screen').width - width) / 2);
+            }
+            setWidth(width);
+        }
+    };
+    const realGap = typeof gap === 'undefined' && 16 || ColumnsGapValue[gap];
     const styles = StyleSheet.create({
         columns: {
+            width: width ? width + (enlarge * 2) : '100%',
+            marginHorizontal: -(enlarge),
+            paddingHorizontal: enlarge,
             flexDirection: "row",
-            minWidth: "100%",
+            gap: realGap,
+            display: "flex",
+            justifyContent: 'space-evenly',
         },
         centered: {
             alignSelf: "center",
         },
         verticalAlign: {
-            justifyContent: "center",
-            flex: 1,
+            alignItems: "center"
         },
-        gapless: {
-            margin: 0,
-            padding: 0,
+        multiline: {
+            flexWrap: "wrap",
         },
-        variable: {
-            padding: marginSize || 0,
+        scrollContainer: {
+            width: 'auto',
+            paddingHorizontal: enlarge,
+            justifyContent: 'space-around',
+            gap: realGap,
         },
+        mobile: {
+            flexDirection: "column"
+        }
     });
-    if (marginSize && !inlined) {
-        return (React.createElement(View, { style: [
-                styles.columns,
-                centered,
-                verticalCentered && styles.verticalAlign,
-            ], ...others }, children && marginSize
-            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                React.Children.map(children, (child) => React.cloneElement(child, {
-                    style: [child.props.style, styles.variable],
-                }))
-            : children));
+    if (!scrollable) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(View, { style: [
+                    styles.columns,
+                    multiline && styles.multiline,
+                    centered && styles.centered,
+                    verticalCentered && styles.verticalAlign,
+                ], ...others, ...{ onLayout: onLayoutHandler } }, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            React.Children.map(children, (child) => child && React.cloneElement(child, {
+                style: [child.props.style,
+                    { width: nbCols && (width / nbCols) - realGap || child.props.size && (width * child.props.size / 12) - realGap || 'auto' },
+                    child.props.narrow && { flex: 'none', flexShrink: 1 },
+                ]
+            })))));
     }
-    if (gapless) {
-        return (React.createElement(View, { style: [
-                styles.columns,
-                centered,
-                verticalCentered && styles.verticalAlign,
-            ], ...others }, children && gapless
-            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                React.Children.map(children, (child) => React.cloneElement(child, {
-                    style: [child.props.style, styles.gapless],
-                }))
-            : children));
-    }
-    return inlined ? (React.createElement(ColumnsContext.Provider, { value: {
-            inlined: inlined,
-        } },
-        React.createElement(ScrollView, { style: { marginLeft: 16 }, showsHorizontalScrollIndicator: false, horizontal: true, contentContainerStyle: {
-                flexGrow: 1,
-            } }, children))) : (React.createElement(View, { style: [
-            styles.columns,
-            centered && styles.centered,
-            gapless && styles.gapless,
-            verticalCentered && styles.verticalAlign,
-        ], ...others }, children));
+    return React.createElement(View, { style: {
+            width: `100% + ${enlarge * 2}px`,
+            marginHorizontal: -(enlarge)
+        }, ...{ onLayout: onLayoutHandler } },
+        React.createElement(ScrollView, { horizontal: true, contentContainerStyle: styles.scrollContainer }, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        React.Children.map(children, (child) => React.cloneElement(child, {
+            style: [child.props.style, {
+                    width: width / (12 / (child.props.size || child.props.mobileSize || 12)) - 2 * realGap,
+                    flexGrow: 0,
+                }, child.props.narrow && { flex: 'none', flexShrink: 1 }],
+        }))));
 };
 Columns.displayName = ComponentName.Columns;
 export default Columns;

package/lib/components/columns/Columns.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"Columns.native.js","sourceRoot":"","sources":["../../../components/columns/Columns.native.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Columns.native.js","sourceRoot":"","sources":["../../../components/columns/Columns.native.tsx"],"names":[],"mappings":"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"}

package/lib/components/columns/ColumnsProps.d.ts

@@ -1,18 +1,18 @@
 /// <reference types="react" />
-import { ColumnsSize } from './ColumnsTypes';
-import { Marginless } from "../../objects";
+import { ColumnsSize, ColumnsGap } from './ColumnsTypes';
 /**
  * Columns Interface
  */
-export interface ColumnsProps extends Marginless {
+export interface ColumnsProps {
     children?: React.ReactNode;
     multiline?: boolean;
-    inlined?: boolean;
+    scrollable?: boolean;
     centered?: boolean;
-    gapless?: boolean;
+    gap?: ColumnsGap;
+    nbCols?: ColumnsSize;
+    fullBleed?: boolean;
     marginSize?: ColumnsSize;
     verticalCentered?: boolean;
     className?: string;
     mobile?: boolean;
-    flex?: boolean | number;
 }

package/lib/components/columns/ColumnsPropsDefaults.js

@@ -0,0 +1,124 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "multiline": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "scrollable": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "centered": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "gap": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      0,
+      4,
+      8,
+      12,
+      16,
+      24,
+      32,
+      40,
+      48,
+      56,
+      64
+    ]
+  },
+  "nbCols": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "4",
+      "1",
+      "2",
+      "3",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ]
+  },
+  "fullBleed": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "marginSize": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "4",
+      "1",
+      "2",
+      "3",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ]
+  },
+  "verticalCentered": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "mobile": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  }
+};

package/lib/components/columns/ColumnsTypes.d.ts

@@ -1 +1,4 @@
+import type { SpacerSize } from "../../components/spacer";
 export type ColumnsSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type ColumnsGap = SpacerSize;
+export declare const ColumnsGapValue: number[];

package/lib/components/columns/ColumnsTypes.js

@@ -1,2 +1,2 @@
-export {};
+export const ColumnsGapValue = [0, 4, 8, 12, 16, 24, 32, 40, 48, 54, 62];
 //# sourceMappingURL=ColumnsTypes.js.map

package/lib/components/columns/ColumnsTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnsTypes.js","sourceRoot":"","sources":["../../../components/columns/ColumnsTypes.ts"],"names":[],"mappings":""}
+{"version":3,"file":"ColumnsTypes.js","sourceRoot":"","sources":["../../../components/columns/ColumnsTypes.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,eAAe,GAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA"}

package/lib/components/columns/index.d.ts

@@ -1,4 +1,3 @@
 import Columns from './Columns';
 import ColumnsItem from './item';
-import ColumnsExample from './Columns.example';
-export { Columns, ColumnsItem, ColumnsExample };
+export { Columns, ColumnsItem };

package/lib/components/columns/index.js

@@ -1,5 +1,4 @@
 import Columns from './Columns';
 import ColumnsItem from './item';
-import ColumnsExample from './Columns.example';
-export { Columns, ColumnsItem, ColumnsExample };
+export { Columns, ColumnsItem };
 //# sourceMappingURL=index.js.map

package/lib/components/columns/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/columns/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,WAAW,MAAM,QAAQ,CAAA;AAChC,OAAO,cAAc,MAAM,mBAAmB,CAAA;AAE9C,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/columns/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,WAAW,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/lib/components/columns/item/ColumnsItem.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from "react";
 import { ColumnsItemProps } from "./ColumnsItemProps";
 /**
  * Columns Item Component - Columns Child
  * @param size {ColumnsSize} Size 1-12
- * @param verticalCenter {boolean} Vertical center Column item
+ * @param verticalCentered {boolean} Vertical center Column item
  * @param centered {boolean} center Column item
  * @param children {React.ReactNode}
  * - -------------------------- WEB PROPERTIES -------------------------------
@@ -24,5 +24,5 @@ import { ColumnsItemProps } from "./ColumnsItemProps";
  * @param fullhdOffset {ColumnsSize} Apply => is-offset-fullhd
  * @param align { Alignable | AlignableValues} align content
  */
-declare const ColumnsItem: ({ className, size, mobileSize, tabletSize, touchSize, desktopSize, widescreenSize, fullhdSize, offset, mobileOffset, tabletOffset, touchOffset, desktopOffset, widescreenOffset, fullhdOffset, narrow, verticalCenter, centered, align, ...others }: ColumnsItemProps) => JSX.Element;
+declare const ColumnsItem: React.ForwardRefExoticComponent<ColumnsItemProps & React.RefAttributes<HTMLDivElement>>;
 export default ColumnsItem;

package/lib/components/columns/item/ColumnsItem.js

@@ -7,7 +7,7 @@ import { getAlignClassName } from "../../../objects";
 /**
  * Columns Item Component - Columns Child
  * @param size {ColumnsSize} Size 1-12
- * @param verticalCenter {boolean} Vertical center Column item
+ * @param verticalCentered {boolean} Vertical center Column item
  * @param centered {boolean} center Column item
  * @param children {React.ReactNode}
  * - -------------------------- WEB PROPERTIES -------------------------------
@@ -28,10 +28,11 @@ import { getAlignClassName } from "../../../objects";
  * @param fullhdOffset {ColumnsSize} Apply => is-offset-fullhd
  * @param align { Alignable | AlignableValues} align content
  */
-const ColumnsItem = ({ className, size, mobileSize, tabletSize, touchSize, desktopSize, widescreenSize, fullhdSize, offset, mobileOffset, tabletOffset, touchOffset, desktopOffset, widescreenOffset, fullhdOffset, narrow, verticalCenter, centered, align, ...others }) => {
+const ColumnsItem = React.forwardRef((props, ref) => {
+    const { className, size, mobileSize, tabletSize, touchSize, desktopSize, widescreenSize, fullhdSize, offset, mobileOffset, tabletOffset, touchOffset, desktopOffset, widescreenOffset, fullhdOffset, narrow, verticalCentered, centered, align, ...others } = props;
     const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, clsx("column", size && is(`${size}`), mobileSize && is(`${mobileSize}-mobile`), tabletSize && is(`${tabletSize}-tablet`), touchSize && is(`${touchSize}-tablet`), desktopSize && is(`${desktopSize}-desktop`), widescreenSize && is(`${widescreenSize}-widescreen`), fullhdSize && is(`${fullhdSize}-fullhd`), offset && is(`offset-${offset}`), mobileOffset && is(`offset-${mobileOffset}-mobile`), tabletOffset && is(`offset-${tabletOffset}-tablet`), touchOffset && is(`offset-${touchOffset}-tablet`), desktopOffset && is(`offset-${desktopOffset}-desktop`), widescreenOffset && is(`offset-${widescreenOffset}-widescreen`), fullhdOffset && is(`offset-${fullhdOffset}-fullhd`), narrow && is("narrow"), verticalCenter && is("vcentered"), centered && has("text-centered"), align && is(getAlignClassName(align)), className));
-    return React.createElement("div", { className: classes, ...others });
-};
+    const classes = hashClass(styled, clsx("column", size && is(`${size}`), mobileSize && is(`${mobileSize}-mobile`), tabletSize && is(`${tabletSize}-tablet`), touchSize && is(`${touchSize}-tablet`), desktopSize && is(`${desktopSize}-desktop`), widescreenSize && is(`${widescreenSize}-widescreen`), fullhdSize && is(`${fullhdSize}-fullhd`), offset && is(`offset-${offset}`), mobileOffset && is(`offset-${mobileOffset}-mobile`), tabletOffset && is(`offset-${tabletOffset}-tablet`), touchOffset && is(`offset-${touchOffset}-tablet`), desktopOffset && is(`offset-${desktopOffset}-desktop`), widescreenOffset && is(`offset-${widescreenOffset}-widescreen`), fullhdOffset && is(`offset-${fullhdOffset}-fullhd`), narrow && is("narrow"), verticalCentered && is("vcentered"), centered && has("text-centered"), align && is(getAlignClassName(align)), className));
+    return React.createElement("div", { ref: ref, className: classes, ...others });
+});
 export default ColumnsItem;
 //# sourceMappingURL=ColumnsItem.js.map

package/lib/components/columns/item/ColumnsItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnsItem.js","sourceRoot":"","sources":["../../../../components/columns/item/ColumnsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAE7C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,WAAW,GAAG,CAAC,EACnB,SAAS,EACT,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,cAAc,EACd,UAAU,EACV,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,cAAc,EACd,QAAQ,EACR,KAAK,EACL,GAAG,MAAM,EACQ,EAAe,EAAE;IAClC,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,MAAM,OAAO,GAAG,SAAS,CACvB,MAAM,EACN,IAAI,CACF,QAAQ,EACR,IAAI,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EACrB,UAAU,IAAI,EAAE,CAAC,GAAG,UAAU,SAAS,CAAC,EACxC,UAAU,IAAI,EAAE,CAAC,GAAG,UAAU,SAAS,CAAC,EACxC,SAAS,IAAI,EAAE,CAAC,GAAG,SAAS,SAAS,CAAC,EACtC,WAAW,IAAI,EAAE,CAAC,GAAG,WAAW,UAAU,CAAC,EAC3C,cAAc,IAAI,EAAE,CAAC,GAAG,cAAc,aAAa,CAAC,EACpD,UAAU,IAAI,EAAE,CAAC,GAAG,UAAU,SAAS,CAAC,EACxC,MAAM,IAAI,EAAE,CAAC,UAAU,MAAM,EAAE,CAAC,EAChC,YAAY,IAAI,EAAE,CAAC,UAAU,YAAY,SAAS,CAAC,EACnD,YAAY,IAAI,EAAE,CAAC,UAAU,YAAY,SAAS,CAAC,EACnD,WAAW,IAAI,EAAE,CAAC,UAAU,WAAW,SAAS,CAAC,EACjD,aAAa,IAAI,EAAE,CAAC,UAAU,aAAa,UAAU,CAAC,EACtD,gBAAgB,IAAI,EAAE,CAAC,UAAU,gBAAgB,aAAa,CAAC,EAC/D,YAAY,IAAI,EAAE,CAAC,UAAU,YAAY,SAAS,CAAC,EACnD,MAAM,IAAI,EAAE,CAAC,QAAQ,CAAC,EACtB,cAAc,IAAI,EAAE,CAAC,WAAW,CAAC,EACjC,QAAQ,IAAI,GAAG,CAAC,eAAe,CAAC,EAChC,KAAK,IAAI,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,EACrC,SAAS,CACV,CACF,CAAA;IAED,OAAO,6BAAK,SAAS,EAAE,OAAO,KAAM,MAAM,GAAI,CAAA;AAChD,CAAC,CAAA;AACD,eAAe,WAAW,CAAA"}
+{"version":3,"file":"ColumnsItem.js","sourceRoot":"","sources":["../../../../components/columns/item/ColumnsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAA;AAEvB,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAE7C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAuB,EAAE,GAAoC,EAAE,EAAE;IACrG,MAAM,EACJ,SAAS,EACT,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,cAAc,EACd,UAAU,EACV,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,gBAAgB,EAChB,QAAQ,EACR,KAAK,EACL,GAAG,MAAM,EACV,GAAG,KAAK,CAAA;IAET,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,MAAM,OAAO,GAAG,SAAS,CACvB,MAAM,EACN,IAAI,CACF,QAAQ,EACR,IAAI,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EACrB,UAAU,IAAI,EAAE,CAAC,GAAG,UAAU,SAAS,CAAC,EACxC,UAAU,IAAI,EAAE,CAAC,GAAG,UAAU,SAAS,CAAC,EACxC,SAAS,IAAI,EAAE,CAAC,GAAG,SAAS,SAAS,CAAC,EACtC,WAAW,IAAI,EAAE,CAAC,GAAG,WAAW,UAAU,CAAC,EAC3C,cAAc,IAAI,EAAE,CAAC,GAAG,cAAc,aAAa,CAAC,EACpD,UAAU,IAAI,EAAE,CAAC,GAAG,UAAU,SAAS,CAAC,EACxC,MAAM,IAAI,EAAE,CAAC,UAAU,MAAM,EAAE,CAAC,EAChC,YAAY,IAAI,EAAE,CAAC,UAAU,YAAY,SAAS,CAAC,EACnD,YAAY,IAAI,EAAE,CAAC,UAAU,YAAY,SAAS,CAAC,EACnD,WAAW,IAAI,EAAE,CAAC,UAAU,WAAW,SAAS,CAAC,EACjD,aAAa,IAAI,EAAE,CAAC,UAAU,aAAa,UAAU,CAAC,EACtD,gBAAgB,IAAI,EAAE,CAAC,UAAU,gBAAgB,aAAa,CAAC,EAC/D,YAAY,IAAI,EAAE,CAAC,UAAU,YAAY,SAAS,CAAC,EACnD,MAAM,IAAI,EAAE,CAAC,QAAQ,CAAC,EACtB,gBAAgB,IAAI,EAAE,CAAC,WAAW,CAAC,EACnC,QAAQ,IAAI,GAAG,CAAC,eAAe,CAAC,EAChC,KAAK,IAAI,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,EACrC,SAAS,CACV,CACF,CAAA;IAED,OAAO,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,MAAM,GAAI,CAAA;AAC1D,CAAC,CAAC,CAAA;AAEF,eAAe,WAAW,CAAA"}

package/lib/components/columns/item/ColumnsItem.native.d.ts

@@ -4,12 +4,14 @@ import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * Columns Item Component - Columns Child
  * @param size {ColumnsSize} Size 1-12
+ * @param mobileSize {ColumnsSize} if size is missing.
  * @param children {React.ReactNode}
- * @param verticalCenter {boolean} Vertical center Column item
+ * @param verticalCentered {boolean} Vertical center Column item
  * @param centered {boolean} center Column item
+ * @param align { Alignable | AlignableValues} align content
  */
 declare const ColumnsItem: {
-    ({ children, size, verticalCenter, centered, align, ...others }: ColumnsItemProps): JSX.Element;
+    ({ children, size, mobileSize, verticalCentered, centered, align, ...others }: ColumnsItemProps): JSX.Element;
     displayName: ComponentName;
 };
 export default ColumnsItem;

package/lib/components/columns/item/ColumnsItem.native.js

@@ -1,28 +1,29 @@
 import React, { useContext } from 'react';
-import { Dimensions, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { ColumnsContext } from '../../../components/columns/Columns.native';
 import { getAlignStyle } from '../../../objects';
 import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * Columns Item Component - Columns Child
  * @param size {ColumnsSize} Size 1-12
+ * @param mobileSize {ColumnsSize} if size is missing.
  * @param children {React.ReactNode}
- * @param verticalCenter {boolean} Vertical center Column item
+ * @param verticalCentered {boolean} Vertical center Column item
  * @param centered {boolean} center Column item
+ * @param align { Alignable | AlignableValues} align content
  */
-const ColumnsItem = ({ children, size, verticalCenter, centered, align, ...others }) => {
+const ColumnsItem = ({ children, size, mobileSize, verticalCentered, centered, align, ...others }) => {
     const columnsContextValues = useContext(ColumnsContext);
+    const realSize = size || mobileSize;
     const styles = StyleSheet.create({
         columnsItem: {
-            width: columnsContextValues.inlined
-                ? (Dimensions.get('window').width - 80) / (12 / (size ? size : 1))
-                : undefined,
-            marginRight: columnsContextValues.inlined ? 16 : 0,
-            height: columnsContextValues.inlined ? '100%' : undefined,
-            flexDirection: 'column',
-            flex: columnsContextValues.inlined ? undefined : !size ? 12 : size,
-            justifyContent: verticalCenter ? 'center' : 'flex-start',
+            height: columnsContextValues.scrollable ? '100%' : undefined,
+            flex: !realSize ? 1 : realSize,
+            justifyContent: verticalCentered ? 'center' : 'flex-start',
             alignItems: centered ? 'center' : align ? getAlignStyle(align) : 'baseline',
+            flexBasis: `${(realSize ? realSize / 12 : 12) * 100}%`,
+            flexGrow: 0,
+            maxWidth: `${(realSize ? realSize : 12) / 12 * 100}%`
         },
     });
     return (React.createElement(View, { style: styles.columnsItem, ...others }, children));

package/lib/components/columns/item/ColumnsItem.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnsItem.native.js","sourceRoot":"","sources":["../../../../components/columns/item/ColumnsItem.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAEhE;;;;;;GAMG;AACH,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,MAAM,EAAoB,EAAe,EAAE;IACpH,MAAM,oBAAoB,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAEvD,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,WAAW,EAAE;YACX,KAAK,EAAE,oBAAoB,CAAC,OAAO;gBACjC,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAClE,CAAC,CAAC,SAAS;YACb,WAAW,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YAClD,MAAM,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YACzD,aAAa,EAAE,QAAQ;YACvB,IAAI,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;YAClE,cAAc,EAAE,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY;YACxD,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU;SAC5E;KACF,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,WAAW,KAAM,MAAM,IACxC,QAAQ,CACJ,CACR,CAAA;AACH,CAAC,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC,WAAW,CAAA;AAEnD,eAAe,WAAW,CAAA"}
+{"version":3,"file":"ColumnsItem.native.js","sourceRoot":"","sources":["../../../../components/columns/item/ColumnsItem.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAc,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAEhE;;;;;;;;GAQG;AACH,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,MAAM,EAAoB,EAAe,EAAE;IAClI,MAAM,oBAAoB,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAEvD,MAAM,QAAQ,GAAG,IAAI,IAAI,UAAU,CAAA;IAEnC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;QAC/B,WAAW,EAAE;YACX,MAAM,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAC5D,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ;YAC9B,cAAc,EAAE,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY;YAC1D,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU;YAC3E,SAAS,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAI,GAAG,GAAG;YACvD,QAAQ,EAAE,CAAC;YACX,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG;SACtD;KACF,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,WAAW,KAAM,MAAM,IACxC,QAAQ,CACJ,CACR,CAAA;AACH,CAAC,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC,WAAW,CAAA;AAEnD,eAAe,WAAW,CAAA"}