@trilogy-ds/react 0.0.1-beta-sc-1 → 0.0.1-beta-145

package/lib/components/checkbox/CheckboxProps.d.ts

@@ -1,26 +1,6 @@
-/// <reference types="react" />
-import { IconName, IconNameValues } from '../../components/icon/IconNameEnum';
-import { Accessibility } from '../../objects/facets/Accessibility';
-import { Dev } from '../../objects/facets/Dev';
-export interface CheckboxChangeEvent {
-    checkboxId: string;
-    checkboxValue: string;
-    checkboxName: string;
-    checkboxChecked: boolean;
-}
-export type CheckboxChangeEventHandler = (event: {
-    checkboxValue: string;
-    checkboxName: string;
-    checkboxChecked: boolean;
-    checkboxId: string;
-}) => void;
-export interface CheckboxClickEvent {
-    checkboxId: string;
-    checkboxValue: string;
-    checkboxName: string;
-    checkboxChecked: boolean;
-}
-type CheckboxClickEventHandler = (event: {
+import { Accessibility } from '../../objects';
+import { CommonProps } from '../../objects/facets/CommonProps';
+type CheckboxChangeEventHandler = (event: {
     checkboxValue: string;
     checkboxName: string;
     checkboxChecked: boolean;
@@ -29,21 +9,13 @@ type CheckboxClickEventHandler = (event: {
 /**
  * Checkbox Interface
  */
-export interface CheckboxProps extends Accessibility, Dev {
-    children?: React.ReactNode;
+export interface CheckboxProps extends Accessibility, CommonProps {
     checked?: boolean;
     disabled?: boolean;
     readonly?: boolean;
-    id?: string;
-    label?: string | React.ReactNode;
-    onClick?: CheckboxClickEventHandler;
+    label?: string;
     onChange?: CheckboxChangeEventHandler;
-    className?: string;
     name?: string;
     value?: string;
-    tile?: boolean;
-    description?: string | React.ReactNode;
-    iconTile?: IconName | IconNameValues;
-    horizontalTile?: boolean;
 }
 export {};

package/lib/components/checkbox/CheckboxPropsDefaults.js

@@ -1,18 +1,4 @@
 export default {
-  "children": {
-    "type": "react",
-    "values": [
-      "undefined",
-      "null",
-      "string",
-      "number",
-      "false",
-      "true",
-      "JSXElementConstructor<any>>",
-      "ReactNode>",
-      "ReactPortal"
-    ]
-  },
   "checked": {
     "type": "boolean",
     "values": [
@@ -37,34 +23,13 @@ export default {
       "true"
     ]
   },
-  "id": {
+  "label": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "label": {
-    "type": "react",
-    "values": [
-      "undefined",
-      "null",
-      "string",
-      "number",
-      "false",
-      "true",
-      "JSXElementConstructor<any>>",
-      "ReactNode>",
-      "ReactPortal"
-    ]
-  },
-  "onClick": {
-    "type": "function",
-    "values": [
-      "undefined",
-      "CheckboxClickEventHandler"
-    ]
-  },
   "onChange": {
     "type": "function",
     "values": [
@@ -72,13 +37,6 @@ export default {
       "CheckboxChangeEventHandler"
     ]
   },
-  "className": {
-    "type": "string",
-    "values": [
-      "undefined",
-      "string"
-    ]
-  },
   "name": {
     "type": "string",
     "values": [
@@ -93,96 +51,21 @@ export default {
       "string"
     ]
   },
-  "tile": {
-    "type": "boolean",
-    "values": [
-      "undefined",
-      "false",
-      "true"
-    ]
-  },
-  "description": {
-    "type": "react",
-    "values": [
-      "undefined",
-      "null",
-      "string",
-      "number",
-      "false",
-      "true",
-      "JSXElementConstructor<any>>",
-      "ReactNode>",
-      "ReactPortal"
-    ]
-  },
-  "iconTile": {
-    "type": "enum",
-    "values": [
-      "undefined",
-      "tri-alert",
-      "tri-arrow-down",
-      "tri-arrow-left",
-      "tri-arrow-right",
-      "tri-arrow-up",
-      "tri-bell",
-      "tri-check-circle",
-      "tri-check",
-      "tri-exclamation-circle",
-      "tri-eye-slash",
-      "tri-eye",
-      "tri-infos-circle",
-      "tri-search",
-      "tri-times",
-      "tri-trash",
-      "tri-picto-faciliti",
-      "tri-picto-handicapzero",
-      "tri-picto-la-fibre",
-      "tri-picto-payment-americanexpress",
-      "tri-picto-payment-cb",
-      "tri-picto-payment-mastercard",
-      "tri-picto-payment-paypal",
-      "tri-picto-payment-visa",
-      "tri-alert",
-      "tri-arrow-down",
-      "tri-arrow-left",
-      "tri-arrow-right",
-      "tri-arrow-up",
-      "tri-bell",
-      "tri-check-circle",
-      "tri-check",
-      "tri-exclamation-circle",
-      "tri-eye-slash",
-      "tri-eye",
-      "tri-infos-circle",
-      "tri-search",
-      "tri-times",
-      "tri-trash",
-      "tri-picto-faciliti",
-      "tri-picto-handicapzero",
-      "tri-picto-la-fibre",
-      "tri-picto-payment-americanexpress",
-      "tri-picto-payment-cb",
-      "tri-picto-payment-mastercard",
-      "tri-picto-payment-paypal",
-      "tri-picto-payment-visa"
-    ]
-  },
-  "horizontalTile": {
-    "type": "boolean",
+  "accessibilityLabel": {
+    "type": "string",
     "values": [
       "undefined",
-      "false",
-      "true"
+      "string"
     ]
   },
-  "accessibilityLabel": {
+  "id": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "testId": {
+  "className": {
     "type": "string",
     "values": [
       "undefined",

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

@@ -1 +1,4 @@
-export { default as Checkbox } from '../../components/checkbox/Checkbox';
+import Checkbox from './Checkbox';
+import CheckboxTile from './tiles/tile/CheckboxTile';
+import CheckboxTiles from './tiles/CheckboxTiles';
+export { Checkbox, CheckboxTiles, CheckboxTile };

package/lib/components/checkbox/index.js

@@ -1,2 +1,5 @@
-export { default as Checkbox } from '../../components/checkbox/Checkbox';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NoZWNrYm94L2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLElBQUksUUFBUSxFQUFFLE1BQU0sZ0NBQWdDLENBQUEifQ==
+import Checkbox from './Checkbox';
+import CheckboxTile from './tiles/tile/CheckboxTile';
+import CheckboxTiles from './tiles/CheckboxTiles';
+export { Checkbox, CheckboxTiles, CheckboxTile };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NoZWNrYm94L2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sUUFBUSxNQUFNLFlBQVksQ0FBQTtBQUNqQyxPQUFPLFlBQVksTUFBTSwyQkFBMkIsQ0FBQTtBQUNwRCxPQUFPLGFBQWEsTUFBTSx1QkFBdUIsQ0FBQTtBQUVqRCxPQUFPLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxZQUFZLEVBQUUsQ0FBQSJ9

package/lib/components/checkbox/tiles/CheckboxTiles.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CheckboxTilesProps } from './CheckboxTilesProps';
+/**
+ * Columns Item Component - Columns Child
+ * @param size {ColumnsSize} Size 1-12
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additionnal CSS Classes
+ */
+declare const CheckboxTiles: ({ id, className, children, align, verticalAlign, ...others }: CheckboxTilesProps) => JSX.Element;
+export default CheckboxTiles;

package/lib/components/checkbox/tiles/CheckboxTiles.js

@@ -0,0 +1,36 @@
+import { __assign, __rest } from "tslib";
+import * as React from 'react';
+import clsx from 'clsx';
+import { hashClass } from '../../../helpers';
+import { useTrilogyContext } from '../../../context';
+import { getAlignClassName } from '../../../objects';
+import { is } from '../../../services';
+/**
+ * Columns Item Component - Columns Child
+ * @param size {ColumnsSize} Size 1-12
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additionnal CSS Classes
+ */
+var CheckboxTiles = function (_a) {
+    var id = _a.id, className = _a.className, children = _a.children, align = _a.align, verticalAlign = _a.verticalAlign, others = __rest(_a, ["id", "className", "children", "align", "verticalAlign"]);
+    var styled = useTrilogyContext().styled;
+    var alignClass = null;
+    if (align) {
+        alignClass =
+            (getAlignClassName(align) === 'aligned-start' && is('justified-start')) ||
+                (getAlignClassName(align) === 'aligned-center' && is('justified-center')) ||
+                (getAlignClassName(align) === 'aligned-end' && is('justified-end')) ||
+                null;
+    }
+    var verticalAlignClass = null;
+    if (verticalAlign) {
+        verticalAlignClass =
+            (getAlignClassName(verticalAlign) === 'aligned-start' && is('aligned-start')) ||
+                (getAlignClassName(verticalAlign) === 'aligned-center' && is('aligned-center')) ||
+                (getAlignClassName(verticalAlign) === 'aligned-end' && is('aligned-end')) ||
+                null;
+    }
+    return (React.createElement("div", __assign({ id: id, className: hashClass(styled, clsx('checkbox-tiles', className, align && alignClass, verticalAlign && verticalAlignClass)) }, others), children));
+};
+export default CheckboxTiles;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hlY2tib3hUaWxlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvY2hlY2tib3gvdGlsZXMvQ2hlY2tib3hUaWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUV2QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUUvQjs7Ozs7R0FLRztBQUNILElBQU0sYUFBYSxHQUFHLFVBQUMsRUFPRjtJQU5uQixJQUFBLEVBQUUsUUFBQSxFQUNGLFNBQVMsZUFBQSxFQUNULFFBQVEsY0FBQSxFQUNSLEtBQUssV0FBQSxFQUNMLGFBQWEsbUJBQUEsRUFDVixNQUFNLGNBTlkseURBT3RCLENBRFU7SUFFRCxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFJLFVBQVUsR0FBRyxJQUFJLENBQUE7SUFDckIsSUFBSSxLQUFLLEVBQUU7UUFDVCxVQUFVO1lBQ1IsQ0FBQyxpQkFBaUIsQ0FBQyxLQUFLLENBQUMsS0FBSyxlQUFlLElBQUksRUFBRSxDQUFDLGlCQUFpQixDQUFDLENBQUM7Z0JBQ3ZFLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLEtBQUssZ0JBQWdCLElBQUksRUFBRSxDQUFDLGtCQUFrQixDQUFDLENBQUM7Z0JBQ3pFLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLEtBQUssYUFBYSxJQUFJLEVBQUUsQ0FBQyxlQUFlLENBQUMsQ0FBQztnQkFDbkUsSUFBSSxDQUFBO0tBQ1A7SUFDRCxJQUFJLGtCQUFrQixHQUFHLElBQUksQ0FBQTtJQUM3QixJQUFJLGFBQWEsRUFBRTtRQUNqQixrQkFBa0I7WUFDaEIsQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsS0FBSyxlQUFlLElBQUksRUFBRSxDQUFDLGVBQWUsQ0FBQyxDQUFDO2dCQUM3RSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsQ0FBQyxLQUFLLGdCQUFnQixJQUFJLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO2dCQUMvRSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsQ0FBQyxLQUFLLGFBQWEsSUFBSSxFQUFFLENBQUMsYUFBYSxDQUFDLENBQUM7Z0JBQ3pFLElBQUksQ0FBQTtLQUNQO0lBRUQsT0FBTyxDQUNMLHNDQUNFLEVBQUUsRUFBRSxFQUFFLEVBQ04sU0FBUyxFQUFFLFNBQVMsQ0FDbEIsTUFBTSxFQUNOLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxTQUFTLEVBQUUsS0FBSyxJQUFJLFVBQVUsRUFBRSxhQUFhLElBQUksa0JBQWtCLENBQUMsQ0FDNUYsSUFDRyxNQUFNLEdBRVQsUUFBUSxDQUNMLENBQ1AsQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsYUFBYSxDQUFBIn0=

package/lib/components/checkbox/tiles/CheckboxTilesProps.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { AlignableProps } from '../../../objects';
+import { CommonProps } from '../../../objects/facets/CommonProps';
+/**
+ * Columns Item Interface
+ */
+export interface CheckboxTilesProps extends AlignableProps, CommonProps {
+    children: React.ReactNode;
+}

package/lib/components/checkbox/tiles/CheckboxTilesProps.js

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

package/lib/components/checkbox/tiles/CheckboxTilesPropsDefaults.js

@@ -0,0 +1,54 @@
+export default {
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "align": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END"
+    ]
+  },
+  "verticalAlign": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END",
+      "ALIGNED_CENTER",
+      "ALIGNED_START",
+      "ALIGNED_END"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

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

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

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

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

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CheckboxTileProps } from './CheckboxTileProps';
+/**
+ * Columns Item Component - Columns Child
+ * @param size {ColumnsSize} Size 1-12
+ * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additionnal CSS Classes
+ */
+declare const CheckboxTile: ({ checked, className, disabled, readonly, id, label, onChange, name, value, description, icon, horizontal, ...others }: CheckboxTileProps) => JSX.Element;
+export default CheckboxTile;

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

@@ -1,4 +1,16 @@
-import React from 'react';
-import { ChipsProps } from '../../components/chips/ChipsProps';
-declare const _default: React.ForwardRefExoticComponent<ChipsProps & React.RefAttributes<HTMLButtonElement>>;
-export default _default;
+/// <reference types="react" />
+import { ChipsProps } from "./ChipsProps";
+/**
+ * Chips Component - has to be in a ChipsList component
+ * @param children {string} Chips content
+ * @param id {string} Chips id
+ * @param onClick {Function} onClick Event for all Chips
+ * @param active {boolean} active Render Chips Active
+ * @param disabled {boolean} Disabled chips
+ *  * - -------------------------- WEB PROPERTIES -------------------------------
+ * @param className {string} Additionnal CSS Classes
+ * @param testId {string} Test Id for Test Integration
+ * @param others
+ */
+declare const Chips: ({ className, onClick, children, active, disabled, id, ...others }: ChipsProps) => JSX.Element;
+export default Chips;

package/lib/components/chips/Chips.js

@@ -1,8 +1,9 @@
 import { __assign, __rest } from "tslib";
-import clsx from 'clsx';
-import React from 'react';
-import { hashClass } from '../../helpers/hashClassesHelpers';
-import { is } from '../../services/classify';
+import React from "react";
+import { is } from "../../services";
+import clsx from "clsx";
+import { hashClass } from "../../helpers";
+import { useTrilogyContext } from "../../context";
 /**
  * Chips Component - has to be in a ChipsList component
  * @param children {string} Chips content
@@ -15,10 +16,13 @@ import { is } from '../../services/classify';
  * @param testId {string} Test Id for Test Integration
  * @param others
  */
-var Chips = function (_a, ref) {
-    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 classes = hashClass(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: onClick && onClick, ref: ref }, others), children));
+var Chips = function (_a) {
+    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, id: id, "aria-pressed": !!active, className: classes, onClick: function (e) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        } }, others), children));
 };
-export default React.forwardRef(Chips);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NoaXBzL0NoaXBzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUd6QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sOEJBQThCLENBQUE7QUFDeEQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBRXhDOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsSUFBTSxLQUFLLEdBQUcsVUFDWixFQUFxRixFQUNyRixHQUFpQztJQUQvQixJQUFBLFNBQVMsZUFBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLE1BQU0sWUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLEVBQUUsUUFBQSxFQUFFLE1BQU0sWUFBQSxFQUFLLE1BQU0sY0FBdkUsMEVBQXlFLENBQUY7SUFHdkUsSUFBTSxPQUFPLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsTUFBTSxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRTNFLE9BQU8sQ0FDTCwyQ0FDTSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUscUJBQ1gsUUFBUSxpQkFDVixNQUFNLEVBQ25CLEVBQUUsRUFBRSxFQUFFLGtCQUNRLENBQUMsQ0FBQyxNQUFNLEVBQ3RCLFNBQVMsRUFBRSxPQUFPLEVBQ2xCLE9BQU8sRUFBRSxPQUFPLElBQUksT0FBTyxFQUMzQixHQUFHLEVBQUUsR0FBRyxJQUNKLE1BQU0sR0FFVCxRQUFRLENBQ0YsQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxLQUFLLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUFBIn0=
+export default Chips;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2NoaXBzL0NoaXBzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQ3pCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFFL0IsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7Ozs7OztHQVdHO0FBQ0gsSUFBTSxLQUFLLEdBQUcsVUFBQyxFQVFGO0lBUFgsSUFBQSxTQUFTLGVBQUEsRUFDVCxPQUFPLGFBQUEsRUFDUCxRQUFRLGNBQUEsRUFDUixNQUFNLFlBQUEsRUFDTixRQUFRLGNBQUEsRUFDUixFQUFFLFFBQUEsRUFDQyxNQUFNLGNBUEksZ0VBUWQsQ0FEVTtJQUVELElBQUEsTUFBTSxHQUFLLGlCQUFpQixFQUFFLE9BQXhCLENBQXdCO0lBRXRDLElBQU0sT0FBTyxHQUFHLFNBQVMsQ0FDdkIsTUFBTSxFQUNOLElBQUksQ0FDRixPQUFPLEVBQ1AsTUFBTSxJQUFJLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFDdEIsU0FBUyxDQUNWLENBQ0YsQ0FBQTtJQUVELE9BQU8sQ0FDTCwyQ0FDTSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUscUJBQ1gsUUFBUSxFQUN2QixFQUFFLEVBQUUsRUFBRSxrQkFDUSxDQUFDLENBQUMsTUFBTSxFQUN0QixTQUFTLEVBQUUsT0FBTyxFQUNsQixPQUFPLEVBQUUsVUFBQyxDQUFDO1lBQ1QsT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFHLENBQUMsQ0FBQyxDQUFBO1FBQ2QsQ0FBQyxJQUNHLE1BQU0sR0FFVCxRQUFRLENBQ0YsQ0FDVixDQUFBO0FBQ0gsQ0FBQyxDQUFBO0FBRUQsZUFBZSxLQUFLLENBQUEifQ==