@geneui/components 3.0.0-next-06dadf3-29102024 → 3.0.0-next-48d0ef7-31102024

package/ImagePreview/index.js

@@ -1,217 +0,0 @@
-import { _ as __rest } from '../tslib.es6-f211516f.js';
-import React__default, { forwardRef, useRef, useState, useImperativeHandle, useCallback, useEffect } from 'react';
-import Portal from '../Portal/index.js';
-import { c as classnames } from '../index-031ff73c.js';
-import { f as fileSizeDisplay, n as noop } from '../index-5f37f281.js';
-import '../configs-00612ce0.js';
-import useImgDownload from '../hooks/useImgDownload.js';
-import { u as useEllipsisDetection } from '../useEllipsisDetection-c1c9ad94.js';
-import Icon from '../Icon/index.js';
-import Switcher from '../Switcher/index.js';
-import { T as Tooltip } from '../index-c7646e48.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import 'react-dom';
-import 'prop-types';
-import '../GeneUIProvider/index.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import '../hooks/useDebounce.js';
-import '../_rollupPluginBabelHelpers-a83240e1.js';
-import '../hooks/useKeyDown.js';
-import '../checkboxRadioSwitcher-5b69d7bd.js';
-import '../guid-8ddf77b3.js';
-
-const bufferSize = 40;
-const borderWidth = 2;
-const Magnifier = forwardRef(({ imgUrl, className, name = '', withRotation = false, withMagnifier = false, showMagnifier = false, zoom = 1.5, magnifierAppearance = 'square' }, ref) => {
-    const imgRef = useRef(null);
-    const glassRef = useRef(null);
-    const [rotationDeg, setRotationDeg] = useState(0);
-    const [isCursorInScopeOfImage, setIsCursorInScopeOfImage] = useState(false);
-    const [glassPositionStyles, setGlassPositionStyles] = useState({});
-    const rotate = (deg = 90) => {
-        if (!withRotation)
-            return;
-        const newDeg = rotationDeg + deg;
-        setRotationDeg(Math.abs(newDeg) >= 360 ? 0 : newDeg);
-    };
-    useImperativeHandle(ref, () => ({
-        rotate
-    }));
-    const onMouseMoveHandler = useCallback((e) => {
-        var _a, _b;
-        // Prevent any calculation in case of magnifier is turned off
-        if (!withMagnifier || !imgRef.current || !glassRef.current)
-            return;
-        e.preventDefault();
-        const img = imgRef.current;
-        const cnt = img.offsetParent;
-        if (!cnt)
-            return;
-        const glassWidth = ((_a = glassRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) / 2;
-        const glassHeight = ((_b = glassRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) / 2;
-        // Positive value of rotation deg
-        const absRotationDeg = Math.abs(rotationDeg);
-        const { clientX, clientY } = e;
-        const stylesProps = {};
-        // @TODO need move to useMemo hooks for better performance
-        const { bottom, height, left, right, top, width } = cnt.getBoundingClientRect();
-        let x = clientX - left - glassWidth;
-        let y = clientY - top - glassHeight;
-        // Calculate horizontal thresholds for img
-        if (clientX < left + bufferSize)
-            x = -glassWidth + bufferSize;
-        if (clientX > right - bufferSize)
-            x = width - bufferSize - glassWidth;
-        // Calculate vertical thresholds for img
-        if (clientY < top + bufferSize)
-            y = -glassHeight + bufferSize;
-        if (clientY > bottom - bufferSize)
-            y = height - glassHeight - bufferSize;
-        // Handle vertical rotation cases
-        if (rotationDeg === 0 || absRotationDeg === 180) {
-            if (rotationDeg === 0) {
-                // Adoption coordinates values to img sides
-                stylesProps.left = `${x}px`;
-                stylesProps.top = `${y}px`;
-                // Calculate zoomed image positions
-                const glassX = x * zoom + bufferSize * zoom + borderWidth * 2;
-                const glassY = y * zoom + bufferSize * zoom + borderWidth * 2;
-                stylesProps.backgroundPosition = `-${glassX}px -${glassY}px`;
-            }
-            if (absRotationDeg === 180) {
-                // Adoption coordinates values to img sides
-                stylesProps.right = `${x}px`;
-                stylesProps.bottom = `${y}px`;
-                // Calculate zoomed image positions
-                const glassX = width * zoom - glassWidth - 40 * zoom - (x * zoom + 40 * zoom);
-                const glassY = height * zoom - glassHeight - 40 * zoom - (y * zoom + 40 * zoom);
-                stylesProps.backgroundPosition = `-${glassX}px -${glassY}px`;
-            }
-        }
-        // Handle horizontal rotation cases
-        if (absRotationDeg === 90 || absRotationDeg === 270) {
-            if (rotationDeg === 90 || rotationDeg === -270) {
-                // Adoption coordinates values to img sides
-                stylesProps.bottom = `${x}px`; // x
-                stylesProps.left = `${y}px`; // y
-                // Calculate zoomed image positions
-                const glassX = img.height * zoom - glassHeight - 40 * zoom - (x * zoom + 40 * zoom);
-                const glassY = y * zoom + 40 * zoom;
-                stylesProps.backgroundPosition = `-${glassY}px -${glassX}px`;
-            }
-            if (rotationDeg === 270 || rotationDeg === -90) {
-                // Adoption coordinates values to img sides
-                stylesProps.top = `${x}px`; // x
-                stylesProps.right = `${y}px`; // y
-                // Calculate zoomed image positions
-                const glassX = x * zoom + 40 * zoom;
-                const glassY = img.width * zoom - glassWidth - 40 * zoom - (y * zoom + 40 * zoom);
-                stylesProps.backgroundPosition = `-${glassY}px -${glassX}px`;
-            }
-        }
-        setGlassPositionStyles(stylesProps);
-    }, [rotationDeg]);
-    const onMouseEnterHandler = () => showMagnifier && setIsCursorInScopeOfImage(true);
-    const onMouseLeaveHandler = (e) => {
-        if (e.relatedTarget !== glassRef.current) {
-            setIsCursorInScopeOfImage(false);
-        }
-    };
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { className: "imgMagnifier", style: {
-                transform: `rotateZ(${rotationDeg}deg)`
-            } },
-            withMagnifier && showMagnifier && isCursorInScopeOfImage && (React__default.createElement("div", { ref: glassRef, className: "imgMagnifier__glass", style: Object.assign({ borderRadius: `${magnifierAppearance === 'circle' ? 50 : 0}%`, backgroundImage: `url(${imgUrl})`, backgroundRepeat: 'no-repeat', backgroundSize: imgRef.current
-                        ? `${imgRef.current.clientWidth * zoom}px ${imgRef.current.clientHeight * zoom}px`
-                        : `0 0` }, glassPositionStyles), onMouseLeave: onMouseLeaveHandler, onMouseMove: onMouseMoveHandler })),
-            React__default.createElement("img", { ref: imgRef, src: imgUrl, alt: name, onMouseEnter: onMouseEnterHandler, onMouseMove: (e) => showMagnifier && onMouseMoveHandler(e), className: `imgMagnifier__img ${className}` }))));
-});
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .imagePreview{display:flex;flex-direction:column;max-height:100%;max-width:100%;min-width:320px}[data-gene-ui-version=\"2.16.4\"] .imagePreview__close{display:flex}[data-gene-ui-version=\"2.16.4\"] .imagePreview.mobile-view .imagePreview__close{margin-left:auto}[data-gene-ui-version=\"2.16.4\"] [dir=rtl] .imagePreview.mobile-view .imagePreview__close{margin-left:0;margin-right:auto}[data-gene-ui-version=\"2.16.4\"] .imagePreview__header{align-items:center;display:flex;justify-content:space-between;padding:16px;width:100%}[data-gene-ui-version=\"2.16.4\"] .imagePreview.mobile-view .imagePreview__header{align-items:flex-start;flex-direction:column-reverse;padding:8px}[data-gene-ui-version=\"2.16.4\"] .imagePreview__infoWrapper{align-items:center;align-self:stretch;display:flex;max-width:calc(100% - 250px)}[data-gene-ui-version=\"2.16.4\"] .imagePreview.mobile-view .imagePreview__infoWrapper{max-width:100%}[data-gene-ui-version=\"2.16.4\"] .imagePreview__info{display:flex;flex-direction:column;font-size:14px;font-weight:600;height:100%;justify-content:center;max-width:calc(100% - 28px);padding:4px 0}[data-gene-ui-version=\"2.16.4\"] .imagePreview__info-center{justify-content:center}[data-gene-ui-version=\"2.16.4\"] .imagePreview__imgIcon{opacity:.8}[data-gene-ui-version=\"2.16.4\"] .imagePreview__sizes{display:flex}[data-gene-ui-version=\"2.16.4\"] .imagePreview__weight{opacity:.8;padding-right:8px}[data-gene-ui-version=\"2.16.4\"] .imagePreview__resolution{opacity:.8;padding-left:8px}[data-gene-ui-version=\"2.16.4\"] .imagePreview__resolution--divider{opacity:.8;padding-left:0}[data-gene-ui-version=\"2.16.4\"] .imagePreview__resolution--separate{margin:0 5px}[data-gene-ui-version=\"2.16.4\"] .imagePreview__options{align-items:center;display:flex}[data-gene-ui-version=\"2.16.4\"] .imagePreview.mobile-view .imagePreview__options{width:100%}[data-gene-ui-version=\"2.16.4\"] .imagePreview__magnifier{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding-right:8px}[data-gene-ui-version=\"2.16.4\"] .imagePreview__rotate{display:flex}[data-gene-ui-version=\"2.16.4\"] .imagePreview__divider,[data-gene-ui-version=\"2.16.4\"] .imagePreview__divider-small{position:relative}[data-gene-ui-version=\"2.16.4\"] .imagePreview__divider-small:after{background:rgba(var(--background-sc-rgb),.3);content:\"\";height:12px;position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px}[data-gene-ui-version=\"2.16.4\"] [dir=rtl] .imagePreview__divider-small{margin:0 5px}[data-gene-ui-version=\"2.16.4\"] .imagePreview.mobile-view .imagePreview__divider{margin-right:6px}[data-gene-ui-version=\"2.16.4\"] .imagePreview__icon{cursor:pointer;font-size:28px;font-weight:100;margin:6px}[data-gene-ui-version=\"2.16.4\"] .imagePreview.mobile-view .imagePreview__icon{margin-left:0}[data-gene-ui-version=\"2.16.4\"] .imagePreview__content{align-items:center;aspect-ratio:1;display:flex;justify-content:center}[data-gene-ui-version=\"2.16.4\"] .imagePreview__img{max-height:100%;max-width:100%}[data-gene-ui-version=\"2.16.4\"] [dir=rtl] .imagePreview__name{padding-right:8px}[data-gene-ui-version=\"2.16.4\"] .imagePreview.modal-view{height:100%;left:0;position:fixed;top:0;width:100%;z-index:500}[data-gene-ui-version=\"2.16.4\"] .imagePreview.modal-view .imagePreview__header{background:#000}[data-gene-ui-version=\"2.16.4\"] .imagePreview.modal-view .imagePreview__infoWrapper,[data-gene-ui-version=\"2.16.4\"] .imagePreview.modal-view .imagePreview__name{color:#fff}[data-gene-ui-version=\"2.16.4\"] .imagePreview.modal-view .imagePreview__sizes{color:#fff9}[data-gene-ui-version=\"2.16.4\"] .imagePreview.modal-view .imagePreview__options{color:#fff}[data-gene-ui-version=\"2.16.4\"] .imagePreview.modal-view .imagePreview__magnifier .switcher-element{background:#ffffff61}[data-gene-ui-version=\"2.16.4\"] .imagePreview.modal-view .imagePreview__magnifier .switcher-element.active{background:var(--hero)}[data-gene-ui-version=\"2.16.4\"] .imagePreview.modal-view .imagePreview__divider:after{background:#ffffff4d;content:\"\";height:24px;position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px}[data-gene-ui-version=\"2.16.4\"] .imagePreview.modal-view .imagePreview__divider-small:after{background:#ffffff4d}[data-gene-ui-version=\"2.16.4\"] .imagePreview.modal-view .imagePreview__content{height:100%;transform:translateZ(0);width:100%}[data-gene-ui-version=\"2.16.4\"] .imagePreview.modal-view .imagePreview__background{background-color:#000c;height:100%;position:absolute;width:100%}[data-gene-ui-version=\"2.16.4\"] .imagePreview.modal-view .imagePreview__img{margin:0 auto;max-height:calc(100vh - 10rem);max-width:calc(100vh - 10rem)}[data-gene-ui-version=\"2.16.4\"] .imgMagnifier{position:relative}[data-gene-ui-version=\"2.16.4\"] .imgMagnifier__glass{border:2px solid #000;cursor:none;height:150px;position:absolute;width:150px;z-index:999999}[data-gene-ui-version=\"2.16.4\"] .imgMagnifier__img{width:100%}";
-styleInject(css_248z);
-
-const ImagePreview = (_a) => {
-    var { name, path, onClose = noop, showSize = true, isMobile = false, withModal = true, showRotate = true, showDownload = true, customHeaders, showDimensions = true, withMagnifier = false, magnifierDefaultValue = true } = _a, rest = __rest(_a, ["name", "path", "onClose", "showSize", "isMobile", "withModal", "showRotate", "showDownload", "customHeaders", "showDimensions", "withMagnifier", "magnifierDefaultValue"]);
-    const [isMagnifierOn, setIsMagnifierOn] = useState(magnifierDefaultValue);
-    const [imageData, setImageData] = useState('');
-    const [meta, setMeta] = useState({
-        size: 0,
-        width: 0,
-        height: 0
-    });
-    const nameRef = useRef(null);
-    const magnifierRef = useRef(null);
-    const isTruncated = useEllipsisDetection(nameRef);
-    const downloadImg = useImgDownload();
-    useEffect(() => {
-        !!path &&
-            fetch(path, { headers: Object.assign({}, customHeaders) })
-                .then((r) => r.arrayBuffer())
-                .then((buffer) => {
-                const img = new Image();
-                const blob = new Blob([buffer], { type: 'image/jpeg' });
-                img.src = URL.createObjectURL(blob);
-                img.onload = () => setMeta((val) => (Object.assign(Object.assign({}, val), { width: img.naturalWidth, height: img.naturalHeight })));
-                setMeta((val) => (Object.assign(Object.assign({}, val), { size: buffer.byteLength })));
-                setImageData(img.src);
-            });
-    }, [path]);
-    const MagnifierWrapper = imageData && (React__default.createElement(Magnifier, { ref: magnifierRef, imgUrl: imageData, name: name, zoom: 2, showMagnifier: isMagnifierOn, className: "imagePreview__img", withRotation: true, withMagnifier: true }));
-    return (React__default.createElement("div", Object.assign({ className: classnames('imagePreview', { 'modal-view': withModal, 'mobile-view': isMobile }) }, rest),
-        React__default.createElement("div", { className: "imagePreview__header" },
-            React__default.createElement("div", { className: "imagePreview__infoWrapper" },
-                React__default.createElement(Icon, { type: "bc-icon-Image", className: "imagePreview__icon imagePreview__imgIcon" }),
-                React__default.createElement("div", { className: classnames('imagePreview__info', {
-                        'imagePreview__info-center': !showSize && !showDimensions
-                    }) },
-                    name && (React__default.createElement(Tooltip, { text: name, isVisible: isTruncated },
-                        React__default.createElement("span", { className: "imagePreview__name ellipsis-text", ref: nameRef }, name))),
-                    React__default.createElement("div", { className: "imagePreview__sizes" },
-                        showSize && React__default.createElement("span", { className: "imagePreview__weight" }, fileSizeDisplay(meta.size)),
-                        showSize && showDimensions && React__default.createElement("div", { className: "imagePreview__divider-small" }),
-                        showDimensions && (React__default.createElement("span", { className: classnames('imagePreview__resolution', {
-                                'imagePreview__resolution--divider': !showSize
-                            }) },
-                            React__default.createElement("span", null, meta.width),
-                            React__default.createElement("span", { className: "imagePreview__resolution--separate" }, "x"),
-                            React__default.createElement("span", null, meta.height)))))),
-            React__default.createElement("div", { className: "imagePreview__options" },
-                withMagnifier && (React__default.createElement("div", { className: "imagePreview__magnifier" },
-                    React__default.createElement(Switcher
-                    /*@ts-ignore*/
-                    , { 
-                        /*@ts-ignore*/
-                        defaultChecked: magnifierDefaultValue, value: isMagnifierOn, onChange: (e) => setIsMagnifierOn(e.currentTarget.checked), labelPosition: "left", label: "Magnifier", className: "imagePreview__switcher" }))),
-                showRotate && (React__default.createElement("div", { className: "imagePreview__rotate" },
-                    React__default.createElement(Icon, { type: "bc-icon-rotate-left", className: "imagePreview__icon", onClick: () => {
-                            var _a;
-                            if (!((_a = magnifierRef.current) === null || _a === void 0 ? void 0 : _a.rotate))
-                                return;
-                            magnifierRef.current.rotate(-90);
-                        } }),
-                    React__default.createElement(Icon, { type: "bc-icon-rotate-right", className: "imagePreview__icon", onClick: () => {
-                            var _a;
-                            if (!((_a = magnifierRef.current) === null || _a === void 0 ? void 0 : _a.rotate))
-                                return;
-                            magnifierRef.current.rotate(90);
-                        } }))),
-                showDownload && (React__default.createElement("div", { className: "imagePreview__download" },
-                    React__default.createElement(Icon, { type: "bc-icon-download", className: "imagePreview__icon", onClick: () => downloadImg(path, name, customHeaders) }))),
-                withModal && (React__default.createElement("div", { className: "imagePreview__close" },
-                    React__default.createElement("div", { className: "imagePreview__divider" }),
-                    React__default.createElement(Icon, { type: "bc-icon-close", className: "imagePreview__icon", onClick: onClose }))))),
-        React__default.createElement("div", { className: "imagePreview__content" }, withModal ? (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("div", { className: "imagePreview__background", onClick: onClose }),
-            MagnifierWrapper)) : (MagnifierWrapper))));
-};
-
-const ImagePreviewHOC = (_a) => {
-    var { withModal } = _a, restProps = __rest(_a, ["withModal"]);
-    return withModal ? (
-    // @ts-ignore
-    React__default.createElement(Portal, { isOpen: true },
-        React__default.createElement(ImagePreview, Object.assign({}, restProps, { withModal: withModal })))) : (React__default.createElement(ImagePreview, Object.assign({}, restProps, { withModal: withModal })));
-};
-
-export { ImagePreviewHOC as default };

