@lumx/react 4.20.0-next.5 → 4.20.1-alpha.0

package/_internal/{CcLi-Wuu.js → CKLbZumt.js}

@@ -35,8 +35,17 @@ function useDisabledStateContext() {
  * (React context, Vue provide/inject) are implemented in each framework package.
  */
 
-/** Event types that trigger click away detection. */
-const CLICK_AWAY_EVENT_TYPES = ['mousedown', 'touchstart'];
+/**
+ * Event types that trigger click away detection.
+ *
+ * `click` rather than `mousedown`: pressing a scrollbar dispatches a `mousedown` on the scrolling
+ * element, which is an ancestor of any popover it holds, but never dispatches a `click`. Scrolling
+ * therefore cannot be mistaken for a click away.
+ *
+ * `touchstart` is kept because iOS Safari does not dispatch `click` for taps on non-interactive
+ * elements, which would leave popovers open on tap away.
+ */
+const CLICK_AWAY_EVENT_TYPES = ['click', 'touchstart'];
 
 /** Callback triggered when a click away is detected. */
 
@@ -53,7 +62,7 @@ function isClickAway(targets, elements) {
 
 /**
  * Imperative setup for click away detection.
- * Adds mousedown/touchstart listeners on `document` and calls the callback when a click
+ * Adds click/touchstart listeners on `document` and calls the callback when a click
  * occurs outside the elements returned by `getElements`.
  *
  * Note: when `getElements` returns an empty array, any click is considered a click away.
@@ -74,9 +83,11 @@ function setupClickAway(getElements, callback) {
       callback(evt);
     }
   };
-  CLICK_AWAY_EVENT_TYPES.forEach(evtType => document.addEventListener(evtType, listener));
+
+  // Capture phase: a `stopPropagation` on an app-level click handler must not prevent dismissal.
+  CLICK_AWAY_EVENT_TYPES.forEach(evtType => document.addEventListener(evtType, listener, true));
   return () => {
-    CLICK_AWAY_EVENT_TYPES.forEach(evtType => document.removeEventListener(evtType, listener));
+    CLICK_AWAY_EVENT_TYPES.forEach(evtType => document.removeEventListener(evtType, listener, true));
   };
 }
 
@@ -262,4 +273,4 @@ const Portal = ({
 };
 
 export { ClickAwayProvider as C, DisabledStateProvider as D, InfiniteScroll as I, Portal as P, PortalProvider as a, useDisabledStateContext as u };
-//# sourceMappingURL=CcLi-Wuu.js.map
+//# sourceMappingURL=CKLbZumt.js.map

package/_internal/CKLbZumt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CKLbZumt.js","sources":["../../src/utils/disabled/DisabledStateContext.tsx","../../../lumx-core/src/js/utils/ClickAway/index.ts","../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../../lumx-core/src/js/utils/InfiniteScroll/setupInfiniteScrollObserver.ts","../../../lumx-core/src/js/utils/InfiniteScroll/index.tsx","../../src/utils/InfiniteScroll/InfiniteScroll.tsx","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { DisabledStateContextValue } from '@lumx/core/js/utils/disabledState';\n\nexport const DisabledStateContext = React.createContext<DisabledStateContextValue>({ state: null });\n\nexport type DisabledStateProviderProps = DisabledStateContextValue & {\n    children: React.ReactNode;\n};\n\n/**\n * Disabled state provider.\n * All nested LumX Design System components inherit this disabled state.\n */\nexport function DisabledStateProvider({ children, ...value }: DisabledStateProviderProps) {\n    return <DisabledStateContext.Provider value={value}>{children}</DisabledStateContext.Provider>;\n}\n\n/**\n * Get DisabledState context value\n */\nexport function useDisabledStateContext(): DisabledStateContextValue {\n    return useContext(DisabledStateContext);\n}\n","/**\n * Shared types and logic for ClickAway detection.\n *\n * ClickAway detects clicks outside a set of elements and triggers a callback.\n * The core logic (event listening + target checking) is framework-agnostic.\n * Framework-specific wrappers (React hook, Vue composable) and context providers\n * (React context, Vue provide/inject) are implemented in each framework package.\n */\n\nimport type { Falsy } from '@lumx/core/js/types';\n\n/**\n * Event types that trigger click away detection.\n *\n * `click` rather than `mousedown`: pressing a scrollbar dispatches a `mousedown` on the scrolling\n * element, which is an ancestor of any popover it holds, but never dispatches a `click`. Scrolling\n * therefore cannot be mistaken for a click away.\n *\n * `touchstart` is kept because iOS Safari does not dispatch `click` for taps on non-interactive\n * elements, which would leave popovers open on tap away.\n */\nexport const CLICK_AWAY_EVENT_TYPES = ['click', 'touchstart'] as const;\n\n/** Callback triggered when a click away is detected. */\nexport type ClickAwayCallback = EventListener | Falsy;\n\n/**\n * Check if the click event targets are outside all the given elements.\n *\n * @param targets - The event target elements (from `event.target` and `event.composedPath()`).\n * @param elements - The elements considered \"inside\" the click away context.\n * @returns `true` if the click is outside all elements (i.e. a click away).\n */\nexport function isClickAway(targets: HTMLElement[], elements: HTMLElement[]): boolean {\n    return !elements.some((element) => element instanceof Node && targets.some((target) => element.contains(target)));\n}\n\n/**\n * Imperative setup for click away detection.\n * Adds click/touchstart listeners on `document` and calls the callback when a click\n * occurs outside the elements returned by `getElements`.\n *\n * Note: when `getElements` returns an empty array, any click is considered a click away.\n * Callers should guard against calling `setupClickAway` when no refs are registered.\n *\n * @param getElements - Getter returning the current list of elements considered \"inside\".\n * @param callback - Callback to invoke on click away.\n * @returns A teardown function that removes the event listeners.\n */\nexport function setupClickAway(\n    getElements: () => HTMLElement[],\n    callback: ClickAwayCallback,\n): (() => void) | undefined {\n    if (!callback) {\n        return undefined;\n    }\n\n    const listener: EventListener = (evt) => {\n        const targets = [evt.composedPath?.()[0], evt.target].filter((t): t is HTMLElement => t instanceof Node);\n        const elements = getElements();\n        if (isClickAway(targets, elements)) {\n            callback(evt);\n        }\n    };\n\n    // Capture phase: a `stopPropagation` on an app-level click handler must not prevent dismissal.\n    CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener, true));\n    return () => {\n        CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener, true));\n    };\n}\n","import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\nimport { setupClickAway } from '@lumx/core/js/utils/ClickAway';\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: EventListener | Falsy;\n    /**\n     * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n     */\n    childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n    useEffect(() => {\n        const getElements = () => {\n            const refs = childrenRefs.current;\n            if (!refs) return [];\n            return refs.map((ref) => ref?.current).filter(Boolean) as HTMLElement[];\n        };\n        return setupClickAway(getElements, callback);\n    }, [callback, childrenRefs]);\n}\n","import { createContext, RefObject, useContext, useEffect, useMemo, useRef } from 'react';\nimport { ClickAwayParameters, useClickAway } from '@lumx/react/hooks/useClickAway';\n\ninterface ContextValue {\n    childrenRefs: Array<RefObject<HTMLElement>>;\n    addRefs(...newChildrenRefs: Array<RefObject<HTMLElement>>): void;\n}\n\nconst ClickAwayAncestorContext = createContext<ContextValue | null>(null);\n\ninterface ClickAwayProviderProps extends ClickAwayParameters {\n    /**\n     * (Optional) Element that should be considered as part of the parent\n     */\n    parentRef?: RefObject<HTMLElement>;\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure\n * we take into account both the DOM tree and the React tree to detect click away.\n *\n * @return the react component.\n */\nexport const ClickAwayProvider: React.FC<ClickAwayProviderProps> = ({\n    children,\n    callback,\n    childrenRefs,\n    parentRef,\n}) => {\n    const parentContext = useContext(ClickAwayAncestorContext);\n    const currentContext = useMemo(() => {\n        const context: ContextValue = {\n            childrenRefs: [],\n            /**\n             * Add element refs to the current context and propagate to the parent context.\n             */\n            addRefs(...newChildrenRefs) {\n                // Add element refs that should be considered as inside the click away context.\n                context.childrenRefs.push(...newChildrenRefs);\n\n                if (parentContext) {\n                    // Also add then to the parent context\n                    parentContext.addRefs(...newChildrenRefs);\n                    if (parentRef) {\n                        // The parent element is also considered as inside the parent click away context but not inside the current context\n                        parentContext.addRefs(parentRef);\n                    }\n                }\n            },\n        };\n        return context;\n    }, [parentContext, parentRef]);\n\n    useEffect(() => {\n        const { current: currentRefs } = childrenRefs;\n        if (!currentRefs) {\n            return;\n        }\n        currentContext.addRefs(...currentRefs);\n    }, [currentContext, childrenRefs]);\n\n    useClickAway({ callback, childrenRefs: useRef(currentContext.childrenRefs) });\n    return <ClickAwayAncestorContext.Provider value={currentContext}>{children}</ClickAwayAncestorContext.Provider>;\n};\nClickAwayProvider.displayName = 'ClickAwayProvider';\n","type EventCallback = (evt?: Event) => void;\n\n/**\n * Sets up an IntersectionObserver on the given element.\n * Calls `callback` when at least one observed entry is intersecting.\n * Returns a cleanup function that unobserves the element.\n */\nexport function setupInfiniteScrollObserver(\n    element: Element,\n    callback: EventCallback,\n    options?: IntersectionObserverInit,\n): () => void {\n    const observer = new IntersectionObserver((entries = []) => {\n        const hasIntersection = entries.some((entry) => entry.isIntersecting);\n\n        if (!hasIntersection) {\n            return;\n        }\n\n        callback();\n    }, options);\n\n    observer.observe(element);\n\n    return () => {\n        observer.unobserve(element);\n    };\n}\n","import type { CommonRef } from '../../types';\n\nexport { setupInfiniteScrollObserver } from './setupInfiniteScrollObserver';\n\nexport const INFINITE_SCROLL_CLASSNAME = 'lumx-infinite-scroll-anchor';\n\nexport interface InfiniteScrollProps {\n    /**\n     * Callback when infinite scroll component is in view.\n     * Omit (e.g. while loading) to temporarily disable without changing the callback's\n     * identity when re-enabled — keeps the underlying observer stable.\n     */\n    // eslint-disable-next-line react/no-unused-prop-types\n    callback?(evt?: Event): void;\n    /** Customize intersection observer option */\n    // eslint-disable-next-line react/no-unused-prop-types\n    options?: IntersectionObserverInit;\n}\n\n/**\n * Framework-agnostic InfiniteScroll sentinel component.\n *\n * Renders a tiny invisible div that triggers a callback when it enters the viewport\n * (or intersects its root element) via IntersectionObserver.\n *\n * The div has a small height (4px) to avoid issues when a browser zoom is applied,\n * where a zero-height element might not trigger IntersectionObserver reliably.\n */\nexport const InfiniteScroll = ({ ref }: { ref?: CommonRef }) => (\n    // In order to avoid issues when a zoom is added to the browser, we add a small height to the div so that\n    // the intersection has a higher chance of working correctly.\n    <div ref={ref} aria-hidden=\"true\" className={INFINITE_SCROLL_CLASSNAME} style={{ height: '4px' }} />\n);\n","import React, { useEffect } from 'react';\nimport {\n    InfiniteScroll as UI,\n    type InfiniteScrollProps,\n    setupInfiniteScrollObserver,\n} from '@lumx/core/js/utils/InfiniteScroll';\n\nexport type { InfiniteScrollProps };\n\n/**\n * Handles basic callback pattern by using intersection observers.\n */\nexport const InfiniteScroll: React.FC<InfiniteScrollProps> = ({ callback, options }) => {\n    const elementRef = React.useRef<HTMLDivElement | null>(null);\n\n    useEffect(() => {\n        const { current: element } = elementRef;\n        if (!element || !callback) {\n            return undefined;\n        }\n\n        return setupInfiniteScrollObserver(element, callback, options);\n        // `options?.root` starts as `null` (before the scrollable list's ref attaches) and is\n        // then set to the real element — must be a dep, or the observer gets stuck watching\n        // the wrong root (falling back to the viewport) for the component's whole lifetime.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [elementRef.current, callback, options?.root]);\n\n    return UI({ ref: elementRef });\n};\n","import React from 'react';\nimport type { PortalInit } from '@lumx/core/js/utils/Portal';\n\nexport type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface ReactPortalProviderProps {\n    children?: React.ReactNode;\n    value: PortalInit;\n}\n\n/**\n * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)\n */\nexport const PortalProvider: React.FC<ReactPortalProviderProps> = PortalContext.Provider;\n","import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport type { PortalProps } from '@lumx/core/js/utils/Portal';\n\nexport interface ReactPortalProps {\n    enabled?: boolean;\n    children: React.ReactNode;\n}\n\n/**\n * Render children in a portal outside the current DOM position\n * (defaults to `document.body` but can be customized with the PortalContextProvider)\n */\nexport const Portal: React.FC<ReactPortalProps> = ({ children, enabled = true }) => {\n    const init = React.useContext(PortalContext);\n    const context = React.useMemo(\n        () => {\n            return enabled ? init() : null;\n        },\n        // Only update on 'enabled'\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [enabled],\n    );\n\n    React.useLayoutEffect(() => {\n        return context?.teardown;\n    }, [context?.teardown, enabled]);\n\n    const { container } = context ?? {};\n    if (!container || typeof container === 'string') {\n        return <>{children}</>;\n    }\n    return createPortal(children, container);\n};\n"],"names":["DisabledStateContext","React","createContext","state","DisabledStateProvider","children","value","_jsx","Provider","useDisabledStateContext","useContext","CLICK_AWAY_EVENT_TYPES","isClickAway","targets","elements","some","element","Node","target","contains","setupClickAway","getElements","callback","undefined","listener","evt","composedPath","filter","t","forEach","evtType","document","addEventListener","removeEventListener","useClickAway","childrenRefs","useEffect","refs","current","map","ref","Boolean","ClickAwayAncestorContext","ClickAwayProvider","parentRef","parentContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","currentRefs","useRef","displayName","setupInfiniteScrollObserver","options","observer","IntersectionObserver","entries","hasIntersection","entry","isIntersecting","observe","unobserve","INFINITE_SCROLL_CLASSNAME","InfiniteScroll","className","style","height","elementRef","root","UI","PortalContext","container","body","PortalProvider","Portal","enabled","init","useLayoutEffect","teardown","_Fragment","createPortal"],"mappings":"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"}

package/index.d.ts

@@ -4,7 +4,7 @@ import * as _lumx_core_js_types from '@lumx/core/js/types';
 import { ValueOf as ValueOf$1, GenericProps as GenericProps$1, HasTheme as HasTheme$1, PropsToOverride, HasAriaDisabled as HasAriaDisabled$1, HasRequiredLinkHref as HasRequiredLinkHref$1, HasClassName as HasClassName$1, HasCloseMode as HasCloseMode$1, JSXElement as JSXElement$1, CommonRef as CommonRef$1, Falsy, HeadingElement as HeadingElement$1, HasAriaLabelOrLabelledBy, NamedProps } from '@lumx/core/js/types';
 export * from '@lumx/core/js/types';
 import * as React$1 from 'react';
-import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, RefObject, SetStateAction, Key, CSSProperties, ElementType as ElementType$1, HTMLInputTypeAttribute, ComponentProps, ImgHTMLAttributes } from 'react';
+import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, ElementType as ElementType$1, RefObject, SetStateAction, Key, CSSProperties, HTMLInputTypeAttribute, ComponentProps, ImgHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /** LumX Component Type. */
@@ -282,6 +282,11 @@ type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T>
 /** Transform the component name into the lumx class name. */
 type LumxClassName<TComponentName extends string> = `lumx-${KebabCase<TComponentName>}`;
 
+/**
+ * Elevation index, used to derive a box-shadow depth.
+ */
+type Elevation = 1 | 2 | 3 | 4 | 5;
+
 type HasRequiredLinkHref<E> = E extends 'a' ? {
     href: string;
 } : Record<string, unknown>;
@@ -782,7 +787,7 @@ declare const CLASSNAME$2: LumxClassName<typeof COMPONENT_NAME$2>;
 /**
  * Component default props.
  */
-declare const DEFAULT_PROPS: Partial<ButtonProps$1>;
+declare const DEFAULT_PROPS$1: Partial<ButtonProps$1>;
 
 interface ButtonProps extends GenericProps$1, ReactToJSX<ButtonProps$1> {
     /** callback for clicking on the button */
@@ -864,6 +869,57 @@ interface ButtonGroupProps extends GenericProps$1, ReactToJSX<ButtonGroupProps$1
  */
 declare const ButtonGroup: Comp<ButtonGroupProps, HTMLDivElement>;
 
+/**
+ * Defines the props of the component.
+ */
+interface CardProps$1 extends HasClassName {
+    /** Customize the rendered root element (e.g. `div`, `article`, `section`, `li`, `aside`), defaults to `div`. */
+    as?: any;
+    /** Content of the card. */
+    children?: JSXElement;
+    /** Elevation depth of the card, defaults to no elevation. */
+    elevation?: Elevation;
+    /** reference to the root element */
+    ref?: CommonRef;
+}
+/**
+ * Component default props.
+ */
+declare const DEFAULT_PROPS: {
+    readonly as: "div";
+};
+/** Root element rendered when no `as` prop is provided. */
+type DefaultCardTag = typeof DEFAULT_PROPS.as;
+
+/**
+ * Defines the props of the component.
+ */
+type CardProps<E extends ElementType$1 = DefaultCardTag> = GenericProps$1 & ReactToJSX<CardProps$1, 'as'> & HasPolymorphicAs$1<E> & {
+    /** Card content. */
+    children?: ReactNode;
+};
+/**
+ * Card component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Card: (<E extends ElementType$1 = "div">(props: GenericProps$1 & ReactToJSX<CardProps$1, "as"> & React$1.PropsWithoutRef<React$1.ComponentProps<E>> & {
+    as?: E | undefined;
+} & {
+    /** Card content. */
+    children?: ReactNode;
+} & React$1.ComponentProps<E> & {
+    ref?: ComponentRef<E> | undefined;
+}) => React.JSX.Element) & {
+    displayName: string;
+    className: "lumx-card";
+    defaultProps: {
+        readonly as: "div";
+    };
+};
+
 /**
  * Defines the props of the component.
  */
