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

package/src/components/FileDroppable/index.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Flex, Box } from 'rebass';
 import { useReducer, useRef } from 'react';
 import join from '../../components/utils/join';
 import contains from '../../components/utils/contains';
@@ -7,6 +6,7 @@ import SimpleButton from '../SimpleButton';
 import { Icon } from '../icons';
 import HelpBlock from '../HelpBlock';
 import reducer, { ActionTypes } from './reducer';
+import { Box, Flex } from '../Flex';
 const initialState = {
     dragOver: false,
     message: null,
@@ -112,10 +112,10 @@ const FileDroppable = (props = {}) => {
     return (React.createElement(Flex, { ...domProps, flexDirection: "column", className: join(props.className, 'ab-FileDroppable', state.dragOver ? 'ab-FileDroppable--drag-over' : ''), alignItems: "center", justifyContent: "center", onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: preventEventPropagation, ref: domRef },
         props.children,
         helpText || icon ? (React.createElement(Flex, { flexDirection: "column" },
-            helpText ? (React.createElement(Flex, { flexDirection: "column", alignItems: "center", margin: 2 },
+            helpText ? (React.createElement(Flex, { flexDirection: "column", alignItems: "center", className: "twa:m-2" },
                 React.createElement(HelpBlock, null,
                     React.createElement("b", null, helpText)))) : null,
-            icon ? (React.createElement(Flex, { flexDirection: "column", alignItems: "center", margin: 2 }, icon)) : null)) : null,
+            icon ? (React.createElement(Flex, { flexDirection: "column", alignItems: "center", className: "twa:m-2" }, icon)) : null)) : null,
         msg,
         form));
 };

package/src/components/Flex.d.ts

@@ -1 +1,15 @@
-export { Flex } from 'rebass';
+import * as React from 'react';
+type AsProp = 'summary' | 'form' | 'label' | 'button' | 'ul' | string;
+export type FlexProps = {
+    as?: AsProp;
+    flexDirection?: 'row' | 'column';
+    justifyContent?: 'space-between' | 'space-around' | 'space-evenly' | 'space-start' | 'space-end' | 'center';
+    flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+    alignItems?: 'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline' | 'start' | 'end';
+};
+export declare const Flex: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement> & FlexProps, "ref"> & React.RefAttributes<unknown>>;
+export type BoxProps = {
+    as?: AsProp;
+};
+export declare const Box: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement> & BoxProps, "ref"> & React.RefAttributes<unknown>>;
+export {};

package/src/components/Flex.js

@@ -1 +1,40 @@
-export { Flex } from 'rebass';
+import * as React from 'react';
+import clsx from 'clsx';
+import { twMerge } from '../twMerge';
+const ALIGN_ITEMS_MAP = {
+    center: 'twa:items-center',
+    'flex-start': 'twa:items-start',
+    start: 'twa:items-start',
+    'flex-end': 'twa:items-end',
+    end: 'twa:items-end',
+    stretch: 'twa:items-stretch',
+    baseline: 'twa:items-baseline',
+};
+const FLEX_DIRECTION_MAP = {
+    row: 'twa:flex-row',
+    column: 'twa:flex-col',
+};
+const JUSTIFY_CONTENT_MAP = {
+    'space-between': 'twa:justify-between',
+    'space-around': 'twa:justify-around',
+    'space-evenly': 'twa:justify-evenly',
+    'space-start': 'twa:justify-start',
+    'space-end': 'twa:justify-end',
+    center: 'twa:justify-center',
+};
+const FLEX_WRAP_MAP = {
+    wrap: 'twa:flex-wrap',
+    nowrap: 'twa:flex-nowrap',
+    'wrap-reverse': 'twa:flex-wrap-reverse',
+};
+export const Flex = React.forwardRef((props, ref) => {
+    const { className: _, flexDirection, alignItems, justifyContent, flexWrap, as, ...domProps } = props;
+    const className = clsx('twa:flex', 'twa:box-border', FLEX_DIRECTION_MAP[flexDirection], ALIGN_ITEMS_MAP[alignItems], JUSTIFY_CONTENT_MAP[justifyContent], FLEX_WRAP_MAP[flexWrap]);
+    const Cmp = (as || 'div');
+    return (React.createElement(Cmp, { ref: ref, ...domProps, className: twMerge(className, props.className) }));
+});
+export const Box = React.forwardRef((props, ref) => {
+    const { className, as, ...domProps } = props;
+    const Cmp = (as || 'div');
+    return (React.createElement(Cmp, { ref: ref, ...domProps, className: twMerge('twa:box-border', className) }));
+});

package/src/components/FlexWithFooter.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
+import { FlexProps } from './Flex';
+import { HTMLProps } from 'react';
 interface TypeProps extends FlexProps {
     footer: React.ReactNode;
-    footerProps?: FlexProps;
+    footerProps?: FlexProps & HTMLProps<HTMLDivElement>;
 }
 declare const FlexWithFooter: (props: TypeProps & React.HTMLProps<HTMLDivElement>) => React.JSX.Element;
 export default FlexWithFooter;

package/src/components/FlexWithFooter.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Flex } from 'rebass';
+import { Flex } from './Flex';
 const defaultStyle = {
     height: '100%',
     maxHeight: '90vh',
@@ -9,8 +9,8 @@ const defaultStyle = {
 const FlexWithFooter = (props) => {
     const { footer, footerProps, children, style, ...domProps } = props;
     return (React.createElement(Flex, { flexDirection: "column", ...domProps, style: { ...defaultStyle, ...style } },
-        React.createElement(Flex, { flexDirection: "column", padding: 0, flex: 1 },
-            React.createElement(Flex, { flexDirection: "column", flex: 1 }, children)),
-        footer ? (React.createElement(Flex, { padding: 2, backgroundColor: "primary", ...footerProps }, footer)) : null));
+        React.createElement(Flex, { flexDirection: "column", className: "twa:p-0 twa:flex-1" },
+            React.createElement(Flex, { flexDirection: "column", className: "twa:flex-1" }, children)),
+        footer ? (React.createElement(Flex, { className: "twa:p-2 twa:bg-primary", ...footerProps }, footer)) : null));
 };
 export default FlexWithFooter;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 import { ReactNode } from 'react';
