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

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import { CheckBox } from '../../../../components/CheckBox';
 import ErrorBox from '../../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../../components/FormLayout';
@@ -13,6 +12,7 @@ import { PercentBarColumnComparisonPreview } from './Components/PercentBarColumn
 import { PercentBarPreview } from './Components/PercentBarRangesPreview';
 import DropdownButton from '../../../../components/DropdownButton';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
+import { Box, Flex } from '../../../../components/Flex';
 export const renderFormatColumnStyleWizardSummary = (data) => {
     const { api } = useOnePageAdaptableWizardContext();
     return renderStyledColumnStyleSummary(data, api);
@@ -22,22 +22,21 @@ const getRanges = (ranges, rangeValueType) => {
     if (rangeValueType === 'Percentage') {
         postfix = '%';
     }
-    return ranges.map((r, i) => (React.createElement(Flex, { key: i, alignItems: "center", mr: 3 },
-        React.createElement(Box, { mr: 1 },
+    return ranges.map((r, i) => (React.createElement(Flex, { key: i, alignItems: "center", className: "twa:mr-3" },
+        React.createElement(Box, { className: "twa:mr-1" },
             r.Min,
             postfix,
             " to ",
             r.Max,
-            postfix,
-            ' '),
+            postfix),
         React.createElement(StyleVisualItem, { Style: {
                 BackColor: r.Color,
                 ForeColor: r.Color,
             } }))));
 };
 const getColumnComparison = (columnComparison, api) => {
-    return (React.createElement(Flex, { key: 'cc', alignItems: "center", mr: 3 },
-        React.createElement(Box, { mr: 1 },
+    return (React.createElement(Flex, { key: 'cc', alignItems: "center", className: "twa:mr-3" },
+        React.createElement(Box, { className: "twa:mr-1" },
             "Min Value:",
             ' ',
             isNaN(Number(columnComparison.MinValue))
@@ -280,11 +279,11 @@ export const StyledColumnWizardStyleSection = (props) => {
         data?.GradientStyle && (React.createElement(RangesComponent, { disabled: !data.ColumnId, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: true, ranges: data.GradientStyle?.CellRanges, rangeValueType: data.GradientStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.GradientStyle?.ColumnComparison, updateRanges: (ranges) => onUpdateGradientStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdateGradientStyleColumnComparison(columnComparison) })),
         data.PercentBarStyle && (React.createElement(React.Fragment, null,
             React.createElement(RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, showRangeDirection: false, ranges: data.PercentBarStyle?.CellRanges, rangeValueType: data.PercentBarStyle?.RangeValueType, onRangeValueTypeChange: handleRangeValueTypeChange, columnComparison: data?.PercentBarStyle?.ColumnComparison, updateRanges: (ranges) => onUpdatePercentBarStyleRanges(ranges), updateColumnComparison: (columnComparison) => onUpdatePercentBarStyleColumnComparison(columnComparison) }),
-            React.createElement(FormLayout, { marginLeft: 2, marginTop: 2 },
+            React.createElement(FormLayout, { className: "twa:mt-2 twa:ml-2" },
                 React.createElement(FormRow, { label: "Cell Display:" },
-                    React.createElement(CheckBox, { disabled: disabled, marginLeft: 2, checked: data.PercentBarStyle?.CellText?.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
+                    React.createElement(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: data.PercentBarStyle?.CellText?.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
                     ' ',
-                    React.createElement(CheckBox, { disabled: disabled, marginLeft: 3, checked: data?.PercentBarStyle?.CellText?.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
+                    React.createElement(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: data?.PercentBarStyle?.CellText?.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
                         "Percent Value",
                         ' '),
                     ' '),
@@ -304,15 +303,15 @@ export const StyledColumnWizardStyleSection = (props) => {
                             },
                         ] }, data.PercentBarStyle?.CellTextPosition ?? 'Below')),
                 React.createElement(FormRow, { label: "ToolTip Display:" },
-                    React.createElement(CheckBox, { disabled: disabled, marginLeft: 2, checked: data?.PercentBarStyle?.ToolTipText?.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
+                    React.createElement(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: data?.PercentBarStyle?.ToolTipText?.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
                     ' ',
-                    React.createElement(CheckBox, { disabled: disabled, marginLeft: 3, checked: data?.PercentBarStyle?.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
+                    React.createElement(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: data?.PercentBarStyle?.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
                         "Percent Value",
                         ' '),
                     ' '),
                 React.createElement(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}` },
-                    React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                        React.createElement(CheckBox, { disabled: disabled, checked: !!data.PercentBarStyle?.BackColor, onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
+                    React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                        React.createElement(CheckBox, { disabled: disabled, checked: !!data.PercentBarStyle?.BackColor, onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), className: "twa:mr-2" }),
                         data.PercentBarStyle?.BackColor !== undefined && (React.createElement(ColorPicker, { disabled: disabled, api: api, value: data.PercentBarStyle?.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))))),
-        !data.ColumnId && React.createElement(ErrorBox, { mt: 2 }, "You need to select a column before styling.")));
+        !data.ColumnId && (React.createElement(ErrorBox, { className: "twa:mt-2" }, "You need to select a column before styling."))));
 };

package/src/View/StyledColumn/Wizard/StyledColumnWizardTypeSection.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { Flex, Text } from 'rebass';
 import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
 import { useAdaptable } from '../../AdaptableContext';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import { TypeRadio } from '../../Wizard/TypeRadio';
+import { Flex, Box } from '../../../components/Flex';
 export const renderStyledColumnTypeSummary = (data) => {
     let type = null;
     if (data.GradientStyle) {
@@ -20,7 +20,7 @@ export const renderStyledColumnTypeSummary = (data) => {
     else if (data.BadgeStyle) {
         type = 'Badge';
     }
-    return (React.createElement(Text, { pr: 2, py: 2 },
+    return (React.createElement(Box, { className: "twa:pr-2 twa:py-2" },
         "Type ",
         React.createElement(Tag, null, type)));
 };
@@ -58,8 +58,8 @@ export const StyledColumnWizardTypeSection = (props) => {
         newStyledColumn.ColumnId = null;
         props.onChange(newStyledColumn);
     };
-    return (React.createElement(Flex, { height: "100%", flexDirection: "column", "data-name": "styled-column-type" },
-        React.createElement(Tabs, { autoFocus: false, padding: 2 },
+    return (React.createElement(Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full" },
+        React.createElement(Tabs, { autoFocus: false, className: "twa:p-2" },
             React.createElement(Tabs.Tab, null, "Type"),
             React.createElement(Tabs.Content, null,
                 React.createElement(TypeRadio, { text: "Gradient", description: "Colour each cell in the column using a Gradient value (Numeric Columns)", checked: Boolean(data.GradientStyle), onClick: () => handleTypeChange('gradient') }),

package/src/View/SystemStatus/SystemStatusEntityRow.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { AdaptableObjectRow } from '../Components/AdaptableObjectRow';
-import { Flex, Box } from 'rebass';
 import UIHelper from '../UIHelper';
 import { cloneObject } from '../../Utilities/Helpers/Helper';
 import join from '../../components/utils/join';
+import { Box, Flex } from '../../components/Flex';
 export class SystemStatusEntityRow extends React.Component {
     render() {
         let systemStatus = this.props
@@ -12,11 +12,11 @@ export class SystemStatusEntityRow extends React.Component {
         let colItems = cloneObject(this.props.colItems);
         colItems[0].Content = systemStatus ? (React.createElement("details", null,
             React.createElement(Flex, { title: systemStatus.statusFurtherInformation ? 'Click to see more' : '', className: join('ab-DashboardToolbar__SystemStatus__text', systemStatus.statusFurtherInformation &&
-                    'ab-DashboardToolbar__SystemStatus__text--expandable'), backgroundColor: messageTypeColor, alignItems: "center", as: "summary" },
+                    'ab-DashboardToolbar__SystemStatus__text--expandable'), style: { backgroundColor: messageTypeColor }, alignItems: "center", as: "summary" },
                 systemStatus.statusMessage,
                 " ",
                 systemStatus.statusFurtherInformation ? '...' : ''),
-            systemStatus.statusFurtherInformation ? (React.createElement(Box, { className: "ab-DashboardToolbar__SystemStatus__further-information", margin: 2 }, systemStatus.statusFurtherInformation)) : null)) : null;
+            systemStatus.statusFurtherInformation ? (React.createElement(Box, { className: "ab-DashboardToolbar__SystemStatus__further-information twa:m-2" }, systemStatus.statusFurtherInformation)) : null)) : null;
         colItems[1].Content = systemStatus.timestamp.toLocaleString();
         return React.createElement(AdaptableObjectRow, { colItems: colItems });
     }

package/src/View/SystemStatus/SystemStatusPopup.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import * as InternalRedux from '../../Redux/ActionsReducers/InternalRedux';
-import { Box } from 'rebass';
 import SimpleButton from '../../components/SimpleButton';
 import { AdaptableObjectCollection } from '../Components/AdaptableObjectCollection';
 import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
@@ -9,6 +8,7 @@ import { SystemStatusEntityRow } from './SystemStatusEntityRow';
 import ArrayExtensions from '../../Utilities/Extensions/ArrayExtensions';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import { SortOrder } from '../../AdaptableState/Common/Enums';
+import { Box } from '../../components/Flex';
 const colItems = [
     { Content: 'Message', Size: 10 },
     { Content: 'Timestamp', Size: 3 },
@@ -27,7 +27,7 @@ class SystemStatusPopupComponent extends React.Component {
             const accessLevel = AdaptableHelper.getAccessLevelForObject(smi, this.props.accessLevel);
             return (React.createElement(SystemStatusEntityRow, { adaptableObject: smi, key: 'smi' + index, onEdit: null, moduleInfo: this.props.moduleInfo, colItems: colItems, api: this.props.api, accessLevel: accessLevel, teamSharingActivated: this.props.teamSharingActivated, onDeleteConfirm: null, onShare: null }));
         });
-        return (React.createElement(PopupPanel, { button: clearAllButton, headerText: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() }, ArrayExtensions.IsNotNullOrEmpty(this.props.SystemStatusMessages) && (React.createElement(Box, { className: "ab-SystemStatus-Popup-List", padding: 2 },
+        return (React.createElement(PopupPanel, { button: clearAllButton, headerText: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() }, ArrayExtensions.IsNotNullOrEmpty(this.props.SystemStatusMessages) && (React.createElement(Box, { className: "ab-SystemStatus-Popup-List twa:p-2" },
             React.createElement(AdaptableObjectCollection, { colItems: colItems, items: messages })))));
     }
 }

package/src/View/SystemStatus/SystemStatusStatusBarContent.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { useAdaptable } from '../AdaptableContext';
 import { getStatusItemStyle } from './Utilities/getStatusItemStyle';
+import { Box } from '../../components/Flex';
 export const SystemStatusStatusBarContent = () => {
     const adaptable = useAdaptable();
     const currentSystemStatusMessageInfo = adaptable.api.systemStatusApi.getCurrentSystemStatusMessageInfo();
     const { color, background } = getStatusItemStyle(currentSystemStatusMessageInfo);
     const message = currentSystemStatusMessageInfo?.statusMessage;
-    return (React.createElement(Box, { style: { borderRadius: 'var(--ab__border-radius)' }, padding: 1, color: message && color, backgroundColor: message && background }, message || '0 Messages'));
+    return (React.createElement(Box, { style: { color: message ? color : '', backgroundColor: message ? background : '' }, className: "twa:p-1 twa:rounded-standard" }, message || '0 Messages'));
 };

package/src/View/SystemStatus/SystemStatusViewPanel.d.ts

@@ -10,8 +10,8 @@ declare class SystemStatusViewPanelComponent extends React.Component<SystemStatu
 }
 export declare let SystemStatusViewPanel: import("react-redux").ConnectedComponent<typeof SystemStatusViewPanelComponent, {
     ref?: React.Ref<SystemStatusViewPanelComponent>;
-    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/SystemStatus/SystemStatusViewPanel.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
 import { connect } from 'react-redux';
 import { getStatusItemStyle } from './Utilities/getStatusItemStyle';
+import { Flex } from '../../components/Flex';
 class SystemStatusViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -12,7 +12,7 @@ class SystemStatusViewPanelComponent extends React.Component {
         const message = currentSystemStatusMessageInfo?.statusMessage;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(Flex, { alignItems: "stretch", className: `ab-${elementType}__SystemStatus__wrap` },
-            React.createElement(Flex, { style: { borderRadius: 'var(--ab__border-radius)' }, className: `ab-${elementType}__SystemStatus__text`, marginRight: 2, padding: 2, color: color, backgroundColor: message ? background : '', fontSize: 'var( --ab-font-size-2)', alignItems: "center", "data-name": "system-status-message" }, message || '0 Messages')));
+            React.createElement(Flex, { style: { color, backgroundColor: message ? background : '' }, className: `ab-${elementType}__SystemStatus__text twa:mr-2 twa:p-2 twa:text-2 twa:rounded-standard`, alignItems: "center", "data-name": "system-status-message" }, message || '0 Messages')));
     }
 }
 function mapStateToProps(state) {

package/src/View/TeamSharing/SharedEntityDependencies.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
 import { AdaptableObjectListItem } from '../Components/AdaptableObjectList/AdaptableObjectList';
+import { Box, Flex } from '../../components/Flex';
 export const Dependencies = (props) => {
     const adaptable = useAdaptable();
     const dependencies = adaptable.api.teamSharingApi.internalApi.getSharedEntryDependencies(props.sharedEntity);
     return (React.createElement(React.Fragment, null, dependencies.map((sharedEntity) => {
         const module = adaptable.ModuleService.getModuleById('TeamSharing');
         const itemView = module.toView(sharedEntity);
-        return (React.createElement(Box, { as: "ul", padding: 0, key: sharedEntity.Uuid, className: "ab-Shared-Entity-Shared-Object", mb: 2 },
+        return (React.createElement(Box, { as: "ul", key: sharedEntity.Uuid, className: "ab-Shared-Entity-Shared-Object twa:mb-2 twa:p-0 twa:flex twa:flex-col twa:gap-3" },
             React.createElement(AdaptableObjectListItem, { deleteTooltip: 'Cannot delete dependencies.', deleteDisabled: true, module: module, data: itemView })));
     })));
 };
@@ -17,7 +17,7 @@ export const SharedEntityDependencies = (props) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
     return (React.createElement(React.Fragment, null,
         React.createElement(Flex, null,
-            React.createElement(Box, { mr: 3, className: 'ab-Adaptable-Object-List__Item__label' }, "Dependencies"),
-            React.createElement(Box, { mb: 2, mt: 2 }, isExpanded ? (React.createElement(SimpleButton, { onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton, { onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand")))),
+            React.createElement(Box, { className: 'ab-Adaptable-Object-List__Item__label twa:mr-3' }, "Dependencies"),
+            React.createElement(Box, { className: "twa:my-2" }, isExpanded ? (React.createElement(SimpleButton, { onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton, { onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand")))),
         isExpanded && React.createElement(Dependencies, { sharedEntity: props.data })));
 };

package/src/View/TeamSharing/SharedEntityObjectView.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import SimpleButton from '../../components/SimpleButton';
 import { Tag } from '../../components/Tag';
 import { useAdaptable } from '../AdaptableContext';
 import { AdaptableObjectListItem } from '../Components/AdaptableObjectList/AdaptableObjectList';
+import { Box, Flex } from '../../components/Flex';
 export const SharedEntityTypeItemView = (props) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
     const adaptable = useAdaptable();
@@ -12,11 +12,11 @@ export const SharedEntityTypeItemView = (props) => {
     const sharedObject = props.data.Entity;
     const item = module?.toView(sharedObject);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Flex, { mb: 2, mt: 2 },
-            React.createElement(Flex, { mr: 2, alignItems: "center" },
-                React.createElement(Tag, { style: { margin: 0 } }, props.data.Module)),
+        React.createElement(Flex, { className: "twa:my-2" },
+            React.createElement(Flex, { className: "twa:mr-2", alignItems: "center" },
+                React.createElement(Tag, { className: "twa:m-0" }, props.data.Module)),
             item ? (isExpanded ? (React.createElement(SimpleButton, { "data-name": "shared-entity-collapse-button", onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton, { "data-name": "shared-entity-expand-button", onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand"))) : null),
-        isExpanded && item && (React.createElement(Box, { as: "ul", padding: 0, className: "ab-Shared-Entity-Shared-Object" },
+        isExpanded && item && (React.createElement(Box, { as: "ul", className: "ab-Shared-Entity-Shared-Object twa:p-0 twa:flex twa:flex-col twa:gap-3" },
             React.createElement(AdaptableObjectListItem, { hideControls: true, data: item, module: module })))));
 };
 export const getSharedEntityActiveStatusObjectView = (isDependency) => (props) => {
@@ -41,11 +41,11 @@ export const getSharedEntityActiveStatusObjectView = (isDependency) => (props) =
             const newRevision = sharedEntity.Revision;
             let statusInfo = null;
             if (isUpToDateAndActive) {
-                statusInfo = (React.createElement(Box, { ml: 1, style: { color: 'var(--ab-color-success)' } },
+                statusInfo = (React.createElement(Box, { className: "twa:ml-1 twa:text-success" },
                     React.createElement("b", null, "up-to-date")));
             }
             if (isStaleAndActive) {
-                statusInfo = (React.createElement(Box, { ml: 1, style: { color: 'var(--ab-color-warn)' } }, ` (Rev. ${newRevision} available)`));
+                statusInfo = (React.createElement(Box, { className: "twa:ml-1 twa:text-warn" }, ` (Rev. ${newRevision} available)`));
             }
             activeInfo = activeRevision && (React.createElement(React.Fragment, null,
                 activeRevision &&
@@ -72,5 +72,5 @@ export const getSharedEntityStaleDepsItemView = (staleDependencies) => () => {
         staleDepsString += ` ${staleDependencies.length} stale dependencies`;
     }
     return (React.createElement(Tag, null,
-        React.createElement(Box, { ml: 1, style: { color: 'var(--ab-color-warn)' } }, staleDepsString)));
+        React.createElement(Box, { className: "twa:ml-1 twa:text-warn" }, staleDepsString)));
 };

package/src/View/Theme/ThemeEditor.js

@@ -4,11 +4,11 @@ import { useAdaptable } from '../AdaptableContext';
 import AdaptableInput from '../Components/AdaptableInput';
 import throttle from 'lodash/throttle';
 import SimpleButton from '../../components/SimpleButton';
-import { Box, Flex, Text } from 'rebass';
 import Panel from '../../components/Panel';
 import { Field } from './ThemeField';
 import { VariantSelector } from './VariantSelector';
 import { getAccessLevelForObject } from '../../Utilities/Helpers/AdaptableHelper';
+import { Box, Flex } from '../../components/Flex';
 const fields = [
     {
         name: 'Primary Color',
@@ -35,31 +35,6 @@ const fields = [
         type: 'color',
         variable: '--ab-color-text-on-primarydark',
     },
-    {
-        name: 'Secondary Color',
-        type: 'color',
-        variable: '--ab-color-secondary',
-    },
-    {
-        name: 'Secondary Dark Color',
-        type: 'color',
-        variable: '--ab-color-secondarydark',
-    },
-    {
-        name: 'Secondary Light Color',
-        type: 'color',
-        variable: '--ab-color-secondarylight',
-    },
-    {
-        name: 'Text on Secondary Color',
-        type: 'color',
-        variable: '--ab-color-text-on-secondary',
-    },
-    {
-        name: 'Text on Secondary Light Color',
-        type: 'color',
-        variable: '--ab-color-text-on-secondarylight',
-    },
     {
         name: 'Default background',
         type: 'color',
@@ -138,18 +113,18 @@ export const ThemeEditor = (props) => {
     const nameHasChanged = currentThemeObject.Name !== props.theme;
     const nameIsNotUnique = allThemes.some((theme) => theme.Uuid !== currentThemeObject.Uuid && currentThemeObject.Name === theme.Name);
     const saveNameDisabled = !nameHasChanged || nameIsNotUnique || currentThemeObject.Name === '';
-    return (React.createElement(Panel, { header: React.createElement(Flex, { alignItems: "center", width: "100%" },
-            React.createElement(Box, { flex: 1 }, " Edit Custom Theme"),
+    return (React.createElement(Panel, { header: React.createElement(Flex, { alignItems: "center", className: "twa:w-full" },
+            React.createElement(Box, { className: "twa:flex-1" }, " Edit Custom Theme"),
             React.createElement(SimpleButton, { "data-name": "delete", accessLevel: currentThemeAccessLevel, icon: "delete", onClick: handleDeleteTheme, variant: "text" })) },
         React.createElement(FormLayout, null,
             React.createElement(FormRow, { label: "Theme Name" },
-                React.createElement(AdaptableInput, { disabled: currentThemeIsReadOnly, mr: 2, onChange: (event) => setCurrentThemeObject({
+                React.createElement(AdaptableInput, { disabled: currentThemeIsReadOnly, className: "twa:mr-2", onChange: (event) => setCurrentThemeObject({
                         ...currentThemeObject,
                         Name: event.target.value.replace(/ /g, '-'),
                     }), value: currentThemeObject.Name ?? '' }),
                 React.createElement(SimpleButton, { onClick: handleSaveName, disabled: saveNameDisabled || currentThemeIsReadOnly, icon: "save", hidden: currentThemeIsReadOnly }),
-                React.createElement(Text, { fontSize: 2, marginTop: 1 }, "The name cannot contain spaces."),
-                nameIsNotUnique && (React.createElement(Text, { fontSize: 2, color: "var(--ab-color-error)" }, "Name must be unique."))),
+                React.createElement(Box, { className: "twa:text-2 twa:mt-1" }, "The name cannot contain spaces."),
+                nameIsNotUnique && React.createElement(Box, { className: "twa:text-2 twa:text-error" }, "Name must be unique.")),
             React.createElement(FormRow, { label: "Description" },
                 React.createElement(AdaptableInput, { disabled: currentThemeIsReadOnly, onChange: (event) => handleDescriptionChange('Description', event.target.value), value: currentThemeObject?.Description ?? '' })),
             React.createElement(FormRow, { label: "Variant" },

package/src/View/Theme/ThemeEditorWindow.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { useAdaptable } from '../AdaptableContext';
 import { ThemePopup } from './ThemePopup';
+import { Box } from '../../components/Flex';
 export const ThemeEditorWindow = () => {
     const adaptable = useAdaptable();
     const moduleInfo = adaptable.ModuleService.getModuleInfoByModule('Theme');
-    return (React.createElement(Box, { p: 2 },
+    return (React.createElement(Box, { className: "twa:p-2" },
         React.createElement(ThemePopup, { hideShowInWindow: true, moduleInfo: moduleInfo, api: adaptable.api })));
 };

package/src/View/Theme/ThemeField.js

@@ -4,9 +4,9 @@ import { useAdaptable } from '../AdaptableContext';
 import { getVariableColor } from '../../Utilities/Helpers/StyleHelper';
 import { FormRow } from '../../components/FormLayout';
 import SimpleButton from '../../components/SimpleButton';
-import { Flex } from 'rebass';
 import { ColorPicker } from '../../components/ColorPicker';
 import AdaptableInput from '../Components/AdaptableInput';
+import { Flex } from '../../components/Flex';
 export const Field = (props) => {
     const adaptable = useAdaptable();
     let input = null;
@@ -30,6 +30,5 @@ export const Field = (props) => {
     return (React.createElement(FormRow, { label: props.name },
         React.createElement(Flex, null,
             input,
-            ' ',
             React.createElement(SimpleButton, { disabled: props.value === undefined, onClick: () => props.onChange(false) }, "Clear"))));
 };

package/src/View/Theme/ThemePopup.d.ts

@@ -11,7 +11,7 @@ interface ThemePopupProps extends ModuleViewPopupProps<ThemePopupComponent> {
 declare class ThemePopupComponent extends React.Component<ThemePopupProps, {}> {
     render(): React.JSX.Element;
     onChangeTheme(value: string): void;
-    handleCreateNewTheme: (variant: 'dark' | 'light') => void;
+    handleCreateNewTheme: (variant: "dark" | "light") => void;
 }
 export declare let ThemePopup: import("react-redux").ConnectedComponent<typeof ThemePopupComponent, {
     [x: string]: any;

package/src/View/Theme/ThemePopup.js

@@ -5,11 +5,11 @@ import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
 import FormLayout, { FormRow } from '../../components/FormLayout';
 import DropdownButton from '../../components/DropdownButton';
 import { ThemeEditor } from './ThemeEditor';
-import { Box } from 'rebass';
 import ObjectFactory from '../../Utilities/ObjectFactory';
 import SimpleButton from '../../components/SimpleButton';
 import { Icon } from '../../components/icons';
 import { ThemeSelector } from './ThemeSelector';
+import { Box } from '../../components/Flex';
 class ThemePopupComponent extends React.Component {
     constructor() {
         super(...arguments);
@@ -32,7 +32,7 @@ class ThemePopupComponent extends React.Component {
             .getUserThemes()
             .some((theme) => theme.Name === this.props.CurrentTheme);
         const disabled = this.props.accessLevel === 'ReadOnly';
-        const newButton = (React.createElement(DropdownButton, { ml: 2, disabled: disabled, tone: "accent", variant: "raised", columns: ['label'], items: [
+        const newButton = (React.createElement(DropdownButton, { className: "twa:ml-2", disabled: disabled, tone: "accent", variant: "raised", columns: ['label'], items: [
                 {
                     label: 'Dark',
                     onClick: () => this.handleCreateNewTheme('dark'),
@@ -51,9 +51,9 @@ class ThemePopupComponent extends React.Component {
                 newButton) },
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Current Theme:" },
-                    React.createElement(Box, { maxWidth: 150 },
+                    React.createElement(Box, { className: "twa:max-w-[150px]" },
                         React.createElement(ThemeSelector, null)))),
-            isCustomTheme && (React.createElement(Box, { mt: 3 },
+            isCustomTheme && (React.createElement(Box, { className: "twa:mt-3" },
                 React.createElement(ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
     }
     onChangeTheme(value) {

package/src/View/Theme/ThemeStatusbar.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Box } from 'rebass';
 import { ThemeSelector } from './ThemeSelector';
+import { Box } from '../../components/Flex';
 export const ThemeStatusbar = () => {
     return (React.createElement(Box, { onClick: (event) => {
             event.stopPropagation();

package/src/View/Theme/VariantSelector.js

@@ -17,6 +17,6 @@ export const VariantSelector = (props) => {
         ? options.find((theme) => theme.value === props.theme.Variant)?.label
         : 'Select a theme';
     return (React.createElement(React.Fragment, null,
-        React.createElement(DropdownButton, { mr: 2, columns: ['label'], items: options, disabled: props.disabled }, label),
+        React.createElement(DropdownButton, { className: "twa:mr-2", columns: ['label'], items: options, disabled: props.disabled }, label),
         React.createElement(SimpleButton, { onClick: () => props.onChange(null), disabled: !props.theme.Variant || props.disabled, hidden: props.disabled, icon: "delete" })));
 };

package/src/View/UIHelper.d.ts

@@ -29,7 +29,7 @@ export declare const ORANGE: string;
 export declare function getHexForName(name: string): string;
 export declare function getDefaultColors(): string[];
 export declare function getEmptyConfigState(): EditableConfigEntityState;
-export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "number" | "date" | "text";
+export declare function getDescriptionForDataType(dataType: AdaptableColumnDataType): "text" | "number" | "date";
 export declare function getPlaceholderForDataType(dataType: AdaptableColumnDataType): "Enter Value" | "Enter Number" | "Enter Date";
 export declare function getModalContainer(adaptableOptions: AdaptableOptions, document: Document): HTMLElement;
 export declare function IsEmptyStyle(style: AdaptableStyle): boolean;

package/src/View/Wizard/Interface/IAdaptableWizard.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AdaptableObject } from '../../../AdaptableState/Common/AdaptableObject';
 import { AdaptableApi } from '../../../Api/AdaptableApi';
 import { ModuleInfo } from '../../../Strategy/Interface/IModule';
@@ -35,6 +34,7 @@ export interface AdaptableObjectAdaptableWizardProps<View> extends AdaptableWiza
 }
 export interface AdaptableOnePageWizardProps<T extends AdaptableObject> {
     moduleInfo?: ModuleInfo;
+    modal?: boolean;
     data: T;
     configEntities?: T[];
     wizardStartIndex?: number;

package/src/View/Wizard/ObjectTagsWizardSection.js

@@ -2,16 +2,14 @@ import * as React from 'react';
 import { Tabs } from '../../components/Tabs';
 import { TagValueOptionsTags, TagValueSelector } from '../Components/TagValueSelector';
 import { useOnePageAdaptableWizardContext } from './OnePageAdaptableWizard';
-import { Text } from 'rebass';
 export const ObjectTagsWizardSection = (props) => {
     const { onChange } = props;
     const { data } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Tabs, { style: { height: '100%' } },
+    return (React.createElement(Tabs, { className: "twa:h-full" },
         React.createElement(Tabs.Tab, null, "Tags"),
         React.createElement(Tabs.Content, null,
             React.createElement(TagValueSelector, { selectedTags: data.Tags, onChange: (selectedTags) => onChange({ ...data, Tags: selectedTags }) }))));
 };
 export const renderObjectTagsSummary = (data) => {
-    return data.Tags?.length ? (React.createElement(Text, { fontSize: 2 },
-        React.createElement(TagValueOptionsTags, { tags: data.Tags }))) : null;
+    return data.Tags?.length ? React.createElement(TagValueOptionsTags, { tags: data.Tags }) : null;
 };

package/src/View/Wizard/OnePageAdaptableWizard.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { CSSProperties } from 'react';
-import { TextProps } from 'rebass';
 import { AdaptableApi } from '../../types';
 import { ModuleInfo } from '../../Strategy/Interface/IModule';
 import { ExpressionEditorNamedQuery } from '../../components/ExpressionEditor/NamedQueryContext';
+import { BoxProps } from '../../components/Flex';
 export type OnePageAdaptableWizardContextType<T> = {
     data: T;
     sections: (OnePageAdaptableWizardSection<T> | '-')[];
@@ -11,9 +11,13 @@ export type OnePageAdaptableWizardContextType<T> = {
     api: AdaptableApi;
     namedQuery: ExpressionEditorNamedQuery;
 };
-export declare const SummaryTag: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
-export declare const SummaryText: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
-export declare const FormDescriptionText: React.FunctionComponent<React.PropsWithChildren<TextProps>>;
+type CmpProps = BoxProps & {
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const SummaryTag: React.FunctionComponent<React.PropsWithChildren<CmpProps>>;
+export declare const SummaryText: React.FunctionComponent<React.PropsWithChildren<CmpProps>>;
+export declare const FormDescriptionText: React.FunctionComponent<React.PropsWithChildren<CmpProps>>;
 export declare const OnePageAdaptableWizardContext: React.Context<OnePageAdaptableWizardContextType<any>>;
 export declare function useOnePageAdaptableWizardContext<ENTITY>(): OnePageAdaptableWizardContextType<ENTITY>;
 export interface OnePageAdaptableWizardSection<ENTITY> {
@@ -26,6 +30,7 @@ export interface OnePageAdaptableWizardSection<ENTITY> {
 }
 export interface OnePageAdaptableWizardProps<ENTITY> {
     moduleInfo: ModuleInfo;
+    modal?: boolean;
     data: ENTITY;
     sections: (OnePageAdaptableWizardSection<ENTITY> | '-')[];
     currentIndex?: number;
@@ -43,3 +48,4 @@ export interface OnePageAdaptableWizardProps<ENTITY> {
 }
 export declare const OnePageAdaptableWizard: <ENTITY extends unknown>(props: OnePageAdaptableWizardProps<ENTITY>) => React.JSX.Element;
 export declare const OnePageWizardSummary: <ENTITY extends unknown>() => React.JSX.Element;
+export {};

package/src/View/Wizard/OnePageAdaptableWizard.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { Box, Text } from 'rebass';
 import * as NamedQueryRedux from '../../Redux/ActionsReducers/NamedQueryRedux';
 import SimpleButton from '../../components/SimpleButton';
 import { useAdaptable } from '../AdaptableContext';
@@ -9,9 +8,11 @@ import { Tabs } from '../../components/Tabs';
 import { NamedQueryContext, } from '../../components/ExpressionEditor/NamedQueryContext';
 import { OnePageWizard, useOnePageWizardContext } from './OnePageWizards';
 import kebabCase from 'lodash/kebabCase';
-export const SummaryTag = (props) => (React.createElement(Text, { ...props }));
-export const SummaryText = (props) => (React.createElement(Text, { fontSize: 2, mb: 3, ...props }));
-export const FormDescriptionText = (props) => React.createElement(Text, { fontSize: 2, mt: 1, ...props });
+import { Box } from '../../components/Flex';
+import { twMerge } from '../../twMerge';
+export const SummaryTag = (props) => (React.createElement(Box, { ...props }));
+export const SummaryText = (props) => (React.createElement(Box, { ...props, className: twMerge('twa:text-2 twa:mb-3', props.className) }));
+export const FormDescriptionText = (props) => React.createElement(Box, { ...props, className: twMerge('twa:text-2 twa:mt-1', props.className) });
 export const OnePageAdaptableWizardContext = React.createContext({
     data: null,
     sections: [],
@@ -77,11 +78,7 @@ export const OnePageWizardSummary = () => {
     const { sections, data, api, moduleInfo } = useOnePageAdaptableWizardContext();
     const { setCurrentSection } = useOnePageWizardContext();
     const [namedQuery] = useState(false);
-    const renderEdit = (index) => (React.createElement(SimpleButton, { px: 1, variant: "text", style: {
-            textDecoration: 'underline',
-            display: 'inline-block',
-            fontSize: 'var(--ab-font-size-2)',
-        }, onClick: () => {
+    const renderEdit = (index) => (React.createElement(SimpleButton, { className: "twa:px-1 twa:inline-block twa:text-2 twa:underline", variant: "text", onClick: () => {
             setCurrentSection(index);
         } }, "edit"));
     const extraContext = {
@@ -91,7 +88,7 @@ export const OnePageWizardSummary = () => {
         moduleInfo: moduleInfo,
         sections,
     };
-    return (React.createElement(Box, { className: "ab-OnePageWizardSummary" }, sections
+    return (React.createElement(Box, { className: "ab-OnePageWizardSummary twa:flex twa:flex-col twa:gap-2" }, sections
         .map((section, index) => {
         if (section === '-') {
             return null;
@@ -102,12 +99,13 @@ export const OnePageWizardSummary = () => {
         if (section.isVisible && !section.isVisible(data, api, extraContext)) {
             return null;
         }
-        return (React.createElement(Tabs, { keyboardNavigation: false, mt: index ? 2 : 0, key: index },
-            React.createElement(Tabs.Tab, null,
-                section.title,
-                " ",
-                renderEdit(index)),
-            React.createElement(Tabs.Content, null, section.renderSummary(data, api))));
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Tabs, { keyboardNavigation: false, key: index },
+                React.createElement(Tabs.Tab, null,
+                    section.title,
+                    " ",
+                    renderEdit(index)),
+                React.createElement(Tabs.Content, null, section.renderSummary(data, api)))));
     })
         .filter(Boolean)));
 };