@@ -1471,10 +1527,7 @@ interface Offset {
     /** Offset size away from the reference. */
     away?: number;
 }
-/**
- * Popover elevation index.
- */
-type Elevation = 1 | 2 | 3 | 4 | 5;
+
 /** Popover size value — pixel value, or "t-shirt" size token. */
 type PopoverSize = PXSize | (typeof POPOVER_SIZES)[number];
 /** Popover height value — extends PopoverSize with viewport-relative unit. */
@@ -5875,5 +5928,5 @@ declare const ThemeProvider: React__default.FC<{
 /** Get the theme in the current context. */
 declare function useTheme(): ThemeContextValue;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, CLASSNAME$2 as CLASSNAME, COMPONENT_NAME$2 as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, DialogHeading, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, MenuButton, ListDivider as MenuDivider, MenuItem, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectButton, SelectMultiple, SelectMultipleField, SelectTextField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, CLASSNAME as TIME_PICKER_FIELD_CLASSNAME, COMPONENT_NAME as TIME_PICKER_FIELD_COMPONENT_NAME, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableCellVariant as TableCellVariantType, TableHeader, TableRow, Text, TextField, ThOrder, ThOrder as ThOrderType, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, TimePickerField, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
-export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, ComboboxButtonProps, ComboboxInputProps, ComboboxListProps, ComboboxOptionActionProps, ComboboxOptionMoreInfoProps, ComboboxOptionProps, ComboboxOptionSkeletonProps, ComboboxPopoverComponentProps, ComboboxPopoverProps, ComboboxProviderProps, ComboboxSectionProps, ComboboxStateProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogHeadingProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GenericBlockSectionProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSectionProps, ListSubheaderProps, MarginAutoAlignment, MenuButtonProps, ListDividerProps as MenuDividerProps, MenuItemActionProps, MenuItemProps, MessageProps, MosaicProps, MultipleSelectButtonProps, MultipleSelectTextFieldProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverHeight, PopoverProps, PopoverWidth, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectButtonProps, SelectListStatus as SelectButtonStatus, SelectButtonTranslations, SelectListStatus, SelectMultipleProps, SelectProps, SelectTextFieldProps, SelectListStatus as SelectTextFieldStatus, SelectTextFieldTranslations, SelectionChipGroupProps, SideNavigationItemProps, SideNavigationProps, SingleSelectButtonProps, SingleSelectTextFieldProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, TimePickerFieldProps, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, CLASSNAME$2 as CLASSNAME, COMPONENT_NAME$2 as COMPONENT_NAME, Card, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, DialogHeading, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, MenuButton, ListDivider as MenuDivider, MenuItem, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectButton, SelectMultiple, SelectMultipleField, SelectTextField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, CLASSNAME as TIME_PICKER_FIELD_CLASSNAME, COMPONENT_NAME as TIME_PICKER_FIELD_COMPONENT_NAME, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableCellVariant as TableCellVariantType, TableHeader, TableRow, Text, TextField, ThOrder, ThOrder as ThOrderType, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, TimePickerField, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
+export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CardProps, CheckboxProps, ChipGroupProps, ChipProps, ComboboxButtonProps, ComboboxInputProps, ComboboxListProps, ComboboxOptionActionProps, ComboboxOptionMoreInfoProps, ComboboxOptionProps, ComboboxOptionSkeletonProps, ComboboxPopoverComponentProps, ComboboxPopoverProps, ComboboxProviderProps, ComboboxSectionProps, ComboboxStateProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogHeadingProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GenericBlockSectionProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSectionProps, ListSubheaderProps, MarginAutoAlignment, MenuButtonProps, ListDividerProps as MenuDividerProps, MenuItemActionProps, MenuItemProps, MessageProps, MosaicProps, MultipleSelectButtonProps, MultipleSelectTextFieldProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverHeight, PopoverProps, PopoverWidth, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectButtonProps, SelectListStatus as SelectButtonStatus, SelectButtonTranslations, SelectListStatus, SelectMultipleProps, SelectProps, SelectTextFieldProps, SelectListStatus as SelectTextFieldStatus, SelectTextFieldTranslations, SelectionChipGroupProps, SideNavigationItemProps, SideNavigationProps, SingleSelectButtonProps, SingleSelectTextFieldProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, TimePickerFieldProps, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };