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

package/src/View/FreeTextColumn/Wizard/FreeTextColumnWizard.js

@@ -4,7 +4,6 @@ exports.FreeTextColumnWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Helper_1 = require("../../../Utilities/Helpers/Helper");
 const FreeTextColumnSettingsWizardSection_1 = require("./FreeTextColumnSettingsWizardSection");
@@ -13,6 +12,7 @@ const FreeTextColumnRedux = tslib_1.__importStar(require("../../../Redux/Actions
 const react_redux_1 = require("react-redux");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const AdaptableContext_1 = require("../../AdaptableContext");
+const Flex_1 = require("../../../components/Flex");
 const FreeTextColumnWizard = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const allFreeTextColumns = (0, react_redux_1.useSelector)((state) => state.FreeTextColumn.FreeTextColumns);
@@ -42,7 +42,7 @@ const FreeTextColumnWizard = (props) => {
                 details: 'Configure the Free Text Column',
                 isValid: FreeTextColumnSettingsWizardSection_1.isValidFreeTextColumn,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(FreeTextColumnSettingsWizardSection_1.FreeTextColumnSettingsWizardSection, { isEdit: Boolean(props.data), onChange: setFreeTextColumn })));
                 },
             },
@@ -50,7 +50,7 @@ const FreeTextColumnWizard = (props) => {
                 details: 'Select Free Text Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setFreeTextColumn }))),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
@@ -59,7 +59,7 @@ const FreeTextColumnWizard = (props) => {
                 details: 'Review the Free Text Column',
                 renderSummary: FreeTextColumnSettingsWizardSection_1.renderFreeTextColumnSummary,
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
                 },
                 title: 'Summary',

package/src/View/GridFilter/GridFilterExpressionEditor.js

@@ -4,7 +4,6 @@ exports.GridFilterExpressionEditor = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
 const ExpressionEditor_1 = require("../../components/ExpressionEditor");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
@@ -15,6 +14,7 @@ const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions"
 const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const useGridFilterOptionsForExpressionEditor_1 = require("./useGridFilterOptionsForExpressionEditor");
+const Flex_1 = require("../../components/Flex");
 const GridFilterExpressionEditor = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const { api } = (0, AdaptableContext_1.useAdaptable)();
@@ -91,15 +91,15 @@ const GridFilterExpressionEditor = (props) => {
                 setNamedQuery(newQuery);
             },
         } },
-        React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column" },
+        React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:h-full" },
             React.createElement(ExpressionEditor_1.ExpressionEditor, { ...expressionEditorProps, type: 'boolean', module: ModuleConstants_1.GridFilterModuleId, value: expression, onChange: (expression) => setExpression(expression), initialData: initialData, columns: api.columnApi.internalApi.getQueryableColumnsForUIEditor(), fields: api.expressionApi.internalApi.getAvailableFields(), namedQueries: api.namedQueryApi.getNamedQueries(), api: api }),
