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

package/src/View/Export/Wizard/ReportRowsWizardSection.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { useMemo } from 'react';
-import { Box, Text } from 'rebass';
 import { ExpressionEditor } from '../../../components/ExpressionEditor';
 import { ExpressionPreview } from '../../../components/ExpressionEditor/ExpressionPreview';
 import Radio from '../../../components/Radio';
 import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Box } from '../../../components/Flex';
 export const isValidReportRowsQuery = (report) => {
     if (report.ReportRowScope === 'ExpressionRows' && !report.Query?.BooleanExpression) {
         return 'Rows query cannot be empty';
@@ -15,7 +15,7 @@ export const isValidReportRowsQuery = (report) => {
 };
 export const renderReportRowsSummary = (report) => {
     const { api } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Box, { fontSize: 2 },
+    return (React.createElement(Box, { className: "twa:text-2" },
         report.ReportRowScope === 'AllRows' ? (React.createElement(React.Fragment, null,
             "Include ",
             React.createElement("b", null, "all Rows"),
@@ -34,7 +34,7 @@ export const ReportRowsWizardSection = (props) => {
     const { api, data, moduleInfo } = useOnePageAdaptableWizardContext();
     const initialData = useMemo(() => api.internalApi.getQueryPreviewData(), []);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { m: 2, value: data.ReportRowScope, onValueChange: (ReportRowScope) => {
+        React.createElement(Tabs, { className: "twa:m-2", value: data.ReportRowScope, onValueChange: (ReportRowScope) => {
                 const report = {
                     ...data,
                     ReportRowScope,
@@ -52,17 +52,17 @@ export const ReportRowsWizardSection = (props) => {
                 props.onChange(report);
             } },
             React.createElement(Tabs.Tab, { value: "AllRows" },
-                React.createElement(Radio, { margin: 0, checked: data.ReportRowScope == 'AllRows', tabIndex: -1 }, "All Rows")),
+                React.createElement(Radio, { className: "twa:m-0", checked: data.ReportRowScope == 'AllRows', tabIndex: -1 }, "All Rows")),
             React.createElement(Tabs.Tab, { value: "VisibleRows" },
-                React.createElement(Radio, { margin: 0, checked: data.ReportRowScope == 'VisibleRows', tabIndex: -1 }, "Visible Rows")),
+                React.createElement(Radio, { className: "twa:m-0", checked: data.ReportRowScope == 'VisibleRows', tabIndex: -1 }, "Visible Rows")),
             React.createElement(Tabs.Tab, { value: "ExpressionRows" },
-                React.createElement(Radio, { margin: 0, checked: data.ReportRowScope == 'ExpressionRows', tabIndex: -1 }, "By Query")),
+                React.createElement(Radio, { className: "twa:m-0", checked: data.ReportRowScope == 'ExpressionRows', tabIndex: -1 }, "By Query")),
             React.createElement(Tabs.Content, { value: "AllRows" },
-                React.createElement(Text, { fontSize: 2, padding: 2 }, "All Rows in the datasource will be included in the report, whether visible or not at time of export.")),
+                React.createElement(Box, { className: "twa:p-2 twa:text-2" }, "All Rows in the datasource will be included in the report, whether visible or not at time of export.")),
             React.createElement(Tabs.Content, { value: "VisibleRows" },
-                React.createElement(Text, { fontSize: 2, padding: 2 }, "Only Rows that are visible at the time the Report is exported will be included in the Export")),
+                React.createElement(Box, { className: "twa:p-2 twa:text-2" }, "Only Rows that are visible at the time the Report is exported will be included in the Export")),
             React.createElement(Tabs.Content, { value: "ExpressionRows" },
-                React.createElement(Text, { fontSize: 2, padding: 2, pl: 0 }, "Only the Rows which match the Query will be exported - whether visible or not."),
+                React.createElement(Box, { className: "twa:p-2 twa:pl-0 twa:text-2" }, "Only the Rows which match the Query will be exported - whether visible or not."),
                 React.createElement(ExpressionEditor, { allowSaveNamedQuery: true, type: 'boolean', module: moduleInfo.ModuleName, style: { paddingLeft: 0 }, value: data.Query?.BooleanExpression ?? '', onChange: (BooleanExpression) => {
                         props.onChange({
                             ...data,

package/src/View/Export/Wizard/ReportSettingsWizard.js

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
 import WizardPanel from '../../../components/WizardPanel';
 import Input from '../../../components/Input';
-import { Text } from 'rebass';
 import ErrorBox from '../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { Box } from '../../../components/Flex';
 export class ReportSettingsWizard extends React.Component {
     constructor(props) {
         super(props);
@@ -21,8 +21,8 @@ export class ReportSettingsWizard extends React.Component {
             React.createElement(WizardPanel, null,
                 React.createElement(FormLayout, { columns: [1, 2] },
                     React.createElement(FormRow, null,
-                        React.createElement(Text, { marginRight: 2 }, "Enter Report Name:"),
-                        React.createElement(Input, { width: "100%", type: "text", placeholder: "Name", value: this.state.ReportName, onChange: (e) => this.onReportNameChanged(e) })),
+                        React.createElement(Box, { className: "twa:mr-2" }, "Enter Report Name:"),
+                        React.createElement(Input, { className: "twa:w-full", type: "text", placeholder: "Name", value: this.state.ReportName, onChange: (e) => this.onReportNameChanged(e) })),
                     React.createElement(FormRow, null,
                         React.createElement(React.Fragment, null),
                         this.state.ErrorMessage ? React.createElement(ErrorBox, null, this.state.ErrorMessage) : null)))));

package/src/View/Filter/FilterSummary.d.ts

@@ -14,5 +14,5 @@ export declare class FilterSummaryComponent extends React.Component<FilterSummar
 }
 export declare let FilterSummary: import("react-redux").ConnectedComponent<typeof FilterSummaryComponent, {
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
-    store?: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+    store?: import("redux").Store;
 }>;

package/src/View/Filter/FilterSummary.js

@@ -20,7 +20,7 @@ export class FilterSummaryComponent extends React.Component {
         let summaryItems = [];
         summaryItems.push(React.createElement("b", null, React.createElement(ModuleProfile, { moduleInfo: this.props.moduleInfo })));
         summaryItems.push(description);
-        summaryItems.push(React.createElement(ButtonClear, { marginLeft: 1, onClick: () => this.props.onClearFilter(columnFilter), tooltip: "Clear Filter", disabled: columnFilter == null, accessLevel: this.props.accessLevel }));
+        summaryItems.push(React.createElement(ButtonClear, { className: "twa:ml-1", onClick: () => this.props.onClearFilter(columnFilter), tooltip: "Clear Filter", disabled: columnFilter == null, accessLevel: this.props.accessLevel }));
         return React.createElement(SummaryRowItem, { SummaryItems: summaryItems });
     }
     getDescription(columnFilter) {

package/src/View/Filter/FilterViewPanel.d.ts

@@ -19,8 +19,8 @@ declare class FilterViewPanelComponent extends React.Component<FilterViewPanelCo
 }
 export declare const FilterViewPanelControl: import("react-redux").ConnectedComponent<typeof FilterViewPanelComponent, {
     ref?: React.Ref<FilterViewPanelComponent>;
-    key?: React.Key;
+    key?: React.Key | null | undefined;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction>>;
-    store?: import("redux").Store<any, import("redux").UnknownAction, unknown>;
+    store?: import("redux").Store;
 }>;
 export {};

package/src/View/Filter/FilterViewPanel.js

@@ -1,7 +1,6 @@
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
 import * as React from 'react';
 import { ActiveFiltersPanel } from './ActiveFiltersPanel';
-import { Flex } from 'rebass';
 import { ArrayExtensions } from '../../Utilities/Extensions/ArrayExtensions';
 import { AdaptablePopover } from '../AdaptablePopover';
 import { ButtonClear } from '../Components/Buttons/ButtonClear';
@@ -10,6 +9,7 @@ import { connect } from 'react-redux';
 import { getColumnFiltersSelector } from '../../Redux/ActionsReducers/LayoutRedux';
 import SimpleButton from '../../components/SimpleButton';
 import join from '../../components/utils/join';
+import { Flex } from '../../components/Flex';
 class FilterViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -29,10 +29,10 @@ class FilterViewPanelComponent extends React.Component {
         return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(Flex, null,
                 ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [React.createElement(ActiveFiltersPanel, null)], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })),
-                React.createElement(ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear`, marginLeft: 1, marginBottom: 0, marginRight: 1, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear'),
+                React.createElement(ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear twa:mx-1 twa:mb-0`, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear'),
                 React.createElement(SimpleButton, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: join(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel })),
-            React.createElement(Flex, { alignItems: "center" }, this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (React.createElement(CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check`, disabled: this.props.accessLevel === 'ReadOnly' ||
-                    this.props.api.layoutApi.isCurrentLayoutPivot(), marginTop: 0, marginBottom: 0, fontSize: 2, padding: 1, checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
+            React.createElement(Flex, { alignItems: "center" }, this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (React.createElement(CheckBox, { "data-name": "quick-filter-toggle", className: `ab-${elementType}__Filter__active-check twa:my-0 twa:text-2 twa:p-1`, disabled: this.props.accessLevel === 'ReadOnly' ||
+                    this.props.api.layoutApi.isCurrentLayoutPivot(), checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                     checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();
                 } }, "Filter Bar")))));
     }

package/src/View/FlashingCell/FlashingCellStyle.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { BoxProps } from 'rebass';
 import { FlashingCellDefinition } from '../../types';
-export interface FlashingCellStyleProps extends Omit<BoxProps, 'data'> {
+import { FlexProps } from '../../components/Flex';
+export interface FlashingCellStyleProps extends Omit<FlexProps, 'data'> {
     data: FlashingCellDefinition;
 }
 export declare const FlashingCellStyle: React.FunctionComponent<FlashingCellStyleProps>;

package/src/View/FlashingCell/FlashingCellStyle.js

@@ -1,16 +1,16 @@
 import React from 'react';
-import { Flex } from 'rebass';
 import { StylePreview } from '../../components/StylePreview';
+import { Flex } from '../../components/Flex';
 export const FlashingCellStyle = (props) => {
     const { data, ...boxProps } = props;
     return (React.createElement(Flex, { flexDirection: "row", ...boxProps },
-        React.createElement(StylePreview, { "data-value": "up-style", mr: 1, flex: 1, styleObject: props.data.UpChangeStyle },
+        React.createElement(StylePreview, { "data-value": "up-style", styleObject: props.data.UpChangeStyle, className: "twa:mr-1 twa:flex-1" },
             "Up ",
             !props.data.UpChangeStyle ? ' - no style' : ''),
-        React.createElement(StylePreview, { "data-value": "down-style", mr: 1, flex: 1, styleObject: props.data.DownChangeStyle },
+        React.createElement(StylePreview, { "data-value": "down-style", className: "twa:mr-1 twa:flex-1", styleObject: props.data.DownChangeStyle },
             "Down",
             !props.data.DownChangeStyle ? ' - no style' : ''),
-        React.createElement(StylePreview, { "data-value": "neutral-style", flex: 1, styleObject: props.data.NeutralChangeStyle },
+        React.createElement(StylePreview, { "data-value": "neutral-style", className: "twa:flex-1", styleObject: props.data.NeutralChangeStyle },
             "Neutral ",
             !props.data.NeutralChangeStyle ? ' - no style' : '')));
 };

package/src/View/FlashingCell/Wizard/FlashingCellScopeWizardSection.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
 import { NewScopeComponent } from '../../Components/NewScopeComponent';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Flex } from '../../../components/Flex';
 export const FlashingAlertScopeWizardSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const availableColumns = React.useMemo(() => api.columnApi.getNonSpecialColumns(), []);
-    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' }, padding: 2 },
+    return (React.createElement(Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
         React.createElement(NewScopeComponent, { descriptions: {
                 rowScope: 'Changes anywhere in the row will trigger an Flashing Cell',
                 columnScope: 'Changes in selected columns will trigger an Flashing Cell',

package/src/View/FlashingCell/Wizard/FlashingCellSettingsWizardSection.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useRef } from 'react';
-import { Flex, Text } from 'rebass';
 import Input from '../../../components/Input';
 import usePrevious from '../../../components/utils/usePrevious';
 import Radio from '../../../components/Radio';
@@ -9,9 +8,10 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { CodeBlock } from '../../../components/CodeBlock';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { CheckBox } from '../../../components/CheckBox';
+import { Box, Flex } from '../../../components/Flex';
 export const renderFlashingAlertSettingsSummary = (flashingAlert) => {
     return (React.createElement(React.Fragment, null,
-        React.createElement(Text, { fontSize: 2 }, flashingAlert.FlashDuration === 'always' ? (React.createElement(React.Fragment, null, "Flashing is never removed")) : (React.createElement(React.Fragment, null,
+        React.createElement(Box, { className: "twa:text-2" }, flashingAlert.FlashDuration === 'always' ? (React.createElement(React.Fragment, null, "Flashing is never removed")) : (React.createElement(React.Fragment, null,
             "Flashing is removed after ",
             React.createElement(CodeBlock, null, flashingAlert.FlashDuration),
             ' ',
@@ -53,27 +53,27 @@ export const FlashingAlertSettingsWizardSection = (props) => {
             FlashTarget,
         });
     };
-    return (React.createElement(Flex, { height: "100%", flexDirection: "column", "data-name": "plus-minus-column-settings" },
-        React.createElement(Tabs, { autoFocus: false, padding: 2 },
+    return (React.createElement(Flex, { flexDirection: "column", "data-name": "plus-minus-column-settings", className: "twa:h-full" },
+        React.createElement(Tabs, { autoFocus: false, className: "twa:p-2" },
             React.createElement(Tabs.Tab, null, "Flashing Cell Settings"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Duration Type" },
-                        React.createElement(Radio, { "data-name": "duration-type-always", mr: 3, checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
+                        React.createElement(Radio, { "data-name": "duration-type-always", className: "twa:mr-3", checked: duration == 'always', tabIndex: -1, onChange: () => handleTypeChange('always') }, "Always"),
                         React.createElement(Radio, { "data-name": "duration-type-number", checked: duration !== 'always', tabIndex: -1, onChange: () => handleTypeChange('number') }, "Limited (ms)")),
                     React.createElement(FormRow, { label: "" },
                         duration !== 'always' && (React.createElement(Flex, { flexDirection: "row", alignItems: "baseline" },
-                            React.createElement(Text, { fontSize: 2, mr: 2 }, "After"),
-                            React.createElement(Input, { "data-name": "duration-input", readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, mt: 2, mr: 1, value: duration, onChange: (event) => {
+                            React.createElement(Box, { className: "twa:text-2 twa:mr-2" }, "After"),
+                            React.createElement(Input, { "data-name": "duration-input", readOnly: props.readOnly, type: "text", name: "value", ref: inputRef, className: "twa:mt-2 twa:mr-1", value: duration, onChange: (event) => {
                                     const value = event.target.value;
                                     setDuration(isNaN(Number(value)) ? 500 : Number(value));
                                 } }),
-                            React.createElement(Text, { fontSize: 2 }, "milliseconds"))),
-                        duration === 'always' && (React.createElement(Text, { height: 43, fontSize: 3 }, "Persists the flashing style indeterminately - can be removed manually"))),
+                            React.createElement(Box, { className: "twa:text-2" }, "milliseconds"))),
+                        duration === 'always' && (React.createElement(Box, { className: "twa:text-3 twa:h-[43px]" }, "Persists the flashing style indeterminately - can be removed manually"))),
                     React.createElement(FormRow, { label: "Flash Target" },
-                        React.createElement(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), mr: 3, checked: flashingCell?.FlashTarget === 'cell' ||
+                        React.createElement(CheckBox, { "data-name": "flashing-target", onChange: (checked) => handleTargetChange('cell', checked), className: "twa:mr-3", checked: flashingCell?.FlashTarget === 'cell' ||
                                 flashingCell?.FlashTarget?.includes?.('cell'), tabIndex: -1 }, "Cell"),
-                        React.createElement(CheckBox, { "data-name": "flashing-target-row", mr: 3, onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
+                        React.createElement(CheckBox, { "data-name": "flashing-target-row", className: "twa:mr-3", onChange: (checked) => handleTargetChange('row', checked), checked: flashingCell?.FlashTarget === 'row' ||
                                 flashingCell?.FlashTarget?.includes?.('row'), tabIndex: -1 }, "Row"),
                         React.createElement(CheckBox, { "data-name": "flashing-target-aggFuncCell", onChange: (checked) => handleTargetChange('aggFuncCell', checked), checked: flashingCell?.FlashTarget === 'aggFuncCell' ||
                                 flashingCell?.FlashTarget?.includes?.('aggFuncCell'), tabIndex: -1 }, "Aggregated Function Cell")))))));

package/src/View/FlashingCell/Wizard/FlashingCellStyleWizardSection.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 import { AdaptableStyle } from '../../../types';
 import { FlashingCellDefinition } from '../../../../types';
+import { BoxProps } from '../../../components/Flex';
 type FlashingAlertStyleWizardSectionProps = {
     flashingAlert?: FlashingCellDefinition;
     onStyleChange: (styleName: 'UpChangeStyle' | 'DownChangeStyle' | 'NeutralChangeStyle', style: AdaptableStyle) => void;
 };
 export declare const FlashingAlertStyleWizardSection: (props: FlashingAlertStyleWizardSectionProps) => React.JSX.Element;
-export interface FlashingCellStyleProps extends Omit<BoxProps, 'data'> {
+export interface FlashingCellStyleProps extends Omit<BoxProps & {}, 'data'> {
     data: FlashingCellDefinition;
 }
 export declare const FlashingCellStyle: React.FunctionComponent<FlashingCellStyleProps>;

package/src/View/FlashingCell/Wizard/FlashingCellStyleWizardSection.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Box, Text } from 'rebass';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { Tabs } from '../../../components/Tabs';
 import { StyleComponent } from '../../Components/StyleComponent';
 import { StylePreview } from '../../../components/StylePreview';
-const changeStyle = (React.createElement(Text, { fontSize: 2, style: { display: 'inline-block' } }, "Change style"));
+import { Box } from '../../../components/Flex';
+const changeStyle = React.createElement(Box, { className: "twa:text-2 twa:inline-block" }, "Change style");
 export const FlashingAlertStyleWizardSection = (props) => {
     let { data: flashingAlert, api } = useOnePageAdaptableWizardContext();
     flashingAlert = flashingAlert ?? props.flashingAlert;
@@ -32,10 +32,10 @@ export const FlashingCellStyle = (props) => {
         React.createElement(StylePreview, { styleObject: props.data.UpChangeStyle },
             "Up change style ",
             !props.data.UpChangeStyle ? ' - no style' : ''),
-        React.createElement(StylePreview, { mt: 2, styleObject: props.data.DownChangeStyle },
+        React.createElement(StylePreview, { styleObject: props.data.DownChangeStyle, className: "twa:mt-2" },
             "Down change style ",
             !props.data.DownChangeStyle ? ' - no style' : ''),
-        React.createElement(StylePreview, { mt: 2, styleObject: props.data.NeutralChangeStyle },
+        React.createElement(StylePreview, { styleObject: props.data.NeutralChangeStyle, className: "twa:mt-2" },
             "Neutral change style ",
             !props.data.NeutralChangeStyle ? ' - no style' : '')));
 };

package/src/View/FlashingCell/Wizard/FlashingCellWizard.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useState, useCallback } from 'react';
-import { Box } from 'rebass';
 import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
 import { FlashingAlertSettingsWizardSection, renderFlashingAlertSettingsSummary, } from './FlashingCellSettingsWizardSection';
 import { cloneObject } from '../../../Utilities/Helpers/Helper';
@@ -15,6 +14,7 @@ import { useDispatch } from 'react-redux';
 import { isValidFlashingCellRules } from './isValidFlashingCellRules';
 import * as FlashingCellRedux from '../../../Redux/ActionsReducers/FlashingCellRedux';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
+import { Box } from '../../../components/Flex';
 export const FlashingCellWizard = (props) => {
     const { api } = useAdaptable();
     const [flashingCell, setFlashingCell] = useState(() => {
@@ -73,7 +73,7 @@ export const FlashingCellWizard = (props) => {
             },
             {
                 details: 'Choose Flash Styles for Up, Down and Neutral Changes',
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(FlashingAlertStyleWizardSection, { onStyleChange: (styleName, style) => {
                             updateStyles[styleName](style);
                         } }))),
@@ -82,7 +82,7 @@ export const FlashingCellWizard = (props) => {
             },
             {
                 details: 'Set Duration and Target Properties',
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(FlashingAlertSettingsWizardSection, { onChange: setFlashingCell }))),
                 renderSummary: renderFlashingAlertSettingsSummary,
                 title: 'Settings',
@@ -91,7 +91,7 @@ export const FlashingCellWizard = (props) => {
                 details: 'Select Flashing Cell Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection, { onChange: setFlashingCell }))),
                 renderSummary: renderObjectTagsSummary,
             },
@@ -99,7 +99,7 @@ export const FlashingCellWizard = (props) => {
             {
                 details: 'Review the Flashing Cell Rule',
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(OnePageWizardSummary, null)));
                 },
                 title: 'Summary',

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.d.ts

@@ -12,5 +12,5 @@ export interface FormatColumnFormatWizardState {
 }
 export declare const getFormatColumnFormatSummaryValue: (data: FormatColumn) => string;
 export declare const renderFormatColumnFormatSummary: (data: FormatColumn) => React.JSX.Element;
-export declare const getFormatDisplayTypeForScope: (scope: ColumnScope, api: AdaptableApi) => 'number' | 'date' | 'text' | undefined;
+export declare const getFormatDisplayTypeForScope: (scope: ColumnScope, api: AdaptableApi) => "number" | "date" | "text" | undefined;
 export declare const FormatColumnFormatWizardSection: (props: FormatColumnFormatWizardSectionProps) => React.JSX.Element;

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex, Text } from 'rebass';
 import uniq from 'lodash/uniq';
 import clamp from 'lodash/clamp';
 import HelpBlock from '../../../components/HelpBlock';
@@ -21,6 +20,8 @@ import Textarea from '../../../components/Textarea';
 import { ButtonInfo } from '../../Components/Buttons/ButtonInfo';
 import { FormatColumnPlaceholderDocsLink } from '../../../Utilities/Constants/DocumentationLinkConstants';
 import { PIVOT_AGGREGATION_TOTAL_COLUMN_TYPE, PIVOT_ANY_TOTAL_COLUMN_TYPE, PIVOT_COLUMN_TOTAL_COLUMN_TYPE, PIVOT_GRAND_TOTAL_COLUMN_TYPE, } from '../../../AdaptableState/Common/AdaptableColumn';
+import { Box, Flex } from '../../../components/Flex';
+import { Card } from '../../../components/Card';
 const DOLLAR_OPTIONS = {
     FractionDigits: 2,
     FractionSeparator: '.',
@@ -211,25 +212,25 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
     if (data.DisplayFormat.Formatter !== 'DateFormatter') {
         return null;
     }
-    return (React.createElement(Box, { padding: 2 },
+    return (React.createElement(Box, { className: "twa:p-2" },
         React.createElement(Tabs, null,
             React.createElement(Tabs.Tab, null, "Format"),
             React.createElement(Tabs.Content, null,
-                React.createElement(Text, { padding: 2, fontSize: 2 },
+                React.createElement(Box, { className: "twa:p-2 twa:text-2" },
                     "Either create your own date pattern, or select one of the preset date formats (check out",
                     ' ',
                     React.createElement("a", { href: "https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table", target: "_blank" }, "available symbols"),
                     ")."),
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Pattern" },
-                        React.createElement(Input, { "data-name": "pattern", value: data.DisplayFormat.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), mr: 2 }),
+                        React.createElement(Input, { "data-name": "pattern", value: data.DisplayFormat.Options.Pattern ?? '', onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), className: "twa:mr-2" }),
                         React.createElement("span", null, data.DisplayFormat.Options.Pattern &&
                             FormatHelper.DateFormatter(new Date(), data.DisplayFormat.Options, true)))))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Tabs, { marginTop: 2, keyboardNavigation: false },
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs, { className: "twa:mt-2", keyboardNavigation: false },
             React.createElement(Tabs.Tab, null, "Custom Formats"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
-        React.createElement(Tabs, { marginTop: 2, keyboardNavigation: false },
+        React.createElement(Tabs, { className: "twa:mt-2", keyboardNavigation: false },
             React.createElement(Tabs.Tab, null, "Presets"),
             React.createElement(Tabs.Content, null,
                 React.createElement(AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
@@ -302,12 +303,12 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
     const IS_DOLLAR = data.DisplayFormat.Options.Prefix === '$'; //isEqual(data.DisplayFormat.Options, DOLLAR_OPTIONS);
     const IS_STERLING = data.DisplayFormat.Options.Prefix === '£'; //isEqual(data.DisplayFormat, STERLING_OPTIONS);
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
-    return (React.createElement(Box, { "data-name": 'format-column-display-format', padding: 2 },
+    return (React.createElement(Box, { "data-name": 'format-column-display-format', className: "twa:p-2" },
         React.createElement(Tabs, null,
             React.createElement(Tabs.Tab, null, "Format"),
             React.createElement(Tabs.Content, null,
                 React.createElement(Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout, { mr: 3 },
+                    React.createElement(FormLayout, { className: "twa:mr-3" },
                         React.createElement(FormRow, { label: "Fraction Separator" },
                             React.createElement(Input, { "data-name": "fraction-separator", value: data.DisplayFormat.Options.FractionSeparator ?? '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }),
                             ' '),
@@ -348,41 +349,38 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                             React.createElement(CheckBox, { "data-name": "round-checkbox", checked: data.DisplayFormat.Options.Round, onChange: (checked) => setFormatOption('Round', checked) })),
                         React.createElement(FormRow, { label: "Empty" },
                             React.createElement(CheckBox, { "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) })))))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Tabs, { marginTop: 2, keyboardNavigation: false },
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs, { className: "twa:mt-2", keyboardNavigation: false },
             React.createElement(Tabs.Tab, null, "Custom Formats"),
             React.createElement(Tabs.Content, null,
                 React.createElement(Flex, { flexDirection: "row" },
                     React.createElement(FormLayout, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
-        React.createElement(Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
+        React.createElement(Tabs, { className: "twa:mt-2", autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs.Tab, null, "Presets"),
             React.createElement(Tabs.Content, null,
-                React.createElement(Text, { padding: 2, fontSize: 2 }, "Select a preset for common use cases"),
+                React.createElement(Box, { className: "twa:p-2 twa:text-2" }, "Select a preset for common use cases"),
                 React.createElement(Flex, { flexDirection: "row" },
-                    React.createElement(FormLayout, { margin: 2 },
+                    React.createElement(FormLayout, { className: "twa:m-2" },
                         React.createElement(FormRow, { label: "Show As:" },
-                            React.createElement(Radio, { "data-name": "preset-percentage", marginLeft: 2, checked: IS_PERCENT, onChange: () => setPercentPreset() }, "Percentage"),
-                            React.createElement(Radio, { "data-name": "preset-thousand", marginLeft: 3, checked: IS_THOUSAND, onChange: () => setDivideThousandPreset() }, "K (Thousand)"),
-                            React.createElement(Radio, { "data-name": "preset-million", marginLeft: 3, checked: IS_MILLION, onChange: () => setDivideMillionPreset() }, "M (Million)"),
-                            React.createElement(Radio, { "data-name": "preset-dollar", marginLeft: 3, checked: IS_DOLLAR, onChange: () => setDollarPreset() }, "Dollar"),
-                            React.createElement(Radio, { "data-name": "preset-sterling", marginLeft: 3, checked: IS_STERLING, onChange: () => setSterlingPreset() }, "Sterling")))))),
-        React.createElement(Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
+                            React.createElement(Radio, { "data-name": "preset-percentage", className: "twa:ml-2", checked: IS_PERCENT, onChange: () => setPercentPreset() }, "Percentage"),
+                            React.createElement(Radio, { "data-name": "preset-thousand", className: "twa:ml-3", checked: IS_THOUSAND, onChange: () => setDivideThousandPreset() }, "K (Thousand)"),
+                            React.createElement(Radio, { "data-name": "preset-million", className: "twa:ml-3", checked: IS_MILLION, onChange: () => setDivideMillionPreset() }, "M (Million)"),
+                            React.createElement(Radio, { "data-name": "preset-dollar", className: "twa:ml-3", checked: IS_DOLLAR, onChange: () => setDollarPreset() }, "Dollar"),
+                            React.createElement(Radio, { "data-name": "preset-sterling", className: "twa:ml-3", checked: IS_STERLING, onChange: () => setSterlingPreset() }, "Sterling")))))),
+        React.createElement(Tabs, { className: "twa:mt-2", autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs.Tab, null, "Dynamic Content"),
             React.createElement(Tabs.Content, null,
-                React.createElement(Text, { padding: 2, fontSize: 2 }, "Provide dynamic content through the use of Placeholders"),
-                React.createElement(FormLayout, { margin: 2 },
+                React.createElement(Box, { className: "twa:p-2 twa:text-2" }, "Provide dynamic content through the use of Placeholders"),
+                React.createElement(FormLayout, { className: "twa:m-2" },
                     React.createElement(FormRow, { label: "" },
-                        React.createElement(Textarea, { minWidth: 300, rows: 3, placeholder: "", marginTop: 2, type: 'text', autoFocus: false, value: data.DisplayFormat.Options.Content?.toString() ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
-                        showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
-                                fontSize: 'var(--ab-font-size-3)',
-                                padding: 0,
-                            } },
-                            React.createElement(ButtonInfo, { mr: 2, onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }),
+                        React.createElement(Textarea, { className: "twa:min-w-[300px] twa:mt-2", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: data.DisplayFormat.Options.Content?.toString() ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
+                        showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
+                            React.createElement(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }),
                             "Learn more about using placeholders"))),
                     ' '))),
-        React.createElement(Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
+        React.createElement(Tabs, { className: "twa:mt-2", autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs.Tab, null, "Examples"),
             React.createElement(Tabs.Content, null,
-                React.createElement(AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
+                React.createElement(AdaptableObjectRow, { className: "twa:font-bold", colItems: [
                         { Content: 'Raw Number', Size: 1 },
                         { Content: 'Formatted Number', Size: 1 },
                     ] }),
@@ -413,42 +411,39 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
         return null;
     }
     const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
-    return (React.createElement(Box, { "data-name": 'format-column-display-format', padding: 2 },
-        React.createElement(Tabs, null,
-            React.createElement(Tabs.Tab, null, "Format"),
-            React.createElement(Tabs.Content, null,
+    return (React.createElement(Flex, { flexDirection: "column", "data-name": 'format-column-display-format', className: "twa:gap-3 twa:p-3" },
+        React.createElement(Card, null,
+            React.createElement(Card.Title, null, "Format"),
+            React.createElement(Card.Body, { className: "twa:grid twa:p-2 twa:grid-cols-[1fr_1fr] twa:gap-2" },
+                React.createElement(Flex, { flexDirection: "row", className: "twa:gap-2 twa:col-span-2 twa:items-center" },
+                    React.createElement("label", null, "Case:"),
+                    React.createElement(ToggleGroup, null,
+                        React.createElement(Toggle, { pressed: data.DisplayFormat.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }),
+                        React.createElement(Toggle, { pressed: data.DisplayFormat.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }),
+                        React.createElement(Toggle, { pressed: data.DisplayFormat.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })),
+                    React.createElement(CheckBox, { "data-name": "trim-checkbox", className: "twa:ml-5", checked: data.DisplayFormat.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim")),
+                React.createElement(Flex, { flexDirection: "column", className: "twa:gap-2" },
+                    React.createElement("label", null, "Prefix"),
+                    React.createElement(Input, { "data-name": "prefix", value: data.DisplayFormat.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
+                React.createElement(Flex, { flexDirection: "column", className: "twa:gap-2" },
+                    React.createElement("label", null, "Suffix"),
+                    React.createElement(Input, { "data-name": "suffix", value: data.DisplayFormat.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
+                React.createElement(Flex, { flexDirection: "column", className: "twa:col-span-2 twa:gap-2" },
+                    React.createElement("label", null, "Content"),
+                    React.createElement(Textarea, { className: "twa:min-w-[300px]", rows: 3, placeholder: "", type: 'text', autoFocus: false, value: data.DisplayFormat.Options.Content ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
+                    showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", className: "twa:mt-3 twa:mb-2 twa:p-0 twa:text-3" },
+                        React.createElement(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }),
+                        "See how to create dynamic Display Format using placeholders"))),
+                React.createElement(CheckBox, { className: "twa:col-span-2", "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) }, "Empty"))),
+        scopedCustomFormatters.length > 0 && (React.createElement(Card, { shadow: false },
+            React.createElement(Card.Title, null, "Custom Formats"),
+            React.createElement(Card.Body, null,
                 React.createElement(Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout, { mr: 3 },
-                        React.createElement(FormRow, { label: "Case:" },
-                            React.createElement(Flex, null,
-                                React.createElement(ToggleGroup, null,
-                                    React.createElement(Toggle, { pressed: data.DisplayFormat.Options.Case === 'Upper', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Upper' : undefined), icon: "case-upper" }),
-                                    React.createElement(Toggle, { pressed: data.DisplayFormat.Options.Case === 'Lower', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Lower' : undefined), icon: "case-lower" }),
-                                    React.createElement(Toggle, { pressed: data.DisplayFormat.Options.Case === 'Sentence', onPressedChange: (pressed) => setFormatOption('Case', pressed ? 'Sentence' : undefined), icon: "case-sentence" })),
-                                React.createElement(CheckBox, { "data-name": "trim-checkbox", marginLeft: 5, checked: data.DisplayFormat.Options.Trim, onChange: (checked) => setFormatOption('Trim', checked) }, "Trim"))),
-                        React.createElement(FormRow, { label: "Prefix" },
-                            React.createElement(Input, { "data-name": "prefix", value: data.DisplayFormat.Options.Prefix ?? '', onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
-                        React.createElement(FormRow, { label: "Suffix" },
-                            React.createElement(Input, { "data-name": "suffix", value: data.DisplayFormat.Options.Suffix ?? '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                        React.createElement(FormRow, { label: "Content" },
-                            React.createElement(Textarea, { minWidth: 300, rows: 3, placeholder: "", marginTop: 2, type: 'text', autoFocus: false, value: data.DisplayFormat.Options.Content ?? '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
-                            showDocumentationLinks && (React.createElement(HelpBlock, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
-                                    fontSize: 'var(--ab-font-size-3)',
-                                    padding: 0,
-                                } },
-                                React.createElement(ButtonInfo, { mr: 2, onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }),
-                                "See how to create dynamic Display Format using placeholders"))),
-                        React.createElement(FormRow, { label: "Empty" },
-                            React.createElement(CheckBox, { "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) })))))),
-        scopedCustomFormatters.length > 0 && (React.createElement(Tabs, { marginTop: 2, keyboardNavigation: false },
-            React.createElement(Tabs.Tab, null, "Custom Formats"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout, { mr: 3 }, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
-        React.createElement(Tabs, { marginTop: 2, keyboardNavigation: false },
-            React.createElement(Tabs.Tab, null, "Example"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
+                    React.createElement(FormLayout, { className: "twa:mr-3" }, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
+        React.createElement(Card, null,
+            React.createElement(Card.Title, null, "Example"),
+            React.createElement(Card.Body, null,
+                React.createElement(AdaptableObjectRow, { className: "twa:font-bold", colItems: [
                         { Content: 'Raw String', Size: 1 },
                         { Content: 'Formatted String', Size: 1 },
                     ] }),
@@ -487,7 +482,7 @@ export const FormatColumnFormatWizardSection = (props) => {
     if (Type === 'StringFormatter') {
         return renderStringFormat(data, update, setFormatOption, customScopedFormatters, adaptable.api);
     }
-    return (React.createElement(HelpBlock, { margin: 3 },
+    return (React.createElement(HelpBlock, { className: "twa:m-2" },
         "Setting a Display Format is only possible if ",
         React.createElement("b", null, "all"),
         " the columns in Scope are Numeric, String or Date"));

package/src/View/FormatColumn/Wizard/FormatColumnRuleWizardSection.js

@@ -5,7 +5,7 @@ import HelpBlock from '../../../components/HelpBlock';
 export function FormatColumnRuleWizardSection(props) {
     const { data, api, moduleInfo } = useOnePageAdaptableWizardContext();
     if (data.Target && data.Target === 'columnHeader') {
-        return (React.createElement(HelpBlock, { margin: 3 }, "Conditions cannot be applied if the Target of the Format Column is Column Header"));
+        return (React.createElement(HelpBlock, { className: "twa:mt-3" }, "Conditions cannot be applied if the Target of the Format Column is Column Header"));
     }
     return (React.createElement(EntityRulesEditor, { module: moduleInfo.ModuleName, defaultPredicateId: props.defaultPredicateId, 
         // TODO see what is this