@adaptabletools/adaptable-cjs 21.2.1 → 22.0.0-canary.0

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

@@ -4,7 +4,6 @@ exports.StyledColumnWizard = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const rebass_1 = require("rebass");
 const react_redux_1 = require("react-redux");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
@@ -17,6 +16,7 @@ const StyledColumnWizardSettingsSection_1 = require("./StyledColumnWizardSetting
 const StyledColumnSparklineSettingsSection_1 = require("./StyledColumnSparklineSettingsSection");
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const StyledColumnBadgeSection_1 = require("./StyledColumnBadgeSection");
+const Flex_1 = require("../../../components/Flex");
 const StyledColumnWizard = (props) => {
     const data = props.data ?? props.popupParams?.value;
     const popupDefaultCurrentSectionName = props?.popupParams?.config?.defaultCurrentSectionName ?? undefined;
@@ -56,7 +56,7 @@ const StyledColumnWizard = (props) => {
         details: 'Apply Additional Settings',
         renderSummary: StyledColumnWizardSettingsSection_1.renderStyledColumnWizardSettingsSummary,
         render: () => {
-            return (React.createElement(rebass_1.Box, { padding: 2 },
+            return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                 React.createElement(StyledColumnWizardSettingsSection_1.StyledColumnWizardSettingsSection, { onChange: setStyledColumn })));
         },
         title: 'Settings',
@@ -65,7 +65,7 @@ const StyledColumnWizard = (props) => {
     if (styledColumn.SparklineStyle) {
         specificSteps.push({
             title: 'Settings',
-            render: () => (React.createElement(rebass_1.Box, { p: 2 },
+            render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                 React.createElement(StyledColumnSparklineSettingsSection_1.StyledColumnSparklineSettingsSection, { onChange: setStyledColumn }))),
         });
     }
@@ -74,7 +74,7 @@ const StyledColumnWizard = (props) => {
             details: 'Create the Style to apply',
             renderSummary: StyledColumnWizardStyleSection_1.renderStyledColumnStyleSummary,
             render: () => {
-                return (React.createElement(rebass_1.Box, { padding: 2 },
+                return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(StyledColumnWizardStyleSection_1.StyledColumnWizardStyleSection, { onChange: setStyledColumn })));
             },
             title: 'Style',
@@ -111,7 +111,7 @@ const StyledColumnWizard = (props) => {
                 return true;
             },
             renderSummary: () => (0, StyledColumnBadgeSection_1.renderBadgeSummary)(styledColumn),
-            render: () => (React.createElement(rebass_1.Box, { p: 2 },
+            render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                 React.createElement(StyledColumnBadgeSection_1.StyledColumnBadgeSection, { onChange: setStyledColumn }))),
         });
         specificSteps.push(AdditionalSettingSection);
@@ -130,7 +130,7 @@ const StyledColumnWizard = (props) => {
                 renderSummary: StyledColumnWizardColumnSection_1.renderStyledColumnColumnSummary,
                 details: 'Select the Column where the Style will be applied',
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2, style: { height: '100%' } },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                         React.createElement(StyledColumnWizardColumnSection_1.StyledColumnWizardColumnSection, { isNew: props.isNew, onChange: setStyledColumn })));
                 },
                 title: 'Column',
@@ -140,7 +140,7 @@ const StyledColumnWizard = (props) => {
                 details: 'Select Format Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setStyledColumn }))),
                 renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
             },
