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

package/src/View/SmartEdit/SmartEditPopup.js

@@ -14,9 +14,9 @@ const PreviewResultsPanel_1 = require("../Components/PreviewResultsPanel");
 const PreviewHelper_1 = require("../../Utilities/Helpers/PreviewHelper");
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
-const rebass_1 = require("rebass");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const Flex_1 = require("../../components/Flex");
 const preventDefault = (e) => e.preventDefault();
 class SmartEditPopupComponent extends React.Component {
     constructor(props) {
@@ -33,7 +33,7 @@ class SmartEditPopupComponent extends React.Component {
         }
         let globalValidationMessage = PreviewHelper_1.PreviewHelper.GetValidationMessage(this.props.PreviewInfo, `${this.props.SmartEditValue}`);
         let showPanel = this.props.PreviewInfo && StringExtensions_1.StringExtensions.IsNotNullOrEmpty(`${this.props.SmartEditValue}`);
-        let previewPanel = showPanel ? (React.createElement(PreviewResultsPanel_1.PreviewResultsPanel, { style: { flex: '1 1 100%', overflow: 'initial', height: '100%' }, previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: col, showPanel: showPanel, showHeader: true })) : null;
+        let previewPanel = showPanel ? (React.createElement(PreviewResultsPanel_1.PreviewResultsPanel, { className: "twa:flex-[1_1_100%] twa:overflow-initial twa:h-full", previewInfo: this.props.PreviewInfo, api: this.props.api, selectedColumn: col, showPanel: showPanel, showHeader: true })) : null;
         const operationMenuItems = EnumExtensions_1.EnumExtensions.getNames(Enums_1.MathOperation).map((mathOperation, index) => {
             return {
                 label: mathOperation,
@@ -51,23 +51,23 @@ class SmartEditPopupComponent extends React.Component {
                 };
             }));
         }
-        return (React.createElement(PanelWithImage_1.PanelWithImage, { flex: 1, style: { height: '100%' }, variant: "primary", bodyProps: {
-                style: { display: 'flex', flexFlow: 'column' },
+        return (React.createElement(PanelWithImage_1.PanelWithImage, { className: "twa:h-full twa:flex-1 twa:p-0!", variant: "primary", bodyProps: {
+                className: 'twa:flex twa:flex-col',
             }, bodyScroll: true, glyphicon: this.props.moduleInfo.Glyph, header: this.props.moduleInfo.FriendlyName, infoLink: this.props.moduleInfo.HelpPage, infoLinkDisabled: !this.props.api.internalApi.isDocumentationLinksDisplayed(), onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     this.submit();
                 }
             } },
-            React.createElement(rebass_1.Flex, { flexDirection: "row", padding: 2, "data-name": "smart-edit-operation" },
+            React.createElement(Flex_1.Flex, { flexDirection: "row", "data-name": "smart-edit-operation", className: "twa:p-2" },
                 React.createElement(DropdownButton_1.default, { "data-name": "smart-edit-operation-dropdown", items: operationMenuItems, columns: ['label'], onMouseDown: preventDefault }, typeof this.props.SmartEditOperation === 'object'
                     ? this.props.SmartEditOperation.name
                     : this.props.SmartEditOperation),
-                React.createElement(Input_1.default, { "data-name": "smart-edit-value", value: this.props.SmartEditValue.toString(), marginLeft: 2, marginRight: 2, type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }),
-                React.createElement(SimpleButton_1.default, { "data-name": "smart-edit-apply-button", tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
+                React.createElement(Input_1.default, { "data-name": "smart-edit-value", value: this.props.SmartEditValue.toString(), className: "twa:mx-2", type: "number", placeholder: "Enter a Number", onChange: (e) => this.onSmartEditValueChange(e) }),
+                React.createElement(SimpleButton_1.default, { "data-name": "smart-edit-apply-button", className: "twa:mr-2", tone: this.getButtonStyle(), variant: "raised", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
                         (this.props.PreviewInfo &&
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), onClick: () => {
                         this.submit();
-                    }, marginRight: 2 }, "Apply Smart Edit"),
+                    } }, "Apply Smart Edit"),
                 ' ',
                 this.props.PreviewInfo &&
                     this.props.PreviewInfo.previewValidationSummary.validationResult != 'None' && (React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: 'Validation Error', bodyText: [globalValidationMessage], MessageType: 'Error' }))),

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -9,13 +9,13 @@ const React = tslib_1.__importStar(require("react"));
 const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
 const PreviewResultsPanel_1 = require("../Components/PreviewResultsPanel");
 const EnumExtensions_1 = require("../../Utilities/Extensions/EnumExtensions");
-const rebass_1 = require("rebass");
 const Input_1 = tslib_1.__importDefault(require("../../components/Input"));
 const ButtonApply_1 = require("../Components/Buttons/ButtonApply");
 const AdaptablePopover_1 = require("../AdaptablePopover");
 const UIHelper_1 = require("../UIHelper");
 const react_redux_1 = require("react-redux");
 const Select_1 = require("../../components/Select");
+const Flex_1 = require("../../components/Flex");
 class SmartEditViewPanelComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -68,15 +68,15 @@ class SmartEditViewPanelComponent extends React.Component {
             !this.props.IsValidSelection ||
             this.props.api.layoutApi.isCurrentLayoutPivot() == true;
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
-        return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__SmartEdit__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
-            React.createElement(rebass_1.Flex, null,
+        return (React.createElement(Flex_1.Flex, { flexDirection: "row", className: `ab-${elementType}__SmartEdit__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
+            React.createElement(Flex_1.Flex, null,
                 React.createElement(Select_1.Select, { "aria-label": 'Select Smart Edit Operation', value: typeof this.props.SmartEditOperation === 'object'
                         ? this.props.SmartEditOperation.name
                         : this.props.SmartEditOperation, options: operationMenuItems, onChange: (operation) => this.props.onSmartEditOperationChange(operation), style: { marginRight: 1 } }),
                 React.createElement(Input_1.default, { style: {
                         width: '5rem',
                     }, className: `ab-${elementType}__SmartEdit__select-value`, value: this.props.SmartEditValue.toString(), type: "number", placeholder: "Enter a Number", step: "any", onChange: (e) => this.onSmartEditValueChange(e), disabled: shouldDisable })),
-            React.createElement(rebass_1.Flex, null,
+            React.createElement(Flex_1.Flex, null,
                 !shouldDisable && (React.createElement(ButtonApply_1.ButtonApply, { onClick: () => this.onApplyClick(), style: applyButtonStyle, className: `ab-${elementType}__SmartEdit__apply`, tooltip: "Apply Smart Edit", disabled: StringExtensions_1.StringExtensions.IsNullOrEmpty(`${this.props.SmartEditValue}`) ||
                         (this.props.PreviewInfo != null &&
                             this.props.PreviewInfo.previewValidationSummary.validationResult == 'All'), accessLevel: this.props.accessLevel }, this.props.viewType === 'ToolPanel' && 'Apply Smart Edit')),

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -4,11 +4,11 @@ exports.SpecialColumnSettingsWizardStep = void 0;
 const tslib_1 = require("tslib");
 const chunk_1 = tslib_1.__importDefault(require("lodash/chunk"));
 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 AdaptableContext_1 = require("./AdaptableContext");
+const Flex_1 = require("../components/Flex");
 const SpecialColumnSettingsWizardStep = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const possibleColumnTypes = adaptable.api.columnApi.getColumnTypes() ?? [];
@@ -35,11 +35,11 @@ const SpecialColumnSettingsWizardStep = (props) => {
         });
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false },
+        React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Column Properties"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Flex, { flexDirection: "column" },
-                    React.createElement(FormLayout_1.default, { style: { width: '100%' }, columns: [
+                React.createElement(Flex_1.Flex, { flexDirection: "column" },
+                    React.createElement(FormLayout_1.default, { className: "twa:w-full", columns: [
                             { name: 'first', size: '30%' },
                             { size: '30%', name: 'second' },
                             { size: '30%', name: 'third' },
@@ -56,7 +56,7 @@ const SpecialColumnSettingsWizardStep = (props) => {
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
                             React.createElement(CheckBox_1.CheckBox, { disabled: true, checked: props.isEditable }, "Editable")))))),
-        Boolean(possibleColumnTypes?.length) && (React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false },
+        Boolean(possibleColumnTypes?.length) && (React.createElement(Tabs_1.Tabs, { className: "twa:mt-2", autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Column Types"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }] }, (0, chunk_1.default)(possibleColumnTypes ?? [], 2)?.map(([first, second]) => (React.createElement(FormLayout_1.FormRow, { key: first },

package/src/View/StateManagement/StateManagementPopup.js

@@ -12,21 +12,21 @@ const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
 const StateManagementPopup = (props) => {
     const baseClassName = 'ab-ManageState';
     return (React.createElement(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: props.moduleInfo.FriendlyName, glyphicon: props.moduleInfo.Glyph, infoLink: props.moduleInfo.HelpPage, infoLinkDisabled: !props.api.internalApi.isDocumentationLinksDisplayed() },
-        React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "user-state", header: 'User State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginRight: 2, mb: 2 },
-            React.createElement(HelpBlock_1.default, { marginBottom: 2 }, 'Clear all current user state that has been persisted'),
+        React.createElement(Panel_1.default, { className: `${baseClassName}__panel twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "user-state", header: 'User State', variant: "default" },
+            React.createElement(HelpBlock_1.default, { className: "twa:mb-2" }, 'Clear all current user state that has been persisted'),
             React.createElement(HelpBlock_1.default, { style: { color: 'var(--ab-color-warn)' } }, 'This will cause this window to close and any State you have previously created will be lost, and the Initial Adaptable State will be reapplied'),
-            React.createElement(ClearButton_1.ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState() }, "Clear User State")),
-        React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "initial-state", header: 'Initial Adaptable State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
-            React.createElement(HelpBlock_1.default, { marginTop: 2 }, 'Load Initial Adaptable State (from a .json file) - this will cause this window to close'),
+            React.createElement(ClearButton_1.ClearButton, { "data-name": "clear-user-state-button", tone: "info", variant: "raised", className: "twa:mt-2", accessLevel: props.accessLevel, onClick: () => props.api.stateApi.reloadInitialState() }, "Clear User State")),
+        React.createElement(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Initial Adaptable State', variant: "default" },
+            React.createElement(HelpBlock_1.default, { className: "twa:mt-2" }, 'Load Initial Adaptable State (from a .json file) - this will cause this window to close'),
             ' ',
-            React.createElement(LoadButton_1.LoadButton, { tone: "info", variant: "raised", marginTop: 2, accessLevel: props.accessLevel, onLoad: (json) => props.api.stateApi.reloadInitialState(json), "data-name": "load-initial-state-button" }, "Load Initial Adaptable State")),
-        React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "adaptable-state", header: 'Export Adaptable State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
-            React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, 'Exports the currently persisted Adaptable State'),
+            React.createElement(LoadButton_1.LoadButton, { tone: "info", variant: "raised", className: "twa:mt-2", accessLevel: props.accessLevel, onLoad: (json) => props.api.stateApi.reloadInitialState(json), "data-name": "load-initial-state-button" }, "Load Initial Adaptable State")),
+        React.createElement(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "adaptable-state", header: 'Export Adaptable State' },
+            React.createElement(HelpBlock_1.default, { className: "twa:my-2" }, 'Exports the currently persisted Adaptable State'),
             ' ',
-            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'], "data-name": "export-adaptable-state-dropdown" }, "Select Export Destination")),
-        React.createElement(Panel_1.default, { className: `${baseClassName}__panel`, "data-name": "initial-state", header: 'Export Initial Adaptable State', style: { height: 'auto' }, variant: "default", borderRadius: "none", marginTop: 3, marginRight: 2, mb: 2 },
-            React.createElement(HelpBlock_1.default, { marginTop: 2, marginBottom: 2 }, 'Exports the Initial Adaptable State which was provided at design time'),
+            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", columns: ['label'], "data-name": "export-adaptable-state-dropdown" }, "Select Export Destination")),
+        React.createElement(Panel_1.default, { className: `${baseClassName}__panel twa:mt-3 twa:mr-2 twa:mb-2 twa:h-auto twa:rounded-none`, "data-name": "initial-state", header: 'Export Initial Adaptable State', variant: "default" },
+            React.createElement(HelpBlock_1.default, { className: "twa:my-2" }, 'Exports the Initial Adaptable State which was provided at design time'),
             ' ',
-            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "initialState", marginRight: 3, style: { flex: 1, maxWidth: 'none' }, columns: ['label'], "data-name": "export-initial-state-dropdown" }, "Select Export Destination"))));
+            React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "initialState", className: "twa:mr-3 twa:flex-1 twa:max-w-none", columns: ['label'], "data-name": "export-initial-state-dropdown" }, "Select Export Destination"))));
 };
 exports.StateManagementPopup = StateManagementPopup;