+import { BoxProps } from '../Flex';
 type FormColumn = {
     name: string;
     component?: React.ComponentType<any>;
@@ -21,6 +21,10 @@ type TypeFormLayout = {
 export type AdaptableFormConfig = TypeFormLayout;
 export type FormLayoutColumn = FormColumn;
 interface FormLayoutProps extends Omit<BoxProps, keyof TypeFormLayout>, TypeFormLayout {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
 }
 declare const FormLayout: (props: FormLayoutProps) => React.JSX.Element;
 interface FormRowProps {

package/src/components/FormLayout/index.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Box } from 'rebass';
 import { createContext, useContext } from 'react';
 import merge from 'lodash/merge';
 import join from '../utils/join';
+import { Box } from '../Flex';
 const FormLayoutContext = createContext(null);
 const defaultColumns = {
     label: {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 export declare const baseClassName = "ab-HelpBlock";
-declare const HelpBlock: (props: BoxProps) => React.JSX.Element;
+export declare const HelpBlockClassName: string;
+declare const HelpBlock: (props: React.HTMLProps<HTMLDivElement>) => React.JSX.Element;
 export default HelpBlock;

package/src/components/HelpBlock/index.js

@@ -1,8 +1,9 @@
 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-HelpBlock';
+export const HelpBlockClassName = clsx('twa:text-2/relaxed twa:p-2 twa:rounded-standard', 'twa:bg-primarylight twa:text-primary-foreground', baseClassName);
 const HelpBlock = (props) => {
-    return React.createElement(Box, { ...props, className: join(props.className, baseClassName) });
+    return React.createElement(Box, { ...props, className: clsx(HelpBlockClassName, props.className) });
 };
 export default HelpBlock;

package/src/components/IconSelector/IconSelector.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { Box, Flex } from 'rebass';
 import AdaptableInput from '../../View/Components/AdaptableInput';
 import { IconComponent } from '../Icon';
 import { allIcons, Icon } from '../icons';
 import OverlayTrigger from '../OverlayTrigger';
 import SimpleButton from '../SimpleButton';
+import { Box, Flex } from '../Flex';
 const IconButton = (props) => {
-    return (React.createElement(SimpleButton, { onClick: () => props.onClick(), p: 2, variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon }, props.children));
+    return (React.createElement(SimpleButton, { onClick: () => props.onClick(), className: "twa:p-2", variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon }, props.children));
 };
 export const IconSelector = (props) => {
     const [query, setQuery] = React.useState('');
@@ -25,10 +25,10 @@ export const IconSelector = (props) => {
             React.createElement(IconComponent, { key: def.name, icon: def.icon })));
     });
     const popup = (React.createElement(Box, { className: "ab-IconSelector__Popup" },
-        React.createElement(Box, { mb: 2 },
-            React.createElement(Box, { mb: 2, fontSize: 4 }, "Select an Icon"),
-            React.createElement(AdaptableInput, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), width: "100%" })),
-        React.createElement(Flex, { p: 2, style: { width: 300, maxHeight: 300, overflow: 'auto' }, flexWrap: "wrap" },
+        React.createElement(Box, { className: "twa:mb-2" },
+            React.createElement(Box, { className: "twa:mb-2 twa:text-4" }, "Select an Icon"),
+            React.createElement(AdaptableInput, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), className: "twa:w-full" })),
+        React.createElement(Flex, { className: "twa:p-2 twa:w-[300px] twa:max-h-[300px] twa:overflow-auto twa:flex-wrap" },
             iconsElements,
             " ",
             customIconsElements)));
