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

package/src/Utilities/Services/ModuleService.js

@@ -109,84 +109,83 @@ class ModuleService {
     }
     getModuleDocumentationPageByModule(adaptableModule) {
         let url = `${DocumentationLinkConstants_1.HOST_URL_DOCS}/`;
-        let learnUrl = url + 'guide/';
         switch (adaptableModule) {
             case 'Alert':
-                return learnUrl + 'handbook-alerting';
+                return url + 'handbook-alerting';
             case 'BulkUpdate':
                 return url + 'handbook-editing-bulk-update';
             case 'CalculatedColumn':
-                return learnUrl + 'handbook-calculated-column';
+                return url + 'handbook-calculated-column';
             case 'CellSummary':
-                return learnUrl + 'handbook-summarising';
+                return url + 'handbook-summarising';
             case 'Charting':
-                return learnUrl + 'handbook-charts';
+                return url + 'handbook-charts';
             case 'ColumnFilter':
-                return learnUrl + 'handbook-column-filter';
+                return url + 'handbook-column-filter';
             case 'ColumnInfo':
-                return learnUrl + 'dev-guide-column-grid-column-info';
+                return url + 'dev-guide-column-grid-column-info';
             case 'Comment':
-                return learnUrl + 'handbook-comments';
+                return url + 'handbook-comments';
             case 'CustomSort':
-                return learnUrl + 'handbook-custom-sorting';
+                return url + 'handbook-custom-sorting';
             case 'Dashboard':
-                return learnUrl + 'ui-dashboard';
+                return url + 'ui-dashboard';
             case 'DataChangeHistory':
-                return learnUrl + 'handbook-monitoring-data-change-history';
+                return url + 'handbook-monitoring-data-change-history';
             case 'DataImport':
-                return learnUrl + 'handbook-importing';
+                return url + 'handbook-importing';
             case 'DataSet':
-                return learnUrl + 'handbook-data-sets';
+                return url + 'handbook-data-sets';
             case 'Export':
-                return learnUrl + 'handbook-exporting';
+                return url + 'handbook-exporting';
             case 'Fdc3':
-                return learnUrl + 'handbook-fdc3';
+                return url + 'handbook-fdc3';
             case 'FlashingCell':
-                return learnUrl + 'handbook-flashing-cell';
+                return url + 'handbook-flashing-cell';
             case 'FormatColumn':
-                return learnUrl + 'handbook-column-formatting';
+                return url + 'handbook-column-formatting';
             case 'FreeTextColumn':
-                return learnUrl + 'handbook-freetext-column';
+                return url + 'handbook-freetext-column';
             case 'GridFilter':
-                return learnUrl + 'handbook-grid-filter';
+                return url + 'handbook-grid-filter';
             case 'GridInfo':
-                return learnUrl + 'dev-guide-column-grid-column-info';
+                return url + 'dev-guide-column-grid-column-info';
             case 'Layout':
-                return learnUrl + 'handbook-layouts';
+                return url + 'handbook-layouts';
             case 'NamedQuery':
-                return learnUrl + 'handbook-named-queries';
+                return url + 'handbook-named-queries';
             case 'Note':
-                return learnUrl + 'handbook-notes';
+                return url + 'handbook-notes';
             case 'PlusMinus':
-                return learnUrl + 'handbook-editing-plus-minus';
+                return url + 'handbook-editing-plus-minus';
             case 'QuickSearch':
-                return learnUrl + 'handbook-quick-search';
+                return url + 'handbook-quick-search';
             case 'Schedule':
-                return learnUrl + 'handbook-scheduling';
+                return url + 'handbook-scheduling';
             case 'SettingsPanel':
-                return learnUrl + 'ui-settings-panel';
+                return url + 'ui-settings-panel';
             case 'Shortcut':
-                return learnUrl + 'handbook-editing-shortcut';
+                return url + 'handbook-editing-shortcut';
             case 'SmartEdit':
-                return learnUrl + 'handbook-editing-smart-edit';
+                return url + 'handbook-editing-smart-edit';
             case 'StateManagement':
-                return learnUrl + 'dev-guide-adaptable-state-management';
+                return url + 'dev-guide-adaptable-state-management';
             case 'StatusBar':
-                return learnUrl + 'ui-status-bar';
+                return url + 'ui-status-bar';
             case 'StyledColumn':
-                return learnUrl + 'handbook-styled-column-overview';
+                return url + 'handbook-styled-column-overview';
             case 'SystemStatus':
-                return learnUrl + 'handbook-system-status-message';
+                return url + 'handbook-system-status-message';
             case 'TeamSharing':
-                return learnUrl + 'handbook-team-sharing';
+                return url + 'handbook-team-sharing';
             case 'Theme':
-                return learnUrl + 'handbook-theming';
+                return url + 'handbook-theming';
             case 'ToolPanel':
-                return learnUrl + 'ui-tool-panel';
+                return url + 'ui-tool-panel';
             case 'IPushPull':
-                return learnUrl + 'integrations-ipushpull';
+                return url + 'integrations-ipushpull';
             case 'OpenFin':
-                return learnUrl + 'integrations-openfin';
+                return url + 'integrations-openfin';
             default:
                 return 'good';
         }

package/src/Utilities/adaptableOverrideCheck.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isProvidedByAdaptable = exports.tagProvidedByAdaptable = void 0;
+exports.tagProvidedByAdaptable = tagProvidedByAdaptable;
+exports.isProvidedByAdaptable = isProvidedByAdaptable;
 const PROVIDED_BY_ADAPTABLE = Symbol('isProvidedByAdaptable');
 function tagProvidedByAdaptable(fn) {
     fn[PROVIDED_BY_ADAPTABLE] = true;
     return fn;
 }
-exports.tagProvidedByAdaptable = tagProvidedByAdaptable;
 function isProvidedByAdaptable(fn) {
     return fn && !!fn[PROVIDED_BY_ADAPTABLE];
 }
-exports.isProvidedByAdaptable = isProvidedByAdaptable;

package/src/Utilities/createAgStatusPanelComponent.d.ts

@@ -9,7 +9,7 @@ export interface StatusPanelProps {
         Key: string;
     };
 }
