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

package/_internal/0d7cc1e0.js

@@ -0,0 +1,99 @@
+import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+import { isComponent } from './ebe24fd7.js';
+import { getRootClassName, getBasicClass } from '@lumx/core/js/utils/className';
+import { useTheme, ThemeProvider } from './d8ee966d.js';
+import { forwardRef } from './bd8b3ec8.js';
+import { ButtonRoot } from './9b0c0489.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Text } from './203b01d8.js';
+import { Emphasis, Size, Theme } from '@lumx/core/js/constants';
+import { Icon } from './595d0e66.js';
+
+const ButtonEmphasis = Emphasis;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Button';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  emphasis: Emphasis.high,
+  size: Size.m
+};
+
+/**
+ * Button component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Button = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    children,
+    className,
+    emphasis = DEFAULT_PROPS.emphasis,
+    leftIcon,
+    rightIcon,
+    size = DEFAULT_PROPS.size,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  const buttonClassName = classNames(className, getBasicClass({
+    prefix: CLASSNAME,
+    type: 'hasLeftIcon',
+    value: !isEmpty(leftIcon)
+  }), getBasicClass({
+    prefix: CLASSNAME,
+    type: 'hasRightIcon',
+    value: !isEmpty(rightIcon)
+  }));
+  return /*#__PURE__*/jsxs(ButtonRoot, {
+    ref: ref,
+    emphasis,
+    size,
+    theme,
+    ...forwardedProps,
+    className: buttonClassName,
+    variant: "button",
+    children: [leftIcon && !isEmpty(leftIcon) &&
+    /*#__PURE__*/
+    // Theme is handled in the button scss
+    jsx(ThemeProvider, {
+      value: undefined,
+      children: /*#__PURE__*/jsx(Icon, {
+        icon: leftIcon
+      })
+    }), children && (isComponent(Text)(children) ? children : /*#__PURE__*/jsx("span", {
+      children: children
+    })), rightIcon && !isEmpty(rightIcon) &&
+    /*#__PURE__*/
+    // Theme is handled in the button scss
+    jsx(ThemeProvider, {
+      value: undefined,
+      children: /*#__PURE__*/jsx(Icon, {
+        icon: rightIcon
+      })
+    })]
+  });
+});
+Button.displayName = COMPONENT_NAME;
+Button.className = CLASSNAME;
+Button.defaultProps = DEFAULT_PROPS;
+
+export { Button, ButtonEmphasis };
+//# sourceMappingURL=0d7cc1e0.js.map

package/_internal/0d7cc1e0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"0d7cc1e0.js","sources":["../../src/components/button/Button.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\n\nimport { Emphasis, Icon, Size, Theme, Text, ThemeProvider } from '@lumx/react';\nimport { isComponent } from '@lumx/react/utils/type';\nimport { getBasicClass, getRootClassName } from '@lumx/core/js/utils/className';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { BaseButtonProps, ButtonRoot } from './ButtonRoot';\n\n/**\n * Button emphasis definition.\n * @deprecated Use Emphasis instead.\n */\nexport const ButtonEmphasis = Emphasis;\n\n/**\n * Defines the props of the component.\n */\nexport interface ButtonProps extends BaseButtonProps {\n    /** Left icon (SVG path). */\n    leftIcon?: string;\n    /** Right icon (SVG path). */\n    rightIcon?: string;\n    /** When `true`, the button gets as large as possible. */\n    fullWidth?: boolean;\n    /** Children */\n    children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Button';\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<ButtonProps> = {\n    emphasis: Emphasis.high,\n    size: Size.m,\n};\n\n/**\n * Button component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Button = forwardRef<ButtonProps, HTMLButtonElement | HTMLAnchorElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        children,\n        className,\n        emphasis = DEFAULT_PROPS.emphasis,\n        leftIcon,\n        rightIcon,\n        size = DEFAULT_PROPS.size,\n        theme = defaultTheme,\n        ...forwardedProps\n    } = props;\n\n    const buttonClassName = classNames(\n        className,\n        getBasicClass({ prefix: CLASSNAME, type: 'hasLeftIcon', value: !isEmpty(leftIcon) }),\n        getBasicClass({ prefix: CLASSNAME, type: 'hasRightIcon', value: !isEmpty(rightIcon) }),\n    );\n\n    return (\n        <ButtonRoot\n            ref={ref}\n            {...{ emphasis, size, theme, ...forwardedProps }}\n            className={buttonClassName}\n            variant=\"button\"\n        >\n            {leftIcon && !isEmpty(leftIcon) && (\n                // Theme is handled in the button scss\n                <ThemeProvider value={undefined}>\n                    <Icon icon={leftIcon} />\n                </ThemeProvider>\n            )}\n            {children && (isComponent(Text)(children) ? children : <span>{children}</span>)}\n            {rightIcon && !isEmpty(rightIcon) && (\n                // Theme is handled in the button scss\n                <ThemeProvider value={undefined}>\n                    <Icon icon={rightIcon} />\n                </ThemeProvider>\n            )}\n        </ButtonRoot>\n    );\n});\nButton.displayName = COMPONENT_NAME;\nButton.className = CLASSNAME;\nButton.defaultProps = DEFAULT_PROPS;\n"],"names":["ButtonEmphasis","Emphasis","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","emphasis","high","size","Size","m","Button","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","children","className","leftIcon","rightIcon","theme","forwardedProps","buttonClassName","classNames","getBasicClass","prefix","type","value","isEmpty","_jsxs","ButtonRoot","variant","_jsx","ThemeProvider","undefined","Icon","icon","isComponent","Text","displayName","defaultProps"],"mappings":";;;;;;;;;;;;AAeO,MAAMA,cAAc,GAAGC,SAAQ;;AAEtC;AACA;AACA;;AAYA;AACA;AACA;AACA,MAAMC,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,QAAQ,EAAEL,QAAQ,CAACM,IAAI;EACvBC,IAAI,EAAEC,IAAI,CAACC,CAAAA;AACf,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,MAAM,GAAGC,UAAU,CAAqD,CAACC,KAAK,EAAEC,GAAG,KAAK;EACjG,MAAMC,YAAY,GAAGC,QAAQ,EAAE,IAAIC,KAAK,CAACC,KAAK,CAAA;EAC9C,MAAM;IACFC,QAAQ;IACRC,SAAS;IACTd,QAAQ,GAAGD,aAAa,CAACC,QAAQ;IACjCe,QAAQ;IACRC,SAAS;IACTd,IAAI,GAAGH,aAAa,CAACG,IAAI;AACzBe,IAAAA,KAAK,GAAGR,YAAY;IACpB,GAAGS,cAAAA;AACP,GAAC,GAAGX,KAAK,CAAA;AAET,EAAA,MAAMY,eAAe,GAAGC,UAAU,CAC9BN,SAAS,EACTO,aAAa,CAAC;AAAEC,IAAAA,MAAM,EAAEzB,SAAS;AAAE0B,IAAAA,IAAI,EAAE,aAAa;AAAEC,IAAAA,KAAK,EAAE,CAACC,OAAO,CAACV,QAAQ,CAAA;GAAG,CAAC,EACpFM,aAAa,CAAC;AAAEC,IAAAA,MAAM,EAAEzB,SAAS;AAAE0B,IAAAA,IAAI,EAAE,cAAc;AAAEC,IAAAA,KAAK,EAAE,CAACC,OAAO,CAACT,SAAS,CAAA;AAAE,GAAC,CACzF,CAAC,CAAA;EAED,oBACIU,IAAA,CAACC,UAAU,EAAA;AACPnB,IAAAA,GAAG,EAAEA,GAAI;IACHR,QAAQ;IAAEE,IAAI;IAAEe,KAAK;AAAE,IAAA,GAAGC,cAAc;AAC9CJ,IAAAA,SAAS,EAAEK,eAAgB;AAC3BS,IAAAA,OAAO,EAAC,QAAQ;AAAAf,IAAAA,QAAA,GAEfE,QAAQ,IAAI,CAACU,OAAO,CAACV,QAAQ,CAAC;AAAA;AAC3B;AACAc,IAAAA,GAAA,CAACC,aAAa,EAAA;AAACN,MAAAA,KAAK,EAAEO,SAAU;MAAAlB,QAAA,eAC5BgB,GAAA,CAACG,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAElB,QAAAA;OAAW,CAAA;AAAC,KACb,CAClB,EACAF,QAAQ,KAAKqB,WAAW,CAACC,IAAI,CAAC,CAACtB,QAAQ,CAAC,GAAGA,QAAQ,gBAAGgB,GAAA,CAAA,MAAA,EAAA;AAAAhB,MAAAA,QAAA,EAAOA,QAAAA;KAAe,CAAC,CAAC,EAC9EG,SAAS,IAAI,CAACS,OAAO,CAACT,SAAS,CAAC;AAAA;AAC7B;AACAa,IAAAA,GAAA,CAACC,aAAa,EAAA;AAACN,MAAAA,KAAK,EAAEO,SAAU;MAAAlB,QAAA,eAC5BgB,GAAA,CAACG,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEjB,SAAAA;OAAY,CAAA;AAAC,KACd,CAClB,CAAA;AAAA,GACO,CAAC,CAAA;AAErB,CAAC,EAAC;AACFX,MAAM,CAAC+B,WAAW,GAAGxC,cAAc,CAAA;AACnCS,MAAM,CAACS,SAAS,GAAGjB,SAAS,CAAA;AAC5BQ,MAAM,CAACgC,YAAY,GAAGtC,aAAa;;;;"}