-            React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 1, alignItems: "center" },
-                props.onDismiss && (React.createElement(SimpleButton_1.default, { margin: 1, variant: "text", "data-name": "action-close", onClick: () => {
+            React.createElement(Flex_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-1" },
+                props.onDismiss && (React.createElement(SimpleButton_1.default, { className: "twa:m-1", variant: "text", "data-name": "action-close", onClick: () => {
                         props.onDismiss();
                     } }, "CLOSE")),
-                React.createElement(rebass_1.Box, { flex: 1 }),
+                React.createElement(Flex_1.Box, { className: "twa:flex-1" }),
                 React.createElement(SimpleButton_1.default, { disabled: actionsDisabled, onClick: handleSaveQuery, icon: "save" }, "Save Query"),
-                React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-run", margin: 1, icon: "play", onClick: () => {
+                React.createElement(SimpleButton_1.default, { variant: "raised", tone: "accent", "data-name": "action-run", className: "twa:m-1", icon: "play", onClick: () => {
                         if (namedQuery) {
                             onAddNamedQuery({
                                 Name: namedQuery.Name,

package/src/View/GridFilter/GridFilterPopup.js

@@ -3,47 +3,38 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterPopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
-const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"));
-const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
-const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
-const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
-const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
-const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
-const ButtonExpand_1 = require("../Components/Buttons/ButtonExpand");
-const ButtonInvalid_1 = require("../Components/Buttons/ButtonInvalid");
-const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
-const ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
-const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
-const ButtonUnsuspend_1 = require("../Components/Buttons/ButtonUnsuspend");
-const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
-const NamedQuerySelector_1 = require("./NamedQuerySelector");
 const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor");
+const GridFilterPopupUI_1 = require("./GridFilterPopupUI");
 const GridFilterPopup = () => {
-    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, gridFilterHelpPage, gridFilterLinkDisabled, isReadOnly, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
-    const handleEnter = (e) => {
-        if (e.key === 'Enter') {
-            runQuery();
-        }
-    };
-    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
-    return (React.createElement(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: "Grid Filter", glyphicon: "grid-filter", infoLink: gridFilterHelpPage, infoLinkDisabled: gridFilterLinkDisabled },
-        React.createElement(Panel_1.default, { bodyProps: { height: '100%' }, height: "100%" },
-            React.createElement(FormLayout_1.default, null,
-                React.createElement(FormLayout_1.FormRow, { label: "Expression" },
-                    React.createElement(FieldWrap_1.default, { marginRight: 1, width: "100%" },
-                        React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }),
-                        React.createElement(Input_1.default, { onKeyDown: handleEnter, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (x) => setExpression(x.target.value), style: { fontFamily: 'monospace', fontSize: 12 } }),
-                        isExpressionValid && (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == gridFilter?.Expression, marginRight: 1 })),
-                        gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
-                        ' ',
-                        StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))),
-                React.createElement(FormLayout_1.FormRow, { label: "" },
-                    React.createElement(rebass_1.Flex, { justifyContent: "space-around" },
-                        React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }, "Save"),
-                        isSuspended ? (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Resume")) : (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }, "Suspend")),
-                        React.createElement(DropdownButton_1.default, { disabled: disabled, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns", icon: "list", iconPosition: "start" }, "Columns"),
-                        React.createElement(NamedQuerySelector_1.NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }, "Named Queries")))))));
+    const hookData = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
+    // Create callback handlers
+    const handleExpressionChange = (value) => {
+        hookData.setExpression(value);
+    };
+    const handleRunQuery = (expression) => {
+        hookData.runQuery(expression);
+    };
+    const handleClearQuery = () => {
+        hookData.clearQuery();
+    };
+    const handleSaveQuery = () => {
+        hookData.saveQuery();
+    };
+    const handleSuspend = () => {
+        hookData.suspendGridFilter();
+    };
+    const handleUnsuspend = () => {
+        hookData.unSuspendGridFilter();
+    };
+    const handleExpand = () => {
+        hookData.onExpand();
+    };
+    const handleSelectNamedQuery = (query) => {
+        handleRunQuery(query);
+    };
+    const handleSetGridFilterExpression = (query) => {
+        hookData.setGridFilterExpression(query);
+    };
+    return (React.createElement(GridFilterPopupUI_1.GridFilterPopupUI, { expression: hookData.expression, isExpressionValid: hookData.isExpressionValid, isExpressionNamedQuery: hookData.isExpressionNamedQuery, isSuspended: hookData.isSuspended, isReadOnly: hookData.isReadOnly, availableColumns: hookData.availableColumns, namedQueries: hookData.namedQueries, cachedQueries: hookData.cachedQueries, currentGridFilterExpression: hookData.gridFilter?.Expression, headerText: "Grid Filter", glyphicon: "grid-filter", infoLink: hookData.gridFilterHelpPage, infoLinkDisabled: hookData.gridFilterLinkDisabled, onExpressionChange: handleExpressionChange, onRunQuery: handleRunQuery, onClearQuery: handleClearQuery, onSaveQuery: handleSaveQuery, onSuspend: handleSuspend, onUnsuspend: handleUnsuspend, onExpand: handleExpand, onSelectNamedQuery: handleSelectNamedQuery, onSetGridFilterExpression: handleSetGridFilterExpression, gridFilterAccessLevel: hookData.gridFilterAccessLevel, namedQueryAccessLevel: hookData.namedQueryModuleAccessLevel }));
 };
 exports.GridFilterPopup = GridFilterPopup;

package/src/View/GridFilter/GridFilterPopupUI/index.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { NamedQuery, CachedQuery } from '../../../AdaptableState/NamedQueryState';
+/**
+ * Column item for the dropdown menu
+ */
+export interface ColumnItem {
+    /** Column identifier */
+    columnId: string;
+    /** Display label for the column */
+    label: string;
+    /** Callback when column is selected */
+    onClick: () => void;
+}
+/**
+ * Props for the GridFilterPopupUI component.
+ * This is a pure presentation component that receives all data and callbacks as props.
+ */
+export interface GridFilterPopupUIProps {
+    /** Current filter expression value */
+    expression: string;
+    /** Whether the current expression is valid */
+    isExpressionValid: boolean;
+    /** Whether the current expression matches a named query */
+    isExpressionNamedQuery: boolean;
+    /** Whether the grid filter is currently suspended */
+    isSuspended: boolean;
+    /** Whether the grid filter is read only */
+    isReadOnly: boolean;
+    /** Available columns for the dropdown menu */
+    availableColumns: ColumnItem[];
+    /** List of saved named queries */
+    namedQueries: NamedQuery[];
+    /** List of recently used cached queries */
+    cachedQueries: CachedQuery[];
+    /** Current grid filter expression (may differ from input expression) */
+    currentGridFilterExpression?: string;
+    /** Header text for the popup panel */
+    headerText: string;
+    /** Icon name for the popup panel */
+    glyphicon: string;
+    /** Help page URL for the info link */
+    infoLink?: string;
+    /** Whether the info link should be disabled */
+    infoLinkDisabled?: boolean;
+    /** Called when the expression input value changes */
+    onExpressionChange: (value: string) => void;
+    /** Called when the query should be executed */
+    onRunQuery: (expression?: string) => void;
+    /** Called when the clear button is clicked */
+    onClearQuery: () => void;
+    /** Called when the save button is clicked */
+    onSaveQuery: () => void;
+    /** Called when the suspend button is clicked */
+    onSuspend: () => void;
+    /** Called when the unsuspend/resume button is clicked */
+    onUnsuspend: () => void;
+    /** Called when the expand button is clicked */
+    onExpand: () => void;
+    /** Called when a named query is selected */
+    onSelectNamedQuery: (query: string) => void;
+    /** Called when setting the grid filter expression directly */
+    onSetGridFilterExpression: (query: string) => void;
+    /** Access level for grid filter operations */
+    gridFilterAccessLevel: 'ReadOnly' | 'Hidden' | 'Full';
+    /** Access level for named query operations */
+    namedQueryAccessLevel: 'ReadOnly' | 'Hidden' | 'Full';
+}
+export declare const GridFilterPopupUI: (props: GridFilterPopupUIProps) => React.JSX.Element;

package/src/View/GridFilter/GridFilterPopupUI/index.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridFilterPopupUI = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const FieldWrap_1 = tslib_1.__importDefault(require("../../../components/FieldWrap"));
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
+const ButtonClear_1 = require("../../Components/Buttons/ButtonClear");
+const ButtonExpand_1 = require("../../Components/Buttons/ButtonExpand");
+const ButtonInvalid_1 = require("../../Components/Buttons/ButtonInvalid");
+const ButtonPause_1 = require("../../Components/Buttons/ButtonPause");
+const ButtonPlay_1 = require("../../Components/Buttons/ButtonPlay");
+const ButtonSave_1 = require("../../Components/Buttons/ButtonSave");
+const ButtonUnsuspend_1 = require("../../Components/Buttons/ButtonUnsuspend");
+const PopupPanel_1 = require("../../Components/Popups/AdaptablePopup/PopupPanel");
+const NamedQuerySelector_1 = require("./../NamedQuerySelector");
+const Flex_1 = require("../../../components/Flex");
+const GridFilterPopupUI = (props) => {
+    const { expression, isExpressionValid, isExpressionNamedQuery, isSuspended, isReadOnly, availableColumns, namedQueries, cachedQueries, currentGridFilterExpression, headerText, glyphicon, infoLink, infoLinkDisabled, onExpressionChange, onRunQuery, onClearQuery, onSaveQuery, onSuspend, onUnsuspend, onExpand, onSelectNamedQuery, onSetGridFilterExpression, gridFilterAccessLevel, namedQueryAccessLevel, } = props;
+    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            onRunQuery();
+        }
+    };
+    return (React.createElement(PopupPanel_1.PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled },
+        React.createElement(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
+            React.createElement(Panel_1.default.FlexBody, null,
+                React.createElement(Flex_1.Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center" },
+                    "Expression:",
+                    React.createElement(FieldWrap_1.default, { className: "twa:mr-1 twa:w-full" },
+                        React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }),
+                        React.createElement(Input_1.default, { onKeyDown: handleKeyDown, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (e) => onExpressionChange(e.target.value), className: "twa:font-mono twa:text-2" }),
+                        isExpressionValid && (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })),
+                        currentGridFilterExpression && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })),
+                        ' ',
+                        StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))),
+                    React.createElement(Flex_1.Flex, { justifyContent: "space-around", className: "twa:col-start-2" },
+                        React.createElement(ButtonSave_1.ButtonSave, { onClick: () => onSaveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression === '', variant: "text", tone: "neutral", className: "twa:mr-1" }, "Save"),
+                        isSuspended ? (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }, "Resume")) : (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }, "Suspend")),
+                        React.createElement(DropdownButton_1.default, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", icon: "list", iconPosition: "start" }, "Columns"),
+                        React.createElement(NamedQuerySelector_1.NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query) }, "Named Queries")))))));
+};
+exports.GridFilterPopupUI = GridFilterPopupUI;

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridFilterPanelControl = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"));
@@ -18,6 +17,7 @@ const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
 const ButtonUnsuspend_1 = require("../Components/Buttons/ButtonUnsuspend");
 const NamedQuerySelector_1 = require("./NamedQuerySelector");
 const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor");
