@lumx/react 3.10.1-alpha.1 → 3.10.1-alpha.2

package/_internal/components/list/index.ts-f3101625.js

@@ -0,0 +1,86 @@
+export { L as List, a as ListItem, i as isClickable } from '../../bc28d510.js';
+import { h as getRootClassName, i as forwardRef, j as _objectWithoutProperties, _ as _extends, g as classNames } from '../../1da25128.js';
+import React__default from 'react';
+import { h as handleBasicClasses } from '../../f57e1239.js';
+
+const _excluded$1 = ["className"];
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'ListDivider';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+
+/**
+ * ListDivider component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ListDivider = forwardRef((props, ref) => {
+  const {
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  return /*#__PURE__*/React__default.createElement("li", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$1
+    }))
+  }));
+});
+ListDivider.displayName = COMPONENT_NAME$1;
+ListDivider.className = CLASSNAME$1;
+
+const _excluded = ["children", "className"];
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ListSubheader';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * ListSubheader component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ListSubheader = forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement("li", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME
+    }))
+  }), children);
+});
+ListSubheader.displayName = COMPONENT_NAME;
+ListSubheader.className = CLASSNAME;
+
+export { ListDivider, ListSubheader };
+//# sourceMappingURL=index.ts-f3101625.js.map

package/_internal/components/list/index.ts-f3101625.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.ts-f3101625.js","sources":["../../../../src/components/list/ListDivider.tsx","../../../../src/components/list/ListSubheader.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport type ListDividerProps = GenericProps;\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ListDivider';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * ListDivider component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ListDivider = forwardRef<ListDividerProps, HTMLLIElement>((props, ref) => {\n    const { className, ...forwardedProps } = props;\n\n    return (\n        <li\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}\n        />\n    );\n});\nListDivider.displayName = COMPONENT_NAME;\nListDivider.className = CLASSNAME;\n","import React, { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface ListSubheaderProps extends GenericProps {\n    /** Content. */\n    children: string | ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ListSubheader';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * ListSubheader component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ListSubheader = forwardRef<ListSubheaderProps, HTMLLIElement>((props, ref) => {\n    const { children, className, ...forwardedProps } = props;\n\n    return (\n        <li ref={ref} {...forwardedProps} className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}>\n            {children}\n        </li>\n    );\n});\nListSubheader.displayName = COMPONENT_NAME;\nListSubheader.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","ListDivider","forwardRef","props","ref","className","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","_extends","classNames","handleBasicClasses","prefix","displayName","ListSubheader","children"],"mappings":";;;;;;;AAQA;AACA;AACA;;AAGA;AACA;AACA;AACA,MAAMA,gBAAc,GAAG,aAAa,CAAA;;AAEpC;AACA;AACA;AACA,MAAMC,WAAS,GAAGC,gBAAgB,CAACF,gBAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,WAAW,GAAGC,UAAU,CAAkC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACnF,MAAM;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGF,KAAK;AAAxBG,IAAAA,cAAc,GAAAC,wBAAA,CAAKJ,KAAK,EAAAK,WAAA,CAAA,CAAA;AAE9C,EAAA,oBACIC,cAAA,CAAAC,aAAA,CAAA,IAAA,EAAAC,QAAA,CAAA;AACIP,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EACLE,cAAc,EAAA;AAClBD,IAAAA,SAAS,EAAEO,UAAU,CAACP,SAAS,EAAEQ,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEf,WAAAA;AAAU,KAAC,CAAC,CAAA;AAAE,GAAA,CAC/E,CAAC,CAAA;AAEV,CAAC,EAAC;AACFE,WAAW,CAACc,WAAW,GAAGjB,gBAAc,CAAA;AACxCG,WAAW,CAACI,SAAS,GAAGN,WAAS;;;;AClCjC;AACA;AACA;;AAMA;AACA;AACA;AACA,MAAMD,cAAc,GAAG,eAAe,CAAA;;AAEtC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMkB,aAAa,GAAGd,UAAU,CAAoC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACvF,MAAM;MAAEa,QAAQ;AAAEZ,MAAAA,SAAAA;AAA6B,KAAC,GAAGF,KAAK;AAAxBG,IAAAA,cAAc,GAAAC,wBAAA,CAAKJ,KAAK,EAAAK,SAAA,CAAA,CAAA;AAExD,EAAA,oBACIC,cAAA,CAAAC,aAAA,CAAA,IAAA,EAAAC,QAAA,CAAA;AAAIP,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EAAKE,cAAc,EAAA;AAAED,IAAAA,SAAS,EAAEO,UAAU,CAACP,SAAS,EAAEQ,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEf,SAAAA;AAAU,KAAC,CAAC,CAAA;AAAE,GAAA,CAAA,EACzGkB,QACD,CAAC,CAAA;AAEb,CAAC,EAAC;AACFD,aAAa,CAACD,WAAW,GAAGjB,cAAc,CAAA;AAC1CkB,aAAa,CAACX,SAAS,GAAGN,SAAS;;;;"}