package/_internal/0db022d6.js

@@ -0,0 +1,58 @@
+import React__default from 'react';
+
+/** Maintains the scroll position centered relative to the original scroll area's dimensions when the content scales. */
+function useAnimateScroll(scrollAreaRef) {
+  return React__default.useMemo(() => {
+    let animationFrame = null;
+    return function animate(centerPoint, initialScrollAreaSize) {
+      const scrollArea = scrollAreaRef.current;
+      if (!scrollArea) {
+        return;
+      }
+
+      // Cancel previously running animation
+      if (animationFrame) cancelAnimationFrame(animationFrame);
+
+      // Center on the given point or else on the scroll area visual center
+      const clientHeightRatio = centerPoint?.y ? centerPoint.y / scrollArea.clientHeight : 0.5;
+      const clientWidthRatio = centerPoint?.x ? centerPoint.x / scrollArea.clientWidth : 0.5;
+      const initialScrollHeight = initialScrollAreaSize?.height || scrollArea.scrollHeight;
+      const initialScrollWidth = initialScrollAreaSize?.width || scrollArea.scrollWidth;
+      const heightCenter = scrollArea.scrollTop + scrollArea.clientHeight * clientHeightRatio;
+      const heightRatio = heightCenter / initialScrollHeight;
+      const widthCenter = scrollArea.scrollLeft + scrollArea.clientWidth * clientWidthRatio;
+      const widthRatio = widthCenter / initialScrollWidth;
+      let prevScrollHeight = 0;
+      let prevScrollWidth = 0;
+      function nextFrame() {
+        const {
+          scrollHeight,
+          scrollWidth,
+          clientHeight,
+          clientWidth
+        } = scrollArea;
+
+        // Scroll area stopped expanding => stop animation
+        if (scrollHeight === prevScrollHeight && scrollWidth === prevScrollWidth) {
+          animationFrame = null;
+          return;
+        }
+
+        // Compute next scroll position
+        const top = heightRatio * scrollHeight - clientHeight * clientHeightRatio;
+        const left = widthRatio * scrollWidth - clientWidth * clientWidthRatio;
+        scrollArea.scrollTo({
+          top,
+          left
+        });
+        prevScrollHeight = scrollHeight;
+        prevScrollWidth = scrollWidth;
+        animationFrame = requestAnimationFrame(nextFrame);
+      }
+      animationFrame = requestAnimationFrame(nextFrame);
+    };
+  }, [scrollAreaRef]);
+}
+
+export { useAnimateScroll };
+//# sourceMappingURL=0db022d6.js.map