+const Flex_1 = require("../../components/Flex");
 const QueryViewPanelComponent = (props) => {
     const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, availableColumns, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
     if (!isAdaptableReady) {
@@ -31,14 +31,11 @@ const QueryViewPanelComponent = (props) => {
             runQuery();
         }
     };
-    const buttonExpand = (React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }));
+    const buttonExpand = (React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
     const renderTextInput = () => {
-        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap_1.default, { marginRight: 1, width: 500, style: { overflow: 'visible' } },
+        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap_1.default, { className: "twa:mr-1 twa:w-[500px] twa:overflow-visible" },
             buttonExpand,
-            React.createElement(rebass_1.Box, { style: {
-                    position: 'relative',
-                    height: '100%',
-                }, flex: 1 },
+            React.createElement(Flex_1.Box, { className: "twa:flex-1 twa:relative twa:h-full" },
                 React.createElement(Textarea_1.default, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
                         left: 0,
                         top: 0,
@@ -54,17 +51,13 @@ const QueryViewPanelComponent = (props) => {
                         overflow: 'hidden',
                         zIndex: 100,
                     }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
-            isExpressionValid && (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == gridFilter?.Expression, marginRight: 1 })),
-            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
+            isExpressionValid && (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == gridFilter?.Expression, className: "twa:mr-1" })),
+            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })),
             ' ',
