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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 import { ModalProps } from '../Modal';
 import { WindowModalProps } from '../WindowModal';
+import { BoxProps } from '../Flex';
 type TypeProps = {
     modal?: boolean;
     autoFocus?: boolean;
@@ -17,11 +17,17 @@ type TypeProps = {
     dismissOnClickOutside?: boolean;
 };
 export interface DialogProps extends Omit<BoxProps, 'ref'>, TypeProps {
+    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onChange?: (event: React.FormEvent<HTMLDivElement>) => void;
+    className?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
 }
 export type DialogRefType = {
     bringToFront: VoidFunction;
 };
 export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<DialogRefType>>;
 export default Dialog;

package/src/components/Dialog/index.js

@@ -1,17 +1,18 @@
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
-import join from '../utils/join';
 import contains from '../utils/contains';
 import captureTabNavigation from '../utils/captureTabNavigation';
-import { Box } from 'rebass';
 import { Modal } from '../Modal';
 import useIsOpen from './useIsOpen';
 import useAutoFocus from '../utils/useAutoFocus';
 import { Icon } from '../icons';
 import { WindowModal } from '../WindowModal';
+import { Box } from '../Flex';
+import clsx from 'clsx';
+import { targetOwn } from '../twUtils';
 const baseClassName = 'ab-Dialog';
 export const Dialog = React.forwardRef((props, dialogRef) => {
-    let { modal, fixed, focusOnBrowserVisible = false, autoFocus = true, className, children, modalProps, dismissOnClickOutside = false, onDismiss, windowModal, windowModalProps, ...boxProps } = props;
+    let { modal, fixed, focusOnBrowserVisible = false, autoFocus = true, className, children, modalProps, dismissOnClickOutside = false, onDismiss, windowModal, windowModalProps, showCloseButton = true, isOpen: _isOpenProp, ...boxProps } = props;
     modal = props.modal === undefined ? true : props.modal;
     fixed = props.fixed === undefined ? true : props.fixed;
     const [isOpen, setIsOpen] = useIsOpen(props);
@@ -22,7 +23,6 @@ export const Dialog = React.forwardRef((props, dialogRef) => {
         previous: ({ autoFocus }) => autoFocus && isOpen,
         shouldFocus: ({ autoFocus }) => autoFocus && isOpen,
     }, boxRef);
-    const showCloseButton = props.showCloseButton === undefined ? true : props.showCloseButton;
     const onKeyDown = (e) => {
         if (props.onKeyDown) {
             props.onKeyDown(e);
@@ -94,7 +94,7 @@ export const Dialog = React.forwardRef((props, dialogRef) => {
     if (!isOpen) {
         return null;
     }
-    const closeButton = showCloseButton ? (React.createElement(Box, { padding: 1, title: "Close dialog", onClick: () => setIsOpen(false), className: `${baseClassName}__close-button` },
+    const closeButton = showCloseButton ? (React.createElement(Box, { title: "Close dialog", onClick: () => setIsOpen(false), className: clsx(`${baseClassName}__close-button twa:p-1`, 'twa:text-accentlight', 'twa:text-shadow-[0_1px_0_#fff]', `twa:text-3 twa:cursor-pointer twa:leading-none twa:font-bold`, 'twa:absolute twa:top-[6px] twa:right-[6px]') },
         React.createElement(Icon, { size: 20, name: "close" }))) : null;
     const setPreventDismissFlag = (e) => {
         if (dismissOnClickOutside) {
@@ -106,10 +106,10 @@ export const Dialog = React.forwardRef((props, dialogRef) => {
             if (boxProps && boxProps.onClick) {
                 boxProps.onClick(e);
             }
-        }, onKeyDown: onKeyDown, className: join(baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef },
+        }, onKeyDown: onKeyDown, className: clsx('twa:relative', 'twa:bg-defaultbackground', 'twa:text-text-on-defaultbackground', 'twa:fill-text-on-defaultbackground', 'twa:rounded-standard', 'twa:flex twa:flex-col', targetOwn.focusOutline, targetOwn.focusWithinOutline, baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef },
         children,
         closeButton));
-    const content = fixed ? (React.createElement("div", { onClick: setPreventDismissFlag, className: `${baseClassName}-fixed-wrapper` }, box)) : (box);
+    const content = fixed ? (React.createElement("div", { onClick: setPreventDismissFlag, className: clsx(`${baseClassName}-fixed-wrapper`, 'twa:fixed twa:inset-0', 'twa:m-auto', 'twa:flex twa:items-center twa:justify-center') }, box)) : (box);
     if (windowModal) {
         return React.createElement(WindowModal, { ...windowModalProps }, content);
     }

package/src/components/DragAndDropContext/DragAndDropContext.d.ts

@@ -3,5 +3,5 @@ import { ModuleManagerProps } from './ModuleManager';
 import { ModuleDraggableItem } from './types';
 export declare const DragAndDropContext: React.Context<{
     availableItems: ModuleDraggableItem[];
-    permittedActions: ModuleManagerProps['permittedActions'];
+    permittedActions: ModuleManagerProps["permittedActions"];
 }>;

package/src/components/DragAndDropContext/ModuleManager.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { BaseModuleTab, ModuleDraggableItem } from './types';
 export interface ModuleManagerProps {
     availableItems: ModuleDraggableItem[];
+    className?: string;
     disabled: boolean;
     onTabsChange: (tabs: BaseModuleTab[]) => void;
     tabs: BaseModuleTab[];

package/src/components/DragAndDropContext/ModuleManager.js

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { DragDropContext } from '../dnd';
-import { PanelWithButton } from '../../View/Components/Panels/PanelWithButton';
-import SimpleButton from '../SimpleButton';
 import { DragAndDropContext } from './DragAndDropContext';
 import { TabList } from './TabList';
 import { UnusedPanel } from './UnusedPanel';
+import { Flex } from '../Flex';
+import clsx from 'clsx';
+import { Card } from '../Card';
 export const ModuleManager = (props) => {
-    const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, dragItemText, permittedActions, } = props;
+    const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, dragItemText, permittedActions, className, } = props;
     const contextValue = React.useMemo(() => {
         const preparedPermittedAction = {
             createTab: true,
@@ -82,8 +83,10 @@ export const ModuleManager = (props) => {
                 handleToolbarDragEnd(result);
         } },
         React.createElement(DragAndDropContext.Provider, { value: contextValue },
-            React.createElement("div", { className: "ab-ModuleSelector", style: { display: 'flex', flexDirection: 'column' } },
+            React.createElement(Flex, { flexDirection: "column", className: clsx('ab-ModuleSelector twa:flex-1', className) },
                 React.createElement(UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: unusedItems, dragItemText: dragItemText }),
-                React.createElement(PanelWithButton, { className: "ab-ModuleSelector-UsedPanel", headerText: tabsTitle, button: contextValue.permittedActions.createTab && (React.createElement(SimpleButton, { disabled: disabled, onClick: handleTabAdd }, "Add Tab")) },
-                    React.createElement(TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName }))))));
+                React.createElement(Card, { className: "twa:flex-1 twa:m-2 ab-ModuleSelector-UsedPanel" },
+                    React.createElement(Card.Title, { border: false }, tabsTitle),
+                    React.createElement(Card.Body, { className: "twa:px-2" },
+                        React.createElement(TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined })))))));
 };

package/src/components/DragAndDropContext/TabList.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { BaseModuleTab } from './types';
-export declare function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, }: {
+export declare function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }: {
     disabled: boolean;
     tabs: BaseModuleTab[];
     onRemoveTab: (tabIndex: number) => void;
     onRemoveToolbar: (tabIndex: number, toolbarIndex: number) => void;
     onChangeTabName: (tabIndex: number, tabName: string) => void;
+    onNewTab?: () => void;
 }): React.JSX.Element;
 export declare function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }: {
     tab: BaseModuleTab;

package/src/components/DragAndDropContext/TabList.js

@@ -1,45 +1,65 @@
 import * as React from 'react';
 import { Draggable, Droppable } from '../dnd';
-import { Box, Flex } from 'rebass';
 import { Icon } from '../icons';
 import SimpleButton from '../SimpleButton';
 import { DragAndDropContext } from './DragAndDropContext';
-export function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, }) {
-    return (React.createElement(Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", { ...provided.droppableProps, className: "ab-ModuleSelector__TabList", ref: provided.innerRef, style: { display: 'flex' }, "data-name": "dashboard-tabs" },
+import { Box, Flex } from '../Flex';
+export function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }) {
+    return (React.createElement(Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", { ...provided.droppableProps, className: "ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto", ref: provided.innerRef, "data-name": "dashboard-tabs" },
         tabs.map((tab, tabIndex) => (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabIndex: tabIndex, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }))),
+        !disabled && onNewTab ? (React.createElement(Flex, { alignItems: "center", justifyContent: "center", className: "ab-ModuleSelector__TabItem twa:min-w-32 twa:border-dashed twa:cursor-pointer twa:bg-primarylight twa:text-primary-foreground twa:hover:bg-primary", onClick: onNewTab },
+            React.createElement("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic" },
+                React.createElement(Icon, { name: "plus", size: 32 }),
+                "Click to add tab"))) : null,
         provided.placeholder))));
 }
 export function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
     const context = React.useContext(DragAndDropContext);
     const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
