@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

package/src/components/Panel/index.js

@@ -1,14 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import clsx from 'clsx';
 import { Box, Flex } from '../Flex';
 import { twMerge } from '../../twMerge';
 export const baseClassName = 'ab-Panel';
-const DEFAULT_BODY_CLS = 'twa:relative twa:flex-1 twa:p-2 twa:bg-defaultbackground twa:text-text-on-defaultbackground';
+const DEFAULT_BODY_CLS = 'twa:relative twa:flex-1 twa:p-2 twa:bg-defaultbackground twa:text-foreground';
 const Header = ({ children, variant = 'default', className, style, onClick, ...flexProps }) => {
     if (!children) {
         return null;
     }
-    return (React.createElement(Flex, { flexDirection: "row", alignItems: "center", style: { ...style }, onClick: onClick, className: twMerge(`${baseClassName}__header ${baseClassName}__header--variant-${variant}`, className), ...flexProps }, children));
+    return (_jsx(Flex, { flexDirection: "row", alignItems: "center", style: { ...style }, onClick: onClick, className: twMerge(`${baseClassName}__header ${baseClassName}__header--variant-${variant}`, className), ...flexProps, children: children }));
 };
 const Body = ({ children, bodyScroll, variant, className, style, }) => {
     if (!children) {
@@ -20,13 +21,13 @@ const Body = ({ children, bodyScroll, variant, className, style, }) => {
     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));
+    return (_jsx(Box, { style: style, className: bodyCls, children: children }));
 };
 const PlainHeader = ({ children, className }) => {
-    return (React.createElement(Box, { className: clsx(`${baseClassName}__header`, `${baseClassName}__header--variant-plain`, className) }, children));
+    return (_jsx(Box, { className: clsx(`${baseClassName}__header`, `${baseClassName}__header--variant-plain`, className), children: 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));
+    return (_jsx(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: children }));
 };
 const Panel = (props) => {
     const { border, className, header, children, headerProps, bodyProps, bodyScroll, variant = 'default', ...boxProps } = props;
@@ -64,15 +65,13 @@ const Panel = (props) => {
     });
     if (theHeader) {
         childrenArr = childrenArr.filter((child) => child !== theHeader);
-        theHeader = (React.createElement(PlainHeader, { ...theHeader.props, className: clsx(headerCls, theHeader.props.className ?? '') }));
+        theHeader = (_jsx(PlainHeader, { ...theHeader.props, className: clsx(headerCls, theHeader.props.className ?? '') }));
     }
     if (theBody) {
-        theBody = (React.createElement(FlexBody, { ...theBody.props, className: clsx(bodyCls, theBody.props.className ?? '') }));
+        theBody = (_jsx(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)));
+    return (_jsxs(Box, { ...boxProps, style: { ...style, ...boxProps.style }, className: cls, children: [theHeader ?? (_jsx(Header, { ...headerProps, style: headerStyle, variant: variant, className: headerCls, children: header })), theBody ??
+                (childrenArr.length > 0 ? (_jsx(Body, { ...bodyProps, style: bodyStyle, bodyScroll: bodyScroll, variant: variant, className: twMerge(bodyCls), children: childrenArr })) : null)] }));
 };
 Panel.PlainHeader = PlainHeader;
 Panel.FlexBody = FlexBody;

package/src/components/PopupWithFooter.js

@@ -1,11 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 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, className: twMerge('twa:p-0', dialogProps.className) },
-        React.createElement(FlexWithFooter, { flexDirection: "column", style: style, footer: footer, footerProps: {
+    return (_jsx(Dialog, { ...dialogProps, ref: ref, isOpen: showModal, onDismiss: onHide, showCloseButton: false, className: twMerge('twa:p-0', dialogProps.className), children: _jsx(FlexWithFooter, { flexDirection: "column", style: style, footer: footer, footerProps: {
                 className: 'ab-Popup__footer twa:p-2 twa:bg-primary',
-            }, children: props.children })));
+            }, children: props.children }) }));
 });

package/src/components/ProgressIndicator/ProgressIndicator.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useSelector } from 'react-redux';
 import { useEffect, useState } from 'react';
 import { LoaderSpinner } from '../Loader';
