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

package/src/View/TeamSharing/SharedEntityObjectView.js

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

package/src/View/Theme/ThemeEditor.js

@@ -8,11 +8,11 @@ const AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
 const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const rebass_1 = require("rebass");
 const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const ThemeField_1 = require("./ThemeField");
 const VariantSelector_1 = require("./VariantSelector");
 const AdaptableHelper_1 = require("../../Utilities/Helpers/AdaptableHelper");
+const Flex_1 = require("../../components/Flex");
 const fields = [
     {
         name: 'Primary Color',
@@ -39,31 +39,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',
@@ -142,18 +117,18 @@ 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_1.default, { header: React.createElement(rebass_1.Flex, { alignItems: "center", width: "100%" },
-            React.createElement(rebass_1.Box, { flex: 1 }, " Edit Custom Theme"),
+    return (React.createElement(Panel_1.default, { header: React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:w-full" },
+            React.createElement(Flex_1.Box, { className: "twa:flex-1" }, " Edit Custom Theme"),
             React.createElement(SimpleButton_1.default, { "data-name": "delete", accessLevel: currentThemeAccessLevel, icon: "delete", onClick: handleDeleteTheme, variant: "text" })) },
         React.createElement(FormLayout_1.default, null,
             React.createElement(FormLayout_1.FormRow, { label: "Theme Name" },
-                React.createElement(AdaptableInput_1.default, { disabled: currentThemeIsReadOnly, mr: 2, onChange: (event) => setCurrentThemeObject({
+                React.createElement(AdaptableInput_1.default, { disabled: currentThemeIsReadOnly, className: "twa:mr-2", onChange: (event) => setCurrentThemeObject({
                         ...currentThemeObject,
                         Name: event.target.value.replace(/ /g, '-'),
                     }), value: currentThemeObject.Name ?? '' }),
                 React.createElement(SimpleButton_1.default, { onClick: handleSaveName, disabled: saveNameDisabled || currentThemeIsReadOnly, icon: "save", hidden: currentThemeIsReadOnly }),
-                React.createElement(rebass_1.Text, { fontSize: 2, marginTop: 1 }, "The name cannot contain spaces."),
-                nameIsNotUnique && (React.createElement(rebass_1.Text, { fontSize: 2, color: "var(--ab-color-error)" }, "Name must be unique."))),
+                React.createElement(Flex_1.Box, { className: "twa:text-2 twa:mt-1" }, "The name cannot contain spaces."),
+                nameIsNotUnique && React.createElement(Flex_1.Box, { className: "twa:text-2 twa:text-error" }, "Name must be unique.")),
             React.createElement(FormLayout_1.FormRow, { label: "Description" },
                 React.createElement(AdaptableInput_1.default, { disabled: currentThemeIsReadOnly, onChange: (event) => handleDescriptionChange('Description', event.target.value), value: currentThemeObject?.Description ?? '' })),
             React.createElement(FormLayout_1.FormRow, { label: "Variant" },

package/src/View/Theme/ThemeEditorWindow.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeEditorWindow = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const AdaptableContext_1 = require("../AdaptableContext");
 const ThemePopup_1 = require("./ThemePopup");
+const Flex_1 = require("../../components/Flex");
 const ThemeEditorWindow = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const moduleInfo = adaptable.ModuleService.getModuleInfoByModule('Theme');
-    return (React.createElement(rebass_1.Box, { p: 2 },
+    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
         React.createElement(ThemePopup_1.ThemePopup, { hideShowInWindow: true, moduleInfo: moduleInfo, api: adaptable.api })));
 };
 exports.ThemeEditorWindow = ThemeEditorWindow;

package/src/View/Theme/ThemeField.js

@@ -8,9 +8,9 @@ const AdaptableContext_1 = require("../AdaptableContext");
 const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
 const FormLayout_1 = require("../../components/FormLayout");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
-const rebass_1 = require("rebass");
 const ColorPicker_1 = require("../../components/ColorPicker");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../Components/AdaptableInput"));
+const Flex_1 = require("../../components/Flex");
 const Field = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     let input = null;
@@ -32,9 +32,8 @@ const Field = (props) => {
             break;
     }
     return (React.createElement(FormLayout_1.FormRow, { label: props.name },
-        React.createElement(rebass_1.Flex, null,
+        React.createElement(Flex_1.Flex, null,
             input,
-            ' ',
             React.createElement(SimpleButton_1.default, { disabled: props.value === undefined, onClick: () => props.onChange(false) }, "Clear"))));
 };
 exports.Field = Field;

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

@@ -9,11 +9,11 @@ const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const ThemeEditor_1 = require("./ThemeEditor");
-const rebass_1 = require("rebass");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../Utilities/ObjectFactory"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const icons_1 = require("../../components/icons");
 const ThemeSelector_1 = require("./ThemeSelector");
+const Flex_1 = require("../../components/Flex");
 class ThemePopupComponent extends React.Component {
     constructor() {
         super(...arguments);
@@ -36,7 +36,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_1.default, { ml: 2, disabled: disabled, tone: "accent", variant: "raised", columns: ['label'], items: [
+        const newButton = (React.createElement(DropdownButton_1.default, { className: "twa:ml-2", disabled: disabled, tone: "accent", variant: "raised", columns: ['label'], items: [
                 {
                     label: 'Dark',
                     onClick: () => this.handleCreateNewTheme('dark'),
@@ -55,9 +55,9 @@ class ThemePopupComponent extends React.Component {
                 newButton) },
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Current Theme:" },
-                    React.createElement(rebass_1.Box, { maxWidth: 150 },
+                    React.createElement(Flex_1.Box, { className: "twa:max-w-[150px]" },
                         React.createElement(ThemeSelector_1.ThemeSelector, null)))),
-            isCustomTheme && (React.createElement(rebass_1.Box, { mt: 3 },
+            isCustomTheme && (React.createElement(Flex_1.Box, { className: "twa:mt-3" },
                 React.createElement(ThemeEditor_1.ThemeEditor, { accessLevel: this.props.accessLevel, theme: this.props.CurrentTheme })))));
     }
     onChangeTheme(value) {

package/src/View/Theme/ThemeStatusbar.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThemeStatusbar = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const rebass_1 = require("rebass");
 const ThemeSelector_1 = require("./ThemeSelector");
+const Flex_1 = require("../../components/Flex");
 const ThemeStatusbar = () => {
-    return (react_1.default.createElement(rebass_1.Box, { onClick: (event) => {
+    return (react_1.default.createElement(Flex_1.Box, { onClick: (event) => {
             event.stopPropagation();
         } },
         react_1.default.createElement(ThemeSelector_1.ThemeSelector, { size: "small" })));

package/src/View/Theme/VariantSelector.js

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

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/UIHelper.js

@@ -1,6 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIHelper = exports.isBrowserDocumentAvailable = exports.setCSSVariableValue = exports.getCSSVariableValue = exports.getSimpleButtonPaddingWidth = exports.getAdaptableToolPanelWidth = exports.getButtonTextColourForMessageType = exports.getButtonTextColourForArrayandMessageType = exports.getButtonColourForAdaptableAlerts = exports.getMessageTypeFromAdaptableAlerts = exports.getWeekDayByIndex = exports.getScheduleDescription = exports.getButtonToneForMessageType = exports.getGlyphForMessageType = exports.getGlyphForStatusColour = exports.getStyleForMessageType = exports.getStyleForStatusColour = exports.getColorByMessageType = exports.getGlyphByMessageType = exports.getButtonToneByMessageType = exports.getMessageTypeByStatusColour = exports.IsNotEmptyStyle = exports.IsEmptyStyle = exports.getModalContainer = exports.getPlaceholderForDataType = exports.getDescriptionForDataType = exports.getEmptyConfigState = exports.getDefaultColors = exports.getHexForName = exports.ORANGE = exports.LIGHT_RED = exports.RED = exports.DARK_RED = exports.PURPLE = exports.MAGENTA = exports.CYAN = exports.LIGHT_BLUE = exports.BLUE = exports.DARK_BLUE = exports.LIGHT_YELLOW = exports.YELLOW = exports.LIME_GREEN = exports.GREEN = exports.DARK_GREEN = exports.BROWN = exports.GRAY = exports.LIGHT_GRAY = exports.WHITE = exports.BLACK = void 0;
+exports.UIHelper = exports.ORANGE = exports.LIGHT_RED = exports.RED = exports.DARK_RED = exports.PURPLE = exports.MAGENTA = exports.CYAN = exports.LIGHT_BLUE = exports.BLUE = exports.DARK_BLUE = exports.LIGHT_YELLOW = exports.YELLOW = exports.LIME_GREEN = exports.GREEN = exports.DARK_GREEN = exports.BROWN = exports.GRAY = exports.LIGHT_GRAY = exports.WHITE = exports.BLACK = void 0;
+exports.getHexForName = getHexForName;
+exports.getDefaultColors = getDefaultColors;
+exports.getEmptyConfigState = getEmptyConfigState;
+exports.getDescriptionForDataType = getDescriptionForDataType;
+exports.getPlaceholderForDataType = getPlaceholderForDataType;
+exports.getModalContainer = getModalContainer;
+exports.IsEmptyStyle = IsEmptyStyle;
+exports.IsNotEmptyStyle = IsNotEmptyStyle;
+exports.getMessageTypeByStatusColour = getMessageTypeByStatusColour;
+exports.getButtonToneByMessageType = getButtonToneByMessageType;
+exports.getGlyphByMessageType = getGlyphByMessageType;
+exports.getColorByMessageType = getColorByMessageType;
+exports.getStyleForStatusColour = getStyleForStatusColour;
+exports.getStyleForMessageType = getStyleForMessageType;
+exports.getGlyphForStatusColour = getGlyphForStatusColour;
+exports.getGlyphForMessageType = getGlyphForMessageType;
+exports.getButtonToneForMessageType = getButtonToneForMessageType;
+exports.getScheduleDescription = getScheduleDescription;
+exports.getWeekDayByIndex = getWeekDayByIndex;
+exports.getMessageTypeFromAdaptableAlerts = getMessageTypeFromAdaptableAlerts;
+exports.getButtonColourForAdaptableAlerts = getButtonColourForAdaptableAlerts;
+exports.getButtonTextColourForArrayandMessageType = getButtonTextColourForArrayandMessageType;
+exports.getButtonTextColourForMessageType = getButtonTextColourForMessageType;
+exports.getAdaptableToolPanelWidth = getAdaptableToolPanelWidth;
+exports.getSimpleButtonPaddingWidth = getSimpleButtonPaddingWidth;
+exports.getCSSVariableValue = getCSSVariableValue;
+exports.setCSSVariableValue = setCSSVariableValue;
+exports.isBrowserDocumentAvailable = isBrowserDocumentAvailable;
 const tslib_1 = require("tslib");
 const EditableConfigEntityState_1 = require("./Components/SharedProps/EditableConfigEntityState");
 const Enums_1 = require("../AdaptableState/Common/Enums");
@@ -73,7 +101,6 @@ function getHexForName(name) {
             return 'not found';
     }
 }
-exports.getHexForName = getHexForName;
 function getDefaultColors() {
     return [
         getHexForName(exports.BLACK),
@@ -98,7 +125,6 @@ function getDefaultColors() {
         getHexForName(exports.ORANGE),
     ];
 }
-exports.getDefaultColors = getDefaultColors;
 function getEmptyConfigState() {
     return {
         editedAdaptableObject: null,
@@ -106,7 +132,6 @@ function getEmptyConfigState() {
         wizardStatus: EditableConfigEntityState_1.WizardStatus.None,
     };
 }
-exports.getEmptyConfigState = getEmptyConfigState;
 function getDescriptionForDataType(dataType) {
     switch (dataType) {
         case 'text':
@@ -117,7 +142,6 @@ function getDescriptionForDataType(dataType) {
             return 'date';
     }
 }
-exports.getDescriptionForDataType = getDescriptionForDataType;
 function getPlaceholderForDataType(dataType) {
     switch (dataType) {
         case 'text':
@@ -128,7 +152,6 @@ function getPlaceholderForDataType(dataType) {
             return 'Enter Date';
     }
 }
-exports.getPlaceholderForDataType = getPlaceholderForDataType;
 function getModalContainer(adaptableOptions, document) {
     let modalContainer;
     if (adaptableOptions.containerOptions.modalContainer) {
@@ -149,11 +172,9 @@ function getModalContainer(adaptableOptions, document) {
     }
     return modalContainer;
 }
-exports.getModalContainer = getModalContainer;
 function IsEmptyStyle(style) {
     return !IsNotEmptyStyle(style);
 }
-exports.IsEmptyStyle = IsEmptyStyle;
 function IsNotEmptyStyle(style) {
     return (style.BackColor != null ||
         style.ForeColor != null ||
@@ -163,7 +184,6 @@ function IsNotEmptyStyle(style) {
         style.FontSize != null ||
         StringExtensions_1.StringExtensions.IsNotNullOrEmpty(style.ClassName));
 }
-exports.IsNotEmptyStyle = IsNotEmptyStyle;
 function getMessageTypeByStatusColour(statusColour) {
     switch (statusColour) {
         case Enums_1.StatusColour.Error:
@@ -176,7 +196,6 @@ function getMessageTypeByStatusColour(statusColour) {
             return 'Info';
     }
 }
-exports.getMessageTypeByStatusColour = getMessageTypeByStatusColour;
 function getButtonToneByMessageType(messageType) {
     switch (messageType) {
         case 'Info':
@@ -191,7 +210,6 @@ function getButtonToneByMessageType(messageType) {
             return 'neutral';
     }
 }
-exports.getButtonToneByMessageType = getButtonToneByMessageType;
 function getGlyphByMessageType(messageType) {
     switch (messageType) {
         case 'Info':
@@ -204,7 +222,6 @@ function getGlyphByMessageType(messageType) {
             return 'error';
     }
 }
-exports.getGlyphByMessageType = getGlyphByMessageType;
 function getColorByMessageType(messageType) {
     switch (messageType) {
         case 'Error':
@@ -217,7 +234,6 @@ function getColorByMessageType(messageType) {
             return 'var(--ab-color-info)';
     }
 }
-exports.getColorByMessageType = getColorByMessageType;
 function getStyleForStatusColour(statusColour) {
     let result;
     switch (statusColour) {
@@ -247,7 +263,6 @@ function getStyleForStatusColour(statusColour) {
     }
     return result;
 }
-exports.getStyleForStatusColour = getStyleForStatusColour;
 function getStyleForMessageType(messageType) {
     let result;
     switch (messageType) {
@@ -277,7 +292,6 @@ function getStyleForMessageType(messageType) {
     }
     return result;
 }
-exports.getStyleForMessageType = getStyleForMessageType;
 function getGlyphForStatusColour(statusColour) {
     switch (statusColour) {
         case Enums_1.StatusColour.Info:
@@ -290,7 +304,6 @@ function getGlyphForStatusColour(statusColour) {
             return 'error';
     }
 }
-exports.getGlyphForStatusColour = getGlyphForStatusColour;
 function getGlyphForMessageType(messageType) {
     switch (messageType) {
         case 'Info':
@@ -303,7 +316,6 @@ function getGlyphForMessageType(messageType) {
             return 'error';
     }
 }
-exports.getGlyphForMessageType = getGlyphForMessageType;
 function getButtonToneForMessageType(messageType) {
     switch (messageType) {
         case 'Info':
@@ -316,7 +328,6 @@ function getButtonToneForMessageType(messageType) {
             return 'success';
     }
 }
-exports.getButtonToneForMessageType = getButtonToneForMessageType;
 function getScheduleDescription(schedule) {
     if (schedule == null) {
         return '[No Schedule]';
@@ -346,7 +357,6 @@ function getScheduleDescription(schedule) {
     }
     return `${dateString} @ ${addLeadingZero(schedule.Hour)}:${addLeadingZero(schedule.Minute)}`;
 }
-exports.getScheduleDescription = getScheduleDescription;
 function getShortenedDayString(dayOfWeek) {
     switch (dayOfWeek) {
         case 'Sunday':
@@ -383,7 +393,6 @@ function getWeekDayByIndex(dayOfWeek) {
             return 'Saturday';
     }
 }
-exports.getWeekDayByIndex = getWeekDayByIndex;
 function addLeadingZero(item) {
     item = item || 0;
     if (item < 10) {
@@ -403,18 +412,15 @@ function getMessageTypeFromAdaptableAlerts(adaptableAlerts) {
     }
     return 'Info';
 }
-exports.getMessageTypeFromAdaptableAlerts = getMessageTypeFromAdaptableAlerts;
 function getButtonColourForAdaptableAlerts(adaptableAlerts, messageTypeColor) {
     return ArrayExtensions_1.default.IsNotNullOrEmpty(adaptableAlerts) ? messageTypeColor : 'primary';
 }
-exports.getButtonColourForAdaptableAlerts = getButtonColourForAdaptableAlerts;
 function getButtonTextColourForArrayandMessageType(adaptableAlerts, messageType) {
     if (ArrayExtensions_1.default.IsNullOrEmpty(adaptableAlerts)) {
         return 'text-on-primary';
     }
     return this.getButtonTextColourForMessageType(messageType);
 }
-exports.getButtonTextColourForArrayandMessageType = getButtonTextColourForArrayandMessageType;
 function getButtonTextColourForMessageType(messageType) {
     switch (messageType) {
         case 'Info':
@@ -427,7 +433,6 @@ function getButtonTextColourForMessageType(messageType) {
             return 'var( --ab-color-text-on-error)';
     }
 }
-exports.getButtonTextColourForMessageType = getButtonTextColourForMessageType;
 function getNumericCSSVariableValue(stringValue, defaultValue) {
     const numericValue = typeof stringValue === 'string' ? +stringValue.match(/\d/g)?.join('') : stringValue;
     return typeof numericValue === 'number' ? numericValue : defaultValue;
@@ -435,11 +440,9 @@ function getNumericCSSVariableValue(stringValue, defaultValue) {
 function getAdaptableToolPanelWidth() {
     return getNumericCSSVariableValue(getCSSVariableValue('--ab-cmp-toolpanel__width'), 200);
 }
-exports.getAdaptableToolPanelWidth = getAdaptableToolPanelWidth;
 function getSimpleButtonPaddingWidth() {
     return getNumericCSSVariableValue(getCSSVariableValue('--ab-space-1'), 4);
 }
-exports.getSimpleButtonPaddingWidth = getSimpleButtonPaddingWidth;
 function getCSSVariableValue(cssVariable) {
     if (!isBrowserDocumentAvailable()) {
         // possible during static/server-side rendering (should happen only in test cases)
@@ -447,7 +450,6 @@ function getCSSVariableValue(cssVariable) {
     }
     return getComputedStyle(document.documentElement).getPropertyValue(cssVariable);
 }
-exports.getCSSVariableValue = getCSSVariableValue;
 function setCSSVariableValue(cssVariable, value) {
     if (!isBrowserDocumentAvailable()) {
         // possible during static/server-side rendering (should happen only in test cases)
@@ -455,11 +457,9 @@ function setCSSVariableValue(cssVariable, value) {
     }
     document.documentElement.style.setProperty(cssVariable, value);
 }
-exports.setCSSVariableValue = setCSSVariableValue;
 function isBrowserDocumentAvailable() {
     return typeof window !== 'undefined' && typeof window.document !== 'undefined';
 }
-exports.isBrowserDocumentAvailable = isBrowserDocumentAvailable;
 exports.UIHelper = {
     getHexForName,
     getDefaultColors,

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

@@ -6,18 +6,16 @@ const React = tslib_1.__importStar(require("react"));
 const Tabs_1 = require("../../components/Tabs");
 const TagValueSelector_1 = require("../Components/TagValueSelector");
 const OnePageAdaptableWizard_1 = require("./OnePageAdaptableWizard");
-const rebass_1 = require("rebass");
 const ObjectTagsWizardSection = (props) => {
     const { onChange } = props;
     const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+    return (React.createElement(Tabs_1.Tabs, { className: "twa:h-full" },
         React.createElement(Tabs_1.Tabs.Tab, null, "Tags"),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(TagValueSelector_1.TagValueSelector, { selectedTags: data.Tags, onChange: (selectedTags) => onChange({ ...data, Tags: selectedTags }) }))));
 };
 exports.ObjectTagsWizardSection = ObjectTagsWizardSection;
 const renderObjectTagsSummary = (data) => {
-    return data.Tags?.length ? (React.createElement(rebass_1.Text, { fontSize: 2 },
-        React.createElement(TagValueSelector_1.TagValueOptionsTags, { tags: data.Tags }))) : null;
+    return data.Tags?.length ? React.createElement(TagValueSelector_1.TagValueOptionsTags, { tags: data.Tags }) : null;
 };
 exports.renderObjectTagsSummary = renderObjectTagsSummary;

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,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OnePageWizardSummary = exports.OnePageAdaptableWizard = exports.useOnePageAdaptableWizardContext = exports.OnePageAdaptableWizardContext = exports.FormDescriptionText = exports.SummaryText = exports.SummaryTag = void 0;
+exports.OnePageWizardSummary = exports.OnePageAdaptableWizard = exports.OnePageAdaptableWizardContext = exports.FormDescriptionText = exports.SummaryText = exports.SummaryTag = void 0;
+exports.useOnePageAdaptableWizardContext = useOnePageAdaptableWizardContext;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
 const NamedQueryRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/NamedQueryRedux"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableContext_1 = require("../AdaptableContext");
@@ -13,11 +13,13 @@ const Tabs_1 = require("../../components/Tabs");
 const NamedQueryContext_1 = require("../../components/ExpressionEditor/NamedQueryContext");
 const OnePageWizards_1 = require("./OnePageWizards");
 const kebabCase_1 = tslib_1.__importDefault(require("lodash/kebabCase"));
-const SummaryTag = (props) => (React.createElement(rebass_1.Text, { ...props }));
+const Flex_1 = require("../../components/Flex");
+const twMerge_1 = require("../../twMerge");
+const SummaryTag = (props) => (React.createElement(Flex_1.Box, { ...props }));
 exports.SummaryTag = SummaryTag;
-const SummaryText = (props) => (React.createElement(rebass_1.Text, { fontSize: 2, mb: 3, ...props }));
+const SummaryText = (props) => (React.createElement(Flex_1.Box, { ...props, className: (0, twMerge_1.twMerge)('twa:text-2 twa:mb-3', props.className) }));
 exports.SummaryText = SummaryText;
-const FormDescriptionText = (props) => React.createElement(rebass_1.Text, { fontSize: 2, mt: 1, ...props });
+const FormDescriptionText = (props) => React.createElement(Flex_1.Box, { ...props, className: (0, twMerge_1.twMerge)('twa:text-2 twa:mt-1', props.className) });
 exports.FormDescriptionText = FormDescriptionText;
 exports.OnePageAdaptableWizardContext = React.createContext({
     data: null,
@@ -29,7 +31,6 @@ exports.OnePageAdaptableWizardContext = React.createContext({
 function useOnePageAdaptableWizardContext() {
     return React.useContext(exports.OnePageAdaptableWizardContext);
 }
-exports.useOnePageAdaptableWizardContext = useOnePageAdaptableWizardContext;
 const OnePageAdaptableWizard = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const dispatch = (0, react_redux_1.useDispatch)();
@@ -86,11 +87,7 @@ const OnePageWizardSummary = () => {
     const { sections, data, api, moduleInfo } = useOnePageAdaptableWizardContext();
     const { setCurrentSection } = (0, OnePageWizards_1.useOnePageWizardContext)();
     const [namedQuery] = (0, react_1.useState)(false);
-    const renderEdit = (index) => (React.createElement(SimpleButton_1.default, { px: 1, variant: "text", style: {
-            textDecoration: 'underline',
-            display: 'inline-block',
-            fontSize: 'var(--ab-font-size-2)',
-        }, onClick: () => {
+    const renderEdit = (index) => (React.createElement(SimpleButton_1.default, { className: "twa:px-1 twa:inline-block twa:text-2 twa:underline", variant: "text", onClick: () => {
             setCurrentSection(index);
         } }, "edit"));
     const extraContext = {
@@ -100,7 +97,7 @@ const OnePageWizardSummary = () => {
         moduleInfo: moduleInfo,
         sections,
     };
-    return (React.createElement(rebass_1.Box, { className: "ab-OnePageWizardSummary" }, sections
+    return (React.createElement(Flex_1.Box, { className: "ab-OnePageWizardSummary twa:flex twa:flex-col twa:gap-2" }, sections
         .map((section, index) => {
         if (section === '-') {
             return null;
@@ -111,12 +108,13 @@ const OnePageWizardSummary = () => {
         if (section.isVisible && !section.isVisible(data, api, extraContext)) {
             return null;
         }
-        return (React.createElement(Tabs_1.Tabs, { keyboardNavigation: false, mt: index ? 2 : 0, key: index },
-            React.createElement(Tabs_1.Tabs.Tab, null,
-                section.title,
-                " ",
-                renderEdit(index)),
-            React.createElement(Tabs_1.Tabs.Content, null, section.renderSummary(data, api))));
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Tabs_1.Tabs, { keyboardNavigation: false, key: index },
+                React.createElement(Tabs_1.Tabs.Tab, null,
+                    section.title,
+                    " ",
+                    renderEdit(index)),
+                React.createElement(Tabs_1.Tabs.Content, null, section.renderSummary(data, api)))));
     })
         .filter(Boolean)));
 };