-    return (React.createElement(Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => (React.createElement("div", { className: "ab-ModuleSelector__TabItem", "data-name": "dashboard-tab", ref: provided.innerRef, ...provided.draggableProps, style: {
-            ...(isDragDisabled ? {} : provided.draggableProps.style),
-        } },
-        React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
-            React.createElement("div", { ...(disabled ? {} : provided.dragHandleProps), style: context.permittedActions.dragAndDropTab
-                    ? {}
-                    : {
-                        display: 'none',
-                    } },
-                React.createElement(Icon, { name: "drag" })),
-            context.permittedActions.editTabName ? (React.createElement("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
-                    onChangeTabName(event.target.value);
-                } })) : (tab.Name),
-            context.permittedActions.deleteTab && (React.createElement(SimpleButton, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))),
-        React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, droppableId: String(tabIndex), onRemove: onRemoveToolbar })))));
+    return (React.createElement(Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => {
+        let showHeader = true;
+        if (tab.Name === '' &&
+            !context.permittedActions.editTabName &&
+            !context.permittedActions.deleteTab) {
+            showHeader = false;
+        }
+        return (React.createElement("div", { className: "ab-ModuleSelector__TabItem twa:min-w-32", "data-name": "dashboard-tab", ref: provided.innerRef, ...provided.draggableProps, style: {
+                ...(isDragDisabled ? {} : provided.draggableProps.style),
+            } },
+            showHeader ? (React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
+                React.createElement("div", { ...(disabled ? {} : provided.dragHandleProps), style: context.permittedActions.dragAndDropTab
+                        ? {}
+                        : {
+                            display: 'none',
+                        } },
+                    React.createElement(Icon, { name: "drag" })),
+                context.permittedActions.editTabName ? (React.createElement("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
+                        onChangeTabName(event.target.value);
+                    } })) : (tab.Name),
+                context.permittedActions.deleteTab && (React.createElement(SimpleButton, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove })))) : null,
+            React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, droppableId: String(tabIndex), onRemove: onRemoveToolbar })));
+    }));
 }
 export function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
