@geneui/components 2.11.2 → 2.12.2

package/ImagePreview/index.js

@@ -0,0 +1,481 @@
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { forwardRef, useRef, useState, useCallback, useImperativeHandle, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { f as fileSizeDisplay, n as noop } from '../index-a0e4e333.js';
+import Portal from '../Portal/index.js';
+import { c as classnames } from '../index-6ff23041.js';
+import '../configs-fed6ac34.js';
+import useImgDownload from '../hooks/useImgDownload.js';
+import useEllipsisDetection from '../hooks/useEllipsisDetection.js';
+import Icon from '../Icon/index.js';
+import Switcher from '../Switcher/index.js';
+import Tooltip from '../Tooltip/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
+import 'react-dom';
+import '../GeneUIProvider/index.js';
+import '../hooks/useKeyDown.js';
+import '../checkboxRadioSwitcher-5b69d7bd.js';
+import '../guid-8ddf77b3.js';
+import '../Popover-f4d1cac0.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+
+const magnifierAppearances = {
+  square: 'square',
+  circle: 'circle'
+};
+const bufferSize = 40;
+const borderWidth = 2;
+const Magnifier = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    imgUrl,
+    className,
+    name,
+    withRotation,
+    withMagnifier,
+    showMagnifier,
+    zoom,
+    magnifierAppearance
+  } = _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 = useCallback(function () {
+    let deg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 90;
+    if (!withRotation) return;
+    const newDeg = rotationDeg + deg;
+    setRotationDeg(Math.abs(newDeg) >= 360 ? 0 : newDeg);
+  }, [rotationDeg, withRotation]);
+  useImperativeHandle(ref, () => ({
+    rotate
+  }));
+  const onMouseMoveHandler = useCallback(e => {
+    var _glassRef$current, _glassRef$current2;
+    // Prevent any calculation in case of magnifier is turned off
+    if (!withMagnifier) return;
+    e.preventDefault();
+    const img = imgRef.current;
+    const cnt = img.offsetParent;
+    const glassWidth = ((_glassRef$current = glassRef.current) === null || _glassRef$current === void 0 ? void 0 : _glassRef$current.offsetWidth) / 2;
+    const glassHeight = ((_glassRef$current2 = glassRef.current) === null || _glassRef$current2 === void 0 ? void 0 : _glassRef$current2.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 = "".concat(x, "px");
+        stylesProps.top = "".concat(y, "px");
+
+        // Calculate zoomed image positions
+        const glassX = x * zoom + bufferSize * zoom + borderWidth * 2;
+        const glassY = y * zoom + bufferSize * zoom + borderWidth * 2;
+        stylesProps.backgroundPosition = "-".concat(glassX, "px -").concat(glassY, "px");
+      }
+      if (absRotationDeg === 180) {
+        // Adoption coordinates values to img sides
+        stylesProps.right = "".concat(x, "px");
+        stylesProps.bottom = "".concat(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 = "-".concat(glassX, "px -").concat(glassY, "px");
+      }
+    }
+
+    // Handle horizontal rotation cases
+    if (absRotationDeg === 90 || absRotationDeg === 270) {
+      if (rotationDeg === 90 || rotationDeg === -270) {
+        // Adoption coordinates values to img sides
+        stylesProps.bottom = "".concat(x, "px"); // x
+        stylesProps.left = "".concat(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 = "-".concat(glassY, "px -").concat(glassX, "px");
+      }
+      if (rotationDeg === 270 || rotationDeg === -90) {
+        // Adoption coordinates values to img sides
+        stylesProps.top = "".concat(x, "px"); // x
+        stylesProps.right = "".concat(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 = "-".concat(glassY, "px -").concat(glassX, "px");
+      }
+    }
+    setGlassPositionStyles(stylesProps);
+  }, [rotationDeg]);
+  const onMouseEnterHandler = useCallback(() => {
+    showMagnifier && setIsCursorInScopeOfImage(true);
+  }, [showMagnifier]);
+  const onMouseLeaveHandler = useCallback(e => {
+    if (e.relatedTarget !== glassRef.current) {
+      setIsCursorInScopeOfImage(false);
+    }
+  }, []);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "imgMagnifier",
+    style: {
+      transform: "rotateZ(".concat(rotationDeg, "deg)")
+    }
+  }, withMagnifier && showMagnifier && isCursorInScopeOfImage && /*#__PURE__*/React__default.createElement("div", {
+    ref: glassRef,
+    className: "imgMagnifier__glass",
+    style: {
+      borderRadius: "".concat(magnifierAppearance === magnifierAppearances.circle ? 50 : 0, "%"),
+      backgroundImage: "url(".concat(imgUrl, ")"),
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: "".concat(imgRef.current.clientWidth * zoom, "px ").concat(imgRef.current.clientHeight * zoom, "px"),
+      ...glassPositionStyles
+    },
+    onMouseLeave: onMouseLeaveHandler,
+    onMouseMove: onMouseMoveHandler
+  }), /*#__PURE__*/React__default.createElement("img", {
+    ref: imgRef,
+    src: imgUrl,
+    alt: name,
+    onMouseEnter: onMouseEnterHandler,
+    onMouseMove: e => showMagnifier && onMouseMoveHandler(e),
+    className: "imgMagnifier__img ".concat(className)
+  })));
+});
+Magnifier.propTypes = {
+  imgUrl: PropTypes.string.isRequired,
+  withRotation: PropTypes.bool,
+  withMagnifier: PropTypes.bool,
+  zoom: PropTypes.number,
+  showMagnifier: PropTypes.bool,
+  name: PropTypes.string,
+  className: PropTypes.string,
+  magnifierAppearance: PropTypes.oneOf(Object.keys(magnifierAppearances))
+};
+Magnifier.defaultProps = {
+  withRotation: false,
+  withMagnifier: false,
+  showMagnifier: false,
+  zoom: 1.5,
+  name: '',
+  className: '',
+  magnifierAppearance: magnifierAppearances.square
+};
+Magnifier.displayName = 'Magnifier';
+
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .imagePreview{display:flex;flex-direction:column;max-height:100%;max-width:100%;min-width:320px}[data-gene-ui-version=\"2.12.2\"] .imagePreview__close{display:flex}[data-gene-ui-version=\"2.12.2\"] .imagePreview.mobile-view .imagePreview__close{margin-left:auto}[data-gene-ui-version=\"2.12.2\"] [dir=rtl] .imagePreview.mobile-view .imagePreview__close{margin-left:0;margin-right:auto}[data-gene-ui-version=\"2.12.2\"] .imagePreview__header{align-items:center;display:flex;justify-content:space-between;padding:16px;width:100%}[data-gene-ui-version=\"2.12.2\"] .imagePreview.mobile-view .imagePreview__header{align-items:flex-start;flex-direction:column-reverse;padding:8px}[data-gene-ui-version=\"2.12.2\"] .imagePreview__infoWrapper{align-items:center;align-self:stretch;display:flex;max-width:calc(100% - 250px)}[data-gene-ui-version=\"2.12.2\"] .imagePreview.mobile-view .imagePreview__infoWrapper{max-width:100%}[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .imagePreview__info-center{justify-content:center}[data-gene-ui-version=\"2.12.2\"] .imagePreview__imgIcon{opacity:.8}[data-gene-ui-version=\"2.12.2\"] .imagePreview__sizes{display:flex}[data-gene-ui-version=\"2.12.2\"] .imagePreview__weight{opacity:.8;padding-right:8px}[data-gene-ui-version=\"2.12.2\"] .imagePreview__resolution{opacity:.8;padding-left:8px}[data-gene-ui-version=\"2.12.2\"] .imagePreview__resolution--divider{opacity:.8;padding-left:0}[data-gene-ui-version=\"2.12.2\"] .imagePreview__resolution--separate{margin:0 5px}[data-gene-ui-version=\"2.12.2\"] .imagePreview__options{align-items:center;display:flex}[data-gene-ui-version=\"2.12.2\"] .imagePreview.mobile-view .imagePreview__options{width:100%}[data-gene-ui-version=\"2.12.2\"] .imagePreview__magnifier{min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;padding-right:8px}[data-gene-ui-version=\"2.12.2\"] .imagePreview__rotate{display:flex}[data-gene-ui-version=\"2.12.2\"] .imagePreview__divider,[data-gene-ui-version=\"2.12.2\"] .imagePreview__divider-small{position:relative}[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] [dir=rtl] .imagePreview__divider-small{margin:0 5px}[data-gene-ui-version=\"2.12.2\"] .imagePreview.mobile-view .imagePreview__divider{margin-right:6px}[data-gene-ui-version=\"2.12.2\"] .imagePreview__icon{cursor:pointer;font-size:28px;font-weight:100;margin:6px}[data-gene-ui-version=\"2.12.2\"] .imagePreview.mobile-view .imagePreview__icon{margin-left:0}[data-gene-ui-version=\"2.12.2\"] .imagePreview__content{align-items:center;aspect-ratio:1;display:flex;justify-content:center}[data-gene-ui-version=\"2.12.2\"] .imagePreview__img{max-height:100%;max-width:100%}[data-gene-ui-version=\"2.12.2\"] [dir=rtl] .imagePreview__name{padding-right:8px}[data-gene-ui-version=\"2.12.2\"] .imagePreview.modal-view{height:100%;left:0;position:fixed;top:0;width:100%;z-index:500}[data-gene-ui-version=\"2.12.2\"] .imagePreview.modal-view .imagePreview__header{background:#000}[data-gene-ui-version=\"2.12.2\"] .imagePreview.modal-view .imagePreview__infoWrapper,[data-gene-ui-version=\"2.12.2\"] .imagePreview.modal-view .imagePreview__name{color:#fff}[data-gene-ui-version=\"2.12.2\"] .imagePreview.modal-view .imagePreview__sizes{color:#fff9}[data-gene-ui-version=\"2.12.2\"] .imagePreview.modal-view .imagePreview__options{color:#fff}[data-gene-ui-version=\"2.12.2\"] .imagePreview.modal-view .imagePreview__magnifier .switcher-element{background:#ffffff61}[data-gene-ui-version=\"2.12.2\"] .imagePreview.modal-view .imagePreview__magnifier .switcher-element.active{background:var(--hero)}[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .imagePreview.modal-view .imagePreview__divider-small:after{background:#ffffff4d}[data-gene-ui-version=\"2.12.2\"] .imagePreview.modal-view .imagePreview__content{height:100%;transform:translateZ(0);width:100%}[data-gene-ui-version=\"2.12.2\"] .imagePreview.modal-view .imagePreview__background{background-color:#000c;height:100%;position:absolute;width:100%}[data-gene-ui-version=\"2.12.2\"] .imagePreview.modal-view .imagePreview__img{margin:0 auto;max-height:calc(100vh - 10rem);max-width:calc(100vh - 10rem)}[data-gene-ui-version=\"2.12.2\"] .imgMagnifier{position:relative}[data-gene-ui-version=\"2.12.2\"] .imgMagnifier__glass{border:2px solid #000;cursor:none;height:150px;position:absolute;width:150px;z-index:999999}[data-gene-ui-version=\"2.12.2\"] .imgMagnifier__img{width:100%}";
+styleInject(css_248z);
+
+function ImagePreview(_ref) {
+  let {
+    name,
+    path,
+    onClose,
+    showSize,
+    isMobile,
+    withModal,
+    showRotate,
+    showDownload,
+    customHeaders,
+    showDimensions,
+    withMagnifier,
+    magnifierDefaultValue,
+    ...rest
+  } = _ref;
+  const magnifierRef = useRef();
+  const downloadImg = useImgDownload();
+  const [meta, setMeta] = useState({
+    size: 0,
+    width: 0,
+    height: 0
+  });
+  const [isMagnifierOn, setIsMagnifierOn] = useState(magnifierDefaultValue);
+  const [imageData, setImageData] = useState('');
+  const nameRef = useRef(null);
+  const isTruncated = useEllipsisDetection(nameRef);
+  useEffect(() => {
+    !!path && fetch(path, {
+      headers: {
+        ...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 => ({
+        ...val,
+        width: img.naturalWidth,
+        height: img.naturalHeight
+      }));
+      setMeta(val => ({
+        ...val,
+        size: buffer.byteLength
+      }));
+      setImageData(img.src);
+    });
+  }, [path]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classnames('imagePreview', {
+      'modal-view': withModal,
+      'mobile-view': isMobile
+    })
+  }, rest), /*#__PURE__*/React__default.createElement("div", {
+    className: "imagePreview__header"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "imagePreview__infoWrapper"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-Image",
+    className: "imagePreview__icon imagePreview__imgIcon"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('imagePreview__info', {
+      'imagePreview__info-center': !showSize && !showDimensions
+    })
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    text: name,
+    isVisible: isTruncated
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "imagePreview__name ellipsis-text",
+    ref: nameRef
+  }, name)), /*#__PURE__*/React__default.createElement("div", {
+    className: "imagePreview__sizes"
+  }, showSize && /*#__PURE__*/React__default.createElement("span", {
+    className: "imagePreview__weight"
+  }, fileSizeDisplay(meta.size)), showSize && showDimensions && /*#__PURE__*/React__default.createElement("div", {
+    className: "imagePreview__divider-small"
+  }), showDimensions && /*#__PURE__*/React__default.createElement("span", {
+    className: classnames('imagePreview__resolution', {
+      'imagePreview__resolution--divider': !showSize
+    })
+  }, /*#__PURE__*/React__default.createElement("span", null, meta.width), /*#__PURE__*/React__default.createElement("span", {
+    className: "imagePreview__resolution--separate"
+  }, "x"), /*#__PURE__*/React__default.createElement("span", null, meta.height))))), /*#__PURE__*/React__default.createElement("div", {
+    className: "imagePreview__options"
+  }, withMagnifier && /*#__PURE__*/React__default.createElement("div", {
+    className: "imagePreview__magnifier"
+  }, /*#__PURE__*/React__default.createElement(Switcher, {
+    defaultChecked: magnifierDefaultValue,
+    value: isMagnifierOn,
+    onChange: e => setIsMagnifierOn(e.currentTarget.checked),
+    labelPosition: "left",
+    label: "Magnifier"
+  })), showRotate && /*#__PURE__*/React__default.createElement("div", {
+    className: "imagePreview__rotate"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-rotate-left",
+    className: "imagePreview__icon",
+    onClick: () => magnifierRef.current.rotate(-90)
+  }), /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-rotate-right",
+    className: "imagePreview__icon",
+    onClick: () => magnifierRef.current.rotate(90)
+  })), showDownload && /*#__PURE__*/React__default.createElement("div", {
+    className: "imagePreview__download"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-download",
+    className: "imagePreview__icon",
+    onClick: () => downloadImg(path, name, customHeaders)
+  })), withModal && /*#__PURE__*/React__default.createElement("div", {
+    className: "imagePreview__close"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "imagePreview__divider"
+  }), /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-close",
+    className: "imagePreview__icon",
+    onClick: onClose
+  })))), /*#__PURE__*/React__default.createElement("div", {
+    className: "imagePreview__content"
+  }, withModal ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "imagePreview__background",
+    onClick: onClose
+  }), imageData && /*#__PURE__*/React__default.createElement(Magnifier, {
+    ref: magnifierRef,
+    imgUrl: imageData,
+    name: name,
+    zoom: 2,
+    showMagnifier: isMagnifierOn,
+    className: "imagePreview__img",
+    withRotation: true,
+    withMagnifier: true
+  })) : imageData && /*#__PURE__*/React__default.createElement(Magnifier, {
+    ref: magnifierRef,
+    imgUrl: imageData,
+    name: name,
+    zoom: 2,
+    showMagnifier: isMagnifierOn,
+    className: "imagePreview__img",
+    withRotation: true,
+    withMagnifier: true
+  })));
+}
+ImagePreview.defaultProps = {
+  onClose: noop,
+  showSize: true,
+  isMobile: false,
+  withModal: true,
+  showRotate: true,
+  showDownload: true,
+  withMagnifier: false,
+  showDimensions: true,
+  magnifierDefaultValue: false
+};
+ImagePreview.propTypes = {
+  /**
+   * Image file display name
+   */
+  name: PropTypes.string,
+  /**
+   * Image path to display
+   */
+  path: PropTypes.string.isRequired,
+  /**
+   * Event fires when click on close button
+   */
+  onClose: PropTypes.func,
+  /**
+   * Need to size or not
+   */
+  showSize: PropTypes.bool,
+  /**
+   * Need to download or not
+   */
+  showDownload: PropTypes.bool,
+  /**
+   * Need to rotate or not
+   */
+  showRotate: PropTypes.bool,
+  /**
+   * Need to dimensions or not
+   */
+  showDimensions: PropTypes.bool,
+  /**
+   * With magnifier functionality
+   */
+  withMagnifier: PropTypes.bool,
+  /**
+   * modal mode
+   */
+  withModal: PropTypes.bool,
+  /**
+   * Default magnifier Value switched On
+   */
+  magnifierDefaultValue: PropTypes.bool,
+  /**
+   * This is for fetch image for example through this prop you can pass token.
+   * Provide an Object that will spread in Request Headers:{...customHeaders} in second parameter for fetch function.
+   * For example { 'Content-Type': 'application/json'} it will convert fetch(URL,{headers{'Content-Type': 'application/json'}})
+   */
+  customHeaders: PropTypes.object,
+  /**
+   * The prop is responsible for header view and alignment for mobile device
+   */
+  isMobile: PropTypes.bool
+};
+
+function ImagePreviewWrapper(_ref) {
+  let {
+    withModal,
+    ...restProps
+  } = _ref;
+  return withModal ? /*#__PURE__*/React__default.createElement(Portal, {
+    isOpen: true
+  }, /*#__PURE__*/React__default.createElement(ImagePreview, _extends({}, restProps, {
+    withModal: withModal
+  }))) : /*#__PURE__*/React__default.createElement(ImagePreview, _extends({}, restProps, {
+    withModal: withModal
+  }));
+}
+ImagePreviewWrapper.defaultProps = {
+  onClose: noop,
+  showSize: true,
+  withModal: true,
+  showRotate: true,
+  showDownload: true,
+  withMagnifier: false,
+  showDimensions: true,
+  magnifierDefaultValue: false
+};
+ImagePreviewWrapper.propTypes = {
+  /**
+   * Image file display name
+   */
+  name: PropTypes.string,
+  /**
+   * Image path to display
+   */
+  path: PropTypes.string.isRequired,
+  /**
+   * Event fires when click on close button
+   */
+  onClose: PropTypes.func,
+  /**
+   * Need to size or not
+   */
+  showSize: PropTypes.bool,
+  /**
+   * Need to download or not
+   */
+  showDownload: PropTypes.bool,
+  /**
+   * Need to rotate or not
+   */
+  showRotate: PropTypes.bool,
+  /**
+   * Need to dimensions or not
+   */
+  showDimensions: PropTypes.bool,
+  /**
+   * With magnifier functionality
+   */
+  withMagnifier: PropTypes.bool,
+  /**
+   * default Magnifier switched On
+   */
+  magnifierDefaultValue: PropTypes.bool,
+  /**
+   * modal mode
+   */
+  withModal: PropTypes.bool,
+  /**
+   * This is for fetch image for example through this prop you can pass token.
+   * Provide an Object that will spread in Request Headers:{...customHeaders} in second parameter for fetch function.
+   * For example { 'Content-Type': 'application/json'} it will convert fetch(URL,{headers{'Content-Type': 'application/json'}})
+   */
+  customHeaders: PropTypes.object
+};
+ImagePreviewWrapper.displayName = 'ImagePreview';
+
+export { ImagePreviewWrapper as default };