package/Info/index.js

@@ -1,41 +0,0 @@
-import React__default, { useState, useMemo } from 'react';
-import { c as classnames } from '../index-031ff73c.js';
-import { S as SvgInfoOutline } from '../InfoOutline-dd2e89d9.js';
-import { T as Tooltip } from '../index-c7646e48.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../ArrowLeft-b88e2ba8.js';
-import '../tslib.es6-f211516f.js';
-import 'react-dom';
-import '../GeneUIProvider/index.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .info{border-radius:var(--guit-ref-radius-3xsmall);line-height:0}[data-gene-ui-version=\"2.16.4\"] .info_appearance_default{color:var(--guit-sem-color-foreground-neutral-2)}[data-gene-ui-version=\"2.16.4\"] .info_appearance_brand{color:var(--guit-sem-color-foreground-brand)}[data-gene-ui-version=\"2.16.4\"] .info_appearance_inverse{color:var(--guit-sem-color-foreground-inverse)}[data-gene-ui-version=\"2.16.4\"] .info_disabled{color:var(--guit-sem-color-foreground-disabled);pointer-events:none}";
-styleInject(css_248z);
-
-const iconSizes = {
-    small: 24,
-    smallNudge: 20,
-    XSmall: 16
-};
-/**
- * Info icon component used to provide additional contextual information to users. It appears as a small icon, and is placed near elements where further explanation or clarification is useful.
- */
-const Info = ({ infoText, disabled, size = 'smallNudge', appearance = 'default', className }) => {
-    const [alwaysShow, setAlwaysShow] = useState(false);
-    const keyDownHandler = (event) => {
-        if (disabled)
-            return;
-        if (event.key === 'Enter') {
-            setAlwaysShow((prev) => !prev);
-        }
-    };
-    const handleBlur = () => !disabled && alwaysShow && setAlwaysShow(false);
-    const buttonClassNames = useMemo(() => classnames('info', className, {
-        [`info_appearance_${appearance}`]: appearance,
-        info_disabled: disabled
-    }), [appearance, className, disabled]);
-    return (React__default.createElement(Tooltip, { text: infoText, alwaysShow: alwaysShow, appearance: appearance === 'inverse' ? 'inverse' : 'default' },
-        React__default.createElement("button", { disabled: disabled, "aria-pressed": alwaysShow, className: buttonClassNames, onKeyDown: keyDownHandler, onBlur: handleBlur },
-            React__default.createElement(SvgInfoOutline, { className: "info__icon", size: iconSizes[size] }))));
-};
-
-export { Info as default };

