@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilderInputs.js

@@ -8,7 +8,7 @@ import { ColumnSelector } from '../../../View/Components/Selectors/ColumnSelecto
 import { FieldSelector } from '../../../View/Components/Selectors/FieldSelector';
 import { PermittedValuesSelector } from '../../../View/Components/Selectors/PermittedValuesSelector';
 import { CheckBox } from '../../CheckBox';
-import DropdownButton from '../../DropdownButton';
+import { NewDropdownButton } from '../../DropdownButton';
 import { Icon } from '../../icons';
 import { InputGroup } from '../../InputGroup';
 import { useQueryBuilderContext } from './QueryBuilder';
@@ -178,7 +178,7 @@ const SymbolToIcon = (props) => {
 export const ExpressionSelector = (props) => {
     const { getExpressions } = useQueryBuilderContext();
     const expressions = props.dataType ? getExpressions(props.dataType) : [];
-    return (_jsx(DropdownButton, { "data-id": "expression-selector", "data-value": props.value, variant: "raised", tone: 'accent', columns: ['label'], items: expressions.map((expression) => ({
+    return (_jsx(NewDropdownButton, { "data-id": "expression-selector", className: "twa:min-h-input", "data-value": props.value, variant: "raised", tone: 'accent', items: expressions.map((expression) => ({
             label: _jsx(SymbolToIcon, { symbol: getQlPredicateSymbol(expression) }),
             onClick: () => {
                 if (expression !== props.value) {
@@ -188,7 +188,7 @@ export const ExpressionSelector = (props) => {
         })), children: _jsx(SymbolToIcon, { symbol: getQlPredicateSymbol(props.value) ?? 'Select Operator' }) }));
 };
 export const CombinatorSelector = (props) => {
-    return (_jsx(DropdownButton, { "data-id": "combinator-selector", "data-value": props.value, columns: ['label'], variant: "raised", tone: "accent", items: [
+    return (_jsx(NewDropdownButton, { className: "twa:min-h-input", "data-id": "combinator-selector", "data-value": props.value, variant: "raised", tone: "accent", items: [
             { label: 'AND', onClick: () => props.onChange('AND') },
             { label: 'OR', onClick: () => props.onChange('OR') },
         ], children: props.value }));

package/src/components/ExpressionEditor/QueryBuilder/QueryPredicateBuilder.js

@@ -1,23 +1,23 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { defaultDragProxyMove, DragList } from '../../dnd';
+import { cn } from '../../../lib/utils';
 import { isArgumentColumnOrField, isQlLogicalOperator, } from '../../../parser/src/predicate';
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../Utilities/adaptableQlUtils';
 import { booleanExpressionFunctions } from '../../../Utilities/ExpressionFunctions/booleanExpressionFunctions';
 import { useAdaptable } from '../../../View/AdaptableContext';
-import DropdownButton from '../../DropdownButton';
+import { NewDropdownButton } from '../../DropdownButton';
 import ErrorBox from '../../ErrorBox';
 import { Icon } from '../../icons';
 import SimpleButton from '../../SimpleButton';
 import { CombinatorSelector, ExpressionSelector, PrimitiveValueInput, PrimitiveColumnOrFieldSelector, PrimitiveMultiValueInput, } from './QueryBuilderInputs';
 import { getOperatorMatchingInputs as getFunctionMatchingInputTypes, mapExpressionToFieldValue, } from './utils';
 import { Box, Flex } from '../../Flex';
-import clsx from 'clsx';
 const ITEM_HEIGHT = 36;
 const BASE_CLASS_NAME = 'ab-QueryBuilder-predicate-editor';
 const Handle = (props) => (_jsx(Flex, { className: `${BASE_CLASS_NAME}__handle twa:mr-1`, style: { height: ITEM_HEIGHT }, alignItems: "center", ...props, children: _jsx(Icon, { name: "drag" }) }));
 const QueryPredicateButtons = (props) => {
-    return (_jsxs(_Fragment, { children: [!props.hideAdd && (_jsx(DropdownButton, { listMinWidth: 150, columns: ['label'], items: [
+    return (_jsxs(_Fragment, { children: [!props.hideAdd && (_jsx(NewDropdownButton, { items: [
                     { label: 'Condition', onClick: () => props.onNewPredicate('filter') },
                     { label: 'AND / OR Group', onClick: () => props.onNewPredicate('group') },
                 ], variant: "text", children: _jsx(Icon, { name: "plus" }) })), !props.hideDelete && (_jsx(SimpleButton, { icon: "delete", variant: "text", onClick: () => {
@@ -38,7 +38,7 @@ const LogicalFunctionEditor = (props) => {
         props.onChange({ ...props.predicate, args: newArgs });
     };
     const getCombinatorEl = (handleProps) => (_jsx(DragList, { dragListId: props.id, orientation: "vertical", onDrop: handleDrop, onDragProxyMove: defaultDragProxyMove, children: (listDomProps) => {
-            return (_jsxs("div", { ...listDomProps, className: clsx(listDomProps.className), children: [_jsxs(Flex, { children: [props.isRoot ? null : _jsx(Handle, { ...handleProps }), _jsxs(Flex, { className: "twa:flex-1 twa:mb-2", alignItems: "center", height: ITEM_HEIGHT, children: [_jsx(CombinatorSelector, { value: props.predicate.operator, onChange: (combinator) => {
+            return (_jsxs("div", { ...listDomProps, className: cn(listDomProps.className), children: [_jsxs(Flex, { children: [props.isRoot ? null : _jsx(Handle, { ...handleProps }), _jsxs(Flex, { className: "twa:flex-1 twa:mb-2", alignItems: "center", height: ITEM_HEIGHT, children: [_jsx(CombinatorSelector, { value: props.predicate.operator, onChange: (combinator) => {
                                             props.onChange({
                                                 ...props.predicate,
                                                 operator: combinator,
@@ -94,7 +94,7 @@ const LogicalFunctionEditor = (props) => {
     }
     return (_jsx(DragList.DraggableItem, { id: props.id, children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
-            return (_jsx("div", { ...restDomProps, className: clsx(className, restDomProps.className), children: getCombinatorEl({ onPointerDown }) }));
+            return (_jsx("div", { ...restDomProps, className: cn(className, restDomProps.className), children: getCombinatorEl({ onPointerDown }) }));
         } }));
 };
 const PrimitiveFunctionEditor = (props) => {
@@ -129,7 +129,7 @@ const PrimitiveFunctionEditor = (props) => {
     const level = props.id.split('/').length - 1;
     return (_jsx(DragList.DraggableItem, { id: props.id, children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
-            return (_jsxs(Flex, { ...restDomProps, className: clsx(`twa:pb-2 ${BASE_CLASS_NAME} ${BASE_CLASS_NAME}-level-${level} ${BASE_CLASS_NAME}-primitive ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}`, restDomProps.className), style: { minHeight: ITEM_HEIGHT }, children: [_jsx(Handle, { onPointerDown: onPointerDown }), _jsxs(Flex, { alignItems: "center", style: { height: ITEM_HEIGHT }, className: "twa:gap-0.5 twa:w-full", children: [_jsx(Box, { children: _jsx(PrimitiveColumnOrFieldSelector, { onChange: (colOrField) => {
+            return (_jsxs(Flex, { ...restDomProps, className: cn(`twa:pb-2 ${BASE_CLASS_NAME} ${BASE_CLASS_NAME}-level-${level} ${BASE_CLASS_NAME}-primitive ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}`, restDomProps.className), style: { minHeight: ITEM_HEIGHT }, children: [_jsx(Handle, { onPointerDown: onPointerDown }), _jsxs(Flex, { alignItems: "center", style: { height: ITEM_HEIGHT }, className: "twa:gap-0.5 twa:w-full", children: [_jsx(Box, { children: _jsx(PrimitiveColumnOrFieldSelector, { onChange: (colOrField) => {
                                         props.onChange({
                                             ...props.predicate,
                                             args: [colOrField],

package/src/components/ExpressionEditor/index.js

@@ -76,7 +76,7 @@ export function ExpressionEditor(props) {
                 }
             }, children: _jsxs(Flex, { className: "twa:flex-1 twa:text-2", flexDirection: "row", "data-name": "expression-editor", style: { minHeight: 0 }, children: [_jsxs(Flex, { className: "twa:flex-1 twa:pr-2 twa:overflow-auto twa:min-h-0", "data-name": "expression-builder", flexDirection: "column", children: [editorInput, StringExtensions.IsNotNullOrEmpty(expressionText?.trim()) && (_jsx(ExpressionFunctionDocumentation, { expressionFunction: selectedFunction })), 
                             /* displayed for advanced queries (observable&Aggregation) to give the users a starting point */
-                            StringExtensions.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type), showDocumentationLinks && (_jsxs(HelpBlock, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3", children: [_jsx(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }), "See documentation for more details and examples"] })), _jsx(Box, { className: "twa:flex-1" }), showNamedQueryStuff && saveAsNamedQueryElement] }), _jsx(Box, { className: `${baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar", children: _jsx(Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-defaultbackground twa:text-foreground", children: _jsxs(Tabs, { className: "twa:h-full", children: [_jsx(Tabs.Tab, { value: "column", children: "Columns" }), _jsx(Tabs.Tab, { value: "field", children: "Fields" }), _jsx(Tabs.Tab, { value: "named-query", children: "Named Queries" }), _jsx(Tabs.Content, { className: "twa:flex-1 twa:h-full", children: _jsx(DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
+                            StringExtensions.IsNullOrEmpty(expressionText?.trim()) && renderQueryHints(type), showDocumentationLinks && (_jsxs(HelpBlock, { "data-name": "query-documentation", className: "twa:my-2 twa:p-2 twa:text-3", children: [_jsx(ButtonInfo, { className: "twa:mr-2", onClick: () => window.open(queryDocumentationLink, '_blank') }), "See documentation for more details and examples"] })), _jsx(Box, { className: "twa:flex-1" }), showNamedQueryStuff && saveAsNamedQueryElement] }), _jsx(Box, { className: `${baseClassName}__sidebar twa:pb-2 twa:px-2 twa:overflow-auto twa:h-full twa:w-[280px]`, "data-name": "expression-sidebar", children: _jsx(Box, { className: "twa:h-full twa:p-2 twa:rounded-standard twa:shadow-md twa:bg-background twa:text-foreground", children: _jsxs(Tabs, { className: "twa:h-full", children: [_jsx(Tabs.Tab, { value: "column", children: "Columns" }), _jsx(Tabs.Tab, { value: "field", children: "Fields" }), _jsx(Tabs.Tab, { value: "named-query", children: "Named Queries" }), _jsx(Tabs.Content, { className: "twa:flex-1 twa:h-full", children: _jsx(DataTableEditor, { type: "column", dataFormatter: (value) => `[${value}]`, fields: queryableColumns.map((column) => ({
                                                 label: column.friendlyName,
                                                 value: column.columnId,
                                                 dataType: column.dataType,

package/src/components/FieldWrap/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
 import { Flex } from '../Flex';
-import clsx from 'clsx';
 import { targetOwn } from '../twUtils';
 const FieldWrap = (props) => {
-    return (_jsx(Flex, { flexDirection: "row", alignItems: "center", ...props, className: clsx('ab-FieldWrap', targetOwn.focusWithinOutline, props.className) }));
+    return (_jsx(Flex, { flexDirection: "row", alignItems: "center", ...props, className: cn('ab-FieldWrap', targetOwn.focusWithinOutline, props.className) }));
 };
 export default FieldWrap;

package/src/components/Flex.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import clsx from 'clsx';
 import { twMerge } from '../twMerge';
+import { cn } from '../lib/utils';
 const ALIGN_ITEMS_MAP = {
     center: 'twa:items-center',
     'flex-start': 'twa:items-start',
@@ -30,7 +30,7 @@ const FLEX_WRAP_MAP = {
 };
 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 className = cn('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 (_jsx(Cmp, { ref: ref, ...domProps, className: twMerge(className, props.className) }));
 });

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

@@ -13,7 +13,7 @@ type TypeFormLayout = {
     defaultComponent?: React.ComponentType<any>;
     columns?: (string | number | FormColumn)[];
     placeholder?: ReactNode;
-    sizes?: (string | number)[];
+    sizes?: readonly (string | number)[];
     style?: React.CSSProperties;
     gridRowGap?: string | number;
     gridColumnGap?: string | number;

package/src/components/FormLayout/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { createContext, useContext } from 'react';
-import merge from '../../Utilities/utils/merge';
+import { merge } from '../../Utilities/Extensions/ObjectExtensions';
 import join from '../utils/join';
 import { Box } from '../Flex';
 const FormLayoutContext = createContext(null);

package/src/components/HelpBlock/index.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
 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);
+export const HelpBlockClassName = cn('twa:text-2/relaxed twa:p-2 twa:rounded-standard', 'twa:bg-primarylight twa:text-primary-foreground', baseClassName);
 const HelpBlock = (props) => {
-    return _jsx(Box, { ...props, className: clsx(HelpBlockClassName, props.className) });
+    return _jsx(Box, { ...props, className: cn(HelpBlockClassName, props.className) });
 };
 export default HelpBlock;

package/src/components/IconSelector/IconSelector.d.ts

@@ -1,5 +1,13 @@
 import { FunctionComponent } from 'react';
 import { CustomIcon } from '../../types';
+export interface IconSelectorPanelProps {
+    customIcons?: CustomIcon[];
+    value?: string;
+    onChange: (iconName: string) => void;
+    className?: string;
+    showTitle?: boolean;
+}
+export declare const IconSelectorPanel: FunctionComponent<IconSelectorPanelProps>;
 export interface IconSelectorProps {
     customIcons?: CustomIcon[];
     value?: string;

package/src/components/IconSelector/IconSelector.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { cn } from '../../lib/utils';
 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';
+import { wizardSelectionButtonClassName } from '../../Utilities/wizardSelection';
+const ICON_GRID_BUTTON_CLASS = 'twa:!min-w-[36px] twa:!w-9 twa:!h-9 twa:!p-0 twa:justify-center twa:items-center';
 const IconButton = (props) => {
-    return (_jsx(SimpleButton, { onClick: () => props.onClick(), className: "twa:p-2", variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon, children: props.children }));
+    return (_jsx(SimpleButton, { onClick: () => props.onClick(), className: wizardSelectionButtonClassName(props.active, ICON_GRID_BUTTON_CLASS), variant: props.active ? 'outlined' : 'text', tone: "none", icon: props.icon, children: props.children }));
 };
-export const IconSelector = (props) => {
+export const IconSelectorPanel = (props) => {
     const [query, setQuery] = React.useState('');
     const allIconsNames = Object.keys(allIcons);
     const filteredIcons = query
@@ -17,13 +20,14 @@ export const IconSelector = (props) => {
             return iconName.toLowerCase().includes(query.toLowerCase());
         })
         : allIconsNames;
-    const iconsElements = filteredIcons.map((iconName) => {
-        return (_jsx(Flex, { children: _jsx(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName }) }, iconName));
-    });
+    const iconsElements = filteredIcons.map((iconName) => (_jsx(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName }, iconName)));
     const customIconsElements = props.customIcons?.map((def) => {
-        return (_jsx(IconButton, { active: false, onClick: () => props.onChange(def.name), children: _jsx(IconComponent, { icon: def.icon }, def.name) }, def.name));
+        return (_jsx(IconButton, { active: def.name === props.value, onClick: () => props.onChange(def.name), children: _jsx(IconComponent, { icon: def.icon }, def.name) }, def.name));
     });
-    const popup = (_jsxs(Box, { className: "ab-IconSelector__Popup", children: [_jsxs(Box, { className: "twa:mb-2", children: [_jsx(Box, { className: "twa:mb-2 twa:text-4", children: "Select an Icon" }), _jsx(AdaptableInput, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), className: "twa:w-full" })] }), _jsxs(Flex, { className: "twa:p-2 twa:w-[300px] twa:max-h-[300px] twa:overflow-auto twa:flex-wrap", children: [iconsElements, " ", customIconsElements] })] }));
+    return (_jsxs(Box, { className: cn('ab-IconSelector__Popup', props.className), children: [_jsxs(Box, { className: "twa:mb-2", children: [props.showTitle ? (_jsx(Box, { className: "twa:mb-2 twa:text-4", children: "Select an Icon" })) : null, _jsx(AdaptableInput, { value: query, onChange: (event) => setQuery(event.target.value ?? ''), className: "twa:w-full", placeholder: "Search Icons" })] }), _jsxs(Flex, { flexDirection: "row", flexWrap: "wrap", className: "twa:p-2 twa:w-[300px] twa:max-w-full twa:max-h-[300px] twa:overflow-auto twa:gap-0.5", children: [iconsElements, customIconsElements] })] }));
+};
+export const IconSelector = (props) => {
+    const popup = (_jsx(IconSelectorPanel, { customIcons: props.customIcons, value: props.value, onChange: props.onChange, showTitle: true }));
     let value = 'No Icon Selected';
     if (props.value in allIcons) {
         value = (_jsx(Icon, { style: { display: 'inline-block' }, name: props.value }));

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

@@ -1 +1,2 @@
 export * from './IconSelector';
+export { IconSelectorPanel } from './IconSelector';

package/src/components/IconSelector/index.js

@@ -1 +1,2 @@
 export * from './IconSelector';
+export { IconSelectorPanel } from './IconSelector';

package/src/components/Input/NumberInput.js

@@ -26,7 +26,7 @@ export const NumberInput = React.forwardRef((props, ref) => {
             // only set when a valid numer
             props.onChange(newVal);
         }
-    }, []);
+    }, [props.onChange]);
     React.useEffect(() => {
         setValue(props.value);
     }, [props.value]);

package/src/components/Input/index.js

@@ -14,7 +14,7 @@ const Input = React.forwardRef((props, ref) => {
         type = 'text';
     }
     return (_jsx(Box, { as: as ?? 'input', ref: ref, ...inputProps, type: type, disabled: disabled, className: cn(baseClassName, 'twa:min-h-input', 'twa:rounded-input', targetOwn.focusOutline, type ? `${baseClassName}--type-${type}` : '', disabled ? `${baseClassName}--disabled` : '', {
-            'twa:bg-(--ab-cmp-input__background)': !disabled,
+            'twa:bg-input-background': !disabled,
             'twa:bg-(--ab-cmp-input--disabled__background)': disabled,
         }, className) }));
 });

package/src/components/Modal/index.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { createPortal } from 'react-dom';
 import { useMemo } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
+import { cn } from '../../lib/utils';
 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 = () => {
@@ -42,5 +42,5 @@ export const Modal = (props) => {
     const backdropZIndexOffset = 1;
     const stacking = useStacking();
     const zIndex = stacking.zIndex;
-    return createPortal(isOpen ? (_jsxs(_Fragment, { children: [_jsx(Backdrop, { timestamp: openTimestamp, uuid: uuid, zIndex: zIndex - backdropZIndexOffset, onBringToFront: onBringToFront }), _jsx(RemoveScroll, { children: _jsx(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: children }) })] })) : null, portalElement);
+    return createPortal(isOpen ? (_jsxs(_Fragment, { children: [_jsx(Backdrop, { timestamp: openTimestamp, uuid: uuid, zIndex: zIndex - backdropZIndexOffset, onBringToFront: onBringToFront }), _jsx(RemoveScroll, { children: _jsx(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...boxProps, style: { zIndex, ...style }, className: cn('twa:fixed twa:inset-0 twa:z-1000 twa:font-(family-name:--ab__font-family)', baseClassName, className), children: children }) })] })) : null, portalElement);
 };

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

@@ -9,10 +9,12 @@ type SelectGroupType<T extends SelectItemType> = {
     items: T[];
 };
 type NewSelectBaseProps<T extends SelectItemType> = {
+    chevronIcon?: React.ReactNode;
     'data-name'?: string;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     showClear?: boolean;
+    extraWidthChars?: number;
     multiple?: boolean;
     disabled?: boolean;
     value?: T['value'] | T['value'][];

package/src/components/NewSelect/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from "../ui/select";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, } from '../ui/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 import { cn } from '../../lib/utils';
 import React from 'react';
 const getItemTitle = (label, value) => {
@@ -30,9 +30,13 @@ const NewSelect = (props) => {
         ];
         allItems = props.items;
     }
-    const maxLabelLength = allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string' ? item.label.length : 0), 0);
+    const maxLabelLength = allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string'
+        ? item.label.length
+        : typeof item.tooltip === 'string'
+            ? item.tooltip.length
+            : 0), 0);
     const contentStyle = {
-        width: `max(${maxLabelLength + 3}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,
+        width: `max(${maxLabelLength + (props.extraWidthChars ?? 3)}ch, calc(var(--ab-base-space) * 20), var(--anchor-width))`,
     };
     const renderValueProp = props.renderValue;
     const renderValueChild = renderValueProp
@@ -48,13 +52,22 @@ const NewSelect = (props) => {
             return item !== undefined ? renderValueProp(item) : undefined;
         }
         : undefined;
-    return (_jsxs(Select, { multiple: props.multiple, open: props.open, onOpenChange: props.onOpenChange, isItemEqualToValue: isItemEqualToValue, items: allItems, disabled: props.disabled, value: props.value, onValueChange: props.onValueChange, "aria-label": props.ariaLabel, defaultValue: props.defaultValue, children: [_jsx(SelectTrigger, { size: props.size === 'small' ? 'sm' : 'default', className: cn('twa:max-w-80 ab-Select', props.className), "aria-invalid": isInvalid, "aria-label": props.ariaLabel, "data-name": props['data-name'], children: _jsx(SelectValue, { placeholder: props.placeholder, className: 'twa:truncate twa:block!', children: renderValueChild }) }), _jsx(SelectContent, { alignItemWithTrigger: false, container: props.container, stopMouseDownPropagation: props.stopMouseDownPropagation, style: contentStyle, children: groups.map((group, index) => {
+    return (_jsxs(Select, { multiple: props.multiple, open: props.open, onOpenChange: props.onOpenChange, isItemEqualToValue: isItemEqualToValue, items: allItems, disabled: props.disabled, value: props.value, onValueChange: props.onValueChange, "aria-label": props.ariaLabel, defaultValue: props.defaultValue, children: [_jsx(SelectTrigger, { size: props.size === 'small' ? 'sm' : 'default', className: cn('twa:max-w-80 ab-Select', props.className), "aria-invalid": isInvalid, "aria-label": props.ariaLabel, "data-name": props['data-name'], icon: props.chevronIcon, onMouseDown: props.stopMouseDownPropagation
+                    ? (e) => {
+                        e.stopPropagation();
+                        e.nativeEvent?.stopPropagation?.();
+                    }
+                    : undefined, onClick: props.stopMouseDownPropagation
+                    ? (e) => {
+                        e.stopPropagation();
+                        e.nativeEvent?.stopPropagation?.();
+                    }
+                    : undefined, children: _jsx(SelectValue, { placeholder: props.placeholder, className: 'twa:truncate twa:block!', children: renderValueChild }) }), _jsx(SelectContent, { "aria-label": props.ariaLabel ? `${props.ariaLabel} content` : undefined, alignItemWithTrigger: false, container: props.container, stopMouseDownPropagation: props.stopMouseDownPropagation, style: contentStyle, children: groups.map((group, index) => {
                     return (_jsxs(React.Fragment, { children: [_jsxs(SelectGroup, { children: [group.label && _jsx(SelectLabel, { children: group.label }), group.items.map((item) => {
-                                        const tooltipText = props.showItemTooltip
-                                            ? getItemTitle(item.label, item.value)
-                                            : undefined;
+                                        const itemTitle = getItemTitle(item.label, item.value);
+                                        const tooltipText = props.showItemTooltip ? itemTitle : undefined;
                                         const itemContent = item.label;
-                                        const itemElement = (_jsx(SelectItem, { value: item.value, className: 'ab-Select-Row', disabled: item.disabled, children: itemContent }, item.value));
+                                        const itemElement = (_jsx(SelectItem, { value: item.value, "aria-label": itemTitle || undefined, className: 'ab-Select-Row', disabled: item.disabled, children: itemContent }, item.value));
                                         if (tooltipText != null) {
                                             return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: itemElement, children: itemContent }), _jsx(TooltipContent, { side: "right", children: tooltipText })] }, item.value));
                                         }

package/src/components/NewTooltip/index.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tooltip, TooltipTrigger, TooltipContent } from "../ui/tooltip";
+import { Tooltip, TooltipTrigger, TooltipContent } from '../ui/tooltip';
 export function NewTooltip({ label, children, side, align }) {
     if (!label) {
         return _jsx(_Fragment, { children: children });

package/src/components/OverlayTrigger/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { useRef, useEffect } from 'react';
-import debounce from '../../Utilities/utils/debounce';
+import { debounce } from '../../Utilities/Helpers/TimingHelper';
 import batchUpdate from '../utils/batchUpdate';
 import selectParent from '../utils/selectParent';
 import useProperty from '../utils/useProperty';

package/src/components/Panel/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import clsx from 'clsx';
+import { cn } from '../../lib/utils';
 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-foreground';
+const DEFAULT_BODY_CLS = 'twa:relative twa:flex-1 twa:p-2 twa:bg-background twa:text-foreground';
 const Header = ({ children, variant = 'default', className, style, onClick, ...flexProps }) => {
     if (!children) {
         return null;
@@ -18,16 +18,16 @@ const Body = ({ children, bodyScroll, variant, className, style, }) => {
     if (bodyScroll === true) {
         bodyScroll = 'auto';
     }
-    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',
+    const bodyCls = cn(DEFAULT_BODY_CLS, `${baseClassName}__body`, variant && `${baseClassName}__body--variant-${variant}`, bodyScroll ? `twa:overflow-auto` : null, {
+        'twa:bg-primarylight twa:text-primary-foreground twa:border-0': variant === 'modern',
     }, className);
     return (_jsx(Box, { style: style, className: bodyCls, children: children }));
 };
 const PlainHeader = ({ children, className }) => {
-    return (_jsx(Box, { className: clsx(`${baseClassName}__header`, `${baseClassName}__header--variant-plain`, className), children: children }));
+    return (_jsx(Box, { className: cn(`${baseClassName}__header`, `${baseClassName}__header--variant-plain`, className), children: children }));
 };
 const FlexBody = ({ children, className }) => {
-    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 }));
+    return (_jsx(Box, { className: cn(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;
@@ -40,7 +40,7 @@ const Panel = (props) => {
         border,
         ...(bodyProps ? bodyProps.style : null),
     };
-    const cls = twMerge(clsx(baseClassName, `${baseClassName}--variant-${variant}`, !header ? `${baseClassName}--no-header` : `${baseClassName}--with-header`, 'twa:rounded-standard', 'twa:flex twa:flex-col'), className);
+    const cls = cn(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');
@@ -65,10 +65,10 @@ const Panel = (props) => {
     });
     if (theHeader) {
         childrenArr = childrenArr.filter((child) => child !== theHeader);
-        theHeader = (_jsx(PlainHeader, { ...theHeader.props, className: clsx(headerCls, theHeader.props.className ?? '') }));
+        theHeader = (_jsx(PlainHeader, { ...theHeader.props, className: cn(headerCls, theHeader.props.className ?? '') }));
     }
     if (theBody) {
-        theBody = (_jsx(FlexBody, { ...theBody.props, className: clsx(bodyCls, theBody.props.className ?? '') }));
+        theBody = (_jsx(FlexBody, { ...theBody.props, className: cn(bodyCls, theBody.props.className ?? '') }));
     }
     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)] }));

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

@@ -9,7 +9,7 @@ type TypeProps = {
     value?: any;
     onChange?: (checked: boolean, event?: SyntheticEvent | any) => void;
     children?: ReactNode | React.JSX.Element;
-    gapDistance?: number;
+    gapDistance?: number | string;
     childrenPosition?: 'start' | 'end';
     variant?: Variant;
 };

package/src/components/Radio/index.js

@@ -4,8 +4,8 @@ import { useState } from 'react';
 import useProperty from '../utils/useProperty';
 import { Box, Flex } from '../Flex';
 import { twMerge } from '../../twMerge';
-import clsx from 'clsx';
 import { targetChildren, targetOwn } from '../twUtils';
+import { cn } from '../../lib/utils';
 const RadioContext = React.createContext({
     value: null,
     name: '',
@@ -15,7 +15,7 @@ const RadioContext = React.createContext({
 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 Radio = ({ children, checked, onChange, value, name, gapDistance = 'var(--ab-radio-gap)', childrenPosition = 'end', as = 'label', id, tabIndex, disabled, ...props }) => {
     const context = useRadioContext();
     const { value: contextValue, onChange: contextOnChange, name: contextName, variant } = context;
     const [stateChecked, setStateChecked] = useState(false);
@@ -41,7 +41,7 @@ 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 (_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] }));
+    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: cn('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;
@@ -50,12 +50,14 @@ export const RadioGroup = (props) => {
             onRadioChange(value);
         },
     });
-    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 }) }));
+    return (_jsx(RadioContext.Provider, { value: { value, onChange: setValue, name, variant }, children: _jsx(Flex, { className: cn('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', {
-        'twa:*:flex-1 twa:*:rounded-standard twa:*:p-1 twa:*:m-0': 'default styles for all the radio buttons',
+    horizontalTextOnly: cn('twa:bg-primarylight twa:rounded-standard twa:p-1 twa:gap-5', {
+        'twa:*:flex-1 twa:*:shrink-0 twa:*:min-w-fit twa:*:rounded-standard twa:*:p-1 twa:*:m-0 twa:*:px-4': 'default styles for all the radio buttons',
         'twa:*:data-[checked=true]:bg-accent twa:*:data-[checked=true]:text-accent-foreground': 'style the checked state',
+        'twa:[--ab-radio-gap:0]': 'remove the gap between the radio input and its label',
+        'twa:[&_input]:size-0 twa:[&_input]:min-w-0 twa:[&_input]:min-h-0 twa:[&_input]:border-0 twa:[&_input]:p-0': 'collapse any nested radio inputs to zero size (overriding their fixed min-w/min-h)',
         [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',
     }),
 };

package/src/components/SimpleButton/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { cn } from '../../lib/utils';
 import { allIcons } from '../icons';
 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 { NewTooltip } from '../NewTooltip';
 export const baseClassName = 'ab-SimpleButton';
 const SimpleButton = React.forwardRef((givenProps, theRef) => {
@@ -73,36 +73,36 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
     if (ariaLabel != null && ariaLabel !== '') {
         extraButtonProps['aria-label'] = ariaLabel;
     }
-    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', 
+    const btn = (_jsx(Box, { ...buttonProps, ...extraButtonProps, as: buttonProps.as || 'button', disabled: disabled, className: cn(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
         'twa:[&_svg]:align-middle', 
-        // 'twa:text-text-on-primary',
+        // 'twa:text-primary-foreground',
         // 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]', '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-primary-foreground': tone == 'neutral',
             'twa:text-inherit': tone === 'none',
             'twa:text-success': tone === 'success',
             'twa:text-accent': tone === 'accent',
-            'twa:text-error': tone === 'error',
+            'twa:text-destructive': tone === 'error',
             'twa:text-warn': tone === 'warning',
             'twa:text-info': tone === 'info',
         }, 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'
+            ? 'twa:bg-background 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,
-                'twa:bg-success twa:text-text-on-success': tone == 'success',
+                'twa:text-primary-foreground 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,
+                'twa:bg-success twa:text-success-foreground': tone == 'success',
                 'twa:bg-accent twa:text-accent-foreground': tone == 'accent',
                 'twa:bg-transparent': tone == 'none',
-                'twa:bg-primary twa:text-text-on-primary': tone == 'neutral',
-                'twa:bg-error twa:text-text-on-error': tone == 'error',
-                'twa:bg-warn twa:text-text-on-warn': tone == 'warning',
-                'twa:bg-info twa:text-text-on-info': tone == 'info',
+                'twa:bg-primary twa:text-primary-foreground': tone == 'neutral',
+                'twa:bg-destructive twa:text-destructive-foreground': tone == 'error',
+                'twa:bg-warn twa:text-warn-foreground': tone == 'warning',
+                'twa:bg-info twa:text-info-foreground': tone == 'info',
             }
             : '', 
         // opacity transitioning for the background applied on the before pseudo element

package/src/components/StylePreview.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { toStyle } from '../Utilities/Helpers/StyleHelper';
+import { cn } from '../lib/utils';
 import { twMerge } from '../twMerge';
 import { Box } from './Flex';
-import clsx from 'clsx';
-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' }));
+export const StylePreview = (props) => (_jsx(Box, { ...props, className: cn(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/Tabs/index.js

@@ -5,7 +5,7 @@ import join from '../utils/join';
 import useProperty from '../utils/useProperty';
 import { Box, Flex } from '../Flex';
 import { twMerge } from '../../twMerge';
-import clsx from 'clsx';
+import { cn } from '../../lib/utils';
 const TabContext = React.createContext({
     selectedIndex: 0,
     tabCount: 0,
@@ -61,12 +61,12 @@ 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)');
+    const fillerClassName = cn('ab-Tabs__Filler', 'twa:bg-(--ab-cmp-tabs-strip__background)');
     return (_jsx(TabContext.Provider, { value: {
             selectedIndex,
             tabCount: tabs.length,
             setSelectedIndex,
-        }, 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 })] }) }));
+        }, 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: cn('ab-Tabs__Strip', 'twa:bg-(--ab-cmp-tabs-strip__background)', 'twa:pt-0.5'), children: [_jsx(Box, { className: fillerClassName }), tabs, _jsx(Flex, { className: cn(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;
@@ -74,7 +74,7 @@ export const Tab = (props) => {
     const baseClassName = 'ab-Tabs__Tab';
     const active = context.selectedIndex === props.index;
     const beforeActive = context.selectedIndex === props.index + 1;
-    const className = clsx(baseClassName, active ? `${baseClassName}--active` : '', beforeActive ? `${baseClassName}--before-active` : '', 'twa:cursor-pointer twa:p-2', propsClassName);
+    const className = cn(baseClassName, active ? `${baseClassName}--active` : '', beforeActive ? `${baseClassName}--before-active` : '', 'twa:cursor-pointer twa:p-2', propsClassName);
     const ref = useRef(null);
     React.useEffect(() => {
         if (active && autoFocus && keyboardNavigation) {