@trilogy-ds/react 0.0.1-beta-sc-2 → 0.0.1-beta-151

package/lib/components/chips/Chips.native.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { TouchableOpacity } from 'react-native';
-import { ChipsProps } from '../../components/chips/ChipsProps';
+/// <reference types="react" />
+import { ChipsProps } from "./ChipsProps";
+import { ComponentName } from "../../components/enumsComponentsName";
 /**
  * Chips Component - has to be in a ChipsList component
  * @param children {string} Chips content
@@ -9,5 +9,8 @@ import { ChipsProps } from '../../components/chips/ChipsProps';
  * @param active {boolean} active Render Chips Active
  * @param disabled {boolean} Disabled chips
  */
-declare const Chips: React.ForwardRefExoticComponent<ChipsProps & React.RefAttributes<TouchableOpacity>>;
+declare const Chips: {
+    ({ children, onClick, disabled, active, ...others }: ChipsProps): JSX.Element;
+    displayName: ComponentName;
+};
 export default Chips;

package/lib/components/chips/Chips.native.js

@@ -1,12 +1,12 @@
 import { __assign, __read, __rest } from "tslib";
-import React, { useContext, useEffect, useState } from 'react';
-import { StyleSheet, TouchableOpacity } from 'react-native';
-import { ChipsContext } from '../../components/chips/list/ChipsList.native';
-import { ComponentName } from '../../components/enumsComponentsName';
-import { Icon, IconColor, IconName, IconSize } from '../../components/icon';
-import { Spacer, SpacerSize } from '../../components/spacer';
-import { Text, TextLevels } from '../../components/text';
-import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
+import React, { useContext, useEffect, useState } from "react";
+import { StyleSheet, TouchableOpacity, } from "react-native";
+import { Text, TextLevels } from "../../components/text";
+import { getColorStyle, TrilogyColor } from "../../objects/facets/Color";
+import { Icon, IconColor, IconName, IconSize } from "../icon";
+import { ChipsContext } from "./list/ChipsList.native";
+import { Spacer, SpacerSize } from "../../components/spacer";
+import { ComponentName } from "../../components/enumsComponentsName";
 /**
  * Chips Component - has to be in a ChipsList component
  * @param children {string} Chips content
@@ -15,7 +15,7 @@ import { getColorStyle, TrilogyColor } from '../../objects/facets/Color';
  * @param active {boolean} active Render Chips Active
  * @param disabled {boolean} Disabled chips
  */
