@geneui/components 3.0.0-next-06dadf3-29102024 → 3.0.0-next-63cb5e7-01112024

package/ValidatableTextInput/index.js

@@ -1,167 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { forwardRef, useState, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { n as noop } from '../index-5f37f281.js';
-import useMount from '../hooks/useMount.js';
-import '../configs-00612ce0.js';
-import ExtendedInput from '../ExtendedInput/index.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../index-031ff73c.js';
-import '../hooks/useDeviceType.js';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../useEllipsisDetection-c1c9ad94.js';
-import '../Icon/index.js';
-import '../style-inject.es-746bb8ed.js';
-import '../SuggestionList/index.js';
-import '../hooks/useKeyDown.js';
-import '../hooks/useClickOutside.js';
-import '../config-1053d64d.js';
-import '../Scrollbar/index.js';
-import '../callAfterDelay-7272faca.js';
-import '../index-c7646e48.js';
-import '../tslib.es6-f211516f.js';
-import '../GeneUIProvider/index.js';
-
-const emailRegExp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-function checkValidation(required, isValid, maxLength, minLength, isEmail) {
-  let value = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '';
-  const valueWithoutSpaces = value ? value.toString().trim() : value;
-  if (isValid === false) return {
-    key: 'customValidation',
-    isValid: false
-  };
-  if (minLength && valueWithoutSpaces.length <= minLength) return {
-    key: 'minLength',
-    isValid: false
-  };
-  if (maxLength && valueWithoutSpaces.length >= maxLength) return {
-    key: 'maxLength',
-    isValid: false
-  };
-  if (valueWithoutSpaces.length > 0 && isEmail && !emailRegExp.test(valueWithoutSpaces)) return {
-    key: 'isEmail',
-    isValid: false
-  };
-  if (required && valueWithoutSpaces.length === 0) return {
-    key: 'required',
-    isValid: false
-  };
-  return {
-    key: null,
-    isValid: true
-  };
-}
-const TextInput = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    onChange,
-    value,
-    isValid,
-    onBlur,
-    required,
-    maxLength,
-    minLength,
-    isEmail,
-    isFieldValid,
-    forceAllowValidation,
-    defaultValue,
-    ...restProps
-  } = props;
-  const isControlled = 'value' in props && typeof value !== 'undefined';
-  const [validationState, setValidationState] = useState(true);
-  const [allowValidation, setAllowValidation] = useState(false);
-  const validate = useCallback(defaultValue => checkValidation(required, isValid, maxLength, minLength, isEmail, value || defaultValue).isValid, [value, required, isValid, maxLength, minLength, isEmail]);
-  const handleChange = useCallback(e => {
-    const {
-      value
-    } = e.target;
-    const validation = checkValidation(required, isValid, maxLength, minLength, isEmail, value);
-    setValidationState(validation.isValid);
-    onChange && onChange(e, validation.isValid, validation.key);
-  }, [onChange, required, isValid, maxLength, minLength, isEmail]);
-
-  // we use this because need to show field validation after onBlur
-  const handleBlur = useCallback(e => {
-    setAllowValidation(true);
-    onBlur(e);
-  }, [onBlur]);
-  useEffect(() => {
-    isControlled && setValidationState(validate());
-  }, [isControlled, validate]);
-
-  // need this for handling user's `isValid` prop
-  useEffect(() => {
-    setValidationState(isValid);
-  }, [isValid]);
-
-  // call function when validation state changes
-  useEffect(() => {
-    isFieldValid(validationState);
-  }, [validationState]);
-
-  // set Allow validation true if submit button clicked
-  useEffect(() => {
-    forceAllowValidation && setAllowValidation(true);
-  }, [forceAllowValidation]);
-  useMount(() => setValidationState(validate(defaultValue)));
-  return /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({}, restProps, {
-    ref: ref,
-    value: value,
-    isValid: !allowValidation || validationState,
-    onChange: handleChange,
-    required: required,
-    defaultValue: defaultValue,
-    onBlur: handleBlur
-  }));
-});
-TextInput.propTypes = {
-  /**
-   * Value for text input
-   */
-  value: PropTypes.string,
-  /**
-   * Callback fires when field changes
-   */
-  onChange: PropTypes.func,
-  /**
-   * Callback fires when field blured
-   */
-  onBlur: PropTypes.func,
-  /**
-   *  Define is field required or no.
-   */
-  required: PropTypes.bool,
-  /**
-   * Is field accept only email or no
-   */
-  isEmail: PropTypes.bool,
-  /**
-   * Maximum length of value
-   */
-  maxLength: PropTypes.number,
-  /**
-   * Minimum length of value
-   */
-  minLength: PropTypes.number,
-  /**
-   * Callback fires when field validation state changes
-   */
-  isFieldValid: PropTypes.func,
-  /**
-   * Additional validation state
-   */
-  isValid: PropTypes.bool,
-  /**
-   * Allow validation without onBlur, validate field when mount
-   */
-  forceAllowValidation: PropTypes.bool
-};
-TextInput.defaultProps = {
-  isValid: true,
-  isFieldValid: noop,
-  onBlur: noop
-};
-
-export { TextInput as default };

