@lumx/react 3.20.1-alpha.11 → 3.20.1-alpha.12

package/_internal/{cdc3efab.js.map → 6da19518.js.map}

@@ -1 +1 @@
-{"version":3,"file":"cdc3efab.js","sources":["../../src/components/skeleton/SkeletonCircle.tsx","../../src/components/skeleton/SkeletonRectangle.tsx","../../src/components/skeleton/SkeletonTypography.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { GlobalSize, Theme, ColorPalette } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface SkeletonCircleProps extends GenericProps, HasTheme {\n    /** Size variant. */\n    size: GlobalSize;\n    /** The color of the skeleton. */\n    color?: ColorPalette;\n}\n\nconst DEFAULT_PROPS: Partial<SkeletonCircleProps> = {};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SkeletonCircle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SkeletonCircle component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const { className, size, color, theme = defaultTheme, ...forwardedProps } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, color, theme }))}\n        />\n    );\n});\nSkeletonCircle.displayName = COMPONENT_NAME;\nSkeletonCircle.defaultProps = DEFAULT_PROPS;\nSkeletonCircle.className = CLASSNAME;\n","import classNames from 'classnames';\n\nimport { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';\nimport { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Skeleton variants.\n */\nexport const SkeletonRectangleVariant = { squared: 'squared', rounded: 'rounded', pill: 'pill' } as const;\nexport type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;\n\n/**\n * Defines the props of the component.\n */\nexport interface SkeletonRectangleProps extends GenericProps, HasTheme {\n    /** Aspect ratio (use with width and not height). */\n    aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;\n    /** Height size. */\n    height?: GlobalSize;\n    /** Border variant. */\n    variant?: SkeletonRectangleVariant;\n    /** Width size. */\n    width?: GlobalSize;\n    /** The color of the skeleton. */\n    color?: ColorPalette;\n}\n\nconst DEFAULT_PROPS: Partial<SkeletonRectangleProps> = {\n    variant: SkeletonRectangleVariant.squared,\n};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SkeletonRectangle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SkeletonRectangle component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SkeletonRectangle = forwardRef<SkeletonRectangleProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        aspectRatio,\n        className,\n        height,\n        theme = defaultTheme,\n        variant = DEFAULT_PROPS.variant,\n        width,\n        color,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    aspectRatio,\n                    height: aspectRatio ? undefined : height,\n                    theme,\n                    variant,\n                    width,\n                    color,\n                }),\n            )}\n        >\n            <div className={`${CLASSNAME}__inner`} />\n        </div>\n    );\n});\nSkeletonRectangle.displayName = COMPONENT_NAME;\nSkeletonRectangle.className = CLASSNAME;\nSkeletonRectangle.defaultProps = DEFAULT_PROPS;\n","import { CSSProperties } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Theme, TypographyInterface, ColorPalette } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface SkeletonTypographyProps extends GenericProps, HasTheme {\n    /** Typography variant. */\n    typography: TypographyInterface;\n    /** Width CSS property. */\n    width?: CSSProperties['width'];\n    /** The color of the skeleton. */\n    color?: ColorPalette;\n}\n\nconst DEFAULT_PROPS: Partial<SkeletonTypographyProps> = {};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SkeletonTypography';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SkeletonTypography component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SkeletonTypography = forwardRef<SkeletonTypographyProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const { className, theme = defaultTheme, typography, width, color, ...forwardedProps } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, typography, color }))}\n            style={{ ...forwardedProps.style, width }}\n        >\n            <div className={`${CLASSNAME}__inner`} />\n        </div>\n    );\n});\nSkeletonTypography.displayName = COMPONENT_NAME;\nSkeletonTypography.defaultProps = DEFAULT_PROPS;\nSkeletonTypography.className = CLASSNAME;\n"],"names":["DEFAULT_PROPS","COMPONENT_NAME","CLASSNAME","getRootClassName","SkeletonCircle","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","size","color","theme","forwardedProps","React","createElement","_extends","classNames","handleBasicClasses","prefix","displayName","defaultProps","SkeletonRectangleVariant","squared","rounded","pill","variant","SkeletonRectangle","aspectRatio","height","width","undefined","SkeletonTypography","typography","style"],"mappings":";;;;AAQA;AACA;AACA;;AAQA,MAAMA,eAA2C,GAAG,EAAE,CAAA;;AAEtD;AACA;AACA;AACA,MAAMC,gBAAc,GAAG,gBAAgB,CAAA;;AAEvC;AACA;AACA;AACA,MAAMC,WAAS,GAAGC,gBAAgB,CAACF,gBAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,cAAc,GAAGC,UAAU,CAAsC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1F,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IAAEC,SAAS;IAAEC,IAAI;IAAEC,KAAK;AAAEC,IAAAA,KAAK,GAAGP,YAAY;IAAE,GAAGQ,cAAAA;AAAe,GAAC,GAAGV,KAAK,CAAA;AAEjF,EAAA,oBACIW,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AACIZ,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EACLS,cAAc,EAAA;AAClBJ,IAAAA,SAAS,EAAEQ,UAAU,CAACR,SAAS,EAAES,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEpB,WAAS;MAAEW,IAAI;MAAEC,KAAK;AAAEC,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GAAA,CACnG,CAAC,CAAA;AAEV,CAAC,EAAC;AACFX,cAAc,CAACmB,WAAW,GAAGtB,gBAAc,CAAA;AAC3CG,cAAc,CAACoB,YAAY,GAAGxB,eAAa,CAAA;AAC3CI,cAAc,CAACQ,SAAS,GAAGV,WAAS;;AC3CpC;AACA;AACA;AACO,MAAMuB,wBAAwB,GAAG;AAAEC,EAAAA,OAAO,EAAE,SAAS;AAAEC,EAAAA,OAAO,EAAE,SAAS;AAAEC,EAAAA,IAAI,EAAE,MAAA;AAAO,EAAU;;AAGzG;AACA;AACA;;AAcA,MAAM5B,eAA8C,GAAG;EACnD6B,OAAO,EAAEJ,wBAAwB,CAACC,OAAAA;AACtC,CAAC,CAAA;;AAED;AACA;AACA;AACA,MAAMzB,gBAAc,GAAG,mBAAmB,CAAA;;AAE1C;AACA;AACA;AACA,MAAMC,WAAS,GAAGC,gBAAgB,CAACF,gBAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAM6B,iBAAiB,GAAGzB,UAAU,CAAyC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAChG,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFoB,WAAW;IACXnB,SAAS;IACToB,MAAM;AACNjB,IAAAA,KAAK,GAAGP,YAAY;IACpBqB,OAAO,GAAG7B,eAAa,CAAC6B,OAAO;IAC/BI,KAAK;IACLnB,KAAK;IACL,GAAGE,cAAAA;AACP,GAAC,GAAGV,KAAK,CAAA;AAET,EAAA,oBACIW,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AACIZ,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EACLS,cAAc,EAAA;AAClBJ,IAAAA,SAAS,EAAEQ,UAAU,CACjBR,SAAS,EACTS,kBAAkB,CAAC;AACfC,MAAAA,MAAM,EAAEpB,WAAS;MACjB6B,WAAW;AACXC,MAAAA,MAAM,EAAED,WAAW,GAAGG,SAAS,GAAGF,MAAM;MACxCjB,KAAK;MACLc,OAAO;MACPI,KAAK;AACLnB,MAAAA,KAAAA;AACJ,KAAC,CACL,CAAA;GAEAG,CAAAA,eAAAA,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKN,SAAS,EAAE,GAAGV,WAAS,CAAA,OAAA,CAAA;AAAU,GAAE,CACvC,CAAC,CAAA;AAEd,CAAC,EAAC;AACF4B,iBAAiB,CAACP,WAAW,GAAGtB,gBAAc,CAAA;AAC9C6B,iBAAiB,CAAClB,SAAS,GAAGV,WAAS,CAAA;AACvC4B,iBAAiB,CAACN,YAAY,GAAGxB,eAAa;;AC7E9C;AACA;AACA;;AAUA,MAAMA,aAA+C,GAAG,EAAE,CAAA;;AAE1D;AACA;AACA;AACA,MAAMC,cAAc,GAAG,oBAAoB,CAAA;;AAE3C;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMkC,kBAAkB,GAAG9B,UAAU,CAA0C,CAACC,KAAK,EAAEC,GAAG,KAAK;EAClG,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IAAEC,SAAS;AAAEG,IAAAA,KAAK,GAAGP,YAAY;IAAE4B,UAAU;IAAEH,KAAK;IAAEnB,KAAK;IAAE,GAAGE,cAAAA;AAAe,GAAC,GAAGV,KAAK,CAAA;AAE9F,EAAA,oBACIW,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AACIZ,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EACLS,cAAc,EAAA;AAClBJ,IAAAA,SAAS,EAAEQ,UAAU,CAACR,SAAS,EAAES,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEpB,SAAS;MAAEa,KAAK;MAAEqB,UAAU;AAAEtB,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;AACtGuB,IAAAA,KAAK,EAAE;MAAE,GAAGrB,cAAc,CAACqB,KAAK;AAAEJ,MAAAA,KAAAA;AAAM,KAAA;GAExChB,CAAAA,eAAAA,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKN,SAAS,EAAE,GAAGV,SAAS,CAAA,OAAA,CAAA;AAAU,GAAE,CACvC,CAAC,CAAA;AAEd,CAAC,EAAC;AACFiC,kBAAkB,CAACZ,WAAW,GAAGtB,cAAc,CAAA;AAC/CkC,kBAAkB,CAACX,YAAY,GAAGxB,aAAa,CAAA;AAC/CmC,kBAAkB,CAACvB,SAAS,GAAGV,SAAS;;;;"}
+{"version":3,"file":"6da19518.js","sources":["../../src/components/skeleton/SkeletonCircle.tsx","../../src/components/skeleton/SkeletonRectangle.tsx","../../src/components/skeleton/SkeletonTypography.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { GlobalSize, Theme, ColorPalette } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface SkeletonCircleProps extends GenericProps, HasTheme {\n    /** Size variant. */\n    size: GlobalSize;\n    /** The color of the skeleton. */\n    color?: ColorPalette;\n}\n\nconst DEFAULT_PROPS: Partial<SkeletonCircleProps> = {};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SkeletonCircle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SkeletonCircle component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SkeletonCircle = forwardRef<SkeletonCircleProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const { className, size, color, theme = defaultTheme, ...forwardedProps } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, color, theme }))}\n        />\n    );\n});\nSkeletonCircle.displayName = COMPONENT_NAME;\nSkeletonCircle.defaultProps = DEFAULT_PROPS;\nSkeletonCircle.className = CLASSNAME;\n","import classNames from 'classnames';\n\nimport { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';\nimport { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Skeleton variants.\n */\nexport const SkeletonRectangleVariant = { squared: 'squared', rounded: 'rounded', pill: 'pill' } as const;\nexport type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;\n\n/**\n * Defines the props of the component.\n */\nexport interface SkeletonRectangleProps extends GenericProps, HasTheme {\n    /** Aspect ratio (use with width and not height). */\n    aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;\n    /** Height size. */\n    height?: GlobalSize;\n    /** Border variant. */\n    variant?: SkeletonRectangleVariant;\n    /** Width size. */\n    width?: GlobalSize;\n    /** The color of the skeleton. */\n    color?: ColorPalette;\n}\n\nconst DEFAULT_PROPS: Partial<SkeletonRectangleProps> = {\n    variant: SkeletonRectangleVariant.squared,\n};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SkeletonRectangle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SkeletonRectangle component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SkeletonRectangle = forwardRef<SkeletonRectangleProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        aspectRatio,\n        className,\n        height,\n        theme = defaultTheme,\n        variant = DEFAULT_PROPS.variant,\n        width,\n        color,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    aspectRatio,\n                    height: aspectRatio ? undefined : height,\n                    theme,\n                    variant,\n                    width,\n                    color,\n                }),\n            )}\n        >\n            <div className={`${CLASSNAME}__inner`} />\n        </div>\n    );\n});\nSkeletonRectangle.displayName = COMPONENT_NAME;\nSkeletonRectangle.className = CLASSNAME;\nSkeletonRectangle.defaultProps = DEFAULT_PROPS;\n","import { CSSProperties } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Theme, TypographyInterface, ColorPalette } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Defines the props of the component.\n */\nexport interface SkeletonTypographyProps extends GenericProps, HasTheme {\n    /** Typography variant. */\n    typography: TypographyInterface;\n    /** Width CSS property. */\n    width?: CSSProperties['width'];\n    /** The color of the skeleton. */\n    color?: ColorPalette;\n}\n\nconst DEFAULT_PROPS: Partial<SkeletonTypographyProps> = {};\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'SkeletonTypography';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * SkeletonTypography component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const SkeletonTypography = forwardRef<SkeletonTypographyProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const { className, theme = defaultTheme, typography, width, color, ...forwardedProps } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, typography, color }))}\n            style={{ ...forwardedProps.style, width }}\n        >\n            <div className={`${CLASSNAME}__inner`} />\n        </div>\n    );\n});\nSkeletonTypography.displayName = COMPONENT_NAME;\nSkeletonTypography.defaultProps = DEFAULT_PROPS;\nSkeletonTypography.className = CLASSNAME;\n"],"names":["DEFAULT_PROPS","COMPONENT_NAME","CLASSNAME","getRootClassName","SkeletonCircle","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","className","size","color","theme","forwardedProps","_jsx","classNames","handleBasicClasses","prefix","displayName","defaultProps","SkeletonRectangleVariant","squared","rounded","pill","variant","SkeletonRectangle","aspectRatio","height","width","undefined","children","SkeletonTypography","typography","style"],"mappings":"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"}

