@adaptabletools/adaptable-cjs 21.2.2-canary.0 → 22.0.0-canary.1

package/src/components/ExpressionEditor/QueryBuilder/QueryPredicateBuilder.js

@@ -4,7 +4,6 @@ exports.QueryPredicateBuilder = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const dnd_1 = require("../../dnd");
-const rebass_1 = require("rebass");
 const predicate_1 = require("../../../parser/src/predicate");
 const adaptableQlUtils_1 = require("../../../Utilities/adaptableQlUtils");
 const booleanExpressionFunctions_1 = require("../../../Utilities/ExpressionFunctions/booleanExpressionFunctions");
@@ -15,9 +14,10 @@ const icons_1 = require("../../icons");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../SimpleButton"));
 const QueryBuilderInputs_1 = require("./QueryBuilderInputs");
 const utils_1 = require("./utils");
+const Flex_1 = require("../../Flex");
 const ITEM_HEIGHT = 40;
 const BASE_CLASS_NAME = 'ab-QueryBuilder-predicate-editor';
-const Handle = (props) => (react_1.default.createElement(rebass_1.Flex, { className: `${BASE_CLASS_NAME}__handle`, height: ITEM_HEIGHT, alignItems: "center", mr: 1, ...props },
+const Handle = (props) => (react_1.default.createElement(Flex_1.Flex, { className: `${BASE_CLASS_NAME}__handle twa:mr-1`, style: { height: ITEM_HEIGHT }, alignItems: "center", ...props },
     react_1.default.createElement(icons_1.Icon, { name: "drag" })));
 const QueryPredicateButtons = (props) => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -41,18 +41,18 @@ const LogicalFunctionEditor = (props) => {
   `;
     const getCombinatorEl = (handleProps, className) => (react_1.default.createElement(dnd_1.Droppable, { droppableId: props.id, type: props.id }, (provided, snapshot) => {
         return (react_1.default.createElement("div", { ...provided.droppableProps, ref: provided.innerRef, className: className },
-            react_1.default.createElement(rebass_1.Flex, null,
+            react_1.default.createElement(Flex_1.Flex, null,
                 props.isRoot ? null : react_1.default.createElement(Handle, { ...handleProps }),
-                react_1.default.createElement(rebass_1.Flex, { flex: 1, alignItems: "center", height: ITEM_HEIGHT },
+                react_1.default.createElement(Flex_1.Flex, { className: "twa:flex-1", alignItems: "center", height: ITEM_HEIGHT },
                     react_1.default.createElement(QueryBuilderInputs_1.CombinatorSelector, { value: props.predicate.operator, onChange: (combinator) => {
                             props.onChange({
                                 ...props.predicate,
                                 operator: combinator,
                             });
                         } }),
-                    react_1.default.createElement(rebass_1.Box, { flex: 1 }),
+                    react_1.default.createElement(Flex_1.Box, { className: "twa:flex-1" }),
                     react_1.default.createElement(QueryPredicateButtons, { hideDelete: props.isRoot, hideAdd: true, ...props }))),
-            react_1.default.createElement(rebass_1.Box, { className: `${BASE_CLASS_NAME}__children-wrapper` },
+            react_1.default.createElement(Flex_1.Box, { className: `${BASE_CLASS_NAME}__children-wrapper` },
                 props.predicate.args.map((arg, index) => {
                     const id = `${props.id}/${index}`;
                     return (react_1.default.createElement(exports.QueryPredicateBuilder, { key: id, lastChild: index === props.predicate.args.length - 1, index: index, id: id, predicate: arg, onNewPredicate: (type) => {
@@ -146,15 +146,10 @@ const PrimitiveFunctionEditor = (props) => {
     }
     const level = props.id.split('/').length - 1;
     return (react_1.default.createElement(dnd_1.Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided) => {
-        return (react_1.default.createElement(rebass_1.Flex, { className: `
-              ${BASE_CLASS_NAME}
-              ${BASE_CLASS_NAME}-level-${level}
-              ${BASE_CLASS_NAME}-primitive
-              ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}
-            `, pb: 2, ref: provided.innerRef, ...provided.draggableProps, style: { ...provided.draggableProps.style, minHeight: ITEM_HEIGHT } },
+        return (react_1.default.createElement(Flex_1.Flex, { className: `twa:pb-2 ${BASE_CLASS_NAME} ${BASE_CLASS_NAME}-level-${level} ${BASE_CLASS_NAME}-primitive ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''} `, ref: provided.innerRef, ...provided.draggableProps, style: { ...provided.draggableProps.style, minHeight: ITEM_HEIGHT } },
             react_1.default.createElement(Handle, { ...provided.dragHandleProps }),
-            react_1.default.createElement(rebass_1.Flex, { alignItems: "center", height: ITEM_HEIGHT },
-                react_1.default.createElement(rebass_1.Box, { mr: 2 },
+            react_1.default.createElement(Flex_1.Flex, { alignItems: "center", style: { height: ITEM_HEIGHT } },
+                react_1.default.createElement(Flex_1.Box, { className: "twa:mr-2" },
                     react_1.default.createElement(QueryBuilderInputs_1.PrimitiveColumnOrFieldSelector, { onChange: (colOrField) => {
                             props.onChange({
                                 ...props.predicate,
@@ -174,7 +169,7 @@ const PrimitiveFunctionEditor = (props) => {
                             args,
                         });
                     }, value: props.predicate.operator })),
-                react_1.default.createElement(rebass_1.Flex, { flex: 1, ml: 2 }, restOfFunctionInputDataTypes.map((type, index) => {
+                react_1.default.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:ml-2" }, restOfFunctionInputDataTypes.map((type, index) => {
                     const key = type + index;
                     const commonProps = {
                         lefthandColumnIdParam: columnOrFieldId,
@@ -199,7 +194,7 @@ const PrimitiveFunctionEditor = (props) => {
                             });
                         } }));
                 }))),
-            react_1.default.createElement(rebass_1.Box, { flex: 1 }),
+            react_1.default.createElement(Flex_1.Box, { className: "twa:flex-1" }),
             react_1.default.createElement(QueryPredicateButtons, { ...props })));
     }));
 };

package/src/components/ExpressionEditor/index.d.ts

@@ -14,6 +14,7 @@ interface ExpressionEditorProps {
     namedQueries: NamedQuery[];
     allowSaveNamedQuery?: boolean;
     style?: React.CSSProperties;
+    className?: string;
     isFullExpression?: boolean;
     api: AdaptableApi;
     showQueryBuilder?: boolean;

package/src/components/ExpressionEditor/index.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExpressionEditor = exports.baseClassName = void 0;
+exports.baseClassName = void 0;
+exports.ExpressionEditor = ExpressionEditor;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const DocumentationLinkConstants_1 = require("../../Utilities/Constants/DocumentationLinkConstants");
 const ModuleConstants_1 = require("../../Utilities/Constants/ModuleConstants");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
@@ -14,7 +14,6 @@ const ButtonInfo_1 = require("../../View/Components/Buttons/ButtonInfo");
 const CheckBox_1 = require("../CheckBox");
 const CodeBlock_1 = require("../CodeBlock");
 const HelpBlock_1 = tslib_1.__importDefault(require("../HelpBlock"));
-const Panel_1 = tslib_1.__importDefault(require("../Panel"));
 const Tabs_1 = require("../Tabs");
 const DataTableEditor_1 = require("./DataTableEditor");
 const EditorContext_1 = require("./EditorContext");
@@ -24,6 +23,8 @@ const ExpressionFunctionDocumentation_1 = require("./ExpressionFunctionDocumenta
 const NamedQueryContext_1 = require("./NamedQueryContext");
 const NamedQueryEditor_1 = require("./NamedQueryEditor");
 const QueryBuilder_1 = require("./QueryBuilder");
+const Flex_1 = require("../Flex");
+const twMerge_1 = require("../../twMerge");
 exports.baseClassName = `ab-ExpressionEditor`;
 function ExpressionEditor(props) {
     const { type, module } = props;
@@ -57,7 +58,7 @@ function ExpressionEditor(props) {
         props.api.internalApi
             .getModuleService()
             .getModuleById(ModuleConstants_1.NamedQueryModuleId)
-            .isModuleEditable() && (React.createElement(rebass_1.Flex, { flexDirection: "row", mb: 2, fontSize: 3 },
+            .isModuleEditable() && (React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:mb-2 twa:text-3" },
         React.createElement(CheckBox_1.CheckBox, { checked: !!namedQuery, onChange: (checked) => {
                 if (checked) {
                     setNamedQuery({
@@ -68,38 +69,38 @@ function ExpressionEditor(props) {
                 else {
                     setNamedQuery(false);
                 }
-            }, mr: 2, style: { alignItems: 'center' } }, "Save as new Named Query"),
-        namedQuery ? (React.createElement(AdaptableInput_1.default, { style: { flex: 1 }, onChange: (event) => {
+            }, className: "twa:mr-2 twa:items-center" }, "Save as new Named Query"),
+        namedQuery ? (React.createElement(AdaptableInput_1.default, { className: "twa:flex-1", onChange: (event) => {
                 const { target: { value }, } = event;
                 setNamedQuery({
                     Name: value,
                     BooleanExpression: expressionText,
                 });
             } })) : null));
-    const editorElement = (React.createElement(rebass_1.Flex, { className: exports.baseClassName, flex: 1, "data-name": "expression-editor-wrapper", pl: 2, style: props.style },
-        React.createElement(rebass_1.Flex, { flex: 1, style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
+    const editorElement = (React.createElement(Flex_1.Flex, { className: (0, twMerge_1.twMerge)(`${exports.baseClassName} twa:flex-1 twa:pl-2 twa:overflow-auto`, props.className), "data-name": "expression-editor-wrapper", style: props.style },
+        React.createElement(Flex_1.Flex, { className: "twa:flex-1", style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
                 if (event.target.tagName === 'TEXTAREA') {
                     textAreaRef.current = event.target;
                 }
             } },
-            React.createElement(rebass_1.Flex, { flex: 1, flexDirection: "row", "data-name": "expression-editor", fontSize: 2, style: { minHeight: 0 } },
-                React.createElement(rebass_1.Flex, { flex: 1, paddingRight: 2, style: { overflow: 'auto' }, "data-name": "expression-builder", flexDirection: "column" },
+            React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:text-2", flexDirection: "row", "data-name": "expression-editor", style: { minHeight: 0 } },
+                React.createElement(Flex_1.Flex, { className: "twa:flex-1 twa:pr-2 twa:overflow-auto twa:min-h-0", "data-name": "expression-builder", flexDirection: "column" },
                     editorInput,
                     StringExtensions_1.default.IsNotNullOrEmpty(expressionText?.trim()) && (React.createElement(ExpressionFunctionDocumentation_1.ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })),
                     /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
                     StringExtensions_1.default.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type),
-                    showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 2, mb: 2, fontSize: 3 },
-                        React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(queryDocumentationLink, '_blank') }),
+                    showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3" },
+                        React.createElement(ButtonInfo_1.ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }),
                         "See documentation for more details and examples")),
-                    React.createElement(rebass_1.Box, { flex: 1 }),
+                    React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
                     showNamedQueryStuff && saveAsNamedQueryElement),
-                React.createElement(rebass_1.Box, { className: `${exports.baseClassName}__sidebar`, "data-name": "expression-sidebar", pb: 2, paddingLeft: 2, pr: 2 },
-                    React.createElement(Panel_1.default, { bodyProps: { style: { height: '100%' } }, style: { height: '100%' } },
-                        React.createElement(Tabs_1.Tabs, { style: { height: '100%' }, variant: "" },
+                React.createElement(Flex_1.Box, { className: `${exports.baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar" },
+                    React.createElement(Flex_1.Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-defaultbackground twa:text-text-on-defaultbackground" },
+                        React.createElement(Tabs_1.Tabs, { className: "twa:h-full" },
                             React.createElement(Tabs_1.Tabs.Tab, { value: "column" }, "Columns"),
                             React.createElement(Tabs_1.Tabs.Tab, { value: "field" }, "Fields"),
                             React.createElement(Tabs_1.Tabs.Tab, { value: "named-query" }, "Named Queries"),
-                            React.createElement(Tabs_1.Tabs.Content, { flex: 1, style: { height: '100%' } },
+                            React.createElement(Tabs_1.Tabs.Content, { className: "twa:flex-1 twa:h-full" },
                                 React.createElement(DataTableEditor_1.DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
                                         label: column.friendlyName,
                                         value: column.columnId,
@@ -114,10 +115,10 @@ function ExpressionEditor(props) {
                                     value: field.name,
                                     dataType: field.dataType,
                                     readOnly: true,
-                                })) })) : (React.createElement(rebass_1.Text, { p: 2 }, "No Data Fields provided"))),
+                                })) })) : (React.createElement(Flex_1.Box, { className: "twa:p-2" }, "No Data Fields provided"))),
                             React.createElement(Tabs_1.Tabs.Content, null, ArrayExtensions_1.default.IsNullOrEmpty(props.namedQueries) ? (React.createElement("div", null,
-                                React.createElement(rebass_1.Text, { p: 2 }, "No Named Queries defined"),
-                                React.createElement(rebass_1.Text, { fontSize: 2, padding: 2, p: 2 },
+                                React.createElement(Flex_1.Box, { className: "twa:p-2" }, "No Named Queries defined"),
+                                React.createElement(Flex_1.Box, { className: "twa:text-2 twa:p-2" },
                                     "Named Queries are saved Expressions which can be referenced in other Expressions using the ",
                                     React.createElement("i", null, "QUERY"),
                                     " keyword",
@@ -171,25 +172,24 @@ function ExpressionEditor(props) {
         } }, (() => {
         switch (true) {
             case showQueryBuilder && showExpressionEditor:
-                return (React.createElement(Tabs_1.Tabs, { "data-name": "editor-selector-tabs", mb: 2, p: 2, minHeight: 0, flex: 1 },
+                return (React.createElement(Tabs_1.Tabs, { "data-name": "editor-selector-tabs", className: "twa:mb-2 twa:p-2 twa:min-h-0 twa:flex-1" },
                     React.createElement(Tabs_1.Tabs.Tab, { value: "editor" }, "Expression Editor"),
                     React.createElement(Tabs_1.Tabs.Tab, { value: "ui" }, "Query Builder"),
                     React.createElement(Tabs_1.Tabs.Content, null, editorElement),
                     React.createElement(Tabs_1.Tabs.Content, null,
-                        React.createElement(rebass_1.Flex, { flexDirection: "column", height: "100%" },
+                        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full" },
                             queryBuilderElement,
-                            React.createElement(rebass_1.Box, { flex: 1 }),
+                            React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
                             showNamedQueryStuff && saveAsNamedQueryElement))));
             case showQueryBuilder:
-                return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" }, queryBuilderElement));
+                return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" }, queryBuilderElement));
             case showExpressionEditor:
-                return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" }, editorElement));
+                return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" }, editorElement));
             default:
                 return null;
         }
     })()));
 }
-exports.ExpressionEditor = ExpressionEditor;
 const renderQueryHints = (type) => {
     const examples = [];
     if (type === 'observable') {
@@ -230,22 +230,17 @@ const renderQueryHints = (type) => {
             description: "The cumulative sum of all 'PnL' columns in the order given by the 'TradeDate' column",
         });
     }
-    return examples.length ? (React.createElement(rebass_1.Box, { "data-name": "expression-hints", my: 2, p: 2, style: {
-            background: 'var(--ab-color-primary)',
-            borderRadius: 'var(--ab__border-radius)',
-        } },
-        React.createElement(rebass_1.Box, null,
-            React.createElement(rebass_1.Text, { marginBottom: 2 },
+    return examples.length ? (React.createElement(Flex_1.Box, { "data-name": "expression-hints", className: "twa:my-2 twa:p-2 twa:bg-primary twa:rounded-standard" },
+        React.createElement(Flex_1.Box, null,
+            React.createElement(Flex_1.Box, { className: "twa:mb-2" },
                 React.createElement("b", null, "Examples"),
                 " (click on each to see its explanation):"),
-            examples.map((example, index) => (React.createElement("details", { key: index, style: { marginBottom: 'var(--ab-space-2)' } },
-                React.createElement(rebass_1.Flex, { style: {
-                        borderRadius: 'var(--ab__border-radius)',
-                    }, marginRight: 2, marginBottom: 1, color: 'text-on-secondary', fontSize: 'var( --ab-font-size-2)', alignItems: "center", as: "summary" },
+            examples.map((example, index) => (React.createElement("details", { key: index, className: "twa:mb-2" },
+                React.createElement(Flex_1.Flex, { className: "twa:mr-2 twa:rounded-standard twa:mb-1 twa:text-2", alignItems: "center", as: "summary" },
                     React.createElement(CodeBlock_1.CodeBlock, null,
                         " ",
                         example.code)),
-                React.createElement(rebass_1.Text, { fontSize: 2, marginLeft: 3, style: { fontStyle: 'italic' } }, example.description))))))) : null;
+                React.createElement(Flex_1.Box, { className: "twa:ml-3 twa:italic twa:text-2" }, example.description))))))) : null;
 };
 const queryDocumentationLinks = {
     boolean: DocumentationLinkConstants_1.BooleanQueryDocsLink,

package/src/components/FieldWrap/index.d.ts

@@ -1,4 +1,11 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
-declare const FieldWrap: (props: FlexProps) => React.JSX.Element;
+import { FlexProps } from '../Flex';
+declare const FieldWrap: (props: FlexProps & {
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    children?: React.ReactNode;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+}) => React.JSX.Element;
 export default FieldWrap;

package/src/components/FieldWrap/index.js

@@ -2,14 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
-const defaulProps = {
-    flexDirection: 'row',
-    alignItems: 'center',
-};
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const FieldWrap = (props) => {
-    const flexProps = { ...defaulProps, ...props };
-    return React.createElement(rebass_1.Flex, { ...flexProps, className: (0, join_1.default)(props.className, 'ab-FieldWrap') });
+    return (React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", ...props, className: (0, clsx_1.default)('ab-FieldWrap', props.className) }));
 };
 exports.default = FieldWrap;

package/src/components/FileDroppable/FileDroppableState.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface FileDroppableState {
     dragOver: boolean;
     message?: React.ReactNode;

package/src/components/FileDroppable/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
-interface FileDroppableProps extends FlexProps {
+import { HTMLProps } from 'react';
+import { FlexProps } from '../Flex';
+interface FileDroppableProps extends FlexProps, HTMLProps<HTMLDivElement> {
     buttonText?: React.ReactNode;
     fileAccept?: string;
     icon?: React.ReactNode;

package/src/components/FileDroppable/index.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.readJSONFile = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const react_1 = require("react");
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const contains_1 = tslib_1.__importDefault(require("../../components/utils/contains"));
@@ -11,6 +10,7 @@ const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const icons_1 = require("../icons");
 const HelpBlock_1 = tslib_1.__importDefault(require("../HelpBlock"));
 const reducer_1 = tslib_1.__importStar(require("./reducer"));
+const Flex_1 = require("../Flex");
 const initialState = {
     dragOver: false,
     message: null,
@@ -76,7 +76,7 @@ const FileDroppable = (props = {}) => {
                 dispatch({
                     type: reducer_1.ActionTypes.DROP_SUCCES,
                     payload: {
-                        message: (React.createElement(rebass_1.Box, null, props.loadingText === undefined ? 'Initializing adaptable...' : props.loadingText)),
+                        message: (React.createElement(Flex_1.Box, null, props.loadingText === undefined ? 'Initializing adaptable...' : props.loadingText)),
                     },
                 });
                 requestAnimationFrame(() => {
@@ -91,7 +91,7 @@ const FileDroppable = (props = {}) => {
                 dispatch({
                     type: reducer_1.ActionTypes.SET_INVALID_FILE,
                     payload: {
-                        message: React.createElement(rebass_1.Box, null, 'The file is not a valid JSON file! Please try again!'),
+                        message: React.createElement(Flex_1.Box, null, 'The file is not a valid JSON file! Please try again!'),
                     },
                 });
             }
@@ -114,13 +114,13 @@ const FileDroppable = (props = {}) => {
                     zIndex: 1,
                 } }))));
     const msg = message || state.message;
-    return (React.createElement(rebass_1.Flex, { ...domProps, flexDirection: "column", className: (0, join_1.default)(props.className, 'ab-FileDroppable', state.dragOver ? 'ab-FileDroppable--drag-over' : ''), alignItems: "center", justifyContent: "center", onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: preventEventPropagation, ref: domRef },
+    return (React.createElement(Flex_1.Flex, { ...domProps, flexDirection: "column", className: (0, join_1.default)(props.className, 'ab-FileDroppable', state.dragOver ? 'ab-FileDroppable--drag-over' : ''), alignItems: "center", justifyContent: "center", onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: preventEventPropagation, ref: domRef },
         props.children,
-        helpText || icon ? (React.createElement(rebass_1.Flex, { flexDirection: "column" },
-            helpText ? (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "center", margin: 2 },
+        helpText || icon ? (React.createElement(Flex_1.Flex, { flexDirection: "column" },
+            helpText ? (React.createElement(Flex_1.Flex, { flexDirection: "column", alignItems: "center", className: "twa:m-2" },
                 React.createElement(HelpBlock_1.default, null,
                     React.createElement("b", null, helpText)))) : null,
-            icon ? (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "center", margin: 2 }, icon)) : null)) : null,
+            icon ? (React.createElement(Flex_1.Flex, { flexDirection: "column", alignItems: "center", className: "twa:m-2" }, icon)) : null)) : null,
         msg,
         form));
 };

package/src/components/Flex.d.ts

@@ -1 +1,15 @@
-export { Flex } from 'rebass';
+import * as React from 'react';
+type AsProp = 'summary' | 'form' | 'label' | 'button' | 'ul' | string;
+export type FlexProps = {
+    as?: AsProp;
+    flexDirection?: 'row' | 'column';
+    justifyContent?: 'space-between' | 'space-around' | 'space-evenly' | 'space-start' | 'space-end' | 'center';
+    flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+    alignItems?: 'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'start' | 'end';
+};
+export declare const Flex: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement> & FlexProps, "ref"> & React.RefAttributes<unknown>>;
+export type BoxProps = {
+    as?: AsProp;
+};
+export declare const Box: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement> & BoxProps, "ref"> & React.RefAttributes<unknown>>;
+export {};

package/src/components/Flex.js

@@ -1,5 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Flex = void 0;
-var rebass_1 = require("rebass");
-Object.defineProperty(exports, "Flex", { enumerable: true, get: function () { return rebass_1.Flex; } });
+exports.Box = exports.Flex = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const twMerge_1 = require("../twMerge");
+const ALIGN_ITEMS_MAP = {
+    center: 'twa:items-center',
+    'flex-start': 'twa:items-start',
+    start: 'twa:items-start',
+    'flex-end': 'twa:items-end',
+    end: 'twa:items-end',
+    stretch: 'twa:items-stretch',
+    baseline: 'twa:items-baseline',
+};
+const FLEX_DIRECTION_MAP = {
+    row: 'twa:flex-row',
+    column: 'twa:flex-col',
+};
+const JUSTIFY_CONTENT_MAP = {
+    'space-between': 'twa:justify-between',
+    'space-around': 'twa:justify-around',
+    'space-evenly': 'twa:justify-evenly',
+    'space-start': 'twa:justify-start',
+    'space-end': 'twa:justify-end',
+    center: 'twa:justify-center',
+};
+const FLEX_WRAP_MAP = {
+    wrap: 'twa:flex-wrap',
+    nowrap: 'twa:flex-nowrap',
+    'wrap-reverse': 'twa:flex-wrap-reverse',
+};
+exports.Flex = React.forwardRef((props, ref) => {
+    const { className: _, flexDirection, alignItems, justifyContent, flexWrap, as, ...domProps } = props;
+    const className = (0, clsx_1.default)('twa:flex', 'twa:box-border', FLEX_DIRECTION_MAP[flexDirection], ALIGN_ITEMS_MAP[alignItems], JUSTIFY_CONTENT_MAP[justifyContent], FLEX_WRAP_MAP[flexWrap]);
+    const Cmp = (as || 'div');
+    return (React.createElement(Cmp, { ref: ref, ...domProps, className: (0, twMerge_1.twMerge)(className, props.className) }));
+});
+exports.Box = React.forwardRef((props, ref) => {
+    const { className, as, ...domProps } = props;
+    const Cmp = (as || 'div');
+    return (React.createElement(Cmp, { ref: ref, ...domProps, className: (0, twMerge_1.twMerge)('twa:box-border', className) }));
+});

package/src/components/FlexWithFooter.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
+import { FlexProps } from './Flex';
+import { HTMLProps } from 'react';
 interface TypeProps extends FlexProps {
     footer: React.ReactNode;
-    footerProps?: FlexProps;
+    footerProps?: FlexProps & HTMLProps<HTMLDivElement>;
 }
 declare const FlexWithFooter: (props: TypeProps & React.HTMLProps<HTMLDivElement>) => React.JSX.Element;
 export default FlexWithFooter;

package/src/components/FlexWithFooter.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("./Flex");
 const defaultStyle = {
     height: '100%',
     maxHeight: '90vh',
@@ -11,9 +11,9 @@ const defaultStyle = {
 };
 const FlexWithFooter = (props) => {
     const { footer, footerProps, children, style, ...domProps } = props;
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", ...domProps, style: { ...defaultStyle, ...style } },
-        React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 0, flex: 1 },
-            React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1 }, children)),
-        footer ? (React.createElement(rebass_1.Flex, { padding: 2, backgroundColor: "primary", ...footerProps }, footer)) : null));
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", ...domProps, style: { ...defaultStyle, ...style } },
+        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-0 twa:flex-1" },
+            React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:flex-1" }, children)),
+        footer ? (React.createElement(Flex_1.Flex, { className: "twa:p-2 twa:bg-primary", ...footerProps }, footer)) : null));
 };
 exports.default = FlexWithFooter;