package/_internal/0db022d6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"0db022d6.js","sources":["../../src/components/image-lightbox/internal/useAnimateScroll.ts"],"sourcesContent":["import React from 'react';\nimport type { Point, RectSize } from '@lumx/react/utils/type';\n\n/** Maintains the scroll position centered relative to the original scroll area's dimensions when the content scales. */\nexport function useAnimateScroll(scrollAreaRef: React.RefObject<HTMLDivElement>) {\n    return React.useMemo(() => {\n        let animationFrame: number | null = null;\n\n        return function animate(centerPoint?: Point, initialScrollAreaSize?: RectSize) {\n            const scrollArea = scrollAreaRef.current as HTMLDivElement;\n            if (!scrollArea) {\n                return;\n            }\n\n            // Cancel previously running animation\n            if (animationFrame) cancelAnimationFrame(animationFrame);\n\n            // Center on the given point or else on the scroll area visual center\n            const clientHeightRatio = centerPoint?.y ? centerPoint.y / scrollArea.clientHeight : 0.5;\n            const clientWidthRatio = centerPoint?.x ? centerPoint.x / scrollArea.clientWidth : 0.5;\n\n            const initialScrollHeight = initialScrollAreaSize?.height || scrollArea.scrollHeight;\n            const initialScrollWidth = initialScrollAreaSize?.width || scrollArea.scrollWidth;\n\n            const heightCenter = scrollArea.scrollTop + scrollArea.clientHeight * clientHeightRatio;\n            const heightRatio = heightCenter / initialScrollHeight;\n\n            const widthCenter = scrollArea.scrollLeft + scrollArea.clientWidth * clientWidthRatio;\n            const widthRatio = widthCenter / initialScrollWidth;\n\n            let prevScrollHeight = 0;\n            let prevScrollWidth = 0;\n\n            function nextFrame() {\n                const { scrollHeight, scrollWidth, clientHeight, clientWidth } = scrollArea;\n\n                // Scroll area stopped expanding => stop animation\n                if (scrollHeight === prevScrollHeight && scrollWidth === prevScrollWidth) {\n                    animationFrame = null;\n                    return;\n                }\n\n                // Compute next scroll position\n                const top = heightRatio * scrollHeight - clientHeight * clientHeightRatio;\n                const left = widthRatio * scrollWidth - clientWidth * clientWidthRatio;\n\n                scrollArea.scrollTo({ top, left });\n                prevScrollHeight = scrollHeight;\n                prevScrollWidth = scrollWidth;\n                animationFrame = requestAnimationFrame(nextFrame);\n            }\n            animationFrame = requestAnimationFrame(nextFrame);\n        };\n    }, [scrollAreaRef]);\n}\n"],"names":["useAnimateScroll","scrollAreaRef","React","useMemo","animationFrame","animate","centerPoint","initialScrollAreaSize","scrollArea","current","cancelAnimationFrame","clientHeightRatio","y","clientHeight","clientWidthRatio","x","clientWidth","initialScrollHeight","height","scrollHeight","initialScrollWidth","width","scrollWidth","heightCenter","scrollTop","heightRatio","widthCenter","scrollLeft","widthRatio","prevScrollHeight","prevScrollWidth","nextFrame","top","left","scrollTo","requestAnimationFrame"],"mappings":";;AAGA;AACO,SAASA,gBAAgBA,CAACC,aAA8C,EAAE;AAC7E,EAAA,OAAOC,cAAK,CAACC,OAAO,CAAC,MAAM;IACvB,IAAIC,cAA6B,GAAG,IAAI,CAAA;AAExC,IAAA,OAAO,SAASC,OAAOA,CAACC,WAAmB,EAAEC,qBAAgC,EAAE;AAC3E,MAAA,MAAMC,UAAU,GAAGP,aAAa,CAACQ,OAAyB,CAAA;MAC1D,IAAI,CAACD,UAAU,EAAE;AACb,QAAA,OAAA;AACJ,OAAA;;AAEA;AACA,MAAA,IAAIJ,cAAc,EAAEM,oBAAoB,CAACN,cAAc,CAAC,CAAA;;AAExD;AACA,MAAA,MAAMO,iBAAiB,GAAGL,WAAW,EAAEM,CAAC,GAAGN,WAAW,CAACM,CAAC,GAAGJ,UAAU,CAACK,YAAY,GAAG,GAAG,CAAA;AACxF,MAAA,MAAMC,gBAAgB,GAAGR,WAAW,EAAES,CAAC,GAAGT,WAAW,CAACS,CAAC,GAAGP,UAAU,CAACQ,WAAW,GAAG,GAAG,CAAA;MAEtF,MAAMC,mBAAmB,GAAGV,qBAAqB,EAAEW,MAAM,IAAIV,UAAU,CAACW,YAAY,CAAA;MACpF,MAAMC,kBAAkB,GAAGb,qBAAqB,EAAEc,KAAK,IAAIb,UAAU,CAACc,WAAW,CAAA;MAEjF,MAAMC,YAAY,GAAGf,UAAU,CAACgB,SAAS,GAAGhB,UAAU,CAACK,YAAY,GAAGF,iBAAiB,CAAA;AACvF,MAAA,MAAMc,WAAW,GAAGF,YAAY,GAAGN,mBAAmB,CAAA;MAEtD,MAAMS,WAAW,GAAGlB,UAAU,CAACmB,UAAU,GAAGnB,UAAU,CAACQ,WAAW,GAAGF,gBAAgB,CAAA;AACrF,MAAA,MAAMc,UAAU,GAAGF,WAAW,GAAGN,kBAAkB,CAAA;MAEnD,IAAIS,gBAAgB,GAAG,CAAC,CAAA;MACxB,IAAIC,eAAe,GAAG,CAAC,CAAA;MAEvB,SAASC,SAASA,GAAG;QACjB,MAAM;UAAEZ,YAAY;UAAEG,WAAW;UAAET,YAAY;AAAEG,UAAAA,WAAAA;AAAY,SAAC,GAAGR,UAAU,CAAA;;AAE3E;AACA,QAAA,IAAIW,YAAY,KAAKU,gBAAgB,IAAIP,WAAW,KAAKQ,eAAe,EAAE;AACtE1B,UAAAA,cAAc,GAAG,IAAI,CAAA;AACrB,UAAA,OAAA;AACJ,SAAA;;AAEA;QACA,MAAM4B,GAAG,GAAGP,WAAW,GAAGN,YAAY,GAAGN,YAAY,GAAGF,iBAAiB,CAAA;QACzE,MAAMsB,IAAI,GAAGL,UAAU,GAAGN,WAAW,GAAGN,WAAW,GAAGF,gBAAgB,CAAA;QAEtEN,UAAU,CAAC0B,QAAQ,CAAC;UAAEF,GAAG;AAAEC,UAAAA,IAAAA;AAAK,SAAC,CAAC,CAAA;AAClCJ,QAAAA,gBAAgB,GAAGV,YAAY,CAAA;AAC/BW,QAAAA,eAAe,GAAGR,WAAW,CAAA;AAC7BlB,QAAAA,cAAc,GAAG+B,qBAAqB,CAACJ,SAAS,CAAC,CAAA;AACrD,OAAA;AACA3B,MAAAA,cAAc,GAAG+B,qBAAqB,CAACJ,SAAS,CAAC,CAAA;KACpD,CAAA;AACL,GAAC,EAAE,CAAC9B,aAAa,CAAC,CAAC,CAAA;AACvB;;;;"}

