@lumx/react 4.0.1-alpha.5 → 4.0.1-alpha.7

package/Falsy-e4faCDKK.d.ts

@@ -0,0 +1,7 @@
+/**
+ * JS falsy values.
+ * (excluding `NaN` as it can't be distinguished from `number`)
+ */
+type Falsy = false | undefined | null | 0 | '';
+
+export type { Falsy as F };

package/_internal/{BYSwKsj4.js → ClSM3-wl.js}

@@ -1,8 +1,7 @@
 import React__default, { useContext, useEffect, createContext, useMemo, useRef } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import isEmpty from 'lodash/isEmpty';
-import ReactDOM, { createPortal } from 'react-dom';
-import '@lumx/core/js/constants';
+import { createPortal } from 'react-dom';
 
 const DisabledStateContext = /*#__PURE__*/React__default.createContext({
   state: null
@@ -28,21 +27,6 @@ function useDisabledStateContext() {
   return useContext(DisabledStateContext);
 }
 
-/**
- * Optional global `window` instance (not defined when running SSR).
- */
-const WINDOW = typeof window !== 'undefined' ? window : undefined;
-
-/**
- * Optional global `document` instance (not defined when running SSR).
- */
-const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
-
-/**
- * Check if we are running in a true browser
- */
-const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
-
 const EVENT_TYPES = ['mousedown', 'touchstart'];
 function isClickAway(targets, refs) {
   // The targets elements are not contained in any of the listed element references.
@@ -132,11 +116,6 @@ const ClickAwayProvider = ({
 };
 ClickAwayProvider.displayName = 'ClickAwayProvider';
 
-/** Check if user prefers reduced motion */
-function isReducedMotion() {
-  return WINDOW?.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-}
-
 /**
  * Portal initializing function.
  * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.
@@ -176,66 +155,5 @@ const Portal = ({
   return /*#__PURE__*/createPortal(children, context.container);
 };
 
-/** Unref a react ref or element */
-function unref(maybeElement) {
-  if (maybeElement instanceof Element) return maybeElement;
-  return maybeElement?.current;
-}
-
-function setupViewTransitionName(groups, type) {
-  const resets = [];
-  for (const group of groups) {
-    const element = unref(group[type]);
-    if (element instanceof HTMLElement) {
-      const originalName = element.style.viewTransitionName;
-      resets.push(() => {
-        element.style.viewTransitionName = originalName;
-      });
-      element.style.viewTransitionName = group.name;
-    }
-  }
-  return () => {
-    for (const reset of resets) {
-      reset();
-    }
-  };
-}
-
-/**
- * Wrapper around the `document.startViewTransition` handling browser incompatibilities, react DOM flush and
- * user preference.
- *
- * @param updateCallback      callback containing the changes to apply within the view transition.
- * @param groups              setup groups of old and new element pair to transition between.
- */
-async function startViewTransition(updateCallback, {
-  groups = []
-} = {}) {
-  const start = document?.startViewTransition?.bind(document);
-  const prefersReducedMotion = isReducedMotion();
-  const {
-    flushSync
-  } = ReactDOM;
-  if (prefersReducedMotion || !start || !flushSync) {
-    // Skip, apply changes without a transition
-    updateCallback();
-    return;
-  }
-
-  // Setup view transition name on old elements
-  const resetOldElement = setupViewTransitionName(groups, 'old');
-  let resetNewElements;
-
-  // Start view transition, apply changes & flush to DOM
-  await start(() => {
-    resetOldElement();
-    flushSync(updateCallback);
-
-    // Setup view transition name on new elements
-    resetNewElements = setupViewTransitionName(groups, 'new');
-  }).updateCallbackDone;
-  resetNewElements?.();
-}
-
-export { ClickAwayProvider as C, DisabledStateProvider as D, IS_BROWSER as I, Portal as P, WINDOW as W, PortalProvider as a, DOCUMENT as b, isReducedMotion as i, startViewTransition as s, useDisabledStateContext as u };
-//# sourceMappingURL=BYSwKsj4.js.map
+export { ClickAwayProvider as C, DisabledStateProvider as D, Portal as P, PortalProvider as a, useDisabledStateContext as u };
+//# sourceMappingURL=ClSM3-wl.js.map

package/_internal/ClSM3-wl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClSM3-wl.js","sources":["../../src/utils/disabled/DisabledStateContext.tsx","../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx","../../src/utils/Portal/PortalProvider.tsx","../../src/utils/Portal/Portal.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\n/** Disable state */\ntype DisabledStateContextValue =\n    | {\n          state: 'disabled';\n      }\n    | { state: undefined | null };\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","import { RefObject, useEffect } from 'react';\n\nimport { Falsy } from '@lumx/react/utils/type';\n\nimport isEmpty from 'lodash/isEmpty';\n\nconst EVENT_TYPES = ['mousedown', 'touchstart'];\n\nfunction isClickAway(targets: HTMLElement[], refs: Array<RefObject<HTMLElement>>): boolean {\n    // The targets elements are not contained in any of the listed element references.\n    return !refs.some((ref) => targets.some((target) => ref?.current?.contains(target)));\n}\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 { current: currentRefs } = childrenRefs;\n        if (!callback || !currentRefs || isEmpty(currentRefs)) {\n            return undefined;\n        }\n        const listener: EventListener = (evt) => {\n            const targets = [evt.composedPath?.()[0], evt.target] as HTMLElement[];\n            if (isClickAway(targets, currentRefs)) {\n                callback(evt);\n            }\n        };\n\n        EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n        return () => {\n            EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n        };\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","import React from 'react';\n\ntype Container = DocumentFragment | Element;\n\n/**\n * Portal initializing function.\n * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.\n */\nexport type PortalInit = () => {\n    container?: Container;\n    teardown?: () => void;\n};\n\nexport const PortalContext = React.createContext<PortalInit>(() => ({ container: document.body }));\n\nexport interface PortalProviderProps {\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<PortalProviderProps> = PortalContext.Provider;\n","import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { PortalContext } from './PortalProvider';\n\nexport interface PortalProps {\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<PortalProps> = ({ 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    if (!context?.container) {\n        return <>{children}</>;\n    }\n    return createPortal(children, context.container);\n};\n"],"names":["DisabledStateContext","React","createContext","state","DisabledStateProvider","children","value","_jsx","Provider","useDisabledStateContext","useContext","EVENT_TYPES","isClickAway","targets","refs","some","ref","target","current","contains","useClickAway","callback","childrenRefs","useEffect","currentRefs","isEmpty","undefined","listener","evt","composedPath","forEach","evtType","document","addEventListener","removeEventListener","ClickAwayAncestorContext","ClickAwayProvider","parentRef","parentContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","useRef","displayName","PortalContext","container","body","PortalProvider","Portal","enabled","init","useLayoutEffect","teardown","_Fragment","createPortal"],"mappings":"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"}

package/index.d.ts

@@ -1,11 +1,369 @@
-import { Kind, HorizontalAlignment, Size, ColorPalette, Emphasis, Alignment, VerticalAlignment, Orientation, ColorWithVariants, ColorVariant, Typography, WhiteSpace, AspectRatio, GlobalSize, TypographyInterface, Theme } from '@lumx/core/js/constants';
-export * from '@lumx/core/js/constants';
-import * as _lumx_core_js_types from '@lumx/core/js/types';
-import { GenericProps, HasTheme, ValueOf, HasCloseMode, TextElement, HeadingElement, Falsy, HasClassName, HasAriaLabelOrLabelledBy } from '@lumx/core/js/types';
-export * from '@lumx/core/js/types';
+import { F as Falsy } from './Falsy-e4faCDKK.js';
 import * as React$1 from 'react';
 import React__default, { Ref, ReactElement, ReactNode, SyntheticEvent, MouseEventHandler, KeyboardEventHandler, AriaAttributes, DetailedHTMLProps, ButtonHTMLAttributes, InputHTMLAttributes, RefObject, ImgHTMLAttributes, CSSProperties, SetStateAction, Key, ElementType, ComponentProps } from 'react';
 
+/**
+ * The down key code.
+ */
+declare const DOWN_KEY_CODE = 40;
+/**
+ * The enter/return key code.
+ */
+declare const ENTER_KEY_CODE = 13;
+/**
+ * The space key code.
+ */
+declare const SPACE_KEY_CODE = 32;
+/**
+ * The escape key code.
+ */
+declare const ESCAPE_KEY_CODE = 27;
+/**
+ * The left key code.
+ */
+declare const LEFT_KEY_CODE = 37;
+/**
+ * The right key code.
+ */
+declare const RIGHT_KEY_CODE = 39;
+/**
+ * The tab key code.
+ */
+declare const TAB_KEY_CODE = 9;
+/**
+ * The up key code.
+ */
+declare const UP_KEY_CODE = 38;
+/**
+ * The up key code.
+ */
+declare const BACKSPACE_KEY_CODE = 8;
+
+/**
+ * Animation duration constants. Take into consideration that if you change one of these variables,
+ * you need to update their scss counterpart as well
+ */
+declare const DIALOG_TRANSITION_DURATION = 400;
+declare const EXPANSION_PANEL_TRANSITION_DURATION = 400;
+declare const NOTIFICATION_TRANSITION_DURATION = 200;
+declare const SLIDESHOW_TRANSITION_DURATION = 5000;
+/**
+ * Delay on hover after which we open or close the tooltip.
+ * Only applies to devices supporting pointer hover.
+ */
+declare const TOOLTIP_HOVER_DELAY: {
+    open: number;
+    close: number;
+};
+/**
+ * Delay on long press after which we open or close the tooltip.
+ * Only applies to devices not supporting pointer hover.
+ */
+declare const TOOLTIP_LONG_PRESS_DELAY: {
+    open: number;
+    close: number;
+};
+
+/**
+ * Callback function type alias (use for readability)
+ */
+type Callback = () => void;
+
+/**
+ * Require either `aria-label` or `arial-labelledby` prop.
+ * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
+ * needs a visible element.
+ */
+type HasAriaLabelOrLabelledBy<T = string | undefined> = T extends string ? {
+    /**
+     * The id of the element to use as title of the dialog. Can be within or out of the dialog.
+     * Although it is not recommended, aria-label can be used instead if no visible element is available.
+     */
+    'aria-labelledby': T;
+    /** The label of the dialog. */
+    'aria-label'?: undefined;
+} : {
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+};
+
+interface HasClassName {
+    /**
+     * Class name forwarded to the root element of the component.
+     */
+    className?: string;
+}
+
+interface HasCloseMode {
+    /**
+     * Choose how the children are hidden when closed
+     * ('hide' keeps the children in DOM but hide them, 'unmount' remove the children from the DOM).
+     */
+    closeMode?: 'hide' | 'unmount';
+}
+
+interface HasTheme {
+    /**
+     * Theme adapting the component to light or dark background.
+     */
+    theme?: Theme;
+}
+
+/**
+ * Define a generic props types.
+ */
+interface GenericProps extends HasClassName {
+    /**
+     * Any prop (particularly any supported prop for a HTML element).
+     */
+    [propName: string]: any;
+}
+
+type JSXElement = boolean | number | string | JSX.Element | object | undefined | null;
+
+/** Union type of all heading elements */
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+/**
+ * A point coordinate in 2D space
+ */
+type Point = {
+    x: number;
+    y: number;
+};
+
+/** Predicate function type */
+type Predicate<T> = (t: T) => boolean;
+
+/**
+ * Rectangle size
+ */
+type RectSize = {
+    width: number;
+    height: number;
+};
+
+/** Union type of all text elements */
+type TextElement = 'span' | 'p' | HeadingElement;
+
+/** Get types of the values of a record. */
+type ValueOf<T extends Record<any, any>> = T[keyof T];
+
+/** Transform a string literal into kebab case */
+type KebabCase<S> = S extends `${infer C}${infer T}` ? T extends Uncapitalize<T> ? `${Uncapitalize<C>}${KebabCase<T>}` : `${Uncapitalize<C>}-${KebabCase<T>}` : S;
+
+/** Transform the component name into the lumx class name. */
+type LumxClassName<TComponentName extends string> = `lumx-${KebabCase<TComponentName>}`;
+
+type Direction = 'top' | 'right' | 'bottom' | 'left' | 'vertical' | 'horizontal' | 'all';
+
+type Spacing = 'margin' | 'padding';
+
+/**
+ * Alignments.
+ */
+declare const Alignment: {
+    readonly bottom: "bottom";
+    readonly center: "center";
+    readonly end: "end";
+    readonly left: "left";
+    readonly right: "right";
+    readonly spaceAround: "space-around";
+    readonly spaceBetween: "space-between";
+    readonly spaceEvenly: "space-evenly";
+    readonly start: "start";
+    readonly top: "top";
+};
+type Alignment = ValueOf<typeof Alignment>;
+type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
+type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
+declare const Theme: {
+    readonly light: "light";
+    readonly dark: "dark";
+};
+type Theme = ValueOf<typeof Theme>;
+declare const Size: {
+    readonly xxs: "xxs";
+    readonly xs: "xs";
+    readonly s: "s";
+    readonly m: "m";
+    readonly l: "l";
+    readonly xl: "xl";
+    readonly xxl: "xxl";
+    readonly tiny: "tiny";
+    readonly regular: "regular";
+    readonly medium: "medium";
+    readonly big: "big";
+    readonly huge: "huge";
+};
+type Size = ValueOf<typeof Size>;
+type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+declare const Orientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+type Orientation = ValueOf<typeof Orientation>;
+declare const Emphasis: {
+    readonly low: "low";
+    readonly medium: "medium";
+    readonly high: "high";
+};
+type Emphasis = ValueOf<typeof Emphasis>;
+/**
+ * List of typographies that can't be customized.
+ */
+declare const TypographyInterface: {
+    readonly overline: "overline";
+    readonly caption: "caption";
+    readonly body1: "body1";
+    readonly body2: "body2";
+    readonly subtitle1: "subtitle1";
+    readonly subtitle2: "subtitle2";
+    readonly title: "title";
+    readonly headline: "headline";
+    readonly display1: "display1";
+};
+type TypographyInterface = ValueOf<typeof TypographyInterface>;
+/**
+ * List of title typographies that can be customized (via CSS variables).
+ */
+declare const TypographyTitleCustom: {
+    readonly title1: "custom-title1";
+    readonly title2: "custom-title2";
+    readonly title3: "custom-title3";
+    readonly title4: "custom-title4";
+    readonly title5: "custom-title5";
+    readonly title6: "custom-title6";
+};
+type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+declare const TypographyCustom: {
+    readonly intro: "custom-intro";
+    readonly 'body-large': "custom-body-large";
+    readonly body: "custom-body";
+    readonly quote: "custom-quote";
+    readonly 'publish-info': "custom-publish-info";
+    readonly button: "custom-button";
+    readonly title1: "custom-title1";
+    readonly title2: "custom-title2";
+    readonly title3: "custom-title3";
+    readonly title4: "custom-title4";
+    readonly title5: "custom-title5";
+    readonly title6: "custom-title6";
+};
+type TypographyCustom = ValueOf<typeof TypographyCustom>;
+/**
+ * List of all typographies.
+ */
+declare const Typography: {
+    readonly custom: {
+        readonly intro: "custom-intro";
+        readonly 'body-large': "custom-body-large";
+        readonly body: "custom-body";
+        readonly quote: "custom-quote";
+        readonly 'publish-info': "custom-publish-info";
+        readonly button: "custom-button";
+        readonly title1: "custom-title1";
+        readonly title2: "custom-title2";
+        readonly title3: "custom-title3";
+        readonly title4: "custom-title4";
+        readonly title5: "custom-title5";
+        readonly title6: "custom-title6";
+    };
+    readonly overline: "overline";
+    readonly caption: "caption";
+    readonly body1: "body1";
+    readonly body2: "body2";
+    readonly subtitle1: "subtitle1";
+    readonly subtitle2: "subtitle2";
+    readonly title: "title";
+    readonly headline: "headline";
+    readonly display1: "display1";
+};
+type Typography = TypographyInterface | TypographyCustom;
+/**
+ * All available aspect ratios.
+ */
+declare const AspectRatio: {
+    /** Intrinsic content ratio. */
+    readonly original: "original";
+    /** Ratio 3:1 */
+    readonly panoramic: "panoramic";
+    /** Ratio 16:9 */
+    readonly wide: "wide";
+    /** Ratio 3:2 */
+    readonly horizontal: "horizontal";
+    /** Ratio 3:2 */
+    readonly vertical: "vertical";
+    /** Ratio 1:1 */
+    readonly square: "square";
+    /** Ratio constrained by the parent. */
+    readonly free: "free";
+};
+type AspectRatio = ValueOf<typeof AspectRatio>;
+/**
+ * Semantic info about the purpose of the component
+ */
+declare const Kind: {
+    readonly info: "info";
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+};
+type Kind = ValueOf<typeof Kind>;
+/**
+ * All available white-space values
+ * */
+declare const WhiteSpace: {
+    normal: string;
+    nowrap: string;
+    pre: string;
+    'pre-wrap': string;
+    'pre-line': string;
+    'break-spaces': string;
+};
+type WhiteSpace = ValueOf<typeof WhiteSpace>;
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+declare const ColorPalette: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly blue: "blue";
+    readonly dark: "dark";
+    readonly green: "green";
+    readonly yellow: "yellow";
+    readonly red: "red";
+    readonly light: "light";
+    readonly grey: "grey";
+};
+type ColorPalette = ValueOf<typeof ColorPalette>;
+type Color = ColorPalette | string;
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+declare const ColorVariant: {
+    readonly D1: "D1";
+    readonly D2: "D2";
+    readonly L1: "L1";
+    readonly L2: "L2";
+    readonly L3: "L3";
+    readonly L4: "L4";
+    readonly L5: "L5";
+    readonly L6: "L6";
+    readonly N: "N";
+};
+type ColorVariant = ValueOf<typeof ColorVariant>;
+/** ColorPalette with all possible color variant combination */
+type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
+
+/**
+ * Visually hidden a11y utility class name
+ */
+declare const VISUALLY_HIDDEN = "visually-hidden";
+
 /** LumX Component Type. */
 type Comp<P, T = HTMLElement> = {
     (props: P & {
@@ -1232,7 +1590,7 @@ declare const HeadingLevelProvider: React.FC<HeadingLevelProviderProps>;
 
 declare const useHeadingLevel: () => {
     level: number;
-    headingElement: _lumx_core_js_types.HeadingElement;
+    headingElement: HeadingElement;
 };
 
 type GridGutterSize = Extract<Size, 'regular' | 'big' | 'huge'>;
@@ -1333,6 +1691,7 @@ interface IconProps extends GenericProps, HasTheme {
     /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
     alt?: string;
 }
+
 /**
  * Icon component.
  *
@@ -1603,10 +1962,11 @@ declare const InlineList: Comp<InlineListProps, HTMLElement>;
  */
 interface InputHelperProps extends GenericProps, HasTheme {
     /** Helper content. */
-    children: string | ReactNode;
+    children: JSXElement;
     /** Helper variant. */
     kind?: Kind;
 }
+
 /**
  * InputHelper component.
  *
@@ -1616,19 +1976,17 @@ interface InputHelperProps extends GenericProps, HasTheme {
  */
 declare const InputHelper: Comp<InputHelperProps, HTMLParagraphElement>;
 
-/**
- * Defines the props of the component.
- */
 interface InputLabelProps extends GenericProps, HasTheme {
     /** Typography variant. */
     typography?: Typography;
     /** Label content. */
-    children: string | ReactNode;
+    children: JSXElement;
     /** Native htmlFor property. */
     htmlFor: string;
     /** Whether the component is required or not. */
     isRequired?: boolean;
 }
+
 /**
  * InputLabel component.
  *
@@ -3184,5 +3542,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, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DatePicker, DatePickerControlled, DatePickerField, Dialog, 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, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
-export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, CheckboxProps, ChipGroupProps, ChipProps, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HeadingLevelProviderProps, HeadingProps, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSubheaderProps, MarginAutoAlignment, MessageProps, MosaicProps, NavigationProps, NotificationProps, Offset, PopoverDialogProps, PopoverProps, PostBlockProps, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, SelectMultipleProps, SelectProps, SideNavigationItemProps, SideNavigationProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize };
+export { AlertDialog, Alignment, AspectRatio, Autocomplete, AutocompleteMultiple, Avatar, BACKSPACE_KEY_CODE, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, Checkbox, Chip, ChipGroup, ColorPalette, ColorVariant, CommentBlock, CommentBlockVariant, DIALOG_TRANSITION_DURATION, DOWN_KEY_CODE, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ENTER_KEY_CODE, ESCAPE_KEY_CODE, EXPANSION_PANEL_TRANSITION_DURATION, Emphasis, ExpansionPanel, Falsy, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Kind, LEFT_KEY_CODE, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, NOTIFICATION_TRANSITION_DURATION, Navigation, Notification, Orientation, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RIGHT_KEY_CODE, RadioButton, RadioGroup, RawInputText, RawInputTextarea, SLIDESHOW_TRANSITION_DURATION, SPACE_KEY_CODE, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, Size, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, TAB_KEY_CODE, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, Theme, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, UP_KEY_CODE, Uploader, UploaderVariant, UserBlock, VISUALLY_HIDDEN, WhiteSpace, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export type { AlertDialogProps, AutocompleteMultipleProps, AutocompleteProps, AvatarProps, AvatarSize, BadgeProps, BadgeWrapperProps, BaseButtonProps, ButtonGroupProps, ButtonProps, ButtonSize, Callback, CheckboxProps, ChipGroupProps, ChipProps, Color, ColorWithVariants, CommentBlockProps, DatePickerControlledProps, DatePickerFieldProps, DatePickerProps, DialogProps, DialogSizes, Direction, DividerProps, DragHandleProps, DropdownProps, Elevation, ExpansionPanelProps, FlagProps, FlexBoxProps, FlexHorizontalAlignment, FlexVerticalAlignment, FocusPoint, GapSize, GenericBlockProps, GenericProps, GlobalSize, GridColumnGapSize, GridColumnProps, GridItemProps, GridProps, HasAriaLabelOrLabelledBy, HasClassName, HasCloseMode, HasTheme, HeadingElement, HeadingLevelProviderProps, HeadingProps, HorizontalAlignment, IconButtonProps, IconProps, IconSizes, ImageBlockProps, ImageBlockSize, ImageLightboxProps, InlineListProps, InputHelperProps, InputLabelProps, JSXElement, LightboxProps, LinkPreviewProps, LinkProps, ListDividerProps, ListItemProps, ListItemSize, ListProps, ListSubheaderProps, LumxClassName, MarginAutoAlignment, MessageProps, MosaicProps, NavigationProps, NotificationProps, Offset, Point, PopoverDialogProps, PopoverProps, PostBlockProps, Predicate, ProgressCircularProps, ProgressCircularSize, ProgressLinearProps, ProgressProps, ProgressTrackerProps, ProgressTrackerProviderProps, ProgressTrackerStepPanelProps, ProgressTrackerStepProps, RadioButtonProps, RadioGroupProps, RawInputTextProps, RawInputTextareaProps, RectSize, SelectMultipleProps, SelectProps, SideNavigationItemProps, SideNavigationProps, SkeletonCircleProps, SkeletonRectangleProps, SkeletonTypographyProps, SliderProps, SlidesProps, SlideshowControlsProps, SlideshowItemProps, SlideshowProps, Spacing, SwitchProps, TabListProps, TabPanelProps, TabProps, TabProviderProps, TableBodyProps, TableCellProps, TableHeaderProps, TableProps, TableRowProps, TextElement, TextFieldProps, TextProps, ThumbnailProps, ThumbnailSize, ToolbarProps, TooltipPlacement, TooltipProps, UploaderProps, UploaderSize, UserBlockProps, UserBlockSize, ValueOf, VerticalAlignment };