package/src/components/FormLayout/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 import { ReactNode } from 'react';
+import { BoxProps } from '../Flex';
 type FormColumn = {
     name: string;
     component?: React.ComponentType<any>;
@@ -21,6 +21,10 @@ type TypeFormLayout = {
 export type AdaptableFormConfig = TypeFormLayout;
 export type FormLayoutColumn = FormColumn;
 interface FormLayoutProps extends Omit<BoxProps, keyof TypeFormLayout>, TypeFormLayout {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
 }
 declare const FormLayout: (props: FormLayoutProps) => React.JSX.Element;
 interface FormRowProps {

package/src/components/FormLayout/index.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormRow = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const react_1 = require("react");
 const merge_1 = tslib_1.__importDefault(require("lodash/merge"));
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const Flex_1 = require("../Flex");
 const FormLayoutContext = (0, react_1.createContext)(null);
 const defaultColumns = {
     label: {
@@ -18,7 +18,7 @@ const defaultColumns = {
 };
 const PLACEHOLDER = React.createElement("div", null);
 const FormLayout = (props) => {
-    let { placeholder = PLACEHOLDER, columns = ['label', 'children'], defaultComponent = rebass_1.Box, sizes = ['auto', '1fr'], gridColumnGap = 'var(--ab-space-2)', gridRowGap = 'var(--ab-space-2)', style, childrenToColumns = true, ...boxProps } = props;
+    let { placeholder = PLACEHOLDER, columns = ['label', 'children'], defaultComponent = Flex_1.Box, sizes = ['auto', '1fr'], gridColumnGap = 'var(--ab-space-2)', gridRowGap = 'var(--ab-space-2)', style, childrenToColumns = true, ...boxProps } = props;
     columns = columns.map((c) => {
         if (typeof c === 'string' || typeof c === 'number') {
             c = {
@@ -53,7 +53,7 @@ const FormLayout = (props) => {
             currentRow: 0,
             childrenToColumns,
         } },
-        React.createElement(rebass_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-FormLayout'), style: { ...style, ...formStyle } })));
+        React.createElement(Flex_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-FormLayout'), style: { ...style, ...formStyle } })));
 };
 const FormRow = (props) => {
     const ctx = (0, react_1.useContext)(FormLayoutContext);

package/src/components/HelpBlock/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 export declare const baseClassName = "ab-HelpBlock";
-declare const HelpBlock: (props: BoxProps) => React.JSX.Element;
+export declare const HelpBlockClassName: string;
+declare const HelpBlock: (props: React.HTMLProps<HTMLDivElement>) => React.JSX.Element;
 export default HelpBlock;

package/src/components/HelpBlock/index.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.baseClassName = void 0;
+exports.HelpBlockClassName = exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const Flex_1 = require("../Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.baseClassName = 'ab-HelpBlock';
+exports.HelpBlockClassName = (0, clsx_1.default)('twa:text-2/relaxed twa:p-2 twa:rounded-standard', 'twa:bg-primarylight twa:text-primary-foreground', exports.baseClassName);
 const HelpBlock = (props) => {
-    return React.createElement(rebass_1.Box, { ...props, className: (0, join_1.default)(props.className, exports.baseClassName) });
+    return React.createElement(Flex_1.Box, { ...props, className: (0, clsx_1.default)(exports.HelpBlockClassName, props.className) });
 };
 exports.default = HelpBlock;

package/src/components/IconSelector/IconSelector.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconSelector = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const rebass_1 = require("rebass");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
 const Icon_1 = require("../Icon");
 const icons_1 = require("../icons");
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+const Flex_1 = require("../Flex");
 const IconButton = (props) => {
-    return (react_1.default.createElement(SimpleButton_1.default, { onClick: () => props.onClick(), p: 2, variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon }, props.children));
+    return (react_1.default.createElement(SimpleButton_1.default, { onClick: () => props.onClick(), className: "twa:p-2", variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon }, props.children));
 };
 const IconSelector = (props) => {
     const [query, setQuery] = react_1.default.useState('');
@@ -21,18 +21,18 @@ const IconSelector = (props) => {
         })
         : allIconsNames;
     const iconsElements = filteredIcons.map((iconName) => {
-        return (react_1.default.createElement(rebass_1.Flex, { key: iconName },
+        return (react_1.default.createElement(Flex_1.Flex, { key: iconName },
             react_1.default.createElement(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName })));
     });
     const customIconsElements = props.customIcons?.map((def) => {
         return (react_1.default.createElement(IconButton, { key: def.name, active: false, onClick: () => props.onChange(def.name) },
             react_1.default.createElement(Icon_1.IconComponent, { key: def.name, icon: def.icon })));
     });
-    const popup = (react_1.default.createElement(rebass_1.Box, { className: "ab-IconSelector__Popup" },
-        react_1.default.createElement(rebass_1.Box, { mb: 2 },
-            react_1.default.createElement(rebass_1.Box, { mb: 2, fontSize: 4 }, "Select an Icon"),
-            react_1.default.createElement(AdaptableInput_1.default, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), width: "100%" })),
-        react_1.default.createElement(rebass_1.Flex, { p: 2, style: { width: 300, maxHeight: 300, overflow: 'auto' }, flexWrap: "wrap" },
+    const popup = (react_1.default.createElement(Flex_1.Box, { className: "ab-IconSelector__Popup" },
+        react_1.default.createElement(Flex_1.Box, { className: "twa:mb-2" },
+            react_1.default.createElement(Flex_1.Box, { className: "twa:mb-2 twa:text-4" }, "Select an Icon"),
+            react_1.default.createElement(AdaptableInput_1.default, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), className: "twa:w-full" })),
+        react_1.default.createElement(Flex_1.Flex, { className: "twa:p-2 twa:w-[300px] twa:max-h-[300px] twa:overflow-auto twa:flex-wrap" },
             iconsElements,
             " ",
             customIconsElements)));
@@ -45,10 +45,10 @@ const IconSelector = (props) => {
         if (icon)
             value = react_1.default.createElement(Icon_1.IconComponent, { icon: icon.icon });
     }
-    return (react_1.default.createElement(rebass_1.Flex, { className: "ab-IconSelector" },
+    return (react_1.default.createElement(Flex_1.Flex, { className: "ab-IconSelector" },
         react_1.default.createElement(OverlayTrigger_1.default, { preventPortalEventPropagation: false, render: () => popup, showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300 },
-            react_1.default.createElement(SimpleButton_1.default, { className: "ab-IconSelector__trigger", textAlign: "center", onClick: () => null, variant: "raised", width: 150, justifyContent: "center" }, value)),
-        (props.clearable ?? true) && (react_1.default.createElement(SimpleButton_1.default, { disabled: !props.value, className: "ab-IconSelector__clear-button", ml: 2, onClick: (event) => {
+            react_1.default.createElement(SimpleButton_1.default, { className: "ab-IconSelector__trigger twa:text-center twa:w-[150px] twa:justify-center", onClick: () => null, variant: "raised" }, value)),
+        (props.clearable ?? true) && (react_1.default.createElement(SimpleButton_1.default, { disabled: !props.value, className: "ab-IconSelector__clear-button twa:ml-2", onClick: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
                 props.onChange('');

package/src/components/InfiniteTable/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfiniteTableGrid = void 0;
+exports.InfiniteTableGrid = InfiniteTableGrid;
 const tslib_1 = require("tslib");
 const infinite_react_1 = require("@infinite-table/infinite-react");
 tslib_1.__exportStar(require("@infinite-table/infinite-react"), exports);
@@ -9,5 +9,4 @@ const React = tslib_1.__importStar(require("react"));
 function InfiniteTableGrid(props) {
     return (React.createElement(infinite_react_1.InfiniteTable, { sortable: false, rowHeight: '--ab-grid-row-height', draggableColumns: false, keyboardNavigation: false, ...props, licenseKey: EnvVars_1.INFINITE_TABLE_LICENSE_KEY }));
 }
-exports.InfiniteTableGrid = InfiniteTableGrid;
 infinite_react_1.InfiniteTable.licenseKey = EnvVars_1.INFINITE_TABLE_LICENSE_KEY;