package/_internal/0e16222d.js

@@ -0,0 +1,9 @@
+import { POPOVER_ZINDEX } from './9d063548.js';
+
+/**
+ * Make sure tooltip appear above popovers.
+ */
+const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;
+
+export { TOOLTIP_ZINDEX };
+//# sourceMappingURL=0e16222d.js.map

package/_internal/0e16222d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"0e16222d.js","sources":["../../src/components/tooltip/constants.ts"],"sourcesContent":["import { POPOVER_ZINDEX } from '../popover/constants';\n\nexport const ARIA_LINK_MODES = ['aria-describedby', 'aria-labelledby'] as const;\n\n/**\n * Make sure tooltip appear above popovers.\n */\nexport const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;\n"],"names":["TOOLTIP_ZINDEX","POPOVER_ZINDEX"],"mappings":";;AAIA;AACA;AACA;AACaA,MAAAA,cAAc,GAAGC,cAAc,GAAG;;;;"}

package/_internal/0f849025.js

@@ -0,0 +1,4 @@
+var reactIs_development = {};
+
+export { reactIs_development as __exports };
+//# sourceMappingURL=0f849025.js.map

package/_internal/0f849025.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"0f849025.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/_internal/0fe87dc7.js

@@ -0,0 +1,72 @@
+import { viewport } from './f4baa1da.js';
+import getViewportRect from './535aa51f.js';
+import getDocumentRect from './51921a16.js';
+import listScrollParents from './38ce97de.js';
+import getOffsetParent from './8e3efbc4.js';
+import getDocumentElement from './60139f6a.js';
+import getComputedStyle from './ff96951d.js';
+import { isHTMLElement, isElement } from './617d453e.js';
+import getBoundingClientRect from './07f6dc7c.js';
+import getParentNode from './063618dc.js';
+import contains from './f0052b9b.js';
+import getNodeName from './879fa64d.js';
+import rectToClientRect from './00560d40.js';
+
+function getInnerBoundingClientRect(element) {
+  var rect = getBoundingClientRect(element);
+  rect.top = rect.top + element.clientTop;
+  rect.left = rect.left + element.clientLeft;
+  rect.bottom = rect.top + element.clientHeight;
+  rect.right = rect.left + element.clientWidth;
+  rect.width = element.clientWidth;
+  rect.height = element.clientHeight;
+  rect.x = rect.left;
+  rect.y = rect.top;
+  return rect;
+}
+
+function getClientRectFromMixedType(element, clippingParent) {
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+} // A "clipping parent" is an overflowable container with the characteristic of
+// clipping (or hiding) overflowing elements with a position different from
+// `initial`
+
+
+function getClippingParents(element) {
+  var clippingParents = listScrollParents(getParentNode(element));
+  var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0;
+  var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
+
+  if (!isElement(clipperElement)) {
+    return [];
+  } // $FlowFixMe: https://github.com/facebook/flow/issues/1414
+
+
+  return clippingParents.filter(function (clippingParent) {
+    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
+  });
+} // Gets the maximum area that the element is visible in due to any number of
+// clipping parents
+
+
+function getClippingRect(element, boundary, rootBoundary) {
+  var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
+  var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
+  var firstClippingParent = clippingParents[0];
+  var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
+    var rect = getClientRectFromMixedType(element, clippingParent);
+    accRect.top = Math.max(rect.top, accRect.top);
+    accRect.right = Math.min(rect.right, accRect.right);
+    accRect.bottom = Math.min(rect.bottom, accRect.bottom);
+    accRect.left = Math.max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromMixedType(element, firstClippingParent));
+  clippingRect.width = clippingRect.right - clippingRect.left;
+  clippingRect.height = clippingRect.bottom - clippingRect.top;
+  clippingRect.x = clippingRect.left;
+  clippingRect.y = clippingRect.top;
+  return clippingRect;
+}
+
+export { getClippingRect as default };
+//# sourceMappingURL=0fe87dc7.js.map

