@lumx/react 3.20.1-alpha.34 → 3.20.1-alpha.36

package/_internal/{2403668c.js → components/inline-list/index-52efec7f.js}

@@ -1,7 +1,7 @@
 import { Children, isValidElement } from 'react';
 import classNames from 'classnames';
 import { getRootClassName, getTypographyClassName, fontColorClass } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 /**
@@ -72,4 +72,3 @@ InlineList.className = CLASSNAME;
 InlineList.defaultProps = DEFAULT_PROPS;
 
 export { InlineList };
-//# sourceMappingURL=2403668c.js.map

package/_internal/{3119c1fe.js → components/input-helper/index-5a837e7c.js}

@@ -1,11 +1,22 @@
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
-import { useTheme } from './d8ee966d.js';
-import { INPUT_HELPER_CONFIGURATION } from './08b0de35.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { u as useTheme } from '../../3181f000.js';
 import { jsx } from 'react/jsx-runtime';
 import { Kind, Theme } from '@lumx/core/js/constants';
 
+const INPUT_HELPER_CONFIGURATION = {
+  error: {
+    color: 'red'
+  },
+  success: {
+    color: 'green'
+  },
+  warning: {
+    color: 'yellow'
+  }
+};
+
 /**
  * Component display name.
  */
@@ -58,4 +69,3 @@ InputHelper.className = CLASSNAME;
 InputHelper.defaultProps = DEFAULT_PROPS;
 
 export { InputHelper };
-//# sourceMappingURL=3119c1fe.js.map

package/_internal/{26a92990.js → components/input-label/index-0113f382.js}

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { getRootClassName, getTypographyClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
-import { useTheme } from './d8ee966d.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { u as useTheme } from '../../3181f000.js';
 import { jsx } from 'react/jsx-runtime';
 import { Theme } from '@lumx/core/js/constants';
 
@@ -57,4 +57,3 @@ InputLabel.className = CLASSNAME;
 InputLabel.defaultProps = DEFAULT_PROPS;
 
 export { InputLabel };
-//# sourceMappingURL=26a92990.js.map

package/_internal/{5c4e10a0.js → components/lightbox/index-fad5a9f2.js}

@@ -1,20 +1,20 @@
 import { useRef, useEffect } from 'react';
 import classNames from 'classnames';
-import { DOCUMENT } from './6af61e2f.js';
+import { D as DOCUMENT } from '../../d0e3f49e.js';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useFocusTrap } from './0350c865.js';
-import { useDisableBodyScroll } from './39534d28.js';
-import { mergeRefs } from './27df0cb6.js';
-import { useCallbackOnEscape } from './91f36a80.js';
-import { useTransitionVisibility } from './f6bc7948.js';
-import { ThemeProvider } from './d8ee966d.js';
-import { forwardRef } from './bd8b3ec8.js';
+import { u as useFocusTrap } from '../../6f084a40.js';
+import { u as useDisableBodyScroll } from '../../36bd7352.js';
+import { m as mergeRefs } from '../../f0d7d6ea.js';
+import { u as useCallbackOnEscape } from '../../76ddefd4.js';
+import { u as useTransitionVisibility } from '../../a38bdcd0.js';
+import { T as ThemeProvider } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Portal } from './38ac8c66.js';
-import { IconButton } from './5a0207d9.js';
-import { mdiClose } from './ad7c38b0.js';
-import { HeadingLevelProvider } from './fd3e2f21.js';
-import { ClickAwayProvider } from './739f2f15.js';
+import { Portal } from '../../utils/Portal/index-6e0a7404.js';
+import { I as IconButton } from '../../b83e864b.js';
+import { m as mdiClose } from '../../eaf6c45a.js';
+import { H as HeadingLevelProvider } from '../../ebdcb0c7.js';
+import { ClickAwayProvider } from '../../utils/ClickAwayProvider/index-1234ce76.js';
 import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
 
 /**
@@ -153,4 +153,3 @@ Lightbox.displayName = COMPONENT_NAME;
 Lightbox.className = CLASSNAME;
 
 export { Lightbox };
-//# sourceMappingURL=5c4e10a0.js.map

package/_internal/{69eb2393.js → components/link/index-008bae4b.js}

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import { getRootClassName, resolveColorWithVariants, handleBasicClasses, getTypographyClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
-import { wrapChildrenIconWithSpaces } from './16f5497d.js';
-import { RawClickable } from './a6dc95cd.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { w as wrapChildrenIconWithSpaces } from '../../7b293665.js';
+import { R as RawClickable } from '../../2c2b6a89.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useDisableStateProps } from './ef982c3d.js';
-import { Icon } from './595d0e66.js';
+import { useDisableStateProps } from '../../utils/disabled/index-075b99c3.js';
+import { I as Icon } from '../../bace1bf1.js';
 
 /**
  * Component display name.
@@ -70,4 +70,3 @@ Link.displayName = COMPONENT_NAME;
 Link.className = CLASSNAME;
 
 export { Link };
-//# sourceMappingURL=69eb2393.js.map

package/_internal/{9e3b78fa.js → components/link-preview/index-3e9c32f2.js}

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTheme } from './d8ee966d.js';
-import { forwardRef } from './bd8b3ec8.js';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Link } from './69eb2393.js';
+import { Link } from '../link/index-008bae4b.js';
 import { Size, Theme, AspectRatio, ColorPalette, ColorVariant } from '@lumx/core/js/constants';
-import { Thumbnail } from './dbe906f1.js';
+import { T as Thumbnail } from '../../035c132d.js';
 
 /**
  * Component display name.
@@ -115,4 +115,3 @@ LinkPreview.className = CLASSNAME;
 LinkPreview.defaultProps = DEFAULT_PROPS;
 
 export { LinkPreview };
-//# sourceMappingURL=9e3b78fa.js.map

package/_internal/{4d751800.js → components/list/index-da88c6e9.js}

@@ -1,8 +1,40 @@
+export { L as List, a as ListItem, i as isClickable } from '../../0ea95af1.js';
 import classNames from 'classnames';
 import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsx } from 'react/jsx-runtime';
 
+/**
+ * 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,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("li", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, CLASSNAME$1)
+  });
+});
+ListDivider.displayName = COMPONENT_NAME$1;
+ListDivider.className = CLASSNAME$1;
+
 /**
  * Component display name.
  */