package/InfoOutline-dd2e89d9.js

@@ -1,29 +0,0 @@
-import { _ as _objectWithoutProperties, a as _extends } from './ArrowLeft-b88e2ba8.js';
-import React__default from 'react';
-
-var _excluded = ["size", "color"];
-var SvgInfoOutline = function SvgInfoOutline(_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 24 : _ref$size,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "currentColor" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default.createElement("svg", _extends({
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: color,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18.5a8.5 8.5 0 1 1 8.5-8.5 8.51 8.51 0 0 1-8.5 8.5Z",
-    fill: color
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M11.97 10.237a.75.75 0 0 0-.75.75v5.243a.75.75 0 0 0 1.5 0v-5.243a.75.75 0 0 0-.75-.75Z",
-    fill: color
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M11.969 6.995a.914.914 0 1 0 0 1.829.914.914 0 0 0 0-1.829Z",
-    fill: color
-  }));
-};
-
-export { SvgInfoOutline as S };

package/InteractiveWidget/index.js

@@ -1,78 +0,0 @@
-import { _ as __rest } from '../tslib.es6-f211516f.js';
-import React__default, { useRef } from 'react';
-import { c as classnames } from '../index-031ff73c.js';
-import Icon from '../Icon/index.js';
-import Switcher from '../Switcher/index.js';
-import Tag from '../Tag/index.js';
-import { T as Tooltip } from '../index-c7646e48.js';
-import 'prop-types';
-import '../dateValidation-67caec66.js';
-import 'react-dom';
-import '../configs-00612ce0.js';
-import { u as useEllipsisDetection } from '../useEllipsisDetection-c1c9ad94.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../_rollupPluginBabelHelpers-a83240e1.js';
-import '../index-5f37f281.js';
-import '../hooks/useKeyDown.js';
-import '../checkboxRadioSwitcher-5b69d7bd.js';
-import '../guid-8ddf77b3.js';
-import '../_commonjsHelpers-24198af3.js';
-import '../GeneUIProvider/index.js';
-import '../hooks/useDebounce.js';
-
-const InteractiveWidgetIcon = ({ children, iconColor, appearance, iconBackground }) => {
-    return (React__default.createElement("div", { className: `widgetIcon widgetIcon-${appearance}`, style: iconColor ? { '--icon-color': iconColor, filter: 'alpha(opacity=60)' } : {} },
-        iconBackground && React__default.createElement("div", { className: "widgetIcon__background" }),
-        typeof children === 'string' ? (
-        // @ts-ignore
-        React__default.createElement(Icon, { type: children, className: classnames({ widgetIcon__iconDefault: appearance === 'default' }) })) : (children)));
-};
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .interactiveWidget{background:var(--background);border-radius:1.6rem;box-sizing:border-box;display:flex;height:10.4rem;min-width:1px;padding:2rem;width:100%}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget:focus-visible{outline:.2rem var(--hero) solid}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget-border{border:.2rem solid rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget-border:hover{border:.2rem solid var(--hero)}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget-pointer{cursor:pointer}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget-pointer:hover{background:rgba(var(--hero-rgb),.1)}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget-disabled{opacity:.6;pointer-events:none}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget__wrapper{align-items:center;display:flex;height:100%;min-width:0;width:100%}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget__content{display:flex;flex-direction:column;height:100%;justify-content:flex-start;min-width:0;overflow:hidden;width:100%}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget__header{align-items:center;display:flex;margin-bottom:.6rem;min-width:0;width:100%}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget__titleWrapper{display:flex;flex:1;max-width:100%;min-width:0;padding-inline-end:1.6rem}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget__title{font-size:1.6rem;font-weight:700}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget__infoIcon{margin-inline-start:.4rem}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget__components{align-items:center;display:flex;flex:0 0 auto}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget__switcher{margin-inline-start:1.6rem}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget__description{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;font-size:1.2rem;line-height:1.6rem;opacity:.7;overflow:hidden;text-overflow:ellipsis}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget .widgetIcon{fill:var(--icon-color);align-items:center;color:var(--icon-color);display:flex;flex:0 0 auto;justify-content:center;margin-inline-end:2rem;position:relative;z-index:1}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget .widgetIcon-default{box-sizing:border-box;height:6.4rem;padding:1rem;width:6.4rem}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget .widgetIcon-compact{height:2.4rem;width:2.4rem}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget .widgetIcon-compact .widgetIcon__background{display:none}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget .widgetIcon__iconDefault{font-size:4rem}[data-gene-ui-version=\"2.16.4\"] .interactiveWidget .widgetIcon__background{background:var(--icon-color);border-radius:100%;height:100%;left:0;opacity:.07;position:absolute;top:0;width:100%;z-index:-1}";
-styleInject(css_248z);
-
-const InteractiveWidget = (_a) => {
-    var { className, withBorder = true, onClick, disabled = false, icon, title, appearance = 'default', iconColor = 'var(--background-sc)', tagName, tagColor, switcherProps, titleInfo, description, iconBackground = true } = _a, restProps = __rest(_a, ["className", "withBorder", "onClick", "disabled", "icon", "title", "appearance", "iconColor", "tagName", "tagColor", "switcherProps", "titleInfo", "description", "iconBackground"]);
-    const titleRef = useRef(null);
-    const descriptionRef = useRef(null);
-    const isTitleTruncated = useEllipsisDetection(titleRef);
-    const isDescriptionTruncated = useEllipsisDetection(descriptionRef);
-    return (React__default.createElement("div", Object.assign({ className: classnames('interactiveWidget', {
-            'interactiveWidget-border': withBorder,
-            'interactiveWidget-pointer': onClick,
-            'interactiveWidget-disabled': disabled
-        }, className), tabIndex: 0, onClick: (event) => {
-            onClick && onClick(event);
-        }, onKeyDown: (event) => {
-            if (disabled)
-                return;
-            onClick && onClick(event);
-        } }, restProps),
-        React__default.createElement("div", { className: 'interactiveWidget__wrapper' },
-            icon && appearance === 'default' && (React__default.createElement(InteractiveWidgetIcon, { children: icon, appearance: appearance, iconColor: iconColor, iconBackground: iconBackground })),
-            React__default.createElement("div", { className: 'interactiveWidget__content' },
-                React__default.createElement("div", { className: `interactiveWidget__header interactiveWidget__header-${appearance}` },
-                    icon && appearance === 'compact' && (React__default.createElement(InteractiveWidgetIcon, { children: icon, appearance: appearance, iconColor: iconColor })),
-                    React__default.createElement("div", { className: "interactiveWidget__titleWrapper" },
-                        title && (
-                        // @ts-ignore
-                        React__default.createElement(Tooltip, { text: title, isVisible: isTitleTruncated },
-                            React__default.createElement("h3", { className: 'interactiveWidget__title ellipsis-text', ref: titleRef }, title))),
-                        titleInfo && title && (
-                        // @ts-ignore
-                        React__default.createElement(Tooltip, { text: titleInfo },
-                            React__default.createElement(Icon, { className: 'interactiveWidget__infoIcon', type: 'bc-icon-info-48' })))),
-                    (switcherProps || tagName) && (React__default.createElement("div", { className: "interactiveWidget__components" },
-                        tagName && (
-                        // @ts-ignore
-                        React__default.createElement(Tag, { name: tagName, color: tagColor, appearance: "outline", size: "small", cornerRadius: 'smooth-radius' })),
-                        switcherProps && (
-                        // @ts-ignore
-                        React__default.createElement(Switcher, Object.assign({ className: 'interactiveWidget__switcher', changeOnEnter: true }, switcherProps)))))),
-                description && (
-                //@ts-ignore
-                React__default.createElement(Tooltip, { text: description, isVisible: isDescriptionTruncated },
-                    React__default.createElement("p", { className: "interactiveWidget__description", ref: descriptionRef }, description)))))));
-};
-
-export { InteractiveWidget as default };

package/KeyValue/index.js

@@ -1,22 +0,0 @@
-import { _ as __rest } from '../tslib.es6-f211516f.js';
-import React__default from 'react';
-import { c as classnames } from '../index-031ff73c.js';
-import Icon from '../Icon/index.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../_rollupPluginBabelHelpers-a83240e1.js';
-import 'prop-types';
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .geneKeyValue{align-items:flex-start;display:flex;flex-wrap:wrap;width:100%}[data-gene-ui-version=\"2.16.4\"] .geneKeyValue--horizontal{align-items:center;flex-wrap:nowrap}[data-gene-ui-version=\"2.16.4\"] .geneKeyValue__icon{padding:0 0 0 8px}[data-gene-ui-version=\"2.16.4\"] .geneKeyValue__label{color:#3c4043b3;flex:1 1;font-size:12px;font-weight:600;line-height:24px;margin:0 0 1rem 1rem;max-width:100%;width:100%}[data-gene-ui-version=\"2.16.4\"] .geneKeyValue__label--horizontal{flex:none;margin:0 0 0 1rem;max-width:50%;width:auto}[data-gene-ui-version=\"2.16.4\"] .geneKeyValue__value{font-size:14px;font-weight:600;line-height:24px;margin:0 1rem;max-width:100%;width:100%}[data-gene-ui-version=\"2.16.4\"] .geneKeyValue__value--horizontal{margin:0 1rem;max-width:50%}[data-gene-ui-version=\"2.16.4\"] .geneKeyValue__iconWrapper+p+p:not(.geneKeyValue__value--horizontal){margin:0 3.2rem 0 4.2rem}[data-gene-ui-version=\"2.16.4\"] [dir=rtl] .geneKeyValue__iconWrapper+p+p:not(.geneKeyValue__value--horizontal){margin:0 3.2rem 0 0}[data-gene-ui-version=\"2.16.4\"] [dir=rtl] .geneKeyValue__label{direction:ltr;margin:0 1rem 1rem 0}[data-gene-ui-version=\"2.16.4\"] [dir=rtl] .geneKeyValue__label--horizontal{margin:0 0 0 1rem}[data-gene-ui-version=\"2.16.4\"] [dir=rtl] .geneKeyValue__value{direction:ltr}[data-gene-ui-version=\"2.16.4\"] [dir=rtl] .geneKeyValue__iconWrapper+p:not(.geneKeyValue__label--horizontal){margin:0 0 1rem}";
-styleInject(css_248z);
-
-// TODO need to refine where is using restProps
-const KeyValue = (_a) => {
-    var { label, value, className, icon, appearance = 'horizontal' } = _a, restProps = __rest(_a, ["label", "value", "className", "icon", "appearance"]);
-    return (React__default.createElement("div", Object.assign({}, restProps, { className: classnames(`geneKeyValue geneKeyValue--${appearance}`, className) }),
-        icon && (React__default.createElement("div", { className: "geneKeyValue__iconWrapper" },
-            React__default.createElement(Icon, { type: icon, className: 'geneKeyValue__icon' }))),
-        React__default.createElement("p", { role: "heading", "aria-level": 1, className: `geneKeyValue__label geneKeyValue__label--${appearance} ellipsis-text` }, label),
-        React__default.createElement("p", { className: `geneKeyValue__value geneKeyValue__value--${appearance} ellipsis-text` }, value)));
-};
-
-export { KeyValue as default };

package/Label/index.js

@@ -1,48 +0,0 @@
-import React__default, { useRef } from 'react';
-import { S as SvgInfoOutline } from '../InfoOutline-dd2e89d9.js';
-import { c as classnames } from '../index-031ff73c.js';
-import { T as Tooltip } from '../index-c7646e48.js';
-import 'prop-types';
-import '../dateValidation-67caec66.js';
-import 'react-dom';
-import '../configs-00612ce0.js';
-import { u as useEllipsisDetection } from '../useEllipsisDetection-c1c9ad94.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../ArrowLeft-b88e2ba8.js';
-import '../tslib.es6-f211516f.js';
-import '../GeneUIProvider/index.js';
-import '../_commonjsHelpers-24198af3.js';
-import '../hooks/useDebounce.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .label{align-items:center;display:inline-flex;max-width:100%;min-width:0}[data-gene-ui-version=\"2.16.4\"] .label__container{align-items:center;display:flex;gap:var(--guit-ref-spacing-3xsmall);min-width:0;width:100%}[data-gene-ui-version=\"2.16.4\"] .label__container-inner{align-items:center;display:flex;gap:var(--guit-ref-spacing-4xsmall)}[data-gene-ui-version=\"2.16.4\"] .label__asterisk,[data-gene-ui-version=\"2.16.4\"] .label__text{color:var(--guit-sem-color-foreground-neutral-2)}[data-gene-ui-version=\"2.16.4\"] .label__asterisk_size_medium,[data-gene-ui-version=\"2.16.4\"] .label__text_size_medium{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}[data-gene-ui-version=\"2.16.4\"] .label__asterisk_size_small,[data-gene-ui-version=\"2.16.4\"] .label__text_size_small{font-family:var(--guit-sem-font-label-small-default-medium-font-family);font-size:var(--guit-sem-font-label-small-default-medium-font-size);font-weight:var(--guit-sem-font-label-small-default-medium-font-weight);line-height:var(--guit-sem-font-label-small-default-medium-line-height)}[data-gene-ui-version=\"2.16.4\"] .label__asterisk_disabled,[data-gene-ui-version=\"2.16.4\"] .label__text_disabled{color:var(--guit-sem-color-foreground-disabled)}[data-gene-ui-version=\"2.16.4\"] .label__icon{color:var(--guit-sem-color-foreground-neutral-2);flex:0 0 auto}[data-gene-ui-version=\"2.16.4\"] .label__icon_disabled{color:var(--guit-sem-color-foreground-disabled)}";
-styleInject(css_248z);
-
-const iconSizes = {
-    small: 16,
-    medium: 20
-};
-/**
- * Labels identify a component or group of components. Use them with elements such as checkboxes and input fields to guide users in providing specific information, or with plain text to organize information.
- */
-const Label = ({ size = 'medium', labelText, disabled, required, infoText, isLoading, className, children }) => {
-    const labelRef = useRef(null);
-    const isTruncated = useEllipsisDetection(labelRef);
-    return (React__default.createElement("label", { className: classnames(`label`, className) },
-        children,
-        isLoading ? (React__default.createElement("span", null, "skelleton")) : (React__default.createElement("span", { className: "label__container" },
-            React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: "label__container-inner" },
-                    React__default.createElement(Tooltip, { text: labelText, isVisible: isTruncated },
-                        React__default.createElement("span", { ref: labelRef, className: classnames('ellipsis-text', `label__text label__text_size_${size}`, {
-                                label__text_disabled: disabled
-                            }) }, labelText)),
-                    required && (React__default.createElement("span", { className: classnames(`label__asterisk label__text_size_${size} `, {
-                            label__text_disabled: disabled
-                        }) }, "*"))),
-                infoText && (React__default.createElement(Tooltip, { text: infoText },
-                    React__default.createElement(SvgInfoOutline, { className: classnames(`label__icon`, {
-                            label__icon_disabled: disabled
-                        }), size: iconSizes[size] }))))))));
-};
-
-export { Label as default };