package/{KeyValue.js → KeyValue/index.js}

@@ -1,13 +1,12 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default from 'react';
-import { p as propTypesExports } from './index-e0af0caf.js';
-import { c as classnames } from './index-6ff23041.js';
-import Icon from './Icon.js';
-import { keyValueConfig } from './configs.js';
-import './globalStyling-9c60a159.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import { k as keyValueConfig } from '../configs-fed6ac34.js';
+import Icon from '../Icon/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
 
-var css_248z = "[data-gene-ui-version=\"1.0.0\"] .geneKeyValue{align-items:flex-start;display:flex;flex-wrap:wrap;width:100%}[data-gene-ui-version=\"1.0.0\"] .geneKeyValue--horizontal{align-items:center;flex-wrap:nowrap}[data-gene-ui-version=\"1.0.0\"] .geneKeyValue__icon{padding:0 0 0 8px}[data-gene-ui-version=\"1.0.0\"] .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=\"1.0.0\"] .geneKeyValue__label--horizontal{flex:none;margin:0 0 0 1rem;max-width:50%;width:auto}[data-gene-ui-version=\"1.0.0\"] .geneKeyValue__value{font-size:14px;font-weight:600;line-height:24px;margin:0 1rem;max-width:100%;width:100%}[data-gene-ui-version=\"1.0.0\"] .geneKeyValue__value--horizontal{margin:0 1rem;max-width:50%}[data-gene-ui-version=\"1.0.0\"] .geneKeyValue__iconWrapper+p+p:not(.geneKeyValue__value--horizontal){margin:0 3.2rem 0 4.2rem}[data-gene-ui-version=\"1.0.0\"] [dir=rtl] .geneKeyValue__iconWrapper+p+p:not(.geneKeyValue__value--horizontal){margin:0 3.2rem 0 0}[data-gene-ui-version=\"1.0.0\"] [dir=rtl] .geneKeyValue__label{direction:ltr;margin:0 1rem 1rem 0}[data-gene-ui-version=\"1.0.0\"] [dir=rtl] .geneKeyValue__label--horizontal{margin:0 0 0 1rem}[data-gene-ui-version=\"1.0.0\"] [dir=rtl] .geneKeyValue__value{direction:ltr}[data-gene-ui-version=\"1.0.0\"] [dir=rtl] .geneKeyValue__iconWrapper+p:not(.geneKeyValue__label--horizontal){margin:0 0 1rem}";
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .geneKeyValue{align-items:flex-start;display:flex;flex-wrap:wrap;width:100%}[data-gene-ui-version=\"2.12.2\"] .geneKeyValue--horizontal{align-items:center;flex-wrap:nowrap}[data-gene-ui-version=\"2.12.2\"] .geneKeyValue__icon{padding:0 0 0 8px}[data-gene-ui-version=\"2.12.2\"] .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.12.2\"] .geneKeyValue__label--horizontal{flex:none;margin:0 0 0 1rem;max-width:50%;width:auto}[data-gene-ui-version=\"2.12.2\"] .geneKeyValue__value{font-size:14px;font-weight:600;line-height:24px;margin:0 1rem;max-width:100%;width:100%}[data-gene-ui-version=\"2.12.2\"] .geneKeyValue__value--horizontal{margin:0 1rem;max-width:50%}[data-gene-ui-version=\"2.12.2\"] .geneKeyValue__iconWrapper+p+p:not(.geneKeyValue__value--horizontal){margin:0 3.2rem 0 4.2rem}[data-gene-ui-version=\"2.12.2\"] [dir=rtl] .geneKeyValue__iconWrapper+p+p:not(.geneKeyValue__value--horizontal){margin:0 3.2rem 0 0}[data-gene-ui-version=\"2.12.2\"] [dir=rtl] .geneKeyValue__label{direction:ltr;margin:0 1rem 1rem 0}[data-gene-ui-version=\"2.12.2\"] [dir=rtl] .geneKeyValue__label--horizontal{margin:0 0 0 1rem}[data-gene-ui-version=\"2.12.2\"] [dir=rtl] .geneKeyValue__value{direction:ltr}[data-gene-ui-version=\"2.12.2\"] [dir=rtl] .geneKeyValue__iconWrapper+p:not(.geneKeyValue__label--horizontal){margin:0 0 1rem}";
 styleInject(css_248z);
 
 // TODO need to refine where is using restProps
@@ -40,19 +39,19 @@ KeyValue.propTypes = {
   /**
    * Label for 'KeyValue'.
    */
-  label: propTypesExports.node.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Value for 'KeyValue'.
    */
-  value: propTypesExports.node,
+  value: PropTypes.node,
   /**
    * External/Additional className that can be added to 'KeyValue' component.
    */
-  className: propTypesExports.string,
+  className: PropTypes.string,
   /**
    * The way how the KeyValue should be displayed.
    */
-  appearance: propTypesExports.oneOf(Object.keys(keyValueConfig.appearance))
+  appearance: PropTypes.oneOf(Object.keys(keyValueConfig.appearance))
 };
 KeyValue.defaultProps = {
   value: '',

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 SoftConstruct
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Label/index.js

@@ -0,0 +1,57 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .label{display:inline-block;font-weight:400;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}[data-gene-ui-version=\"2.12.2\"] .label.bold{font-weight:bolder}[data-gene-ui-version=\"2.12.2\"] .label.semiBold{font-weight:700}";
+styleInject(css_248z);
+
+const labels = {
+  headingExtraLarge: 'h1',
+  headingLarge: 'h1',
+  headingBig: 'h2',
+  heading: 'h3',
+  bodyBig: 'h4',
+  body: 'h5',
+  bodySmall: 'h6',
+  content: 'p'
+};
+function Label(_ref) {
+  let {
+    children,
+    className,
+    size,
+    font,
+    ...restProps
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(labels[size], {
+    className: classnames('label', className, font, {
+      large: size === 'headingExtraLarge'
+    }),
+    ...restProps
+  }, children);
+}
+Label.propTypes = {
+  /**
+   * Any valid React node.
+   */
+  children: PropTypes.string.isRequired,
+  /**
+   * Label sizing
+   */
+  size: PropTypes.oneOf(['headingExtraLarge', 'headingLarge', 'headingBig', 'heading', 'bodyBig', 'body', 'bodySmall', 'content']),
+  /**
+   * Label font to be used
+   */
+  font: PropTypes.oneOf(['regular', 'semiBold', 'bold']),
+  /**
+   * Addional className
+   */
+  className: PropTypes.string
+};
+Label.defaultProps = {
+  size: 'content',
+  font: 'regular'
+};
+
+export { Label as default };