@@ -36,5 +68,4 @@ const ListSubheader = forwardRef((props, ref) => {
 ListSubheader.displayName = COMPONENT_NAME;
 ListSubheader.className = CLASSNAME;
 
-export { ListSubheader };
-//# sourceMappingURL=4d751800.js.map
+export { ListDivider, ListSubheader };

package/_internal/{b9e3e436.js → components/message/index-17b568f2.js}

@@ -1,15 +1,13 @@
 import classNames from 'classnames';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Kind, ColorPalette, Size, Emphasis } from '@lumx/core/js/constants';
-import { mdiAlert } from './f419ecef.js';
-import { mdiInformation } from './68f13c1c.js';
-import { mdiCheckCircle } from './e47dacb8.js';
-import { mdiAlertCircle } from './893eb653.js';
-import { Icon } from './595d0e66.js';
-import { IconButton } from './5a0207d9.js';
-import { mdiClose } from './ad7c38b0.js';
+import { m as mdiAlert, a as mdiInformation } from '../../49bbeed3.js';
+import { m as mdiCheckCircle } from '../../de24f857.js';
+import { m as mdiAlertCircle, I as Icon } from '../../bace1bf1.js';
+import { I as IconButton } from '../../b83e864b.js';
+import { m as mdiClose } from '../../eaf6c45a.js';
 
 /**
  * Component display name.
@@ -98,4 +96,3 @@ Message.displayName = COMPONENT_NAME;
 Message.className = CLASSNAME;
 
 export { Message };
-//# sourceMappingURL=b9e3e436.js.map

package/_internal/{226a2eac.js → components/mosaic/index-2d40e01c.js}

@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
 import classNames from 'classnames';
 import take from 'lodash/take';
-import { useTheme } from './d8ee966d.js';
+import { u as useTheme } from '../../3181f000.js';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Theme, Alignment, AspectRatio } from '@lumx/core/js/constants';
-import { Thumbnail } from './dbe906f1.js';
+import { T as Thumbnail } from '../../035c132d.js';
 
 /**
  * Component display name.
@@ -93,4 +93,3 @@ Mosaic.className = CLASSNAME;
 Mosaic.defaultProps = DEFAULT_PROPS;
 
 export { Mosaic };
-//# sourceMappingURL=226a2eac.js.map

package/_internal/components/navigation/index-dc17c639.js

@@ -0,0 +1,225 @@
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useTheme, T as ThemeProvider } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { createContext, useState, useRef, useContext } from 'react';
+import { u as useId } from '../../3a1facc0.js';
+import { f as forwardRefPolymorphic, R as RawClickable } from '../../2c2b6a89.js';
+import { u as useOverflowTooltipLabel, T as Text } from '../../e913a3af.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tooltip } from '../tooltip/index-8bb97e60.js';
+import { P as Placement } from '../../4f4c0582.js';
+import { I as Icon } from '../../bace1bf1.js';
+import { Size, Orientation, Theme } from '@lumx/core/js/constants';
+import { P as Popover } from '../../3864a6c1.js';
+import { m as mdiChevronUp, a as mdiChevronDown } from '../../0b9c76cb.js';
+
+/**
+ * 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',
+    ...forwardedProps
+  } = props;
+  const theme = useTheme();
+  const {
+    tooltipLabel,
+    labelRef
+  } = useOverflowTooltipLabel(label);
+  return /*#__PURE__*/jsx("li", {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$2,
+      theme
+    })),
+    children: /*#__PURE__*/jsx(Tooltip, {
+      label: tooltipLabel,
+      placement: Placement.TOP,
+      children: /*#__PURE__*/jsxs(RawClickable, {
+        as: Element,
+        className: handleBasicClasses({
+          prefix: `${CLASSNAME$2}__link`,
+          isSelected: isCurrentPage
+        }),
+        ref: ref,
+        "aria-current": isCurrentPage ? 'page' : undefined,
+        ...forwardedProps,
+        children: [icon ? /*#__PURE__*/jsx(Icon, {
+          className: `${CLASSNAME$2}__icon`,
+          icon: icon,
+          size: Size.xs,
+          theme: theme
+        }) : null, /*#__PURE__*/jsx(Text, {
+          as: "span",
+          truncate: true,
+          className: `${CLASSNAME$2}__label`,
+          ref: labelRef,
+          children: label
+        })]
+      })
+    })
+  });
+}), {
+  displayName: COMPONENT_NAME$2,
+  className: CLASSNAME$2
+});
+
+const NavigationContext = /*#__PURE__*/createContext({
+  orientation: Orientation.vertical
+});
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1 = 'NavigationSection';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+const NavigationSection = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    label,
+    icon,
+    ...forwardedProps
+  } = props;
+  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__*/jsxs("li", {
+    className: classNames(className, CLASSNAME$1, CLASSNAME$2, handleBasicClasses({
+      prefix: CLASSNAME$2,
+      theme
+    })),
+    ref: ref,
+    children: [/*#__PURE__*/jsxs(RawClickable, {
+      as: "button",
+      ...forwardedProps,
+      "aria-controls": sectionId,
+      "aria-expanded": isOpen,
+      className: classNames(`${CLASSNAME$2}__link`),
+      ref: buttonRef,
+      onClick: event => {
+        setIsOpen(!isOpen);
+        event.stopPropagation();
+      },
+      children: [icon ? /*#__PURE__*/jsx(Icon, {
+        className: `${CLASSNAME$2}__icon`,
+        icon: icon,
+        size: Size.xs
+      }) : null, /*#__PURE__*/jsx(Text, {
+        as: "span",
+        truncate: true,
+        className: `${CLASSNAME$2}__label`,
+        ref: ref,
+        children: label
+      }), /*#__PURE__*/jsx(Icon, {
+        className: classNames(`${CLASSNAME$2}__icon`, `${CLASSNAME$1}__chevron`),
+        icon: isOpen ? mdiChevronUp : mdiChevronDown
+      })]
+    }), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
+      anchorRef: buttonRef,
+      isOpen: isOpen,
+      placement: Placement.BOTTOM_START,
+      usePortal: false,
+      closeOnClickAway: true,
+      closeOnEscape: true,
+      onClick: () => setIsOpen(false),
+      onClose: () => setIsOpen(false),
+      zIndex: 996,
+      children: /*#__PURE__*/jsx(ThemeProvider, {
+        value: Theme.light,
+        children: /*#__PURE__*/jsx("ul", {
+          className: `${CLASSNAME$1}__drawer--popover`,
+          id: sectionId,
+          children: /*#__PURE__*/jsx(NavigationContext.Provider, {
+            value: {
+              orientation: Orientation.vertical
+            },
+            children: children
+          })
+        })
+      })
+    }) : /*#__PURE__*/jsx("ul", {
+      className: `${CLASSNAME$1}__drawer`,
+      id: sectionId,
+      children: children
+    }))]
+  });
+});
+NavigationSection.displayName = COMPONENT_NAME$1;
+NavigationSection.className = CLASSNAME$1;
+
+/**
+ * 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 = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    children,
+    className,
+    theme = defaultTheme,
+    orientation = DEFAULT_PROPS.orientation,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx(ThemeProvider, {
+    value: theme,
+    children: /*#__PURE__*/jsx("nav", {
+      className: classNames(className, handleBasicClasses({
+        prefix: CLASSNAME,
+        theme,
+        orientation
+      })),
+      ref: ref,
+      ...forwardedProps,
+      children: /*#__PURE__*/jsx(NavigationContext.Provider, {
+        value: {
+          orientation
+        },
+        children: /*#__PURE__*/jsx("ul", {
+          className: `${CLASSNAME}__list`,
+          children: children
+        })
+      })
+    })
+  });
+});
+Navigation.displayName = COMPONENT_NAME;
+Navigation.className = CLASSNAME;
+Navigation.defaultProps = DEFAULT_PROPS;
+
+// Sub components
+Navigation.Section = NavigationSection;
+Navigation.Item = NavigationItem;
+
+export { Navigation };

