@trilogy-ds/react 0.0.1-beta-130 → 0.0.1-beta-133

package/lib/components/checkbox/tiles/tile/CheckboxTile.js

@@ -0,0 +1,36 @@
+import { __assign, __read, __rest } from "tslib";
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import clsx from 'clsx';
+import { is } from '../../../../services/classify';
+import { hashClass } from '../../../../helpers';
+import { useTrilogyContext } from '../../../../context';
+import { Icon, IconSize } from '../../../../components/icon';
+import shortid from 'shortid';
+/**
+ * Columns Item Component - Columns Child
+ * @param size {ColumnsSize} Size 1-12
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additionnal CSS Classes
+ */
+var CheckboxTile = function (_a) {
+    var checked = _a.checked, className = _a.className, disabled = _a.disabled, readonly = _a.readonly, _b = _a.id, id = _b === void 0 ? shortid.generate() : _b, label = _a.label, onChange = _a.onChange, name = _a.name, value = _a.value, description = _a.description, icon = _a.icon, horizontal = _a.horizontal, others = __rest(_a, ["checked", "className", "disabled", "readonly", "id", "label", "onChange", "name", "value", "description", "icon", "horizontal"]);
+    var styled = useTrilogyContext().styled;
+    var _c = __read(useState(checked || false), 2), _checked = _c[0], setChecked = _c[1];
+    useEffect(function () {
+        if (!readonly) {
+            setChecked(checked || false);
+        }
+    }, [checked, readonly]);
+    return (React.createElement("div", { className: hashClass(styled, clsx('checkbox-tile', horizontal && is('horizontal'), className)), tabIndex: 0 },
+        React.createElement("input", __assign({ "aria-checked": checked, type: 'checkbox', readOnly: readonly, id: id, disabled: disabled, name: name, value: value, checked: readonly ? checked : _checked, onChange: function (e) { return (onChange ? onChange : setChecked(e.target.checked)); } }, others)),
+        React.createElement("label", { htmlFor: id, className: hashClass(styled, clsx('checkbox-label')) },
+            icon && React.createElement(Icon, { name: icon, size: IconSize.MEDIUM }),
+            horizontal ? (React.createElement("span", null,
+                React.createElement("span", { className: hashClass(styled, clsx('checkbox-title')) }, label),
+                description && React.createElement("span", { className: hashClass(styled, clsx('checkbox-description')) }, description))) : (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: hashClass(styled, clsx('checkbox-title')) }, label),
+                description && React.createElement("span", { className: hashClass(styled, clsx('checkbox-description')) }, description))))));
+};
+export default CheckboxTile;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hlY2tib3hUaWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vY29tcG9uZW50cy9jaGVja2JveC90aWxlcy90aWxlL0NoZWNrYm94VGlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzNDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUV2QixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDeEMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNsRCxPQUFPLE9BQU8sTUFBTSxTQUFTLENBQUE7QUFFN0I7Ozs7O0dBS0c7QUFDSCxJQUFNLFlBQVksR0FBRyxVQUFDLEVBY0Y7SUFibEIsSUFBQSxPQUFPLGFBQUEsRUFDUCxTQUFTLGVBQUEsRUFDVCxRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixVQUF1QixFQUF2QixFQUFFLG1CQUFHLE9BQU8sQ0FBQyxRQUFRLEVBQUUsS0FBQSxFQUN2QixLQUFLLFdBQUEsRUFDTCxRQUFRLGNBQUEsRUFDUixJQUFJLFVBQUEsRUFDSixLQUFLLFdBQUEsRUFDTCxXQUFXLGlCQUFBLEVBQ1gsSUFBSSxVQUFBLEVBQ0osVUFBVSxnQkFBQSxFQUNQLE1BQU0sY0FiVyxpSUFjckIsQ0FEVTtJQUVELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRWhDLElBQUEsS0FBQSxPQUF5QixRQUFRLENBQVUsT0FBTyxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQTNELFFBQVEsUUFBQSxFQUFFLFVBQVUsUUFBdUMsQ0FBQTtJQUVsRSxTQUFTLENBQUM7UUFDUixJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2IsVUFBVSxDQUFDLE9BQU8sSUFBSSxLQUFLLENBQUMsQ0FBQTtTQUM3QjtJQUNILENBQUMsRUFBRSxDQUFDLE9BQU8sRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUFBO0lBRXZCLE9BQU8sQ0FDTCw2QkFBSyxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsZUFBZSxFQUFFLFVBQVUsSUFBSSxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsRUFBRSxRQUFRLEVBQUUsQ0FBQztRQUM5Ryx3REFDZ0IsT0FBTyxFQUNyQixJQUFJLEVBQUMsVUFBVSxFQUNmLFFBQVEsRUFBRSxRQUFRLEVBQ2xCLEVBQUUsRUFBRSxFQUFFLEVBQ04sUUFBUSxFQUFFLFFBQVEsRUFDbEIsSUFBSSxFQUFFLElBQUksRUFDVixLQUFLLEVBQUUsS0FBSyxFQUNaLE9BQU8sRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsUUFBUSxFQUN0QyxRQUFRLEVBQUUsVUFBQyxDQUFDLElBQUssT0FBQSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQyxFQUFwRCxDQUFvRCxJQUNqRSxNQUFNLEVBQ1Y7UUFDRiwrQkFBTyxPQUFPLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxTQUFTLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1lBQ3JFLElBQUksSUFBSSxvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsUUFBUSxDQUFDLE1BQU0sR0FBSTtZQUNuRCxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQ1o7Z0JBQ0UsOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUMsSUFBRyxLQUFLLENBQVE7Z0JBQ3pFLFdBQVcsSUFBSSw4QkFBTSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsc0JBQXNCLENBQUMsQ0FBQyxJQUFHLFdBQVcsQ0FBUSxDQUNqRyxDQUNSLENBQUMsQ0FBQyxDQUFDLENBQ0Y7Z0JBQ0UsOEJBQU0sU0FBUyxFQUFFLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUMsSUFBRyxLQUFLLENBQVE7Z0JBQ3pFLFdBQVcsSUFBSSw4QkFBTSxTQUFTLEVBQUUsU0FBUyxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsc0JBQXNCLENBQUMsQ0FBQyxJQUFHLFdBQVcsQ0FBUSxDQUNyRyxDQUNKLENBQ0ssQ0FDSixDQUNQLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLFlBQVksQ0FBQSJ9

