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

package/src/components/ExpressionEditor/index.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
-import { Box, Flex, Text } from 'rebass';
 import { AggregatedBooleanQueryDocsLink, AggregatedScalarQueryDocsLink, BooleanQueryDocsLink, CumulativeAggregatedScalarQueryDocsLink, ObservableQueryDocsLink, QuantileAggregatedScalarQueryDocsLink, ScalarQueryDocsLink, } from '../../Utilities/Constants/DocumentationLinkConstants';
 import { NamedQueryModuleId } from '../../Utilities/Constants/ModuleConstants';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
@@ -10,7 +9,6 @@ import { ButtonInfo } from '../../View/Components/Buttons/ButtonInfo';
 import { CheckBox } from '../CheckBox';
 import { CodeBlock } from '../CodeBlock';
 import HelpBlock from '../HelpBlock';
-import Panel from '../Panel';
 import { Tabs } from '../Tabs';
 import { DataTableEditor } from './DataTableEditor';
 import { ExpressionEditorContext } from './EditorContext';
@@ -20,6 +18,8 @@ import { ExpressionFunctionDocumentation } from './ExpressionFunctionDocumentati
 import { useNamedQueryContext } from './NamedQueryContext';
 import { NamedQueryEditor } from './NamedQueryEditor';
 import { QueryBuilder } from './QueryBuilder';