@@ -43,8 +43,8 @@ export const IconSelector = (props) => {
     }
     return (React.createElement(Flex, { className: "ab-IconSelector" },
         React.createElement(OverlayTrigger, { preventPortalEventPropagation: false, render: () => popup, showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300 },
-            React.createElement(SimpleButton, { className: "ab-IconSelector__trigger", textAlign: "center", onClick: () => null, variant: "raised", width: 150, justifyContent: "center" }, value)),
-        (props.clearable ?? true) && (React.createElement(SimpleButton, { disabled: !props.value, className: "ab-IconSelector__clear-button", ml: 2, onClick: (event) => {
+            React.createElement(SimpleButton, { className: "ab-IconSelector__trigger twa:text-center twa:w-[150px] twa:justify-center", onClick: () => null, variant: "raised" }, value)),
+        (props.clearable ?? true) && (React.createElement(SimpleButton, { disabled: !props.value, className: "ab-IconSelector__clear-button twa:ml-2", onClick: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
                 props.onChange('');

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

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { HTMLProps } from 'react';
-import { BoxProps } from 'rebass';
 export declare const baseClassName = "ab-Input";
 export type InputProps = HTMLProps<HTMLInputElement> & {
     type?: string;
     disabled?: boolean;
     list?: any;
-} & BoxProps;
+};
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/src/components/Input/index.js

@@ -1,6 +1,6 @@
 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-Input';
 const Input = React.forwardRef((props, ref) => {
     const { disabled, className, ...inputProps } = props;
@@ -11,6 +11,9 @@ const Input = React.forwardRef((props, ref) => {
     if (type === 'string') {
         type = 'text';
     }
-    return (React.createElement(Box, { as: "input", ref: ref, ...inputProps, type: type, disabled: disabled, className: join(className, baseClassName, type ? `${baseClassName}--type-${type}` : '', disabled ? `${baseClassName}--disabled` : '') }));
+    return (React.createElement(Box, { as: "input", ref: ref, ...inputProps, type: type, disabled: disabled, className: clsx(className, baseClassName, 'twa:min-h-input', type ? `${baseClassName}--type-${type}` : '', disabled ? `${baseClassName}--disabled` : '', {
+            'twa:bg-(--ab-cmp-input__background)': !disabled,
+            'twa:bg-(--ab-cmp-input--disabled__background)': disabled,
+        }) }));
 });
 export default Input;

package/src/components/Modal/Backdrop.js

@@ -22,7 +22,7 @@ const Backdrop = (props) => {
         });
         return () => updatePositionInStack(uuid, null);
     }, []);
-    return backdropVisible ? (React.createElement("div", { "data-id": uuid, style: { zIndex }, className: `${baseClassName}-backdrop` })) : null;
+    return backdropVisible ? (React.createElement("div", { "data-id": uuid, style: { zIndex }, className: `${baseClassName}-backdrop twa:fixed twa:inset-0 twa:z-900 twa:bg-(--ab-cmp-modal-backdrop__background)` })) : null;
 };
 const stack = {};
 export const updatePositionInStack = (id, data) => {

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { FlexProps } from 'rebass';
+import { HTMLProps } from 'react';
+import { FlexProps } from '../Flex';
 export declare const ensurePortalElement: () => HTMLElement;
 export declare const ensureLoadingScreenPortalElement: () => HTMLElement;
-export interface ModalProps extends FlexProps {
+export interface ModalProps extends FlexProps, HTMLProps<HTMLDivElement> {
     isOpen?: boolean;
     baseZIndex?: number;
     onBringToFront?: () => void;

package/src/components/Modal/index.js

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { createPortal } from 'react-dom';
 import { useMemo } from 'react';
-import join from '../utils/join';
 import { RemoveScroll } from 'react-remove-scroll';
-import { Flex } from 'rebass';
 import { baseClassName, default as Backdrop } from './Backdrop';
 import { createUuid } from '../utils/uuid';
 import { isBrowserDocumentAvailable } from '../../View/UIHelper';
 import { useStacking } from '../WindowModal/useStacking';
+import { Flex } from '../Flex';
+import clsx from 'clsx';
 let portalElement;
 let loadingScreenPortalElement;
 export const ensurePortalElement = () => {
@@ -45,5 +45,5 @@ export const Modal = (props) => {
     return createPortal(isOpen ? (React.createElement(React.Fragment, null,
         React.createElement(Backdrop, { timestamp: openTimestamp, uuid: uuid, zIndex: zIndex - backdropZIndexOffset, onBringToFront: onBringToFront }),
         React.createElement(RemoveScroll, null,
-            React.createElement(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...boxProps, style: { zIndex, ...style }, className: join(baseClassName, className) }, children)))) : null, portalElement);
+            React.createElement(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...boxProps, style: { zIndex, ...style }, className: clsx('twa:fixed twa:inset-0 twa:z-1000 twa:font-(family-name:--ab__font-family)', baseClassName, className) }, children)))) : null, portalElement);
 };

package/src/components/OverlayTrigger/index.js

@@ -93,6 +93,9 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
     // when moving the mouse cursor from the trigger to the overlay
     // for this case we debounce the visible change for a very small amount of time
     debounce((visible) => {
+        // if (!visible) {
+        //   return;
+        // }
         onVisibleChange?.(visible);
         if (!visible) {
             hideTimeoutRef.current = setTimeout(() => {

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

@@ -1,18 +1,34 @@
 import * as React from 'react';
-import { BoxProps, FlexProps } from 'rebass';
 import { ReactNode, HTMLProps } from 'react';
+import { FlexProps } from '../Flex';
 export declare const baseClassName = "ab-Panel";
 export interface HeaderProps extends FlexProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
 }
-export type PanelProps = HTMLProps<HTMLElement> & {
+export type PanelProps = HTMLProps<HTMLDivElement> & {
     header?: ReactNode | string;
     children?: ReactNode;
     headerProps?: HeaderProps;
-    bodyProps?: BoxProps;
+    bodyProps?: {
+        className?: string;
+        style?: React.CSSProperties;
+    };
     variant?: 'default' | 'primary' | 'modern';
     border?: string | number;
-    borderRadius?: string | number;
     bodyScroll?: string | boolean;
-} & BoxProps;
-declare const Panel: React.FC<PanelProps>;
+} & FlexProps;
+declare const PlainHeader: ({ children, className }: {
+    children?: ReactNode;
+    className?: string;
+}) => React.JSX.Element;
+declare const FlexBody: ({ children, className }: {
+    children?: ReactNode;
+    className?: string;
+}) => React.JSX.Element;
+declare const Panel: React.FC<PanelProps> & {
+    FlexBody: typeof FlexBody;
+    PlainHeader: typeof PlainHeader;
+};
 export default Panel;

package/src/components/Panel/index.js

@@ -1,30 +1,36 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
-import join from '../utils/join';
+import clsx from 'clsx';
+import { Box, Flex } from '../Flex';
+import { twMerge } from '../../twMerge';
 export const baseClassName = 'ab-Panel';
-const Header = ({ children, variant = 'default', ...headerProps }) => {
+const DEFAULT_BODY_CLS = 'twa:relative twa:flex-1 twa:p-2 twa:bg-defaultbackground twa:text-text-on-defaultbackground';
+const Header = ({ children, variant = 'default', className, style, onClick, ...flexProps }) => {
     if (!children) {
         return null;
     }
-    const style = {};
-    return (React.createElement(Flex, { flexDirection: "row", alignItems: "center", ...headerProps, style: { ...style, ...headerProps.style }, className: join(`${baseClassName}__header`, `${baseClassName}__header--variant-${variant}`) }, children));
+    return (React.createElement(Flex, { flexDirection: "row", alignItems: "center", style: { ...style }, onClick: onClick, className: twMerge(`${baseClassName}__header ${baseClassName}__header--variant-${variant}`, className), ...flexProps }, children));
 };
-const Body = ({ children, bodyScroll, variant, ...bodyProps }) => {
+const Body = ({ children, bodyScroll, variant, className, style, }) => {
     if (!children) {
         return null;
     }
     if (bodyScroll === true) {
         bodyScroll = 'auto';
     }
-    return (React.createElement(Box, { ...bodyProps, className: join(`${baseClassName}__body`, variant && `${baseClassName}__body--variant-${variant}`, bodyScroll ? `${baseClassName}__body--scroll-${bodyScroll}` : null) }, children));
+    const bodyCls = clsx(DEFAULT_BODY_CLS, `${baseClassName}__body`, variant && `${baseClassName}__body--variant-${variant}`, bodyScroll ? `twa:overflow-auto` : null, {
+        'twa:bg-primarylight twa:text-text-on-primary twa:border-0': variant === 'modern',
+    }, className);
+    return (React.createElement(Box, { style: style, className: bodyCls }, children));
+};
+const PlainHeader = ({ children, className }) => {
+    return (React.createElement(Box, { className: clsx(`${baseClassName}__header`, `${baseClassName}__header--variant-plain`, className) }, children));
+};
+const FlexBody = ({ children, className }) => {
+    return (React.createElement(Box, { className: clsx(DEFAULT_BODY_CLS, `${baseClassName}__body`, `${baseClassName}__body--variant-flex`, 'twa:overflow-auto twa:min-h-0', 'twa:flex-1 twa:flex twa:flex-col', className) }, children));
 };
 const Panel = (props) => {
-    const { borderRadius, border, className, header, children, headerProps, bodyProps, bodyScroll, variant = 'default', ...boxProps } = props;
+    const { border, className, header, children, headerProps, bodyProps, bodyScroll, variant = 'default', ...boxProps } = props;
     const style = {};
-    if (borderRadius !== undefined) {
-        style['--ab-cmp-panel__border-radius'] =
-            typeof borderRadius == 'number' ? `var(--ab-space-${borderRadius})` : borderRadius;
-    }
     const headerStyle = {
         border,
         ...(headerProps ? headerProps.style : null),
@@ -33,8 +39,41 @@ const Panel = (props) => {
         border,
         ...(bodyProps ? bodyProps.style : null),
     };
-    return (React.createElement(Box, { ...boxProps, style: { ...style, ...boxProps.style }, className: join(className, baseClassName, `${baseClassName}--variant-${variant}`, !header ? `${baseClassName}--no-header` : `${baseClassName}--with-header`) },
-        React.createElement(Header, { ...headerProps, style: headerStyle, variant: variant }, header),
-        React.createElement(Body, { ...bodyProps, style: bodyStyle, bodyScroll: bodyScroll, variant: variant }, children)));
+    const cls = twMerge(clsx(baseClassName, `${baseClassName}--variant-${variant}`, !header ? `${baseClassName}--no-header` : `${baseClassName}--with-header`, 'twa:rounded-standard', 'twa:flex twa:flex-col'), className);
+    let headerCls = headerProps?.className;
+    if (cls.includes('twa:rounded-none')) {
+        headerCls = twMerge(headerCls, 'twa:rounded-none');
+    }
+    let bodyCls = bodyProps?.className;
+    if (cls.includes('twa:rounded-none')) {
+        bodyCls = twMerge(bodyCls, 'twa:rounded-none');
+    }
+    if (cls.includes('twa:border-none')) {
+        bodyCls = twMerge(bodyCls, 'twa:border-none');
+    }
+    let childrenArr = React.Children.toArray(children);
+    let theBody;
+    let theHeader;
+    childrenArr.forEach((child) => {
+        if (React.isValidElement(child) && child.type === FlexBody) {
+            theBody = child;
+        }
+        else if (React.isValidElement(child) && child.type === PlainHeader) {
+            theHeader = child;
+        }
+    });
+    if (theHeader) {
+        childrenArr = childrenArr.filter((child) => child !== theHeader);
+        theHeader = (React.createElement(PlainHeader, { ...theHeader.props, className: clsx(headerCls, theHeader.props.className ?? '') }));
+    }
+    if (theBody) {
+        theBody = (React.createElement(FlexBody, { ...theBody.props, className: clsx(bodyCls, theBody.props.className ?? '') }));
+    }
+    return (React.createElement(Box, { ...boxProps, style: { ...style, ...boxProps.style }, className: cls },
+        theHeader ?? (React.createElement(Header, { ...headerProps, style: headerStyle, variant: variant, className: headerCls }, header)),
+        theBody ??
+            (childrenArr.length > 0 ? (React.createElement(Body, { ...bodyProps, style: bodyStyle, bodyScroll: bodyScroll, variant: variant, className: twMerge(bodyCls) }, childrenArr)) : null)));
 };
+Panel.PlainHeader = PlainHeader;
+Panel.FlexBody = FlexBody;
 export default Panel;

package/src/components/PopupWithFooter.js

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import Dialog from './Dialog';
 import FlexWithFooter from './FlexWithFooter';
+import { twMerge } from '../twMerge';
 export const PopupWithFooter = React.forwardRef((props, ref) => {
     const { showModal, onHide, footer, maxWidth, style, ...dialogProps } = props;
-    return (React.createElement(Dialog, { ...dialogProps, ref: ref, isOpen: showModal, onDismiss: onHide, showCloseButton: false, padding: 0 },
+    return (React.createElement(Dialog, { ...dialogProps, ref: ref, isOpen: showModal, onDismiss: onHide, showCloseButton: false, className: twMerge('twa:p-0', dialogProps.className) },
         React.createElement(FlexWithFooter, { flexDirection: "column", style: style, footer: footer, footerProps: {
-                padding: 2,
-                backgroundColor: 'primary',
-                className: 'ab-Popup__footer',
+                className: 'ab-Popup__footer twa:p-2 twa:bg-primary',
             }, children: props.children })));
 });

package/src/components/ProgressIndicator/ProgressIndicator.js

@@ -5,7 +5,7 @@ import { LoaderSpinner } from '../Loader';
 import { useAdaptable } from '../../View/AdaptableContext';
 import { ExternalRenderer } from '../../View/Components/ExternalRenderer';
 import Dialog from '../Dialog';
-import { Box, Flex } from 'rebass';
+import { Box, Flex } from '../Flex';
 export const ProgressIndicator = () => {
     const adaptable = useAdaptable();
     const { active, text, render, frameworkComponent, renderMode } = useSelector((state) => state.Popup.ProgressIndicator);
@@ -62,9 +62,9 @@ export const ProgressIndicator = () => {
         // Otherwise use the default Flex layout
         (React.createElement(
             Flex,
-            { alignItems: "center", flexDirection: "column", p: 3, className: "ab-ProgressIndicator-body" },
+            { alignItems: "center", flexDirection: "column", className: "ab-ProgressIndicator-body twa:p-3" },
             React.createElement(LoaderSpinner, null),
-            React.createElement(Box, { mt: 3 },
+            React.createElement(Box, { className: "twa:mt-3" },
                 text && React.createElement(Box, null, text),
                 customEl)
         )))))

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ReactNode, SyntheticEvent } from 'react';
-import { BoxProps, FlexProps } from 'rebass';
+import { BoxProps } from '../Flex';
+type Variant = 'default' | 'text-only';
 type TypeProps = {
     checked?: boolean;
     as?: any;
@@ -10,20 +11,41 @@ type TypeProps = {
     children?: ReactNode | React.JSX.Element;
     gapDistance?: number;
     childrenPosition?: 'start' | 'end';
+    variant?: Variant;
 };
 export interface RadioProps extends TypeProps, Omit<BoxProps, keyof TypeProps> {
+    tabIndex?: number;
+    id?: string;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
 }
 export declare const useRadioContext: <T extends unknown>() => {
     value: T;
     onChange: (value: T) => void;
     name: string;
+    variant: Variant;
 };
 declare const Radio: ({ children, checked, onChange, value, name, gapDistance, childrenPosition, as, id, tabIndex, disabled, ...props }: RadioProps) => React.JSX.Element;
-export declare const RadioGroup: <T extends unknown>(props: FlexProps & {
-    orientation: 'horizontal' | 'vertical';
+export declare const RadioGroup: <T extends unknown>(props: {
+    orientation: "horizontal" | "vertical";
     value?: T;
     name?: string;
     defaultValue?: T;
     onRadioChange?: (value: T) => void;
+    className?: string;
+    children: React.ReactNode;
+    /**
+     * The variant of the radio group.
+     * @default 'default' - will show the radio button and the text
+     *
+     * 'text-only' - will show the text only and hide the radio button
+     */
+    variant?: Variant;
 }) => React.JSX.Element;
+export declare const radioGroupStyling: {
+    horizontalTextOnly: string;
+};
 export default Radio;

package/src/components/Radio/index.js

@@ -1,18 +1,22 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Box, Flex } from 'rebass';
 import useProperty from '../utils/useProperty';
+import { Box, Flex } from '../Flex';
+import { twMerge } from '../../twMerge';
+import clsx from 'clsx';
+import { targetChildren } from '../twUtils';
 const RadioContext = React.createContext({
     value: null,
     name: '',
     onChange: (v) => { },
+    variant: 'default',
 });
 export const useRadioContext = () => {
     return React.useContext(RadioContext);
 };
 const Radio = ({ children, checked, onChange, value, name, gapDistance = 10, childrenPosition = 'end', as = 'label', id, tabIndex, disabled, ...props }) => {
     const context = useRadioContext();
-    const { value: contextValue, onChange: contextOnChange, name: contextName } = context;
+    const { value: contextValue, onChange: contextOnChange, name: contextName, variant } = context;
     const [stateChecked, setStateChecked] = useState(false);
     const computedChecked = checked !== undefined
         ? checked
@@ -36,34 +40,28 @@ const Radio = ({ children, checked, onChange, value, name, gapDistance = 10, chi
     const beforeGap = childrenPosition === 'start' ? gap : null;
     const after = childrenPosition === 'end' ? children : null;
     const afterGap = childrenPosition === 'end' ? gap : null;
-    return (React.createElement(Box, { className: "ab-Radio", my: 2, ...props, style: {
-            display: 'inline-flex',
-            flexFlow: 'row',
-            alignItems: 'center',
-            cursor: 'pointer',
-            position: 'relative',
-            ...props.style,
-        }, as: as },
+    return (React.createElement(Box, { ...props, className: twMerge(`ab-Radio twa:my-2 twa:inline-flex twa:flex-row twa:items-center twa:cursor-pointer twa:relative`, props.className), "data-checked": computedChecked, as: as },
         before,
         beforeGap,
-        React.createElement("input", { disabled: disabled, className: "ab-Radio-input", id: id, checked: computedChecked, type: "radio", name: name ?? contextName, value: value, tabIndex: tabIndex, style: {
-                verticalAlign: 'middle',
-                margin: '0px',
-                borderRadius: '50%',
-                cursor: 'pointer',
-                position: 'relative',
-            }, onChange: onInputChange }),
+        React.createElement("input", { disabled: disabled, className: clsx('ab-Radio-input', 'twa:align-middle', 'twa:m-0', 'twa:rounded-full', 'twa:cursor-pointer', 'twa:position-relative', 'twa:w-[1rem]', 'twa:h-[1rem]', 'twa:min-w-[1rem]', 'twa:min-h-[1rem]', variant === 'default' && 'ab-Radio-input--default', variant === 'text-only' && 'ab-Radio-input--text-only twa:size-0 twa:opacity-0'), id: id, checked: computedChecked, type: "radio", name: name ?? contextName, value: value, tabIndex: tabIndex, onChange: onInputChange }),
         afterGap,
         after));
 };
 export const RadioGroup = (props) => {
-    const { orientation, value: _value, name, onRadioChange, ...flexProps } = props;
+    const { orientation, value: _value, name, onRadioChange, children, variant = 'default' } = props;
     const [value, setValue] = useProperty(props, 'value', undefined, {
         onChange: (value) => {
             onRadioChange(value);
         },
     });
-    return (React.createElement(RadioContext.Provider, { value: { value, onChange: setValue, name } },
-        React.createElement(Flex, { className: "ab-RadioGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start', ...flexProps })));
+    return (React.createElement(RadioContext.Provider, { value: { value, onChange: setValue, name, variant } },
+        React.createElement(Flex, { className: clsx('ab-RadioGroup', props.className), flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex-start' }, children)));
+};
+export const radioGroupStyling = {
+    horizontalTextOnly: clsx('twa:bg-primarylight twa:rounded-standard twa:p-1 twa:gap-5', {
+        'twa:*:flex-1 twa:*:rounded-standard twa:*:p-1 twa:*:m-0': 'default styles for all the radio buttons',
+        'twa:*:data-[checked=true]:bg-accent twa:*:data-[checked=true]:text-accent-foreground': 'style the checked state',
+        [targetChildren.focusWithinOutline]: 'styles for when a radio is currently focused - show a ring, so people know they can do keyboard nav with left/right arrow keys',
+    }),
 };
 export default Radio;