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

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.20.1-alpha.36",
-        "@lumx/icons": "^3.20.1-alpha.36",
+        "@lumx/core": "^3.20.1-alpha.37",
+        "@lumx/icons": "^3.20.1-alpha.37",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -90,5 +90,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.36"
+    "version": "3.20.1-alpha.37"
 }

package/utils/index.js

@@ -1,3 +1,159 @@
-export { ClickAwayProvider } from '../_internal/utils/ClickAwayProvider/index-1234ce76.js';
-export { Portal, PortalProvider } from '../_internal/utils/Portal/index-6e0a7404.js';
-export { D as DisabledStateProvider, u as useDisabledStateContext } from '../_internal/ea04260d.js';
+import React__default, { useContext, useEffect, useMemo, useRef, createContext } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+const DisabledStateContext = /*#__PURE__*/React__default.createContext({
+  state: null
+});
+/**
+ * Disabled state provider.
+ * All nested LumX Design System components inherit this disabled state.
+ */
+function DisabledStateProvider({
+  children,
+  ...value
+}) {
+  return /*#__PURE__*/jsx(DisabledStateContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+
+/**
+ * Get DisabledState context value
+ */
+function useDisabledStateContext() {
+  return useContext(DisabledStateContext);
+}
+
+const EVENT_TYPES = ['mousedown', 'touchstart'];
+function isClickAway(targets, refs) {
+  // The targets elements are not contained in any of the listed element references.
+  return !refs.some(ref => targets.some(target => ref?.current?.contains(target)));
+}
+/**
+ * Listen to clicks away from the given elements and callback the passed in function.
+ *
+ * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.
+ */
+function useClickAway({
+  callback,
+  childrenRefs
+}) {
+  useEffect(() => {
+    const {
+      current: currentRefs
+    } = childrenRefs;
+    if (!callback || !currentRefs || isEmpty(currentRefs)) {
+      return undefined;
+    }
+    const listener = evt => {
+      const targets = [evt.composedPath?.()[0], evt.target];
+      if (isClickAway(targets, currentRefs)) {
+        callback(evt);
+      }
+    };
+    EVENT_TYPES.forEach(evtType => document.addEventListener(evtType, listener));
+    return () => {
+      EVENT_TYPES.forEach(evtType => document.removeEventListener(evtType, listener));
+    };
+  }, [callback, childrenRefs]);
+}
+
+const ClickAwayAncestorContext = /*#__PURE__*/createContext(null);
+/**
+ * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure
+ * we take into account both the DOM tree and the React tree to detect click away.
+ *
+ * @return the react component.
+ */
+const ClickAwayProvider = ({
+  children,
+  callback,
+  childrenRefs,
+  parentRef
+}) => {
+  const parentContext = useContext(ClickAwayAncestorContext);
+  const currentContext = useMemo(() => {
+    const context = {
+      childrenRefs: [],
+      /**
+       * Add element refs to the current context and propagate to the parent context.
+       */
+      addRefs(...newChildrenRefs) {
+        // Add element refs that should be considered as inside the click away context.
+        context.childrenRefs.push(...newChildrenRefs);
+        if (parentContext) {
+          // Also add then to the parent context
+          parentContext.addRefs(...newChildrenRefs);
+          if (parentRef) {
+            // The parent element is also considered as inside the parent click away context but not inside the current context
+            parentContext.addRefs(parentRef);
+          }
+        }
+      }
+    };
+    return context;
+  }, [parentContext, parentRef]);
+  useEffect(() => {
+    const {
+      current: currentRefs
+    } = childrenRefs;
+    if (!currentRefs) {
+      return;
+    }
+    currentContext.addRefs(...currentRefs);
+  }, [currentContext, childrenRefs]);
+  useClickAway({
+    callback,
+    childrenRefs: useRef(currentContext.childrenRefs)
+  });
+  return /*#__PURE__*/jsx(ClickAwayAncestorContext.Provider, {
+    value: currentContext,
+    children: children
+  });
+};
+ClickAwayProvider.displayName = 'ClickAwayProvider';
+
+/**
+ * Portal initializing function.
+ * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.
+ */
+
+const PortalContext = /*#__PURE__*/React__default.createContext(() => ({
+  container: document.body
+}));
+/**
+ * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
+ */
+const PortalProvider = PortalContext.Provider;
+
+/**
+ * Render children in a portal outside the current DOM position
+ * (defaults to `document.body` but can be customized with the PortalContextProvider)
+ */
+const Portal = ({
+  children,
+  enabled = true
+}) => {
+  const init = React__default.useContext(PortalContext);
+  const context = React__default.useMemo(() => {
+    return enabled ? init() : null;
+  },
+  // Only update on 'enabled'
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [enabled]);
+  React__default.useLayoutEffect(() => {
+    return context?.teardown;
+  }, [context?.teardown, enabled]);
+  if (!context?.container) {
+    return /*#__PURE__*/jsx(Fragment, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/createPortal(children, context.container);
+};
+
+export { ClickAwayProvider, DisabledStateProvider, Portal, PortalProvider, useDisabledStateContext };
+//# sourceMappingURL=index.js.map

package/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.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/_internal/035c132d.js

@@ -1,314 +0,0 @@
-import React__default, { useState, useEffect, useMemo } from 'react';
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useMergeRefs } from './f0d7d6ea.js';
-import { AspectRatio, Theme, Size } from '@lumx/core/js/constants';
-import { u as useTheme } from './3181f000.js';
-import { f as forwardRef } from './8bce732e.js';
-import { R as RawClickable } from './2c2b6a89.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useDisableStateProps } from './utils/disabled/index-075b99c3.js';
-import { I as Icon } from './bace1bf1.js';
-
-const mdiImageBroken = 'M19 3a2 2 0 0 1 2 2v6h-2v2h-2v2h-2v2h-2v2h-2v2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 12v4a2 2 0 0 1-2 2h-4v-2h2v-2h2v-2zm-2-6.5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H11v-1h2v-2h2v-2h2V9h2z';
-
-function getState(img, event) {
-  // Error event occurred or image has no source.
-  if (event?.type === 'error' || img?.complete && !img.getAttribute('src')) {
-    return 'hasError';
-  }
-  // Image is undefined or incomplete.
-  if (!img || !img.complete) {
-    return 'isLoading';
-  }
-  // Else loaded.
-  return 'isLoaded';
-}
-function useImageLoad(imageURL, imgRef) {
-  const [state, setState] = useState(getState(imgRef));
-
-  // Update state when changing image URL or DOM reference.
-  useEffect(() => {
-    setState(getState(imgRef));
-  }, [imageURL, imgRef]);
-
-  // Listen to `load` and `error` event on image
-  useEffect(() => {
-    const img = imgRef;
-    if (!img) return undefined;
-    const update = event => setState(getState(img, event));
-    img.addEventListener('load', update);
-    img.addEventListener('error', update);
-    return () => {
-      img.removeEventListener('load', update);
-      img.removeEventListener('error', update);
-    };
-  }, [imgRef, imgRef?.src]);
-  return state;
-}
-
-// Calculate shift to center the focus point in the container.
-function shiftPosition({
-  scale,
-  focusPoint,
-  imageSize,
-  containerSize
-}) {
-  const scaledSize = imageSize / scale;
-  if (scaledSize === containerSize) return 0;
-  const scaledFocusHeight = focusPoint * scaledSize;
-  const startFocus = scaledFocusHeight - containerSize / 2;
-  const shift = startFocus / (scaledSize - containerSize);
-  return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
-}
-
-// Compute CSS properties to apply the focus point.
-const useFocusPointStyle = ({
-  image,
-  aspectRatio,
-  focusPoint,
-  imgProps: {
-    width,
-    height
-  } = {}
-}, element, isLoaded) => {
-  // Get natural image size from imgProps or img element.
-  const imageSize = useMemo(() => {
-    // Focus point is not applicable => exit early
-    if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) return undefined;
-    if (typeof width === 'number' && typeof height === 'number') return {
-      width,
-      height
-    };
-    if (element && isLoaded) return {
-      width: element.naturalWidth,
-      height: element.naturalHeight
-    };
-    return undefined;
-  }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);
-
-  // Get container size (dependant on imageSize).
-  const [containerSize, setContainerSize] = useState(undefined);
-  useEffect(function updateContainerSize() {
-    const cWidth = element?.offsetWidth;
-    const cHeight = element?.offsetHeight;
-    if (cWidth && cHeight) {
-      // Update only if needed.
-      setContainerSize(oldContainerSize => oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight ? oldContainerSize : {
-        width: cWidth,
-        height: cHeight
-      });
-    } else if (imageSize) {
-      // Wait for a render (in case the container size is dependent on the image size).
-      requestAnimationFrame(updateContainerSize);
-    }
-  }, [element?.offsetHeight, element?.offsetWidth, imageSize]);
-
-  // Compute style.
-  const style = useMemo(() => {
-    // Focus point is not applicable => exit early
-    if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) {
-      return {};
-    }
-    if (!element || !imageSize) {
-      // Focus point can be computed but now right now (image size unknown).
-      return {
-        visibility: 'hidden'
-      };
-    }
-    if (!containerSize || !imageSize.height || !imageSize.width) {
-      // Missing container or image size abort focus point compute.
-      return {};
-    }
-    const heightScale = imageSize.height / containerSize.height;
-    const widthScale = imageSize.width / containerSize.width;
-    const scale = Math.min(widthScale, heightScale);
-
-    // Focus Y relative to the top (instead of the center)
-    const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;
-    const y = shiftPosition({
-      scale,
-      focusPoint: focusPointFromTop,
-      imageSize: imageSize.height,
-      containerSize: containerSize.height
-    });
-
-    // Focus X relative to the left (instead of the center)
-    const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;
-    const x = shiftPosition({
-      scale,
-      focusPoint: focusPointFromLeft,
-      imageSize: imageSize.width,
-      containerSize: containerSize.width
-    });
-    const objectPosition = `${x}% ${y}%`;
-    return {
-      objectPosition
-    };
-  }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);
-  return style;
-};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Thumbnail';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  fallback: mdiImageBroken,
-  loading: 'lazy'
-};
-
-/**
- * Thumbnail component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Thumbnail = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    otherProps,
-    disabledStateProps
-  } = useDisableStateProps(props);
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    align,
-    alt,
-    aspectRatio = AspectRatio.original,
-    badge,
-    className,
-    crossOrigin,
-    fallback = DEFAULT_PROPS.fallback,
-    fillHeight,
-    // `focusPoint` needs to be here to remove it from `forwardedProps`.
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    focusPoint,
-    image,
-    imgProps,
-    imgRef: propImgRef,
-    isLoading: isLoadingProp,
-    objectFit,
-    loading = DEFAULT_PROPS.loading,
-    loadingPlaceholderImageRef,
-    size,
-    theme = defaultTheme,
-    variant,
-    linkProps,
-    linkAs,
-    ...forwardedProps
-  } = otherProps;
-  const [imgElement, setImgElement] = useState();
-
-  // Image loading state.
-  const loadingState = useImageLoad(image, imgElement);
-  const isLoaded = loadingState === 'isLoaded';
-  const isLoading = isLoadingProp || loadingState === 'isLoading';
-  const hasError = loadingState === 'hasError';
-
-  // Focus point.
-  const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);
-  const hasIconErrorFallback = hasError && typeof fallback === 'string';
-  const hasCustomErrorFallback = hasError && !hasIconErrorFallback;
-  const imageErrorStyle = {};
-  if (hasIconErrorFallback) {
-    // Keep the image layout on icon fallback.
-    imageErrorStyle.visibility = 'hidden';
-  } else if (hasCustomErrorFallback) {
-    // Remove the image on custom fallback.
-    imageErrorStyle.display = 'none';
-  }
-  const isLink = Boolean(linkProps?.href || linkAs);
-  const isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);
-  const Wrapper = isClickable ? RawClickable : 'div';
-  const wrapperProps = {
-    ...forwardedProps
-  };
-  if (isClickable) {
-    Object.assign(wrapperProps, {
-      as: linkAs || (linkProps?.href ? 'a' : 'button')
-    }, disabledStateProps);
-    if (isLink) {
-      Object.assign(wrapperProps, linkProps);
-    } else {
-      wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
-    }
-  }
-
-  // If we have a loading placeholder image that is really loaded (complete)
-  const loadingPlaceholderImage = isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current || undefined;
-
-  // Set loading placeholder image as background
-  const loadingStyle = loadingPlaceholderImage ? {
-    backgroundImage: `url(${loadingPlaceholderImage.src})`
-  } : undefined;
-  return /*#__PURE__*/jsxs(Wrapper, {
-    ...wrapperProps,
-    ref: ref,
-    className: classNames(linkProps?.className, className, handleBasicClasses({
-      align,
-      aspectRatio,
-      prefix: CLASSNAME,
-      size,
-      theme,
-      variant,
-      isClickable,
-      hasError,
-      hasIconErrorFallback,
-      hasCustomErrorFallback,
-      isLoading,
-      objectFit,
-      hasBadge: !!badge
-    }), fillHeight && `${CLASSNAME}--fill-height`),
-    children: [/*#__PURE__*/jsxs("span", {
-      className: `${CLASSNAME}__background`,
-      children: [/*#__PURE__*/jsx("img", {
-        // Use placeholder image size
-        width: loadingPlaceholderImage?.naturalWidth,
-        height: loadingPlaceholderImage?.naturalHeight,
-        ...imgProps,
-        style: {
-          // Reserve space while loading (when possible)
-          width: isLoading ? imgProps?.width || loadingPlaceholderImage?.naturalWidth : undefined,
-          ...imgProps?.style,
-          ...imageErrorStyle,
-          ...focusPointStyle,
-          ...loadingStyle
-        },
-        ref: useMergeRefs(setImgElement, propImgRef),
-        className: classNames(handleBasicClasses({
-          prefix: `${CLASSNAME}__image`,
-          isLoading,
-          hasDefinedSize: Boolean(imgProps?.height && imgProps.width)
-        }), imgProps?.className),
-        crossOrigin: crossOrigin,
-        src: image,
-        alt: alt,
-        loading: loading
-      }), !isLoading && hasError && /*#__PURE__*/jsx("span", {
-        className: `${CLASSNAME}__fallback`,
-        children: hasIconErrorFallback ? /*#__PURE__*/jsx(Icon, {
-          icon: fallback,
-          size: Size.xxs,
-          theme: theme
-        }) : fallback
-      })]
-    }), badge && /*#__PURE__*/React__default.cloneElement(badge, {
-      className: classNames(`${CLASSNAME}__badge`, badge.props.className)
-    })]
-  });
-});
-Thumbnail.displayName = COMPONENT_NAME;
-Thumbnail.className = CLASSNAME;
-Thumbnail.defaultProps = DEFAULT_PROPS;
-
-export { Thumbnail as T, useFocusPointStyle as u };

package/_internal/0b9c76cb.js

@@ -1,5 +0,0 @@
-const mdiChevronDown = 'M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z';
-
-const mdiChevronUp = 'M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z';
-
-export { mdiChevronDown as a, mdiChevronUp as m };