package/ValidatableTimeInput/index.js

@@ -1,174 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { forwardRef, useState, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { d as dayjsWithPlugins } from '../dateValidation-67caec66.js';
-import { g as getBrowserDateFormat } from '../localization-4ba17032.js';
-import { c as checkTimeValidation } from '../checkTimeValidation-e56771be.js';
-import 'react-dom';
-import ExtendedInput from '../ExtendedInput/index.js';
-import '../_commonjsHelpers-24198af3.js';
-import '../index-031ff73c.js';
-import '../configs-00612ce0.js';
-import '../index-5f37f281.js';
-import '../hooks/useDeviceType.js';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../useEllipsisDetection-c1c9ad94.js';
-import '../Icon/index.js';
-import '../style-inject.es-746bb8ed.js';
-import '../SuggestionList/index.js';
-import '../hooks/useKeyDown.js';
-import '../hooks/useClickOutside.js';
-import '../config-1053d64d.js';
-import '../Scrollbar/index.js';
-import '../callAfterDelay-7272faca.js';
-import '../index-c7646e48.js';
-import '../tslib.es6-f211516f.js';
-import '../GeneUIProvider/index.js';
-
-const nonLettersRegex = /[\W_]+/g;
-const getFormatSeparator = format => format[format.search(nonLettersRegex)];
-const isUpperCase = str => str === str.toUpperCase();
-const isLowerCase = str => str === str.toLowerCase();
-
-/*
- * Splitting time to { format, value } object
- * For checking is value fit format
- * Formats are taken from day.js date formats list
- * */
-function splitTimeToObjects(dateParts, formatParts, meridiemValue, meridiemFormat) {
-  const hourFormats = ['H', 'HH', 'h', 'hh'];
-  const minuteFormats = ['m', 'mm'];
-  const secondFormats = ['s', 'ss'];
-  const hour = {};
-  const minute = {};
-  const second = {};
-  const meridiem = {};
-  formatParts.forEach((item, index) => {
-    if (hourFormats.includes(item)) {
-      hour.value = dateParts[index];
-      hour.format = item;
-    } else if (minuteFormats.includes(item)) {
-      minute.value = dateParts[index];
-      minute.format = item;
-    } else if (secondFormats.includes(item)) {
-      second.value = dateParts[index];
-      second.format = item;
-    }
-  });
-  if (meridiemFormat || meridiemValue) {
-    meridiem.value = meridiemValue;
-    meridiem.format = meridiemFormat;
-  }
-  return {
-    hour,
-    minute,
-    second,
-    meridiem
-  };
-}
-const isHourInRightFormat = _ref => {
-  let {
-    value,
-    format
-  } = _ref;
-  return value && (format === 'H' && value.length <= 2 && Number(value[0]) !== 0 || format === 'h' && value.length <= 2 && Number(value[0]) !== 0 || format === 'HH' && value.length === 2 || format === 'hh' && value.length === 2);
-};
-const isMinuteInRightFormat = _ref2 => {
-  let {
-    value,
-    format
-  } = _ref2;
-  return value && (format === 'm' && value.length <= 2 && (value.length !== 2 || Number(value[0]) !== 0) || format === 'mm' && value.length === 2);
-};
-const isSecondInRightFormat = _ref3 => {
-  let {
-    value,
-    format
-  } = _ref3;
-  return !format || value && (format === 's' && value.length <= 2 && (value.length !== 2 || Number(value[0]) !== 0) || format === 'ss' && value.length === 2);
-};
-const isMeridiemInRightFormat = _ref4 => {
-  let {
-    value,
-    format
-  } = _ref4;
-  return !(format || value) || value && (format === 'A' && isUpperCase(value) || format === 'a' && isLowerCase(value));
-};
-const checkTimeFormat = _ref5 => {
-  let {
-    hour,
-    minute,
-    second,
-    meridiem
-  } = _ref5;
-  return isHourInRightFormat(hour) && isMinuteInRightFormat(minute) && isSecondInRightFormat(second) && isMeridiemInRightFormat(meridiem);
-};
-function validateField() {
-  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  let required = arguments.length > 1 ? arguments[1] : undefined;
-  let customValidation = arguments.length > 2 ? arguments[2] : undefined;
-  let min = arguments.length > 3 ? arguments[3] : undefined;
-  let max = arguments.length > 4 ? arguments[4] : undefined;
-  let format = arguments.length > 5 ? arguments[5] : undefined;
-  const date = dayjsWithPlugins(value, format);
-  const separator = getFormatSeparator(format);
-  const splittedDate = value.split(' ');
-  const splittedFormat = format.split(' ');
-  const dateParts = splittedDate[0].split(separator);
-  const formatParts = splittedFormat[0].split(separator);
-  const timeObject = splitTimeToObjects(dateParts, formatParts, splittedDate[1], splittedFormat[1]);
-  const isValidFormat = checkTimeFormat(timeObject);
-  const isValidDate = checkTimeValidation(timeObject);
-  const isSameLength = dateParts.length === formatParts.length;
-  const isBefore = !max || date.isBefore(dayjsWithPlugins(max, format));
-  const isAfter = !min || date.isAfter(dayjsWithPlugins(min, format));
-  return (!customValidation || customValidation(value)) && (!required || value.length) && (!required && !value.length || isValidDate && isSameLength && isValidFormat && isBefore && isAfter);
-}
-const DateInput = /*#__PURE__*/forwardRef((_ref6, ref) => {
-  let {
-    onChange,
-    value,
-    customValidation,
-    required,
-    getInitialState,
-    min,
-    max,
-    format,
-    ...restProps
-  } = _ref6;
-  const [isValid, setValidation] = useState(() => validateField(value, required, customValidation, min, max, format));
-  const handleChange = useCallback(e => {
-    const {
-      value
-    } = e.target;
-    const isValid = validateField(value, required, customValidation, min, max, format);
-    setValidation(isValid);
-    onChange && onChange(e, isValid);
-  }, [onChange, required, customValidation, min, max, format]);
-  useEffect(() => {
-    getInitialState && getInitialState(isValid);
-  }, [getInitialState, isValid]);
-  useEffect(() => setValidation(validateField(value, required, customValidation, min, max, format)), [required, min, max, format, value, customValidation]);
-  return /*#__PURE__*/React__default.createElement(ExtendedInput, _extends({
-    ref: ref,
-    value: value,
-    isValid: isValid,
-    onChange: handleChange
-  }, restProps));
-});
-DateInput.propTypes = {
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  required: PropTypes.bool,
-  getInitialState: PropTypes.func,
-  customValidation: PropTypes.func,
-  min: PropTypes.string,
-  max: PropTypes.string,
-  format: PropTypes.string
-};
-DateInput.defaultProps = {
-  format: getBrowserDateFormat()
-};
-
-export { DateInput as default };

package/ValidatableUploader/index.js

@@ -1,98 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { forwardRef, useState, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import useMount from '../hooks/useMount.js';
-import '../configs-00612ce0.js';
-import Uploader from '../Uploader/index.js';
-import '../index-5f37f281.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../index-031ff73c.js';
-import '../Button/index.js';
-import '../tslib.es6-f211516f.js';
-import '../Icon/index.js';
-import '../style-inject.es-746bb8ed.js';
-import '../ExtendedInput/index.js';
-import '../hooks/useDeviceType.js';
-import '../hooks/useWindowSize.js';
-import '../hooks/useDebounce.js';
-import '../useEllipsisDetection-c1c9ad94.js';
-import '../SuggestionList/index.js';
-import '../hooks/useKeyDown.js';
-import '../hooks/useClickOutside.js';
-import '../config-1053d64d.js';
-import '../Scrollbar/index.js';
-import '../callAfterDelay-7272faca.js';
-import '../index-c7646e48.js';
-import '../GeneUIProvider/index.js';
-import '../Grid/index.js';
-import '../hooks/useWidth.js';
-import '../hooks/useImgDownload.js';
-import '../BusyLoader/index.js';
-import '../Image/index.js';
-import '../Empty/index.js';
-import '../Checkbox/index.js';
-import '../checkboxRadioSwitcher-5b69d7bd.js';
-import '../guid-8ddf77b3.js';
-
-function checkValidation(required, isValid) {
-  let value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  if (isValid === false) return {
-    key: 'customValidation',
-    isValid: false
-  };
-  if (required && value.length === 0) return {
-    key: 'required',
-    isValid: false
-  };
-  return {
-    key: null,
-    isValid: true
-  };
-}
-const UploaderField = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    customValidation,
-    onChange,
-    required,
-    forceAllowValidation,
-    isValid,
-    value,
-    defaultValue,
-    ...restProps
-  } = _ref;
-  const [validationState, setValidationState] = useState(true);
-  const [allowValidation, setAllowValidation] = useState(false);
-  const validate = useCallback(defaultValue => checkValidation(required, isValid, value || defaultValue).isValid, [value, required, isValid, defaultValue]);
-  const handleChange = useCallback(e => {
-    const {
-      value
-    } = e;
-    const isValid = checkValidation(required, isValid, value);
-    setValidationState(isValid);
-    onChange && onChange(e, isValid);
-  }, [onChange, isValid, required, customValidation]);
-
-  // set Allow validation true if submit button clicked
-  useEffect(() => {
-    forceAllowValidation && setAllowValidation(true);
-  }, [forceAllowValidation]);
-  useMount(() => setValidationState(validate(defaultValue)));
-  return /*#__PURE__*/React__default.createElement(Uploader, _extends({
-    ref: ref,
-    isValid: !allowValidation || validationState,
-    onChange: handleChange,
-    required: required
-  }, restProps));
-});
-UploaderField.propTypes = {
-  onChange: PropTypes.func,
-  customValidation: PropTypes.func,
-  /**
-   * Additional validation state
-   */
-  isValid: PropTypes.bool
-};
-
-export { UploaderField as default };