package/_internal/components/message/index.ts-041cf0cb.js

@@ -0,0 +1,97 @@
+import { h as getRootClassName, K as Kind, C as ColorPalette, i as forwardRef, j as _objectWithoutProperties, _ as _extends, g as classNames, S as Size, E as Emphasis } from '../../1da25128.js';
+import React__default from 'react';
+import { h as handleBasicClasses } from '../../f57e1239.js';
+import { e as mdiAlert, f as mdiInformation, g as mdiCheckCircle, h as mdiAlertCircle, I as Icon, i as mdiClose } from '../../c6c99f76.js';
+import { I as IconButton } from '../../23bdba2d.js';
+
+const _excluded = ["children", "className", "hasBackground", "kind", "icon", "closeButtonProps"];
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Message';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Associative map from message kind to color and icon.
+ */
+const CONFIG = {
+  [Kind.error]: {
+    color: ColorPalette.red,
+    icon: mdiAlert
+  },
+  [Kind.info]: {
+    color: ColorPalette.blue,
+    icon: mdiInformation
+  },
+  [Kind.success]: {
+    color: ColorPalette.green,
+    icon: mdiCheckCircle
+  },
+  [Kind.warning]: {
+    color: ColorPalette.yellow,
+    icon: mdiAlertCircle
+  }
+};
+
+/**
+ * Message component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Message = forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      hasBackground,
+      kind,
+      icon: customIcon,
+      closeButtonProps
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const {
+    color,
+    icon
+  } = CONFIG[kind] || {};
+  const {
+    onClick,
+    label: closeButtonLabel
+  } = closeButtonProps || {};
+  const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: ref,
+    className: classNames(className, handleBasicClasses({
+      color,
+      hasBackground,
+      prefix: CLASSNAME
+    }))
+  }, forwardedProps), (customIcon || icon) && /*#__PURE__*/React__default.createElement(Icon, {
+    className: `${CLASSNAME}__icon`,
+    icon: customIcon || icon,
+    size: Size.xs,
+    color: color
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME}__text`
+  }, children), isCloseButtonDisplayed && /*#__PURE__*/React__default.createElement(IconButton, {
+    className: `${CLASSNAME}__close-button`,
+    icon: mdiClose,
+    onClick: onClick,
+    label: closeButtonLabel,
+    emphasis: Emphasis.low
+  }));
+});
+Message.displayName = COMPONENT_NAME;
+Message.className = CLASSNAME;
+
+export { Message };
+//# sourceMappingURL=index.ts-041cf0cb.js.map

package/_internal/components/message/index.ts-041cf0cb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.ts-041cf0cb.js","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@lumx/icons';\nimport { ColorPalette, Emphasis, Icon, IconButton, Kind, Size } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface MessageProps extends GenericProps {\n    /** Content. */\n    children?: ReactNode;\n    /** Whether the message has a background or not. */\n    hasBackground?: boolean;\n    /** Message variant. */\n    kind?: Kind;\n    /** Message custom icon SVG path. */\n    icon?: string;\n    /**\n     * Displays a close button.\n     *\n     * NB: only available if `kind === 'info' && hasBackground === true`\n     */\n    closeButtonProps?: {\n        /** The callback called when the button is clicked */\n        onClick: () => void;\n        /** The label of the close button. */\n        label: string;\n    };\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Message';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Associative map from message kind to color and icon.\n */\nconst CONFIG = {\n    [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },\n    [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },\n    [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },\n    [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },\n};\n\n/**\n * Message component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Message = forwardRef<MessageProps, HTMLDivElement>((props, ref) => {\n    const { children, className, hasBackground, kind, icon: customIcon, closeButtonProps, ...forwardedProps } = props;\n    const { color, icon } = CONFIG[kind as Kind] || {};\n    const { onClick, label: closeButtonLabel } = closeButtonProps || {};\n    const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;\n\n    return (\n        <div\n            ref={ref}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    color,\n                    hasBackground,\n                    prefix: CLASSNAME,\n                }),\n            )}\n            {...forwardedProps}\n        >\n            {(customIcon || icon) && (\n                <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} color={color} />\n            )}\n            <div className={`${CLASSNAME}__text`}>{children}</div>\n            {isCloseButtonDisplayed && (\n                <IconButton\n                    className={`${CLASSNAME}__close-button`}\n                    icon={mdiClose}\n                    onClick={onClick}\n                    label={closeButtonLabel}\n                    emphasis={Emphasis.low}\n                />\n            )}\n        </div>\n    );\n});\n\nMessage.displayName = COMPONENT_NAME;\nMessage.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","CONFIG","Kind","error","color","ColorPalette","red","icon","mdiAlert","info","blue","mdiInformation","success","green","mdiCheckCircle","warning","yellow","mdiAlertCircle","Message","forwardRef","props","ref","children","className","hasBackground","kind","customIcon","closeButtonProps","forwardedProps","_objectWithoutProperties","_excluded","onClick","label","closeButtonLabel","isCloseButtonDisplayed","React","createElement","_extends","classNames","handleBasicClasses","prefix","Icon","size","Size","xs","IconButton","mdiClose","emphasis","Emphasis","low","displayName"],"mappings":"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"}

package/_internal/components/message/index.ts-2d38e0ea.d.ts

@@ -0,0 +1,37 @@
+import { G as GenericProps, K as Kind, C as Comp } from '../../8d67e1e3.js';
+import { ReactNode } from 'react';
+
+/**
+ * Defines the props of the component.
+ */
+interface MessageProps extends GenericProps {
+    /** Content. */
+    children?: ReactNode;
+    /** Whether the message has a background or not. */
+    hasBackground?: boolean;
+    /** Message variant. */
+    kind?: Kind;
+    /** Message custom icon SVG path. */
+    icon?: string;
+    /**
+     * Displays a close button.
+     *
+     * NB: only available if `kind === 'info' && hasBackground === true`
+     */
+    closeButtonProps?: {
+        /** The callback called when the button is clicked */
+        onClick: () => void;
+        /** The label of the close button. */
+        label: string;
+    };
+}
+/**
+ * Message component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Message: Comp<MessageProps, HTMLDivElement>;
+
+export { Message, type MessageProps };

package/_internal/components/mosaic/index.ts-232d5aed.d.ts

@@ -0,0 +1,23 @@
+import { G as GenericProps, H as HasTheme, C as Comp } from '../../8d67e1e3.js';
+import { T as ThumbnailProps } from '../../35f100be.js';
+import 'react';
+
+/**
+ * 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 { Mosaic, type MosaicProps };

package/_internal/components/mosaic/index.ts-d2128cd3.js

@@ -0,0 +1,94 @@
+import { h as getRootClassName, i as forwardRef, T as Theme, j as _objectWithoutProperties, _ as _extends, g as classNames, A as Alignment, f as AspectRatio } from '../../1da25128.js';
+import React__default, { useMemo } from 'react';
+import take from 'lodash/take';
+import { u as useTheme } from '../../3181f000.js';
+import { h as handleBasicClasses } from '../../f57e1239.js';
+import { T as Thumbnail } from '../../4c28d012.js';
+
+const _excluded = ["className", "theme", "thumbnails", "onImageClick"],
+  _excluded2 = ["image", "onClick", "align"];
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Mosaic';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * Mosaic component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Mosaic = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+      className,
+      theme = defaultTheme,
+      thumbnails,
+      onImageClick
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const handleImageClick = useMemo(() => {
+    if (!onImageClick) return undefined;
+    return (index, onClick) => event => {
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+      onImageClick === null || onImageClick === void 0 ? void 0 : onImageClick(index);
+    };
+  }, [onImageClick]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      theme
+    }), {
+      [`${CLASSNAME}--has-1-thumbnail`]: (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 1,
+      [`${CLASSNAME}--has-2-thumbnails`]: (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 2,
+      [`${CLASSNAME}--has-3-thumbnails`]: (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) === 3,
+      [`${CLASSNAME}--has-4-thumbnails`]: (thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) >= 4
+    })
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME}__wrapper`
+  }, take(thumbnails, 4).map((thumbnail, index) => {
+    const {
+        image,
+        onClick,
+        align
+      } = thumbnail,
+      thumbnailProps = _objectWithoutProperties(thumbnail, _excluded2);
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: index,
+      className: `${CLASSNAME}__thumbnail`
+    }, /*#__PURE__*/React__default.createElement(Thumbnail, _extends({}, thumbnailProps, {
+      align: align || Alignment.left,
+      image: image,
+      theme: theme,
+      aspectRatio: AspectRatio.free,
+      fillHeight: true,
+      onClick: (handleImageClick === null || handleImageClick === void 0 ? void 0 : handleImageClick(index, onClick)) || onClick
+    })), thumbnails.length > 4 && index === 3 && /*#__PURE__*/React__default.createElement("div", {
+      className: `${CLASSNAME}__overlay`
+    }, /*#__PURE__*/React__default.createElement("span", null, "+", thumbnails.length - 4)));
+  })));
+});
+Mosaic.displayName = COMPONENT_NAME;
+Mosaic.className = CLASSNAME;
+Mosaic.defaultProps = DEFAULT_PROPS;
+
+export { Mosaic };
+//# sourceMappingURL=index.ts-d2128cd3.js.map