package/lib/components/checkbox/tiles/tile/CheckboxTileProps.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IconName, IconNameValues } from '../../../../components/icon';
+import { CheckboxProps } from '../../../../components/checkbox/CheckboxProps';
+import { CommonProps } from '../../../../objects/facets/CommonProps';
+/**
+ * Columns Item Interface
+ */
+export interface CheckboxTileProps extends CheckboxProps, CommonProps {
+    horizontal?: boolean;
+    icon?: IconName | IconNameValues;
+    description?: string | React.ReactNode;
+}

package/lib/components/checkbox/tiles/tile/CheckboxTileProps.js

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

package/lib/components/{icon/text/TextIconPropsDefaults.js → checkbox/tiles/tile/CheckboxTilePropsDefaults.js}

@@ -1,28 +1,16 @@
 export default {
-  "color": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
-  "content": {
-    "type": "react",
+  "horizontal": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "null",
-      "string",
-      "number",
       "false",
-      "true",
-      "JSXElementConstructor<any>>",
-      "ReactNode>",
-      "ReactPortal"
+      "true"
     ]
   },
-  "name": {
+  "icon": {
     "type": "enum",
     "values": [
+      "undefined",
       "tri-alert",
       "tri-arrow-down",
       "tri-arrow-left",
@@ -71,25 +59,7 @@ export default {
       "tri-picto-payment-visa"
     ]
   },
-  "size": {
-    "type": "string",
-    "values": []
-  },
-  "position": {
-    "type": "enum",
-    "values": [
-      "undefined",
-      "up",
-      "down",
-      "left",
-      "right",
-      "up",
-      "down",
-      "left",
-      "right"
-    ]
-  },
-  "stretched": {
+  "description": {
     "type": "react",
     "values": [
       "undefined",
@@ -103,7 +73,7 @@ export default {
       "ReactPortal"
     ]
   },
-  "stacked": {
+  "checked": {
     "type": "boolean",
     "values": [
       "undefined",
@@ -111,28 +81,48 @@ export default {
       "true"
     ]
   },
-  "align": {
-    "type": "enum",
+  "disabled": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END"
+      "false",
+      "true"
     ]
   },
-  "verticalAlign": {
-    "type": "enum",
+  "readonly": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END",
-      "ALIGNED_CENTER",
-      "ALIGNED_START",
-      "ALIGNED_END"
+      "false",
+      "true"
+    ]
+  },
+  "label": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "onChange": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "CheckboxChangeEventHandler"
+    ]
+  },
+  "name": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "value": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
     ]
   },
   "accessibilityLabel": {
@@ -142,7 +132,14 @@ export default {
       "string"
     ]
   },