-            StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap_1.default, { width: "100%", overflow: "visible" },
+            StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap_1.default, { className: "twa:w-full twa:overflow-visible" },
             ' ',
             buttonExpand,
-            React.createElement(rebass_1.Box, { style: {
-                    position: 'relative',
-                    minHeight: 40,
-                    width: '100%',
-                }, flex: 1 },
+            React.createElement(Flex_1.Box, { className: "twa:flex-1 twa:relative twa:w-full twa:min-h-[40px]" },
                 React.createElement(Textarea_1.default, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
                         left: 0,
                         top: 0,
@@ -81,11 +74,11 @@ const QueryViewPanelComponent = (props) => {
                         overflow: 'hidden',
                     }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
     };
-    const saveButton = (React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }));
-    const suspendButton = (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
-    const unSuspendButton = (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
+    const saveButton = (React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", className: "twa:mr-1" }));
+    const suspendButton = (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }));
+    const unSuspendButton = (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }));
     const namedQuerySelector = (React.createElement(NamedQuerySelector_1.NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }));
-    const columnsDropdown = (React.createElement(DropdownButton_1.default, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns" },
+    const columnsDropdown = (React.createElement(DropdownButton_1.default, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns" },
         React.createElement(icons_1.Icon, { name: 'list' })));
     const renderButtons = () => {
         return props.viewType === 'Toolbar' ? (React.createElement(React.Fragment, null,
@@ -94,7 +87,7 @@ const QueryViewPanelComponent = (props) => {
             columnsDropdown,
             namedQuerySelector,
             ' ')) : (React.createElement(React.Fragment, null,
-            React.createElement(ButtonPlay_1.ButtonPlay, { "aria-label": 'Run Grid Filter', onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, marginRight: 1 }),
+            React.createElement(ButtonPlay_1.ButtonPlay, { "aria-label": 'Run Grid Filter', onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, className: "twa:mr-1" }),
             ' ',
             React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, disabled: expression == '' }),
             ' ',
@@ -102,8 +95,8 @@ const QueryViewPanelComponent = (props) => {
             isSuspended ? unSuspendButton : suspendButton,
             namedQuerySelector));
     };
-    return (React.createElement(rebass_1.Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-        React.createElement(rebass_1.Flex, { width: props.viewType === 'ToolPanel' ? '100%' : 'auto' }, renderTextInput()),
-        React.createElement(rebass_1.Flex, null, renderButtons())));
+    return (React.createElement(Flex_1.Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+        React.createElement(Flex_1.Flex, { className: props.viewType === 'ToolPanel' ? 'twa:w-full' : 'twa:w-auto' }, renderTextInput()),
+        React.createElement(Flex_1.Flex, null, renderButtons())));
 };
 exports.GridFilterPanelControl = QueryViewPanelComponent;

package/src/View/GridFilter/NamedQuerySelector.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NamedQuerySelector = exports.AvailableSearchLabel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const icons_1 = require("../../components/icons");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
@@ -12,9 +11,10 @@ const Enums_1 = require("../../AdaptableState/Common/Enums");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
 const ButtonOpen_1 = require("../Components/Buttons/ButtonOpen");
+const Flex_1 = require("../../components/Flex");
 const AvailableSearchLabel = (props) => {
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column", textAlign: "start", width: "100%", justifyContent: "space-around" },
-        React.createElement(rebass_1.Box, { mb: 2, flex: 1 }, props.label),
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", justifyContent: "space-around", className: "twa:text-start twa:w-full" },
+        React.createElement(Flex_1.Box, { className: "twa:mb-2 twa:flex-1" }, props.label),
         React.createElement(Tag_1.Tag, null, props.expression)));
 };
 exports.AvailableSearchLabel = AvailableSearchLabel;