-var Chips = React.forwardRef(function (_a, ref) {
+var Chips = function (_a) {
     var children = _a.children, onClick = _a.onClick, disabled = _a.disabled, active = _a.active, others = __rest(_a, ["children", "onClick", "disabled", "active"]);
     var _b = __read(useState(active || false), 2), activeItem = _b[0], setActiveItem = _b[1];
     var chipsContext = useContext(ChipsContext);
@@ -35,17 +35,17 @@ var Chips = React.forwardRef(function (_a, ref) {
             margin: 6,
             borderColor: active ? getColorStyle(TrilogyColor.MAIN) : getColorStyle(TrilogyColor.NEUTRAL),
             borderWidth: 1,
-            flexDirection: 'row',
+            flexDirection: "row",
         },
         text: {
-            alignSelf: 'center',
+            alignSelf: "center",
             color: (disabled && getColorStyle(TrilogyColor.DISABLED)) ||
                 (active && getColorStyle(TrilogyColor.BACKGROUND)) ||
                 getColorStyle(TrilogyColor.MAIN),
             paddingTop: 1,
-        },
+        }
     });
-    return (React.createElement(TouchableOpacity, __assign({ ref: ref, disabled: disabled, style: styles.chips, onPress: function (e) {
+    return (React.createElement(TouchableOpacity, __assign({ disabled: disabled, style: styles.chips, onPress: function (e) {
             setActiveItem(active || false);
             if (onClick) {
                 onClick(e);
@@ -55,7 +55,7 @@ var Chips = React.forwardRef(function (_a, ref) {
             React.createElement(Icon, { size: IconSize.SMALLER, color: IconColor.WHITE, name: IconName.CHECK }),
             React.createElement(Spacer, { horizontal: true, size: SpacerSize.ONE }))),
         React.createElement(Text, { level: TextLevels.TWO, style: styles.text }, children)));
-});
+};
 Chips.displayName = ComponentName.Chips;
 export default Chips;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHMubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9jaGlwcy9DaGlwcy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzlELE9BQU8sRUFBeUIsVUFBVSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sY0FBYyxDQUFBO0FBR2xGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwwQ0FBMEMsQ0FBQTtBQUN2RSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3ZFLE9BQU8sRUFBRSxNQUFNLEVBQUUsVUFBVSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEQsT0FBTyxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNwRCxPQUFPLEVBQUUsYUFBYSxFQUFFLFlBQVksRUFBRSxNQUFNLHdCQUF3QixDQUFBO0FBRXBFOzs7Ozs7O0dBT0c7QUFFSCxJQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM1QixVQUFDLEVBQThELEVBQUUsR0FBZ0M7SUFBOUYsSUFBQSxRQUFRLGNBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxNQUFNLFlBQUEsRUFBSyxNQUFNLGNBQWhELDZDQUFrRCxDQUFGO0lBQ3pDLElBQUEsS0FBQSxPQUE4QixRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQS9ELFVBQVUsUUFBQSxFQUFFLGFBQWEsUUFBc0MsQ0FBQTtJQUN0RSxJQUFNLFlBQVksR0FBRyxVQUFVLENBQUMsWUFBWSxDQUFDLENBQUE7SUFFN0MsU0FBUyxDQUFDO1FBQ1IsYUFBYSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsQ0FBQTtJQUNoQyxDQUFDLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFBO0lBRVosSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixLQUFLLEVBQUU7WUFDTCxlQUFlLEVBQ2IsQ0FBQyxRQUFRLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxZQUFZLENBQUMsQ0FBQztnQkFDdEQsQ0FBQyxVQUFVLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQztnQkFDaEQsYUFBYSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUM7WUFDeEMsWUFBWSxFQUFFLEVBQUU7WUFDaEIsV0FBVyxFQUFFLEVBQUU7WUFDZixZQUFZLEVBQUUsRUFBRTtZQUNoQixVQUFVLEVBQUUsQ0FBQztZQUNiLGFBQWEsRUFBRSxDQUFDO1lBQ2hCLE1BQU0sRUFBRSxDQUFDO1lBQ1QsV0FBVyxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUM7WUFDNUYsV0FBVyxFQUFFLENBQUM7WUFDZCxhQUFhLEVBQUUsS0FBSztTQUNyQjtRQUNELElBQUksRUFBRTtZQUNKLFNBQVMsRUFBRSxRQUFRO1lBQ25CLEtBQUssRUFDSCxDQUFDLFFBQVEsSUFBSSxhQUFhLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUFDO2dCQUNsRCxDQUFDLE1BQU0sSUFBSSxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxDQUFDO2dCQUNsRCxhQUFhLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQztZQUNsQyxVQUFVLEVBQUUsQ0FBQztTQUNkO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUNMLG9CQUFDLGdCQUFnQixhQUNmLEdBQUcsRUFBRSxHQUFHLEVBQ1IsUUFBUSxFQUFFLFFBQVEsRUFDbEIsS0FBSyxFQUFFLE1BQU0sQ0FBQyxLQUFLLEVBQ25CLE9BQU8sRUFBRSxVQUFDLENBQXlCO1lBQ2pDLGFBQWEsQ0FBQyxNQUFNLElBQUksS0FBSyxDQUFDLENBQUE7WUFDOUIsSUFBSSxPQUFPLEVBQUU7Z0JBQ1gsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFBO2FBQ1g7UUFDSCxDQUFDLElBQ0csTUFBTTtRQUVULFlBQVksQ0FBQyxVQUFVLElBQUksTUFBTSxJQUFJLENBQ3BDO1lBQ0Usb0JBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxRQUFRLENBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxTQUFTLENBQUMsS0FBSyxFQUFFLElBQUksRUFBRSxRQUFRLENBQUMsS0FBSyxHQUFJO1lBQzlFLG9CQUFDLE1BQU0sSUFBQyxVQUFVLFFBQUMsSUFBSSxFQUFFLFVBQVUsQ0FBQyxHQUFHLEdBQUksQ0FDMUMsQ0FDSjtRQUNELG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxLQUFLLEVBQUUsTUFBTSxDQUFDLElBQUksSUFDNUMsUUFBUSxDQUNKLENBQ1UsQ0FDcEIsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsS0FBSyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsS0FBSyxDQUFBO0FBQ3ZDLGVBQWUsS0FBSyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHMubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9jaGlwcy9DaGlwcy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzlELE9BQU8sRUFBeUIsVUFBVSxFQUFFLGdCQUFnQixHQUFHLE1BQU0sY0FBYyxDQUFBO0FBRW5GLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRSxPQUFPLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLE1BQU0sU0FBUyxDQUFBO0FBQzdELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQTtBQUN0RCxPQUFPLEVBQUUsTUFBTSxFQUFFLFVBQVUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQ3hELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRTs7Ozs7OztHQU9HO0FBRUgsSUFBTSxLQUFLLEdBQUcsVUFBQyxFQU1hO0lBTFgsSUFBQSxRQUFRLGNBQUEsRUFDUixPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDUixNQUFNLFlBQUEsRUFDSCxNQUFNLGNBTFgsNkNBTUMsQ0FEVTtJQUVsQixJQUFBLEtBQUEsT0FBOEIsUUFBUSxDQUFVLE1BQU0sSUFBSSxLQUFLLENBQUMsSUFBQSxFQUEvRCxVQUFVLFFBQUEsRUFBRSxhQUFhLFFBQXNDLENBQUE7SUFDdEUsSUFBTSxZQUFZLEdBQUcsVUFBVSxDQUFDLFlBQVksQ0FBQyxDQUFBO0lBRTdDLFNBQVMsQ0FBQztRQUNSLGFBQWEsQ0FBQyxNQUFNLElBQUksS0FBSyxDQUFDLENBQUE7SUFDaEMsQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQTtJQUVaLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDL0IsS0FBSyxFQUFFO1lBQ0wsZUFBZSxFQUNiLENBQUMsUUFBUSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsWUFBWSxDQUFDLENBQUM7Z0JBQ3RELENBQUMsVUFBVSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUM7Z0JBQ2hELGFBQWEsQ0FBQyxZQUFZLENBQUMsVUFBVSxDQUFDO1lBQ3hDLFlBQVksRUFBRSxFQUFFO1lBQ2hCLFdBQVcsRUFBRSxFQUFFO1lBQ2YsWUFBWSxFQUFFLEVBQUU7WUFDaEIsVUFBVSxFQUFFLENBQUM7WUFDYixhQUFhLEVBQUUsQ0FBQztZQUNoQixNQUFNLEVBQUUsQ0FBQztZQUNULFdBQVcsRUFBRSxNQUFNLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDO1lBQzVGLFdBQVcsRUFBRSxDQUFDO1lBQ2QsYUFBYSxFQUFFLEtBQUs7U0FDckI7UUFDRCxJQUFJLEVBQUU7WUFDSixTQUFTLEVBQUUsUUFBUTtZQUNuQixLQUFLLEVBQ0gsQ0FBQyxRQUFRLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUMsQ0FBQztnQkFDbEQsQ0FBQyxNQUFNLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUMsQ0FBQztnQkFDbEQsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUM7WUFDbEMsVUFBVSxFQUFFLENBQUM7U0FDZDtLQUNGLENBQUMsQ0FBQTtJQUVGLE9BQU8sQ0FDTCxvQkFBQyxnQkFBZ0IsYUFDZixRQUFRLEVBQUUsUUFBUSxFQUNsQixLQUFLLEVBQUUsTUFBTSxDQUFDLEtBQUssRUFDbkIsT0FBTyxFQUFFLFVBQUMsQ0FBeUI7WUFDakMsYUFBYSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsQ0FBQTtZQUM5QixJQUFJLE9BQU8sRUFBRTtnQkFDWCxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUE7YUFDWDtRQUNILENBQUMsSUFDRyxNQUFNO1FBRVQsWUFBWSxDQUFDLFVBQVUsSUFBSSxNQUFNLElBQUksQ0FDcEM7WUFDRSxvQkFBQyxJQUFJLElBQ0gsSUFBSSxFQUFFLFFBQVEsQ0FBQyxPQUFPLEVBQ3RCLEtBQUssRUFBRSxTQUFTLENBQUMsS0FBSyxFQUN0QixJQUFJLEVBQUUsUUFBUSxDQUFDLEtBQUssR0FDcEI7WUFDRixvQkFBQyxNQUFNLElBQUMsVUFBVSxRQUFDLElBQUksRUFBRSxVQUFVLENBQUMsR0FBRyxHQUFHLENBQ3pDLENBQ0o7UUFDRCxvQkFBQyxJQUFJLElBQUMsS0FBSyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsS0FBSyxFQUFFLE1BQU0sQ0FBQyxJQUFJLElBQzVDLFFBQVEsQ0FDSixDQUNVLENBQ3BCLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxLQUFLLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxLQUFLLENBQUE7QUFFdkMsZUFBZSxLQUFLLENBQUEifQ==

package/lib/components/chips/ChipsProps.d.ts

@@ -1,16 +1,13 @@
 /// <reference types="react" />
 import { ClickEvent } from '../../events/OnClickEvent';
-import { Accessibility } from '../../objects/facets/Accessibility';
-import { Clickable } from '../../objects/facets/Clickable';
-import { Dev } from '../../objects/facets/Dev';
+import { Accessibility, Clickable, Dev } from '../../objects';
+import { CommonProps } from '../../objects/facets/CommonProps';
 /**
  * Chips Interface
  */
-export interface ChipsProps extends Clickable, Accessibility, Dev {
+export interface ChipsProps extends Clickable, Accessibility, Dev, CommonProps {
     children: string | React.ReactNode;
     onClick?: ClickEvent;
-    className?: string;
     active?: boolean;
     disabled?: boolean;
-    id?: string;
 }

package/lib/components/chips/ChipsPropsDefaults.js

@@ -20,13 +20,6 @@ export default {
       "ClickEvent"
     ]
   },
-  "className": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
   "active": {
     "type": "boolean",
     "values": [
@@ -43,21 +36,28 @@ export default {
       "true"
     ]
   },
-  "id": {
+  "accessibilityLabel": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "accessibilityLabel": {
+  "testId": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "testId": {
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
     "type": "string",
     "values": [
       "undefined",

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

@@ -1,2 +1,3 @@
-export { default as Chips } from '../../components/chips/Chips';
-export { default as ChipsList } from '../../components/chips/list/ChipsList';
+import Chips from './Chips';
+import ChipsList from './list/ChipsList';
+export { Chips, ChipsList };

package/lib/components/chips/index.js

@@ -1,3 +1,4 @@
-export { default as Chips } from '../../components/chips/Chips';
-export { default as ChipsList } from '../../components/chips/list/ChipsList';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NoaXBzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLElBQUksS0FBSyxFQUFFLE1BQU0sMEJBQTBCLENBQUE7QUFDM0QsT0FBTyxFQUFFLE9BQU8sSUFBSSxTQUFTLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQSJ9
+import Chips from './Chips';
+import ChipsList from './list/ChipsList';
+export { Chips, ChipsList };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NoaXBzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLFNBQVMsQ0FBQTtBQUMzQixPQUFPLFNBQVMsTUFBTSxrQkFBa0IsQ0FBQTtBQUV4QyxPQUFPLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxDQUFBIn0=

package/lib/components/chips/list/ChipsList.d.ts

@@ -1,10 +1,13 @@
-import React from 'react';
-import { ChipsListProps } from '../../../components/chips/list/ChipsListProps';
+import * as React from 'react';
+import { ChipsListProps } from './ChipsListProps';
 /**
  * ChipsList Component - Container for Chips
+ * @param className
+ * @param id
  * @param children {React.ReactNode}
  * @param multiple {boolean} Selection Multiple With checked icon
  * @param scrollable {boolean} If multiple Chips make scrollable List
+ * @param others
  */
-declare const ChipsList: React.ForwardRefExoticComponent<ChipsListProps & React.RefAttributes<HTMLDivElement>>;
+declare const ChipsList: ({ className, id, children, multiple, scrollable, ...others }: ChipsListProps) => React.JSX.Element;
 export default ChipsList;

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

@@ -1,20 +1,23 @@
 import { __assign, __rest } from "tslib";
+import * as React from 'react';
+import { is } from '../../../services';
 import clsx from 'clsx';
-import React from 'react';
-import { ComponentName } from '../../../components/enumsComponentsName';
-import { hashClass } from '../../../helpers/hashClassesHelpers';
-import { is } from '../../../services/classify';
+import { hashClass } from '../../../helpers';
+import { useTrilogyContext } from '../../../context';
 /**
  * ChipsList Component - Container for Chips
+ * @param className
+ * @param id
  * @param children {React.ReactNode}
  * @param multiple {boolean} Selection Multiple With checked icon
  * @param scrollable {boolean} If multiple Chips make scrollable List
+ * @param others
  */
-var ChipsList = React.forwardRef(function (_a, ref) {
-    var children = _a.children, multiple = _a.multiple, scrollable = _a.scrollable, others = __rest(_a, ["children", "multiple", "scrollable"]);
-    var classes = hashClass(clsx('chips-list', multiple && is('multiple'), scrollable && is('scrollable')));
-    return (React.createElement("div", __assign({ ref: ref, role: 'group', className: classes }, others), children));
-});
-ChipsList.displayName = ComponentName.ChipsList;
+var ChipsList = function (_a) {
+    var className = _a.className, id = _a.id, children = _a.children, multiple = _a.multiple, scrollable = _a.scrollable, others = __rest(_a, ["className", "id", "children", "multiple", "scrollable"]);
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('chips-list', multiple && is('multiple'), scrollable && is('scrollable'), className));
+    return (React.createElement("div", __assign({ id: id, role: "group", className: classes }, others), children));
+};
 export default ChipsList;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHNMaXN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9jaGlwcy9saXN0L0NoaXBzTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHekIsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFFeEM7Ozs7O0dBS0c7QUFDSCxJQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNoQyxVQUFDLEVBQTZELEVBQUUsR0FBOEI7SUFBM0YsSUFBQSxRQUFRLGNBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUssTUFBTSxjQUEzQyxzQ0FBNkMsQ0FBRjtJQUMxQyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRSxRQUFRLElBQUksRUFBRSxDQUFDLFVBQVUsQ0FBQyxFQUFFLFVBQVUsSUFBSSxFQUFFLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxDQUFBO0lBRXpHLE9BQU8sQ0FDTCxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLElBQUksRUFBQyxPQUFPLEVBQUMsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNLEdBQ3ZELFFBQVEsQ0FDTCxDQUNQLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUVELFNBQVMsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFNBQVMsQ0FBQTtBQUMvQyxlQUFlLFNBQVMsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHNMaXN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9jaGlwcy9saXN0L0NoaXBzTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFFL0IsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7OztHQVFHO0FBQ0gsSUFBTSxTQUFTLEdBQUcsVUFBQyxFQUE0RTtJQUExRSxJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBSyxNQUFNLGNBQTFELHlEQUE0RCxDQUFGO0lBQ25FLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FBQyxZQUFZLEVBQUUsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFBRSxVQUFVLElBQUksRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUMxRixDQUFBO0lBRUQsT0FBTyxDQUNMLHNDQUFLLEVBQUUsRUFBRSxFQUFFLEVBQUUsSUFBSSxFQUFDLE9BQU8sRUFBQyxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU0sR0FDckQsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsU0FBUyxDQUFBIn0=

package/lib/components/chips/list/ChipsList.native.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ScrollView, View } from 'react-native';
-import { ChipsListProps } from '../../../components/chips/list/ChipsListProps';
+import { ChipsListProps } from './ChipsListProps';
+import { ComponentName } from '../../../components/enumsComponentsName';
 export declare const ChipsContext: React.Context<{
     isMultiple: boolean;
 }>;
@@ -10,5 +10,8 @@ export declare const ChipsContext: React.Context<{
  * @param multiple {boolean} Selection Multiple With checked icon
  * @param scrollable {boolean} If multiple Chips make scrollable List
  */
-declare const ChipsList: React.ForwardRefExoticComponent<ChipsListProps & React.RefAttributes<View | ScrollView>>;
+declare const ChipsList: {
+    ({ children, multiple, scrollable, ...others }: ChipsListProps): JSX.Element;
+    displayName: ComponentName;
+};
 export default ChipsList;

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

@@ -9,7 +9,7 @@ export var ChipsContext = createContext({ isMultiple: false });
  * @param multiple {boolean} Selection Multiple With checked icon
  * @param scrollable {boolean} If multiple Chips make scrollable List
  */
-var ChipsList = React.forwardRef(function (_a, ref) {
+var ChipsList = function (_a) {
     var children = _a.children, multiple = _a.multiple, _b = _a.scrollable, scrollable = _b === void 0 ? true : _b, others = __rest(_a, ["children", "multiple", "scrollable"]);
     var styles = StyleSheet.create({
         container: {
@@ -17,8 +17,8 @@ var ChipsList = React.forwardRef(function (_a, ref) {
             flexDirection: 'row',
         },
     });
-    return (React.createElement(ChipsContext.Provider, { value: { isMultiple: multiple || false } }, scrollable ? (React.createElement(ScrollView, __assign({ ref: ref, horizontal: true, showsHorizontalScrollIndicator: false, style: styles.container }, others), children)) : (React.createElement(View, __assign({ style: styles.container, ref: ref }, others), children))));
-});
+    return (React.createElement(ChipsContext.Provider, { value: { isMultiple: multiple || false } }, scrollable ? (React.createElement(ScrollView, __assign({ horizontal: true, showsHorizontalScrollIndicator: false, style: styles.container }, others), children)) : (React.createElement(View, __assign({ style: styles.container }, others), children))));
+};
 ChipsList.displayName = ComponentName.ChipsList;
 export default ChipsList;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHNMaXN0Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvY2hpcHMvbGlzdC9DaGlwc0xpc3QubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxhQUFhLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDNUMsT0FBTyxFQUFFLFVBQVUsRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRzNELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRSxNQUFNLENBQUMsSUFBTSxZQUFZLEdBQUcsYUFBYSxDQUFDLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUE7QUFFaEU7Ozs7O0dBS0c7QUFDSCxJQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNoQyxVQUNFLEVBQW9FLEVBQ3BFLEdBQWlDO0lBRC9CLElBQUEsUUFBUSxjQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsa0JBQWlCLEVBQWpCLFVBQVUsbUJBQUcsSUFBSSxLQUFBLEVBQUssTUFBTSxjQUFsRCxzQ0FBb0QsQ0FBRjtJQUdsRCxJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLFNBQVMsRUFBRTtZQUNULFFBQVEsRUFBRSxNQUFNO1lBQ2hCLGFBQWEsRUFBRSxLQUFLO1NBQ3JCO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUNMLG9CQUFDLFlBQVksQ0FBQyxRQUFRLElBQUMsS0FBSyxFQUFFLEVBQUUsVUFBVSxFQUFFLFFBQVEsSUFBSSxLQUFLLEVBQUUsSUFDNUQsVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUNaLG9CQUFDLFVBQVUsYUFDVCxHQUFHLEVBQUUsR0FBNEIsRUFDakMsVUFBVSxRQUNWLDhCQUE4QixFQUFFLEtBQUssRUFDckMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxTQUFTLElBQ25CLE1BQU0sR0FFVCxRQUFRLENBQ0UsQ0FDZCxDQUFDLENBQUMsQ0FBQyxDQUNGLG9CQUFDLElBQUksYUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLFNBQVMsRUFBRSxHQUFHLEVBQUUsR0FBc0IsSUFBTSxNQUFNLEdBQ25FLFFBQVEsQ0FDSixDQUNSLENBQ3FCLENBQ3pCLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUVELFNBQVMsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFNBQVMsQ0FBQTtBQUMvQyxlQUFlLFNBQVMsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHNMaXN0Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvY2hpcHMvbGlzdC9DaGlwc0xpc3QubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxhQUFhLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDNUMsT0FBTyxFQUFFLFVBQVUsRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRTNELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRSxNQUFNLENBQUMsSUFBTSxZQUFZLEdBQUcsYUFBYSxDQUFDLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUE7QUFFaEU7Ozs7O0dBS0c7QUFDSCxJQUFNLFNBQVMsR0FBRyxVQUFDLEVBQW9FO0lBQWxFLElBQUEsUUFBUSxjQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsa0JBQWlCLEVBQWpCLFVBQVUsbUJBQUcsSUFBSSxLQUFBLEVBQUssTUFBTSxjQUFsRCxzQ0FBb0QsQ0FBRjtJQUNuRSxJQUFNLE1BQU0sR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDO1FBQy9CLFNBQVMsRUFBRTtZQUNULFFBQVEsRUFBRSxNQUFNO1lBQ2hCLGFBQWEsRUFBRSxLQUFLO1NBQ3JCO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUNMLG9CQUFDLFlBQVksQ0FBQyxRQUFRLElBQUMsS0FBSyxFQUFFLEVBQUUsVUFBVSxFQUFFLFFBQVEsSUFBSSxLQUFLLEVBQUUsSUFDNUQsVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUNaLG9CQUFDLFVBQVUsYUFBQyxVQUFVLFFBQUMsOEJBQThCLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLENBQUMsU0FBUyxJQUFNLE1BQU0sR0FDOUYsUUFBUSxDQUNFLENBQ2QsQ0FBQyxDQUFDLENBQUMsQ0FDRixvQkFBQyxJQUFJLGFBQUMsS0FBSyxFQUFFLE1BQU0sQ0FBQyxTQUFTLElBQU0sTUFBTSxHQUN0QyxRQUFRLENBQ0osQ0FDUixDQUNxQixDQUN6QixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsU0FBUyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFBO0FBRS9DLGVBQWUsU0FBUyxDQUFBIn0=

package/lib/components/chips/list/ChipsListProps.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 /**
  * ChipsList Interface
  */
-/// <reference types="react" />
-export interface ChipsListProps {
+import { CommonProps } from '../../../objects/facets/CommonProps';
+export interface ChipsListProps extends CommonProps {
     children?: React.ReactNode | React.ReactElement;
     multiple?: boolean;
     scrollable?: boolean;

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

@@ -1,5 +1,2 @@
-/**
- * ChipsList Interface
- */
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHNMaXN0UHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2NoaXBzL2xpc3QvQ2hpcHNMaXN0UHJvcHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUcifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHNMaXN0UHJvcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2NoaXBzL2xpc3QvQ2hpcHNMaXN0UHJvcHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9

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

@@ -29,5 +29,19 @@ export default {
       "false",
       "true"
     ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
   }
 };

package/lib/components/chips/list/index.d.ts

@@ -1,2 +1,2 @@
-import ChipsList from '../../../components/chips/list/ChipsList';
+import ChipsList from "./ChipsList";
 export default ChipsList;

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

@@ -1,3 +1,3 @@
-import ChipsList from '../../../components/chips/list/ChipsList';
+import ChipsList from "./ChipsList";
 export default ChipsList;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2NoaXBzL2xpc3QvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxTQUFTLE1BQU0sbUNBQW1DLENBQUE7QUFFekQsZUFBZSxTQUFTLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL2NoaXBzL2xpc3QvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxTQUFTLE1BQU0sYUFBYSxDQUFBO0FBRW5DLGVBQWUsU0FBUyxDQUFBIn0=

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

@@ -1,9 +1,10 @@
-import React from 'react';
-import { ColumnsProps } from '../../components/columns/ColumnsProps';
+import * as React from 'react';
+import { ColumnsProps } from './ColumnsProps';
 /**
  * Columns Component
  * @param centered {boolean} Center columns
  * @param verticalCentered {boolean} Vertical centered columns
+ * @param marginSize {ColumnsSize} Delete margins between columns with Size
  * @param scrollable {boolean} Make colomns scrollable to vertical
  * @param children {React.ReactNode}
  * @param marginless {boolean} delete margin
@@ -12,5 +13,5 @@ import { ColumnsProps } from '../../components/columns/ColumnsProps';
  * @param className {string} Additionnal CSS Classes
  * @param mobile {boolean} Responsive mode
  */
-declare const Columns: React.ForwardRefExoticComponent<ColumnsProps & React.RefAttributes<HTMLDivElement>>;
+declare const Columns: ({ className, id, multiline, scrollable, mobile, gap, fullBleed, marginless, align, verticalAlign, ...others }: ColumnsProps) => React.JSX.Element;
 export default Columns;

package/lib/components/columns/Columns.js

@@ -1,14 +1,15 @@
 import { __assign, __rest } from "tslib";
+import * as React from 'react';
 import clsx from 'clsx';
-import React from 'react';
-import { ComponentName } from '../../components/enumsComponentsName';
-import { hashClass } from '../../helpers';
-import { getAlignClassName } from '../../objects/facets/Alignable';
 import { has, is } from '../../services/classify';
+import { hashClass } from '../../helpers';
+import { useTrilogyContext } from '../../context';
+import { getAlignClassName, getJustifiedClassName } from '../../objects';
 /**
  * Columns Component
  * @param centered {boolean} Center columns
  * @param verticalCentered {boolean} Vertical centered columns
+ * @param marginSize {ColumnsSize} Delete margins between columns with Size
  * @param scrollable {boolean} Make colomns scrollable to vertical
  * @param children {React.ReactNode}
  * @param marginless {boolean} delete margin
@@ -17,11 +18,11 @@ import { has, is } from '../../services/classify';
  * @param className {string} Additionnal CSS Classes
  * @param mobile {boolean} Responsive mode
  */
-var Columns = React.forwardRef(function (_a, ref) {
-    var className = _a.className, multiline = _a.multiline, scrollable = _a.scrollable, mobile = _a.mobile, centered = _a.centered, gap = _a.gap, fullBleed = _a.fullBleed, verticalAlign = _a.verticalAlign, others = __rest(_a, ["className", "multiline", "scrollable", "mobile", "centered", "gap", "fullBleed", "verticalAlign"]);
-    var classes = hashClass(clsx('columns', multiline && is('multiline'), fullBleed && is('fullbleed'), scrollable && is('scrollable'), gap && has("gap-".concat(gap)), typeof gap !== 'undefined' && gap === 0 && is('gapless'), mobile && is('mobile'), centered && is('centered'), verticalAlign && is(getAlignClassName(verticalAlign)), className));
-    return React.createElement("div", __assign({ ref: ref, className: classes }, others));
-});
-Columns.displayName = ComponentName.Columns;
+var Columns = function (_a) {
+    var className = _a.className, id = _a.id, multiline = _a.multiline, scrollable = _a.scrollable, mobile = _a.mobile, gap = _a.gap, fullBleed = _a.fullBleed, marginless = _a.marginless, align = _a.align, verticalAlign = _a.verticalAlign, others = __rest(_a, ["className", "id", "multiline", "scrollable", "mobile", "gap", "fullBleed", "marginless", "align", "verticalAlign"]);
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('columns', multiline && is('multiline'), fullBleed && is('fullbleed'), scrollable && is('scrollable'), gap && has("gap-".concat(gap)), typeof gap !== 'undefined' && gap === 0 && is('gapless'), mobile && is('mobile'), align && is(getJustifiedClassName(align)), verticalAlign && is(getAlignClassName(verticalAlign)), marginless && is("marginless"), className));
+    return React.createElement("div", __assign({ id: id, className: classes }, others));
+};
 export default Columns;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvY29sdW1ucy9Db2x1bW5zLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUd6QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQTtBQUM5RCxPQUFPLEVBQUUsR0FBRyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBRTdDOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsSUFBTSxPQUFPLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDOUIsVUFDRSxFQUE4RyxFQUM5RyxHQUE4QjtJQUQ1QixJQUFBLFNBQVMsZUFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBRSxNQUFNLFlBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxHQUFHLFNBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUssTUFBTSxjQUE5RixtR0FBZ0csQ0FBRjtJQUc5RixJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLElBQUksQ0FDRixTQUFTLEVBQ1QsU0FBUyxJQUFJLEVBQUUsQ0FBQyxXQUFXLENBQUMsRUFDNUIsU0FBUyxJQUFJLEVBQUUsQ0FBQyxXQUFXLENBQUMsRUFDNUIsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDOUIsR0FBRyxJQUFJLEdBQUcsQ0FBQyxjQUFPLEdBQUcsQ0FBRSxDQUFDLEVBQ3hCLE9BQU8sR0FBRyxLQUFLLFdBQVcsSUFBSSxHQUFHLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQyxTQUFTLENBQUMsRUFDeEQsTUFBTSxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFDdEIsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFDMUIsYUFBYSxJQUFJLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsQ0FBQyxFQUNyRCxTQUFTLENBQ1YsQ0FDRixDQUFBO0lBRUQsT0FBTyxzQ0FBSyxHQUFHLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTSxFQUFJLENBQUE7QUFDMUQsQ0FBQyxDQUNGLENBQUE7QUFFRCxPQUFPLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxPQUFPLENBQUE7QUFDM0MsZUFBZSxPQUFPLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvY29sdW1ucy9Db2x1bW5zLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBRXZCLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLGlCQUFpQixFQUFFLHFCQUFxQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRXBFOzs7Ozs7Ozs7Ozs7R0FZRztBQUNILElBQU0sT0FBTyxHQUFHLFVBQUMsRUFZZTtJQVhiLElBQUEsU0FBUyxlQUFBLEVBQ1QsRUFBRSxRQUFBLEVBQ0YsU0FBUyxlQUFBLEVBQ1QsVUFBVSxnQkFBQSxFQUNWLE1BQU0sWUFBQSxFQUNOLEdBQUcsU0FBQSxFQUNILFNBQVMsZUFBQSxFQUNULFVBQVUsZ0JBQUEsRUFDVixLQUFLLFdBQUEsRUFDTCxhQUFhLG1CQUFBLEVBQ1YsTUFBTSxjQVhYLG9IQVlDLENBRFU7SUFFbEIsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUN2QixNQUFNLEVBQ04sSUFBSSxDQUNGLFNBQVMsRUFDVCxTQUFTLElBQUksRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUM1QixTQUFTLElBQUksRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUM1QixVQUFVLElBQUksRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUM5QixHQUFHLElBQUksR0FBRyxDQUFDLGNBQU8sR0FBRyxDQUFFLENBQUMsRUFDeEIsT0FBTyxHQUFHLEtBQUssV0FBVyxJQUFJLEdBQUcsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxFQUN4RCxNQUFNLElBQUksRUFBRSxDQUFDLFFBQVEsQ0FBQyxFQUN0QixLQUFLLElBQUksRUFBRSxDQUFDLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQ3pDLGFBQWEsSUFBSSxFQUFFLENBQUMsaUJBQWlCLENBQUMsYUFBYSxDQUFDLENBQUMsRUFDckQsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDOUIsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sc0NBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU0sRUFBSSxDQUFBO0FBQ3hELENBQUMsQ0FBQTtBQUVELGVBQWUsT0FBTyxDQUFBIn0=

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { View } from 'react-native';
-import { ColumnsProps } from '../../components/columns/ColumnsProps';
+import { ColumnsProps } from './ColumnsProps';
+import { ComponentName } from '../../components/enumsComponentsName';
 /**
  * Columns Native Component
  * @param children {React.ReactNode}
@@ -12,5 +12,8 @@ import { ColumnsProps } from '../../components/columns/ColumnsProps';
 export declare const ColumnsContext: React.Context<{
     scrollable: boolean;
 }>;
-declare const Columns: React.ForwardRefExoticComponent<ColumnsProps & React.RefAttributes<View>>;
+declare const Columns: {
+    ({ children, align, gap, verticalAlign, fullBleed, scrollable, multiline, ...others }: ColumnsProps): JSX.Element;
+    displayName: ComponentName;
+};
 export default Columns;

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

@@ -1,9 +1,10 @@
 import { __assign, __read, __rest } from "tslib";
 import React, { createContext, useState } from 'react';
-import { Dimensions, ScrollView, StyleSheet, View } from 'react-native';
-import { ColumnsGapValue } from '../../components/columns/ColumnsTypes';
+import { Dimensions, ScrollView, StyleSheet } from 'react-native';
+import { View } from '../../components/view';
 import { ComponentName } from '../../components/enumsComponentsName';
-import { getAlignStyle } from '../../objects/facets/Alignable';
+import { ColumnsGapValue } from '../../components/columns/ColumnsTypes';
+import { Alignable, getAlignStyle } from '../../objects';
 /**
  * Columns Native Component
  * @param children {React.ReactNode}
@@ -13,8 +14,8 @@ import { getAlignStyle } from '../../objects/facets/Alignable';
  * @param gap {GapSize} Gap between columns
  */
 export var ColumnsContext = createContext({ scrollable: false });
-var Columns = React.forwardRef(function (_a, ref) {
-    var children = _a.children, centered = _a.centered, gap = _a.gap, verticalAlign = _a.verticalAlign, fullBleed = _a.fullBleed, scrollable = _a.scrollable, multiline = _a.multiline, others = __rest(_a, ["children", "centered", "gap", "verticalAlign", "fullBleed", "scrollable", "multiline"]);
+var Columns = function (_a) {
+    var children = _a.children, align = _a.align, gap = _a.gap, verticalAlign = _a.verticalAlign, fullBleed = _a.fullBleed, scrollable = _a.scrollable, multiline = _a.multiline, others = __rest(_a, ["children", "align", "gap", "verticalAlign", "fullBleed", "scrollable", "multiline"]);
     var _b = __read(useState(0), 2), width = _b[0], setWidth = _b[1];
     var _c = __read(useState(0), 2), enlarge = _c[0], setEnlarge = _c[1];
     var onLayoutHandler = function (event) {
@@ -58,10 +59,10 @@ var Columns = React.forwardRef(function (_a, ref) {
     });
     if (!scrollable) {
         return (React.createElement(React.Fragment, null,
-            React.createElement(View, __assign({ ref: ref, style: [
+            React.createElement(View, __assign({ style: [
                     styles.columns,
                     multiline && styles.multiline,
-                    centered && styles.centered,
+                    (align === Alignable.ALIGNED_CENTER) && styles.centered,
                     verticalAlign && styles.verticalAlign,
                 ] }, others, { onLayout: onLayoutHandler }), 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -76,8 +77,8 @@ var Columns = React.forwardRef(function (_a, ref) {
                     });
             }))));
     }
-    return (React.createElement(View, __assign({ ref: ref, style: {
-            // width: `100% + ${enlarge * 2}px`,
+    return (React.createElement(View, __assign({ style: {
+            width: "100% + ".concat(enlarge * 2, "px"),
             marginHorizontal: -enlarge,
         } }, { onLayout: onLayoutHandler }),
         React.createElement(ScrollView, { horizontal: true, contentContainerStyle: styles.scrollContainer }, 
@@ -94,7 +95,7 @@ var Columns = React.forwardRef(function (_a, ref) {
                 ],
             });
         }))));
-});
+};
 Columns.displayName = ComponentName.Columns;
 export default Columns;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NvbHVtbnMvQ29sdW1ucy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLGFBQWEsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdEQsT0FBTyxFQUFFLFVBQVUsRUFBcUIsVUFBVSxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFHMUYsT0FBTyxFQUFFLGVBQWUsRUFBVyxNQUFNLG1DQUFtQyxDQUFBO0FBQzVFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFFMUQ7Ozs7Ozs7R0FPRztBQUVILE1BQU0sQ0FBQyxJQUFNLGNBQWMsR0FBRyxhQUFhLENBQUMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQTtBQUVsRSxJQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUM5QixVQUNFLEVBQXFHLEVBQ3JHLEdBQW9CO0lBRGxCLElBQUEsUUFBUSxjQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsR0FBRyxTQUFBLEVBQUUsYUFBYSxtQkFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBRSxTQUFTLGVBQUEsRUFBSyxNQUFNLGNBQXJGLHdGQUF1RixDQUFGO0lBRy9FLElBQUEsS0FBQSxPQUFvQixRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUEsRUFBOUIsS0FBSyxRQUFBLEVBQUUsUUFBUSxRQUFlLENBQUE7SUFDL0IsSUFBQSxLQUFBLE9BQXdCLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBQSxFQUFsQyxPQUFPLFFBQUEsRUFBRSxVQUFVLFFBQWUsQ0FBQTtJQUV6QyxJQUFNLGVBQWUsR0FBRyxVQUFDLEtBQXdCO1FB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NvbHVtbnMvQ29sdW1ucy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLGFBQWEsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdEQsT0FBTyxFQUFFLFVBQVUsRUFBcUIsVUFBVSxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUNwRixPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFeEMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxlQUFlLEVBQVcsTUFBTSxtQ0FBbUMsQ0FBQTtBQUM1RSxPQUFPLEVBQUUsU0FBUyxFQUFFLGFBQWEsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUVwRDs7Ozs7OztHQU9HO0FBRUgsTUFBTSxDQUFDLElBQU0sY0FBYyxHQUFHLGFBQWEsQ0FBQyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFBO0FBRWxFLElBQU0sT0FBTyxHQUFHLFVBQUMsRUFTRjtJQVJiLElBQUEsUUFBUSxjQUFBLEVBQ1IsS0FBSyxXQUFBLEVBQ0wsR0FBRyxTQUFBLEVBQ0gsYUFBYSxtQkFBQSxFQUNiLFNBQVMsZUFBQSxFQUNULFVBQVUsZ0JBQUEsRUFDVixTQUFTLGVBQUEsRUFDTixNQUFNLGNBUk0scUZBU2hCLENBRFU7SUFFSCxJQUFBLEtBQUEsT0FBb0IsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFBLEVBQTlCLEtBQUssUUFBQSxFQUFFLFFBQVEsUUFBZSxDQUFBO0lBQy9CLElBQUEsS0FBQSxPQUF3QixRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUEsRUFBbEMsT0FBTyxRQUFBLEVBQUUsVUFBVSxRQUFlLENBQUE7SUFFekMsSUFBTSxlQUFlLEdBQUcsVUFBQyxLQUF3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

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

@@ -1,17 +1,16 @@
 /// <reference types="react" />
-import { GapSize } from '../../components/columns/ColumnsTypes';
-import { Alignable, AlignableValues } from '../../objects/facets/Alignable';
+import { GapSize } from './ColumnsTypes';
+import { AlignableProps } from '../../objects';
+import { CommonProps } from '../../objects/facets/CommonProps';
 /**
  * Columns Interface
  */
-export interface ColumnsProps {
+export interface ColumnsProps extends AlignableProps, CommonProps {
     children?: React.ReactNode;
     multiline?: boolean;
     scrollable?: boolean;
-    centered?: boolean;
     gap?: GapSize;
     fullBleed?: boolean;
-    className?: string;
     mobile?: boolean;
-    verticalAlign?: Alignable | AlignableValues;
+    marginless?: boolean;
 }

package/lib/components/columns/ColumnsPropsDefaults.js

@@ -29,14 +29,6 @@ export default {
       "true"
     ]
   },
-  "centered": {
-    "type": "boolean",
-    "values": [
-      "undefined",
-      "false",
-      "true"
-    ]
-  },
   "gap": {
     "type": "enum",
     "values": [
@@ -62,14 +54,15 @@ export default {
       "true"
     ]
   },
-  "className": {
-    "type": "string",
+  "mobile": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "string"
+      "false",
+      "true"
     ]
   },
-  "mobile": {
+  "marginless": {
     "type": "boolean",
     "values": [
       "undefined",
@@ -77,6 +70,18 @@ export default {
       "true"
     ]
   },
+  "align": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END"
+    ]
+  },
   "verticalAlign": {
     "type": "enum",
     "values": [
@@ -88,5 +93,19 @@ export default {
       "ALIGNED_START",
       "ALIGNED_END"
     ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
   }
 };

package/lib/components/columns/{item/ColumnsItem.d.ts → column/Column.d.ts}

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ColumnsItemProps } from '../../../components/columns/item/ColumnsItemProps';
+import * as React from 'react';
+import { ColumnProps } from './ColumnProps';
 /**
  * Columns Item Component - Columns Child
  * @param size {ColumnsSize} Size 1-12
@@ -22,7 +22,7 @@ import { ColumnsItemProps } from '../../../components/columns/item/ColumnsItemPr
  * @param desktopOffset {ColumnsSize} Apply => is-offset-desktop
  * @param widescreenOffset {ColumnsSize} Apply => is-offset-widescreen
  * @param fullhdOffset {ColumnsSize} Apply => is-offset-fullhd
- * @param verticalAlign { Alignable | AlignableValues} vertical align content
+ * @param align { Alignable | AlignableValues} align content
  */
-declare const ColumnsItem: React.ForwardRefExoticComponent<ColumnsItemProps & React.RefAttributes<HTMLDivElement>>;
-export default ColumnsItem;
+declare const Column: ({ className, id, size, mobileSize, tabletSize, touchSize, desktopSize, widescreenSize, fullhdSize, offset, mobileOffset, tabletOffset, touchOffset, desktopOffset, widescreenOffset, fullhdOffset, narrow, verticalAlign, ...others }: ColumnProps) => React.JSX.Element;
+export default Column;