package/LinkButton/index.js

@@ -1,34 +0,0 @@
-import { _ as __rest } from '../tslib.es6-f211516f.js';
-import React__default, { useCallback, useMemo } from 'react';
-import { c as classnames } from '../index-031ff73c.js';
-import { n as noop } from '../index-5f37f281.js';
-import Icon from '../Icon/index.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import 'prop-types';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../_rollupPluginBabelHelpers-a83240e1.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .linkButton{align-items:center;color:var(--hero);cursor:pointer;display:flex;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;padding:0 .8rem}[data-gene-ui-version=\"2.16.4\"] .linkButton:focus-visible{border-radius:.4rem;outline:.2rem var(--hero) solid}[data-gene-ui-version=\"2.16.4\"] .linkButton__icon{display:inline-block}[data-gene-ui-version=\"2.16.4\"] .linkButton-disable{opacity:.3;pointer-events:none}";
-styleInject(css_248z);
-
-const LinkButton = (_a) => {
-    var { href, onClick, children, iconAfter, className, iconBefore, isDisabled, onMouseDown, ariaLabel } = _a, restProps = __rest(_a, ["href", "onClick", "children", "iconAfter", "className", "iconBefore", "isDisabled", "onMouseDown", "ariaLabel"]);
-    const onClickHandler = useCallback((e) => onClick === null || onClick === void 0 ? void 0 : onClick(e), [onClick]);
-    const onMouseDownHandler = useCallback((e) => onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e), [onMouseDown]);
-    const attributes = useMemo(() => (Object.assign(Object.assign({ className: classnames('linkButton', { 'linkButton-disable': isDisabled }, className), onMouseDown: onMouseDownHandler, onClick: onClickHandler }, (ariaLabel ? { 'aria-label': ariaLabel } : {})), restProps)), [isDisabled, className, onMouseDownHandler, onClickHandler, restProps]);
-    const content = useMemo(() => (React__default.createElement(React__default.Fragment, null,
-        iconBefore && React__default.createElement(Icon, { type: iconBefore, className: "linkButton__icon" }),
-        children,
-        iconAfter && React__default.createElement(Icon, { type: iconAfter, className: "linkButton__icon" }))), [iconBefore, children, iconAfter]);
-    return (React__default.createElement(React__default.Fragment, null, href ? (React__default.createElement("a", Object.assign({}, attributes, { href: href }), content)) : (React__default.createElement("button", Object.assign({}, attributes, { type: "button" }), content))));
-};
-LinkButton.defaultProps = {
-    children: 'LinkButton example',
-    isDisabled: false,
-    onMouseDown: noop
-};
-LinkButton.displayName = 'LinkButton';
-
-export { LinkButton as default };