@@ -47,26 +47,21 @@ export const ProgressIndicator = () => {
     }, [active]);
     let customEl = null;
     if (render || frameworkComponent) {
-        customEl = React.createElement(ExternalRenderer, { render: render, frameworkComponent: frameworkComponent });
+        customEl = _jsx(ExternalRenderer, { render: render, frameworkComponent: frameworkComponent });
     }
     // Check if we should replace the default content
     const replaceContent = renderMode === 'dialog' && customEl;
-    return (React.createElement(
-        React.Fragment,
-        null,
-        active && (React.createElement(Dialog, { modal: true, isOpen: true, showCloseButton: false, className: `ab-ProgressIndicator ${visible ? 'ab-ProgressIndicator--visible' : ''}`, modalProps: {
-                style: progressIndicatorCoordinates,
-            } }, replaceContent ? (
-        // If renderMode is 'dialog', replace the entire content with custom element
-        customEl) : (
-        // Otherwise use the default Flex layout
-        (React.createElement(
-            Flex,
-            { alignItems: "center", flexDirection: "column", className: "ab-ProgressIndicator-body twa:p-3" },
-            React.createElement(LoaderSpinner, null),
-            React.createElement(Box, { className: "twa:mt-3" },
-                text && React.createElement(Box, null, text),
-                customEl)
-        )))))
+    return (_jsx(
+        _Fragment,
+        { children: active && (_jsx(Dialog, { modal: true, isOpen: true, showCloseButton: false, className: `ab-ProgressIndicator ${visible ? 'ab-ProgressIndicator--visible' : ''}`, modalProps: {
+                    style: progressIndicatorCoordinates,
+                }, children: replaceContent ? (
+                // If renderMode is 'dialog', replace the entire content with custom element
+                customEl) : (
+                // Otherwise use the default Flex layout
+                (_jsxs(
+                    Flex,
+                    { alignItems: "center", flexDirection: "column", className: "ab-ProgressIndicator-body twa:p-3", children: [_jsx(LoaderSpinner, {}), _jsxs(Box, { className: "twa:mt-3", children: [text && _jsx(Box, { children: text }), customEl] })] }
+                ))) })) }
     ));
 };

package/src/components/Radio/index.js

@@ -1,10 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useState } from 'react';
 import useProperty from '../utils/useProperty';
 import { Box, Flex } from '../Flex';
 import { twMerge } from '../../twMerge';
 import clsx from 'clsx';