package/_internal/{6893b89e.js → components/notification/index-a1101015.js}

@@ -1,18 +1,41 @@
 import { useRef } from 'react';
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
-import { DOCUMENT } from './6af61e2f.js';
-import { NOTIFICATION_CONFIGURATION } from './c9bd0e84.js';
+import { D as DOCUMENT } from '../../d0e3f49e.js';
+import { m as mdiAlert, a as mdiInformation } from '../../49bbeed3.js';
+import { m as mdiCheckCircle } from '../../de24f857.js';
+import { m as mdiAlertCircle, I as Icon } from '../../bace1bf1.js';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTransitionVisibility } from './f6bc7948.js';
-import { mergeRefs } from './27df0cb6.js';
-import { useTheme } from './d8ee966d.js';
-import { forwardRef } from './bd8b3ec8.js';
+import { u as useTransitionVisibility } from '../../a38bdcd0.js';
+import { m as mergeRefs } from '../../f0d7d6ea.js';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Portal } from './38ac8c66.js';
+import { Portal } from '../../utils/Portal/index-6e0a7404.js';
 import { Theme, Size, Emphasis, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
-import { Icon } from './595d0e66.js';
-import { Button } from './0d7cc1e0.js';
+import { a as Button } from '../../7ad474e4.js';
+
+/**
+ * Notification icon and colors according to their type.
+ */
+const NOTIFICATION_CONFIGURATION = {
+  error: {
+    color: 'red',
+    icon: mdiAlert
+  },
+  info: {
+    color: 'blue',
+    icon: mdiInformation
+  },
+  success: {
+    color: 'green',
+    icon: mdiCheckCircle
+  },
+  warning: {
+    color: 'yellow',
+    icon: mdiAlertCircle
+  }
+};
 
 /**
  * Component display name.
@@ -121,4 +144,3 @@ Notification.className = CLASSNAME;
 Notification.defaultProps = DEFAULT_PROPS;
 
 export { Notification };
-//# sourceMappingURL=6893b89e.js.map

package/_internal/components/popover/index-dbca63f1.js

@@ -0,0 +1,2 @@
+export { P as Popover } from '../../3864a6c1.js';
+export { P as Placement } from '../../4f4c0582.js';

package/_internal/{507d9459.js → components/popover-dialog/index-654d2abc.js}

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from './bd8b3ec8.js';
-import { Popover } from './612f6fb4.js';
+import { f as forwardRef } from '../../8bce732e.js';
+import { P as Popover } from '../../3864a6c1.js';
 import { jsx } from 'react/jsx-runtime';
-import { HeadingLevelProvider } from './fd3e2f21.js';
+import { H as HeadingLevelProvider } from '../../ebdcb0c7.js';
 
 /**
  * Component display name.
@@ -64,4 +64,3 @@ PopoverDialog.className = CLASSNAME;
 PopoverDialog.defaultProps = DEFAULT_PROPS;
 
 export { PopoverDialog };
-//# sourceMappingURL=507d9459.js.map

package/_internal/{c241db12.js → components/post-block/index-4b6b4dcb.js}

@@ -1,12 +1,12 @@
 import classNames from 'classnames';
 import isObject from 'lodash/isObject';
 import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTheme } from './d8ee966d.js';
-import { forwardRef } from './bd8b3ec8.js';
+import { u as useTheme } from '../../3181f000.js';
+import { f as forwardRef } from '../../8bce732e.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ThumbnailVariant } from './58418448.js';
+import { ThumbnailVariant } from '../thumbnail/index-71545d95.js';
 import { Orientation, Theme } from '@lumx/core/js/constants';
-import { Thumbnail } from './dbe906f1.js';
+import { T as Thumbnail } from '../../035c132d.js';
 
 /**
  * Component display name.
@@ -107,4 +107,3 @@ PostBlock.className = CLASSNAME;
 PostBlock.defaultProps = DEFAULT_PROPS;
 
 export { PostBlock };
-//# sourceMappingURL=c241db12.js.map