@trilogy-ds/react 0.0.1-beta.8 → 0.0.1-calendar

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

@@ -1,11 +1,12 @@
+import { __assign, __read, __rest } from "tslib";
+import { ComponentName } from '../../components/enumsComponentsName';
+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 '../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 '../spacer';
-import { ComponentName } from '../enumsComponentsName';
 /**
  * Chips Component - has to be in a ChipsList component
  * @param children {string} Chips content
@@ -13,52 +14,48 @@ import { ComponentName } from '../enumsComponentsName';
  * @param onClick {Function} onClick Event for all Chips
  * @param active {boolean} active Render Chips Active
  * @param disabled {boolean} Disabled chips
- * @param inverted {boolean} Background color
  */
-const Chips = ({ children, onClick, disabled, active, inverted, ...others }) => {
-    const [activeItem, setActiveItem] = useState(active || false);
-    const chipsContext = useContext(ChipsContext);
-    useEffect(() => {
+var Chips = React.forwardRef(function (_a, ref) {
+    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);
+    useEffect(function () {
         setActiveItem(active || false);
     }, [active]);
-    const styles = StyleSheet.create({
+    var styles = StyleSheet.create({
         chips: {
-            backgroundColor: (disabled && '#E1E1E1') ||
-                (activeItem && getColorStyle(TrilogyColor.SECONDARY)) ||
-                (inverted && getColorStyle(TrilogyColor.WHITE)) ||
-                getColorStyle(TrilogyColor.GREY_LIGHT),
+            backgroundColor: (disabled && getColorStyle(TrilogyColor.NEUTRAL_FADE)) ||
+                (activeItem && getColorStyle(TrilogyColor.MAIN)) ||
+                getColorStyle(TrilogyColor.BACKGROUND),
             borderRadius: 30,
             paddingLeft: 12,
             paddingRight: 12,
             paddingTop: 6,
-            paddingBottom: 6,
+            paddingBottom: 5,
             margin: 6,
-            borderColor: '#dce1e5',
-            borderWidth: !active ? 1 : 0,
+            borderColor: active ? getColorStyle(TrilogyColor.MAIN) : getColorStyle(TrilogyColor.NEUTRAL),
+            borderWidth: 1,
             flexDirection: 'row',
         },
         text: {
-            fontWeight: active ? 'bold' : 'normal',
-            fontSize: 16,
-            color: (disabled && getColorStyle(TrilogyColor.GREY_DARK)) ||
-                (active && getColorStyle(TrilogyColor.WHITE)) ||
-                getColorStyle(TrilogyColor.TERTIARY),
-        },
-        icon: {
-            top: 3,
+            alignSelf: 'center',
+            color: (disabled && getColorStyle(TrilogyColor.DISABLED)) ||
+                (active && getColorStyle(TrilogyColor.BACKGROUND)) ||
+                getColorStyle(TrilogyColor.MAIN),
+            paddingTop: 1,
         },
     });
-    return (React.createElement(TouchableOpacity, { disabled: disabled, style: styles.chips, onPress: (e) => {
+    return (React.createElement(TouchableOpacity, __assign({ ref: ref, disabled: disabled, style: styles.chips, onPress: function (e) {
             setActiveItem(active || false);
             if (onClick) {
                 onClick(e);
             }
-        }, ...others },
+        } }, others),
         chipsContext.isMultiple && active && (React.createElement(React.Fragment, null,
-            React.createElement(Icon, { style: styles.icon, size: IconSize.SMALL, color: IconColor.WHITE, name: IconName.CHECK }),
-            React.createElement(Spacer, { horizontal: true, size: SpacerSize.SMALL }))),
-        React.createElement(Text, { level: TextLevels.ONE, style: styles.text }, children)));
-};
+            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=Chips.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHMubmF0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vY29tcG9uZW50cy9jaGlwcy9DaGlwcy5uYXRpdmUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLE1BQU0sRUFBRSxVQUFVLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4RCxPQUFPLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3BELE9BQU8sRUFBRSxhQUFhLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDcEUsT0FBTyxLQUFLLEVBQUUsRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUM5RCxPQUFPLEVBQXlCLFVBQVUsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUNsRixPQUFPLEVBQUUsSUFBSSxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLE1BQU0sU0FBUyxDQUFBO0FBRTdELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQTtBQUV0RDs7Ozs7OztHQU9HO0FBRUgsSUFBTSxLQUFLLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FDNUIsVUFBQyxFQUFrRCxFQUFFLEdBQUc7SUFBckQsSUFBQSxRQUFRLGNBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxNQUFNLFlBQUEsRUFBSyxNQUFNLGNBQWhELDZDQUFrRCxDQUFGO0lBQ3pDLElBQUEsS0FBQSxPQUE4QixRQUFRLENBQVUsTUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFBLEVBQS9ELFVBQVUsUUFBQSxFQUFFLGFBQWEsUUFBc0MsQ0FBQTtJQUN0RSxJQUFNLFlBQVksR0FBRyxVQUFVLENBQUMsWUFBWSxDQUFDLENBQUE7SUFFN0MsU0FBUyxDQUFDO1FBQ1IsYUFBYSxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUMsQ0FBQTtJQUNoQyxDQUFDLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFBO0lBRVosSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixLQUFLLEVBQUU7WUFDTCxlQUFlLEVBQ2IsQ0FBQyxRQUFRLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxZQUFZLENBQUMsQ0FBQztnQkFDdEQsQ0FBQyxVQUFVLElBQUksYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQztnQkFDaEQsYUFBYSxDQUFDLFlBQVksQ0FBQyxVQUFVLENBQUM7WUFDeEMsWUFBWSxFQUFFLEVBQUU7WUFDaEIsV0FBVyxFQUFFLEVBQUU7WUFDZixZQUFZLEVBQUUsRUFBRTtZQUNoQixVQUFVLEVBQUUsQ0FBQztZQUNiLGFBQWEsRUFBRSxDQUFDO1lBQ2hCLE1BQU0sRUFBRSxDQUFDO1lBQ1QsV0FBVyxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUM7WUFDNUYsV0FBVyxFQUFFLENBQUM7WUFDZCxhQUFhLEVBQUUsS0FBSztTQUNyQjtRQUNELElBQUksRUFBRTtZQUNKLFNBQVMsRUFBRSxRQUFRO1lBQ25CLEtBQUssRUFDSCxDQUFDLFFBQVEsSUFBSSxhQUFhLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUFDO2dCQUNsRCxDQUFDLE1BQU0sSUFBSSxhQUFhLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxDQUFDO2dCQUNsRCxhQUFhLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQztZQUNsQyxVQUFVLEVBQUUsQ0FBQztTQUNkO0tBQ0YsQ0FBQyxDQUFBO0lBRUYsT0FBTyxDQUNMLG9CQUFDLGdCQUFnQixhQUNmLEdBQUcsRUFBRSxHQUFHLEVBQ1IsUUFBUSxFQUFFLFFBQVEsRUFDbEIsS0FBSyxFQUFFLE1BQU0sQ0FBQyxLQUFLLEVBQ25CLE9BQU8sRUFBRSxVQUFDLENBQXlCO1lBQ2pDLGFBQWEsQ0FBQyxNQUFNLElBQUksS0FBSyxDQUFDLENBQUE7WUFDOUIsSUFBSSxPQUFPLEVBQUU7Z0JBQ1gsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFBO2FBQ1g7UUFDSCxDQUFDLElBQ0csTUFBTTtRQUVULFlBQVksQ0FBQyxVQUFVLElBQUksTUFBTSxJQUFJLENBQ3BDO1lBQ0Usb0JBQUMsSUFBSSxJQUFDLElBQUksRUFBRSxRQUFRLENBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxTQUFTLENBQUMsS0FBSyxFQUFFLElBQUksRUFBRSxRQUFRLENBQUMsS0FBSyxHQUFJO1lBQzlFLG9CQUFDLE1BQU0sSUFBQyxVQUFVLFFBQUMsSUFBSSxFQUFFLFVBQVUsQ0FBQyxHQUFHLEdBQUksQ0FDMUMsQ0FDSjtRQUNELG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxLQUFLLEVBQUUsTUFBTSxDQUFDLElBQUksSUFDNUMsUUFBUSxDQUNKLENBQ1UsQ0FDcEIsQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsS0FBSyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsS0FBSyxDQUFBO0FBQ3ZDLGVBQWUsS0FBSyxDQUFBIn0=

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

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

package/lib/components/chips/ChipsProps.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=ChipsProps.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHNQcm9wcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvY2hpcHMvQ2hpcHNQcm9wcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIn0=

package/lib/components/chips/ChipsPropsDefaults.js

@@ -0,0 +1,67 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "onClick": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ClickEvent"
+    ]
+  },
+  "active": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "disabled": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "accessibilityLabel": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

package/lib/components/chips/index.js

@@ -1,4 +1,4 @@
 import Chips from './Chips';
 import ChipsList from './list/ChipsList';
 export { Chips, ChipsList };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NoaXBzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLFNBQVMsQ0FBQTtBQUMzQixPQUFPLFNBQVMsTUFBTSxrQkFBa0IsQ0FBQTtBQUV4QyxPQUFPLEVBQUUsS0FBSyxFQUFFLFNBQVMsRUFBRSxDQUFBIn0=

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

@@ -1,9 +1,13 @@
-/// <reference types="react" />
+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: ({ children, multiple, ...others }: ChipsListProps) => JSX.Element;
+declare const ChipsList: React.ForwardRefExoticComponent<ChipsListProps & React.RefAttributes<HTMLDivElement>>;
 export default ChipsList;

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

@@ -1,17 +1,25 @@
-import React from 'react';
-import { is } from '../../../services';
-import clsx from 'clsx';
-import { hashClass } from '../../../helpers';
+import { __assign, __rest } from "tslib";
+import { ComponentName } from '../../../components/enumsComponentsName';
 import { useTrilogyContext } from '../../../context';
+import { hashClass } from '../../../helpers/hashClassesHelpers';
+import { is } from '../../../services/classify';
+import clsx from 'clsx';
+import * as React from 'react';
 /**
  * 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
  */
-const ChipsList = ({ children, multiple, ...others }) => {
-    const { styled } = useTrilogyContext();
-    const classes = hashClass(styled, clsx('chips-list', multiple && is('multiple')));
-    return (React.createElement("div", { className: classes, ...others }, children));
-};
+var ChipsList = React.forwardRef(function (_a, ref) {
+    var className = _a.className, id = _a.id, children = _a.children, multiple = _a.multiple, scrollable = _a.scrollable, accessibilityLabelledBy = _a.accessibilityLabelledBy, others = __rest(_a, ["className", "id", "children", "multiple", "scrollable", "accessibilityLabelledBy"]);
+    var styled = useTrilogyContext().styled;
+    var classes = hashClass(styled, clsx('chips-list', multiple && is('multiple'), scrollable && is('scrollable'), className));
+    return (React.createElement("div", __assign({ ref: ref, id: id, role: 'group', "aria-labelledby": accessibilityLabelledBy, className: classes }, others), children));
+});
+ChipsList.displayName = ComponentName.ChipsList;
 export default ChipsList;
-//# sourceMappingURL=ChipsList.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHNMaXN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9jaGlwcy9saXN0L0NoaXBzTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLDhCQUE4QixDQUFBO0FBQ3hELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUN4QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHOUI7Ozs7Ozs7O0dBUUc7QUFDSCxJQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNoQyxVQUFDLEVBQXFGLEVBQUUsR0FBRztJQUF4RixJQUFBLFNBQVMsZUFBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBRSx1QkFBdUIsNkJBQUEsRUFBSyxNQUFNLGNBQW5GLG9GQUFxRixDQUFGO0lBQzFFLElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FBQyxZQUFZLEVBQUUsUUFBUSxJQUFJLEVBQUUsQ0FBQyxVQUFVLENBQUMsRUFBRSxVQUFVLElBQUksRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUMxRixDQUFBO0lBRUQsT0FBTyxDQUNMLHNDQUFLLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxJQUFJLEVBQUMsT0FBTyxxQkFBa0IsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE9BQU8sSUFBTSxNQUFNLEdBQ3pHLFFBQVEsQ0FDTCxDQUNQLENBQUE7QUFDSCxDQUFDLENBQ0YsQ0FBQTtBQUVELFNBQVMsQ0FBQyxXQUFXLEdBQUcsYUFBYSxDQUFDLFNBQVMsQ0FBQTtBQUMvQyxlQUFlLFNBQVMsQ0FBQSJ9

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { ChipsListProps } from './ChipsListProps';
-import { ComponentName } from '../../enumsComponentsName';
+import { ChipsListNativeRef, ChipsListProps } from './ChipsListProps';
 export declare const ChipsContext: React.Context<{
     isMultiple: boolean;
 }>;
@@ -8,9 +7,7 @@ export declare const ChipsContext: React.Context<{
  * ChipsList Component - Container for Chips
  * @param children {React.ReactNode}
  * @param multiple {boolean} Selection Multiple With checked icon
+ * @param scrollable {boolean} If multiple Chips make scrollable List
  */
-declare const ChipsList: {
-    ({ children, multiple, ...others }: ChipsListProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const ChipsList: React.ForwardRefExoticComponent<ChipsListProps & React.RefAttributes<ChipsListNativeRef>>;
 export default ChipsList;

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

@@ -1,22 +1,24 @@
+import { __assign, __rest } from "tslib";
+import { ComponentName } from '../../../components/enumsComponentsName';
 import React, { createContext } from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
-import { ComponentName } from '../../enumsComponentsName';
-export const ChipsContext = createContext({ isMultiple: false });
+import { ScrollView, StyleSheet, View } from 'react-native';
+export var ChipsContext = createContext({ isMultiple: false });
 /**
  * ChipsList Component - Container for Chips
  * @param children {React.ReactNode}
  * @param multiple {boolean} Selection Multiple With checked icon
+ * @param scrollable {boolean} If multiple Chips make scrollable List
  */
-const ChipsList = ({ children, multiple, ...others }) => {
-    const styles = StyleSheet.create({
+var ChipsList = React.forwardRef(function (_a, ref) {
+    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: {
             flexWrap: 'wrap',
             flexDirection: 'row',
         },
     });
-    return (React.createElement(ChipsContext.Provider, { value: { isMultiple: multiple || false } },
-        React.createElement(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.container, ...others }, children)));
-};
+    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({ ref: ref, style: styles.container }, others), children))));
+});
 ChipsList.displayName = ComponentName.ChipsList;
 export default ChipsList;
-//# sourceMappingURL=ChipsList.native.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHNMaXN0Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvY2hpcHMvbGlzdC9DaGlwc0xpc3QubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sS0FBSyxFQUFFLEVBQUUsYUFBYSxFQUFFLE1BQU0sT0FBTyxDQUFBO0FBQzVDLE9BQU8sRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQTtBQUczRCxNQUFNLENBQUMsSUFBTSxZQUFZLEdBQUcsYUFBYSxDQUFDLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUE7QUFFaEU7Ozs7O0dBS0c7QUFDSCxJQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNoQyxVQUFDLEVBQW9ELEVBQUUsR0FBRztJQUF2RCxJQUFBLFFBQVEsY0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLGtCQUFpQixFQUFqQixVQUFVLG1CQUFHLElBQUksS0FBQSxFQUFLLE1BQU0sY0FBbEQsc0NBQW9ELENBQUY7SUFDakQsSUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztRQUMvQixTQUFTLEVBQUU7WUFDVCxRQUFRLEVBQUUsTUFBTTtZQUNoQixhQUFhLEVBQUUsS0FBSztTQUNyQjtLQUNGLENBQUMsQ0FBQTtJQUVGLE9BQU8sQ0FDTCxvQkFBQyxZQUFZLENBQUMsUUFBUSxJQUFDLEtBQUssRUFBRSxFQUFFLFVBQVUsRUFBRSxRQUFRLElBQUksS0FBSyxFQUFFLElBQzVELFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FDWixvQkFBQyxVQUFVLGFBQ1QsR0FBRyxFQUFFLEdBQTRCLEVBQ2pDLFVBQVUsUUFDViw4QkFBOEIsRUFBRSxLQUFLLEVBQ3JDLEtBQUssRUFBRSxNQUFNLENBQUMsU0FBUyxJQUNuQixNQUFNLEdBRVQsUUFBUSxDQUNFLENBQ2QsQ0FBQyxDQUFDLENBQUMsQ0FDRixvQkFBQyxJQUFJLGFBQUMsR0FBRyxFQUFFLEdBQXNCLEVBQUUsS0FBSyxFQUFFLE1BQU0sQ0FBQyxTQUFTLElBQU0sTUFBTSxHQUNuRSxRQUFRLENBQ0osQ0FDUixDQUNxQixDQUN6QixDQUFBO0FBQ0gsQ0FBQyxDQUNGLENBQUE7QUFFRCxTQUFTLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxTQUFTLENBQUE7QUFFL0MsZUFBZSxTQUFTLENBQUEifQ==

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

@@ -1,8 +1,14 @@
+/// <reference types="react" />
 /**
  * ChipsList Interface
  */
-/// <reference types="react" />
-export interface ChipsListProps {
+import { ScrollView, type View } from 'react-native';
+import { CommonProps } from '../../../objects/facets/CommonProps';
+export interface ChipsListProps extends CommonProps {
     children?: React.ReactNode | React.ReactElement;
     multiple?: boolean;
+    scrollable?: boolean;
+    accessibilityLabelledBy?: string;
 }
+export type ChipsListRef = HTMLDivElement;
+export type ChipsListNativeRef = View | ScrollView;

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

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

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

@@ -0,0 +1,54 @@
+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"
+    ]
+  },
+  "scrollable": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "accessibilityLabelledBy": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

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

@@ -0,0 +1,2 @@
+import ChipsList from "./ChipsList";
+export default ChipsList;

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

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

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

@@ -1,19 +1,17 @@
-/// <reference types="react" />
-import { ColumnsProps } from './ColumnsProps';
+import { ColumnsProps } from '../../components/columns/ColumnsProps';
+import React from 'react';
 /**
  * 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 className {string} Additional 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,31 @@
-import React from 'react';
-import clsx from 'clsx';
-import { is } from '../../services/classify';
-import { hashClass } from '../../helpers';
+import { __assign, __rest } from "tslib";
+import { ComponentName } from '../../components/enumsComponentsName';
 import { useTrilogyContext } from '../../context';
+import { hashClass } from '../../helpers/hashClassesHelpers';
+import { getAlignClassName } from '../../objects/facets/Alignable';
+import { getJustifiedClassName } from '../../objects/facets/Justifiable';
+import { has, is } from '../../services/classify';
+import clsx from 'clsx';
+import React from 'react';
 /**
  * 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 className {string} Additional 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 { 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 });
-};
+var Columns = React.forwardRef(function (_a, ref) {
+    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, fullheight = _a.fullheight, others = __rest(_a, ["className", "id", "multiline", "scrollable", "mobile", "gap", "fullBleed", "marginless", "align", "verticalAlign", "fullheight"]);
+    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"), fullheight && is('fullheight'), className));
+    return React.createElement("div", __assign({ ref: ref, id: id, className: classes }, others));
+});
+Columns.displayName = ComponentName.Columns;
 export default Columns;
-//# sourceMappingURL=Columns.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29sdW1ucy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvY29sdW1ucy9Db2x1bW5zLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQ0EsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBQ2hFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFDOUQsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDcEUsT0FBTyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUM3QyxPQUFPLElBQUksTUFBTSxNQUFNLENBQUE7QUFDdkIsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRXpCOzs7Ozs7Ozs7Ozs7R0FZRztBQUNILElBQU0sT0FBTyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQzlCLFVBQ0UsRUFBeUgsRUFDekgsR0FBRztJQURELElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsU0FBUyxlQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFFLE1BQU0sWUFBQSxFQUFFLEdBQUcsU0FBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLFVBQVUsZ0JBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUUsVUFBVSxnQkFBQSxFQUFLLE1BQU0sY0FBdkgsa0lBQXlILENBQUY7SUFHL0csSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUN2QixNQUFNLEVBQ04sSUFBSSxDQUNGLFNBQVMsRUFDVCxTQUFTLElBQUksRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUM1QixTQUFTLElBQUksRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUM1QixVQUFVLElBQUksRUFBRSxDQUFDLFlBQVksQ0FBQyxFQUM5QixHQUFHLElBQUksR0FBRyxDQUFDLGNBQU8sR0FBRyxDQUFFLENBQUMsRUFDeEIsT0FBTyxHQUFHLEtBQUssV0FBVyxJQUFJLEdBQUcsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDLFNBQVMsQ0FBQyxFQUN4RCxNQUFNLElBQUksRUFBRSxDQUFDLFFBQVEsQ0FBQyxFQUN0QixLQUFLLElBQUksRUFBRSxDQUFDLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQ3pDLGFBQWEsSUFBSSxFQUFFLENBQUMsaUJBQWlCLENBQUMsYUFBYSxDQUFDLENBQUMsRUFDckQsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDOUIsVUFBVSxJQUFJLEVBQUUsQ0FBQyxZQUFZLENBQUMsRUFDOUIsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sc0NBQUssR0FBRyxFQUFFLEdBQUcsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLFNBQVMsRUFBRSxPQUFPLElBQU0sTUFBTSxFQUFJLENBQUE7QUFDbEUsQ0FBQyxDQUNGLENBQUE7QUFDRCxPQUFPLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxPQUFPLENBQUE7QUFDM0MsZUFBZSxPQUFPLENBQUEifQ==

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

@@ -1,20 +1,13 @@
+import { ColumnsProps } from '../../components/columns/ColumnsProps';
 import React from 'react';
-import { ColumnsProps } from './ColumnsProps';
-import { ComponentName } from '../enumsComponentsName';
+import { View } from 'react-native';
 /**
  * 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 scrollable {boolean} Makes columns vertically scrollable.
+ * @param gap {GapSize} Gap between columns
  */
-export declare const ColumnsContext: React.Context<{
-    inlined: boolean;
-}>;
-declare const Columns: {
-    ({ children, centered, gapless, marginSize, verticalCentered, inlined, ...others }: ColumnsProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const Columns: React.ForwardRefExoticComponent<ColumnsProps & React.RefAttributes<View>>;
 export default Columns;