package/_internal/0fe87dc7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"0fe87dc7.js","sources":["../../../../node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js"],"sourcesContent":["import { viewport } from \"../enums.js\";\nimport getViewportRect from \"./getViewportRect.js\";\nimport getDocumentRect from \"./getDocumentRect.js\";\nimport listScrollParents from \"./listScrollParents.js\";\nimport getOffsetParent from \"./getOffsetParent.js\";\nimport getDocumentElement from \"./getDocumentElement.js\";\nimport getComputedStyle from \"./getComputedStyle.js\";\nimport { isElement, isHTMLElement } from \"./instanceOf.js\";\nimport getBoundingClientRect from \"./getBoundingClientRect.js\";\nimport getParentNode from \"./getParentNode.js\";\nimport contains from \"./contains.js\";\nimport getNodeName from \"./getNodeName.js\";\nimport rectToClientRect from \"../utils/rectToClientRect.js\";\n\nfunction getInnerBoundingClientRect(element) {\n  var rect = getBoundingClientRect(element);\n  rect.top = rect.top + element.clientTop;\n  rect.left = rect.left + element.clientLeft;\n  rect.bottom = rect.top + element.clientHeight;\n  rect.right = rect.left + element.clientWidth;\n  rect.width = element.clientWidth;\n  rect.height = element.clientHeight;\n  rect.x = rect.left;\n  rect.y = rect.top;\n  return rect;\n}\n\nfunction getClientRectFromMixedType(element, clippingParent) {\n  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));\n} // A \"clipping parent\" is an overflowable container with the characteristic of\n// clipping (or hiding) overflowing elements with a position different from\n// `initial`\n\n\nfunction getClippingParents(element) {\n  var clippingParents = listScrollParents(getParentNode(element));\n  var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0;\n  var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;\n\n  if (!isElement(clipperElement)) {\n    return [];\n  } // $FlowFixMe: https://github.com/facebook/flow/issues/1414\n\n\n  return clippingParents.filter(function (clippingParent) {\n    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';\n  });\n} // Gets the maximum area that the element is visible in due to any number of\n// clipping parents\n\n\nexport default function getClippingRect(element, boundary, rootBoundary) {\n  var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);\n  var clippingParents = [].concat(mainClippingParents, [rootBoundary]);\n  var firstClippingParent = clippingParents[0];\n  var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {\n    var rect = getClientRectFromMixedType(element, clippingParent);\n    accRect.top = Math.max(rect.top, accRect.top);\n    accRect.right = Math.min(rect.right, accRect.right);\n    accRect.bottom = Math.min(rect.bottom, accRect.bottom);\n    accRect.left = Math.max(rect.left, accRect.left);\n    return accRect;\n  }, getClientRectFromMixedType(element, firstClippingParent));\n  clippingRect.width = clippingRect.right - clippingRect.left;\n  clippingRect.height = clippingRect.bottom - clippingRect.top;\n  clippingRect.x = clippingRect.left;\n  clippingRect.y = clippingRect.top;\n  return clippingRect;\n}"],"names":[],"mappings":"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","x_google_ignoreList":[0]}

package/_internal/1060c47e.js

@@ -0,0 +1,4 @@
+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';
+
+export { mdiImageBroken };
+//# sourceMappingURL=1060c47e.js.map

package/_internal/1060c47e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"1060c47e.js","sources":["../../../lumx-icons/dist/esm/image-broken.js"],"sourcesContent":["export 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';"],"names":["mdiImageBroken"],"mappings":"AAAO,MAAMA,cAAc,GAAG;;;;"}

package/_internal/111e65e5.js

@@ -0,0 +1,9 @@
+import React__default from 'react';
+
+/**
+ * Similar to `isComponent` but more precise as it's not based on the component `displayName` but on the component function reference.
+ */
+const isComponentType = type => node => /*#__PURE__*/React__default.isValidElement(node) && node.type === type;
+
+export { isComponentType };
+//# sourceMappingURL=111e65e5.js.map

package/_internal/111e65e5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"111e65e5.js","sources":["../../src/utils/type/isComponentType.ts"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\n\n/**\n * Similar to `isComponent` but more precise as it's not based on the component `displayName` but on the component function reference.\n */\nexport const isComponentType =\n    (type: ReactElement['type']) =>\n    (node: ReactNode): node is ReactElement =>\n        React.isValidElement(node) && node.type === type;\n"],"names":["isComponentType","type","node","React","isValidElement"],"mappings":";;AAEA;AACA;AACA;MACaA,eAAe,GACvBC,IAA0B,IAC1BC,IAAe,iBACZC,cAAK,CAACC,cAAc,CAACF,IAAI,CAAC,IAAIA,IAAI,CAACD,IAAI,KAAKA;;;;"}

package/_internal/11687649.js

@@ -0,0 +1,18 @@
+import React__default from 'react';
+
+let i = 0;
+
+/**
+ * Generate a unique id (for use in a11y or other id based DOM linking).
+ *
+ * (Tries to emulate React 18 useId hook, to remove once we upgrade React)
+ */
+function useId() {
+  return React__default.useMemo(() => {
+    i += 1;
+    return `:lumx${i}:`;
+  }, []);
+}
+
+export { useId };
+//# sourceMappingURL=11687649.js.map

package/_internal/11687649.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"11687649.js","sources":["../../src/hooks/useId.ts"],"sourcesContent":["import React from 'react';\n\nlet i = 0;\n\n/**\n * Generate a unique id (for use in a11y or other id based DOM linking).\n *\n * (Tries to emulate React 18 useId hook, to remove once we upgrade React)\n */\nexport function useId() {\n    return React.useMemo(() => {\n        i += 1;\n        return `:lumx${i}:`;\n    }, []);\n}\n"],"names":["i","useId","React","useMemo"],"mappings":";;AAEA,IAAIA,CAAC,GAAG,CAAC,CAAA;;AAET;AACA;AACA;AACA;AACA;AACO,SAASC,KAAKA,GAAG;AACpB,EAAA,OAAOC,cAAK,CAACC,OAAO,CAAC,MAAM;AACvBH,IAAAA,CAAC,IAAI,CAAC,CAAA;IACN,OAAO,CAAA,KAAA,EAAQA,CAAC,CAAG,CAAA,CAAA,CAAA;GACtB,EAAE,EAAE,CAAC,CAAA;AACV;;;;"}

package/_internal/14390eeb.js

@@ -0,0 +1,7 @@
+/**
+ * Get current browser locale.
+ */
+const getCurrentLocale = () => navigator.languages?.[0] || navigator.language;
+
+export { getCurrentLocale };
+//# sourceMappingURL=14390eeb.js.map

package/_internal/14390eeb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"14390eeb.js","sources":["../../src/utils/locale/getCurrentLocale.ts"],"sourcesContent":["/**\n * Get current browser locale.\n */\nexport const getCurrentLocale = (): string => navigator.languages?.[0] || navigator.language;\n"],"names":["getCurrentLocale","navigator","languages","language"],"mappings":"AAAA;AACA;AACA;AACaA,MAAAA,gBAAgB,GAAGA,MAAcC,SAAS,CAACC,SAAS,GAAG,CAAC,CAAC,IAAID,SAAS,CAACE;;;;"}

package/_internal/145228a7.js