-    return (React.createElement(Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(Box, { className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef, ...(disabled ? {} : provided.droppableProps), "data-name": "dashboard-toolbar-drop-target", backgroundColor: snapshot.isDraggingOver ? 'var(--ab-dashboard-tab-drop-target__background)' : '' },
+    return (React.createElement(Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(Box, { className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef, ...(disabled ? {} : provided.droppableProps), "data-name": "dashboard-toolbar-drop-target", style: {
+            backgroundColor: snapshot.isDraggingOver
+                ? 'var(--ab-dashboard-tab-drop-target__background)'
+                : '',
+        } },
         toolbars?.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
+        toolbars.length === 0 ? (React.createElement("div", { className: "ab-ModuleSelector__ToolbarList__placeholder twa:flex twa:items-center twa:justify-center twa:h-full twa:italic twa:text-center" }, "Drag and drop toolbar here")) : null,
         provided.placeholder))));
 }
 export function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
     const { availableItems } = React.useContext(DragAndDropContext);
     let currentItem = availableItems.find((t) => t.Id === toolbar);
     const title = currentItem ? currentItem.Title : toolbar;
-    return (React.createElement(Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(Flex, { className: "ab-ModuleSelector__ToolbarItem", alignItems: "center", mb: 1, pl: 1, backgroundColor: snapshot.isDragging
-            ? 'var(--ab-dashboard-toolbar-drag__background)'
-            : 'var(--ab-color-primarylight)', ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: provided.draggableProps.style },
-        React.createElement("div", { style: { flex: 1 } }, title),
-        React.createElement(SimpleButton, { disabled: disabled, icon: "close", variant: "text", padding: 1, onClick: onRemove })))));
+    return (React.createElement(Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(Flex, { className: `ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1`, alignItems: "center", ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
+            ...provided.draggableProps.style,
+            backgroundColor: snapshot.isDragging
+                ? 'var(--ab-dashboard-toolbar-drag__background)'
+                : 'var(--ab-color-primarylight)',
+        } },
+        React.createElement("div", { className: "twa:flex-1" }, title),
+        React.createElement(SimpleButton, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })))));
 }

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { Draggable, Droppable } from '../dnd';
-import { Box } from 'rebass';
 import { DragAndDropContext } from './DragAndDropContext';