@@ -39,15 +39,15 @@ const NamedQuerySelector = (props) => {
         : null;
     return ArrayExtensions_1.default.IsNotNullOrEmpty(cachedQueries) ||
         ArrayExtensions_1.default.IsNotNullOrEmpty(availableSearches) ? (React.createElement(AdaptablePopover_1.AdaptablePopover, { tooltipText: "Load Named Query", showIcon: false, popoverMinWidth: 300, bodyText: [
-            React.createElement(rebass_1.Flex, { justifyContent: "stretch", flexDirection: "column" },
+            React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:justify-stretch" },
                 React.createElement(Panel_1.default, { header: "Named Queries" },
-                    React.createElement(rebass_1.Flex, { flexDirection: "column" }, availableSearches.map((item, index) => {
-                        return (React.createElement(SimpleButton_1.default, { mb: 2, variant: "text", key: index, onClick: item.onClick }, item.label));
+                    React.createElement(Flex_1.Flex, { flexDirection: "column" }, availableSearches.map((item, index) => {
+                        return (React.createElement(SimpleButton_1.default, { className: "twa:mb-2", variant: "text", key: index, onClick: item.onClick }, item.label));
                     }))),
                 cachedQueries ? (React.createElement(React.Fragment, null,
-                    React.createElement(Panel_1.default, { mt: 2, header: "Recent Grid Filters" },
-                        React.createElement(rebass_1.Flex, { flexDirection: "column" }, cachedQueries.map((cachedQuery, index) => {
-                            return (React.createElement(SimpleButton_1.default, { disabled: props.disabled, mb: 2, variant: "text", key: index, onClick: cachedQuery.onClick }, cachedQuery.label));
+                    React.createElement(Panel_1.default, { className: "twa:mt-2", header: "Recent Grid Filters" },
+                        React.createElement(Flex_1.Flex, { flexDirection: "column" }, cachedQueries.map((cachedQuery, index) => {
+                            return (React.createElement(SimpleButton_1.default, { disabled: props.disabled, className: "twa:mb-2", variant: "text", key: index, onClick: cachedQuery.onClick }, cachedQuery.label));
                         }))))) : null),
         ] },
         React.createElement(SimpleButton_1.default, { disabled: props.disabled, variant: "text", icon: "folder-open" }, props.children))) : (React.createElement(ButtonOpen_1.ButtonOpen, { tooltip: "Load Named Query", disabled: true }));

package/src/View/GridFilter/useGridFilterExpressionEditor.d.ts

@@ -13,7 +13,11 @@ export declare const useGridFilterExpressionEditor: () => {
     isAdaptableReady: boolean;
     namedQueries: import("../../types").NamedQuery[];
     onAddCachedQuery: (cachedQuery: CachedQuery) => void;
-    availableColumns: any[];
+    availableColumns: {
+        columnId: string;
+        label: string;
+        onClick: () => void;
+    }[];
     runQuery: (newExpression?: string) => void;
     clearQuery: () => void;
     onExpand: () => void;

package/src/View/GridFilter/useGridFilterExpressionEditor.js

@@ -44,8 +44,9 @@ const useGridFilterExpressionEditor = () => {
             .getQueryLanguageService()
             .validateBoolean(expression, ModuleConstants_1.NamedQueryModuleId).isValid;
     const isExpressionNamedQuery = namedQueries.find((sq) => sq.BooleanExpression == expression) != null;
-    let availableColumns = adaptable.api.columnApi.getColumns().map((col) => {
+    const availableColumns = adaptable.api.columnApi.getColumns().map((col) => {
         return {
+            columnId: col.columnId,
             label: col.friendlyName,
             onClick: () => {
                 // Bogdan - im sure there is a better way to do this check with fancy operators i dont know

package/src/View/GridInfo/GridInfoPopup/AdaptableObjectsSummary.d.ts

@@ -1,2 +1,4 @@
 import * as React from 'react';
-export declare const AdaptableObjectsSummary: React.FunctionComponent;
+export declare const AdaptableObjectsSummary: React.FunctionComponent<{
+    className?: string;
+}>;

package/src/View/GridInfo/GridInfoPopup/AdaptableObjectsSummary.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableObjectsSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../../components/Flex");
 const AdaptableContext_1 = require("../../AdaptableContext");
 const AdaptableObjectList_1 = require("../../Components/AdaptableObjectList");
 const useRerender_1 = require("../../../components/utils/useRerender");
 const react_1 = require("react");
-const AdaptableObjectsSummary = () => {
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const AdaptableObjectsSummary = ({ className, }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const rerender = (0, useRerender_1.useRerender)();
     (0, react_1.useEffect)(() => {
@@ -16,7 +17,7 @@ const AdaptableObjectsSummary = () => {
     }, [adaptable]);
     const modules = adaptable.ModuleService.getModuleCollection();
     const baseClassName = 'ab-AdaptableObjectsSummary';
-    return (React.createElement(rebass_1.Box, { className: baseClassName }, [...modules].map(([moduleName, module]) => {
+    return (React.createElement(Flex_1.Box, { className: (0, clsx_1.default)(baseClassName, className) }, [...modules].map(([moduleName, module]) => {
         if (!module.isModuleVisible()) {
             return null;
         }
@@ -24,7 +25,7 @@ const AdaptableObjectsSummary = () => {
         if (!items?.length) {
             return null;
         }
-        return (React.createElement(rebass_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, key: module.moduleInfo.ModuleName },
+        return (React.createElement(Flex_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${baseClassName}__module-list`, key: module.moduleInfo.ModuleName },
             React.createElement("b", { className: `${baseClassName}__header` }, module.moduleInfo.FriendlyName),
             items?.length && React.createElement(AdaptableObjectList_1.AdaptableObjectList, { items: items, module: module })));
     })));

package/src/View/GridInfo/GridInfoPopup/AdaptableOptionsComponent.js

@@ -10,7 +10,7 @@ const ButtonMaximise_1 = require("../../Components/Buttons/ButtonMaximise");
 const AdaptableObjectCollection_1 = require("../../Components/AdaptableObjectCollection");
 const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
 const AdaptablePopover_1 = require("../../AdaptablePopover");
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../../components/Flex");
 const AdaptableOptionsComponent = (props) => {
     const { api } = props;
     const getAdaptableOptionsColItems = () => [
@@ -81,7 +81,7 @@ const AdaptableOptionsComponent = (props) => {
         setGridInfoOptions(gridInfoOptions);
     }, []);
     const [expandedComponentContainer, setExpandedComponentContainer] = (0, react_1.useState)('');
-    return (React.createElement(rebass_1.Box, { className: "ab-AdaptableOptions", padding: 2, "data-name": "gridInfo-adaptableOptions-content" }, gridInfoOptions &&
+    return (React.createElement(Flex_1.Box, { className: "ab-AdaptableOptions twa:p-2", "data-name": "gridInfo-adaptableOptions-content" }, gridInfoOptions &&
         Array.from(gridInfoOptions.entries()).map(([containerName, container]) => (React.createElement(OptionContainerComponent, { key: containerName, name: containerName, label: container.containerLabel, viewMode: containerName === expandedComponentContainer ? 'expanded' : 'collapsed', onViewModeChange: (newViewMode) => setExpandedComponentContainer(newViewMode === 'expanded' ? containerName : '') }, gridInfoContainerComponents.get(containerName))))));
 };
 exports.AdaptableOptionsComponent = AdaptableOptionsComponent;
@@ -91,13 +91,9 @@ const OptionContainerComponent = (props) => {
         onViewModeChange(viewMode === 'expanded' ? 'collapsed' : 'expanded');
     };
     const panelButton = viewMode === 'expanded' ? (React.createElement(ButtonMinimise_1.ButtonMinimise, { onClick: () => requestViewModeChange(), tooltip: `Hide ${label}` })) : (React.createElement(ButtonMaximise_1.ButtonMaximise, { onClick: () => requestViewModeChange(), tooltip: `Show ${label}` }));
-    return (React.createElement(PanelWithButton_1.PanelWithButton, { className: `ab-OptionsContainer options-container-${name}`, variant: "default", headerText: label, headerProps: {
-            fontSize: 3,
-            style: {
-                fontWeight: viewMode === 'expanded' ? 800 : 400,
-                cursor: 'pointer',
-            },
+    return (React.createElement(PanelWithButton_1.PanelWithButton, { className: `ab-OptionsContainer options-container-${name} twa:mb-3`, variant: "default", headerText: label, headerProps: {
+            className: `twa:text-3 twa:cursor-pointer ${viewMode === 'expanded' ? 'twa:font-extrabold' : 'twa:font-normal'}`,
             'data-name': `options-container-header-${name}`,
             onClick: () => requestViewModeChange(),
-        }, button: panelButton, style: { marginBottom: 3 } }, viewMode === 'expanded' && children));
+        }, button: panelButton }, viewMode === 'expanded' && children));
 };

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridInfoPopup = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
 const Tabs_1 = require("../../../components/Tabs");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
@@ -15,6 +14,7 @@ const PopupPanel_1 = require("../../Components/Popups/AdaptablePopup/PopupPanel"
 const AdaptableObjectsSummary_1 = require("./AdaptableObjectsSummary");
 const EnvVars_1 = require("../../../EnvVars");
 const AgGridModulesAdapter_1 = require("../../../agGrid/AgGridModulesAdapter");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const adaptableVersion = EnvVars_1.ADAPTABLE_VERSION;
 const agGridVersion = AgGridModulesAdapter_1.AG_GRID_VERSION;
 const GridInfoPopup = (props) => {
@@ -82,15 +82,15 @@ const GridInfoPopup = (props) => {
         return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: x });
     });
     const baseClassName = 'ab-GridInfo';
-    return (React.createElement(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: 'Grid Info', glyphicon: 'info' },
-        React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, height: "100%" },
-            React.createElement(Panel_1.default, { flex: 1 },
-                React.createElement(Tabs_1.Tabs, null,
+    return (React.createElement(PopupPanel_1.PopupPanel, { className: (0, clsx_1.default)(baseClassName), headerText: 'Grid Info', glyphicon: 'info', scrollable: false },
+        React.createElement(Panel_1.default, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
+            React.createElement(Panel_1.default.FlexBody, null,
+                React.createElement(Tabs_1.Tabs, { className: "twa:flex-1 twa:min-h-0" },
                     React.createElement(Tabs_1.Tabs.Tab, null, "Grid Summary"),
                     React.createElement(Tabs_1.Tabs.Tab, null, "Grid State"),
                     React.createElement(Tabs_1.Tabs.Content, null,
-                        React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { margin: 2, colItems: propValueColItems, items: gridSummaries })),
+                        React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { className: "twa:flex-1 twa:min-h-0" /* so the collection scrolls nicely, the header remains fixed*/, colItems: propValueColItems, items: gridSummaries })),
                     React.createElement(Tabs_1.Tabs.Content, null,
-                        React.createElement(AdaptableObjectsSummary_1.AdaptableObjectsSummary, null)))))));
+                        React.createElement(AdaptableObjectsSummary_1.AdaptableObjectsSummary, { className: "twa:min-h-0 twa:overflow-auto twa:p-2" })))))));
 };
 exports.GridInfoPopup = GridInfoPopup;

package/src/View/KeyHint.d.ts

@@ -1,3 +1,6 @@
 import * as React from 'react';
-import { TextProps } from 'rebass';
-export declare const KeyHint: (props: TextProps) => React.JSX.Element;
+import { BoxProps } from '../components/Flex';
+export declare const KeyHint: (props: BoxProps & {
+    className?: string;
+    children?: React.ReactNode;
+}) => React.JSX.Element;

package/src/View/KeyHint.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.KeyHint = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("../components/Flex");
+const twMerge_1 = require("../twMerge");
 const KeyHint = (props) => {
-    return React.createElement(rebass_1.Text, { fontSize: 1, color: "inputcolor", ...props });
+    const cls = (0, twMerge_1.twMerge)('twa:text-1 twa:text-inputcolor', props.className);
+    return React.createElement(Flex_1.Box, { ...props, className: cls });
 };
 exports.KeyHint = KeyHint;