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

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import DropdownButton from '../../../components/DropdownButton';
 import ErrorBox from '../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
@@ -17,6 +16,7 @@ import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent'
 import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../Utilities/Constants/GeneralConstants';
 import { Accordion } from '../../../components/Accordion';
 import { CheckBox } from '../../../components/CheckBox';
+import { Flex, Box } from '../../../components/Flex';
 const BadgeEditor = (props) => {
     const { api } = useOnePageAdaptableWizardContext();
     const { badge, columnId, onChange } = props;
@@ -26,13 +26,13 @@ const BadgeEditor = (props) => {
     const previewValue = dataType === 'number' || dataType == 'numberArray'
         ? DEFAULT_INTEGER_DISPLAY_VALUE
         : DEFAULT_STRING_DISPLAY_VALUE;
-    return (React.createElement(Flex, { className: "ab-Badge-Definition-Editor", mb: 15, p: 3 },
-        React.createElement(Box, { flex: 1 },
+    return (React.createElement(Flex, { className: "ab-Badge-Definition-Editor twa:mb-[15px] twa:p-3" },
+        React.createElement(Box, { className: "twa:flex-1" },
             React.createElement(FormLayout, null,
                 React.createElement(FormRow, { label: "Preview" },
                     React.createElement(Badge, { adaptableStyle: badge.Style, icon: badge.Icon, iconPosition: badge.IconPosition }, previewValue)),
                 React.createElement(FormRow, { label: "Style" },
-                    React.createElement(HelpBlock, { fontSize: 2, mb: 1, mt: 2 }, "Select the Style for the Badge"),
+                    React.createElement(HelpBlock, { className: "twa:text-2 twa:mb-1 twa:mt-2" }, "Select the Style for the Badge"),
                     ' ',
                     React.createElement(Accordion, { title: "Edit Badge Style" },
                         React.createElement(StyleComponent, { showFontSizeAs: "radio", headless: true, hidePreview: true, api: api, Style: badge.Style ?? {}, UpdateStyle: (Style) => {
@@ -42,7 +42,7 @@ const BadgeEditor = (props) => {
                                 });
                             } }))),
                 React.createElement(FormRow, { label: 'Predicate' }, columnId ? (React.createElement(React.Fragment, null,
-                    React.createElement(HelpBlock, { fontSize: 2, mb: 1, mt: 2 }, "Create (optional) Rule for when the Badge is displayed; if no Rule provided Badge will always display (unless overriden by another Rule)"),
+                    React.createElement(HelpBlock, { className: "twa:text-2 twa:mb-1 twa:mt-2" }, "Create (optional) Rule for when the Badge is displayed; if no Rule provided Badge will always display (unless overriden by another Rule)"),
                     React.createElement(PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
                             onChange({
                                 ...badge,
@@ -53,7 +53,7 @@ const BadgeEditor = (props) => {
                             Predicate: undefined,
                         }) }))) : (React.createElement(ErrorBox, null, "Select a column first"))),
                 React.createElement(FormRow, { label: "Icon" },
-                    React.createElement(HelpBlock, { fontSize: 2, mb: 1, mt: 2 }, "Select (optional) Icon (and Icon position) to display in the Badge"),
+                    React.createElement(HelpBlock, { className: "twa:text-2 twa:mb-1 twa:mt-2" }, "Select (optional) Icon (and Icon position) to display in the Badge"),
                     ' ',
                     // for now, only show for system icons the
                     !badge.Icon || 'name' in badge.Icon ? (React.createElement(AdaptableIconSelector, { value: badge?.Icon && 'name' in badge?.Icon ? badge.Icon.name : undefined, onChange: (iconName) => {
@@ -87,7 +87,7 @@ const BadgeEditor = (props) => {
                     React.createElement(CheckBox, { checked: badge.IconOnly, 
                         // onClick=()=> onChange({ ...badge, IconPosition: 'End' })
                         onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }))))),
-        React.createElement(Box, { justifyContent: "end" },
+        React.createElement(Flex, { className: "twa:justify-end" },
             React.createElement(SimpleButton, { icon: "delete", onClick: props.onDelete }))));
 };
 export const renderBadgeSummary = (styledColumn) => {
@@ -99,7 +99,7 @@ export const StyledColumnBadgeSection = (props) => {
     return (React.createElement(Tabs, { style: { height: '100%' } },
         React.createElement(Tabs.Tab, null, "Badges"),
         React.createElement(Tabs.Content, null,
-            React.createElement(Flex, { justifyContent: "end" },
+            React.createElement(Flex, { className: "twa:justify-end" },
                 React.createElement(SimpleButton, { icon: "plus", onClick: () => {
                         props.onChange({
                             ...data,
@@ -108,7 +108,7 @@ export const StyledColumnBadgeSection = (props) => {
                             },
                         });
                     } }, "Add Badge")),
-            React.createElement(Flex, { flexDirection: "column", p: 2 }, badges.map((badge, index) => {
+            React.createElement(Flex, { flexDirection: "column", className: "twa:p-2" }, badges.map((badge, index) => {
                 const handleEditBadge = (badge) => {
                     const newBadges = [...badges];
                     newBadges[index] = badge;

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import { Select } from '../../../components/Select';
 import { Tabs } from '../../../components/Tabs';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
@@ -8,6 +7,7 @@ import { Tag } from '../../../components/Tag';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { ColorPicker } from '../../../components/ColorPicker';
 import { CheckBox } from '../../../components/CheckBox';
+import { Box, Flex } from '../../../components/Flex';
 const SparklineTypes = {
     LINE: 'line',
     AREA: 'area',
@@ -51,12 +51,12 @@ export const StyledColumnSparklineSettingsSection = ({ onChange }) => {
     };
     const isObjectNumberArray = api.columnApi.getColumnWithColumnId(data.ColumnId)?.dataType === 'objectArray';
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { mb: 2 },
+        React.createElement(Tabs, { className: "twa:mb-2" },
             React.createElement(Tabs.Tab, null, "Settings"),
             React.createElement(Tabs.Content, null,
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Sparkline Type" },
-                        React.createElement(Box, { maxWidth: 160 },
+                        React.createElement(Box, { className: "twa:max-w-[160px]" },
                             React.createElement(Select, { options: sparklineTypeOptions, value: sparklineType, onChange: handleTypeChange, placeholder: "Select Sparkline Type" }))),
                     isObjectNumberArray && (React.createElement(SparklineObjectArrayProperties, { options: sparklineOptions, onChange: handleOptionsChange })),
                     React.createElement(FormRow, { label: "Min Value" },
@@ -69,7 +69,7 @@ export const StyledColumnSparklineSettingsSection = ({ onChange }) => {
                                 ...sparklineOptions,
                                 max: e.target.value === '' ? undefined : Number(e.target.value),
                             }), placeholder: 'Auto', title: "User override for the automatically determined max value (based on series data)" }))))),
-        React.createElement(Tabs, { mb: 2 },
+        React.createElement(Tabs, { className: "twa:mb-2" },
             React.createElement(Tabs.Tab, null, "Theming"),
             React.createElement(Tabs.Tab, null, "Axis"),
             React.createElement(Tabs.Tab, { hidden: sparklineOptions.type === 'bar' }, "Marker"),
@@ -147,18 +147,18 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
         React.createElement(FormRow, { label: "Stroke" },
             React.createElement(Flex, { alignItems: "center" },
                 React.createElement(ColorPicker, { title: "The colour for the stroke", api: api, value: sparklineOptions.stroke, onChange: (color) => handleChange('stroke', color) }),
-                React.createElement(Box, { ml: 2, mr: 1 }, "Width"),
-                React.createElement(AdaptableInput, { title: "The width of the stroke in pixels", type: "number", style: { width: '70px' }, min: 0, value: sparklineOptions.strokeWidth ?? '', onChange: (e) => handleChange('strokeWidth', Number(e.target.value)) }))),
+                React.createElement(Box, { className: "twa:ml-2 twa:mr-1" }, "Width"),
+                React.createElement(AdaptableInput, { title: "The width of the stroke in pixels", type: "number", className: "twa:w-[70px]", min: 0, value: sparklineOptions.strokeWidth ?? '', onChange: (e) => handleChange('strokeWidth', Number(e.target.value)) }))),
         React.createElement(FormRow, { label: "Padding" },
             React.createElement(Flex, { alignItems: "center" },
-                React.createElement(Box, { mr: 1 }, "Top"),
-                React.createElement(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.top ?? '', onChange: (e) => handlePaddingChange('top', Number(e.target.value)), style: { width: '70px' }, title: "The number of pixels of padding at the top of the chart area" }),
-                React.createElement(Box, { ml: 2, mr: 1 }, "Right"),
-                React.createElement(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.right ?? '', onChange: (e) => handlePaddingChange('right', Number(e.target.value)), style: { width: '70px' }, title: "The number of pixels of padding at the right of the chart area" }),
-                React.createElement(Box, { ml: 2, mr: 1 }, "Bottom"),
-                React.createElement(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.bottom ?? '', onChange: (e) => handlePaddingChange('bottom', Number(e.target.value)), style: { width: '70px' }, title: "The number of pixels of padding at the bottom of the chart area" }),
-                React.createElement(Box, { ml: 2, mr: 1 }, "Left"),
-                React.createElement(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.left ?? '', onChange: (e) => handlePaddingChange('left', Number(e.target.value)), style: { width: '70px' }, title: "The number of pixels of padding at the left of the chart area" }))),
+                React.createElement(Box, { className: "twa:mr-1" }, "Top"),
+                React.createElement(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.top ?? '', onChange: (e) => handlePaddingChange('top', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the top of the chart area" }),
+                React.createElement(Box, { className: "twa:ml-2 twa:mr-1" }, "Right"),
+                React.createElement(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.right ?? '', onChange: (e) => handlePaddingChange('right', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the right of the chart area" }),
+                React.createElement(Box, { className: "twa:ml-2 twa:mr-1" }, "Bottom"),
+                React.createElement(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.bottom ?? '', onChange: (e) => handlePaddingChange('bottom', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the bottom of the chart area" }),
+                React.createElement(Box, { className: "twa:ml-2 twa:mr-1" }, "Left"),
+                React.createElement(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.left ?? '', onChange: (e) => handlePaddingChange('left', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the left of the chart area" }))),
         React.createElement(FormRow, { label: "Line Dash" },
             React.createElement(AdaptableInput, { title: "Length of dashes and gaps in pixels (comma-separated values, e.g. '3,6,9')", value: sparklineOptions.lineDash?.join(',') ?? '', onChange: (e) => {
                     const value = e.target.value;
@@ -178,13 +178,13 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
                         ...sparklineOptions.background,
                         visible,
                     }) }),
-                React.createElement(Box, { ml: 2 },
+                React.createElement(Box, { className: "twa:ml-2" },
                     React.createElement(ColorPicker, { disabled: !sparklineOptions.background?.visible, title: "The colour of the chart background", api: api, value: sparklineOptions.background?.fill, onChange: (fill) => handleChange('background', {
                             ...sparklineOptions.background,
                             fill,
                         }) })))),
         typeof sparklineOptions.theme !== 'object' && (React.createElement(FormRow, { label: "Theme" },
-            React.createElement(Box, { maxWidth: 160 },
+            React.createElement(Box, { className: "twa:max-w-[160px]" },
                 React.createElement(Select, { value: sparklineOptions.theme ?? 'ag-default', onChange: (themeName) => handleChange('theme', themeName), options: themes }))))));
 };
 const SparklineAxisOptions = ({ options, onChange, }) => {
@@ -213,21 +213,21 @@ const SparklineAxisOptions = ({ options, onChange, }) => {
         React.createElement(FormRow, { label: "Show Axis" },
             React.createElement(CheckBox, { checked: isAxisEnabled, onChange: (visible) => handleChange({ visible }) })),
         React.createElement(FormRow, { label: "Axis Type" },
-            React.createElement(Box, { maxWidth: 160 },
+            React.createElement(Box, { className: "twa:max-w-[160px]" },
                 React.createElement(Select, { disabled: !isAxisEnabled, value: sparklineOptions.axis.type, onChange: (type) => handleChange({ type }), options: axisTypes }))),
         React.createElement(FormRow, { label: "Stroke" },
             React.createElement(Flex, { alignItems: "center" },
                 React.createElement(ColorPicker, { disabled: !isAxisEnabled, title: "The colour of the axis line", api: api, value: sparklineOptions.axis?.stroke, onChange: (stroke) => handleChange({ stroke }) }),
-                React.createElement(Box, { ml: 2, mr: 1 }, "Width"),
-                React.createElement(AdaptableInput, { disabled: !isAxisEnabled, style: { width: '70px' }, title: "The width in pixels of the axis line", type: "number", min: 0, value: sparklineOptions.axis?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }) }))),
+                React.createElement(Box, { className: "twa:ml-2 twa:mr-1" }, "Width"),
+                React.createElement(AdaptableInput, { disabled: !isAxisEnabled, className: "twa:w-[70px]", title: "The width in pixels of the axis line", type: "number", min: 0, value: sparklineOptions.axis?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }) }))),
         React.createElement(FormRow, { label: "Reverse Scale" },
             React.createElement(CheckBox, { disabled: !isAxisEnabled, checked: sparklineOptions.axis?.reverse, onChange: (reverse) => handleChange({ reverse }) })),
         sparklineOptions.axis.type === 'category' && (React.createElement(React.Fragment, null,
             React.createElement(FormRow, { label: "Padding" },
                 React.createElement(Flex, { alignItems: "center" },
-                    React.createElement(Box, { mr: 1 }, "Inner"),
+                    React.createElement(Box, { className: "twa:mr-1" }, "Inner"),
                     React.createElement(AdaptableInput, { disabled: !isAxisEnabled, title: "The size of the gap between categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingInner ?? '', onChange: (e) => handleChange({ paddingInner: Number(e.target.value) }) }),
-                    React.createElement(Box, { ml: 2, mr: 1 }, "Outer"),
+                    React.createElement(Box, { className: "twa:ml-2 twa:mr-1" }, "Outer"),
                     React.createElement(AdaptableInput, { disabled: !isAxisEnabled, title: "The padding on the outside of first and last categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingOuter ?? '', onChange: (e) => handleChange({ paddingOuter: Number(e.target.value) }) })))))));
 };
 const SparklineTooltipOptions = ({ options, onChange, }) => {
@@ -262,13 +262,13 @@ const SparklineTooltipOptions = ({ options, onChange, }) => {
         React.createElement(FormRow, { label: "Show Tooltip" },
             React.createElement(CheckBox, { checked: isTooltipEnabled, onChange: (enabled) => handleChange('enabled', enabled) })),
         React.createElement(FormRow, { label: "Anchor To" },
-            React.createElement(Box, { maxWidth: 160 },
+            React.createElement(Box, { className: "twa:max-w-[160px]" },
                 React.createElement(Select, { disabled: !isTooltipEnabled, value: sparklineOptions.tooltip?.position?.anchorTo, onChange: (value) => handleChange('position', {
                         ...sparklineOptions.tooltip?.position,
                         anchorTo: value,
                     }), options: anchorToOptions }))),
         React.createElement(FormRow, { label: "Placement" },
-            React.createElement(Box, { maxWidth: 160 },
+            React.createElement(Box, { className: "twa:max-w-[160px]" },
                 React.createElement(Select, { disabled: !isTooltipEnabled, value: sparklineOptions.tooltip?.position?.placement, onChange: (value) => handleChange('position', {
                         ...sparklineOptions.tooltip?.position,
                         placement: value,
@@ -314,26 +314,35 @@ const SparklineMarkerOptions = ({ options, onChange }) => {
         React.createElement(FormRow, { label: "Marker Size" },
             React.createElement(AdaptableInput, { disabled: !isMarkerEnabled, type: "number", min: 1, value: sparklineOptions.marker?.size ?? '', onChange: (e) => handleChange({ size: Number(e.target.value) }), title: "The size in pixels of the markers" })),
         React.createElement(FormRow, { label: "Marker Shape" },
-            React.createElement(Box, { maxWidth: 160 },
+            React.createElement(Box, { className: "twa:max-w-[160px]" },
                 React.createElement(Select, { disabled: !isMarkerEnabled, value: sparklineOptions.marker?.shape, onChange: (shape) => handleChange({ shape: shape }), options: markerShapes }))),
         React.createElement(FormRow, { label: "Fill" },
             React.createElement(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for filling markers", api: api, value: sparklineOptions.marker?.fill, onChange: (fill) => handleChange({ fill }) })),
         React.createElement(FormRow, { label: "Stroke" },
             React.createElement(Flex, { alignItems: "center" },
                 React.createElement(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for the marker stroke", api: api, value: sparklineOptions.marker?.stroke, onChange: (stroke) => handleChange({ stroke }) }),
-                React.createElement(Box, { ml: 2, mr: 1 }, "Width"),
-                React.createElement(AdaptableInput, { disabled: !isMarkerEnabled, style: { width: '70px' }, type: "number", min: 0, value: sparklineOptions.marker?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }), title: "The width of the marker stroke in pixels" })))));
+                React.createElement(Box, { className: "twa:ml-2 twa:mr-1" }, "Width"),
+                React.createElement(AdaptableInput, { disabled: !isMarkerEnabled, className: "twa:w-[70px]", type: "number", min: 0, value: sparklineOptions.marker?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }), title: "The width of the marker stroke in pixels" })))));
 };
 const SparklineHighlightOptions = ({ options, onChange, }) => {
     const { api } = useOnePageAdaptableWizardContext();
-    const sparklineOptions = options;
+    const highlightOptions = options.highlight;
+    const handleBaseChange = (value) => {
+        onChange({
+            ...options,
+            highlight: {
+                ...options.highlight,
+                ...value,
+            },
+        });
+    };
     const handleItemChange = (value) => {
         onChange({
             ...options,
-            highlightStyle: {
-                ...options.highlightStyle,
-                item: {
-                    ...options.highlightStyle?.item,
+            highlight: {
+                ...options.highlight,
+                highlightedItem: {
+                    ...options.highlight?.highlightedItem,
                     ...value,
                 },
             },
@@ -342,10 +351,10 @@ const SparklineHighlightOptions = ({ options, onChange, }) => {
     const handleSeriesChange = (value) => {
         onChange({
             ...options,
-            highlightStyle: {
-                ...options.highlightStyle,
-                series: {
-                    ...options.highlightStyle?.series,
+            highlight: {
+                ...options.highlight,
+                highlightedSeries: {
+                    ...options.highlight?.highlightedSeries,
                     ...value,
                 },
             },
@@ -353,21 +362,15 @@ const SparklineHighlightOptions = ({ options, onChange, }) => {
     };
     return (React.createElement(FormLayout, null,
         React.createElement(FormRow, { label: "Item Fill" },
-            React.createElement(ColorPicker, { title: "The colour for filling highlighted items", api: api, value: sparklineOptions.highlightStyle?.item?.fill, onChange: (fill) => handleItemChange({ fill }) })),
+            React.createElement(ColorPicker, { title: "The colour for filling highlighted items", api: api, value: highlightOptions?.highlightedItem?.fill, onChange: (fill) => handleItemChange({ fill }) })),
         React.createElement(FormRow, { label: "Item Stroke" },
             React.createElement(Flex, { alignItems: "center" },
-                React.createElement(ColorPicker, { title: "The colour for the highlighted item stroke", api: api, value: sparklineOptions.highlightStyle?.item?.stroke, onChange: (stroke) => handleItemChange({ stroke }) }),
-                React.createElement(Box, { ml: 2, mr: 1 }, "Width"),
-                React.createElement(AdaptableInput, { style: { width: '70px' }, type: "number", min: 0, value: sparklineOptions.highlightStyle?.item?.strokeWidth ?? '', onChange: (e) => handleItemChange({ strokeWidth: Number(e.target.value) }), title: "The width of the highlighted item stroke in pixels" }))),
+                React.createElement(ColorPicker, { title: "The colour for the highlighted item stroke", api: api, value: highlightOptions?.highlightedItem?.stroke, onChange: (stroke) => handleItemChange({ stroke }) }),
+                React.createElement(Box, { className: "twa:ml-2 twa:mr-1" }, "Width"),
+                React.createElement(AdaptableInput, { className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedItem?.strokeWidth ?? '', onChange: (e) => handleItemChange({ strokeWidth: Number(e.target.value) }), title: "The width of the highlighted item stroke in pixels" }))),
         React.createElement(FormRow, { label: "Series" },
             React.createElement(Flex, { alignItems: "center" },
-                React.createElement(CheckBox, { checked: sparklineOptions.highlightStyle?.series?.enabled ?? false, onChange: (enabled) => handleSeriesChange({ enabled }) }),
-                React.createElement(Box, { ml: 2, mr: 1 }, "Opacity"),
-                React.createElement(AdaptableInput, { disabled: !sparklineOptions.highlightStyle?.series?.enabled, style: { width: '70px' }, type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.highlightStyle?.series?.dimOpacity ?? '', onChange: (e) => handleSeriesChange({ dimOpacity: Number(e.target.value) }), title: "The opacity of the whole series when another series is highlighted" }),
-                React.createElement(Box, { ml: 2, mr: 1 }, "Stroke Width"),
-                React.createElement(AdaptableInput, { disabled: !sparklineOptions.highlightStyle?.series?.enabled, style: { width: '70px' }, type: "number", min: 0, value: sparklineOptions.highlightStyle?.series?.strokeWidth ?? '', onChange: (e) => handleSeriesChange({ strokeWidth: Number(e.target.value) }), title: "The stroke width when markers are hovered or tooltip is shown" })))));
-};
-const test = {
-    type: 'line',
-    xName: 'test',
+                React.createElement(CheckBox, { checked: highlightOptions?.enabled ?? false, onChange: (enabled) => handleBaseChange({ enabled }) }),
+                React.createElement(Box, { className: "twa:ml-2 twa:mr-1" }, "Stroke Width"),
+                React.createElement(AdaptableInput, { disabled: !highlightOptions?.enabled, className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedSeries?.strokeWidth ?? '', onChange: (e) => handleSeriesChange({ strokeWidth: Number(e.target.value) }), title: "The stroke width when markers are hovered or tooltip is shown" })))));
 };

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Box } from 'rebass';
 import { useDispatch } from 'react-redux';
 import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../Wizard/OnePageAdaptableWizard';
 import ObjectFactory from '../../../Utilities/ObjectFactory';
@@ -13,6 +12,7 @@ import { renderStyledColumnWizardSettingsSummary, StyledColumnWizardSettingsSect
 import { StyledColumnSparklineSettingsSection } from './StyledColumnSparklineSettingsSection';
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
 import { renderBadgeSummary, StyledColumnBadgeSection } from './StyledColumnBadgeSection';
+import { Box } from '../../../components/Flex';
 export const StyledColumnWizard = (props) => {
     const data = props.data ?? props.popupParams?.value;
     const popupDefaultCurrentSectionName = props?.popupParams?.config?.defaultCurrentSectionName ?? undefined;
@@ -52,7 +52,7 @@ export const StyledColumnWizard = (props) => {
         details: 'Apply Additional Settings',
         renderSummary: renderStyledColumnWizardSettingsSummary,
         render: () => {
-            return (React.createElement(Box, { padding: 2 },
+            return (React.createElement(Box, { className: "twa:p-2" },
                 React.createElement(StyledColumnWizardSettingsSection, { onChange: setStyledColumn })));
         },
         title: 'Settings',
@@ -61,7 +61,7 @@ export const StyledColumnWizard = (props) => {
     if (styledColumn.SparklineStyle) {
         specificSteps.push({
             title: 'Settings',
-            render: () => (React.createElement(Box, { p: 2 },
+            render: () => (React.createElement(Box, { className: "twa:p-2" },
                 React.createElement(StyledColumnSparklineSettingsSection, { onChange: setStyledColumn }))),
         });
     }
@@ -70,7 +70,7 @@ export const StyledColumnWizard = (props) => {
             details: 'Create the Style to apply',
             renderSummary: renderStyledColumnStyleSummary,
             render: () => {
-                return (React.createElement(Box, { padding: 2 },
+                return (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(StyledColumnWizardStyleSection, { onChange: setStyledColumn })));
             },
             title: 'Style',
@@ -107,7 +107,7 @@ export const StyledColumnWizard = (props) => {
                 return true;
             },
             renderSummary: () => renderBadgeSummary(styledColumn),
-            render: () => (React.createElement(Box, { p: 2 },
+            render: () => (React.createElement(Box, { className: "twa:p-2" },
                 React.createElement(StyledColumnBadgeSection, { onChange: setStyledColumn }))),
         });
         specificSteps.push(AdditionalSettingSection);
@@ -126,7 +126,7 @@ export const StyledColumnWizard = (props) => {
                 renderSummary: renderStyledColumnColumnSummary,
                 details: 'Select the Column where the Style will be applied',
                 render: () => {
-                    return (React.createElement(Box, { padding: 2, style: { height: '100%' } },
+                    return (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                         React.createElement(StyledColumnWizardColumnSection, { isNew: props.isNew, onChange: setStyledColumn })));
                 },
                 title: 'Column',
@@ -136,7 +136,7 @@ export const StyledColumnWizard = (props) => {
                 details: 'Select Format Column Tags',
                 title: 'Tags',
                 isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
-                render: () => (React.createElement(Box, { padding: 2 },
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
                     React.createElement(ObjectTagsWizardSection, { onChange: setStyledColumn }))),
                 renderSummary: renderObjectTagsSummary,
             },
@@ -145,7 +145,7 @@ export const StyledColumnWizard = (props) => {
                 title: 'Summary',
                 details: 'Review your Styled Column',
                 render: () => {
-                    return (React.createElement(Box, { padding: 2 },
+                    return (React.createElement(Box, { className: "twa:p-2" },
                         React.createElement(OnePageWizardSummary, null)));
                 },
             },

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Text } from 'rebass';
 import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import { NewColumnSelector } from '../../Components/ColumnSelector';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Box } from '../../../components/Flex';
 export const renderStyledColumnColumnSummary = (data) => {
     const { api } = useOnePageAdaptableWizardContext();
-    return (React.createElement(Text, { pr: 2, py: 2 },
+    return (React.createElement(Box, { className: "twa:pr-2 twa:py-2" },
         "Styled Column column:",
         ' ',
         React.createElement(Tag, null, data.ColumnId

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

@@ -1,24 +1,24 @@
 import * as React from 'react';
-import { Box, Flex, Text } from 'rebass';
 import { CheckBox } from '../../../components/CheckBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tabs } from '../../../components/Tabs';
 import { Tag } from '../../../components/Tag';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Flex, Box } from '../../../components/Flex';
 export const renderStyledColumnWizardSettingsSummary = (data) => {
     const badgeStyle = data;
-    return (React.createElement(Box, { padding: 2 },
-        React.createElement(Text, { mt: 3 },
+    return (React.createElement(Box, { className: "twa:p-2" },
+        React.createElement(Box, { className: "twa:mt-3" },
             "Data Rows ",
             React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
         ' ',
-        React.createElement(Text, { mt: 3 },
+        React.createElement(Box, { className: "twa:mt-3" },
             "Group Rows ",
             React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
-        React.createElement(Text, { mt: 3 },
+        React.createElement(Box, { className: "twa:mt-3" },
             "Summary Rows ",
             React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeSummaryRows ? 'no' : 'yes')),
-        React.createElement(Text, { mt: 3 },
+        React.createElement(Box, { className: "twa:mt-3" },
             "Total Rows ",
             React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeTotalRows ? 'no' : 'yes'))));
 };
@@ -78,24 +78,24 @@ export const StyledColumnWizardSettingsSection = (props) => {
             React.createElement(Flex, { flexDirection: "row" },
                 React.createElement(FormLayout, null,
                     React.createElement(FormRow, { label: "Exclude Data Rows:" },
-                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: 
+                        React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                            React.createElement(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(FormRow, { label: "Exclude Group Rows:" },
-                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: 
+                        React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                            React.createElement(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(FormRow, { label: "Exclude Row Summaries:" },
-                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: 
+                        React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                            React.createElement(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(FormRow, { label: "Exclude Total Rows:" },
-                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
-                            React.createElement(CheckBox, { "data-name": "exclude-total-rows-checkbox", checked: 
+                        React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
+                            React.createElement(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 }))))))));
 };

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import { useAdaptable } from '../../../../AdaptableContext';
 import { PercentBarStylePreview } from './PercentBarStylePreview';
+import { Box, Flex } from '../../../../../components/Flex';
 export const PercentBarColumnComparisonPreview = (props) => {
     const { api } = useAdaptable();
     const columnComparison = props.percentBarStyle.ColumnComparison;
-    return (React.createElement(Flex, { alignItems: "center", mr: 3 },
-        React.createElement(Box, { flexBasis: 120, mr: 3 },
+    return (React.createElement(Flex, { alignItems: "center", className: "twa:mr-3" },
+        React.createElement(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

@@ -1,18 +1,17 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
 import { PercentBarStylePreview } from './PercentBarStylePreview';
+import { Flex } from '../../../../../components/Flex';
 export 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(Flex, { key: i, alignItems: "stretch", mr: 3, mb: 2 },
-        React.createElement(Flex, { flexBasis: 120, alignItems: "center", mr: 3 },
+    return (React.createElement(React.Fragment, null, props.percentBarStyle.CellRanges.map((range, i) => (React.createElement(Flex, { key: i, alignItems: "stretch", className: "twa:mr-3 twa:mb-2" },
+        React.createElement(Flex, { className: "twa:basis-[120px] twa:mr-3", alignItems: "center" },
             range.Min,
             postfix,
             " to ",
             range.Max,
-            postfix,
-            ' '),
+            postfix),
         React.createElement(PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText }))))));
 };

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
+import { Box, Flex } from '../../../../../components/Flex';
 const getText = (options) => {
     let text = '';
     if (options && options.includes('CellValue')) {
@@ -13,8 +13,8 @@ const getText = (options) => {
 export const PercentBarStylePreview = (props) => {
     const cellText = getText(props.cellText);
     const tooltip = getText(props.toolTipText);
-    return (React.createElement(Box, { title: tooltip, flex: 1 },
-        React.createElement(Flex, { height: cellText ? 8 : 18, backgroundColor: props.backgroundColor, flex: 1 },
-            React.createElement(Box, { flexBasis: "50%", style: { background: props.barBackgroundColor } })),
-        cellText && React.createElement(Box, { fontSize: 3 }, cellText)));
+    return (React.createElement(Box, { title: tooltip, className: "twa:flex-1" },
+        React.createElement(Flex, { style: { backgroundColor: props.backgroundColor }, className: `twa:flex-1 ${cellText ? 'twa:h-[8px]' : 'twa:h-[18px]'}` },
+            React.createElement(Box, { className: "twa:basis-[50%]", style: { background: props.barBackgroundColor } })),
+        cellText && React.createElement(Box, { className: "twa:text-3" }, cellText)));
 };

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../../../Utilities/Constants/GeneralConstants';
 import { useAdaptable } from '../../../../AdaptableContext';
 import { Badge } from '../../../../Components/Badge';
+import { Flex, Box } from '../../../../../components/Flex';
 export const StyledColumnBadgePreview = ({ data }) => {
     const adaptable = useAdaptable();
     const badgeStyle = data.BadgeStyle;
@@ -15,7 +15,7 @@ export const StyledColumnBadgePreview = ({ data }) => {
             : adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId) === 'number'
                 ? DEFAULT_INTEGER_DISPLAY_VALUE
                 : DEFAULT_STRING_DISPLAY_VALUE;
-        return (React.createElement(Box, { mb: 1, key: index },
+        return (React.createElement(Box, { className: "twa:mb-1", key: index },
             React.createElement(Badge, { icon: badge.Icon, adaptableStyle: badge.Style, iconPosition: badge.IconPosition }, badgeValue)));
     })));
 };

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
 import { Tag } from '../../../../../components/Tag';
 import { useAdaptable } from '../../../../AdaptableContext';
+import { Box, Flex } from '../../../../../components/Flex';
 export const StyledColumnBadgeSettings = ({ data }) => {
     const adaptable = useAdaptable();
     const badgeStyle = data.BadgeStyle;
@@ -19,11 +19,9 @@ export 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(Box, { mt: 2, mb: 2, key: index },
+        return (React.createElement(Box, { className: "twa:my-2", key: index },
             React.createElement(Tag, null, ruleString),
-            iconOnly && React.createElement(Tag, { ml: 2 }, 'Icon Only'),
-            ' ',
-            hasIconPosition && React.createElement(Tag, { ml: 2 }, iconPosition),
-            ' '));
+            iconOnly && React.createElement(Tag, { className: "twa:ml-2" }, 'Icon Only'),
+            hasIconPosition && React.createElement(Tag, { className: "twa:ml-2" }, iconPosition)));
     })));
 };