-export declare const createAgStatusPanelComponent: (component: React.FunctionComponent<StatusPanelProps>, adaptable: IAdaptable, context: StatusPanelProps['context']) => ((props: IStatusPanelParams) => React.JSX.Element) | {
+export declare const createAgStatusPanelComponent: (component: React.FunctionComponent<StatusPanelProps>, adaptable: IAdaptable, context: StatusPanelProps["context"]) => ((props: IStatusPanelParams) => React.JSX.Element) | {
     new (): {
         params: IStatusPanelParams;
         eGui: HTMLElement;

package/src/Utilities/getObjectTagsViewItems.js

@@ -33,7 +33,7 @@ const getObjectTagsViewItems = (object, api) => {
                 const editAction = viewOptions.getEditAction(newObject);
                 dispatch(editAction);
             }, [hasCurrentLayoutAsTag, props.data]);
-            return (react_1.default.createElement(SimpleButton_1.default, { onClick: handleToggleTag, mt: 1, icon: hasCurrentLayoutAsTag ? 'minus' : 'plus' }, hasCurrentLayoutAsTag ? 'Remove from Layout' : 'Add to Layout'));
+            return (react_1.default.createElement(SimpleButton_1.default, { onClick: handleToggleTag, className: "twa:mt-1", icon: hasCurrentLayoutAsTag ? 'minus' : 'plus' }, hasCurrentLayoutAsTag ? 'Remove from Layout' : 'Add to Layout'));
         },
     };
 };

package/src/Utilities/license/hashing.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.compute_string=void 0;const r=3988292384;function t(r=3988292384){var t,e,n,o=new Array;for(t=0;t<256;t++){for(n=t,e=8;e>0;e--)1&~n?n>>>=1:n=n>>>1^r;o[t]=n}return o}function e(){return 4294967295}function n(r,t,e){return t=t>>>8^r[e^255&t]}function o(r){return r=(r=~r)<0?4294967295+r+1:r}function u(r,u=3988292384){var c,i=t(u),f=0;for(f=e(),c=0;c<r.length;c++)f=n(i,f,r.charCodeAt(c));return`${f=o(f)}`}exports.compute_string=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.compute_string=u;const r=3988292384;function t(t=r){var n,e,o,u=new Array;for(n=0;n<256;n++){for(o=n,e=8;e>0;e--)1&~o?o>>>=1:o=o>>>1^t;u[n]=o}return u}function n(){return 4294967295}function e(r,t,n){return t=t>>>8^r[n^255&t]}function o(r){return r=(r=~r)<0?4294967295+r+1:r}function u(u,c=r){var f,i=t(c),s=0;for(s=n(),f=0;f<u.length;f++)s=e(i,s,u.charCodeAt(f));return`${s=o(s)}`}