-  "testId": {
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
     "type": "string",
     "values": [
       "undefined",

package/lib/components/checkbox/tiles/tile/index.d.ts

@@ -0,0 +1,2 @@
+import CheckboxTile from './CheckboxTile';
+export default CheckboxTile;

package/lib/components/checkbox/tiles/tile/index.js

@@ -0,0 +1,3 @@
+import CheckboxTile from './CheckboxTile';
+export default CheckboxTile;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9jb21wb25lbnRzL2NoZWNrYm94L3RpbGVzL3RpbGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxZQUFZLE1BQU0sZ0JBQWdCLENBQUE7QUFFekMsZUFBZSxZQUFZLENBQUEifQ==

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

@@ -12,5 +12,5 @@ import { ChipsProps } from "./ChipsProps";
  * @param testId {string} Test Id for Test Integration
  * @param others
  */
-declare const Chips: ({ className, onClick, children, active, disabled, id, testId, ...others }: ChipsProps) => JSX.Element;
+declare const Chips: ({ className, onClick, children, active, disabled, id, ...others }: ChipsProps) => JSX.Element;
 export default Chips;

package/lib/components/chips/Chips.js

@@ -17,12 +17,12 @@ import { useTrilogyContext } from "../../context";
  * @param others
  */
 var Chips = function (_a) {
-    var className = _a.className, onClick = _a.onClick, children = _a.children, active = _a.active, disabled = _a.disabled, id = _a.id, testId = _a.testId, others = __rest(_a, ["className", "onClick", "children", "active", "disabled", "id", "testId"]);
+    var className = _a.className, onClick = _a.onClick, children = _a.children, active = _a.active, disabled = _a.disabled, id = _a.id, others = __rest(_a, ["className", "onClick", "children", "active", "disabled", "id"]);
     var styled = useTrilogyContext().styled;
     var classes = hashClass(styled, clsx("chips", active && is("active"), className));
-    return (React.createElement("button", __assign({}, { disabled: disabled }, { "aria-disabled": disabled, "data-testid": testId, id: id, "aria-pressed": !!active, className: classes, onClick: function (e) {
+    return (React.createElement("button", __assign({}, { disabled: disabled }, { "aria-disabled": disabled, id: id, "aria-pressed": !!active, className: classes, onClick: function (e) {
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
         } }, others), children));
 };
 export default Chips;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NoaXBzL0NoaXBzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQ3pCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFFL0IsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsSUFBTSxLQUFLLEdBQUcsVUFBQyxFQVNGO0lBUlgsSUFBQSxTQUFTLGVBQUEsRUFDVCxPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDUixNQUFNLFlBQUEsRUFDTixRQUFRLGNBQUEsRUFDUixFQUFFLFFBQUEsRUFDRixNQUFNLFlBQUEsRUFDSCxNQUFNLGNBUkksMEVBU2QsQ0FEVTtJQUVELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixPQUFPLEVBQ1AsTUFBTSxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFDdEIsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sQ0FDTCwyQ0FDTSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUscUJBQ1gsUUFBUSxpQkFDVixNQUFNLEVBQ25CLEVBQUUsRUFBRSxFQUFFLGtCQUNRLENBQUMsQ0FBQyxNQUFNLEVBQ3RCLFNBQVMsRUFBRSxPQUFPLEVBQ2xCLE9BQU8sRUFBRSxVQUFDLENBQUM7WUFDVCxPQUFPLGFBQVAsT0FBTyx1QkFBUCxPQUFPLENBQUcsQ0FBQyxDQUFDLENBQUE7UUFDZCxDQUFDLElBQ0csTUFBTSxHQUVULFFBQVEsQ0FDRixDQUNWLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLEtBQUssQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NoaXBzL0NoaXBzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQ3pCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFFL0IsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsSUFBTSxLQUFLLEdBQUcsVUFBQyxFQVFGO0lBUFgsSUFBQSxTQUFTLGVBQUEsRUFDVCxPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDUixNQUFNLFlBQUEsRUFDTixRQUFRLGNBQUEsRUFDUixFQUFFLFFBQUEsRUFDQyxNQUFNLGNBUEksZ0VBUWQsQ0FEVTtJQUVELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixPQUFPLEVBQ1AsTUFBTSxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFDdEIsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sQ0FDTCwyQ0FDTSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUscUJBQ1gsUUFBUSxFQUN2QixFQUFFLEVBQUUsRUFBRSxrQkFDUSxDQUFDLENBQUMsTUFBTSxFQUN0QixTQUFTLEVBQUUsT0FBTyxFQUNsQixPQUFPLEVBQUUsVUFBQyxDQUFDO1lBQ1QsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLENBQUMsQ0FBQyxDQUFBO1FBQ2QsQ0FBQyxJQUNHLE1BQU0sR0FFVCxRQUFRLENBQ0YsQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxLQUFLLENBQUEifQ==

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

@@ -1,14 +1,13 @@
 /// <reference types="react" />
 import { ClickEvent } from '../../events/OnClickEvent';
 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/list/ChipsList.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { ChipsListProps } from "./ChipsListProps";
+import * as React from 'react';
+import { ChipsListProps } from './ChipsListProps';
 /**
  * ChipsList Component - Container for Chips
  * @param children {React.ReactNode}

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

@@ -1,9 +1,9 @@
 import { __assign, __rest } from "tslib";
-import * as React from "react";
-import { is } from "../../../services";
-import clsx from "clsx";
-import { hashClass } from "../../../helpers";
-import { useTrilogyContext } from "../../../context";
+import * as React from 'react';
+import { is } from '../../../services';
+import clsx from 'clsx';
+import { hashClass } from '../../../helpers';
+import { useTrilogyContext } from '../../../context';
 /**
  * ChipsList Component - Container for Chips
  * @param children {React.ReactNode}
@@ -11,10 +11,10 @@ import { useTrilogyContext } from "../../../context";
  * @param scrollable {boolean} If multiple Chips make scrollable List
  */
 var ChipsList = React.forwardRef(function (props, ref) {
-    var children = props.children, multiple = props.multiple, scrollable = props.scrollable, others = __rest(props, ["children", "multiple", "scrollable"]);
+    var className = props.className, id = props.id, children = props.children, multiple = props.multiple, scrollable = props.scrollable, others = __rest(props, ["className", "id", "children", "multiple", "scrollable"]);
     var styled = useTrilogyContext().styled;
-    var classes = hashClass(styled, clsx("chips-list", multiple && is("multiple"), scrollable && is("scrollable")));
-    return (React.createElement("div", __assign({ ref: ref, role: 'group', className: classes }, others), children));
+    var classes = hashClass(styled, clsx('chips-list', multiple && is('multiple'), scrollable && is('scrollable'), className));
+    return (React.createElement("div", __assign({ id: id, ref: ref, role: 'group', className: classes }, others), children));
 });
 export default ChipsList;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHNMaXN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9jaGlwcy9saXN0L0NoaXBzTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFFL0IsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7OztHQUtHO0FBQ0gsSUFBTSxTQUFTLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBQyxVQUFDLEtBQXFCLEVBQUUsR0FBb0M7SUFFM0YsSUFBQSxRQUFRLEdBSU4sS0FBSyxTQUpDLEVBQ1IsUUFBUSxHQUdOLEtBQUssU0FIQyxFQUNSLFVBQVUsR0FFUixLQUFLLFdBRkcsRUFDUCxNQUFNLFVBQ1AsS0FBSyxFQUxILHNDQUtMLENBRFUsQ0FDRjtJQUVELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixZQUFZLEVBQ1osUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFDMUIsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsQ0FDL0IsQ0FDRixDQUFBO0lBRUQsT0FBTyxDQUNMLHNDQUFLLEdBQUcsRUFBRSxHQUFHLEVBQUUsSUFBSSxFQUFDLE9BQU8sRUFBQyxTQUFTLEVBQUUsT0FBTyxJQUFNLE1BQU0sR0FDdkQsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQyxDQUFBO0FBRUYsZUFBZSxTQUFTLENBQUEifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHNMaXN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9jaGlwcy9saXN0L0NoaXBzTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFFL0IsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7OztHQUtHO0FBQ0gsSUFBTSxTQUFTLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBQyxVQUFDLEtBQXFCLEVBQUUsR0FBb0M7SUFDckYsSUFBQSxTQUFTLEdBQW9ELEtBQUssVUFBekQsRUFBRSxFQUFFLEdBQWdELEtBQUssR0FBckQsRUFBRSxRQUFRLEdBQXNDLEtBQUssU0FBM0MsRUFBRSxRQUFRLEdBQTRCLEtBQUssU0FBakMsRUFBRSxVQUFVLEdBQWdCLEtBQUssV0FBckIsRUFBSyxNQUFNLFVBQUssS0FBSyxFQUFwRSx5REFBNEQsQ0FBRixDQUFVO0lBQ2xFLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FBQyxZQUFZLEVBQUUsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFBRSxVQUFVLElBQUksRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUMxRixDQUFBO0lBRUQsT0FBTyxDQUNMLHNDQUFLLEVBQUUsRUFBRSxFQUFFLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxJQUFJLEVBQUMsT0FBTyxFQUFDLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTSxHQUMvRCxRQUFRLENBQ0wsQ0FDUCxDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixlQUFlLFNBQVMsQ0FBQSJ9

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/columns/Columns.d.ts

@@ -1,9 +1,10 @@
-import * as React from "react";
-import { ColumnsProps } from "./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

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 { is, has } from "../../services/classify";
-import { hashClass } from "../../helpers";
-import { useTrilogyContext } from "../../context";
-import { getAlignClassName } from "../../objects";
+import * as React from 'react';
+import clsx from 'clsx';
+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
@@ -18,10 +19,10 @@ import { getAlignClassName } from "../../objects";
  * @param mobile {boolean} Responsive mode
  */
 var Columns = React.forwardRef(function (props, ref) {
-    var className = props.className, multiline = props.multiline, scrollable = props.scrollable, mobile = props.mobile, centered = props.centered, gap = props.gap, fullBleed = props.fullBleed, verticalAlign = props.verticalAlign, others = __rest(props, ["className", "multiline", "scrollable", "mobile", "centered", "gap", "fullBleed", "verticalAlign"]);
+    var className = props.className, id = props.id, multiline = props.multiline, scrollable = props.scrollable, mobile = props.mobile, gap = props.gap, fullBleed = props.fullBleed, marginSize = props.marginSize, align = props.align, verticalAlign = props.verticalAlign, others = __rest(props, ["className", "id", "multiline", "scrollable", "mobile", "gap", "fullBleed", "marginSize", "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"), centered && is("centered"), verticalAlign && is(getAlignClassName(verticalAlign)), className));
-    return React.createElement("div", __assign({ ref: ref, className: classes }, others));
+    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)), marginSize && is("".concat(marginSize)), className));
+    return React.createElement("div", __assign({ id: id, ref: ref, className: classes }, others));
 });
 export default Columns;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvY29sdW1ucy9Db2x1bW5zLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBRXZCLE9BQU8sRUFBRSxFQUFFLEVBQUUsR0FBRyxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sV0FBVyxDQUFDO0FBRTVDOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsSUFBTSxPQUFPLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBQyxVQUFDLEtBQWtCLEVBQUUsR0FBb0M7SUFFdEYsSUFBQSxTQUFTLEdBU1AsS0FBSyxVQVRFLEVBQ1QsU0FBUyxHQVFQLEtBQUssVUFSRSxFQUNULFVBQVUsR0FPUixLQUFLLFdBUEcsRUFDVixNQUFNLEdBTUosS0FBSyxPQU5ELEVBQ04sUUFBUSxHQUtOLEtBQUssU0FMQyxFQUNSLEdBQUcsR0FJRCxLQUFLLElBSkosRUFDSCxTQUFTLEdBR1AsS0FBSyxVQUhFLEVBQ1QsYUFBYSxHQUVYLEtBQUssY0FGTSxFQUNWLE1BQU0sVUFDUCxLQUFLLEVBVkgsbUdBVUwsQ0FEVSxDQUNGO0lBRUQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUN2QixNQUFNLEVBQ04sSUFBSSxDQUNGLFNBQVMsRUFDVCxTQUFTLElBQUksRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUM1QixTQUFTLElBQUksRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUM1QixVQUFVLElBQUksRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUM5QixHQUFHLElBQUksR0FBRyxDQUFDLGNBQU8sR0FBRyxDQUFFLENBQUMsRUFDeEIsT0FBTyxHQUFHLEtBQUssV0FBVyxJQUFJLEdBQUcsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxFQUN4RCxNQUFNLElBQUksRUFBRSxDQUFDLFFBQVEsQ0FBQyxFQUN0QixRQUFRLElBQUksRUFBRSxDQUFDLFVBQVUsQ0FBQyxFQUMxQixhQUFhLElBQUksRUFBRSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsQ0FBQyxDQUFDLEVBQ3JELFNBQVMsQ0FDVixDQUNGLENBQUE7SUFFRCxPQUFPLHNDQUFLLEdBQUcsRUFBRSxHQUFHLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNLEVBQUksQ0FBQTtBQUMxRCxDQUFDLENBQUMsQ0FBQTtBQUVGLGVBQWUsT0FBTyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvY29sdW1ucy9Db2x1bW5zLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBRXZCLE9BQU8sRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLGlCQUFpQixFQUFFLHFCQUFxQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRXBFOzs7Ozs7Ozs7Ozs7R0FZRztBQUNILElBQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQUMsVUFBQyxLQUFtQixFQUFFLEdBQW9DO0lBQ2pGLElBQUEsU0FBUyxHQUNmLEtBQUssVUFEVSxFQUFFLEVBQUUsR0FDbkIsS0FBSyxHQURjLEVBQUUsU0FBUyxHQUM5QixLQUFLLFVBRHlCLEVBQUUsVUFBVSxHQUMxQyxLQUFLLFdBRHFDLEVBQUUsTUFBTSxHQUNsRCxLQUFLLE9BRDZDLEVBQUUsR0FBRyxHQUN2RCxLQUFLLElBRGtELEVBQUUsU0FBUyxHQUNsRSxLQUFLLFVBRDZELEVBQUUsVUFBVSxHQUM5RSxLQUFLLFdBRHlFLEVBQUUsS0FBSyxHQUNyRixLQUFLLE1BRGdGLEVBQUUsYUFBYSxHQUNwRyxLQUFLLGNBRCtGLEVBQUssTUFBTSxVQUMvRyxLQUFLLEVBREQsb0hBQTZHLENBQUYsQ0FDMUc7SUFFQyxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxJQUFNLE9BQU8sR0FBRyxTQUFTLENBQ3ZCLE1BQU0sRUFDTixJQUFJLENBQ0YsU0FBUyxFQUNULFNBQVMsSUFBSSxFQUFFLENBQUMsV0FBVyxDQUFDLEVBQzVCLFNBQVMsSUFBSSxFQUFFLENBQUMsV0FBVyxDQUFDLEVBQzVCLFVBQVUsSUFBSSxFQUFFLENBQUMsWUFBWSxDQUFDLEVBQzlCLEdBQUcsSUFBSSxHQUFHLENBQUMsY0FBTyxHQUFHLENBQUUsQ0FBQyxFQUN4QixPQUFPLEdBQUcsS0FBSyxXQUFXLElBQUksR0FBRyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUMsU0FBUyxDQUFDLEVBQ3hELE1BQU0sSUFBSSxFQUFFLENBQUMsUUFBUSxDQUFDLEVBQ3RCLEtBQUssSUFBSSxFQUFFLENBQUMscUJBQXFCLENBQUMsS0FBSyxDQUFDLENBQUMsRUFDekMsYUFBYSxJQUFJLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsQ0FBQyxFQUNyRCxVQUFVLElBQUksRUFBRSxDQUFDLFVBQUcsVUFBVSxDQUFFLENBQUMsRUFDakMsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sc0NBQUssRUFBRSxFQUFFLEVBQUUsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTSxFQUFJLENBQUE7QUFDbEUsQ0FBQyxDQUFDLENBQUE7QUFFRixlQUFlLE9BQU8sQ0FBQSJ9

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

@@ -1,6 +1,6 @@
-import React from "react";
-import { ColumnsProps } from "./ColumnsProps";
-import { ComponentName } from "../../components/enumsComponentsName";
+import React from 'react';
+import { ColumnsProps } from './ColumnsProps';
+import { ComponentName } from '../../components/enumsComponentsName';
 /**
  * Columns Native Component
  * @param children {React.ReactNode}
@@ -13,7 +13,7 @@ export declare const ColumnsContext: React.Context<{
     scrollable: boolean;
 }>;
 declare const Columns: {
-    ({ children, centered, gap, verticalAlign, fullBleed, scrollable, multiline, ...others }: ColumnsProps): JSX.Element;
+    ({ children, align, gap, verticalAlign, fullBleed, scrollable, multiline, ...others }: ColumnsProps): JSX.Element;
     displayName: ComponentName;
 };
 export default Columns;

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

@@ -1,10 +1,10 @@
 import { __assign, __read, __rest } from "tslib";
-import React, { createContext, useState } from "react";
-import { Dimensions, StyleSheet, ScrollView } from "react-native";
-import { View } from "../../components/view";
-import { ComponentName } from "../../components/enumsComponentsName";
-import { ColumnsGapValue } from "../../components/columns/ColumnsTypes";
-import { getAlignStyle } from "../../objects";
+import React, { createContext, useState } from 'react';
+import { Dimensions, ScrollView, StyleSheet } from 'react-native';
+import { View } from '../../components/view';
+import { ComponentName } from '../../components/enumsComponentsName';
+import { ColumnsGapValue } from '../../components/columns/ColumnsTypes';
+import { Alignable, getAlignStyle } from '../../objects';
 /**
  * Columns Native Component
  * @param children {React.ReactNode}
@@ -15,7 +15,7 @@ import { getAlignStyle } from "../../objects";
  */
 export var ColumnsContext = createContext({ scrollable: false });
 var Columns = function (_a) {
-    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 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) {
@@ -27,25 +27,25 @@ var Columns = function (_a) {
             setWidth(width_1);
         }
     };
-    var realGap = typeof gap === 'undefined' && 16 || ColumnsGapValue[gap];
+    var realGap = (typeof gap === 'undefined' && 16) || ColumnsGapValue[gap];
     var styles = StyleSheet.create({
         columns: {
-            width: width ? width + (enlarge * 2) : '100%',
-            marginHorizontal: -(enlarge),
+            width: width ? width + enlarge * 2 : '100%',
+            marginHorizontal: -enlarge,
             paddingHorizontal: enlarge,
-            flexDirection: "row",
+            flexDirection: 'row',
             gap: realGap,
-            display: "flex",
+            display: 'flex',
             justifyContent: 'space-evenly',
         },
         centered: {
-            alignSelf: "center",
+            alignSelf: 'center',
         },
         verticalAlign: {
-            alignItems: getAlignStyle(verticalAlign)
+            alignItems: getAlignStyle(verticalAlign),
         },
         multiline: {
-            flexWrap: "wrap",
+            flexWrap: 'wrap',
         },
         scrollContainer: {
             width: 'auto',
@@ -54,40 +54,48 @@ var Columns = function (_a) {
             gap: realGap,
         },
         mobile: {
-            flexDirection: "column"
-        }
+            flexDirection: 'column',
+        },
     });
     if (!scrollable) {
         return (React.createElement(React.Fragment, null,
             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
+                ] }, others, { onLayout: onLayoutHandler }), 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             React.Children.map(children, function (child) {
-                return child && React.cloneElement(child, {
-                    style: [child.props.style,
-                        { width: child.props.size && (width * child.props.size / 12) - realGap || 'auto' },
-                        child.props.narrow && { flex: 'none', flexShrink: 1 },
-                    ]
-                });
+                return child &&
+                    React.cloneElement(child, {
+                        style: [
+                            child.props.style,
+                            { width: (child.props.size && (width * child.props.size) / 12 - realGap) || 'auto' },
+                            child.props.narrow && { flex: 'none', flexShrink: 1 },
+                        ],
+                    });
             }))));
     }