-import { targetChildren } from '../twUtils';
+import { targetChildren, targetOwn } from '../twUtils';
 const RadioContext = React.createContext({
     value: null,
     name: '',
@@ -35,17 +36,12 @@ const Radio = ({ children, checked, onChange, value, name, gapDistance = 10, chi
             contextOnChange(value);
         }
     };
-    const gap = React.createElement("div", { style: { marginLeft: gapDistance, display: 'inline-block' } });
+    const gap = _jsx("div", { style: { marginLeft: gapDistance, display: 'inline-block' } });
     const before = childrenPosition === 'start' ? children : null;
     const beforeGap = childrenPosition === 'start' ? gap : null;
     const after = childrenPosition === 'end' ? children : null;
     const afterGap = childrenPosition === 'end' ? gap : null;
-    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: 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));
+    return (_jsxs(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, children: [before, beforeGap, _jsx("input", { disabled: disabled, className: clsx('ab-Radio-input', targetOwn.focusOutline, '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, children, variant = 'default' } = props;
@@ -54,8 +50,7 @@ export const RadioGroup = (props) => {
             onRadioChange(value);
         },
     });
-    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)));
+    return (_jsx(RadioContext.Provider, { value: { value, onChange: setValue, name, variant }, children: _jsx(Flex, { className: clsx('ab-RadioGroup', props.className), flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex-start', children: children }) }));
 };
 export const radioGroupStyling = {
     horizontalTextOnly: clsx('twa:bg-primarylight twa:rounded-standard twa:p-1 twa:gap-5', {

package/src/components/ResizeObserver/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
 import { getResizeObserverObject } from './getResizeObserverObject';
 export const setupResizeObserver = (node, callback) => {
@@ -90,5 +90,5 @@ export const ReactResizeObserver = ({ notifyOnMount = true, earlyAttach = false,
         props.onResize(size);
     }, [props.onResize]);
     useResizeObserver(ref, onResize, { earlyAttach: earlyAttach || false });
-    return React.createElement("div", { ref: ref, style: style });
+    return _jsx("div", { ref: ref, style: style });
 };

package/src/components/Select/CSSNumericVariableWatch.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useRef } from 'react';
 import { useResizeObserver } from '../ResizeObserver';
@@ -38,8 +39,7 @@ export const CSSNumericVariableWatch = (props) => {
     });
     const height = props.varName.startsWith('var(') ? props.varName : `var(${props.varName})`;
     const { allowInts = false } = props;
-    return (React.createElement("div", { "data-name": "css-variable-watcher", "data-var": props.varName, style: WRAPPER_STYLE },
-        React.createElement("div", { ref: domRef, style: {
+    return (_jsx("div", { "data-name": "css-variable-watcher", "data-var": props.varName, style: WRAPPER_STYLE, children: _jsx("div", { ref: domRef, style: {
                 height: allowInts ? `calc(1px * ${height})` : height, // we do multiplication in order to support integer (without px) values as well
-            } })));
+            } }) }));
 };

package/src/components/SelectList.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import SimpleButton from './SimpleButton';
 export const SelectList = (props) => {
-    return (React.createElement(React.Fragment, null, props.options.map((option) => (React.createElement(SimpleButton, { className: "twa:p-2 twa:w-full", variant: "text", onClick: () => props.onChange(option), key: option.label }, option.label)))));
+    return (_jsx(_Fragment, { children: props.options.map((option) => (_jsx(SimpleButton, { className: "twa:p-2 twa:w-full", variant: "text", onClick: () => props.onChange(option), children: option.label }, option.label))) }));
 };

package/src/components/SelectableList/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { useContext, useRef } from 'react';
 import useProperty from '../utils/useProperty';
@@ -83,12 +84,12 @@ const SelectableList = (props) => {
         }
         return index;
     };
-    return (React.createElement(SelectableListContext.Provider, { value: {
+    return (_jsx(SelectableListContext.Provider, { value: {
             clickInfoRef,
             toggleOnSimpleClick: props.toggleOnSimpleClick || false,
             selected,
             setSelected,
             getItemId,
-        } }, props.children));
+        }, children: props.children }));
 };
 export default SelectableList;

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

@@ -6,7 +6,7 @@ import { BoxProps } from '../Flex';
 export declare const baseClassName = "ab-SimpleButton";
 export interface SimpleButtonProps extends Omit<BoxProps, 'ref'>, HTMLProps<HTMLButtonElement> {
     tooltip?: string;
-    variant?: 'text' | 'outlined' | 'raised';
+    variant?: 'text' | 'outlined' | 'raised' | 'ghost';
     tone?: 'success' | 'error' | 'neutral' | 'none' | 'warning' | 'info' | 'accent';
     icon?: string | AdaptableIcon | ReactNode;
     iconSize?: number;

package/src/components/SimpleButton/index.js

@@ -1,11 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { allIcons } from '../icons';
-import Tooltip from '../Tooltip';
 import { ACCESS_LEVEL_HIDDEN, ACCESS_LEVEL_READ_ONLY, } from '../../Utilities/Constants/GeneralConstants';
 import { IconComponent, isAdaptableElementIcon, isAdaptableCustomIcon, isAdaptableSystemIcon, } from '../Icon';
 import { Box } from '../Flex';
 import clsx from 'clsx';
-import { targetOwn } from '../twUtils';
+import { NewTooltip } from '../NewTooltip';
 export const baseClassName = 'ab-SimpleButton';
 const SimpleButton = React.forwardRef((givenProps, theRef) => {
     const props = { ...givenProps };
@@ -27,18 +27,14 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
         if (typeof buttonProps.color === 'string') {
             iconProps.icon = { ...iconProps.icon, style: { color: buttonProps.color } };
         }
-        icon = React.createElement(IconComponent, { ...iconProps });
+        icon = _jsx(IconComponent, { ...iconProps });
     }
     if (isAdaptableCustomIcon(icon) || isAdaptableElementIcon(icon)) {
-        icon = React.createElement(IconComponent, { icon: icon });
+        icon = _jsx(IconComponent, { icon: icon });
     }
     if (icon) {
         children =
-            iconPosition === 'start' ? (React.createElement(React.Fragment, null,
-                icon,
-                children)) : (React.createElement(React.Fragment, null,
-                children,
-                icon));
+            iconPosition === 'start' ? (_jsxs(React.Fragment, { children: [icon, children] })) : (_jsxs(React.Fragment, { children: [children, icon] }));
     }
     if (buttonProps.as == 'div') {
         // we have some cases when we want to nest a SimpleButton inside an html Button
@@ -72,12 +68,12 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
         buttonProps.label ||
         tooltip ||
         buttonProps.title ||
-        `${buttonProps.key}`;
+        (buttonProps.key ? `${buttonProps.key}` : undefined);
     const extraButtonProps = {};
     if (ariaLabel != null && ariaLabel !== '') {
         extraButtonProps['aria-label'] = ariaLabel;
     }
-    const btn = (React.createElement(Box, { ...buttonProps, ...extraButtonProps, as: buttonProps.as || 'button', disabled: disabled, className: clsx(baseClassName, 'twa:p-1', 'twa:rounded-standard', 'twa:inline-flex twa:flex-row twa:flex-none twa:items-center', 'twa:fill-current', 'twa:overflow-hidden twa:relative twa:align-middle', 
+    const btn = (_jsx(Box, { ...buttonProps, ...extraButtonProps, as: buttonProps.as || 'button', disabled: disabled, className: clsx(baseClassName, 'twa:p-1', 'twa:rounded-button', 'twa:inline-flex twa:flex-row twa:flex-none twa:items-center', 'twa:fill-current', 'twa:overflow-hidden twa:relative twa:align-middle', 
         // direct children should be above the before pseudo element
         'twa:*:z-1', 
         // all svgs inside should be aligned middle
@@ -85,9 +81,7 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
         // 'twa:text-text-on-primary',
         // the text variant has the background applied on the before pseudo element
         // so let's configure the before pseudo element for all buttons here
-        'twa:before:content-[""] twa:before:absolute twa:before:inset-0 twa:before:block', 'twa:before:z-0 twa:before:pointer-events-none twa:before:rounded-[inherit]', 
-        // focus shadow
-        targetOwn.focusOutline, disabled ? `${baseClassName}--disabled` : '', `${baseClassName}--variant-${variant}`, `${baseClassName}--tone-${tone}`, 'twa:transition-opacity twa:duration-200', {
+        'twa:before:content-[""] twa:before:absolute twa:before:inset-0 twa:before:block', 'twa:before:z-0 twa:before:pointer-events-none twa:before:rounded-[inherit]', 'twa:outline-none twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50', disabled ? `${baseClassName}--disabled` : '', `${baseClassName}--variant-${variant}`, `${baseClassName}--tone-${tone}`, 'twa:transition-opacity twa:duration-200', {
             'twa:text-text-on-primary': tone == 'neutral',
             'twa:text-inherit': tone === 'none',
             'twa:text-success': tone === 'success',
@@ -95,8 +89,10 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
             'twa:text-error': tone === 'error',
             'twa:text-warn': tone === 'warning',
             'twa:text-info': tone === 'info',
-        }, variant === 'text' ? 'twa:bg-transparent' : '', variant === 'outlined'
-            ? 'twa:bg-defaultbackground twa:border-inputborder twa:border'
+        }, variant === 'text' ? 'twa:bg-transparent' : '', variant === 'ghost'
+            ? 'twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:hover:bg-muted/50'
+            : '', variant === 'outlined'
+            ? 'twa:bg-defaultbackground twa:border-input-border twa:border'
             : '', variant === 'raised'
             ? {
                 'twa:text-text-on-primary twa:shadow-(--ab-cmp-simple-button__box-shadow) twa:hover:not-disabled:shadow-(--ab-cmp-simple-button__hover-box-shadow) twa:transition-(--ab-cmp-simple-button__transition) twa:duration-200 twa:focus:shadow-(--ab-focus__box-shadow)': true,
@@ -118,7 +114,7 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
             : null, {
             'twa:cursor-pointer': !disabled,
             'twa:opacity-50': disabled,
-        }, className), ref: theRef }, children));
-    return tooltip ? React.createElement(Tooltip, { label: tooltip }, btn) : btn;
+        }, className), ref: theRef, children: children }));
+    return tooltip ? _jsx(NewTooltip, { label: tooltip, children: btn }) : btn;
 });
 export default SimpleButton;

package/src/components/SizedContainer/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import NotifyResize from '../NotifyResize';
 import { Box } from '../Flex';
@@ -5,18 +6,15 @@ const SizedContainer = (props) => {
     const { onResize: onResizeFromProps, ...domProps } = props;
     const [size, onResize] = React.useState(null);
     const sizeFn = props.children;
-    return (React.createElement(Box, { ...domProps, style: { flex: 1, ...domProps.style, position: 'relative' } },
-        React.createElement(Box, { style: {
+    return (_jsx(Box, { ...domProps, style: { flex: 1, ...domProps.style, position: 'relative' }, children: _jsxs(Box, { style: {
                 position: 'absolute',
                 left: 0,
                 top: 0,
                 width: '100%',
                 height: '100%',
-            }, "data-width": size ? size.width : null, "data-height": size ? size.height : null },
-            React.createElement(NotifyResize, { onResize: (size) => {
-                    onResize(size);
-                    onResizeFromProps?.(size);
-                } }),
-            size ? sizeFn(size) : null)));
+            }, "data-width": size ? size.width : null, "data-height": size ? size.height : null, children: [_jsx(NotifyResize, { onResize: (size) => {
+                        onResize(size);
+                        onResizeFromProps?.(size);
+                    } }), size ? sizeFn(size) : null] }) }));
 };
 export default SizedContainer;

package/src/components/StylePreview.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { toStyle } from '../Utilities/Helpers/StyleHelper';
 import { twMerge } from '../twMerge';
 import { Box } from './Flex';
 import clsx from 'clsx';
-export const StylePreview = (props) => (React.createElement(Box, { ...props, className: clsx(twMerge('ab-StylePreview twa:p-2 twa:mt-2', props.className), props.styleObject.ClassName), style: { ...toStyle(props.styleObject), ...props.style } }, props.children ?? 'Preview result'));
+export const StylePreview = (props) => (_jsx(Box, { ...props, className: clsx(twMerge('ab-StylePreview twa:p-2 twa:mt-2', props.className), props.styleObject.ClassName), style: { ...toStyle(props.styleObject), ...props.style }, children: props.children ?? 'Preview result' }));

package/src/components/Table/index.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import join from '../utils/join';
 const Table = (props) => {
-    return React.createElement("table", { ...props, className: join(props.className, 'ab-Table') });
+    return _jsx("table", { ...props, className: join(props.className, 'ab-Table') });
 };
 export default Table;

package/src/components/Tabs/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { useRef } from 'react';
 import join from '../utils/join';
@@ -61,17 +62,11 @@ export const Tabs = (props) => {
     const currentContent = contents[selectedIndex];
     const { value, ...contentProps } = (currentContent?.props || {});
     const fillerClassName = clsx('ab-Tabs__Filler', 'twa:bg-(--ab-cmp-tabs-strip__background)');
-    return (React.createElement(TabContext.Provider, { value: {
+    return (_jsx(TabContext.Provider, { value: {
             selectedIndex,
             tabCount: tabs.length,
             setSelectedIndex,
-        } },
-        React.createElement(Box, { ...boxProps, className: join(boxProps.className, 'ab-Tabs twa:flex twa:flex-col'), "data-selected-index": selectedIndex },
-            React.createElement(Flex, { flexDirection: "row", className: clsx('ab-Tabs__Strip', 'twa:bg-(--ab-cmp-tabs-strip__background)') },
-                React.createElement(Box, { className: fillerClassName }),
-                tabs,
-                React.createElement(Flex, { className: clsx(fillerClassName, 'twa:flex-1') })),
-            React.createElement(Box, { ...contentProps, className: `ab-Tabs__Body twa:p-2 twa:flex-1 ${contentProps.className || ''} ` }, currentContent))));
+        }, children: _jsxs(Box, { ...boxProps, className: join(boxProps.className, 'ab-Tabs twa:flex twa:flex-col'), "data-selected-index": selectedIndex, children: [_jsxs(Flex, { flexDirection: "row", className: clsx('ab-Tabs__Strip', 'twa:bg-(--ab-cmp-tabs-strip__background)'), children: [_jsx(Box, { className: fillerClassName }), tabs, _jsx(Flex, { className: clsx(fillerClassName, 'twa:flex-1') })] }), _jsx(Box, { ...contentProps, className: `ab-Tabs__Body twa:p-2 twa:flex-1 ${contentProps.className || ''} `, children: currentContent })] }) }));
 };
 export const Tab = (props) => {
     const { index, autoFocus, keyboardNavigation = true, className: propsClassName, ...boxProps } = props;
@@ -100,7 +95,7 @@ export const Tab = (props) => {
     React.useEffect(() => {
         mountedRef.current = true;
     }, []);
-    return (React.createElement(Box, { ref: ref, tabIndex: active ? 0 : -1, ...boxProps, className: twMerge('twa:p-2', className), onClick: (event) => {
+    return (_jsx(Box, { ref: ref, tabIndex: active ? 0 : -1, ...boxProps, className: twMerge('twa:p-2', className), onClick: (event) => {
             context.setSelectedIndex(props.index);
             props.onClick?.(event);
         }, onKeyDown: (event) => {
@@ -131,7 +126,7 @@ export const Tab = (props) => {
 export const SupportedTabMenuComps = new Set();
 SupportedTabMenuComps.add(Tab);
 export const Content = (props) => {
-    return React.createElement(React.Fragment, null, props.children);
+    return _jsx(_Fragment, { children: props.children });
 };
 export const SupportedTabContentComps = new Set();
 SupportedTabContentComps.add(Content);

package/src/components/Tag/Tag.js

@@ -1,11 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { twMerge } from '../../twMerge';
 import { Box, Flex } from '../Flex';
 import clsx from 'clsx';
-export const Tag = React.forwardRef((props, ref) => (React.createElement(Flex, { ...props, ref: ref, className: twMerge(`ab-Tag twa:bg-primary twa:text-2 twa:py-2 twa:px-2 twa:inline-flex twa:rounded-standard`, props.className), style: props.style })));
+export const Tag = React.forwardRef((props, ref) => (_jsx(Flex, { ...props, ref: ref, className: twMerge(`ab-Tag twa:bg-primary twa:text-2 twa:py-2 twa:px-2 twa:inline-flex twa:rounded-standard`, props.className), style: props.style })));
 export const TagBox = (props) => {
-    return (React.createElement(Box, { className: clsx('twa:flex twa:flex-wrap twa:flex-row twa:gap-1', props.className) }, props.children));
+    return (_jsx(Box, { className: clsx('twa:flex twa:flex-wrap twa:flex-row twa:gap-1', props.className), children: props.children }));
 };
 export const TagList = (props) => {
-    return (React.createElement(TagBox, { className: props.className }, props.tags.map((tag, index) => (React.createElement(Tag, { key: index }, tag)))));
+    return (_jsx(TagBox, { className: props.className, children: props.tags.map((tag, index) => (_jsx(Tag, { children: tag }, index))) }));
 };

package/src/components/Textarea/index.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Box } from '../Flex';
 import clsx from 'clsx';
@@ -26,7 +27,7 @@ const Textarea = React.forwardRef((props, ref) => {
             internalRef.current.style.height = `${initialHeight.current}px`;
         }
     };
-    return (React.createElement(Box, { ...textareaProps, onFocus: (e) => {
+    return (_jsx(Box, { ...textareaProps, onFocus: (e) => {
             expandToFitContent();
             props.onFocus?.(e);
             if (internalRef.current && initialHeight.current === null) {

package/src/components/Toggle/Toggle.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import clsx from 'clsx';
 import { IconComponent } from '../Icon';
@@ -35,7 +36,7 @@ export const Toggle = ({ onPressedChange, pressed, icon, children, ...rest }) =>
             }
         };
     }, [toggleContext]);
-    return (React.createElement("button", { ...rest, ref: ref, tabIndex: -1, className: twMerge(clsx('twa:border-0', 'twa:cursor-pointer twa:fill-current', 'twa:outline-0', 'twa:min-h-input twa:relative twa:py-1 twa:px-2', 'twa:not-first:after:content-[""] twa:not-first:after:border-l-2 twa:not-first:after:border-accent-foreground twa:not-first:after:h-[10px] twa:not-first:after:absolute twa:not-first:after:-left-px twa:not-first:after:top-1/2 twa:not-first:after:-translate-y-1/2', 
+    return (_jsxs("button", { ...rest, ref: ref, tabIndex: -1, className: twMerge(clsx('twa:border-0', 'twa:cursor-pointer twa:fill-current', 'twa:outline-0', 'twa:min-h-input twa:relative twa:py-1 twa:px-2', 'twa:not-first:after:content-[""] twa:not-first:after:border-l-2 twa:not-first:after:border-accent-foreground twa:not-first:after:h-[10px] twa:not-first:after:absolute twa:not-first:after:-left-px twa:not-first:after:top-1/2 twa:not-first:after:-translate-y-1/2', 
         // backgrounds
         {
             'twa:text-inherit twa:bg-transparent': !pressed,
@@ -48,7 +49,5 @@ export const Toggle = ({ onPressedChange, pressed, icon, children, ...rest }) =>
             // when the toggle is active
             'twa:before:shadow-(--ab-focus-light__box-shadow)': isActive && pressed,
             'twa:before:shadow-(--ab-focus__box-shadow)': isActive && !pressed,
-        }, baseClassName)), onClick: toggle },
-        icon && React.createElement(IconComponent, { icon: { name: icon } }),
-        children));
+        }, baseClassName)), onClick: toggle, children: [icon && _jsx(IconComponent, { icon: { name: icon } }), children] }));
 };

package/src/components/Toggle/ToggleGroup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { Flex } from '../Flex';
 import clsx from 'clsx';
@@ -19,8 +20,7 @@ export const ToggleGroup = (props) => {
             activeIndex: index,
         }));
     }, []);
-    return (React.createElement(ToggleGroupContext.Provider, { value: context },
-        React.createElement(Flex, { ref: ref, tabIndex: 0, className: clsx('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-text-on-primary', 'twa:rounded-standard twa:overflow-hidden', 'twa:inline-flex twa:w-fit', 'twa:focus:outline-0', 
+    return (_jsx(ToggleGroupContext.Provider, { value: context, children: _jsx(Flex, { ref: ref, tabIndex: 0, className: clsx('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-text-on-primary', 'twa:rounded-standard twa:overflow-hidden', 'twa:inline-flex twa:w-fit', 'twa:focus:outline-0', 
             // make the shadow of child Toggle buttons invisible when the group is not focused
             'twa:not-focus-within:[--ab-focus-light__box-shadow:none]', 'twa:not-focus-within:[--ab-focus__box-shadow:none]'), onMouseDown: (event) => {
                 const index = context.toggleButtons.findIndex((btn) => contains(btn.node, event.target));
@@ -56,5 +56,5 @@ export const ToggleGroup = (props) => {
                     }
                     setActiveIndex(nextIndex);
                 }
-            } }, props.children)));
+            }, children: props.children }) }));
 };

package/src/components/ToggleButton/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { Flex } from '../Flex';
 import { twMerge } from '../../twMerge';
@@ -16,20 +16,17 @@ export const ToggleButton = ({ checked, onChange, disabled, className, children,
         [`${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))));
+    return (_jsxs("label", { "data-checked": isChecked, "data-name": dataName, style: style, className: twMerge(preparedClassName), children: [_jsx("input", { type: "checkbox", disabled: disabled, checked: isChecked, className: clsx(`${baseClassName}__input`, 'twa:opacity-0 twa:size-0'), onChange: handleChange }), _jsx(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'), children: _jsx("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: children }) })] }));
 };

package/src/components/Tooltip/index.js

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import OverlayTrigger from '../OverlayTrigger';
 const Tooltip = ({ label, children }) => {
-    return (React.createElement(OverlayTrigger, { className: "ab-Tooltip", render: () => label }, children));
+    return (_jsx(OverlayTrigger, { className: "ab-Tooltip", render: () => label, children: children }));
 };
 export default Tooltip;