@@ -149,7 +149,7 @@ const StyledColumnWizard = (props) => {
                 title: 'Summary',
                 details: 'Review your Styled Column',
                 render: () => {
-                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                         React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
                 },
             },

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

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnWizardColumnSection = exports.isValidStyledColumnColumn = exports.renderStyledColumnColumnSummary = 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 Tag_1 = require("../../../components/Tag");
 const ColumnSelector_1 = require("../../Components/ColumnSelector");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Flex_1 = require("../../../components/Flex");
 const renderStyledColumnColumnSummary = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    return (React.createElement(rebass_1.Text, { pr: 2, py: 2 },
+    return (React.createElement(Flex_1.Box, { className: "twa:pr-2 twa:py-2" },
         "Styled Column column:",
         ' ',
         React.createElement(Tag_1.Tag, null, data.ColumnId

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

@@ -3,26 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnWizardSettingsSection = exports.renderStyledColumnWizardSettingsSummary = 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 FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Tabs_1 = require("../../../components/Tabs");
 const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Flex_1 = require("../../../components/Flex");
 const renderStyledColumnWizardSettingsSummary = (data) => {
     const badgeStyle = data;
-    return (React.createElement(rebass_1.Box, { padding: 2 },
-        React.createElement(rebass_1.Text, { mt: 3 },
+    return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
+        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Data Rows ",
             React.createElement(Tag_1.Tag, null, badgeStyle.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
         ' ',
-        React.createElement(rebass_1.Text, { mt: 3 },
+        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Group Rows ",
             React.createElement(Tag_1.Tag, null, badgeStyle.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
-        React.createElement(rebass_1.Text, { mt: 3 },
+        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Summary Rows ",
             React.createElement(Tag_1.Tag, null, badgeStyle.RowScope?.ExcludeSummaryRows ? 'no' : 'yes')),
-        React.createElement(rebass_1.Text, { mt: 3 },
+        React.createElement(Flex_1.Box, { className: "twa:mt-3" },
             "Total Rows ",
             React.createElement(Tag_1.Tag, null, badgeStyle.RowScope?.ExcludeTotalRows ? 'no' : 'yes'))));
 };
@@ -80,28 +80,28 @@ const StyledColumnWizardSettingsSection = (props) => {
     return (React.createElement(Tabs_1.Tabs, null,
         React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
         React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(rebass_1.Flex, { flexDirection: "row" },
+            React.createElement(Flex_1.Flex, { flexDirection: "row" },
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Exclude Data Rows:" },
-                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: 
+                        React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-data-rows-checkbox", className: "twa:mr-2", checked: 
                                 // @ts-ignore
-                                data.BadgeStyle.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
+                                data.BadgeStyle.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Exclude Group Rows:" },
-                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: 
+                        React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                            React.createElement(CheckBox_1.CheckBox, { className: "twa:mr-2", "data-name": "exclude-grouped-rows-checkbox", checked: 
                                 // @ts-ignore
-                                data.BadgeStyle.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
+                                data.BadgeStyle.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged }))),
                     React.createElement(FormLayout_1.FormRow, { label: "Exclude Row Summaries:" },
-                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: 
+                        React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-summary-rows-checkbox", className: "twa:mr-2", checked: 
                                 // @ts-ignore
-                                data.BadgeStyle.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))),
+                                data.BadgeStyle.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged }))),
                     ' ',
                     React.createElement(FormLayout_1.FormRow, { label: "Exclude Total Rows:" },
-                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: 
+                        React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "exclude-total-rows-checkbox", className: "twa:mr-2", checked: 
                                 // @ts-ignore
-                                data.BadgeStyle.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, mr: 2 }))))))));
+                                data.BadgeStyle.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged }))))))));
 };
 exports.StyledColumnWizardSettingsSection = StyledColumnWizardSettingsSection;

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

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PercentBarColumnComparisonPreview = 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 PercentBarStylePreview_1 = require("./PercentBarStylePreview");
+const Flex_1 = require("../../../../../components/Flex");
 const PercentBarColumnComparisonPreview = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const columnComparison = props.percentBarStyle.ColumnComparison;
