@lumx/react 3.0.1 → 3.0.2-alpha-react-utils.1

package/_internal/e3cb6177.d.ts

@@ -0,0 +1,75 @@
+import { CSSProperties } from 'react';
+import { l as GenericProps, m as HasTheme, G as GlobalSize, C as ColorPalette, k as Comp, n as ValueOf, g as AspectRatio, c as TypographyInterface } from './eca6d4dc.js';
+
+/**
+ * Defines the props of the component.
+ */
+interface SkeletonCircleProps extends GenericProps, HasTheme {
+    /** Size variant. */
+    size: GlobalSize;
+    /** The color of the skeleton. */
+    color?: ColorPalette;
+}
+/**
+ * SkeletonCircle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const SkeletonCircle: Comp<SkeletonCircleProps, HTMLDivElement>;
+
+/**
+ * Skeleton variants.
+ */
+declare const SkeletonRectangleVariant: {
+    readonly squared: "squared";
+    readonly rounded: "rounded";
+    readonly pill: "pill";
+};
+declare type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;
+/**
+ * Defines the props of the component.
+ */
+interface SkeletonRectangleProps extends GenericProps, HasTheme {
+    /** Aspect ratio (use with width and not height). */
+    aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;
+    /** Height size. */
+    height?: GlobalSize;
+    /** Border variant. */
+    variant?: SkeletonRectangleVariant;
+    /** Width size. */
+    width?: GlobalSize;
+    /** The color of the skeleton. */
+    color?: ColorPalette;
+}
+/**
+ * SkeletonRectangle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const SkeletonRectangle: Comp<SkeletonRectangleProps, HTMLDivElement>;
+
+/**
+ * Defines the props of the component.
+ */
+interface SkeletonTypographyProps extends GenericProps, HasTheme {
+    /** Typography variant. */
+    typography: TypographyInterface;
+    /** Width CSS property. */
+    width?: CSSProperties['width'];
+    /** The color of the skeleton. */
+    color?: ColorPalette;
+}
+/**
+ * SkeletonTypography component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const SkeletonTypography: Comp<SkeletonTypographyProps, HTMLDivElement>;
+
+export { SkeletonCircleProps as S, SkeletonCircle as a, SkeletonRectangleVariant as b, SkeletonRectangleProps as c, SkeletonRectangle as d, SkeletonTypographyProps as e, SkeletonTypography as f };

package/_internal/e810c841.d.ts

@@ -0,0 +1,182 @@
+import React, { ReactNode, SyntheticEvent } from 'react';
+import { l as GenericProps, m as HasTheme, k as Comp, H as HorizontalAlignment } from './eca6d4dc.js';
+import { I as IconButtonProps } from './2d770113.js';
+import { O as Offset, P as Placement } from './599e250a.js';
+import { T as TextFieldProps } from './0d154d73.js';
+
+/**
+ * Defines the props of the component.
+ */
+interface AutocompleteProps extends GenericProps, HasTheme {
+    /**
+     * Whether the suggestions list should display anchored to the input or to the wrapper.
+     * @see {@link DropdownProps#anchorToInput}
+     */
+    anchorToInput?: boolean;
+    /**
+     * Props to pass to the clear button (minus those already set by the TextField props).
+     * If not specified, the button won't be displayed.
+     * @see {@link TextFieldProps#clearButtonProps}
+     */
+    clearButtonProps?: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
+    /**
+     * Reference to the <input> or <textarea> element.
+     * @see {@link TextFieldProps#inputRef}
+     */
+    inputRef?: TextFieldProps['inputRef'];
+    /**
+     * The offset that will be applied to the Dropdown position.
+     * @see {@link DropdownProps#offset}
+     */
+    offset?: Offset;
+    /**
+     * The preferred Dropdown location against the anchor element.
+     * @see {@link DropdownProps#placement}
+     */
+    placement?: Placement;
+    /**
+     * Whether the dropdown should fit to the anchor width or not.
+     * @see {@link DropdownProps#fitToAnchorWidth}
+     */
+    fitToAnchorWidth?: boolean;
+    /**
+     * The error related to the component.
+     * @see {@link TextFieldProps#error}
+     */
+    error?: string | ReactNode;
+    /**
+     * Whether the text field is displayed with error style or not.
+     * @see {@link TextFieldProps#hasError}
+     */
+    hasError?: boolean;
+    /**
+     * Whether the text box should be focused upon closing the suggestions or not.
+     */
+    shouldFocusOnClose?: boolean;
+    /**
+     * The helper message of the text field.
+     * @see {@link TextFieldProps#helper}
+     */
+    helper?: string;
+    /**
+     * The icon of the text field (SVG path).
+     * @see {@link TextFieldProps#icon}
+     */
+    icon?: string;
+    /**
+     * Whether the component is disabled or not.
+     * @see {@link TextFieldProps#isDisabled}
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the component is required or not.
+     * @see {@link TextFieldProps#isRequired}
+     */
+    isRequired?: boolean;
+    /**
+     * Whether the text field is displayed with valid style or not.
+     * @see {@link TextFieldProps#isValid}
+     */
+    isValid?: boolean;
+    /**
+     * The label of the text field displayed in a label tag.
+     * @see {@link TextFieldProps#label}
+     */
+    label?: string;
+    /**
+     * The placeholder message of the text field.
+     * @see {@link TextFieldProps#placeholder}
+     */
+    placeholder?: string;
+    /** List of suggestions to display during autocomplete. */
+    children: React.ReactNode;
+    /**
+     * The list of chips to be displayed before the text field input.
+     */
+    chips?: React.ReactNode;
+    /**
+     * The value of the text field.
+     * @see {@link TextFieldProps#value}
+     */
+    value: string;
+    /**
+     * Whether the suggestions from the autocomplete should be displayed or not.
+     * @see {@link DropdownProps#isOpen}
+     */
+    isOpen: boolean;
+    /**
+     * The native input name property.
+     * @see {@link TextFieldProps#name}
+     */
+    name?: string;
+    /**
+     * Whether a click in the Autocomplete dropdown would close it or not.
+     * @see {@link DropdownProps#closeOnClick}
+     */
+    closeOnClick?: boolean;
+    /**
+     * Whether a click anywhere out of the Autocomplete would close it or not.
+     * @see {@link DropdownProps#closeOnClickAway}
+     */
+    closeOnClickAway?: boolean;
+    /**
+     * Whether an escape key press would close the Autocomplete or not.
+     * @see {@link DropdownProps#closeOnEscape}
+     */
+    closeOnEscape?: boolean;
+    /**
+     * The function called on blur.
+     * @see {@link TextFieldProps#onBlur}
+     */
+    onBlur?(event: React.FocusEvent): void;
+    /**
+     * On change callback.
+     * @see {@link TextFieldProps#onChange}
+     */
+    onChange(value: string, name?: string, event?: SyntheticEvent): void;
+    /**
+     * The function called on close.
+     * @see {@link DropdownProps#onClose}
+     */
+    onClose?(): void;
+    /**
+     * The function called on focus.
+     * @see {@link TextFieldProps#onFocus}
+     */
+    onFocus?(event: React.FocusEvent): void;
+    /**
+     * The function called when the bottom of the dropdown is reached.
+     * @see {@link DropdownProps#onInfiniteScroll}
+     */
+    onInfiniteScroll?(): void;
+}
+/**
+ * Autocomplete component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Autocomplete: Comp<AutocompleteProps, HTMLDivElement>;
+
+/**
+ * Defines the props of the component.
+ */
+interface AutocompleteMultipleProps extends AutocompleteProps {
+    /** Selected values. */
+    values: any[];
+    /** Alignment of the chips in the autocomplete. */
+    chipsAlignment?: HorizontalAlignment;
+    /** Selected value render function. Default: Renders the value inside of a Chip. */
+    selectedChipRender(choice: any, index: number, onClear?: (event: React.MouseEvent, choice: any) => void, isDisabled?: boolean): ReactNode | string;
+}
+/**
+ * AutocompleteMultiple component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const AutocompleteMultiple: Comp<AutocompleteMultipleProps, HTMLDivElement>;
+
+export { AutocompleteProps as A, Autocomplete as a, AutocompleteMultipleProps as b, AutocompleteMultiple as c };

package/_internal/ea700b01.d.ts

@@ -0,0 +1,43 @@
+import React, { ReactNode, ReactElement, MouseEventHandler, KeyboardEventHandler } from 'react';
+import { S as Size, l as GenericProps, m as HasTheme, k as Comp } from './eca6d4dc.js';
+import { T as ThumbnailProps } from './3bd3186e.js';
+
+/**
+ * Avatar sizes.
+ */
+declare type AvatarSize = Extract<Size, 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+/**
+ * Defines the props of the component.
+ */
+interface AvatarProps extends GenericProps, HasTheme {
+    /** Action toolbar content. */
+    actions?: ReactNode;
+    /** Image alternative text. */
+    alt: string;
+    /** Badge. */
+    badge?: ReactElement;
+    /** Image URL. */
+    image: string;
+    /** Props to pass to the link wrapping the thumbnail. */
+    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
+    /** On click callback. */
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    /** On key press callback. */
+    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
+    /** Size variant. */
+    size?: AvatarSize;
+    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
+    thumbnailProps?: Omit<ThumbnailProps, 'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'>;
+}
+/**
+ * Avatar component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Avatar: Comp<AvatarProps, HTMLDivElement>;
+
+export { AvatarSize as A, AvatarProps as a, Avatar as b };

package/_internal/eca6d4dc.d.ts

@@ -0,0 +1,269 @@
+import React, { Ref, ReactElement } from 'react';
+
+/** Get types of the values of a record. */
+declare type ValueOf<T extends Record<any, any>> = T[keyof T];
+/** LumX Component Type. */
+declare type Comp<P, T = HTMLElement> = {
+    (props: P & {
+        ref?: Ref<T>;
+    }): ReactElement | null;
+    /** React component type. */
+    readonly $$typeof: symbol;
+    /** Component default props. */
+    defaultProps?: Partial<P>;
+    /** Component name. */
+    displayName?: string;
+    /** Component base class name. */
+    className?: string;
+};
+/** Union type of all heading elements */
+declare type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+interface HasTheme {
+    /**
+     * Theme adapting the component to light or dark background.
+     */
+    theme?: Theme;
+}
+/**
+ * Define a generic props types.
+ */
+interface GenericProps {
+    /**
+     * Class name forwarded to the root element of the component.
+     */
+    className?: string;
+    /**
+     * Any prop (particularly any supported prop for a HTML element).
+     */
+    [propName: string]: any;
+}
+/**
+ * Callback function type alias (use for readability)
+ */
+declare type Callback = () => void;
+/**
+ * JS falsy values.
+ * (excluding `NaN` as it can't be distinguished from `number`)
+ */
+declare type Falsy = false | undefined | null | 0 | '';
+
+/**
+ * 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";
+};
+declare type Alignment = ValueOf<typeof Alignment>;
+declare type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
+declare type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
+/**
+ * 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";
+};
+declare type ColorPalette = ValueOf<typeof ColorPalette>;
+declare 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";
+};
+declare type ColorVariant = ValueOf<typeof ColorVariant>;
+declare const Theme: {
+    readonly light: "light";
+    readonly dark: "dark";
+};
+declare 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";
+};
+declare type Size = ValueOf<typeof Size>;
+declare type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+declare const Orientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+declare type Orientation = ValueOf<typeof Orientation>;
+declare const Emphasis: {
+    readonly low: "low";
+    readonly medium: "medium";
+    readonly high: "high";
+};
+declare 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";
+};
+declare 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";
+};
+declare 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";
+};
+declare 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";
+};
+declare type Typography = TypographyInterface | TypographyCustom;
+/**
+ * All available aspect ratios.
+ */
+declare const AspectRatio: {
+    /** Intrinsic content ratio. */
+    readonly original: "original";
+    /** 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";
+};
+declare 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";
+};
+declare type Kind = ValueOf<typeof Kind>;
+
+/**
+ *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
+ */
+declare type FocusPoint = {
+    x?: number;
+    y?: number;
+};
+/**
+ * Loading attribute is not yet supported in typescript, so we need
+ * to add it in order to avoid a ts error.
+ * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes
+ */
+declare module 'react' {
+    interface ImgHTMLAttributes<T> extends React.HTMLAttributes<T> {
+        loading?: 'eager' | 'lazy';
+    }
+}
+/**
+ * All available aspect ratios.
+ * @deprecated
+ */
+declare const ThumbnailAspectRatio: Record<string, AspectRatio>;
+/**
+ *  Thumbnail sizes.
+ */
+declare type ThumbnailSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+/**
+ * Thumbnail variants.
+ */
+declare const ThumbnailVariant: {
+    readonly squared: "squared";
+    readonly rounded: "rounded";
+};
+declare type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;
+
+export { Alignment as A, ColorPalette as C, Emphasis as E, FocusPoint as F, GlobalSize as G, HorizontalAlignment as H, Kind as K, Orientation as O, Size as S, Theme as T, VerticalAlignment as V, Color as a, ColorVariant as b, TypographyInterface as c, TypographyTitleCustom as d, TypographyCustom as e, Typography as f, AspectRatio as g, ThumbnailAspectRatio as h, ThumbnailSize as i, ThumbnailVariant as j, Comp as k, GenericProps as l, HasTheme as m, ValueOf as n, Callback as o, HeadingElement as p, Falsy as q };

package/{esm/_internal/Link2.js → _internal/eed07003.js}

@@ -1,10 +1,10 @@
-import { b as _objectWithoutProperties, a as _defineProperty, c as _extends, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
-import { Size, Typography } from './components.js';
+import { b as _objectWithoutProperties, a as _defineProperty, c as _extends, _ as _objectSpread2 } from './6340c129.js';
+import { Size, Typography } from '../components.js';
 import React, { forwardRef, useMemo } from 'react';
-import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
-import { I as Icon } from './Icon2.js';
+import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './fd867c9d.js';
+import { I as Icon } from './a521723d.js';
 import isEmpty from 'lodash/isEmpty';
-import { r as renderLink } from './renderLink.js';
+import { r as renderLink } from './329a01d3.js';
 
 /**
  * Component display name.
@@ -119,4 +119,4 @@ Link.displayName = COMPONENT_NAME;
 Link.className = CLASSNAME;
 
 export { Link as L };
-//# sourceMappingURL=Link2.js.map
+//# sourceMappingURL=eed07003.js.map

package/_internal/eed07003.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eed07003.js","sources":["../../src/components/link/Link.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useMemo } from 'react';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport classNames from 'classnames';\n\nimport { Color, ColorVariant, Icon, Size, Typography } from '@lumx/react';\nimport { Comp, GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';\nimport { renderLink } from '@lumx/react/utils/renderLink';\n\ntype HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n\n/**\n * Defines the props of the component.\n */\nexport interface LinkProps extends GenericProps {\n    /** Color variant. */\n    color?: Color;\n    /** Lightened or darkened variant of the selected icon color. */\n    colorVariant?: ColorVariant;\n    /** Link href. */\n    href?: HTMLAnchorProps['href'];\n    /** Whether the component is disabled or not. */\n    isDisabled?: boolean;\n    /** Left icon (SVG path). */\n    leftIcon?: string;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Right icon (SVG path). */\n    rightIcon?: string;\n    /** Link target. */\n    target?: HTMLAnchorProps['target'];\n    /** Typography variant. */\n    typography?: Typography;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Link';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\nconst getIconSize = (typography?: Typography) => {\n    switch (typography) {\n        case Typography.display1:\n            return Size.m;\n\n        case Typography.headline:\n        case Typography.title:\n        case Typography.custom.title1:\n        case Typography.custom.title2:\n        case Typography.custom.title3:\n        case Typography.custom.title4:\n        case Typography.custom.title5:\n        case Typography.custom.title6:\n        case Typography.body2:\n        case Typography.subtitle2:\n            return Size.s;\n\n        case Typography.body1:\n        case Typography.subtitle1:\n            return Size.xs;\n\n        case Typography.caption:\n        case Typography.overline:\n            return Size.xxs;\n\n        default:\n            return Size.s;\n    }\n};\n\n/**\n * Link component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Link: Comp<LinkProps, HTMLAnchorElement | HTMLButtonElement> = forwardRef((props, ref) => {\n    const {\n        children,\n        className,\n        color,\n        colorVariant,\n        disabled,\n        isDisabled = disabled,\n        href,\n        leftIcon,\n        linkAs,\n        rightIcon,\n        target,\n        typography,\n        ...forwardedProps\n    } = props;\n    const renderedChildren = useMemo(\n        () => (\n            <>\n                {leftIcon && !isEmpty(leftIcon) && (\n                    <Icon icon={leftIcon} className={`${CLASSNAME}__left-icon`} size={getIconSize(typography)} />\n                )}\n\n                {children && (\n                    <span\n                        className={classNames(`${CLASSNAME}__content`, {\n                            [`lumx-typography-${typography}`]: typography,\n                        })}\n                    >\n                        {children}\n                    </span>\n                )}\n\n                {rightIcon && !isEmpty(rightIcon) && (\n                    <Icon icon={rightIcon} className={`${CLASSNAME}__right-icon`} size={getIconSize(typography)} />\n                )}\n            </>\n        ),\n        [leftIcon, typography, children, rightIcon],\n    );\n\n    /**\n     * If there is no linkAs prop and no href, we returned a <button> instead of a <a>.\n     * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.\n     */\n    if ((!linkAs && isEmpty(href)) || isDisabled) {\n        return (\n            <button\n                type=\"button\"\n                {...forwardedProps}\n                ref={ref as RefObject<HTMLButtonElement>}\n                disabled={isDisabled}\n                className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant }))}\n            >\n                {renderedChildren}\n            </button>\n        );\n    }\n    return renderLink(\n        {\n            linkAs,\n            ...forwardedProps,\n            href,\n            target,\n            className: classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, colorVariant })),\n            ref: ref as RefObject<HTMLAnchorElement>,\n        },\n        renderedChildren,\n    );\n});\nLink.displayName = COMPONENT_NAME;\nLink.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","getIconSize","typography","Typography","display1","Size","m","headline","title","custom","title1","title2","title3","title4","title5","title6","body2","subtitle2","s","body1","subtitle1","xs","caption","overline","xxs","Link","forwardRef","props","ref","children","className","color","colorVariant","disabled","isDisabled","href","leftIcon","linkAs","rightIcon","target","forwardedProps","renderedChildren","useMemo","isEmpty","classNames","handleBasicClasses","prefix","renderLink","displayName"],"mappings":";;;;;;;;AAqCA;;;AAGA,IAAMA,cAAc,GAAG,MAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;;AAEA,IAAMG,WAAW,GAAG,SAAdA,WAAc,CAACC,UAAD,EAA6B;AAC7C,UAAQA,UAAR;AACI,SAAKC,UAAU,CAACC,QAAhB;AACI,aAAOC,IAAI,CAACC,CAAZ;;AAEJ,SAAKH,UAAU,CAACI,QAAhB;AACA,SAAKJ,UAAU,CAACK,KAAhB;AACA,SAAKL,UAAU,CAACM,MAAX,CAAkBC,MAAvB;AACA,SAAKP,UAAU,CAACM,MAAX,CAAkBE,MAAvB;AACA,SAAKR,UAAU,CAACM,MAAX,CAAkBG,MAAvB;AACA,SAAKT,UAAU,CAACM,MAAX,CAAkBI,MAAvB;AACA,SAAKV,UAAU,CAACM,MAAX,CAAkBK,MAAvB;AACA,SAAKX,UAAU,CAACM,MAAX,CAAkBM,MAAvB;AACA,SAAKZ,UAAU,CAACa,KAAhB;AACA,SAAKb,UAAU,CAACc,SAAhB;AACI,aAAOZ,IAAI,CAACa,CAAZ;;AAEJ,SAAKf,UAAU,CAACgB,KAAhB;AACA,SAAKhB,UAAU,CAACiB,SAAhB;AACI,aAAOf,IAAI,CAACgB,EAAZ;;AAEJ,SAAKlB,UAAU,CAACmB,OAAhB;AACA,SAAKnB,UAAU,CAACoB,QAAhB;AACI,aAAOlB,IAAI,CAACmB,GAAZ;;AAEJ;AACI,aAAOnB,IAAI,CAACa,CAAZ;AAzBR;AA2BH,CA5BD;AA8BA;;;;;;;;;IAOaO,IAA4D,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE/FC,QAF+F,GAe/FF,KAf+F,CAE/FE,QAF+F;AAAA,MAG/FC,SAH+F,GAe/FH,KAf+F,CAG/FG,SAH+F;AAAA,MAI/FC,KAJ+F,GAe/FJ,KAf+F,CAI/FI,KAJ+F;AAAA,MAK/FC,YAL+F,GAe/FL,KAf+F,CAK/FK,YAL+F;AAAA,MAM/FC,QAN+F,GAe/FN,KAf+F,CAM/FM,QAN+F;AAAA,0BAe/FN,KAf+F,CAO/FO,UAP+F;AAAA,MAO/FA,UAP+F,kCAOlFD,QAPkF;AAAA,MAQ/FE,IAR+F,GAe/FR,KAf+F,CAQ/FQ,IAR+F;AAAA,MAS/FC,QAT+F,GAe/FT,KAf+F,CAS/FS,QAT+F;AAAA,MAU/FC,MAV+F,GAe/FV,KAf+F,CAU/FU,MAV+F;AAAA,MAW/FC,SAX+F,GAe/FX,KAf+F,CAW/FW,SAX+F;AAAA,MAY/FC,MAZ+F,GAe/FZ,KAf+F,CAY/FY,MAZ+F;AAAA,MAa/FrC,UAb+F,GAe/FyB,KAf+F,CAa/FzB,UAb+F;AAAA,MAc5FsC,cAd4F,4BAe/Fb,KAf+F;;AAgBnG,MAAMc,gBAAgB,GAAGC,OAAO,CAC5B;AAAA,WACI,0CACKN,QAAQ,IAAI,CAACO,OAAO,CAACP,QAAD,CAApB,IACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAEA,QAAZ;AAAsB,MAAA,SAAS,YAAKrC,SAAL,gBAA/B;AAA4D,MAAA,IAAI,EAAEE,WAAW,CAACC,UAAD;AAA7E,MAFR,EAKK2B,QAAQ,IACL;AACI,MAAA,SAAS,EAAEe,UAAU,WAAI7C,SAAJ,8DACGG,UADH,GACkBA,UADlB;AADzB,OAKK2B,QALL,CANR,EAeKS,SAAS,IAAI,CAACK,OAAO,CAACL,SAAD,CAArB,IACG,oBAAC,IAAD;AAAM,MAAA,IAAI,EAAEA,SAAZ;AAAuB,MAAA,SAAS,YAAKvC,SAAL,iBAAhC;AAA8D,MAAA,IAAI,EAAEE,WAAW,CAACC,UAAD;AAA/E,MAhBR,CADJ;AAAA,GAD4B,EAsB5B,CAACkC,QAAD,EAAWlC,UAAX,EAAuB2B,QAAvB,EAAiCS,SAAjC,CAtB4B,CAAhC;AAyBA;;;;;AAIA,MAAK,CAACD,MAAD,IAAWM,OAAO,CAACR,IAAD,CAAnB,IAA8BD,UAAlC,EAA8C;AAC1C,WACI;AACI,MAAA,IAAI,EAAC;AADT,OAEQM,cAFR;AAGI,MAAA,GAAG,EAAEZ,GAHT;AAII,MAAA,QAAQ,EAAEM,UAJd;AAKI,MAAA,SAAS,EAAEU,UAAU,CAACd,SAAD,EAAYe,kBAAkB,CAAC;AAAEC,QAAAA,MAAM,EAAE/C,SAAV;AAAqBgC,QAAAA,KAAK,EAALA,KAArB;AAA4BC,QAAAA,YAAY,EAAZA;AAA5B,OAAD,CAA9B;AALzB,QAOKS,gBAPL,CADJ;AAWH;;AACD,SAAOM,UAAU;AAETV,IAAAA,MAAM,EAANA;AAFS,KAGNG,cAHM;AAITL,IAAAA,IAAI,EAAJA,IAJS;AAKTI,IAAAA,MAAM,EAANA,MALS;AAMTT,IAAAA,SAAS,EAAEc,UAAU,CAACd,SAAD,EAAYe,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE/C,SAAV;AAAqBgC,MAAAA,KAAK,EAALA,KAArB;AAA4BC,MAAAA,YAAY,EAAZA;AAA5B,KAAD,CAA9B,CANZ;AAOTJ,IAAAA,GAAG,EAAEA;AAPI,MASba,gBATa,CAAjB;AAWH,CArEqF;AAsEtFhB,IAAI,CAACuB,WAAL,GAAmBlD,cAAnB;AACA2B,IAAI,CAACK,SAAL,GAAiB/B,SAAjB;;;;"}

package/_internal/f1c9b334.d.ts

@@ -0,0 +1,22 @@
+import { l as GenericProps, m as HasTheme, k as Comp } from './eca6d4dc.js';
+import { T as ThumbnailProps } from './3bd3186e.js';
+
+/**
+ * Defines the props of the component.
+ */
+interface MosaicProps extends GenericProps, HasTheme {
+    /** Thumbnails. */
+    thumbnails: ThumbnailProps[];
+    /** On image click callback. */
+    onImageClick?(index: number): void;
+}
+/**
+ * Mosaic component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Mosaic: Comp<MosaicProps, HTMLDivElement>;
+
+export { MosaicProps as M, Mosaic as a };

package/{esm/_internal/TabPanel.js → _internal/f3c3a674.js}

@@ -1,10 +1,12 @@
-import { b as _objectWithoutProperties, d as _slicedToArray, e as _toConsumableArray, c as _extends } from './_rollupPluginBabelHelpers.js';
-import { Alignment, Theme, Size } from './components.js';
+import { b as _objectWithoutProperties, d as _slicedToArray, e as _toConsumableArray, c as _extends } from './6340c129.js';
+import { Alignment, Theme, Size } from '../components.js';
 import React, { useReducer, useEffect, forwardRef, useCallback } from 'react';
-import { c as classnames, h as handleBasicClasses, C as CSS_PREFIX } from './getRootClassName.js';
-import { I as Icon } from './Icon2.js';
-import { m as mergeRefs } from './mergeRefs.js';
-import { r as reducer, I as INIT_STATE, T as TabProviderContext, u as useRovingTabIndex, b as useTabProviderContext } from './useRovingTabIndex.js';
+import { c as classnames, h as handleBasicClasses, C as CSS_PREFIX } from './fd867c9d.js';
+import { I as Icon } from './a521723d.js';
+import 'lodash/kebabCase';
+import { m as mergeRefs } from './853713cd.js';
+import { r as reducer, I as INIT_STATE, T as TabProviderContext, a as useTabProviderContext } from './e354228f.js';
+import { u as useRovingTabIndex } from './20976405.js';
 
 var DEFAULT_PROPS = {
   isLazy: INIT_STATE.isLazy,
@@ -276,4 +278,4 @@ TabPanel.className = CLASSNAME$2;
 TabPanel.defaultProps = DEFAULT_PROPS$3;
 
 export { TabProvider as T, TabListLayout as a, TabList as b, Tab as c, TabPanel as d };
-//# sourceMappingURL=TabPanel.js.map
+//# sourceMappingURL=f3c3a674.js.map