@@ -0,0 +1,47 @@
+import React__default from 'react';
+import { getFirstAndLastFocusable } from './b573621e.js';
+import { OnBeforeUnmount } from './6417ddb1.js';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Provides an unmount sentinel to inject in the popover to detect when it closes and restore the focus to the
+ * anchor if needed.
+ */
+function useRestoreFocusOnClose({
+  focusAnchorOnClose,
+  anchorRef,
+  parentElement
+}, popoverElement) {
+  const onBeforeUnmountRef = React__default.useRef();
+  React__default.useEffect(() => {
+    if (!popoverElement || !focusAnchorOnClose) {
+      onBeforeUnmountRef.current = undefined;
+      return;
+    }
+    onBeforeUnmountRef.current = () => {
+      const isFocusWithin = popoverElement?.contains(document.activeElement);
+      if (!isFocusWithin) return;
+
+      // On next render
+      setTimeout(() => {
+        const anchor = anchorRef.current;
+        const elementToFocus =
+        // Provided parent element
+        parentElement?.current || (
+        // Or first focusable element in anchor
+        anchor ? getFirstAndLastFocusable(anchor).first : undefined) ||
+        // Fallback to anchor
+        anchor;
+        elementToFocus?.focus({
+          preventScroll: true
+        });
+      }, 0);
+    };
+  }, [anchorRef, focusAnchorOnClose, parentElement, popoverElement]);
+  return /*#__PURE__*/jsx(OnBeforeUnmount, {
+    callbackRef: onBeforeUnmountRef
+  });
+}
+
+export { useRestoreFocusOnClose };
+//# sourceMappingURL=145228a7.js.map

package/_internal/145228a7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"145228a7.js","sources":["../../src/components/popover/useRestoreFocusOnClose.tsx"],"sourcesContent":["import React from 'react';\nimport { getFirstAndLastFocusable } from '@lumx/react/utils/browser/focus/getFirstAndLastFocusable';\nimport { OnBeforeUnmount } from '@lumx/react/utils/react/OnBeforeUnmount';\nimport type { PopoverProps } from './Popover';\n\n/**\n * Provides an unmount sentinel to inject in the popover to detect when it closes and restore the focus to the\n * anchor if needed.\n */\nexport function useRestoreFocusOnClose(\n    {\n        focusAnchorOnClose,\n        anchorRef,\n        parentElement,\n    }: Pick<PopoverProps, 'focusAnchorOnClose' | 'anchorRef' | 'parentElement'>,\n    popoverElement?: HTMLElement | null,\n) {\n    const onBeforeUnmountRef = React.useRef<(() => void) | undefined>();\n\n    React.useEffect(() => {\n        if (!popoverElement || !focusAnchorOnClose) {\n            onBeforeUnmountRef.current = undefined;\n            return;\n        }\n\n        onBeforeUnmountRef.current = () => {\n            const isFocusWithin = popoverElement?.contains(document.activeElement);\n            if (!isFocusWithin) return;\n\n            // On next render\n            setTimeout(() => {\n                const anchor = anchorRef.current;\n                const elementToFocus =\n                    // Provided parent element\n                    parentElement?.current ||\n                    // Or first focusable element in anchor\n                    (anchor ? getFirstAndLastFocusable(anchor).first : undefined) ||\n                    // Fallback to anchor\n                    anchor;\n\n                elementToFocus?.focus({ preventScroll: true });\n            }, 0);\n        };\n    }, [anchorRef, focusAnchorOnClose, parentElement, popoverElement]);\n\n    return <OnBeforeUnmount callbackRef={onBeforeUnmountRef} />;\n}\n"],"names":["useRestoreFocusOnClose","focusAnchorOnClose","anchorRef","parentElement","popoverElement","onBeforeUnmountRef","React","useRef","useEffect","current","undefined","isFocusWithin","contains","document","activeElement","setTimeout","anchor","elementToFocus","getFirstAndLastFocusable","first","focus","preventScroll","_jsx","OnBeforeUnmount","callbackRef"],"mappings":";;;;;AAKA;AACA;AACA;AACA;AACO,SAASA,sBAAsBA,CAClC;EACIC,kBAAkB;EAClBC,SAAS;AACTC,EAAAA,aAAAA;AACsE,CAAC,EAC3EC,cAAmC,EACrC;AACE,EAAA,MAAMC,kBAAkB,GAAGC,cAAK,CAACC,MAAM,EAA4B,CAAA;EAEnED,cAAK,CAACE,SAAS,CAAC,MAAM;AAClB,IAAA,IAAI,CAACJ,cAAc,IAAI,CAACH,kBAAkB,EAAE;MACxCI,kBAAkB,CAACI,OAAO,GAAGC,SAAS,CAAA;AACtC,MAAA,OAAA;AACJ,KAAA;IAEAL,kBAAkB,CAACI,OAAO,GAAG,MAAM;MAC/B,MAAME,aAAa,GAAGP,cAAc,EAAEQ,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC,CAAA;MACtE,IAAI,CAACH,aAAa,EAAE,OAAA;;AAEpB;AACAI,MAAAA,UAAU,CAAC,MAAM;AACb,QAAA,MAAMC,MAAM,GAAGd,SAAS,CAACO,OAAO,CAAA;AAChC,QAAA,MAAMQ,cAAc;AAChB;AACAd,QAAAA,aAAa,EAAEM,OAAO;AACtB;QACCO,MAAM,GAAGE,wBAAwB,CAACF,MAAM,CAAC,CAACG,KAAK,GAAGT,SAAS,CAAC;AAC7D;QACAM,MAAM,CAAA;QAEVC,cAAc,EAAEG,KAAK,CAAC;AAAEC,UAAAA,aAAa,EAAE,IAAA;AAAK,SAAC,CAAC,CAAA;OACjD,EAAE,CAAC,CAAC,CAAA;KACR,CAAA;GACJ,EAAE,CAACnB,SAAS,EAAED,kBAAkB,EAAEE,aAAa,EAAEC,cAAc,CAAC,CAAC,CAAA;EAElE,oBAAOkB,GAAA,CAACC,eAAe,EAAA;AAACC,IAAAA,WAAW,EAAEnB,kBAAAA;AAAmB,GAAE,CAAC,CAAA;AAC/D;;;;"}

package/_internal/15fb66ce.js