+import { Box, Flex } from '../Flex';
+import { twMerge } from '../../twMerge';
 export const baseClassName = `ab-ExpressionEditor`;
 export function ExpressionEditor(props) {
     const { type, module } = props;
@@ -53,7 +53,7 @@ export function ExpressionEditor(props) {
         props.api.internalApi
             .getModuleService()
             .getModuleById(NamedQueryModuleId)
-            .isModuleEditable() && (React.createElement(Flex, { flexDirection: "row", mb: 2, fontSize: 3 },
+            .isModuleEditable() && (React.createElement(Flex, { flexDirection: "row", className: "twa:mb-2 twa:text-3" },
         React.createElement(CheckBox, { checked: !!namedQuery, onChange: (checked) => {
                 if (checked) {
                     setNamedQuery({
@@ -64,38 +64,38 @@ export function ExpressionEditor(props) {
                 else {
                     setNamedQuery(false);
                 }
-            }, mr: 2, style: { alignItems: 'center' } }, "Save as new Named Query"),
-        namedQuery ? (React.createElement(AdaptableInput, { style: { flex: 1 }, onChange: (event) => {
+            }, className: "twa:mr-2 twa:items-center" }, "Save as new Named Query"),
+        namedQuery ? (React.createElement(AdaptableInput, { className: "twa:flex-1", onChange: (event) => {
                 const { target: { value }, } = event;
                 setNamedQuery({
                     Name: value,
                     BooleanExpression: expressionText,
                 });
             } })) : null));
-    const editorElement = (React.createElement(Flex, { className: baseClassName, flex: 1, "data-name": "expression-editor-wrapper", pl: 2, style: props.style },
-        React.createElement(Flex, { flex: 1, style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
+    const editorElement = (React.createElement(Flex, { className: twMerge(`${baseClassName} twa:flex-1 twa:pl-2 twa:overflow-auto`, props.className), "data-name": "expression-editor-wrapper", style: props.style },
+        React.createElement(Flex, { className: "twa:flex-1", style: { minHeight: 0 }, flexDirection: "column", onFocus: (event) => {
                 if (event.target.tagName === 'TEXTAREA') {
                     textAreaRef.current = event.target;
                 }
             } },
-            React.createElement(Flex, { flex: 1, flexDirection: "row", "data-name": "expression-editor", fontSize: 2, style: { minHeight: 0 } },
-                React.createElement(Flex, { flex: 1, paddingRight: 2, style: { overflow: 'auto' }, "data-name": "expression-builder", flexDirection: "column" },
+            React.createElement(Flex, { className: "twa:flex-1 twa:text-2", flexDirection: "row", "data-name": "expression-editor", style: { minHeight: 0 } },
+                React.createElement(Flex, { className: "twa:flex-1 twa:pr-2 twa:overflow-auto twa:min-h-0", "data-name": "expression-builder", flexDirection: "column" },
                     editorInput,
                     StringExtensions.IsNotNullOrEmpty(expressionText?.trim()) && (React.createElement(ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })),
                     /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
                     StringExtensions.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type),
-                    showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", mt: 2, mb: 2, fontSize: 3 },
-                        React.createElement(ButtonInfo, { mr: 2, onClick: () => window.open(queryDocumentationLink, '_blank') }),
+                    showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3" },
+                        React.createElement(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }),
                         "See documentation for more details and examples")),
-                    React.createElement(Box, { flex: 1 }),
+                    React.createElement(Box, { className: "twa:flex-1" }),
                     showNamedQueryStuff && saveAsNamedQueryElement),
-                React.createElement(Box, { className: `${baseClassName}__sidebar`, "data-name": "expression-sidebar", pb: 2, paddingLeft: 2, pr: 2 },
-                    React.createElement(Panel, { bodyProps: { style: { height: '100%' } }, style: { height: '100%' } },
-                        React.createElement(Tabs, { style: { height: '100%' }, variant: "" },
+                React.createElement(Box, { className: `${baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar" },
+                    React.createElement(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, { className: "twa:h-full" },
                             React.createElement(Tabs.Tab, { value: "column" }, "Columns"),
                             React.createElement(Tabs.Tab, { value: "field" }, "Fields"),
                             React.createElement(Tabs.Tab, { value: "named-query" }, "Named Queries"),
-                            React.createElement(Tabs.Content, { flex: 1, style: { height: '100%' } },
+                            React.createElement(Tabs.Content, { className: "twa:flex-1 twa:h-full" },
                                 React.createElement(DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
                                         label: column.friendlyName,
                                         value: column.columnId,
@@ -110,10 +110,10 @@ export function ExpressionEditor(props) {
                                     value: field.name,
                                     dataType: field.dataType,
                                     readOnly: true,
-                                })) })) : (React.createElement(Text, { p: 2 }, "No Data Fields provided"))),
+                                })) })) : (React.createElement(Box, { className: "twa:p-2" }, "No Data Fields provided"))),
                             React.createElement(Tabs.Content, null, ArrayExtensions.IsNullOrEmpty(props.namedQueries) ? (React.createElement("div", null,
-                                React.createElement(Text, { p: 2 }, "No Named Queries defined"),
-                                React.createElement(Text, { fontSize: 2, padding: 2, p: 2 },
+                                React.createElement(Box, { className: "twa:p-2" }, "No Named Queries defined"),
+                                React.createElement(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",
@@ -167,19 +167,19 @@ export function ExpressionEditor(props) {
         } }, (() => {
         switch (true) {
             case showQueryBuilder && showExpressionEditor:
-                return (React.createElement(Tabs, { "data-name": "editor-selector-tabs", mb: 2, p: 2, minHeight: 0, flex: 1 },
+                return (React.createElement(Tabs, { "data-name": "editor-selector-tabs", className: "twa:mb-2 twa:p-2 twa:min-h-0 twa:flex-1" },
                     React.createElement(Tabs.Tab, { value: "editor" }, "Expression Editor"),
                     React.createElement(Tabs.Tab, { value: "ui" }, "Query Builder"),
                     React.createElement(Tabs.Content, null, editorElement),
                     React.createElement(Tabs.Content, null,
-                        React.createElement(Flex, { flexDirection: "column", height: "100%" },
+                        React.createElement(Flex, { flexDirection: "column", className: "twa:h-full" },
                             queryBuilderElement,
-                            React.createElement(Box, { flex: 1 }),
+                            React.createElement(Box, { className: "twa:flex-1" }),
                             showNamedQueryStuff && saveAsNamedQueryElement))));
             case showQueryBuilder:
-                return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" }, queryBuilderElement));
+                return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" }, queryBuilderElement));
             case showExpressionEditor:
-                return (React.createElement(Flex, { flexDirection: "column", p: 2, height: "100%" }, editorElement));
+                return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" }, editorElement));
             default:
                 return null;
         }
@@ -225,22 +225,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(Box, { "data-name": "expression-hints", my: 2, p: 2, style: {
-            background: 'var(--ab-color-primary)',
-            borderRadius: 'var(--ab__border-radius)',
-        } },
+    return examples.length ? (React.createElement(Box, { "data-name": "expression-hints", className: "twa:my-2 twa:p-2 twa:bg-primary twa:rounded-standard" },
         React.createElement(Box, null,
-            React.createElement(Text, { marginBottom: 2 },
+            React.createElement(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(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, { className: "twa:mr-2 twa:rounded-standard twa:mb-1 twa:text-2", alignItems: "center", as: "summary" },
                     React.createElement(CodeBlock, null,
                         " ",
                         example.code)),
-                React.createElement(Text, { fontSize: 2, marginLeft: 3, style: { fontStyle: 'italic' } }, example.description))))))) : null;
+                React.createElement(Box, { className: "twa:ml-3 twa:italic twa:text-2" }, example.description))))))) : null;
 };
 const queryDocumentationLinks = {
     boolean: 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

@@ -1,12 +1,7 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
-import join from '../utils/join';
-const defaulProps = {
-    flexDirection: 'row',
-    alignItems: 'center',
-};
+import { Flex } from '../Flex';
+import clsx from 'clsx';
 const FieldWrap = (props) => {
-    const flexProps = { ...defaulProps, ...props };
-    return React.createElement(Flex, { ...flexProps, className: join(props.className, 'ab-FieldWrap') });
+    return (React.createElement(Flex, { flexDirection: "row", alignItems: "center", ...props, className: clsx('ab-FieldWrap', props.className) }));
 };
 export 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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Flex, Box } from 'rebass';
 import { useReducer, useRef } from 'react';
 import join from '../../components/utils/join';
 import contains from '../../components/utils/contains';
@@ -7,6 +6,7 @@ import SimpleButton from '../SimpleButton';
 import { Icon } from '../icons';
 import HelpBlock from '../HelpBlock';
 import reducer, { ActionTypes } from './reducer';
+import { Box, Flex } from '../Flex';
 const initialState = {
     dragOver: false,
     message: null,
@@ -112,10 +112,10 @@ const FileDroppable = (props = {}) => {
     return (React.createElement(Flex, { ...domProps, flexDirection: "column", className: join(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(Flex, { flexDirection: "column" },
-            helpText ? (React.createElement(Flex, { flexDirection: "column", alignItems: "center", margin: 2 },
+            helpText ? (React.createElement(Flex, { flexDirection: "column", alignItems: "center", className: "twa:m-2" },
                 React.createElement(HelpBlock, null,
                     React.createElement("b", null, helpText)))) : null,
-            icon ? (React.createElement(Flex, { flexDirection: "column", alignItems: "center", margin: 2 }, icon)) : null)) : null,
+            icon ? (React.createElement(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 +1,40 @@
-export { Flex } from 'rebass';
+import * as React from 'react';
+import clsx from 'clsx';
+import { twMerge } from '../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',
+};
+export const Flex = React.forwardRef((props, ref) => {
+    const { className: _, flexDirection, alignItems, justifyContent, flexWrap, as, ...domProps } = props;
+    const className = clsx('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: twMerge(className, props.className) }));
+});
+export const Box = React.forwardRef((props, ref) => {
+    const { className, as, ...domProps } = props;
+    const Cmp = (as || 'div');
+    return (React.createElement(Cmp, { ref: ref, ...domProps, className: 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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
+import { Flex } from './Flex';
 const defaultStyle = {
     height: '100%',
     maxHeight: '90vh',
@@ -9,8 +9,8 @@ const defaultStyle = {
 const FlexWithFooter = (props) => {
     const { footer, footerProps, children, style, ...domProps } = props;
     return (React.createElement(Flex, { flexDirection: "column", ...domProps, style: { ...defaultStyle, ...style } },
-        React.createElement(Flex, { flexDirection: "column", padding: 0, flex: 1 },
-            React.createElement(Flex, { flexDirection: "column", flex: 1 }, children)),
-        footer ? (React.createElement(Flex, { padding: 2, backgroundColor: "primary", ...footerProps }, footer)) : null));
+        React.createElement(Flex, { flexDirection: "column", className: "twa:p-0 twa:flex-1" },
+            React.createElement(Flex, { flexDirection: "column", className: "twa:flex-1" }, children)),
+        footer ? (React.createElement(Flex, { className: "twa:p-2 twa:bg-primary", ...footerProps }, footer)) : null));
 };
 export 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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { createContext, useContext } from 'react';
 import merge from 'lodash/merge';
 import join from '../utils/join';
+import { Box } from '../Flex';
 const FormLayoutContext = createContext(null);
 const defaultColumns = {
     label: {

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,8 +1,9 @@
 import * as React from 'react';
-import { Box } from 'rebass';
-import join from '../utils/join';
+import { Box } from '../Flex';
+import clsx from 'clsx';
 export const baseClassName = 'ab-HelpBlock';
+export const HelpBlockClassName = clsx('twa:text-2/relaxed twa:p-2 twa:rounded-standard', 'twa:bg-primarylight twa:text-primary-foreground', baseClassName);
 const HelpBlock = (props) => {
-    return React.createElement(Box, { ...props, className: join(props.className, baseClassName) });
+    return React.createElement(Box, { ...props, className: clsx(HelpBlockClassName, props.className) });
 };
 export default HelpBlock;

package/src/components/IconSelector/IconSelector.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Box, Flex } from 'rebass';
 import AdaptableInput from '../../View/Components/AdaptableInput';
 import { IconComponent } from '../Icon';
 import { allIcons, Icon } from '../icons';
 import OverlayTrigger from '../OverlayTrigger';
 import SimpleButton from '../SimpleButton';
+import { Box, Flex } from '../Flex';
 const IconButton = (props) => {
-    return (React.createElement(SimpleButton, { onClick: () => props.onClick(), p: 2, variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon }, props.children));
+    return (React.createElement(SimpleButton, { onClick: () => props.onClick(), className: "twa:p-2", variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon }, props.children));
 };
 export const IconSelector = (props) => {
     const [query, setQuery] = React.useState('');
@@ -25,10 +25,10 @@ export const IconSelector = (props) => {
             React.createElement(IconComponent, { key: def.name, icon: def.icon })));
     });
     const popup = (React.createElement(Box, { className: "ab-IconSelector__Popup" },
-        React.createElement(Box, { mb: 2 },
-            React.createElement(Box, { mb: 2, fontSize: 4 }, "Select an Icon"),
-            React.createElement(AdaptableInput, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), width: "100%" })),
-        React.createElement(Flex, { p: 2, style: { width: 300, maxHeight: 300, overflow: 'auto' }, flexWrap: "wrap" },
+        React.createElement(Box, { className: "twa:mb-2" },
+            React.createElement(Box, { className: "twa:mb-2 twa:text-4" }, "Select an Icon"),
+            React.createElement(AdaptableInput, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), className: "twa:w-full" })),
+        React.createElement(Flex, { className: "twa:p-2 twa:w-[300px] twa:max-h-[300px] twa:overflow-auto twa:flex-wrap" },
             iconsElements,
             " ",
             customIconsElements)));
@@ -43,8 +43,8 @@ export const IconSelector = (props) => {
     }
     return (React.createElement(Flex, { className: "ab-IconSelector" },
         React.createElement(OverlayTrigger, { preventPortalEventPropagation: false, render: () => popup, showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300 },
-            React.createElement(SimpleButton, { className: "ab-IconSelector__trigger", textAlign: "center", onClick: () => null, variant: "raised", width: 150, justifyContent: "center" }, value)),
-        (props.clearable ?? true) && (React.createElement(SimpleButton, { disabled: !props.value, className: "ab-IconSelector__clear-button", ml: 2, onClick: (event) => {
+            React.createElement(SimpleButton, { className: "ab-IconSelector__trigger twa:text-center twa:w-[150px] twa:justify-center", onClick: () => null, variant: "raised" }, value)),
+        (props.clearable ?? true) && (React.createElement(SimpleButton, { disabled: !props.value, className: "ab-IconSelector__clear-button twa:ml-2", onClick: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
                 props.onChange('');

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

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { HTMLProps } from 'react';
-import { BoxProps } from 'rebass';
 export declare const baseClassName = "ab-Input";
 export type InputProps = HTMLProps<HTMLInputElement> & {
     type?: string;
     disabled?: boolean;
     list?: any;
-} & BoxProps;
+};
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/src/components/Input/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Box } from 'rebass';
-import join from '../utils/join';
+import { Box } from '../Flex';
+import clsx from 'clsx';
 export const baseClassName = 'ab-Input';
 const Input = React.forwardRef((props, ref) => {
     const { disabled, className, ...inputProps } = props;
@@ -11,6 +11,9 @@ const Input = React.forwardRef((props, ref) => {
     if (type === 'string') {
         type = 'text';
     }
-    return (React.createElement(Box, { as: "input", ref: ref, ...inputProps, type: type, disabled: disabled, className: join(className, baseClassName, type ? `${baseClassName}--type-${type}` : '', disabled ? `${baseClassName}--disabled` : '') }));
+    return (React.createElement(Box, { as: "input", ref: ref, ...inputProps, type: type, disabled: disabled, className: clsx(className, baseClassName, 'twa:min-h-input', type ? `${baseClassName}--type-${type}` : '', disabled ? `${baseClassName}--disabled` : '', {
+            'twa:bg-(--ab-cmp-input__background)': !disabled,
+            'twa:bg-(--ab-cmp-input--disabled__background)': disabled,
+        }) }));
 });
 export default Input;

package/src/components/Modal/Backdrop.js

@@ -22,7 +22,7 @@ const Backdrop = (props) => {
         });
         return () => updatePositionInStack(uuid, null);
     }, []);
-    return backdropVisible ? (React.createElement("div", { "data-id": uuid, style: { zIndex }, className: `${baseClassName}-backdrop` })) : null;
+    return backdropVisible ? (React.createElement("div", { "data-id": uuid, style: { zIndex }, className: `${baseClassName}-backdrop twa:fixed twa:inset-0 twa:z-900 twa:bg-(--ab-cmp-modal-backdrop__background)` })) : null;
 };
 const stack = {};
 export const updatePositionInStack = (id, data) => {

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
+import { HTMLProps } from 'react';
+import { FlexProps } from '../Flex';
 export declare const ensurePortalElement: () => HTMLElement;
 export declare const ensureLoadingScreenPortalElement: () => HTMLElement;
-export interface ModalProps extends FlexProps {
+export interface ModalProps extends FlexProps, HTMLProps<HTMLDivElement> {
     isOpen?: boolean;
     baseZIndex?: number;
     onBringToFront?: () => void;

package/src/components/Modal/index.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { useMemo } from 'react';
-import join from '../utils/join';
 import { RemoveScroll } from 'react-remove-scroll';
-import { Flex } from 'rebass';
 import { baseClassName, default as Backdrop } from './Backdrop';
 import { createUuid } from '../utils/uuid';
 import { isBrowserDocumentAvailable } from '../../View/UIHelper';
 import { useStacking } from '../WindowModal/useStacking';
+import { Flex } from '../Flex';
+import clsx from 'clsx';
 let portalElement;
 let loadingScreenPortalElement;
 export const ensurePortalElement = () => {
@@ -45,5 +45,5 @@ export const Modal = (props) => {
     return createPortal(isOpen ? (React.createElement(React.Fragment, null,
         React.createElement(Backdrop, { timestamp: openTimestamp, uuid: uuid, zIndex: zIndex - backdropZIndexOffset, onBringToFront: onBringToFront }),
         React.createElement(RemoveScroll, null,
-            React.createElement(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...boxProps, style: { zIndex, ...style }, className: join(baseClassName, className) }, children)))) : null, portalElement);
+            React.createElement(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...boxProps, style: { zIndex, ...style }, className: clsx('twa:fixed twa:inset-0 twa:z-1000 twa:font-(family-name:--ab__font-family)', baseClassName, className) }, children)))) : null, portalElement);
 };

package/src/components/OverlayTrigger/index.js

@@ -93,6 +93,9 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
     // when moving the mouse cursor from the trigger to the overlay
     // for this case we debounce the visible change for a very small amount of time
     debounce((visible) => {
+        // if (!visible) {
+        //   return;
+        // }
         onVisibleChange?.(visible);
         if (!visible) {
             hideTimeoutRef.current = setTimeout(() => {

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

@@ -1,18 +1,34 @@
 import * as React from 'react';
-import { BoxProps, FlexProps } from 'rebass';
 import { ReactNode, HTMLProps } from 'react';
+import { FlexProps } from '../Flex';
 export declare const baseClassName = "ab-Panel";
 export interface HeaderProps extends FlexProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
 }
-export type PanelProps = HTMLProps<HTMLElement> & {
+export type PanelProps = HTMLProps<HTMLDivElement> & {
     header?: ReactNode | string;
     children?: ReactNode;
     headerProps?: HeaderProps;
-    bodyProps?: BoxProps;
+    bodyProps?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
     variant?: 'default' | 'primary' | 'modern';
     border?: string | number;
-    borderRadius?: string | number;
     bodyScroll?: string | boolean;
-} & BoxProps;
-declare const Panel: React.FC<PanelProps>;
+} & FlexProps;
+declare const PlainHeader: ({ children, className }: {
+    children?: ReactNode;
+    className?: string;
+}) => React.JSX.Element;
+declare const FlexBody: ({ children, className }: {
+    children?: ReactNode;
+    className?: string;
+}) => React.JSX.Element;
+declare const Panel: React.FC<PanelProps> & {
+    FlexBody: typeof FlexBody;
+    PlainHeader: typeof PlainHeader;
+};
 export default Panel;