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

package/src/components/ToggleButton/index.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 interface ToggleButtonProps {
     checked?: boolean;
-    className: string;
+    className?: string;
     disabled?: boolean;
     onChange: (on: boolean) => void;
     style?: React.CSSProperties;
-    'data-name': string;
+    'data-name'?: string;
 }
 export declare const ToggleButton: React.FunctionComponent<React.PropsWithChildren<ToggleButtonProps>>;
 export {};

package/src/components/ToggleButton/index.js

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
-import join from '../utils/join';
+import clsx from 'clsx';
+import { Flex } from '../Flex';
+import { twMerge } from '../../twMerge';
 export const ToggleButton = ({ checked, onChange, disabled, className, children, style = {}, 'data-name': dataName, }) => {
+    const isChecked = Boolean(checked);
     const handleChange = (event) => {
         if (disabled) {
             return;
@@ -9,9 +11,25 @@ export const ToggleButton = ({ checked, onChange, disabled, className, children,
         onChange(Boolean(event.target.checked));
     };
     const baseClassName = 'ab-ToggleButton';
-    const preparedClassName = join(className, baseClassName, checked && `${baseClassName}--checked`, disabled && `${baseClassName}--disabled`);
-    return (React.createElement("label", { "data-name": dataName, style: style, className: preparedClassName },
-        React.createElement("input", { type: "checkbox", disabled: disabled, checked: Boolean(checked), className: `${baseClassName}__input`, onChange: handleChange }),
-        React.createElement(Flex, { alignItems: "center", justifyContent: checked ? 'start' : 'end', className: `${baseClassName}__slider` },
-            React.createElement("div", { className: `${baseClassName}__text` }, children))));
+    const preparedClassName = clsx(baseClassName, 'twa:group twa:outline-0', 'twa:select-none twa:relative twa:inline-block', 'twa:min-w-[40px]', 'twa:min-h-input', 'twa:w-[77px]', {
+        [`${baseClassName}--checked`]: isChecked,
+        [`${baseClassName}--disabled`]: disabled,
+        'twa:hover:cursor-pointer twa:hover:opacity-85': !disabled,
+    }, className);
+    return (React.createElement("label", { "data-checked": isChecked, "data-name": dataName, style: style, className: twMerge(preparedClassName) },
+        React.createElement("input", { type: "checkbox", disabled: disabled, checked: isChecked, className: clsx(`${baseClassName}__input`, 'twa:opacity-0 twa:size-0'), onChange: handleChange }),
+        React.createElement(Flex, { alignItems: "center", "data-checked": isChecked, className: clsx(`${baseClassName}__slider`, 'twa:group:focus-within:ring-1 twa:group-focus-within:shadow-(--ab-focus__box-shadow)', 'twa:absolute twa:inset-0 twa:rounded-standard', {
+                'twa:bg-(--ab-cmp-toggle-button__background)': !isChecked,
+                'twa:bg-accent': isChecked,
+                'twa:justify-start': isChecked,
+                'twa:justify-end': !isChecked,
+                'twa:opacity-50': disabled,
+            }, 
+            // the :before pseudo element
+            'twa:before:absolute twa:before:content-[""] twa:before:size-[24px]', 'twa:before:rounded-standard twa:before:bg-white') },
+            React.createElement("div", { className: clsx(`${baseClassName}__text`, 'twa:font-semibold', 'twa:pr-2', 'twa:text-1', {
+                    'twa:text-(--ab-cmp-toggle-button__color)': !isChecked,
+                    'twa:text-(--ab-cmp-toggle-button--checked__color)': isChecked,
+                    'twa:pl-2': isChecked,
+                }) }, children))));
 };

package/src/components/Tree/TreeDropdown/index.js

@@ -3,7 +3,6 @@ import FieldWrap from '../../FieldWrap';
 import { TreeList } from '../TreeList';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import OverlayTrigger from '../../OverlayTrigger';
-import { Box, Flex } from 'rebass';
 import NotifyResize from '../../NotifyResize';
 import Input from '../../Input';
 import { TreeSelectionState, withSelectedLeafNodesOnly, } from '../../InfiniteTable';
@@ -12,6 +11,7 @@ import { CheckBox } from '../../CheckBox';
 import { useLatest } from '../../utils/useLatest';
 import { Resizable } from 're-resizable';
 import { useAdaptableComputedCSSVars } from '../../../View/AdaptableComputedCSSVarsContext';
+import { Box, Flex } from '../../Flex';
 const resizableDirections = {
     right: true,
     bottom: true,
@@ -34,7 +34,7 @@ const getLabelColumn = (field, { includeExpandCollapseButton }) => {
             if (!rowInfo.isTreeNode) {
                 return null;
             }
-            return (React.createElement(CheckBox, { mx: 1, checked: rowInfo?.rowSelected, onChange: (checked) => {
+            return (React.createElement(CheckBox, { className: "twa:mx-1", checked: rowInfo?.rowSelected, onChange: (checked) => {
                     dataSourceApi.treeApi.setNodeSelection(rowInfo.nodePath, checked);
                     api.focus();
                 } }));
@@ -44,11 +44,11 @@ const getLabelColumn = (field, { includeExpandCollapseButton }) => {
             const allFirstLevelCollapsed = dataSourceApi
                 .getOriginalDataArray()
                 .every((item) => !treeApi.isNodeExpanded([item.id]));
-            return (React.createElement(Flex, { flexDirection: 'row', alignItems: 'center', width: '100%', onMouseDown: (e) => {
+            return (React.createElement(Flex, { flexDirection: 'row', alignItems: 'center', className: "twa:w-full", onMouseDown: (e) => {
                     // so we can keep the focus on the Grid
                     e.preventDefault();
                 } },
-                React.createElement(CheckBox, { checked: someRowsSelected && !allRowsSelected ? null : allRowsSelected, mr: 2, onChange: () => {
+                React.createElement(CheckBox, { checked: someRowsSelected && !allRowsSelected ? null : allRowsSelected, className: "twa:mr-2", onChange: () => {
                         if (allRowsSelected) {
                             dataSourceApi.treeApi.deselectAll();
                         }
@@ -57,7 +57,7 @@ const getLabelColumn = (field, { includeExpandCollapseButton }) => {
                         }
                         api.focus();
                     } }, allRowsSelected ? '(Deselect All)' : '(Select All)'),
-                React.createElement(Flex, { flex: 1 }),
+                React.createElement(Flex, { className: "twa:flex-1" }),
                 includeExpandCollapseButton ? (React.createElement(SimpleButton, { label: "toggle-expand-collapse", icon: allFirstLevelCollapsed ? 'expand-all' : 'collapse-all', onMouseDown: () => {
                         if (allFirstLevelCollapsed) {
                             dataSourceApi.treeApi.expandAll();
@@ -179,10 +179,7 @@ export function TreeDropdown(props) {
         }
         return filterTreeNode(data);
     }, [nodeMatches]);
-    return (React.createElement(Flex, { flexDirection: 'row', className: "ab-TreeDropdown", style: {
-            width: '100%',
-            ...props.style,
-        }, onMouseDown: props.onMouseDown, onBlur: (e) => {
+    return (React.createElement(Flex, { flexDirection: 'row', className: "ab-TreeDropdown twa:w-full", style: props.style, onMouseDown: props.onMouseDown, onBlur: (e) => {
             const { relatedTarget } = e;
             const overlayDOMNode = overlayDOMRef.current;
             if ((overlayDOMNode && relatedTarget == overlayDOMNode) ||
@@ -230,8 +227,8 @@ export function TreeDropdown(props) {
                         setTreeListApi(api);
                         api.focus();
                     }, defaultTreeExpandState: treeExpandState, onTreeExpandStateChange: setTreeExpandState, columns: columns, options: props.options, treeSelection: treeSelection, onTreeSelectionChange: withSelectedLeafNodesOnly(onChange), style: treeListStyle }));
-                let children = (React.createElement(Flex, { flexDirection: 'column', height: '100%' },
-                    React.createElement(Flex, { backgroundColor: 'defaultbackground', p: 1, alignItems: 'center', justifyContent: 'stretch', justifyItems: 'stretch' },
+                let children = (React.createElement(Flex, { flexDirection: 'column', className: "twa:h-full" },
+                    React.createElement(Flex, { className: "twa:bg-defaultbackground twa:p-1 twa:items-center twa:justify-stretch twa:justify-items-stretch" },
                         React.createElement(Input, { "data-name": "menulist-search-input", placeholder: "Search...", style: { width: '100%' }, value: searchValue, onChange: (e) => setSearchValue(e.target.value) })),
                     treeList));
                 if (resizable) {
@@ -251,10 +248,8 @@ export function TreeDropdown(props) {
                         fontSize: 'var(--ab-cmp-select__font-size)',
                     } }, children));
             } },
-            React.createElement(FieldWrap, { style: { width: '100%', ...props.fieldStyle } },
-                React.createElement(Input, { type: "text", readOnly: true, "data-name": "Select Values", placeholder: props.placeholder ?? 'Select a value', style: {
-                        width: '100%',
-                    }, pr: props.clearable ? 0 : undefined, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
+            React.createElement(FieldWrap, { style: props.fieldStyle, className: "twa:w-full" },
+                React.createElement(Input, { type: "text", readOnly: true, "data-name": "Select Values", placeholder: props.placeholder ?? 'Select a value', className: `twa:w-full ${props.clearable ? 'twa:pr-0' : ''}`, value: props.toDisplayValue ? props.toDisplayValue(value) : toDisplayValueDefault(value), onFocus: () => {
                         if (!visible) {
                             setVisible(true);
                         }

package/src/components/Tree/TreeList/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TreeDataSource, TreeGrid, } from '../../InfiniteTable';
-import { Flex } from 'rebass';
-import join from '../../utils/join';
+import { Flex } from '../../Flex';
+import clsx from 'clsx';
 const columns = {
     label: {
         field: 'label',
@@ -13,23 +13,19 @@ const columns = {
     },
 };
 const domProps = {
-    style: {
-        height: '100%',
-        flex: 1,
-    },
-    className: 'ab-TreeList',
+    className: 'ab-TreeList twa:flex-1 twa:h-full',
 };
 const DEFAULT_TREE_EXPAND_STATE = {
     expandedPaths: [],
     defaultExpanded: false,
 };
 export function TreeList(props) {
-    return (React.createElement(Flex, { flex: 1, flexDirection: 'column', className: "ab-TreeList", style: props.style },
+    return (React.createElement(Flex, { flexDirection: 'column', className: "ab-TreeList twa:flex-1", style: props.style },
         React.createElement(TreeDataSource, { data: props.options, primaryKey: props.primaryKey ?? 'id', defaultTreeSelection: props.defaultTreeSelection, treeSelection: props.treeSelection, onTreeSelectionChange: props.onTreeSelectionChange, treeFilterFunction: props.treeFilterFunction, onTreeExpandStateChange: props.onTreeExpandStateChange, defaultTreeExpandState: props.defaultTreeExpandState ?? DEFAULT_TREE_EXPAND_STATE },
             React.createElement(TreeGrid, { defaultActiveRowIndex: 0, onReady: props.onReady, debugId: props.debugId, keyboardSelection: true, rowHeight: props.rowHeight ?? '--ab-grid-row-height', keyboardNavigation: "row", columnHeaderHeight: props.columnHeaderHeight, domProps: {
                     ...domProps,
                     ...props.domProps,
-                    className: join(domProps.className, props.domProps?.className),
+                    className: clsx(domProps.className, props.domProps?.className),
                     style: { ...domProps.style, ...props.domProps?.style },
                 }, columns: props.columns ?? columns, showZebraRows: false }))));
 }

package/src/components/WarningBox/index.d.ts

@@ -1,4 +1,8 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
+import { BoxProps } from '../Flex';
 export declare const baseClassName = "ab-WarningBox";
-export declare const WarningBox: (props: BoxProps) => React.JSX.Element;
+export declare const WarningBox: (props: BoxProps & {
+    className?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}) => React.JSX.Element;

package/src/components/WarningBox/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Box } from 'rebass';
-import join from '../utils/join';
+import { Box } from '../Flex';
+import clsx from 'clsx';
 export const baseClassName = 'ab-WarningBox';
 export const WarningBox = (props) => {
-    return React.createElement(Box, { ...props, className: join(props.className, baseClassName) });
+    return (React.createElement(Box, { ...props, className: clsx('twa:p-3 twa:rounded-standard twa:bg-warn twa:text-text-on-warn', baseClassName, props.className) }));
 };

package/src/components/WizardPanel/index.d.ts

@@ -1,4 +1,9 @@
 import * as React from 'react';
 import { PanelProps } from '../Panel';
-declare const WizardPanel: (props: PanelProps) => React.JSX.Element;
+declare const WizardPanel: (props: {
+    bodyProps?: PanelProps["bodyProps"];
+    className?: string;
+    "data-name"?: string;
+    children?: React.ReactNode;
+}) => React.JSX.Element;
 export default WizardPanel;

package/src/components/WizardPanel/index.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Panel from '../Panel';
-import join from '../utils/join';
+import { twMerge } from '../../twMerge';
 const WizardPanel = (props) => {
-    return (React.createElement(Panel, { border: "none", borderRadius: "none", variant: "primary", bodyScroll: true, ...props, className: join(props.className, 'ab-WizardPanel'), style: { height: '100%', ...props.style } }));
+    return (React.createElement(Panel, { bodyScroll: true, bodyProps: props.bodyProps, "data-name": props['data-name'], className: twMerge('ab-WizardPanel', 'twa:border-none twa:rounded-none twa:h-full', props.className) }, props.children));
 };
 export default WizardPanel;

package/src/components/icons/DefaultIcon.d.ts

@@ -7,6 +7,7 @@ export type IconProps = {
     tabIndex?: number;
     style?: React.CSSProperties;
     color?: string;
+    fill?: string;
 };
 declare const _default: ({ children, size, name, tabIndex, color, ...props }: IconProps) => React.JSX.Element;
 export default _default;

package/src/components/icons/index.d.ts

@@ -12,6 +12,6 @@ type IconProps = {
     props?: React.SVGProps<SVGElement>;
 };
 export declare const Icon: ({ name, style, className, tabIndex, ...props }: IconProps) => React.JSX.Element;
-export declare const NaturallySizedIcon: (props: Omit<IconProps, 'size'>) => React.JSX.Element;
+export declare const NaturallySizedIcon: (props: Omit<IconProps, "size">) => React.JSX.Element;
 export declare const iconToString: (icon: AdaptableSystemIcon | AdaptableCustomIcon, style?: CSSProperties) => string;
 export {};

package/src/components/icons/index.js

@@ -73,6 +73,7 @@ import PlusMinus from './plus-minus';
 import QuickSearch from './quick-search';
 import Reminder from './reminder';
 import Schedule from './schedule';
+import Inspector from './inspector';
 import Shortcut from './shortcut';
 import UpdatedRow from './updated-row';
 import logout from './logout';
@@ -264,6 +265,7 @@ export const allIcons = {
     logout: logout,
     'import-export': ImportExport,
     import: Import,
+    inspector: Inspector,
     paperclip: AttachFile,
     info: Info,
     'cloud-upload': CloudUpload,

package/src/components/icons/inspector.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const _default: (props: any) => React.JSX.Element;
+export default _default;

package/src/components/icons/inspector.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import DefaultIcon from './DefaultIcon';
+export default (props) => (React.createElement(DefaultIcon, { ...props },
+    React.createElement("path", { d: "M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z" }),
+    React.createElement("path", { d: "M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6" })));

package/src/components/twUtils.d.ts

@@ -0,0 +1,7 @@
+export declare const targetOwn: {
+    focusOutline: string;
+    focusWithinOutline: string;
+};
+export declare const targetChildren: {
+    focusWithinOutline: string;
+};

package/src/components/twUtils.js

@@ -0,0 +1,13 @@
+export const targetOwn = {
+    focusOutline: 
+    // 'twa:outline-0 twa:focus:outline-2 twa:focus:outline-offset-1 twa:focus:outline-accent',
+    'twa:outline-0 twa:focus:shadow-(--ab-focus__box-shadow)',
+    focusWithinOutline: 
+    // 'twa:outline-0 twa:focus-within:outline-2 twa:focus-within:outline-offset-1 twa:focus-within:outline-accent',
+    'twa:outline-0 twa:focus-within:shadow-(--ab-focus__box-shadow)',
+};
+export const targetChildren = {
+    focusWithinOutline: 
+    // 'twa:*:outline-0 twa:*:focus-within:outline-2 twa:*:focus-within:outline-offset-1 twa:*:focus-within:outline-accent',
+    'twa:*:outline-0 twa:*:focus-within:shadow-(--ab-focus__box-shadow)',
+};

package/src/components/utils/useDraggable.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function useDraggable({ onMove, onDrop, getBoundingRect, handleSelector, }: {
     onMove?: (event: MouseEvent) => void;
     onDrop?: (dx: number, dy: number) => void;

package/src/devTools/index.d.ts

@@ -22,75 +22,75 @@ export declare class DevToolsMarker implements PerfMarker {
     private stopped;
     private constructor();
     start: (startDetails?: {
-        details?: DevToolsMarkerDetails['details'];
+        details?: DevToolsMarkerDetails["details"];
     }) => this;
     get startTimestamp(): number;
     get track(): {
         readonly Init: {
-            start: DevToolsMarker['start'];
+            start: DevToolsMarker["start"];
             end: (markerDetails: Omit<DevToolsMarkerDetails, "track"> & {
                 label: "Init" | "InitStore" | "LoadStore" | "InitAGGrid";
             }) => DevToolsMarker;
             label: {
                 readonly Init: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
                 readonly InitStore: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
                 readonly LoadStore: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
                 readonly InitAGGrid: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
             };
         };
         readonly LayoutManager: {
-            start: DevToolsMarker['start'];
+            start: DevToolsMarker["start"];
             end: (markerDetails: Omit<DevToolsMarkerDetails, "track"> & {
                 label: "SetLayout" | "ApplyPivotLayout" | "ApplyTableLayout";
             }) => DevToolsMarker;
             label: {
                 readonly SetLayout: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
                 readonly ApplyPivotLayout: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
                 readonly ApplyTableLayout: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
             };
         };
         readonly Runtime: {
-            start: DevToolsMarker['start'];
+            start: DevToolsMarker["start"];
             end: (markerDetails: Omit<DevToolsMarkerDetails, "track"> & {
                 label: "SetLayout";
             }) => DevToolsMarker;
             label: {
                 readonly SetLayout: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
             };
         };
         readonly Redux: {
-            start: DevToolsMarker['start'];
+            start: DevToolsMarker["start"];
             end: (markerDetails: Omit<DevToolsMarkerDetails, "track"> & {
                 label: "Action";
             }) => DevToolsMarker;
             label: {
                 readonly Action: {
-                    end: EndMethod<Omit<DevToolsMarkerDetails, 'track' | 'label'>>;
-                    start: DevToolsMarker['start'];
+                    end: EndMethod<Omit<DevToolsMarkerDetails, "track" | "label">>;
+                    start: DevToolsMarker["start"];
                 };
             };
         };

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1768333302626 || Date.now(),
-    VERSION: "21.2.2-canary.0" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1768988317720 || Date.now(),
+    VERSION: "22.0.0-canary.0" || '--current-version--',
 };

package/src/layout-manager/src/LMEmitter.d.ts

@@ -4,6 +4,7 @@ import { LMLogger } from './LMLogger';
 type LMEmitterEventTypes = {
     gridLayoutChanged: (layout: TableLayoutModel | PivotLayoutModel) => void;
     columnDefsChanged: (colDefs: GridOptions['columnDefs']) => void;
+    rowModelUpdated: () => void;
 };
 export declare class LMEmitter extends LMLogger {
     protected destroyed: boolean;

package/src/layout-manager/src/LMEmitter.js

@@ -13,6 +13,7 @@ export class LMEmitter extends LMLogger {
         this.eventSets = {
             gridLayoutChanged: new Set(),
             columnDefsChanged: new Set(),
+            rowModelUpdated: new Set(),
         };
     }
     on(event, callback) {

package/src/layout-manager/src/index.js

@@ -172,13 +172,13 @@ export class LayoutManager extends LMEmitter {
                 const gridLayout = this.getLayoutModelFromGrid();
                 // but if we do have a current layout set
                 // then only emit the event if the layout has changed
-                if (isGridLayoutSame({
+                if (!isGridLayoutSame({
                     layoutFromGrid: gridLayout,
                     layoutFromModel: this.currentLayout,
                 })) {
+                    this.onGridLayoutChanged(gridLayout);
                     return;
                 }
-                this.onGridLayoutChanged(gridLayout);
             }
         };
         this.columnDefsChanged = (colDefs) => {

package/src/migration/VersionUpgrade20.js

@@ -220,16 +220,17 @@ export class VersionUpgrade20 extends VersionUpgrade {
                     styledColumn.SparklineStyle?.options?.axis?.type == undefined) {
                     styledColumn.SparklineStyle.options.axis.type = 'category';
                 }
-                if (styledColumn.SparklineStyle?.options?.highlightStyle) {
+                const obsoleteHighlightStyle = styledColumn.SparklineStyle?.options
+                    ?.highlightStyle;
+                if (obsoleteHighlightStyle) {
                     const obsoleteKeys = ['fill', 'stroke', 'strokeWidth'];
                     obsoleteKeys.forEach((obsoleteKey) => {
                         if (
                         // @ts-ignore
-                        styledColumn.SparklineStyle?.options?.highlightStyle?.[obsoleteKey] != undefined) {
-                            const itemHighlightStyle = styledColumn.SparklineStyle.options.highlightStyle.item ?? {};
+                        obsoleteHighlightStyle?.[obsoleteKey] != undefined) {
+                            const itemHighlightStyle = obsoleteHighlightStyle.item ?? {};
                             // @ts-ignore
-                            itemHighlightStyle[obsoleteKey] = styledColumn.SparklineStyle?.options
-                                ?.highlightStyle?.[obsoleteKey];
+                            itemHighlightStyle[obsoleteKey] = obsoleteHighlightStyle?.[obsoleteKey];
                             // @ts-ignore
                             delete styledColumn.SparklineStyle.options.highlightStyle[obsoleteKey];
                         }

package/src/twMerge.d.ts

@@ -0,0 +1 @@
+export declare const twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;

package/src/twMerge.js

@@ -0,0 +1,11 @@
+import { extendTailwindMerge } from 'tailwind-merge';
+export const twMerge = extendTailwindMerge({
+    prefix: 'twa',
+    extend: {
+        theme: {
+            // ↓ `text` is the key of the namespace `--text-*`
+            text: ['0', '1', '2', '3', '4', '5', '6', '7'],
+            radius: ['none', 'standard', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', 'full'],
+        },
+    },
+});

package/themes/dark.css

@@ -1,22 +1,48 @@
 .ab--theme-dark {
-  font-family: Helvetica, Arial, sans-serif;
   --ab-theme-loaded: dark;
-  --ab-cmp-input--disabled__background: #232323;
+
+  --ab-cmp-input--disabled__background: #232323; /* #b6b7b8 */
+
   --ab-color-defaultbackground: #3e444c;
   --ab-color-text-on-defaultbackground: #e2e2e2;
+
   --ab-color-primary: #262d2f;
-  --ab-color-primarylight: #2d3537;
+  --ab-color-primarylight: #3d3e3f;
   --ab-color-primarydark: #1c2021;
-  --ab-color-text-on-primary: #e2e2e2;
+  --ab-color-text-on-primary: #e2e2e2; /* F2F2F2 */
+
+  --ab-color-shadow: rgb(255 255 255 / 0.45);
+  --ab-cmp-modal-backdrop__background: rgba(255, 255, 255, 0.2);
+
   --ab-dashboard__border: #555;
   --ab-cmp-dropdownbutton-list-separator__border: 1px solid #555;
+
   --ab-gridheader--filtered__background: var(--ab-color-defaultbackground);
+
   --ab-cmp-checkbox__border-color: var(--ab-color-text-on-primary);
   --ab-cmp-checkbox--checked__border-color: var(--ab-color-accent);
+
+  input[type='number'].ab-Input::-webkit-outer-spin-button,
+  input[type='number'].ab-Input::-webkit-inner-spin-button {
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="4 0 18 18" version="1.1"><path fill="%23f7f7f7" d="M7 10l5 5 5-5z" transform="translate(0, 2)"/><path fill="%23f7f7f7" d="M7 14l5-5 5 5z" transform="translate(0, -6)"/></svg>')
+      no-repeat center center;
+  }
 }
-.ab--theme-dark input[type=number].ab-Input::-webkit-outer-spin-button,
-.ab--theme-dark input[type=number].ab-Input::-webkit-inner-spin-button {
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="4 0 18 18" version="1.1"><path fill="%23f7f7f7" d="M7 10l5 5 5-5z" transform="translate(0, 2)"/><path fill="%23f7f7f7" d="M7 14l5-5 5 5z" transform="translate(0, -6)"/></svg>') no-repeat center center;
-}
 
-/*# sourceMappingURL=dark.css.map */
+/*
+The following are only redefined here so that the DARK theme in Storybook
+can be previewed correctly as that relies on an element (not the document element)
+to have the class ab--theme-dark.
+
+For our production release those are not needed and could be removed
+as our dark theme is anyways applied on the document element.
+
+*/
+.ab--theme-dark {
+  --ab-color-inputcolor: var(--ab-color-text-on-primary);
+  --ab-cmp-input__color: var(--ab-color-inputcolor);
+  --ab-cmp-input__background: var(--ab-color-defaultbackground);
+  --ab-cmp-input--disabled__background: var(--ab-color-primarylight);
+  --ab-cmp-field-wrap__background: var(--ab-color-defaultbackground);
+  --ab-cmp-simple-button--outlined__background: var(--ab-color-defaultbackground);
+}

package/themes/light.css

@@ -1,5 +1,3 @@
 html.ab--theme-light {
   --ab-theme-loaded: light;
 }
-
-/*# sourceMappingURL=light.css.map */