@@ -0,0 +1,154 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { useBooleanState } from './3e2f0517.js';
+import { useId } from './11687649.js';
+import { useTheme } from './d8ee966d.js';
+import { forwardRef } from './bd8b3ec8.js';
+import { VISUALLY_HIDDEN } from './6af61e2f.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useDisableStateProps } from './ef982c3d.js';
+import { AspectRatio, Size, Theme } from '@lumx/core/js/constants';
+import { Icon } from './595d0e66.js';
+
+const UploaderVariant = {
+  square: 'square',
+  rounded: 'rounded',
+  circle: 'circle'
+};
+
+/**
+ * Uploader sizes.
+ */
+
+/**
+ * Extend native HTML input props with specialized `onChange` providing the a `File` array.
+ */
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Uploader';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  aspectRatio: AspectRatio.horizontal,
+  size: Size.xl,
+  variant: UploaderVariant.square
+};
+
+/**
+ * Uploader component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Uploader = forwardRef((props, ref) => {
+  const {
+    disabledStateProps,
+    otherProps,
+    isAnyDisabled
+  } = useDisableStateProps(props);
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    aspectRatio = DEFAULT_PROPS.aspectRatio,
+    className,
+    label,
+    icon,
+    size = DEFAULT_PROPS.size,
+    theme = defaultTheme,
+    variant = DEFAULT_PROPS.variant,
+    fileInputProps,
+    onClick,
+    ...forwardedProps
+  } = otherProps;
+  // Adjust to square aspect ratio when using circle variants.
+  const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
+  const handleClick = React__default.useCallback(evt => {
+    if (isAnyDisabled) {
+      evt.preventDefault();
+    } else {
+      onClick?.(evt);
+    }
+  }, [isAnyDisabled, onClick]);
+  const generatedInputId = useId();
+  const inputId = fileInputProps?.id || generatedInputId;
+  const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);
+  const wrapper = fileInputProps ? {
+    Component: 'label',
+    props: {
+      htmlFor: inputId
+    }
+  } : {
+    Component: 'button',
+    props: {
+      type: 'button',
+      ...disabledStateProps
+    }
+  };
+  const onChange = React__default.useMemo(() => {
+    if (isAnyDisabled || !fileInputProps?.onChange) return undefined;
+    return evt => {
+      const fileList = evt.target.files;
+      const files = fileList ? Array.from(fileList) : [];
+      fileInputProps.onChange(files, evt);
+    };
+  }, [isAnyDisabled, fileInputProps]);
+  return /*#__PURE__*/jsxs(wrapper.Component, {
+    ref: ref,
+    ...wrapper.props,
+    ...forwardedProps,
+    onClick: handleClick,
+    className: classNames(className, handleBasicClasses({
+      aspectRatio: adjustedAspectRatio,
+      prefix: CLASSNAME,
+      size,
+      theme,
+      variant,
+      isDragHovering,
+      isDisabled: isAnyDisabled
+    })),
+    children: [/*#__PURE__*/jsx("span", {
+      className: `${CLASSNAME}__background`
+    }), /*#__PURE__*/jsxs("span", {
+      className: `${CLASSNAME}__wrapper`,
+      children: [icon && /*#__PURE__*/jsx(Icon, {
+        className: `${CLASSNAME}__icon`,
+        icon: icon,
+        size: Size.s
+      }), label && /*#__PURE__*/jsx("span", {
+        className: `${CLASSNAME}__label`,
+        children: label
+      })]
+    }), fileInputProps && /*#__PURE__*/jsx("input", {
+      type: "file",
+      id: inputId,
+      className: `${CLASSNAME}__input ${VISUALLY_HIDDEN}`,
+      ...disabledStateProps,
+      ...fileInputProps,
+      readOnly: isAnyDisabled,
+      onChange: onChange,
+      onDragEnter: setDragHovering,
+      onDragLeave: unsetDragHovering,
+      onDrop: unsetDragHovering
+    })]
+  });
+});
+Uploader.displayName = COMPONENT_NAME;
+Uploader.className = CLASSNAME;
+Uploader.defaultProps = DEFAULT_PROPS;
+
+export { Uploader, UploaderVariant };
+//# sourceMappingURL=15fb66ce.js.map