-    return React.createElement(View, __assign({ style: {
+    return (React.createElement(View, __assign({ style: {
             width: "100% + ".concat(enlarge * 2, "px"),
-            marginHorizontal: -(enlarge)
+            marginHorizontal: -enlarge,
         } }, { onLayout: onLayoutHandler }),
-        React.createElement(ScrollView, { horizontal: true, contentContainerStyle: styles.scrollContainer }, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        React.createElement(ScrollView, { horizontal: true, contentContainerStyle: styles.scrollContainer }, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         React.Children.map(children, function (child) {
             return React.cloneElement(child, {
-                style: [child.props.style, {
+                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 }],
+                    },
+                    child.props.narrow && { flex: 'none', flexShrink: 1 },
+                ],
             });
-        })));
+        }))));
 };
 Columns.displayName = ComponentName.Columns;
 export default Columns;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NvbHVtbnMvQ29sdW1ucy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLGFBQWEsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdEQsT0FBTyxFQUFFLFVBQVUsRUFBcUIsVUFBVSxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUNwRixPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFeEMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxlQUFlLEVBQVcsTUFBTSxtQ0FBbUMsQ0FBQTtBQUM1RSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRXpDOzs7Ozs7O0dBT0c7QUFFSCxNQUFNLENBQUMsSUFBTSxjQUFjLEdBQUcsYUFBYSxDQUFDLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUE7QUFFbEUsSUFBTSxPQUFPLEdBQUcsVUFBQyxFQVNlO0lBUmIsSUFBQSxRQUFRLGNBQUEsRUFDUixRQUFRLGNBQUEsRUFDUixHQUFHLFNBQUEsRUFDSCxhQUFhLG1CQUFBLEVBQ2IsU0FBUyxlQUFBLEVBQ1QsVUFBVSxnQkFBQSxFQUNWLFNBQVMsZUFBQSxFQUNOLE1BQU0sY0FSWCx3RkFTQyxDQURVO0lBR3BCLElBQUEsS0FBQSxPQUFvQixRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUEsRUFBOUIsS0FBSyxRQUFBLEVBQUUsUUFBUSxRQUFlLENBQUE7SUFDL0IsSUFBQSxLQUFBLE9BQXdCLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBQSxFQUFsQyxPQUFPLFFBQUEsRUFBRSxVQUFVLFFBQWUsQ0FBQTtJQUV6QyxJQUFNLGVBQWUsR0FBRyxVQUFDLEtBQXdCO1FBQy9DLElB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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NvbHVtbnMvQ29sdW1ucy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLGFBQWEsRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUE7QUFDdEQsT0FBTyxFQUFFLFVBQVUsRUFBcUIsVUFBVSxFQUFFLFVBQVUsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUNwRixPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFFeEMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxlQUFlLEVBQVcsTUFBTSxtQ0FBbUMsQ0FBQTtBQUM1RSxPQUFPLEVBQUUsU0FBUyxFQUFFLGFBQWEsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUVwRDs7Ozs7OztHQU9HO0FBRUgsTUFBTSxDQUFDLElBQU0sY0FBYyxHQUFHLGFBQWEsQ0FBQyxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFBO0FBRWxFLElBQU0sT0FBTyxHQUFHLFVBQUMsRUFTRjtJQVJiLElBQUEsUUFBUSxjQUFBLEVBQ1IsS0FBSyxXQUFBLEVBQ0wsR0FBRyxTQUFBLEVBQ0gsYUFBYSxtQkFBQSxFQUNiLFNBQVMsZUFBQSxFQUNULFVBQVUsZ0JBQUEsRUFDVixTQUFTLGVBQUEsRUFDTixNQUFNLGNBUk0scUZBU2hCLENBRFU7SUFFSCxJQUFBLEtBQUEsT0FBb0IsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFBLEVBQTlCLEtBQUssUUFBQSxFQUFFLFFBQVEsUUFBZSxDQUFBO0lBQy9CLElBQUEsS0FBQSxPQUF3QixRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUEsRUFBbEMsT0FBTyxRQUFBLEVBQUUsVUFBVSxRQUFlLENBQUE7SUFFekMsSUFBTSxlQUFlLEdBQUcsVUFBQyxLQUF3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