+import { Box } from '../Flex';
+import clsx from 'clsx';
 export function UnusedPanel({ items, disabled, title, dragItemText, }) {
-    return (React.createElement(Box, { pb: 1, mb: 2, className: "ab-ModuleSelector__UnusedPanel", "data-name": "unusedpanel-items" },
-        React.createElement(Box, { p: 2 },
+    return (React.createElement(Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items" },
+        React.createElement(Box, { className: "twa:p-2" },
             React.createElement("b", null, title),
             " (",
             dragItemText,
@@ -12,13 +13,7 @@ export function UnusedPanel({ items, disabled, title, dragItemText, }) {
         React.createElement(UnusedItemList, { disabled: disabled, items: items })));
 }
 function UnusedItemList({ items, disabled }) {
-    return (React.createElement(Droppable, { droppableId: "UNUSED", type: "TOOLBAR", isDropDisabled: true, direction: "horizontal" }, (provided) => (React.createElement("div", { ref: provided.innerRef, "data-name": "unusedpanel-items-list", ...provided.droppableProps, style: {
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            paddingLeft: 'var(--ab-space-2)',
-            paddingRight: 'var(--ab-space-2)',
-        } },
+    return (React.createElement(Droppable, { droppableId: "UNUSED", type: "TOOLBAR", isDropDisabled: true, direction: "horizontal" }, (provided) => (React.createElement("div", { ref: provided.innerRef, "data-name": "unusedpanel-items-list", ...provided.droppableProps, className: 'twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1' },
         items.map((unusedItem, unusedItemIndex) => (React.createElement(UnusedItem, { disabled: disabled, key: unusedItem, unusedItem: unusedItem, unusedItemIndex: unusedItemIndex }))),
         provided.placeholder))));
 }
@@ -34,15 +29,12 @@ function UnusedItem({ unusedItem, unusedItemIndex, disabled, }) {
                 ...provided.dragHandleProps,
             };
         const dragStyle = disabled ? {} : provided.draggableProps.style;
-        return (React.createElement("div", { "data-name": "unused-item", ref: provided.innerRef, ...eventHandlers, style: {
+        return (React.createElement("div", { "data-name": "unused-item", ref: provided.innerRef, ...eventHandlers, className: clsx('twa:rounded-md twa:text-sm twa:text-text-on-primary twa:p-2'), style: {
                 ...dragStyle,
                 border: '1px solid var(--ab-color-primary)',
                 backgroundColor: snapshot.isDragging
                     ? 'var(--ab-dashboard-toolbar-drag__background)'
-                    : 'var(--ab-color-primarylight)',
-                padding: 'var(--ab-space-1) var(--ab-space-2)',
-                marginRight: 'var(--ab-space-1)',
-                marginBottom: 'var(--ab-space-1)',
+                    : 'var(--ab-color-primary)',
             } }, title));
     }));
 }

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { BoxProps } from 'rebass';
+import { FlexProps } from '../Flex';
 export type DropdownOption = {
     label: string;
     value: string;
 };
-export type DropdownProps = Omit<BoxProps, 'onChange' | 'value'> & {
+export type DropdownProps = Omit<FlexProps & React.HTMLProps<HTMLDivElement>, 'onChange' | 'value' | 'as' | 'flexDirection' | 'alignItems' | 'height' | 'size'> & {
     autoFocus?: boolean;
     expanded?: boolean;
     disabled?: boolean;

package/src/components/Dropdown/index.js

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { useState, useRef } from 'react';
-import { Flex } from 'rebass';
 import join from '../utils/join';
 import useProperty from '../utils/useProperty';
 import Arrows from './Arrows';
 import SimpleButton from '../SimpleButton';
+import { Flex } from '../Flex';
+import { twMerge } from '../../twMerge';
 const baseClassName = 'ab-Dropdown';
 const Dropdown = (props) => {
     let { options, multiple, name, autoFocus, showEmptyItem = true, showClearButton, disabled, allowSearch, clearButtonProps, value: _, onChange: __, style, onExpand, ...boxProps } = props;
@@ -76,16 +77,14 @@ const Dropdown = (props) => {
         selectedText = placeholder;
     }
     //20  ... 20 16
-    const renderClearButton = () => (React.createElement(SimpleButton, { variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, px: 0, py: 0, marginRight: 1, ...clearButtonProps, style: {
-            zIndex: 10,
-            color: 'inherit',
+    const renderClearButton = () => (React.createElement(SimpleButton, { variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, ...clearButtonProps, className: twMerge('twa:p-0 twa:mr-1 twa:z-10 twa:color-inherit', clearButtonProps.className), style: {
             ...(clearButtonProps ? clearButtonProps.style : null),
         }, onClick: (e) => {
             e.preventDefault();
             onChange(null, e);
         } }));
-    return (React.createElement(Flex, { ref: domRef, flexDirection: "row", alignItems: "center", ...boxProps, className: join(props.className, baseClassName, !selectedOption ? `${baseClassName}--empty` : `${baseClassName}--not-empty`, focused ? `${baseClassName}--focused` : `${baseClassName}--not-focused`, disabled ? `${baseClassName}--disabled` : null), style: style, tabIndex: focused ? -1 : props.tabIndex || 0, onFocus: onFocus, onBlur: onBlur },
-        React.createElement("div", { style: { display: 'inline-block' }, className: `${baseClassName}__text` },
+    return (React.createElement(Flex, { ref: domRef, flexDirection: 'row', alignItems: "center", ...boxProps, className: join(props.className, baseClassName, !selectedOption ? `${baseClassName}--empty` : `${baseClassName}--not-empty`, focused ? `${baseClassName}--focused` : `${baseClassName}--not-focused`, disabled ? `${baseClassName}--disabled` : null), style: style, tabIndex: focused ? -1 : props.tabIndex || 0, onFocus: onFocus, onBlur: onBlur },
+        React.createElement("div", { className: `${baseClassName}__text twa:inline-block` },
             selectedText,
             React.createElement(Arrows, null)),
         React.createElement("select", { ref: selectRef, tabIndex: -1, disabled: disabled, value: value == null ? '' : value, onChange: (e) => {

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { BoxProps } from 'rebass';
 import { SimpleButtonProps } from '../SimpleButton';
 import { ExpandedProps } from './useExpanded';
 import DropdownButtonItem from './DropdownButtonItem';
 import { OverlayTriggerProps } from '../OverlayTrigger';
+import { BoxProps } from '../Flex';
 export declare const DROPDOWN_ICON: React.JSX.Element;
 export type DropdownButtonProps = React.PropsWithChildren<Omit<BoxProps, 'ref'>> & Omit<React.HTMLProps<HTMLElement>, 'ref'> & SimpleButtonProps & ExpandedProps & {
     collapseOnItemClick?: boolean;
@@ -24,25 +24,5 @@ export type DropdownButtonProps = React.PropsWithChildren<Omit<BoxProps, 'ref'>>
     isItemDisabled?: (item: DropdownButtonItem) => boolean | undefined;
     showToggleIcon?: boolean;
 };
-declare const DropdownButton: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & {
-    children?: React.ReactNode;
-} & Omit<React.HTMLProps<HTMLElement>, "ref"> & SimpleButtonProps & ExpandedProps & {
-    collapseOnItemClick?: boolean;
-    columns?: string[];
-    overlayProps?: OverlayTriggerProps;
-    listOffset?: number;
-    items?: DropdownButtonItem[];
-    stopPropagationOnOverlay?: boolean;
-    idProperty?: string;
-    showClearButton?: boolean;
-    focusOnClear?: boolean;
-    onClear?: () => void;
-    clearButtonProps?: SimpleButtonProps;
-    listItemClassName?: string;
-    listStyle?: React.CSSProperties;
-    listMinWidth?: number;
-    listItemStyle?: React.CSSProperties | ((item: DropdownButtonItem, index: number) => React.CSSProperties);
-    isItemDisabled?: (item: DropdownButtonItem) => boolean | undefined;
-    showToggleIcon?: boolean;
-} & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<DropdownButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default DropdownButton;

package/src/components/DropdownButton/index.js

@@ -5,9 +5,10 @@ import SimpleButton from '../SimpleButton';
 import useExpanded from './useExpanded';
 import renderItem from './renderItem';
 import OverlayTrigger from '../OverlayTrigger';
+import clsx from 'clsx';
 export const DROPDOWN_ICON = (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24" },
     React.createElement("path", { d: "M7 10l5 5 5-5H7z" })));
-const spacer = React.createElement("div", { style: { flex: 1 } });
+const spacer = React.createElement("div", { className: "twa:flex-1" });
 const baseClassName = 'ab-DropdownButton';
 const defaultListItemStyle = {
     padding: 'var(--ab-cmp-dropdownbutton-list-item__padding)',
@@ -99,7 +100,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                 onClear();
             }
             buttonRef.current?.focus();
-        }, ml: 2, padding: 0, variant: 'text', icon: "close", ...clearButtonProps, style: {
+        }, className: "twa:ml-2 twa:p-0", variant: 'text', icon: "close", ...clearButtonProps, style: {
             ...clearButtonProps?.style,
             visibility: showClearButton ? 'visible' : 'hidden',
         } })) : null;
@@ -120,7 +121,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                     }
                 } }, content));
         }, ...overlayProps },
-        React.createElement(SimpleButton, { iconPosition: "end", ...(showToggleIcon && { icon, paddingRight: 0 }), ...domProps, ref: (btn) => {
+        React.createElement(SimpleButton, { iconPosition: "end", ...(showToggleIcon && { icon }), ...domProps, ref: (btn) => {
                 buttonRef.current = btn;
                 if (!theRef) {
                     return;
@@ -131,7 +132,9 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                 else {
                     theRef.current = btn;
                 }
-            }, style: domProps.style, className: className, onClick: (e) => {
+            }, style: domProps.style, className: clsx(className, {
+                'twa:pr-0': showToggleIcon,
+            }), onClick: (e) => {
                 if (domProps.onClick) {
                     domProps.onClick(e);
                 }

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { HTMLProps } from 'react';
-import { FlexProps } from 'rebass';
-type EmptyContentProps = HTMLProps<HTMLElement> & FlexProps & {};
+import { FlexProps } from '../Flex';
+type EmptyContentProps = HTMLProps<HTMLDivElement> & FlexProps & {};
 declare const EmptyContent: ({ children, className, style, ...flexProps }: EmptyContentProps) => React.JSX.Element;
 export default EmptyContent;

package/src/components/EmptyContent/index.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Box, Flex } from 'rebass';
-import join from '../utils/join';
+import { Box, Flex } from '../Flex';
+import clsx from 'clsx';
 const baseClassName = 'ab-EmptyContent';
 const EmptyContent = ({ children, className, style, ...flexProps }) => {
     if (typeof children === 'string') {
         children = React.createElement("p", null, children);
     }
-    return (React.createElement(Box, { flex: 1, className: `${baseClassName}__wrapper` },
-        React.createElement(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...flexProps, className: join(baseClassName, className), style: style }, children)));
+    return (React.createElement(Box, { className: `${baseClassName}__wrapper twa:flex-1 twa:relative twa:size-full` },
+        React.createElement(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...flexProps, className: clsx('twa:absolute twa:inset-0 twa:text-3 twa:text-center twa:p-4', 'twa:[&_p]:text-primary-foreground', baseClassName, className), style: style }, children)));
 };
 export default EmptyContent;

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

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

package/src/components/ErrorBox/index.js

@@ -1,8 +1,8 @@
 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-ErrorBox';
 const ErrorBox = (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-error twa:text-text-on-error', props.className, baseClassName) }));
 };
 export default ErrorBox;