package/_internal/components/mosaic/index.ts-d2128cd3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.ts-d2128cd3.js","sources":["../../../../src/components/mosaic/Mosaic.tsx"],"sourcesContent":["import React, { MouseEventHandler, useMemo } from 'react';\n\nimport classNames from 'classnames';\nimport take from 'lodash/take';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nimport { Alignment, AspectRatio, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface MosaicProps extends GenericProps, HasTheme {\n    /** Thumbnails. */\n    thumbnails: ThumbnailProps[];\n    /** On image click callback. */\n    onImageClick?(index: number): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Mosaic';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<MosaicProps> = {};\n\n/**\n * Mosaic component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Mosaic = forwardRef<MosaicProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const { className, theme = defaultTheme, thumbnails, onImageClick, ...forwardedProps } = props;\n    const handleImageClick = useMemo(() => {\n        if (!onImageClick) return undefined;\n\n        return (index: number, onClick?: MouseEventHandler): MouseEventHandler =>\n            (event) => {\n                onClick?.(event);\n                onImageClick?.(index);\n            };\n    }, [onImageClick]);\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {\n                [`${CLASSNAME}--has-1-thumbnail`]: thumbnails?.length === 1,\n                [`${CLASSNAME}--has-2-thumbnails`]: thumbnails?.length === 2,\n                [`${CLASSNAME}--has-3-thumbnails`]: thumbnails?.length === 3,\n                [`${CLASSNAME}--has-4-thumbnails`]: thumbnails?.length >= 4,\n            })}\n        >\n            <div className={`${CLASSNAME}__wrapper`}>\n                {take(thumbnails, 4).map((thumbnail: any, index: number) => {\n                    const { image, onClick, align, ...thumbnailProps } = thumbnail;\n\n                    return (\n                        <div key={index} className={`${CLASSNAME}__thumbnail`}>\n                            <Thumbnail\n                                {...thumbnailProps}\n                                align={align || Alignment.left}\n                                image={image}\n                                theme={theme}\n                                aspectRatio={AspectRatio.free}\n                                fillHeight\n                                onClick={handleImageClick?.(index, onClick) || onClick}\n                            />\n\n                            {thumbnails.length > 4 && index === 3 && (\n                                <div className={`${CLASSNAME}__overlay`}>\n                                    <span>+{thumbnails.length - 4}</span>\n                                </div>\n                            )}\n                        </div>\n                    );\n                })}\n            </div>\n        </div>\n    );\n});\nMosaic.displayName = COMPONENT_NAME;\nMosaic.className = CLASSNAME;\nMosaic.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Mosaic","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","theme","thumbnails","onImageClick","forwardedProps","_objectWithoutProperties","_excluded","handleImageClick","useMemo","undefined","index","onClick","event","React","createElement","_extends","classNames","handleBasicClasses","prefix","length","take","map","thumbnail","image","align","thumbnailProps","_excluded2","key","Thumbnail","Alignment","left","aspectRatio","AspectRatio","free","fillHeight","displayName","defaultProps"],"mappings":"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"}

package/_internal/components/navigation/index.ts-6d8bea53.d.ts

@@ -0,0 +1,58 @@
+import { p as HasClassName, H as HasTheme, O as Orientation, b as HasAriaLabelOrLabelledBy, q as ComponentRef } from '../../8d67e1e3.js';
+import React, { ReactNode } from 'react';
+
+interface NavigationSectionProps extends React.ComponentPropsWithoutRef<'button'>, HasClassName {
+    /** Items inside the section */
+    children: ReactNode;
+    /** Icon (SVG path). */
+    icon?: string;
+    /** Label content. */
+    label: string | ReactNode;
+}
+
+type NavigationProps = React.ComponentProps<'nav'> & HasClassName & HasTheme & {
+    /** Content of the navigation. These components should be of type NavigationItem to be rendered */
+    children?: ReactNode;
+    orientation?: Orientation;
+} & HasAriaLabelOrLabelledBy;
+declare const Navigation: React.ForwardRefExoticComponent<(Omit<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & HasClassName & HasTheme & {
+    /** Content of the navigation. These components should be of type NavigationItem to be rendered */
+    children?: ReactNode;
+    orientation?: Orientation | undefined;
+} & {
+    'aria-label': string;
+    'aria-labelledby'?: undefined;
+}, "ref"> | Omit<React.ClassAttributes<HTMLElement> & React.HTMLAttributes<HTMLElement> & HasClassName & HasTheme & {
+    /** Content of the navigation. These components should be of type NavigationItem to be rendered */
+    children?: ReactNode;
+    orientation?: Orientation | undefined;
+} & {
+    'aria-labelledby': string;
+    'aria-label'?: undefined;
+}, "ref">) & React.RefAttributes<HTMLElement>> & {
+    displayName: string;
+    className: string;
+    defaultProps: {
+        orientation: "vertical";
+    };
+    Section: React.ForwardRefExoticComponent<NavigationSectionProps & React.RefAttributes<HTMLLIElement>> & {
+        displayName: string;
+        className: string;
+    };
+    Item: (<E extends React.ElementType = "a">(props: React.PropsWithoutRef<React.ComponentProps<E>> & {
+        as?: E | undefined;
+    } & HasTheme & HasClassName & {
+        icon?: string | undefined;
+        label: React.ReactNode;
+        isCurrentPage?: boolean | undefined;
+    } & (E extends "a" ? {
+        href: string;
+    } : Record<string, unknown>) & {
+        ref?: ComponentRef<E> | undefined;
+    }) => React.ReactNode) & {
+        displayName: string;
+        className: string;
+    };
+};
+
+export { Navigation, type NavigationProps };

package/_internal/components/navigation/index.ts-e8dc0a7f.js

@@ -0,0 +1,222 @@
+import { h as getRootClassName, j as _objectWithoutProperties, g as classNames, _ as _extends, S as Size, O as Orientation, T as Theme } from '../../1da25128.js';
+import React__default, { createContext, forwardRef, useState, useRef, useContext } from 'react';
+import { u as useTheme, T as ThemeProvider } from '../../3181f000.js';
+import { u as useId } from '../../3a1facc0.js';
+import { u as useOverflowTooltipLabel, T as Text } from '../../53c94227.js';
+import { h as handleBasicClasses } from '../../f57e1239.js';
+import { Tooltip } from '../tooltip/index.ts-905c847c.js';
+import { P as Placement } from '../../2e2abe51.js';
+import { I as Icon, n as mdiChevronUp, o as mdiChevronDown } from '../../c6c99f76.js';
+import { P as Popover } from '../../54d9ded5.js';
+
+/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
+
+const forwardRefPolymorphic = React__default.forwardRef;
+
+const _excluded$2 = ["className", "icon", "label", "isCurrentPage", "as"];
+
+/** Make `href` required when `as` is `a` */
+
+/**
+ * Navigation item props
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$2 = 'NavigationItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
+const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
+  const {
+      className,
+      icon,
+      label,
+      isCurrentPage,
+      as: Element = 'a'
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$2);
+  const theme = useTheme();
+  const {
+    tooltipLabel,
+    labelRef
+  } = useOverflowTooltipLabel();
+  const buttonProps = Element === 'button' ? {
+    type: 'button'
+  } : {};
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$2,
+      theme
+    }))
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    label: tooltipLabel,
+    placement: Placement.TOP
+  }, /*#__PURE__*/React__default.createElement(Element, _extends({
+    className: handleBasicClasses({
+      prefix: `${CLASSNAME$2}__link`,
+      isSelected: isCurrentPage
+    }),
+    ref: ref,
+    "aria-current": isCurrentPage ? 'page' : undefined
+  }, buttonProps, forwardedProps), icon ? /*#__PURE__*/React__default.createElement(Icon, {
+    className: `${CLASSNAME$2}__icon`,
+    icon: icon,
+    size: Size.xs,
+    theme: theme
+  }) : null, /*#__PURE__*/React__default.createElement(Text, {
+    as: "span",
+    truncate: true,
+    className: `${CLASSNAME$2}__label`,
+    ref: labelRef
+  }, label))));
+}), {
+  displayName: COMPONENT_NAME$2,
+  className: CLASSNAME$2
+});
+
+const NavigationContext = /*#__PURE__*/createContext({
+  orientation: Orientation.vertical
+});
+
+const _excluded$1 = ["children", "className", "label", "icon"];
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'NavigationSection';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+const NavigationSection = Object.assign( /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      label,
+      icon
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$1);
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const sectionId = useId();
+  const {
+    orientation
+  } = useContext(NavigationContext) || {};
+  const theme = useTheme();
+  const isDropdown = orientation === Orientation.horizontal;
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: classNames(className, CLASSNAME$1, CLASSNAME$2, handleBasicClasses({
+      prefix: CLASSNAME$2,
+      theme
+    })),
+    ref: ref
+  }, /*#__PURE__*/React__default.createElement("button", _extends({}, forwardedProps, {
+    "aria-controls": sectionId,
+    "aria-expanded": isOpen,
+    className: classNames(`${CLASSNAME$2}__link`),
+    ref: buttonRef,
+    onClick: event => {
+      setIsOpen(!isOpen);
+      event.stopPropagation();
+    },
+    type: "button"
+  }), icon ? /*#__PURE__*/React__default.createElement(Icon, {
+    className: `${CLASSNAME$2}__icon`,
+    icon: icon,
+    size: Size.xs
+  }) : null, /*#__PURE__*/React__default.createElement(Text, {
+    as: "span",
+    truncate: true,
+    className: `${CLASSNAME$2}__label`,
+    ref: ref
+  }, label), /*#__PURE__*/React__default.createElement(Icon, {
+    className: classNames(`${CLASSNAME$2}__icon`, `${CLASSNAME$1}__chevron`),
+    icon: isOpen ? mdiChevronUp : mdiChevronDown
+  })), isOpen && (isDropdown ? /*#__PURE__*/React__default.createElement(Popover, {
+    anchorRef: buttonRef,
+    isOpen: isOpen,
+    placement: Placement.BOTTOM_START,
+    usePortal: false,
+    closeOnClickAway: true,
+    closeOnEscape: true,
+    onClick: () => setIsOpen(false),
+    onClose: () => setIsOpen(false),
+    zIndex: 996
+  }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: Theme.light
+  }, /*#__PURE__*/React__default.createElement("ul", {
+    className: `${CLASSNAME$1}__drawer--popover`,
+    id: sectionId
+  }, /*#__PURE__*/React__default.createElement(NavigationContext.Provider, {
+    value: {
+      orientation: Orientation.vertical
+    }
+  }, children)))) : /*#__PURE__*/React__default.createElement("ul", {
+    className: `${CLASSNAME$1}__drawer`,
+    id: sectionId
+  }, children)));
+}), {
+  displayName: COMPONENT_NAME$1,
+  className: CLASSNAME$1
+});
+
+const _excluded = ["children", "className", "theme", "orientation"];
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Navigation';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props
+ */
+const DEFAULT_PROPS = {
+  orientation: Orientation.vertical
+};
+const Navigation = Object.assign(
+/*#__PURE__*/
+// eslint-disable-next-line react/display-name
+forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+      children,
+      className,
+      theme = defaultTheme,
+      orientation
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: theme
+  }, /*#__PURE__*/React__default.createElement("nav", _extends({
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      theme,
+      orientation
+    })),
+    ref: ref
+  }, forwardedProps), /*#__PURE__*/React__default.createElement(NavigationContext.Provider, {
+    value: {
+      orientation
+    }
+  }, /*#__PURE__*/React__default.createElement("ul", {
+    className: `${CLASSNAME}__list`
+  }, children))));
+}), {
+  displayName: COMPONENT_NAME,
+  className: CLASSNAME,
+  defaultProps: DEFAULT_PROPS,
+  // Sub components
+  Section: NavigationSection,
+  Item: NavigationItem
+});
+
+export { Navigation };
+//# sourceMappingURL=index.ts-e8dc0a7f.js.map