package/src/View/StateManagement/StateManagementViewPanel.js

@@ -7,13 +7,13 @@ const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
 const GeneralConstants = tslib_1.__importStar(require("../../Utilities/Constants/GeneralConstants"));
 const LoadButton_1 = require("./components/LoadButton");
 const ClearButton_1 = require("./components/ClearButton");
-const rebass_1 = require("rebass");
 const ExportDropdown_1 = require("./components/ExportDropdown");
+const Flex_1 = require("../../components/Flex");
 const StateManagementViewPanel = (props) => {
     const isToolbar = props.viewType === 'Toolbar';
     const elementType = isToolbar ? 'DashboardToolbar' : 'ToolPanel';
-    return (React.createElement(rebass_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: (0, join_1.default)(props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__StateManagement__wrap`) },
-        React.createElement(rebass_1.Flex, { flexDirection: "row" },
+    return (React.createElement(Flex_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: (0, join_1.default)(props.accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__StateManagement__wrap`) },
+        React.createElement(Flex_1.Flex, { flexDirection: "row" },
             React.createElement(LoadButton_1.LoadButton, { tooltip: "Load Initial Adaptable State", variant: "text", icon: "upload", onLoad: (json) => props.api.stateApi.reloadInitialState(json), accessLevel: props.accessLevel }, !isToolbar && 'Load'),
             React.createElement(ClearButton_1.ClearButton, { icon: "delete", tooltip: "Clear User State", variant: "text", onClick: () => props.api.stateApi.reloadInitialState(), accessLevel: props.accessLevel }, !isToolbar && 'Clear')),
         React.createElement(ExportDropdown_1.ExportDropdown, { api: props.api, type: "adaptableState" }, "All State"),

package/src/View/StateManagement/handleExportState.d.ts

@@ -1,2 +1,2 @@
 import { AdaptableApi } from '../../types';
-export declare const handleExportState: (type: 'Clipboard' | 'Console' | 'JSON', name: 'adaptableState' | 'initialState', state: any, api: AdaptableApi) => void;
+export declare const handleExportState: (type: "Clipboard" | "Console" | "JSON", name: "adaptableState" | "initialState", state: any, api: AdaptableApi) => void;

package/src/View/StatusBar/AdaptableStatusBar.js

@@ -5,11 +5,11 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const react_redux_1 = require("react-redux");
-const rebass_1 = require("rebass");
 const StatusBarRedux_1 = require("../../Redux/ActionsReducers/StatusBarRedux");
 const AdaptableContext_1 = require("../AdaptableContext");
 const StatusBarPanel_1 = require("./StatusBarPanel");
 const useRerender_1 = require("../../components/utils/useRerender");
+const Flex_1 = require("../../components/Flex");
 const AdaptableStatusBar = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const rerender = (0, useRerender_1.useRerender)();
@@ -20,7 +20,7 @@ const AdaptableStatusBar = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const statusSubPanels = statusPanels.find((statusPanel) => statusPanel.Key === props.context.Key);
     const allMenuItems = (0, react_redux_1.useSelector)((state) => state?.Internal?.SettingsPanelModuleEntries);
-    return (React.createElement(rebass_1.Flex, { className: "ab-StatusBar-Panel", "data-id": props.context.Key }, statusSubPanels?.StatusBarPanels?.map((subPanel) => {
+    return (React.createElement(Flex_1.Flex, { className: "ab-StatusBar-Panel", "data-id": props.context.Key }, statusSubPanels?.StatusBarPanels?.map((subPanel) => {
         const module = adaptable.ModuleService.getModuleById(subPanel);
         if (!module?.isModuleVisible()) {
             return React.createElement(React.Fragment, { key: subPanel });

package/src/View/StatusBar/StatusBarPanel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
+import { FlexProps } from '../../components/Flex';
 /**
  * A panel can be:
  * - icon
@@ -13,7 +13,7 @@ import { FlexProps } from 'rebass';
  *
  * Extra actions are components so the components can call inside hooks.
  */
-export interface StatusBarPanelProps extends Omit<FlexProps, 'content' | 'popover'> {
+export interface StatusBarPanelProps extends Omit<FlexProps & React.HTMLProps<HTMLDivElement>, 'content' | 'popover'> {
     icon?: string;
     content?: React.ReactNode | React.FunctionComponent<React.PropsWithChildren<unknown>>;
     /**

package/src/View/StatusBar/StatusBarPanel.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatusBarPanel = 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 ArrayExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/ArrayExtensions"));
 const AdaptablePopover_1 = require("../AdaptablePopover");
+const Flex_1 = require("../../components/Flex");
+const clsx_1 = tslib_1.__importDefault(require("clsx"));
 /**
  * Statusbar sub panel are similar to vs code:
  * - text
@@ -38,9 +39,9 @@ const StatusBarPanel = (props) => {
     const preparedContent = typeof content === 'function'
         ? React.createElement(content)
         : content;
-    return (React.createElement(rebass_1.Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: baseClassName, onClick: handleWrapperClick, style: { cursor: shouldTriggerActionOnWrapperClick ? 'pointer' : 'default' } },
-        props.icon && (React.createElement(SimpleButton_1.default, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, mr: preparedContent ? 1 : 0 })),
+    return (React.createElement(Flex_1.Flex, { ...flexProps, alignItems: "center", justifyContent: "center", className: (0, clsx_1.default)(baseClassName, flexProps.className, shouldTriggerActionOnWrapperClick ? 'twa:cursor-pointer' : 'twa:cursor-default'), onClick: handleWrapperClick },
+        props.icon && (React.createElement(SimpleButton_1.default, { tooltip: tooltip, color: props.color, icon: props.icon, iconSize: 15, variant: "text", onClick: handleIconClick, className: preparedContent ? 'twa:mr-1' : 'twa:mr-0' })),
         popover ? (React.createElement(AdaptablePopover_1.AdaptablePopover, { alignPosition: [['BottomCenter', 'TopCenter']], tooltipText: tooltip, showIcon: false, bodyText: [popoverContent], MessageType: 'Info', showEvent: 'focus', hideEvent: "blur", popoverMinWidth: popoverMinWidth }, preparedContent)) : (preparedContent),
-        ArrayExtensions_1.default.IsNotNullOrEmpty(extraActions) && (React.createElement(rebass_1.Box, { ml: 1 }, extraActions?.map?.((action, index) => React.createElement(action, { key: index }))))));
+        ArrayExtensions_1.default.IsNotNullOrEmpty(extraActions) && (React.createElement(Flex_1.Box, { className: "twa:ml-1" }, extraActions?.map?.((action, index) => React.createElement(action, { key: index }))))));
 };
 exports.StatusBarPanel = StatusBarPanel;

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnBadgeSection = exports.renderBadgeSummary = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -21,6 +20,7 @@ const AdaptableIconComponent_1 = require("../../Components/AdaptableIconComponen
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const Accordion_1 = require("../../../components/Accordion");
 const CheckBox_1 = require("../../../components/CheckBox");
+const Flex_1 = require("../../../components/Flex");
 const BadgeEditor = (props) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
     const { badge, columnId, onChange } = props;
@@ -30,13 +30,13 @@ const BadgeEditor = (props) => {
     const previewValue = dataType === 'number' || dataType == 'numberArray'
         ? GeneralConstants_1.DEFAULT_INTEGER_DISPLAY_VALUE
         : GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
-    return (React.createElement(rebass_1.Flex, { className: "ab-Badge-Definition-Editor", mb: 15, p: 3 },
-        React.createElement(rebass_1.Box, { flex: 1 },
+    return (React.createElement(Flex_1.Flex, { className: "ab-Badge-Definition-Editor twa:mb-[15px] twa:p-3" },
+        React.createElement(Flex_1.Box, { className: "twa:flex-1" },
             React.createElement(FormLayout_1.default, null,
                 React.createElement(FormLayout_1.FormRow, { label: "Preview" },
                     React.createElement(Badge_1.Badge, { adaptableStyle: badge.Style, icon: badge.Icon, iconPosition: badge.IconPosition }, previewValue)),
                 React.createElement(FormLayout_1.FormRow, { label: "Style" },
-                    React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Select the Style for the Badge"),
+                    React.createElement(HelpBlock_1.default, { className: "twa:text-2 twa:mb-1 twa:mt-2" }, "Select the Style for the Badge"),
                     ' ',
                     React.createElement(Accordion_1.Accordion, { title: "Edit Badge Style" },
                         React.createElement(StyleComponent_1.StyleComponent, { showFontSizeAs: "radio", headless: true, hidePreview: true, api: api, Style: badge.Style ?? {}, UpdateStyle: (Style) => {
@@ -46,7 +46,7 @@ const BadgeEditor = (props) => {
                                 });
                             } }))),
                 React.createElement(FormLayout_1.FormRow, { label: 'Predicate' }, columnId ? (React.createElement(React.Fragment, null,
-                    React.createElement(HelpBlock_1.default, { 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_1.default, { 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_1.PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
                             onChange({
                                 ...badge,
@@ -57,7 +57,7 @@ const BadgeEditor = (props) => {
                             Predicate: undefined,
                         }) }))) : (React.createElement(ErrorBox_1.default, null, "Select a column first"))),
                 React.createElement(FormLayout_1.FormRow, { label: "Icon" },
-                    React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Select (optional) Icon (and Icon position) to display in the Badge"),
+                    React.createElement(HelpBlock_1.default, { 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_1.AdaptableIconSelector, { value: badge?.Icon && 'name' in badge?.Icon ? badge.Icon.name : undefined, onChange: (iconName) => {
@@ -91,7 +91,7 @@ const BadgeEditor = (props) => {
                     React.createElement(CheckBox_1.CheckBox, { checked: badge.IconOnly, 
                         // onClick=()=> onChange({ ...badge, IconPosition: 'End' })
                         onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }))))),
-        React.createElement(rebass_1.Box, { justifyContent: "end" },
+        React.createElement(Flex_1.Flex, { className: "twa:justify-end" },
             React.createElement(SimpleButton_1.default, { icon: "delete", onClick: props.onDelete }))));
 };
 const renderBadgeSummary = (styledColumn) => {
@@ -104,7 +104,7 @@ const StyledColumnBadgeSection = (props) => {
     return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
         React.createElement(Tabs_1.Tabs.Tab, null, "Badges"),
         React.createElement(Tabs_1.Tabs.Content, null,
-            React.createElement(rebass_1.Flex, { justifyContent: "end" },
+            React.createElement(Flex_1.Flex, { className: "twa:justify-end" },
                 React.createElement(SimpleButton_1.default, { icon: "plus", onClick: () => {
                         props.onChange({
                             ...data,
@@ -113,7 +113,7 @@ const StyledColumnBadgeSection = (props) => {
                             },
                         });
                     } }, "Add Badge")),
-            React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2 }, badges.map((badge, index) => {
+            React.createElement(Flex_1.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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledColumnSparklineSettingsSection = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
 const Select_1 = require("../../../components/Select");
 const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
@@ -12,6 +11,7 @@ const Tag_1 = require("../../../components/Tag");
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const ColorPicker_1 = require("../../../components/ColorPicker");
 const CheckBox_1 = require("../../../components/CheckBox");
+const Flex_1 = require("../../../components/Flex");
 const SparklineTypes = {
     LINE: 'line',
     AREA: 'area',
@@ -55,12 +55,12 @@ const StyledColumnSparklineSettingsSection = ({ onChange }) => {
     };
     const isObjectNumberArray = api.columnApi.getColumnWithColumnId(data.ColumnId)?.dataType === 'objectArray';
     return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs_1.Tabs, { mb: 2 },
+        React.createElement(Tabs_1.Tabs, { className: "twa:mb-2" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Sparkline Type" },
-                        React.createElement(rebass_1.Box, { maxWidth: 160 },
+                        React.createElement(Flex_1.Box, { className: "twa:max-w-[160px]" },
                             React.createElement(Select_1.Select, { options: sparklineTypeOptions, value: sparklineType, onChange: handleTypeChange, placeholder: "Select Sparkline Type" }))),
                     isObjectNumberArray && (React.createElement(SparklineObjectArrayProperties, { options: sparklineOptions, onChange: handleOptionsChange })),
                     React.createElement(FormLayout_1.FormRow, { label: "Min Value" },
@@ -73,7 +73,7 @@ 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_1.Tabs, { mb: 2 },
+        React.createElement(Tabs_1.Tabs, { className: "twa:mb-2" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Theming"),
             React.createElement(Tabs_1.Tabs.Tab, null, "Axis"),
             React.createElement(Tabs_1.Tabs.Tab, { hidden: sparklineOptions.type === 'bar' }, "Marker"),
@@ -150,20 +150,20 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
         sparklineOptions.type !== 'line' && (React.createElement(FormLayout_1.FormRow, { label: "Fill" },
             React.createElement(ColorPicker_1.ColorPicker, { title: "The colour for filling shapes", api: api, value: sparklineOptions.fill, onChange: (color) => handleChange('fill', color) }))),
         React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-            React.createElement(rebass_1.Flex, { alignItems: "center" },
+            React.createElement(Flex_1.Flex, { alignItems: "center" },
                 React.createElement(ColorPicker_1.ColorPicker, { title: "The colour for the stroke", api: api, value: sparklineOptions.stroke, onChange: (color) => handleChange('stroke', color) }),
-                React.createElement(rebass_1.Box, { ml: 2, mr: 1 }, "Width"),
-                React.createElement(AdaptableInput_1.default, { 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(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Width"),
+                React.createElement(AdaptableInput_1.default, { 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(FormLayout_1.FormRow, { label: "Padding" },
-            React.createElement(rebass_1.Flex, { alignItems: "center" },
-                React.createElement(rebass_1.Box, { mr: 1 }, "Top"),
-                React.createElement(AdaptableInput_1.default, { 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(rebass_1.Box, { ml: 2, mr: 1 }, "Right"),
-                React.createElement(AdaptableInput_1.default, { 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(rebass_1.Box, { ml: 2, mr: 1 }, "Bottom"),
-                React.createElement(AdaptableInput_1.default, { 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(rebass_1.Box, { ml: 2, mr: 1 }, "Left"),
-                React.createElement(AdaptableInput_1.default, { 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(Flex_1.Flex, { alignItems: "center" },
+                React.createElement(Flex_1.Box, { className: "twa:mr-1" }, "Top"),
+                React.createElement(AdaptableInput_1.default, { 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(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Right"),
+                React.createElement(AdaptableInput_1.default, { 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(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Bottom"),
+                React.createElement(AdaptableInput_1.default, { 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(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Left"),
+                React.createElement(AdaptableInput_1.default, { 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(FormLayout_1.FormRow, { label: "Line Dash" },
             React.createElement(AdaptableInput_1.default, { 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,18 +178,18 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
         React.createElement(FormLayout_1.FormRow, { label: "Line Dash Offset" },
             React.createElement(AdaptableInput_1.default, { title: "The offset of the line dash pattern in pixels", type: "number", min: 0, value: sparklineOptions.lineDashOffset ?? '', onChange: (e) => handleChange('lineDashOffset', Number(e.target.value)) })),
         React.createElement(FormLayout_1.FormRow, { label: "Background" },
-            React.createElement(rebass_1.Flex, { alignItems: "center" },
+            React.createElement(Flex_1.Flex, { alignItems: "center" },
                 React.createElement(CheckBox_1.CheckBox, { checked: sparklineOptions.background?.visible ?? false, onChange: (visible) => handleChange('background', {
                         ...sparklineOptions.background,
                         visible,
                     }) }),
-                React.createElement(rebass_1.Box, { ml: 2 },
+                React.createElement(Flex_1.Box, { className: "twa:ml-2" },
                     React.createElement(ColorPicker_1.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(FormLayout_1.FormRow, { label: "Theme" },
-            React.createElement(rebass_1.Box, { maxWidth: 160 },
+            React.createElement(Flex_1.Box, { className: "twa:max-w-[160px]" },
                 React.createElement(Select_1.Select, { value: sparklineOptions.theme ?? 'ag-default', onChange: (themeName) => handleChange('theme', themeName), options: themes }))))));
 };
 const SparklineAxisOptions = ({ options, onChange, }) => {
@@ -218,21 +218,21 @@ const SparklineAxisOptions = ({ options, onChange, }) => {
         React.createElement(FormLayout_1.FormRow, { label: "Show Axis" },
             React.createElement(CheckBox_1.CheckBox, { checked: isAxisEnabled, onChange: (visible) => handleChange({ visible }) })),
         React.createElement(FormLayout_1.FormRow, { label: "Axis Type" },
-            React.createElement(rebass_1.Box, { maxWidth: 160 },
+            React.createElement(Flex_1.Box, { className: "twa:max-w-[160px]" },
                 React.createElement(Select_1.Select, { disabled: !isAxisEnabled, value: sparklineOptions.axis.type, onChange: (type) => handleChange({ type }), options: axisTypes }))),
         React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-            React.createElement(rebass_1.Flex, { alignItems: "center" },
+            React.createElement(Flex_1.Flex, { alignItems: "center" },
                 React.createElement(ColorPicker_1.ColorPicker, { disabled: !isAxisEnabled, title: "The colour of the axis line", api: api, value: sparklineOptions.axis?.stroke, onChange: (stroke) => handleChange({ stroke }) }),
-                React.createElement(rebass_1.Box, { ml: 2, mr: 1 }, "Width"),
-                React.createElement(AdaptableInput_1.default, { 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(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Width"),
+                React.createElement(AdaptableInput_1.default, { 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(FormLayout_1.FormRow, { label: "Reverse Scale" },
             React.createElement(CheckBox_1.CheckBox, { disabled: !isAxisEnabled, checked: sparklineOptions.axis?.reverse, onChange: (reverse) => handleChange({ reverse }) })),
         sparklineOptions.axis.type === 'category' && (React.createElement(React.Fragment, null,
             React.createElement(FormLayout_1.FormRow, { label: "Padding" },
-                React.createElement(rebass_1.Flex, { alignItems: "center" },
-                    React.createElement(rebass_1.Box, { mr: 1 }, "Inner"),
+                React.createElement(Flex_1.Flex, { alignItems: "center" },
+                    React.createElement(Flex_1.Box, { className: "twa:mr-1" }, "Inner"),
                     React.createElement(AdaptableInput_1.default, { 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(rebass_1.Box, { ml: 2, mr: 1 }, "Outer"),
+                    React.createElement(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Outer"),
                     React.createElement(AdaptableInput_1.default, { 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, }) => {
@@ -267,13 +267,13 @@ const SparklineTooltipOptions = ({ options, onChange, }) => {
         React.createElement(FormLayout_1.FormRow, { label: "Show Tooltip" },
             React.createElement(CheckBox_1.CheckBox, { checked: isTooltipEnabled, onChange: (enabled) => handleChange('enabled', enabled) })),
         React.createElement(FormLayout_1.FormRow, { label: "Anchor To" },
-            React.createElement(rebass_1.Box, { maxWidth: 160 },
+            React.createElement(Flex_1.Box, { className: "twa:max-w-[160px]" },
                 React.createElement(Select_1.Select, { disabled: !isTooltipEnabled, value: sparklineOptions.tooltip?.position?.anchorTo, onChange: (value) => handleChange('position', {
                         ...sparklineOptions.tooltip?.position,
                         anchorTo: value,
                     }), options: anchorToOptions }))),
         React.createElement(FormLayout_1.FormRow, { label: "Placement" },
-            React.createElement(rebass_1.Box, { maxWidth: 160 },
+            React.createElement(Flex_1.Box, { className: "twa:max-w-[160px]" },
                 React.createElement(Select_1.Select, { disabled: !isTooltipEnabled, value: sparklineOptions.tooltip?.position?.placement, onChange: (value) => handleChange('position', {
                         ...sparklineOptions.tooltip?.position,
                         placement: value,
@@ -319,26 +319,35 @@ const SparklineMarkerOptions = ({ options, onChange }) => {
         React.createElement(FormLayout_1.FormRow, { label: "Marker Size" },
             React.createElement(AdaptableInput_1.default, { 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(FormLayout_1.FormRow, { label: "Marker Shape" },
-            React.createElement(rebass_1.Box, { maxWidth: 160 },
+            React.createElement(Flex_1.Box, { className: "twa:max-w-[160px]" },
                 React.createElement(Select_1.Select, { disabled: !isMarkerEnabled, value: sparklineOptions.marker?.shape, onChange: (shape) => handleChange({ shape: shape }), options: markerShapes }))),
         React.createElement(FormLayout_1.FormRow, { label: "Fill" },
             React.createElement(ColorPicker_1.ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for filling markers", api: api, value: sparklineOptions.marker?.fill, onChange: (fill) => handleChange({ fill }) })),
         React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-            React.createElement(rebass_1.Flex, { alignItems: "center" },
+            React.createElement(Flex_1.Flex, { alignItems: "center" },
                 React.createElement(ColorPicker_1.ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for the marker stroke", api: api, value: sparklineOptions.marker?.stroke, onChange: (stroke) => handleChange({ stroke }) }),
-                React.createElement(rebass_1.Box, { ml: 2, mr: 1 }, "Width"),
-                React.createElement(AdaptableInput_1.default, { 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(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Width"),
+                React.createElement(AdaptableInput_1.default, { 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 } = (0, OnePageAdaptableWizard_1.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,
                 },
             },
@@ -347,10 +356,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,
                 },
             },
@@ -358,21 +367,15 @@ const SparklineHighlightOptions = ({ options, onChange, }) => {
     };
     return (React.createElement(FormLayout_1.default, null,
         React.createElement(FormLayout_1.FormRow, { label: "Item Fill" },
-            React.createElement(ColorPicker_1.ColorPicker, { title: "The colour for filling highlighted items", api: api, value: sparklineOptions.highlightStyle?.item?.fill, onChange: (fill) => handleItemChange({ fill }) })),
+            React.createElement(ColorPicker_1.ColorPicker, { title: "The colour for filling highlighted items", api: api, value: highlightOptions?.highlightedItem?.fill, onChange: (fill) => handleItemChange({ fill }) })),
         React.createElement(FormLayout_1.FormRow, { label: "Item Stroke" },
-            React.createElement(rebass_1.Flex, { alignItems: "center" },
-                React.createElement(ColorPicker_1.ColorPicker, { title: "The colour for the highlighted item stroke", api: api, value: sparklineOptions.highlightStyle?.item?.stroke, onChange: (stroke) => handleItemChange({ stroke }) }),
-                React.createElement(rebass_1.Box, { ml: 2, mr: 1 }, "Width"),
-                React.createElement(AdaptableInput_1.default, { 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(Flex_1.Flex, { alignItems: "center" },
+                React.createElement(ColorPicker_1.ColorPicker, { title: "The colour for the highlighted item stroke", api: api, value: highlightOptions?.highlightedItem?.stroke, onChange: (stroke) => handleItemChange({ stroke }) }),
+                React.createElement(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Width"),
+                React.createElement(AdaptableInput_1.default, { 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(FormLayout_1.FormRow, { label: "Series" },
-            React.createElement(rebass_1.Flex, { alignItems: "center" },
-                React.createElement(CheckBox_1.CheckBox, { checked: sparklineOptions.highlightStyle?.series?.enabled ?? false, onChange: (enabled) => handleSeriesChange({ enabled }) }),
-                React.createElement(rebass_1.Box, { ml: 2, mr: 1 }, "Opacity"),
-                React.createElement(AdaptableInput_1.default, { 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(rebass_1.Box, { ml: 2, mr: 1 }, "Stroke Width"),
-                React.createElement(AdaptableInput_1.default, { 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(Flex_1.Flex, { alignItems: "center" },
+                React.createElement(CheckBox_1.CheckBox, { checked: highlightOptions?.enabled ?? false, onChange: (enabled) => handleBaseChange({ enabled }) }),
+                React.createElement(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Stroke Width"),
+                React.createElement(AdaptableInput_1.default, { 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" })))));
 };