package/_internal/15fb66ce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"15fb66ce.js","sources":["../../src/components/uploader/Uploader.tsx"],"sourcesContent":["import React, { MouseEventHandler } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Icon, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useBooleanState } from '@lumx/react/hooks/useBooleanState';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';\nimport { useDisableStateProps } from '@lumx/react/utils/disabled';\nimport { VISUALLY_HIDDEN } from '@lumx/react/constants';\n\n/**\n * Uploader variants.\n */\nexport const UploaderVariant = {\n    square: 'square',\n    rounded: 'rounded',\n    circle: 'circle',\n} as const;\nexport type UploaderVariant = ValueOf<typeof UploaderVariant>;\n\n/**\n * Uploader sizes.\n */\nexport type UploaderSize = Extract<Size, 'xl' | 'xxl'>;\n\n/**\n * Extend native HTML input props with specialized `onChange` providing the a `File` array.\n */\ninterface FileInputProps extends Omit<React.ComponentProps<'input'>, 'onChange'> {\n    onChange(files: File[], evt: React.ChangeEvent<HTMLInputElement>): void;\n}\n\n/**\n * Defines the props of the component.\n */\nexport interface UploaderProps extends GenericProps, HasTheme, HasAriaDisabled {\n    /** Image aspect ratio. */\n    aspectRatio?: AspectRatio;\n    /** Icon (SVG path). */\n    icon?: string;\n    /** Disabled state */\n    isDisabled?: boolean;\n    /** Label text. */\n    label?: string;\n    /** Size variant. */\n    size?: UploaderSize;\n    /** Variant. */\n    variant?: UploaderVariant;\n    /** On click callback. */\n    onClick?: MouseEventHandler;\n    /** Handle file selection with a native input file. */\n    fileInputProps?: FileInputProps;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Uploader';\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<UploaderProps> = {\n    aspectRatio: AspectRatio.horizontal,\n    size: Size.xl,\n    variant: UploaderVariant.square,\n};\n\n/**\n * Uploader component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Uploader = forwardRef<UploaderProps>((props, ref) => {\n    const { disabledStateProps, otherProps, isAnyDisabled } = useDisableStateProps(props);\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        aspectRatio = DEFAULT_PROPS.aspectRatio,\n        className,\n        label,\n        icon,\n        size = DEFAULT_PROPS.size,\n        theme = defaultTheme,\n        variant = DEFAULT_PROPS.variant,\n        fileInputProps,\n        onClick,\n        ...forwardedProps\n    } = otherProps;\n    // Adjust to square aspect ratio when using circle variants.\n    const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;\n\n    const handleClick: React.MouseEventHandler = React.useCallback(\n        (evt) => {\n            if (isAnyDisabled) {\n                evt.preventDefault();\n            } else {\n                onClick?.(evt);\n            }\n        },\n        [isAnyDisabled, onClick],\n    );\n\n    const generatedInputId = useId();\n    const inputId = fileInputProps?.id || generatedInputId;\n    const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);\n    const wrapper = fileInputProps\n        ? ({ Component: 'label', props: { htmlFor: inputId } } as const)\n        : ({ Component: 'button', props: { type: 'button', ...disabledStateProps } } as const);\n\n    const onChange = React.useMemo(() => {\n        if (isAnyDisabled || !fileInputProps?.onChange) return undefined;\n        return (evt: React.ChangeEvent<HTMLInputElement>) => {\n            const fileList = evt.target.files;\n            const files = fileList ? Array.from(fileList) : [];\n            fileInputProps.onChange(files, evt);\n        };\n    }, [isAnyDisabled, fileInputProps]);\n\n    return (\n        <wrapper.Component\n            ref={ref as any}\n            {...wrapper.props}\n            {...forwardedProps}\n            onClick={handleClick}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    aspectRatio: adjustedAspectRatio,\n                    prefix: CLASSNAME,\n                    size,\n                    theme,\n                    variant,\n                    isDragHovering,\n                    isDisabled: isAnyDisabled,\n                }),\n            )}\n        >\n            <span className={`${CLASSNAME}__background`} />\n\n            <span className={`${CLASSNAME}__wrapper`}>\n                {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.s} />}\n\n                {label && <span className={`${CLASSNAME}__label`}>{label}</span>}\n            </span>\n\n            {fileInputProps && (\n                <input\n                    type=\"file\"\n                    id={inputId}\n                    className={`${CLASSNAME}__input ${VISUALLY_HIDDEN}`}\n                    {...disabledStateProps}\n                    {...fileInputProps}\n                    readOnly={isAnyDisabled}\n                    onChange={onChange}\n                    onDragEnter={setDragHovering}\n                    onDragLeave={unsetDragHovering}\n                    onDrop={unsetDragHovering}\n                />\n            )}\n        </wrapper.Component>\n    );\n});\nUploader.displayName = COMPONENT_NAME;\nUploader.className = CLASSNAME;\nUploader.defaultProps = DEFAULT_PROPS;\n"],"names":["UploaderVariant","square","rounded","circle","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","aspectRatio","AspectRatio","horizontal","size","Size","xl","variant","Uploader","forwardRef","props","ref","disabledStateProps","otherProps","isAnyDisabled","useDisableStateProps","defaultTheme","useTheme","Theme","light","className","label","icon","theme","fileInputProps","onClick","forwardedProps","adjustedAspectRatio","handleClick","React","useCallback","evt","preventDefault","generatedInputId","useId","inputId","id","isDragHovering","unsetDragHovering","setDragHovering","useBooleanState","wrapper","Component","htmlFor","type","onChange","useMemo","undefined","fileList","target","files","Array","from","_jsxs","classNames","handleBasicClasses","prefix","isDisabled","children","_jsx","Icon","s","VISUALLY_HIDDEN","readOnly","onDragEnter","onDragLeave","onDrop","displayName","defaultProps"],"mappings":"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"}

package/_internal/160cf9fe.js

@@ -0,0 +1,24 @@
+import React__default from 'react';
+import { DOCUMENT } from './6af61e2f.js';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * HOC component wrapping a component to skip render if predicate return falsy
+ */
+const skipRender = (predicate, Component) => {
+  const Wrapper = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+    if (!DOCUMENT) {
+      // Can't render in SSR.
+      return null;
+    }
+    return /*#__PURE__*/jsx(Component, {
+      ref: ref,
+      ...props
+    });
+  });
+  Wrapper.displayName = Component.displayName;
+  return Wrapper;
+};
+
+export { skipRender };
+//# sourceMappingURL=160cf9fe.js.map

package/_internal/160cf9fe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"160cf9fe.js","sources":["../../src/utils/react/skipRender.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DOCUMENT } from '@lumx/react/constants';\nimport type { Comp } from '@lumx/react/utils/type';\n/**\n * HOC component wrapping a component to skip render if predicate return falsy\n */\nexport const skipRender = <P, T>(predicate: (props: P) => any, Component: Comp<P, T>) => {\n    const Wrapper = React.forwardRef<T, P>((props, ref) => {\n        if (!DOCUMENT) {\n            // Can't render in SSR.\n            return null;\n        }\n        return <Component ref={ref} {...props} />;\n    });\n    Wrapper.displayName = Component.displayName;\n    return Wrapper;\n};\n"],"names":["skipRender","predicate","Component","Wrapper","React","forwardRef","props","ref","DOCUMENT","_jsx","displayName"],"mappings":";;;;AAIA;AACA;AACA;MACaA,UAAU,GAAGA,CAAOC,SAA4B,EAAEC,SAAqB,KAAK;EACrF,MAAMC,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAO,CAACC,KAAK,EAAEC,GAAG,KAAK;IACnD,IAAI,CAACC,QAAQ,EAAE;AACX;AACA,MAAA,OAAO,IAAI,CAAA;AACf,KAAA;IACA,oBAAOC,GAAA,CAACP,SAAS,EAAA;AAACK,MAAAA,GAAG,EAAEA,GAAI;MAAA,GAAKD,KAAAA;AAAK,KAAG,CAAC,CAAA;AAC7C,GAAC,CAAC,CAAA;AACFH,EAAAA,OAAO,CAACO,WAAW,GAAGR,SAAS,CAACQ,WAAW,CAAA;AAC3C,EAAA,OAAOP,OAAO,CAAA;AAClB;;;;"}