package/Widget/index.js

@@ -1,225 +0,0 @@
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { c as classnames } from '../index-031ff73c.js';
-import { w as widgetConfig } from '../configs-00612ce0.js';
-import Icon from '../Icon/index.js';
-import KeyValue from '../KeyValue/index.js';
-import ModuleTitle from '../ModuleTitle/index.js';
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import '../tslib.es6-f211516f.js';
-import '../index-5f37f281.js';
-import '../dateValidation-67caec66.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../index-c7646e48.js';
-import '../GeneUIProvider/index.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .widget-holder{background:var(--background);border-radius:2rem;height:6rem;width:100%}[data-gene-ui-version=\"2.16.4\"] .widget-holder.s-small{--font-size:1.6rem;border-radius:1rem}[data-gene-ui-version=\"2.16.4\"] .widget-holder.s-medium{border-radius:1rem;height:8rem}[data-gene-ui-version=\"2.16.4\"] .widget-holder.s-big{height:11rem}[data-gene-ui-version=\"2.16.4\"] .widget-holder .no-data{opacity:.5}[data-gene-ui-version=\"2.16.4\"] .widget-holder.shadow{box-shadow:0 .3rem .6rem 0 #0000000d}[data-gene-ui-version=\"2.16.4\"] .widget-holder.border{border:1px solid rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.16.4\"] .widget-holder .module-title{text-transform:uppercase}[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid{display:grid;grid-template-areas:\"image head\" \"image text\";grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr}[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid.t-default{padding-inline:2rem}[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid.t-default .module-title{font-size:1.2rem}[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid.t-default .module-header{padding:0}[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid.t-default .image{padding-inline-end:3.5rem}[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid.t-default .image img{height:5rem;width:5rem}[data-gene-ui-version=\"2.16.4\"] .s-small.widget-holder.widget-grid.t-default .image{padding-inline-end:1.5rem}[data-gene-ui-version=\"2.16.4\"] .s-small.widget-holder.widget-grid.t-default .image img{height:3.4rem;width:3.4rem}[data-gene-ui-version=\"2.16.4\"] .s-medium.widget-holder.widget-grid.t-default .image{padding-inline-end:2rem}[data-gene-ui-version=\"2.16.4\"] .s-medium.widget-holder.widget-grid.t-default .image img{height:4.8rem;width:4.8rem}[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid.t-compact .text.key-values,[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid.t-default .text.key-values{display:grid;gap:1.6rem;grid-template-columns:.5fr .4fr 1fr}[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid.t-compact .text .widget-timeline-holder,[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid.t-default .text .widget-timeline-holder{align-items:center;border-left:1px solid rgba(var(--background-sc-rgb),.05);display:flex;justify-content:space-between;text-align:center}[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid.t-compact{grid-template-areas:\"head head\" \"image text\";grid-template-rows:auto 1fr}[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid.t-compact .image{padding-inline-end:1.5rem}[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid.t-compact .image img{height:4.8rem;width:4.8rem}[data-gene-ui-version=\"2.16.4\"] .s-small.widget-holder.widget-grid.t-compact .image{display:none}[data-gene-ui-version=\"2.16.4\"] .s-medium.widget-holder.widget-grid.t-compact .image{padding-inline:2rem}[data-gene-ui-version=\"2.16.4\"] .s-medium.widget-holder.widget-grid.t-compact .image img{height:3rem;width:3rem}[data-gene-ui-version=\"2.16.4\"] .s-big.widget-holder.widget-grid.t-compact .image{padding-inline:2rem}[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid.t-compact .text{padding:0 2rem}[data-gene-ui-version=\"2.16.4\"] .widget-holder.widget-grid.t-compact .text:not(.bobol)>p{text-align:end}[data-gene-ui-version=\"2.16.4\"] .widget-holder>li{align-items:center;display:flex}[data-gene-ui-version=\"2.16.4\"] .widget-holder>li.image{grid-area:image;justify-content:center}[data-gene-ui-version=\"2.16.4\"] .widget-holder>li.head{grid-area:head;overflow:hidden;padding:0 0 1px}[data-gene-ui-version=\"2.16.4\"] .widget-holder>li.text{grid-area:text;overflow:hidden}[data-gene-ui-version=\"2.16.4\"] .widget-holder>li.text>p{flex:auto;font:700 var(--font-size,1.8rem)/3rem var(--font-family)}[data-gene-ui-version=\"2.16.4\"] .widget-holder>li.text .icon{flex-shrink:0}[data-gene-ui-version=\"2.16.4\"] .widget-holder.t-minimal{align-items:center;border-radius:1rem;display:flex;flex-direction:column;justify-content:center;padding:0 .8rem;text-align:center}[data-gene-ui-version=\"2.16.4\"] .widget-holder.t-minimal.shadow{box-shadow:0 .2rem .4rem 0 #0000000d}[data-gene-ui-version=\"2.16.4\"] .widget-holder.t-minimal>li{justify-content:center;width:100%}[data-gene-ui-version=\"2.16.4\"] .widget-holder.t-minimal>li:first-child{color:rgba(var(--background-sc-rgb),.61);font:600 1.2rem/1.6rem var(--font-family)}[data-gene-ui-version=\"2.16.4\"] .widget-holder.t-minimal>li:nth-child(2){font-weight:600;margin:1rem 0 0}[data-gene-ui-version=\"2.16.4\"] .widget-holder.t-minimal>li>i{border-radius:100%;display:block;flex-shrink:0;height:.8rem;width:.8rem}html:not([dir=rtl]) .widget-holder.t-minimal>li>i{margin-right:.8rem}html[dir=rtl] .widget-holder.t-minimal>li>i{margin-left:.8rem}[data-gene-ui-version=\"2.16.4\"] .widget-holder.t-colorful{border:1px solid var(--hero);display:block;max-width:100%;min-width:14rem;padding:1rem 1.4rem .8rem;position:relative;width:auto}[data-gene-ui-version=\"2.16.4\"] .widget-holder.t-colorful:before{background:var(--hero);border-radius:inherit;content:\"\";display:block;height:100%;left:0;opacity:.03;position:absolute;top:0;width:100%}[data-gene-ui-version=\"2.16.4\"] .widget-holder.t-colorful>li{position:relative}[data-gene-ui-version=\"2.16.4\"] .widget-holder.t-colorful .widget-c-title{font:600 1.2rem/1.6rem var(--font-family);margin:0 0 .4rem;opacity:.8}[data-gene-ui-version=\"2.16.4\"] .widget-holder.t-colorful .widget-c-text{font:700 1.6rem/2.2rem var(--font-family)}[data-gene-ui-version=\"2.16.4\"] .comparison-icons-holder{--status-color:inherit;align-items:center;color:var(--status-color);display:flex;flex-shrink:0;font:700 1.4rem/1.8rem var(--font-family);margin-inline-start:.6rem;transition:color .4s}[data-gene-ui-version=\"2.16.4\"] .comparison-icons-holder.cs-up{--status-color:#51cf78}[data-gene-ui-version=\"2.16.4\"] .comparison-icons-holder.cs-up .bc-icon-comparison-down{color:rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.4\"] .comparison-icons-holder.cs-down{--status-color:#e84855}[data-gene-ui-version=\"2.16.4\"] .comparison-icons-holder.cs-down .bc-icon-comparison-up{color:rgba(var(--background-sc-rgb),.1)}[data-gene-ui-version=\"2.16.4\"] .comparison-icons-holder .icon+.icon{left:0;position:absolute;top:0}[data-gene-ui-version=\"2.16.4\"] .comparison-icons{position:relative}";
-styleInject(css_248z);
-
-function Widget(_ref) {
-  let {
-    type,
-    img,
-    title,
-    text,
-    color,
-    headerActions,
-    noDataText,
-    noData,
-    className,
-    withShadow,
-    withBorder,
-    titleIcon,
-    showComparisonIcons,
-    comparisonText,
-    comparisonStatus,
-    size,
-    titleProps,
-    keyValues,
-    ...restProps
-  } = _ref;
-  const showKeyValues = useMemo(() => !!keyValues.length && size === widgetConfig.size[2], [size, keyValues]);
-  return /*#__PURE__*/React__default.createElement("ul", _extends({}, restProps, {
-    className: classnames(className, 'widget-holder', "t-".concat(type), "s-".concat(size), {
-      'widget-grid': type !== widgetConfig.type[2] && type !== widgetConfig.type[3],
-      shadow: withShadow,
-      border: withBorder
-    }),
-    style: {
-      '--hero': color
-    }
-  }), type === widgetConfig.type[2] ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("i", {
-    style: {
-      background: color
-    }
-  }), /*#__PURE__*/React__default.createElement("span", {
-    className: "ellipsis-text"
-  }, title)), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("span", {
-    className: classnames('ellipsis-text', {
-      'no-data': noData
-    })
-  }, noData ? noDataText : text), !noData && (showComparisonIcons || comparisonText) && /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('comparison-icons-holder', "cs-".concat(comparisonStatus))
-  }, comparisonText && /*#__PURE__*/React__default.createElement("div", {
-    className: "comparison-text"
-  }, comparisonText), showComparisonIcons && /*#__PURE__*/React__default.createElement("div", {
-    className: "comparison-icons"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    type: "bc-icon-comparison-up"
-  }), /*#__PURE__*/React__default.createElement(Icon, {
-    type: "bc-icon-comparison-down"
-  }))))) : type === widgetConfig.type[3] ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", {
-    className: "widget-c-title"
-  }, /*#__PURE__*/React__default.createElement("p", {
-    className: "ellipsis-text"
-  }, title)), /*#__PURE__*/React__default.createElement("li", {
-    className: "widget-c-text"
-  }, /*#__PURE__*/React__default.createElement("p", {
-    className: classnames('ellipsis-text', {
-      'no-data': noData
-    })
-  }, noData ? noDataText : text))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, img && /*#__PURE__*/React__default.createElement("li", {
-    className: "image"
-  }, /*#__PURE__*/React__default.createElement("img", {
-    src: img,
-    alt: ""
-  })), /*#__PURE__*/React__default.createElement("li", {
-    className: "head"
-  }, /*#__PURE__*/React__default.createElement(ModuleTitle, _extends({
-    title: title,
-    color: color,
-    size: size,
-    cornerRadius: "position-radius",
-    titleIcon: titleIcon
-  }, titleProps), headerActions)), /*#__PURE__*/React__default.createElement("li", {
-    className: classnames('text', {
-      'key-values': showKeyValues
-    })
-  }, /*#__PURE__*/React__default.createElement("p", {
-    className: classnames('ellipsis-text', {
-      'no-data': noData
-    })
-  }, noData ? noDataText : text), !noData && (showComparisonIcons || comparisonText) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames('comparison-icons-holder', "cs-".concat(comparisonStatus))
-  }, comparisonText && /*#__PURE__*/React__default.createElement("div", {
-    className: "comparison-text"
-  }, comparisonText), showComparisonIcons && /*#__PURE__*/React__default.createElement("div", {
-    className: "comparison-icons"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    type: "bc-icon-comparison-up"
-  }), /*#__PURE__*/React__default.createElement(Icon, {
-    type: "bc-icon-comparison-down"
-  }))), showKeyValues && /*#__PURE__*/React__default.createElement("div", {
-    className: "widget-timeline-holder"
-  }, keyValues.map((_ref2, index) => {
-    let {
-      label,
-      value,
-      className,
-      ...rest
-    } = _ref2;
-    return /*#__PURE__*/React__default.createElement(KeyValue, _extends({
-      key: index,
-      label: label,
-      value: value,
-      className: className
-    }, rest));
-  }))))));
-}
-Widget.propTypes = {
-  /**
-   * Switching to different types of widget's view, can be
-   * default, minimal, compact
-   */
-  type: PropTypes.oneOf(widgetConfig.type),
-  /**
-   * Setting image to widget
-   */
-  img: PropTypes.string,
-  /**
-   * Title for widget
-   */
-  title: PropTypes.node.isRequired,
-  /**
-   * Main text for widget
-   */
-  text: PropTypes.node,
-  /**
-   * Theme color for widget
-   */
-  color: PropTypes.string,
-  /**
-   * The prop allows you to specify actions for the widget's header.
-   * It works only for types `default` and `compact`
-   */
-  headerActions: PropTypes.node,
-  /**
-   * Text for No data state
-   */
-  noDataText: PropTypes.string,
-  /**
-   * Show/hide No data state
-   */
-  noData: PropTypes.bool,
-  /**
-   * Additional className
-   */
-  className: PropTypes.string,
-  /**
-   * Show/Hide shadow effect for widget
-   */
-  withShadow: PropTypes.bool,
-  /**
-   * Show/Hide bordered effect
-   */
-  withBorder: PropTypes.bool,
-  /**
-   * Title can have icon, defining with this prop
-   */
-  titleIcon: PropTypes.string,
-  /**
-   * Show/Hide comparison icons
-   */
-  showComparisonIcons: PropTypes.bool,
-  /**
-   * Props for title component
-   */
-  titleProps: PropTypes.object,
-  /**
-   * Comparison text
-   */
-  comparisonText: PropTypes.string,
-  /**
-   * Defining status/state of comparison icon
-   * can be one of `'initial','up','down'`
-   */
-  comparisonStatus: PropTypes.oneOf(widgetConfig.comparisonStatus),
-  /**
-   * Widget size
-   * `small, big, medium`
-   */
-  size: PropTypes.oneOf(widgetConfig.size),
-  /**
-   * Widget keyValues is an array of keyValue
-   * it will appear when the size is big
-   */
-  keyValues: PropTypes.arrayOf(PropTypes.shape({
-    ...KeyValue.propTypes
-  }))
-};
-Widget.defaultProps = {
-  type: widgetConfig.type[0],
-  noDataText: 'No Data',
-  noData: false,
-  titleProps: {},
-  withShadow: true,
-  withBorder: false,
-  showComparisonIcons: false,
-  comparisonStatus: widgetConfig.comparisonStatus[0],
-  size: widgetConfig.size[1],
-  keyValues: []
-};
-
-export { Widget as default };