package/src/Utilities/runIfNotResolvedIn.d.ts

@@ -5,4 +5,4 @@
  * @param callback Called if promise does not resolve in the time defined by 'delay'
  * @param delay Time after which if the promise was not resolved the callback (fn) is called.
  */
-export declare const runIfNotResolvedIn: <T>(promise: Promise<T>, callback: () => void, delay?: number) => Promise<T>;
+export declare const runIfNotResolvedIn: <T>(promise: Promise<T>, callback: () => void, delay?: number) => typeof promise;

package/src/Utilities/sortColumnStateForVisibleColumns.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sortColumnStateForVisibleColumns = void 0;
+exports.sortColumnStateForVisibleColumns = sortColumnStateForVisibleColumns;
 function insertAtCorrectIndex(result, colState, visibleColumnsIndexes, offset = 0, lastVisibleOffset = 0) {
     const prevColState = result[result.length - 1 - offset];
     if (!prevColState) {
@@ -47,4 +47,3 @@ function sortColumnStateForVisibleColumns(columnState, visibleColumns) {
     }
     return result;
 }
-exports.sortColumnStateForVisibleColumns = sortColumnStateForVisibleColumns;

package/src/Utilities/updateSingleToMultiplePredicates.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateSingleToMultiplePredicates = void 0;
+exports.updateSingleToMultiplePredicates = updateSingleToMultiplePredicates;
 function updateSingleToMultiplePredicates(rule) {
     if ('Predicate' in rule && rule.Predicate) {
         rule.Predicates = [rule.Predicate, ...(rule.Predicates ?? [])];
@@ -8,4 +8,3 @@ function updateSingleToMultiplePredicates(rule) {
     }
     return rule;
 }
-exports.updateSingleToMultiplePredicates = updateSingleToMultiplePredicates;

package/src/Utilities/waitForTimeout.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.waitForTimeout = void 0;
+exports.waitForTimeout = waitForTimeout;
 // waits for the given ms milliseconds
 function waitForTimeout(ms) {
     return new Promise((resolve) => {
@@ -9,4 +9,3 @@ function waitForTimeout(ms) {
         }, ms);
     });
 }
-exports.waitForTimeout = waitForTimeout;

package/src/View/AdaptableComputedCSSVarsContext.js

@@ -4,6 +4,8 @@ exports.useAdaptableComputedCSSVar = exports.useAdaptableComputedCSSVars = expor
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const CSSNumericVariableWatch_1 = require("../components/Select/CSSNumericVariableWatch");
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const react_1 = require("react");
 const computedCSSVarNames = [
     '--ab-cmp-select-menu__max-width',
     '--ab-cmp-select-menu__min-width',
@@ -12,7 +14,10 @@ const computedCSSVarNames = [
 const defaultValues = Object.fromEntries(computedCSSVarNames.map((varName) => [varName, 0]));
 exports.AdaptableComputedCSSVarsContext = React.createContext(defaultValues);
 const WithAdaptableComputedCSSVars = ({ children }) => {
-    const [computedCSSVars, setComputedCSSVars] = React.useState(defaultValues);
+    const [computedCSSVars, doSetComputedCSSVars] = React.useState(defaultValues);
+    const setComputedCSSVars = (0, react_1.useMemo)(() => {
+        return (0, debounce_1.default)(doSetComputedCSSVars, 300, { leading: false, trailing: true });
+    }, [doSetComputedCSSVars]);
     return (React.createElement(exports.AdaptableComputedCSSVarsContext.Provider, { value: computedCSSVars },
         children,
         computedCSSVarNames.map((varName) => (React.createElement(CSSNumericVariableWatch_1.CSSNumericVariableWatch, { key: varName, varName: varName, onChange: (value) => {

package/src/View/AdaptablePopover/index.d.ts

@@ -14,7 +14,7 @@ export interface AdaptablePopoverProps extends React.ClassAttributes<React.Props
     tooltipText?: string;
     popoverMinWidth?: number;
     popoverMaxWidth?: number;
-    popupPadding?: number;
+    popupPadding?: 0 | 2;
     alignPosition?: OverlayShowParams['alignPosition'];
     visible?: boolean;
 }

package/src/View/AdaptablePopover/index.js

@@ -8,7 +8,7 @@ const UIHelper_1 = require("../UIHelper");
 const ButtonInfo_1 = require("../Components/Buttons/ButtonInfo");
 const icons_1 = require("../../components/icons");
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../../components/OverlayTrigger"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../components/Flex");
 class AdaptablePopover extends React.Component {
     render() {
         let messageType = this.props.MessageType != null ? this.props.MessageType : 'Info';
@@ -18,21 +18,21 @@ class AdaptablePopover extends React.Component {
         const title = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.headerText)
             ? this.props.headerText
             : '';
-        const popoverClickRootClose = (React.createElement(rebass_1.Box, { className: "ab-Popover", style: {
+        const popoverClickRootClose = (React.createElement(Flex_1.Box, { className: "ab-Popover", style: {
                 margin: '0px',
                 padding: '0px',
                 minWidth: popoverMinWidth,
                 maxWidth: this.props.popoverMaxWidth ?? 300,
             } },
-            title ? (React.createElement(rebass_1.Text, { fontSize: 4, padding: 2 }, title)) : null,
-            React.createElement(rebass_1.Box, { className: "ab-Popover__body", padding: this.props.popupPadding ?? 2 }, this.props.bodyText.map((textOrHTML, index) => (React.createElement("span", { key: index }, textOrHTML))))));
+            title ? React.createElement(Flex_1.Box, { className: "twa:text-4 twa:p-2" }, title) : null,
+            React.createElement(Flex_1.Box, { className: `ab-Popover__body ${(this.props.popupPadding ?? 2) === 0 ? 'twa:p-0' : 'twa:p-2'}` }, this.props.bodyText.map((textOrHTML, index) => (React.createElement("span", { key: index }, textOrHTML))))));
         const icon = 'info'; // - think this is wrong - UIHelper.getGlyphByMessageType(messageType);
         const color = UIHelper_1.UIHelper.getColorByMessageType(messageType);
         const iconStyle = {
             color,
             fill: 'currentColor',
         };
-        return (React.createElement(rebass_1.Flex, { alignItems: "center", className: this.props.className },
+        return (React.createElement(Flex_1.Flex, { alignItems: "center", className: this.props.className },
             React.createElement(OverlayTrigger_1.default
             // showTriangle
             , { 

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/AdaptableOptionsForm.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AdaptableOptionsForm = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const CheckBox_1 = require("../../../components/CheckBox");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
@@ -11,13 +10,13 @@ const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
 const MetamodelService_1 = require("../../../Utilities/Services/MetamodelService");
 const AdaptablePopover_1 = require("../../AdaptablePopover");
-const LABEL_WIDTH = 250;
+const Flex_1 = require("../../../components/Flex");
 const SUPPORTED_PRIMITEVE_TYPES = ['s', 'n', 'b'];
 const OptionInput = (props) => {
     const { name, defaultValue, value, description, uiLabel } = props.option;
     const label = uiLabel ?? StringExtensions_1.default.Humanize(name);
     let input = React.createElement(React.Fragment, null);
-    const info = (React.createElement(rebass_1.Box, { ml: 2 },
+    const info = (React.createElement(Flex_1.Box, { className: "twa:ml-2" },
         React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [description] })));
     const handleInputChange = (event) => props.onChange({ ...props.option, value: event.currentTarget.value });
     const handleCheckboxChange = (checked) => props.onChange({ ...props.option, value: checked });
@@ -66,25 +65,25 @@ const OptionInput = (props) => {
         }
     }
     let content = (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, { minWidth: LABEL_WIDTH, alignItems: "center" },
+        React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:min-w-[250px]" },
             label,
             " ",
             info),
         input));
     if (option.kind === 'b') {
-        content = (React.createElement(rebass_1.Flex, { alignItems: "center" },
+        content = (React.createElement(Flex_1.Flex, { alignItems: "center" },
             input,
             " ",
             info));
     }
-    return (React.createElement(rebass_1.Flex, { mb: 2, pl: 1 }, content));
+    return React.createElement(Flex_1.Flex, { className: "twa:mb-2 twa:pl-1" }, content);
 };
 const OptionsSection = (props) => {
     if (!props.options.length) {
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(rebass_1.Box, { mb: 2 },
-        React.createElement(HelpBlock_1.default, { mb: 2 }, props.name ?? props.id),
+    return (React.createElement(Flex_1.Box, { className: "twa:mb-2" },
+        React.createElement(HelpBlock_1.default, { className: "twa:mb-2" }, props.name ?? props.id),
         props.options.map((option, index) => (React.createElement(OptionInput, { key: index, option: option, onChange: props.onChange })))));
 };
 const AdaptableOptionsForm = (props) => {
@@ -108,7 +107,7 @@ const AdaptableOptionsForm = (props) => {
         }
         props.onChangedAdaptableOptions(adaptableOptions);
     };
-    return (React.createElement(rebass_1.Box, { p: 2 }, nocodeOptions.map(([sectionName, { containerLabel, items }]) => {
+    return (React.createElement(Flex_1.Box, { className: "twa:p-2" }, nocodeOptions.map(([sectionName, { containerLabel, items }]) => {
         return (React.createElement(OptionsSection, { onChange: handleOptionChange(sectionName), key: sectionName, id: sectionName, name: containerLabel, options: items }));
     })));
 };

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.js

@@ -10,8 +10,9 @@ const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const react_1 = require("react");
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/StringExtensions"));
 const InfiniteTable_1 = require("../../../components/InfiniteTable");
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../../components/Flex");
 const throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
+const twMerge_1 = require("../../../twMerge");
 const dataTypes = [
     {
         value: 'text',
@@ -157,7 +158,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
     }, [includedColumnsMap, primaryKeyField]);
     const data = columns;
     const CellWrapper = (props) => {
-        return (React.createElement(rebass_1.Flex, { ...props, style: {
+        return (React.createElement(Flex_1.Flex, { ...props, style: {
                 ...props.style,
                 position: 'absolute',
                 textAlign: 'center',
@@ -168,12 +169,12 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
                 whiteSpace: 'normal',
             }, justifyContent: "center", alignItems: "center" }, props.children));
     };
-    const HeaderCellWrapper = (props) => (React.createElement(CellWrapper, { ...props, fontSize: 3, style: { fontWeight: 600 } }));
+    const HeaderCellWrapper = (props) => (React.createElement(CellWrapper, { ...props, className: (0, twMerge_1.twMerge)('twa:text-3 twa:font-bold', props.className) }));
     const HeaderWithCheckbox = (props) => {
         const { label, onChange, checked, ...flexProps } = props;
         return (React.createElement(HeaderCellWrapper, { ...flexProps, flexDirection: "column" },
-            React.createElement(rebass_1.Box, null, label),
-            React.createElement(rebass_1.Box, { style: { textAlign: 'center' } },
+            React.createElement(Flex_1.Box, null, label),
+            React.createElement(Flex_1.Box, { className: "twa:text-center twa:ml-1" },
                 React.createElement(CheckBox_1.CheckBox, { checked: checked, onChange: onChange }))));
     };
     const columnsMap = {
@@ -226,7 +227,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             render: (params) => {
                 const column = params.data;
                 const humanized = StringExtensions_1.default.Humanize(column.field);
-                return (React.createElement(rebass_1.Box, { p: 2 },
+                return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(ThrottledInput, { key: column.field, style: inputStyle, value: column.caption != undefined ? column.caption : humanized, placeholder: humanized, onChange: (value) => {
                             setColumnCaption(value, column.field);
                         } })));
@@ -238,7 +239,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             renderMenuIcon: false,
             render: (params) => {
                 const column = params.data;
-                return (React.createElement(CellWrapper, { paddingLeft: 1, paddingRight: 1 },
+                return (React.createElement(CellWrapper, { className: "twa:px-1" },
                     React.createElement(Dropdown_1.default, { style: inputStyle, showClearButton: false, options: dataTypes, value: column?.type ?? '', onChange: onColumnTypeChange.bind(null, column) })));
             },
         },
@@ -332,7 +333,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
             },
         },
     };
-    return (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' }, className: theme },
+    return (React.createElement(Flex_1.Box, { className: (0, twMerge_1.twMerge)('twa:p-2 twa:h-full', theme) },
         React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "colId" },
             React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: {
                     default: {

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/Components/FormBox.d.ts

@@ -1,3 +1,5 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
-export declare const NocodeWizardFormBox: React.FunctionComponent<React.PropsWithChildren<BoxProps>>;
+import { BoxProps } from '../../../../components/Flex';
+export declare const NocodeWizardFormBox: React.FunctionComponent<React.PropsWithChildren<BoxProps & {
+    className?: string;
+}>>;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/Components/FormBox.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NocodeWizardFormBox = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../../../../components/utils/join"));
-const NocodeWizardFormBox = (props) => (React.createElement(rebass_1.Box, { ...props, padding: 2, mb: 2, className: (0, join_1.default)('ab-NocodeWizardFormBox', props.className) }));
+const Flex_1 = require("../../../../components/Flex");
+const twMerge_1 = require("../../../../twMerge");
+const NocodeWizardFormBox = (props) => (React.createElement(Flex_1.Box, { ...props, className: (0, twMerge_1.twMerge)('ab-NocodeWizardFormBox twa:p-2 twa:mb-2', props.className) }));
 exports.NocodeWizardFormBox = NocodeWizardFormBox;

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/EntitlementsForm.js

@@ -4,11 +4,11 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
 const Types_1 = require("../../../AdaptableState/Common/Types");
-const rebass_1 = require("rebass");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const ModuleConstants_1 = require("../../../Utilities/Constants/ModuleConstants");
 const InfiniteTable_1 = require("../../../components/InfiniteTable");
+const Flex_1 = require("../../../components/Flex");
 const ALL_ENTITLEMENTS_MODULES = Types_1.ALL_MODULES;
 const tableDOMProps = {
     style: {
@@ -31,7 +31,7 @@ const EntitlementsListForm = (props) => {
     let abOptions = props.adaptableOptions;
     const entitlements = abOptions?.entitlementOptions?.moduleEntitlements ?? [];
     if (typeof entitlements === 'function') {
-        return (React.createElement(HelpBlock_1.default, { mt: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
+        return (React.createElement(HelpBlock_1.default, { className: "twa:mt-2" }, "Entitlements cannot be customized, they are handled by a custom function."));
     }
     const entitlementsMap = React.useMemo(() => {
         return entitlements.reduce((acc, entitlement) => {
@@ -66,7 +66,7 @@ const EntitlementsListForm = (props) => {
         });
     }, [abOptions?.entitlementOptions]);
     if (typeof entitlements === 'function') {
-        return (React.createElement(HelpBlock_1.default, { mb: 2 }, "Entitlements cannot be customized, they are handled by a custom function."));
+        return (React.createElement(HelpBlock_1.default, { className: "twa:mb-2" }, "Entitlements cannot be customized, they are handled by a custom function."));
     }
     const columnsMap = {
         name: {
@@ -107,7 +107,7 @@ const EntitlementsListForm = (props) => {
         props.adaptableOptions.initialState.Theme?.CurrentTheme) {
         theme = props.adaptableOptions.initialState.Theme.CurrentTheme;
     }
-    return (React.createElement(rebass_1.Box, { flex: 1, height: "100%", className: theme },
+    return (React.createElement(Flex_1.Box, { className: `${theme} twa:flex-1 twa:h-full` },
         React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "name" },
             React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
 };
@@ -116,7 +116,7 @@ const DefaultEntitlementForm = (props) => {
     const entitlementOptions = props.adaptableOptions?.entitlementOptions;
     const defaultEntitlement = entitlementOptions?.defaultAccessLevel;
     if (typeof defaultEntitlement === 'function') {
-        return React.createElement(HelpBlock_1.default, { mb: 2 }, "Default Entitlement is controlled by a custom function");
+        return (React.createElement(HelpBlock_1.default, { className: "twa:mb-2" }, "Default Entitlement is controlled by a custom function"));
     }
     const handleDefaultEntitlementChange = React.useCallback((accessLevel) => {
         props.onChangedAptableOptions({
@@ -127,15 +127,15 @@ const DefaultEntitlementForm = (props) => {
             },
         });
     }, [abOptions?.entitlementOptions?.defaultAccessLevel]);
-    return (React.createElement(FormLayout_1.default, { mb: 2 },
+    return (React.createElement(FormLayout_1.default, { className: "twa:mb-2" },
         React.createElement(FormLayout_1.FormRow, { label: "Default Entitlement:" },
-            React.createElement(Radio_1.default, { onClick: () => handleDefaultEntitlementChange('Full'), checked: defaultEntitlement === 'Full', mr: 3 }, "Visible"),
-            React.createElement(Radio_1.default, { onClick: () => handleDefaultEntitlementChange('ReadOnly'), checked: defaultEntitlement === 'ReadOnly', mr: 3 }, "Read Only"),
+            React.createElement(Radio_1.default, { onClick: () => handleDefaultEntitlementChange('Full'), checked: defaultEntitlement === 'Full', className: "twa:mr-3" }, "Visible"),
+            React.createElement(Radio_1.default, { onClick: () => handleDefaultEntitlementChange('ReadOnly'), checked: defaultEntitlement === 'ReadOnly', className: "twa:mr-3" }, "Read Only"),
             React.createElement(Radio_1.default, { onClick: () => handleDefaultEntitlementChange('Hidden'), checked: defaultEntitlement === 'Hidden' }, "Hidden"))));
 };
 const EntitlementsForm = (props) => {
     let abOptions = props.adaptableOptions;
-    return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column", p: 2 },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:p-2 twa:h-full" },
         React.createElement(DefaultEntitlementForm, { ...props }),
         React.createElement(EntitlementsListForm, { ...props })));
 };

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/GridOptionsForm.js

@@ -5,12 +5,12 @@ const React = tslib_1.__importStar(require("react"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../../components/Flex");
 const GridOptionsForm = (props) => {
     let { gridOptions } = props;
-    return (React.createElement(rebass_1.Box, { p: 2 },
+    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
         React.createElement(HelpBlock_1.default, null, "Grid Options"),
-        React.createElement(FormLayout_1.default, { margin: 2, columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
+        React.createElement(FormLayout_1.default, { className: "twa:m-2", columns: [{ name: 'children' }, { name: 'label', style: { textAlign: 'start' } }] },
             React.createElement(FormLayout_1.FormRow, { label: "Enable Cell Selection" },
                 React.createElement(CheckBox_1.CheckBox, { checked: !!gridOptions.cellSelection, onChange: (enableCellSelection) => {
                         gridOptions = { ...gridOptions, cellSelection: enableCellSelection };

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsSidebarForm.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UIOptionsSidebarForm = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const CheckBox_1 = require("../../../../components/CheckBox");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
+const Flex_1 = require("../../../../components/Flex");
 const ALL_SIDEBAR_OPTIONS = ['columns', 'filters', 'adaptable'];
 const prepareSidebarDef = (sideBar) => {
     sideBar = sideBar;
@@ -39,7 +39,7 @@ const UIOptionsSidebarForm = (props) => {
     const { gridOptions, onChange } = props;
     const sideBar = prepareSidebarDef(gridOptions.sideBar);
     const renderSidebarCheckbox = (sidebarName) => {
-        return (React.createElement(CheckBox_1.CheckBox, { mr: 3, key: sidebarName, checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check) }, StringExtensions_1.default.Humanize(sidebarName)));
+        return (React.createElement(CheckBox_1.CheckBox, { className: "twa:mr-3", key: sidebarName, checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check) }, StringExtensions_1.default.Humanize(sidebarName)));
     };
     const handleToolpanelsChange = (panelName, check) => {
         let newPanels = sideBar?.toolPanels ?? [];
@@ -77,10 +77,10 @@ const UIOptionsSidebarForm = (props) => {
         };
         props.onChange(newGridOptions);
     };
-    return (React.createElement(rebass_1.Box, null,
+    return (React.createElement(Flex_1.Box, null,
         React.createElement(HelpBlock_1.default, null, "Tool Panels"),
-        React.createElement(rebass_1.Box, { m: 2 },
-            React.createElement(rebass_1.Flex, { mb: 2 }, ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox)),
+        React.createElement(Flex_1.Box, { className: "twa:m-2" },
+            React.createElement(Flex_1.Flex, { className: "twa:mb-2" }, ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox)),
             React.createElement(FormLayout_1.default, { columns: [{ name: 'label' }, { name: 'children' }] },
                 React.createElement(FormLayout_1.FormRow, { label: "Position" },
                     React.createElement(DropdownButton_1.default, { columns: ['label'], items: [

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UIOptionsStatusbarForm.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UIOptionsStatusbarForm = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const ModuleManager_1 = require("../../../../components/DragAndDropContext/ModuleManager");
 const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
@@ -11,6 +10,7 @@ const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"))
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
 const FormBox_1 = require("../Components/FormBox");
+const Flex_1 = require("../../../../components/Flex");
 const UIOptionsStatusbarForm = (props) => {
     const allPanels = props.gridOptions?.statusBar?.statusPanels ?? [];
     const panelIdtoPanel = (panelsIds, align) => panelsIds.map((panelId) => {
@@ -94,19 +94,19 @@ const UIOptionsStatusbarForm = (props) => {
             },
         });
     };
-    return (React.createElement(rebass_1.Box, null,
+    return (React.createElement(Flex_1.Box, null,
         React.createElement(HelpBlock_1.default, null, "Status Bar"),
-        React.createElement(rebass_1.Box, { p: 2 },
+        React.createElement(Flex_1.Box, { className: "twa:p-2" },
             React.createElement(FormBox_1.NocodeWizardFormBox, null,
-                React.createElement(rebass_1.Box, { as: "b" }, "Create Adaptable Statusbar Panel"),
-                React.createElement(FormLayout_1.default, { mt: 2 },
+                React.createElement(Flex_1.Box, { as: "b" }, "Create Adaptable Statusbar Panel"),
+                React.createElement(FormLayout_1.default, { className: "twa:mt-2" },
                     React.createElement(FormLayout_1.FormRow, { label: "Panel Name" },
                         React.createElement(Input_1.default, { value: adaptablePanelTitle, placeholder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) })),
                     React.createElement(FormLayout_1.FormRow, { label: "Align" },
                         React.createElement(DropdownButton_1.default, { columns: ['label'], items: alignOptions }, alignOptions.find((option) => option.value === adaptablePanelAlign)?.label)),
                     React.createElement(FormLayout_1.FormRow, { label: "" },
                         React.createElement(SimpleButton_1.default, { disabled: !isAdaptablePanelTitleAvailable, onClick: handleNewAdaptablePanel, icon: "plus", variant: "raised" }, "Add"),
-                        !isAdaptablePanelTitleAvailable && (React.createElement(rebass_1.Box, { mt: 2, color: "var(--ab-color-error)" }, "Adaptable panel name must be unique."))))),
+                        !isAdaptablePanelTitleAvailable && (React.createElement(Flex_1.Box, { className: "twa:mt-2 twa:text-error" }, "Adaptable panel name must be unique."))))),
             React.createElement(ModuleManager_1.ModuleManager, { permittedActions: {
                     createTab: false,
                     dragAndDropTab: false,

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/UIOptions/UiOptionsForm.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UIElementsForm = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Tabs_1 = require("../../../../components/Tabs");
 const UIOptionsSidebarForm_1 = require("./UIOptionsSidebarForm");
 const UIOptionsStatusbarForm_1 = require("./UIOptionsStatusbarForm");
+const Flex_1 = require("../../../../components/Flex");
 const UIElementsForm = (props) => {
-    return (React.createElement(rebass_1.Box, { p: 2 },
+    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Tool Panel"),
             React.createElement(Tabs_1.Tabs.Tab, null, "Status Bar"),