package/Loader/index.js

@@ -1,23 +0,0 @@
-import React__default from 'react';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .loader{align-items:center;display:inline-flex;justify-content:center}[data-gene-ui-version=\"2.16.4\"] .loader_direction_below{flex-direction:column;text-align:center}[data-gene-ui-version=\"2.16.4\"] .loader_size_2xLarge,[data-gene-ui-version=\"2.16.4\"] .loader_size_xLarge{font-family:var(--guit-sem-font-label-large-default-medium-font-family);font-size:var(--guit-sem-font-label-large-default-semibold-font-size);font-weight:var(--guit-sem-font-label-large-default-medium-font-weight);line-height:var(--guit-sem-font-label-large-default-semibold-line-height)}[data-gene-ui-version=\"2.16.4\"] .loader_size_large,[data-gene-ui-version=\"2.16.4\"] .loader_size_medium,[data-gene-ui-version=\"2.16.4\"] .loader_size_small,[data-gene-ui-version=\"2.16.4\"] .loader_size_smallNudge{font-family:var(--guit-sem-font-label-medium-default-semibold-font-family);font-size:var(--guit-sem-font-label-medium-default-semibold-font-size);font-weight:var(--guit-sem-font-label-medium-default-medium-font-weight);line-height:var(--guit-sem-font-label-medium-default-semibold-line-height)}[data-gene-ui-version=\"2.16.4\"] .loader_size_small,[data-gene-ui-version=\"2.16.4\"] .loader_size_smallNudge{gap:var(--guit-ref-spacing-xsmall)}[data-gene-ui-version=\"2.16.4\"] .loader_size_2xLarge{gap:var(--guit-ref-spacing-2xlarge)}[data-gene-ui-version=\"2.16.4\"] .loader_size_2xLarge .loader__spinnerWrapper{height:var(--guit-sem-dimension-height-2xlarge);width:var(--guit-sem-dimension-width-2xlarge)}[data-gene-ui-version=\"2.16.4\"] .loader_size_xLarge{gap:var(--guit-ref-spacing-xlarge)}[data-gene-ui-version=\"2.16.4\"] .loader_size_xLarge .loader__spinnerWrapper{height:var(--guit-sem-dimension-height-xlarge);width:var(--guit-sem-dimension-width-xlarge)}[data-gene-ui-version=\"2.16.4\"] .loader_size_large{gap:var(--guit-ref-spacing-large)}[data-gene-ui-version=\"2.16.4\"] .loader_size_large .loader__spinnerWrapper{height:var(--guit-sem-dimension-height-large);width:var(--guit-sem-dimension-width-large)}[data-gene-ui-version=\"2.16.4\"] .loader_size_medium{gap:var(--guit-ref-spacing-medium)}[data-gene-ui-version=\"2.16.4\"] .loader_size_medium .loader__spinnerWrapper{height:var(--guit-sem-dimension-height-medium);width:var(--guit-sem-dimension-width-medium)}[data-gene-ui-version=\"2.16.4\"] .loader_size_small .loader__spinnerWrapper{height:var(--guit-sem-dimension-height-small);width:var(--guit-sem-dimension-width-small)}[data-gene-ui-version=\"2.16.4\"] .loader_size_smallNudge .loader__spinnerWrapper{height:var(--guit-sem-dimension-height-small-nudge);width:var(--guit-sem-dimension-width-small-nudge)}[data-gene-ui-version=\"2.16.4\"] .loader_color_brand .loader__text,[data-gene-ui-version=\"2.16.4\"] .loader_color_neutral .loader__text{color:var(--guit-sem-color-foreground-neutral-1)}[data-gene-ui-version=\"2.16.4\"] .loader_color_brand .loader__spinnerPath{stroke:var(--guit-sem-color-foreground-brand)}[data-gene-ui-version=\"2.16.4\"] .loader_color_neutral .loader__spinnerPath{stroke:var(--guit-sem-color-foreground-neutral-2)}[data-gene-ui-version=\"2.16.4\"] .loader_color_inverse .loader__spinnerPath{stroke:var(--guit-sem-color-foreground-inverse)}[data-gene-ui-version=\"2.16.4\"] .loader_color_inverse .loader__text{color:var(--guit-sem-color-foreground-inverse)}[data-gene-ui-version=\"2.16.4\"] .loader__spinnerWrapper{flex:0 0 auto;padding:var(--guit-ref-spacing-4xsmall)}[data-gene-ui-version=\"2.16.4\"] .loader__spinner{animation:loader-rotate 2s linear infinite;height:100%;width:100%}[data-gene-ui-version=\"2.16.4\"] .loader__spinnerPath{stroke-linecap:round;animation:loader-dash 1.5s ease-in-out infinite;transform:translateZ(0)}[data-gene-ui-version=\"2.16.4\"] .loader__text{font-size:inherit;font-weight:inherit;line-height:inherit;text-transform:capitalize}@keyframes loader-rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes loader-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-136}}";
-styleInject(css_248z);
-
-/**
- *Loading spinner is a visual indicator that informs users an operation is in progress. Typically displayed as a rotating icon or circular animation, it signals that the system is working on a task, such as loading data or processing a request, and that the user should wait until the process is complete.
- */
-const Loader = ({ isLoading = true, text, textPosition = 'after', size = 'medium', appearance = 'brand', children }) => {
-    if (isLoading) {
-        return (React__default.createElement("span", { className: `loader loader_direction_${textPosition} loader_size_${size} loader_color_${appearance}` },
-            React__default.createElement("span", { className: "loader__spinnerWrapper" },
-                React__default.createElement("svg", { className: "loader__spinner", viewBox: "0 0 50 50" },
-                    React__default.createElement("circle", { className: "loader__spinnerPath", cx: "25", cy: "25", r: "22", fill: "none", strokeWidth: "5" }))),
-            text && React__default.createElement("span", { className: `loader__text loader__textColor_${appearance}` }, text)));
-    }
-    else {
-        return React__default.createElement(React__default.Fragment, null, children);
-    }
-};
-
-export { Loader as default };