package/_internal/{bcce6ceb.js → 7093ba23.js}

@@ -1,5 +1,6 @@
 import { useEffect, useContext, useMemo, useRef, createContext } from 'react';
 import isEmpty from 'lodash/isEmpty';
+import { jsx } from 'react/jsx-runtime';
 
 const EVENT_TYPES = ['mousedown', 'touchstart'];
 function isClickAway(targets, refs) {
@@ -83,11 +84,12 @@ const ClickAwayProvider = ({
     callback,
     childrenRefs: useRef(currentContext.childrenRefs)
   });
-  return /*#__PURE__*/React.createElement(ClickAwayAncestorContext.Provider, {
-    value: currentContext
-  }, children);
+  return /*#__PURE__*/jsx(ClickAwayAncestorContext.Provider, {
+    value: currentContext,
+    children: children
+  });
 };
 ClickAwayProvider.displayName = 'ClickAwayProvider';
 
 export { ClickAwayProvider as C };
-//# sourceMappingURL=bcce6ceb.js.map
+//# sourceMappingURL=7093ba23.js.map

package/_internal/{bcce6ceb.js.map → 7093ba23.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bcce6ceb.js","sources":["../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx"],"sourcesContent":["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"],"names":["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","createContext","ClickAwayProvider","children","parentRef","parentContext","useContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","useRef","React","createElement","Provider","value","displayName"],"mappings":"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"}
+{"version":3,"file":"7093ba23.js","sources":["../../src/hooks/useClickAway.tsx","../../src/utils/ClickAwayProvider/ClickAwayProvider.tsx"],"sourcesContent":["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"],"names":["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","createContext","ClickAwayProvider","children","parentRef","parentContext","useContext","currentContext","useMemo","context","addRefs","newChildrenRefs","push","useRef","_jsx","Provider","value","displayName"],"mappings":"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"}

package/_internal/{bc4cb4c0.js → 74a4a214.js}

@@ -1,15 +1,8 @@
-import { m as getRootClassName, c as Size, n as forwardRef, b as Theme, _ as _extends, l as classNames, i as AspectRatio } from './d3321a86.js';
-import { h as handleBasicClasses } from './4ceaf17c.js';
+import { m as getRootClassName, c as Size, n as forwardRef, b as Theme, l as classNames, i as AspectRatio } from './6589b796.js';
+import { h as handleBasicClasses } from './e2afb13f.js';
 import { u as useTheme } from './3181f000.js';
-import { T as Thumbnail } from './714809cc.js';
-
-/**
- * Avatar sizes.
- */
-
-/**
- * Defines the props of the component.
- */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { T as Thumbnail } from './628468c4.js';
 
 /**
  * Component display name.
@@ -52,35 +45,38 @@ const Avatar = forwardRef((props, ref) => {
     thumbnailProps,
     ...forwardedProps
   } = props;
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
-  }, forwardedProps, {
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
     className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME,
       size,
       theme
-    }))
-  }), /*#__PURE__*/React.createElement(Thumbnail, _extends({
-    linkProps: linkProps,
-    linkAs: linkAs,
-    className: `${CLASSNAME}__thumbnail`,
-    onClick: onClick,
-    onKeyPress: onKeyPress
-  }, thumbnailProps, {
-    aspectRatio: AspectRatio.square,
-    size: size,
-    image: image,
-    alt: alt,
-    theme: theme
-  })), actions && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME}__actions`
-  }, actions), badge && /*#__PURE__*/React.createElement("div", {
-    className: `${CLASSNAME}__badge`
-  }, badge));
+    })),
+    children: [/*#__PURE__*/jsx(Thumbnail, {
+      linkProps: linkProps,
+      linkAs: linkAs,
+      className: `${CLASSNAME}__thumbnail`,
+      onClick: onClick,
+      onKeyPress: onKeyPress,
+      ...thumbnailProps,
+      aspectRatio: AspectRatio.square,
+      size: size,
+      image: image,
+      alt: alt,
+      theme: theme
+    }), actions && /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME}__actions`,
+      children: actions
+    }), badge && /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME}__badge`,
+      children: badge
+    })]
+  });
 });
 Avatar.displayName = COMPONENT_NAME;
 Avatar.className = CLASSNAME;
 Avatar.defaultProps = DEFAULT_PROPS;
 
 export { Avatar };
-//# sourceMappingURL=bc4cb4c0.js.map
+//# sourceMappingURL=74a4a214.js.map

package/_internal/{bc4cb4c0.js.map → 74a4a214.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bc4cb4c0.js","sources":["../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps, HasTheme {\n    /** Action toolbar content. */\n    actions?: ReactNode;\n    /** Image alternative text. */\n    alt: string;\n    /** Badge. */\n    badge?: ReactElement;\n    /** Image URL. */\n    image: string;\n    /** Props to pass to the link wrapping the thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Size variant. */\n    size?: AvatarSize;\n    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n    thumbnailProps?: Omit<\n        ThumbnailProps,\n        'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n    >;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\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<AvatarProps> = {\n    size: Size.m,\n};\n\n/**\n * Avatar component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Avatar = forwardRef<AvatarProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        actions,\n        alt,\n        badge,\n        className,\n        image,\n        linkProps,\n        linkAs,\n        onClick,\n        onKeyPress,\n        size = DEFAULT_PROPS.size,\n        theme = defaultTheme,\n        thumbnailProps,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n        >\n            <Thumbnail\n                linkProps={linkProps}\n                linkAs={linkAs}\n                className={`${CLASSNAME}__thumbnail`}\n                onClick={onClick}\n                onKeyPress={onKeyPress}\n                {...thumbnailProps}\n                aspectRatio={AspectRatio.square}\n                size={size}\n                image={image}\n                alt={alt}\n                theme={theme}\n            />\n            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n            {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n        </div>\n    );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","Avatar","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actions","alt","badge","className","image","linkProps","linkAs","onClick","onKeyPress","theme","thumbnailProps","forwardedProps","React","createElement","_extends","classNames","handleBasicClasses","prefix","Thumbnail","aspectRatio","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;AAWA;AACA;AACA;;AAGA;AACA;AACA;;AA2BA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,QAAQ,CAAA;;AAE/B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAmC,GAAG;EACxCC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,MAAM,GAAGC,UAAU,CAA8B,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1E,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,OAAO;IACPC,GAAG;IACHC,KAAK;IACLC,SAAS;IACTC,KAAK;IACLC,SAAS;IACTC,MAAM;IACNC,OAAO;IACPC,UAAU;IACVnB,IAAI,GAAGD,aAAa,CAACC,IAAI;AACzBoB,IAAAA,KAAK,GAAGb,YAAY;IACpBc,cAAc;IACd,GAAGC,cAAAA;AACP,GAAC,GAAGjB,KAAK,CAAA;AAET,EAAA,oBACIkB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAAC,QAAA,CAAA;AACInB,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EACLgB,cAAc,EAAA;AAClBR,IAAAA,SAAS,EAAEY,UAAU,CAACZ,SAAS,EAAEa,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE/B,SAAS;MAAEG,IAAI;AAAEoB,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAA;AAAE,GAAA,CAAA,eAEzFG,KAAA,CAAAC,aAAA,CAACK,SAAS,EAAAJ,QAAA,CAAA;AACNT,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,MAAM,EAAEA,MAAO;IACfH,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAc,WAAA,CAAA;AACrCqB,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,UAAU,EAAEA,UAAAA;AAAW,GAAA,EACnBE,cAAc,EAAA;IAClBS,WAAW,EAAEC,WAAW,CAACC,MAAO;AAChChC,IAAAA,IAAI,EAAEA,IAAK;AACXe,IAAAA,KAAK,EAAEA,KAAM;AACbH,IAAAA,GAAG,EAAEA,GAAI;AACTQ,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,CAChB,CAAC,EACDT,OAAO,iBAAIY,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,GAAGjB,SAAS,CAAA,SAAA,CAAA;AAAY,GAAA,EAAEc,OAAa,CAAC,EACnEE,KAAK,iBAAIU,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKV,SAAS,EAAE,GAAGjB,SAAS,CAAA,OAAA,CAAA;GAAYgB,EAAAA,KAAW,CAC5D,CAAC,CAAA;AAEd,CAAC,EAAC;AACFV,MAAM,CAAC8B,WAAW,GAAGrC,cAAc,CAAA;AACnCO,MAAM,CAACW,SAAS,GAAGjB,SAAS,CAAA;AAC5BM,MAAM,CAAC+B,YAAY,GAAGnC,aAAa;;;;"}
+{"version":3,"file":"74a4a214.js","sources":["../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\n/**\n * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps, HasTheme {\n    /** Action toolbar content. */\n    actions?: ReactNode;\n    /** Image alternative text. */\n    alt: string;\n    /** Badge. */\n    badge?: ReactElement;\n    /** Image URL. */\n    image: string;\n    /** Props to pass to the link wrapping the thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Size variant. */\n    size?: AvatarSize;\n    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n    thumbnailProps?: Omit<\n        ThumbnailProps,\n        'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n    >;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\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<AvatarProps> = {\n    size: Size.m,\n};\n\n/**\n * Avatar component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Avatar = forwardRef<AvatarProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        actions,\n        alt,\n        badge,\n        className,\n        image,\n        linkProps,\n        linkAs,\n        onClick,\n        onKeyPress,\n        size = DEFAULT_PROPS.size,\n        theme = defaultTheme,\n        thumbnailProps,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n        >\n            <Thumbnail\n                linkProps={linkProps}\n                linkAs={linkAs}\n                className={`${CLASSNAME}__thumbnail`}\n                onClick={onClick}\n                onKeyPress={onKeyPress}\n                {...thumbnailProps}\n                aspectRatio={AspectRatio.square}\n                size={size}\n                image={image}\n                alt={alt}\n                theme={theme}\n            />\n            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n            {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n        </div>\n    );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","Avatar","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actions","alt","badge","className","image","linkProps","linkAs","onClick","onKeyPress","theme","thumbnailProps","forwardedProps","_jsxs","classNames","handleBasicClasses","prefix","children","_jsx","Thumbnail","aspectRatio","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;AA6CA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,QAAQ,CAAA;;AAE/B;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAmC,GAAG;EACxCC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,MAAM,GAAGC,UAAU,CAA8B,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1E,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,OAAO;IACPC,GAAG;IACHC,KAAK;IACLC,SAAS;IACTC,KAAK;IACLC,SAAS;IACTC,MAAM;IACNC,OAAO;IACPC,UAAU;IACVnB,IAAI,GAAGD,aAAa,CAACC,IAAI;AACzBoB,IAAAA,KAAK,GAAGb,YAAY;IACpBc,cAAc;IACd,GAAGC,cAAAA;AACP,GAAC,GAAGjB,KAAK,CAAA;AAET,EAAA,oBACIkB,IAAA,CAAA,KAAA,EAAA;AACIjB,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLgB,cAAc;AAClBR,IAAAA,SAAS,EAAEU,UAAU,CAACV,SAAS,EAAEW,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE7B,SAAS;MAAEG,IAAI;AAAEoB,MAAAA,KAAAA;AAAM,KAAC,CAAC,CAAE;IAAAO,QAAA,EAAA,cAEzFC,GAAA,CAACC,SAAS,EAAA;AACNb,MAAAA,SAAS,EAAEA,SAAU;AACrBC,MAAAA,MAAM,EAAEA,MAAO;MACfH,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAc,WAAA,CAAA;AACrCqB,MAAAA,OAAO,EAAEA,OAAQ;AACjBC,MAAAA,UAAU,EAAEA,UAAW;AAAA,MAAA,GACnBE,cAAc;MAClBS,WAAW,EAAEC,WAAW,CAACC,MAAO;AAChChC,MAAAA,IAAI,EAAEA,IAAK;AACXe,MAAAA,KAAK,EAAEA,KAAM;AACbH,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAChB,CAAC,EACDT,OAAO,iBAAIiB,GAAA,CAAA,KAAA,EAAA;MAAKd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAY,SAAA,CAAA;AAAA8B,MAAAA,QAAA,EAAEhB,OAAAA;AAAO,KAAM,CAAC,EACnEE,KAAK,iBAAIe,GAAA,CAAA,KAAA,EAAA;MAAKd,SAAS,EAAE,CAAGjB,EAAAA,SAAS,CAAU,OAAA,CAAA;AAAA8B,MAAAA,QAAA,EAAEd,KAAAA;AAAK,KAAM,CAAC,CAAA;AAAA,GAC7D,CAAC,CAAA;AAEd,CAAC,EAAC;AACFV,MAAM,CAAC8B,WAAW,GAAGrC,cAAc,CAAA;AACnCO,MAAM,CAACW,SAAS,GAAGjB,SAAS,CAAA;AAC5BM,MAAM,CAAC+B,YAAY,GAAGnC,aAAa;;;;"}

package/_internal/{95a2e851.js → 76be70dd.js}

@@ -1,5 +1,5 @@
-export { T as Thumbnail, u as useFocusPointStyle } from './714809cc.js';
-import { i as AspectRatio } from './d3321a86.js';
+export { T as Thumbnail, u as useFocusPointStyle } from './628468c4.js';
+import { i as AspectRatio } from './6589b796.js';
 
 /**
  *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
@@ -39,4 +39,4 @@ const ThumbnailObjectFit = {
 };
 
 export { ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant };
-//# sourceMappingURL=95a2e851.js.map
+//# sourceMappingURL=76be70dd.js.map

package/_internal/{95a2e851.js.map → 76be70dd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"95a2e851.js","sources":["../../src/components/thumbnail/types.ts"],"sourcesContent":["import React from 'react';\nimport { AspectRatio, Size } from '@lumx/react';\nimport { ValueOf } from '@lumx/react/utils/type';\n\n/**\n *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).\n */\nexport type FocusPoint = { x?: number; y?: number };\n\n/**\n * Loading attribute is not yet supported in typescript, so we need\n * to add it in order to avoid a ts error.\n * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes\n */\ndeclare module 'react' {\n    interface ImgHTMLAttributes<T> extends React.HTMLAttributes<T> {\n        loading?: 'eager' | 'lazy';\n    }\n}\n\n/**\n * All available aspect ratios.\n * @deprecated\n */\nexport const ThumbnailAspectRatio: Record<string, AspectRatio> = { ...AspectRatio };\n\n/**\n *  Thumbnail sizes.\n */\nexport type ThumbnailSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Thumbnail variants.\n */\nexport const ThumbnailVariant = {\n    squared: 'squared',\n    rounded: 'rounded',\n} as const;\nexport type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;\n\n/**\n * Thumbnail object fit.\n */\nexport const ThumbnailObjectFit = {\n    cover: 'cover',\n    contain: 'contain',\n} as const;\nexport type ThumbnailObjectFit = ValueOf<typeof ThumbnailObjectFit>;\n"],"names":["ThumbnailAspectRatio","AspectRatio","ThumbnailVariant","squared","rounded","ThumbnailObjectFit","cover","contain"],"mappings":";;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;;AAOA;AACA;AACA;AACA;AACO,MAAMA,oBAAiD,GAAG;EAAE,GAAGC,WAAAA;AAAY,EAAC;;AAEnF;AACA;AACA;;AAGA;AACA;AACA;AACO,MAAMC,gBAAgB,GAAG;AAC5BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,OAAO,EAAE,SAAA;AACb,EAAU;AAGV;AACA;AACA;AACO,MAAMC,kBAAkB,GAAG;AAC9BC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,OAAO,EAAE,SAAA;AACb;;;;"}
+{"version":3,"file":"76be70dd.js","sources":["../../src/components/thumbnail/types.ts"],"sourcesContent":["import React from 'react';\nimport { AspectRatio, Size } from '@lumx/react';\nimport { ValueOf } from '@lumx/react/utils/type';\n\n/**\n *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).\n */\nexport type FocusPoint = { x?: number; y?: number };\n\n/**\n * Loading attribute is not yet supported in typescript, so we need\n * to add it in order to avoid a ts error.\n * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes\n */\ndeclare module 'react' {\n    interface ImgHTMLAttributes<T> extends React.HTMLAttributes<T> {\n        loading?: 'eager' | 'lazy';\n    }\n}\n\n/**\n * All available aspect ratios.\n * @deprecated\n */\nexport const ThumbnailAspectRatio: Record<string, AspectRatio> = { ...AspectRatio };\n\n/**\n *  Thumbnail sizes.\n */\nexport type ThumbnailSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Thumbnail variants.\n */\nexport const ThumbnailVariant = {\n    squared: 'squared',\n    rounded: 'rounded',\n} as const;\nexport type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;\n\n/**\n * Thumbnail object fit.\n */\nexport const ThumbnailObjectFit = {\n    cover: 'cover',\n    contain: 'contain',\n} as const;\nexport type ThumbnailObjectFit = ValueOf<typeof ThumbnailObjectFit>;\n"],"names":["ThumbnailAspectRatio","AspectRatio","ThumbnailVariant","squared","rounded","ThumbnailObjectFit","cover","contain"],"mappings":";;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;;AAOA;AACA;AACA;AACA;AACO,MAAMA,oBAAiD,GAAG;EAAE,GAAGC,WAAAA;AAAY,EAAC;;AAEnF;AACA;AACA;;AAGA;AACA;AACA;AACO,MAAMC,gBAAgB,GAAG;AAC5BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,OAAO,EAAE,SAAA;AACb,EAAU;AAGV;AACA;AACA;AACO,MAAMC,kBAAkB,GAAG;AAC9BC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,OAAO,EAAE,SAAA;AACb;;;;"}

package/_internal/{60f8e509.js → 7f54e947.js}

@@ -1,18 +1,19 @@
-import { m as getRootClassName, _ as _extends, n as forwardRef, l as classNames } from './d3321a86.js';
 import React__default from 'react';
+import { m as getRootClassName, n as forwardRef, l as classNames } from './6589b796.js';
 import { u as useMergeRefs, m as mergeRefs } from './f0d7d6ea.js';
 import memoize from 'lodash/memoize';
-import { I as ImageCaption } from './803945f7.js';
+import { I as ImageCaption } from './dbe0cf24.js';
 import throttle from 'lodash/throttle';
-import { i as isReducedMotion } from './aa8c5d9b.js';
-import { S as SlideshowItem, a as SlideshowControls, b as Slides } from './85d992d2.js';
-import { T as Thumbnail } from './714809cc.js';
-import { I as IconButton } from './7b214f74.js';
-import { FlexBox } from './64046d7a.js';
+import { i as isReducedMotion } from './e6dd117e.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { S as SlideshowItem, a as SlideshowControls, b as Slides } from './34c59f5b.js';
+import { T as Thumbnail } from './628468c4.js';
+import { I as IconButton } from './0a490b07.js';
+import { FlexBox } from './329b5f12.js';
 import ReactDOM from 'react-dom';
-import { Lightbox } from './742d4906.js';
+import { Lightbox } from './86aa4aa4.js';
 import { T as ThemeProvider } from './3181f000.js';
-import { C as ClickAwayProvider } from './bcce6ceb.js';
+import { C as ClickAwayProvider } from './7093ba23.js';
 
 const mdiMagnifyMinusOutline = 'M15.5 14h-.79l-.28-.27A6.5 6.5 0 0 0 16 9.5 6.5 6.5 0 0 0 9.5 3 6.5 6.5 0 0 0 3 9.5 6.5 6.5 0 0 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14M7 9h5v1H7z';
 
@@ -331,31 +332,32 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
     }
   }, [isPointerZooming, scale, animateScroll]);
   const isScrollable = scaledImageSize && scrollAreaSize && (scaledImageSize.width > scrollAreaSize.width || scaledImageSize.height > scrollAreaSize.height);
-  return /*#__PURE__*/React__default.createElement(SlideshowItem, {
+  return /*#__PURE__*/jsx(SlideshowItem, {
     ref: scrollAreaRef
     // Make it accessible to keyboard nav when the zone is scrollable
     ,
     tabIndex: isScrollable ? 0 : undefined,
-    className: `${CLASSNAME}__image-slide`
-  }, /*#__PURE__*/React__default.createElement(Thumbnail, {
-    imgRef: useMergeRefs(imgRef, propImgRef),
-    image: image,
-    alt: alt,
-    className: `${CLASSNAME}__thumbnail`,
-    imgProps: {
-      ...imgProps,
-      style: {
-        ...imgProps?.style,
-        ...(scaledImageSize || {
-          maxHeight: scrollAreaSize?.height,
-          maxWidth: scrollAreaSize?.width
-        }),
-        // Only animate when scale is set, and we are not pointer zooming and the user does not prefer reduced motion
-        transition: scale && !isPointerZooming && !isReducedMotion() ? 'all 250ms' : undefined
-      }
-    },
-    loadingPlaceholderImageRef: loadingPlaceholderImageRef
-  }));
+    className: `${CLASSNAME}__image-slide`,
+    children: /*#__PURE__*/jsx(Thumbnail, {
+      imgRef: useMergeRefs(imgRef, propImgRef),
+      image: image,
+      alt: alt,
+      className: `${CLASSNAME}__thumbnail`,
+      imgProps: {
+        ...imgProps,
+        style: {
+          ...imgProps?.style,
+          ...(scaledImageSize || {
+            maxHeight: scrollAreaSize?.height,
+            maxWidth: scrollAreaSize?.width
+          }),
+          // Only animate when scale is set, and we are not pointer zooming and the user does not prefer reduced motion
+          transition: scale && !isPointerZooming && !isReducedMotion() ? 'all 250ms' : undefined
+        }
+      },
+      loadingPlaceholderImageRef: loadingPlaceholderImageRef
+    })
+  });
 }, isEqual);
 
 /** Internal image slideshow component for ImageLightbox */
@@ -389,7 +391,7 @@ const ImageSlideshow = ({
   const title = images[activeIndex]?.title;
   const description = images[activeIndex]?.description;
   const tags = images[activeIndex]?.tags;
-  const metadata = title || description || tags ? /*#__PURE__*/React__default.createElement(ImageCaption, {
+  const metadata = title || description || tags ? /*#__PURE__*/jsx(ImageCaption, {
     as: "div",
     title: title,
     description: description,
@@ -398,13 +400,13 @@ const ImageSlideshow = ({
   }) : null;
 
   // Slideshow controls
-  const slideShowControls = slidesCount > 1 && slideshowControlsProps ? /*#__PURE__*/React__default.createElement(SlideshowControls, _extends({
+  const slideShowControls = slidesCount > 1 && slideshowControlsProps ? /*#__PURE__*/jsx(SlideshowControls, {
     activeIndex: activeIndex,
     slidesCount: slidesCount,
     onNextClick: onNextClick,
     onPreviousClick: onPreviousClick,
-    onPaginationClick: onPaginationClick
-  }, slideshowControlsProps, {
+    onPaginationClick: onPaginationClick,
+    ...slideshowControlsProps,
     paginationItemProps: index => {
       const props = slideshowControlsProps?.paginationItemProps?.(index) || {};
       return {
@@ -414,7 +416,7 @@ const ImageSlideshow = ({
         activeIndex === index ? currentPaginationItemRef : undefined)
       };
     }
-  })) : null;
+  }) : null;
 
   // Zoom controls
   const [scale, setScale] = React__default.useState(undefined);
@@ -431,57 +433,65 @@ const ImageSlideshow = ({
     // Reset scale on slide change
     if (typeof activeIndex === 'number') setScale(undefined);
   }, [activeIndex]);
-  const zoomControls = zoomEnabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, _extends({}, zoomInButtonProps, {
-    emphasis: "low",
-    icon: mdiMagnifyPlusOutline,
-    onClick: zoomIn
-  })), /*#__PURE__*/React__default.createElement(IconButton, _extends({}, zoomOutButtonProps, {
-    emphasis: "low",
-    isDisabled: !scale || scale <= 1,
-    icon: mdiMagnifyMinusOutline,
-    onClick: zoomOut
-  })));
+  const zoomControls = zoomEnabled && /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(IconButton, {
+      ...zoomInButtonProps,
+      emphasis: "low",
+      icon: mdiMagnifyPlusOutline,
+      onClick: zoomIn
+    }), /*#__PURE__*/jsx(IconButton, {
+      ...zoomOutButtonProps,
+      emphasis: "low",
+      isDisabled: !scale || scale <= 1,
+      icon: mdiMagnifyMinusOutline,
+      onClick: zoomOut
+    })]
+  });
   const getImgRef = React__default.useMemo(() => memoize((index, isActive) => {
     return mergeRefs(images?.[index].imgRef, isActive ? activeImageRef : undefined);
   },
   // memoize based on both arguments
   (...args) => args.join()), [images, activeImageRef]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Slides, {
-    activeIndex: activeIndex,
-    slideGroupLabel: slideGroupLabel,
-    fillHeight: true,
-    id: slideshowId,
-    ref: setSlideshow,
-    slidesId: slideshowSlidesId,
-    toggleAutoPlay: toggleAutoPlay
-  }, images.map(({
-    image,
-    imgRef,
-    ...imageProps
-  }, index) => {
-    const isActive = index === activeIndex;
-    return /*#__PURE__*/React__default.createElement(ImageSlide, {
-      isActive: isActive,
-      key: image,
-      image: {
-        ...imageProps,
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Slides, {
+      activeIndex: activeIndex,
+      slideGroupLabel: slideGroupLabel,
+      fillHeight: true,
+      id: slideshowId,
+      ref: setSlideshow,
+      slidesId: slideshowSlidesId,
+      toggleAutoPlay: toggleAutoPlay,
+      children: images.map(({
         image,
-        imgRef: getImgRef(index, isActive)
-      },
-      scale: isActive ? scale : undefined,
-      onScaleChange: onScaleChange
-    });
-  })), (metadata || slideShowControls || zoomControls) && /*#__PURE__*/React__default.createElement(FlexBox, {
-    ref: footerRef,
-    className: `${CLASSNAME}__footer`,
-    orientation: "vertical",
-    vAlign: "center",
-    gap: "big"
-  }, metadata, /*#__PURE__*/React__default.createElement(FlexBox, {
-    className: `${CLASSNAME}__footer-actions`,
-    orientation: "horizontal",
-    gap: "regular"
-  }, slideShowControls, zoomControls)));
+        imgRef,
+        ...imageProps
+      }, index) => {
+        const isActive = index === activeIndex;
+        return /*#__PURE__*/jsx(ImageSlide, {
+          isActive: isActive,
+          image: {
+            ...imageProps,
+            image,
+            imgRef: getImgRef(index, isActive)
+          },
+          scale: isActive ? scale : undefined,
+          onScaleChange: onScaleChange
+        }, image);
+      })
+    }), (metadata || slideShowControls || zoomControls) && /*#__PURE__*/jsxs(FlexBox, {
+      ref: footerRef,
+      className: `${CLASSNAME}__footer`,
+      orientation: "vertical",
+      vAlign: "center",
+      gap: "big",
+      children: [metadata, /*#__PURE__*/jsxs(FlexBox, {
+        className: `${CLASSNAME}__footer-actions`,
+        orientation: "horizontal",
+        gap: "regular",
+        children: [slideShowControls, zoomControls]
+      })]
+    })]
+  });
 };
 
 /** Unref a react ref or element */
@@ -699,33 +709,36 @@ const Inner = forwardRef((props, ref) => {
     if (targetElement.clientWidth < evt.clientX || targetElement.clientHeight < evt.clientY) return;
     onClose?.();
   }, [onClose]);
-  return /*#__PURE__*/React__default.createElement(Lightbox, _extends({
+  return /*#__PURE__*/jsx(Lightbox, {
     ref: ref,
     className: classNames(className, CLASSNAME),
     parentElement: parentElement,
     isOpen: isOpen,
     onClose: onClose,
     closeButtonProps: closeButtonProps,
-    focusElement: currentPaginationItemRef
-  }, forwardedProps, {
+    focusElement: currentPaginationItemRef,
+    ...forwardedProps,
     // Disable the close on click away as we want a custom one here
-    preventAutoClose: true
-  }), /*#__PURE__*/React__default.createElement(ClickAwayProvider, {
-    childrenRefs: clickAwayChildrenRefs,
-    callback: onClickAway
-  }, /*#__PURE__*/React__default.createElement(ThemeProvider, {
-    value: "dark"
-  }, /*#__PURE__*/React__default.createElement(ImageSlideshow, {
-    activeImageIndex: activeImageIndex,
-    slideGroupLabel: slideGroupLabel,
-    slideshowControlsProps: slideshowControlsProps,
-    images: images,
-    zoomInButtonProps: zoomInButtonProps,
-    zoomOutButtonProps: zoomOutButtonProps,
-    footerRef: footerRef,
-    activeImageRef: useMergeRefs(propImageRef, imageRef),
-    currentPaginationItemRef: currentPaginationItemRef
-  }))));
+    preventAutoClose: true,
+    children: /*#__PURE__*/jsx(ClickAwayProvider, {
+      childrenRefs: clickAwayChildrenRefs,
+      callback: onClickAway,
+      children: /*#__PURE__*/jsx(ThemeProvider, {
+        value: "dark",
+        children: /*#__PURE__*/jsx(ImageSlideshow, {
+          activeImageIndex: activeImageIndex,
+          slideGroupLabel: slideGroupLabel,
+          slideshowControlsProps: slideshowControlsProps,
+          images: images,
+          zoomInButtonProps: zoomInButtonProps,
+          zoomOutButtonProps: zoomOutButtonProps,
+          footerRef: footerRef,
+          activeImageRef: useMergeRefs(propImageRef, imageRef),
+          currentPaginationItemRef: currentPaginationItemRef
+        })
+      })
+    })
+  });
 });
 Inner.displayName = COMPONENT_NAME;
 Inner.className = CLASSNAME;
@@ -742,4 +755,4 @@ const ImageLightbox = Object.assign(Inner, {
 });
 
 export { ImageLightbox };
-//# sourceMappingURL=60f8e509.js.map
+//# sourceMappingURL=7f54e947.js.map