-    return (React.createElement(rebass_1.Flex, { alignItems: "center", mr: 3 },
-        React.createElement(rebass_1.Box, { flexBasis: 120, mr: 3 },
+    return (React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:mr-3" },
+        React.createElement(Flex_1.Box, { className: "twa:basis-[120px] twa:mr-3" },
             isNaN(Number(columnComparison.MinValue))
                 ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MinValue)) + ']'
                 : columnComparison.MinValue,

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

@@ -3,21 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PercentBarPreview = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const PercentBarStylePreview_1 = require("./PercentBarStylePreview");
+const Flex_1 = require("../../../../../components/Flex");
 const PercentBarPreview = (props) => {
     let postfix = '';
     if (props.percentBarStyle.RangeValueType === 'Percentage') {
         postfix = '%';
     }
-    return (React.createElement(React.Fragment, null, props.percentBarStyle.CellRanges.map((range, i) => (React.createElement(rebass_1.Flex, { key: i, alignItems: "stretch", mr: 3, mb: 2 },
-        React.createElement(rebass_1.Flex, { flexBasis: 120, alignItems: "center", mr: 3 },
+    return (React.createElement(React.Fragment, null, props.percentBarStyle.CellRanges.map((range, i) => (React.createElement(Flex_1.Flex, { key: i, alignItems: "stretch", className: "twa:mr-3 twa:mb-2" },
+        React.createElement(Flex_1.Flex, { className: "twa:basis-[120px] twa:mr-3", alignItems: "center" },
             range.Min,
             postfix,
             " to ",
             range.Max,
-            postfix,
-            ' '),
+            postfix),
         React.createElement(PercentBarStylePreview_1.PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText }))))));
 };
 exports.PercentBarPreview = PercentBarPreview;

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PercentBarStylePreview = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
+const Flex_1 = require("../../../../../components/Flex");
 const getText = (options) => {
     let text = '';
     if (options && options.includes('CellValue')) {
@@ -17,9 +17,9 @@ const getText = (options) => {
 const PercentBarStylePreview = (props) => {
     const cellText = getText(props.cellText);
     const tooltip = getText(props.toolTipText);
-    return (React.createElement(rebass_1.Box, { title: tooltip, flex: 1 },
-        React.createElement(rebass_1.Flex, { height: cellText ? 8 : 18, backgroundColor: props.backgroundColor, flex: 1 },
-            React.createElement(rebass_1.Box, { flexBasis: "50%", style: { background: props.barBackgroundColor } })),
-        cellText && React.createElement(rebass_1.Box, { fontSize: 3 }, cellText)));
+    return (React.createElement(Flex_1.Box, { title: tooltip, className: "twa:flex-1" },
+        React.createElement(Flex_1.Flex, { style: { backgroundColor: props.backgroundColor }, className: `twa:flex-1 ${cellText ? 'twa:h-[8px]' : 'twa:h-[18px]'}` },
+            React.createElement(Flex_1.Box, { className: "twa:basis-[50%]", style: { background: props.barBackgroundColor } })),
+        cellText && React.createElement(Flex_1.Box, { className: "twa:text-3" }, cellText)));
 };
 exports.PercentBarStylePreview = PercentBarStylePreview;

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

@@ -3,23 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnBadgePreview = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const GeneralConstants_1 = require("../../../../../Utilities/Constants/GeneralConstants");
 const AdaptableContext_1 = require("../../../../AdaptableContext");
 const Badge_1 = require("../../../../Components/Badge");
+const Flex_1 = require("../../../../../components/Flex");
 const StyledColumnBadgePreview = ({ data }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const badgeStyle = data.BadgeStyle;
     if (!badgeStyle || badgeStyle.Badges.length === 0) {
         return React.createElement("div", null, "No Badges Defined");
     }
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column" }, badgeStyle.Badges.map((badge, index) => {
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column" }, badgeStyle.Badges.map((badge, index) => {
         const badgeValue = badge.IconOnly
             ? ''
             : adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId) === 'number'
                 ? GeneralConstants_1.DEFAULT_INTEGER_DISPLAY_VALUE
                 : GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
-        return (React.createElement(rebass_1.Box, { mb: 1, key: index },
+        return (React.createElement(Flex_1.Box, { className: "twa:mb-1", key: index },
             React.createElement(Badge_1.Badge, { icon: badge.Icon, adaptableStyle: badge.Style, iconPosition: badge.IconPosition }, badgeValue)));
     })));
 };

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

@@ -3,16 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnBadgeSettings = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Tag_1 = require("../../../../../components/Tag");
 const AdaptableContext_1 = require("../../../../AdaptableContext");
+const Flex_1 = require("../../../../../components/Flex");
 const StyledColumnBadgeSettings = ({ data }) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const badgeStyle = data.BadgeStyle;
     if (!badgeStyle || badgeStyle.Badges.length === 0) {
         return React.createElement("div", null, "No Badges Defined");
     }
-    return (React.createElement(rebass_1.Flex, { flexDirection: "column" }, badgeStyle.Badges.map((badge, index) => {
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column" }, badgeStyle.Badges.map((badge, index) => {
         let ruleString = 'No Rule';
         if (badge.Predicate) {
             ruleString = adaptable.api.predicateApi.predicateToString(badge.Predicate);
@@ -23,12 +23,10 @@ const StyledColumnBadgeSettings = ({ data }) => {
         const iconOnly = badge.Icon && badge.IconOnly;
         const hasIconPosition = badge.Icon && badge.IconPosition;
         const iconPosition = hasIconPosition ? 'Icon Position: ' + badge.IconPosition : '';
-        return (React.createElement(rebass_1.Box, { mt: 2, mb: 2, key: index },
+        return (React.createElement(Flex_1.Box, { className: "twa:my-2", key: index },
             React.createElement(Tag_1.Tag, null, ruleString),
-            iconOnly && React.createElement(Tag_1.Tag, { ml: 2 }, 'Icon Only'),
-            ' ',
-            hasIconPosition && React.createElement(Tag_1.Tag, { ml: 2 }, iconPosition),
-            ' '));
+            iconOnly && React.createElement(Tag_1.Tag, { className: "twa:ml-2" }, 'Icon Only'),
+            hasIconPosition && React.createElement(Tag_1.Tag, { className: "twa:ml-2" }, iconPosition)));
     })));
 };
 exports.StyledColumnBadgeSettings = StyledColumnBadgeSettings;

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnWizardStyleSection = exports.renderStyledColumnStyleSummary = exports.renderFormatColumnStyleWizardSummary = 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 ErrorBox_1 = tslib_1.__importDefault(require("../../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
@@ -17,6 +16,7 @@ const PercentBarColumnComparisonPreview_1 = require("./Components/PercentBarColu
 const PercentBarRangesPreview_1 = require("./Components/PercentBarRangesPreview");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
+const Flex_1 = require("../../../../components/Flex");
 const renderFormatColumnStyleWizardSummary = (data) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     return (0, exports.renderStyledColumnStyleSummary)(data, api);
@@ -27,22 +27,21 @@ const getRanges = (ranges, rangeValueType) => {
     if (rangeValueType === 'Percentage') {
         postfix = '%';
     }
-    return ranges.map((r, i) => (React.createElement(rebass_1.Flex, { key: i, alignItems: "center", mr: 3 },
-        React.createElement(rebass_1.Box, { mr: 1 },
+    return ranges.map((r, i) => (React.createElement(Flex_1.Flex, { key: i, alignItems: "center", className: "twa:mr-3" },
+        React.createElement(Flex_1.Box, { className: "twa:mr-1" },
             r.Min,
             postfix,
             " to ",
             r.Max,
-            postfix,
-            ' '),
+            postfix),
         React.createElement(StyleVisualItem_1.StyleVisualItem, { Style: {
                 BackColor: r.Color,
                 ForeColor: r.Color,
             } }))));
 };
 const getColumnComparison = (columnComparison, api) => {
-    return (React.createElement(rebass_1.Flex, { key: 'cc', alignItems: "center", mr: 3 },
-        React.createElement(rebass_1.Box, { mr: 1 },
+    return (React.createElement(Flex_1.Flex, { key: 'cc', alignItems: "center", className: "twa:mr-3" },
+        React.createElement(Flex_1.Box, { className: "twa:mr-1" },
             "Min Value:",
             ' ',
             isNaN(Number(columnComparison.MinValue))
@@ -282,15 +281,15 @@ const StyledColumnWizardStyleSection = (props) => {
         props.onChange(newStyledColumn);
     }, [data]);
     const disabled = !data.ColumnId;
-    return (React.createElement(rebass_1.Box, null,
+    return (React.createElement(Flex_1.Box, null,
         data?.GradientStyle && (React.createElement(RangesComponent_1.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_1.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_1.default, { marginLeft: 2, marginTop: 2 },
+            React.createElement(FormLayout_1.default, { className: "twa:mt-2 twa:ml-2" },
                 React.createElement(FormLayout_1.FormRow, { label: "Cell Display:" },
-                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: data.PercentBarStyle?.CellText?.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-2", checked: data.PercentBarStyle?.CellText?.includes('CellValue'), onChange: (checked) => onPercentBarCellTextCellValueChanged(checked) }, "Cell Value"),
                     ' ',
-                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: data?.PercentBarStyle?.CellText?.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: data?.PercentBarStyle?.CellText?.includes('PercentageValue'), onChange: (checked) => onPercentBarCellTextPercentValueChanged(checked) },
                         "Percent Value",
                         ' '),
                     ' '),
@@ -310,16 +309,16 @@ const StyledColumnWizardStyleSection = (props) => {
                             },
                         ] }, data.PercentBarStyle?.CellTextPosition ?? 'Below')),
                 React.createElement(FormLayout_1.FormRow, { label: "ToolTip Display:" },
-                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 2, checked: data?.PercentBarStyle?.ToolTipText?.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-2", checked: data?.PercentBarStyle?.ToolTipText?.includes('CellValue'), onChange: (checked) => onPercentBarToolTipTextCellValueChanged(checked) }, "Cell Value"),
                     ' ',
-                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, marginLeft: 3, checked: data?.PercentBarStyle?.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
+                    React.createElement(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: data?.PercentBarStyle?.ToolTipText?.includes('PercentageValue'), onChange: (checked) => onPercentBarToolTipTextPercentValueChanged(checked) },
                         "Percent Value",
                         ' '),
                     ' '),
                 React.createElement(FormLayout_1.FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}` },
-                    React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
-                        React.createElement(CheckBox_1.CheckBox, { disabled: disabled, checked: !!data.PercentBarStyle?.BackColor, onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), mr: 2 }),
+                    React.createElement(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2" },
+                        React.createElement(CheckBox_1.CheckBox, { disabled: disabled, checked: !!data.PercentBarStyle?.BackColor, onChange: (checked) => onUsePercentStyleColorCheckChanged(checked), className: "twa:mr-2" }),
                         data.PercentBarStyle?.BackColor !== undefined && (React.createElement(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: data.PercentBarStyle?.BackColor, onChange: (x) => onForeColorSelectChange(x) }))))))),
-        !data.ColumnId && React.createElement(ErrorBox_1.default, { mt: 2 }, "You need to select a column before styling.")));
+        !data.ColumnId && (React.createElement(ErrorBox_1.default, { className: "twa:mt-2" }, "You need to select a column before styling."))));
 };
 exports.StyledColumnWizardStyleSection = StyledColumnWizardStyleSection;

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

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnWizardTypeSection = exports.renderStyledColumnTypeSummary = 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 Tag_1 = require("../../../components/Tag");
 const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
 const AdaptableContext_1 = require("../../AdaptableContext");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const TypeRadio_1 = require("../../Wizard/TypeRadio");
+const Flex_1 = require("../../../components/Flex");
 const renderStyledColumnTypeSummary = (data) => {
     let type = null;
     if (data.GradientStyle) {
@@ -24,7 +24,7 @@ const renderStyledColumnTypeSummary = (data) => {
     else if (data.BadgeStyle) {
         type = 'Badge';
     }
-    return (React.createElement(rebass_1.Text, { pr: 2, py: 2 },
+    return (React.createElement(Flex_1.Box, { className: "twa:pr-2 twa:py-2" },
         "Type ",
         React.createElement(Tag_1.Tag, null, type)));
 };
@@ -63,8 +63,8 @@ const StyledColumnWizardTypeSection = (props) => {
         newStyledColumn.ColumnId = null;
         props.onChange(newStyledColumn);
     };
-    return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column", "data-name": "styled-column-type" },
-        React.createElement(Tabs_1.Tabs, { autoFocus: false, padding: 2 },
+    return (React.createElement(Flex_1.Flex, { flexDirection: "column", "data-name": "styled-column-type", className: "twa:h-full" },
+        React.createElement(Tabs_1.Tabs, { autoFocus: false, className: "twa:p-2" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Type"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(TypeRadio_1.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

@@ -4,10 +4,10 @@ exports.SystemStatusEntityRow = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const AdaptableObjectRow_1 = require("../Components/AdaptableObjectRow");
-const rebass_1 = require("rebass");
 const UIHelper_1 = tslib_1.__importDefault(require("../UIHelper"));
 const Helper_1 = require("../../Utilities/Helpers/Helper");
 const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
+const Flex_1 = require("../../components/Flex");
 class SystemStatusEntityRow extends React.Component {
     render() {
         let systemStatus = this.props
@@ -15,12 +15,12 @@ class SystemStatusEntityRow extends React.Component {
         let messageTypeColor = UIHelper_1.default.getColorByMessageType(systemStatus?.statusType ?? 'Success');
         let colItems = (0, Helper_1.cloneObject)(this.props.colItems);
         colItems[0].Content = systemStatus ? (React.createElement("details", null,
-            React.createElement(rebass_1.Flex, { title: systemStatus.statusFurtherInformation ? 'Click to see more' : '', className: (0, join_1.default)('ab-DashboardToolbar__SystemStatus__text', systemStatus.statusFurtherInformation &&
-                    'ab-DashboardToolbar__SystemStatus__text--expandable'), backgroundColor: messageTypeColor, alignItems: "center", as: "summary" },
+            React.createElement(Flex_1.Flex, { title: systemStatus.statusFurtherInformation ? 'Click to see more' : '', className: (0, join_1.default)('ab-DashboardToolbar__SystemStatus__text', systemStatus.statusFurtherInformation &&
+                    'ab-DashboardToolbar__SystemStatus__text--expandable'), style: { backgroundColor: messageTypeColor }, alignItems: "center", as: "summary" },
                 systemStatus.statusMessage,
                 " ",
                 systemStatus.statusFurtherInformation ? '...' : ''),
-            systemStatus.statusFurtherInformation ? (React.createElement(rebass_1.Box, { className: "ab-DashboardToolbar__SystemStatus__further-information", margin: 2 }, systemStatus.statusFurtherInformation)) : null)) : null;
+            systemStatus.statusFurtherInformation ? (React.createElement(Flex_1.Box, { className: "ab-DashboardToolbar__SystemStatus__further-information twa:m-2" }, systemStatus.statusFurtherInformation)) : null)) : null;
         colItems[1].Content = systemStatus.timestamp.toLocaleString();
         return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { colItems: colItems });
     }

package/src/View/SystemStatus/SystemStatusPopup.js

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const InternalRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/InternalRedux"));
-const rebass_1 = require("rebass");
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
 const AdaptableObjectCollection_1 = require("../Components/AdaptableObjectCollection");
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
@@ -13,6 +12,7 @@ const SystemStatusEntityRow_1 = require("./SystemStatusEntityRow");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
 const Enums_1 = require("../../AdaptableState/Common/Enums");
+const Flex_1 = require("../../components/Flex");
 const colItems = [
     { Content: 'Message', Size: 10 },
     { Content: 'Timestamp', Size: 3 },
@@ -31,7 +31,7 @@ class SystemStatusPopupComponent extends React.Component {
             const accessLevel = AdaptableHelper_1.default.getAccessLevelForObject(smi, this.props.accessLevel);
             return (React.createElement(SystemStatusEntityRow_1.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_1.PopupPanel, { button: clearAllButton, headerText: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() }, ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.SystemStatusMessages) && (React.createElement(rebass_1.Box, { className: "ab-SystemStatus-Popup-List", padding: 2 },
+        return (React.createElement(PopupPanel_1.PopupPanel, { button: clearAllButton, headerText: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed() }, ArrayExtensions_1.default.IsNotNullOrEmpty(this.props.SystemStatusMessages) && (React.createElement(Flex_1.Box, { className: "ab-SystemStatus-Popup-List twa:p-2" },
             React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { colItems: colItems, items: messages })))));
     }
 }

package/src/View/SystemStatus/SystemStatusStatusBarContent.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SystemStatusStatusBarContent = 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 getStatusItemStyle_1 = require("./Utilities/getStatusItemStyle");
+const Flex_1 = require("../../components/Flex");
 const SystemStatusStatusBarContent = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const currentSystemStatusMessageInfo = adaptable.api.systemStatusApi.getCurrentSystemStatusMessageInfo();
     const { color, background } = (0, getStatusItemStyle_1.getStatusItemStyle)(currentSystemStatusMessageInfo);
     const message = currentSystemStatusMessageInfo?.statusMessage;
-    return (React.createElement(rebass_1.Box, { style: { borderRadius: 'var(--ab__border-radius)' }, padding: 1, color: message && color, backgroundColor: message && background }, message || '0 Messages'));
+    return (React.createElement(Flex_1.Box, { style: { color: message ? color : '', backgroundColor: message ? background : '' }, className: "twa:p-1 twa:rounded-standard" }, message || '0 Messages'));
 };
 exports.SystemStatusStatusBarContent = SystemStatusStatusBarContent;

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SystemStatusViewPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const react_redux_1 = require("react-redux");
 const getStatusItemStyle_1 = require("./Utilities/getStatusItemStyle");
+const Flex_1 = require("../../components/Flex");
 class SystemStatusViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -15,8 +15,8 @@ class SystemStatusViewPanelComponent extends React.Component {
         const { color, background } = (0, getStatusItemStyle_1.getStatusItemStyle)(currentSystemStatusMessageInfo);
         const message = currentSystemStatusMessageInfo?.statusMessage;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(rebass_1.Flex, { alignItems: "stretch", className: `ab-${elementType}__SystemStatus__wrap` },
-            React.createElement(rebass_1.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')));
+        return (React.createElement(Flex_1.Flex, { alignItems: "stretch", className: `ab-${elementType}__SystemStatus__wrap` },
+            React.createElement(Flex_1.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

@@ -3,17 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SharedEntityDependencies = exports.Dependencies = 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 AdaptableContext_1 = require("../AdaptableContext");
 const AdaptableObjectList_1 = require("../Components/AdaptableObjectList/AdaptableObjectList");
+const Flex_1 = require("../../components/Flex");
 const Dependencies = (props) => {
     const adaptable = (0, AdaptableContext_1.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(rebass_1.Box, { as: "ul", padding: 0, key: sharedEntity.Uuid, className: "ab-Shared-Entity-Shared-Object", mb: 2 },
+        return (React.createElement(Flex_1.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(AdaptableObjectList_1.AdaptableObjectListItem, { deleteTooltip: 'Cannot delete dependencies.', deleteDisabled: true, module: module, data: itemView })));
     })));
 };
@@ -21,9 +21,9 @@ exports.Dependencies = Dependencies;
 const SharedEntityDependencies = (props) => {
     const [isExpanded, setIsExpanded] = React.useState(false);
     return (React.createElement(React.Fragment, null,
-        React.createElement(rebass_1.Flex, null,
-            React.createElement(rebass_1.Box, { mr: 3, className: 'ab-Adaptable-Object-List__Item__label' }, "Dependencies"),
-            React.createElement(rebass_1.Box, { mb: 2, mt: 2 }, isExpanded ? (React.createElement(SimpleButton_1.default, { onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton_1.default, { onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand")))),
+        React.createElement(Flex_1.Flex, null,
+            React.createElement(Flex_1.Box, { className: 'ab-Adaptable-Object-List__Item__label twa:mr-3' }, "Dependencies"),
+            React.createElement(Flex_1.Box, { className: "twa:my-2" }, isExpanded ? (React.createElement(SimpleButton_1.default, { onClick: () => setIsExpanded(false), icon: "arrow-up" }, "Collapse")) : (React.createElement(SimpleButton_1.default, { onClick: () => setIsExpanded(true), icon: "arrow-down" }, "Expand")))),
         isExpanded && React.createElement(exports.Dependencies, { sharedEntity: props.data })));
 };
 exports.SharedEntityDependencies = SharedEntityDependencies;