@xaypay/tui 0.0.107 → 0.0.109

package/dist/index.es.js

@@ -39,6 +39,24 @@ const SvgPdf = ({
   fill: fillColor ? fillColor : '#00236A'
 }));
 
+const SvgRequired = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "12",
+  height: "12",
+  viewBox: "0 0 12 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  d: "M9.281 7.317 7 6l2.281-1.317a.5.5 0 0 0-.5-.866L6.5 5.134V2.5a.5.5 0 1 0-1 0v2.634L3.219 3.817a.5.5 0 0 0-.5.866L5 6 2.719 7.317a.5.5 0 0 0 .5.866L5.5 6.866V9.5a.5.5 0 1 0 1 0V6.866l2.281 1.317a.5.5 0 0 0 .5-.866Z",
+  fill: "#E00"
+}));
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -129,11 +147,7 @@ const File = ({
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
     className: `${styles$c['file-form-title']} ile-form-title-rem`
-  }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
-    style: {
-      color: '#ee0000'
-    }
-  }, "*")), /*#__PURE__*/React__default.createElement("div", {
+  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))), /*#__PURE__*/React__default.createElement("div", {
     className: classnames(`${styles$c['file-form-wrap']} file-form-wrap-rem`, image ? styles$c['active'] : '')
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$c['file-form']} file-form-rem ${error || errorMessage ? styles$c['error'] : ''}`,
@@ -260,7 +274,8 @@ const Checkbox$1 = ({
   disabled,
   checkedColor,
   handleChecked,
-  unCheckedColor
+  unCheckedColor,
+  ignoreDisabledForChecked
 }) => {
   const configStyles = compereConfigs();
   const [innerChecked, setInnerChecked] = useState(false);
@@ -284,7 +299,7 @@ const Checkbox$1 = ({
       ...styles
     },
     onClick: !innerDisabled && handleChecked ? handleClick : _ => _
-  }, innerChecked && !innerDisabled ? /*#__PURE__*/React__default.createElement(SvgCheckboxChecked, {
+  }, innerChecked && (ignoreDisabledForChecked ? ignoreDisabledForChecked : !innerDisabled) ? /*#__PURE__*/React__default.createElement(SvgCheckboxChecked, {
     fillColor: checkedColor ? checkedColor : configStyles.SINGLECHECKBOX.checkedColor
   }) : /*#__PURE__*/React__default.createElement(SvgCheckboxUnchecked, {
     fillColor: unCheckedColor ? unCheckedColor : configStyles.SINGLECHECKBOX.unCheckedColor
@@ -298,7 +313,8 @@ const SingleCheckbox = ({
   disabled,
   checkedColor,
   handleChecked,
-  unCheckedColor
+  unCheckedColor,
+  ignoreDisabledForChecked
 }) => {
   const [innerData, setInnerData] = useState(null);
   useEffect(() => {
@@ -320,7 +336,8 @@ const SingleCheckbox = ({
     disabled: disabled,
     checkedColor: checkedColor,
     handleChecked: handleChecked,
-    unCheckedColor: unCheckedColor
+    unCheckedColor: unCheckedColor,
+    ignoreDisabledForChecked: ignoreDisabledForChecked
   });
 };
 SingleCheckbox.propTypes = {
@@ -329,7 +346,8 @@ SingleCheckbox.propTypes = {
   styles: PropTypes.object,
   disabled: PropTypes.bool,
   checkedColor: PropTypes.string,
-  unCheckedColor: PropTypes.string
+  unCheckedColor: PropTypes.string,
+  ignoreDisabledForChecked: PropTypes.bool
 };
 
 var css_248z$e = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{cursor:pointer;display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}";
@@ -351,12 +369,6 @@ styleInject(css_248z$e);
   tBodyFontWeight: PropTypes.string,
   tBodyFontFamily: PropTypes.string,
   tBodyRowBorder: PropTypes.string,
-  // handleCheckedBody: PropTypes.func,
-  // handleCheckedHeader: PropTypes.func,
-  // handleHeaderItemClick: PropTypes.func,
-  // handleBodyActionClick: PropTypes.func
-
-  setTableDataBody: PropTypes.func,
   setTableDataHeader: PropTypes.func
 });
 
@@ -479,6 +491,9 @@ const Modal = ({
   backgroundColor,
   grayDecorHeight,
   layerBackgroundColor,
+  imageMargin,
+  imageMaxWidth,
+  imageWrapWidth,
   imageWrapHeight
 }) => {
   const [select, setSelect] = useState(0);
@@ -584,6 +599,7 @@ const Modal = ({
   }, type === 'content' && /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: '100%',
+      minWidth: '0',
       display: 'flex',
       alignItems: 'center',
       boxSizing: 'border-box',
@@ -615,11 +631,11 @@ const Modal = ({
       display: 'flex',
       width: '100%',
       height: '100%',
-      overflow: 'hidden',
       position: 'relative',
       alignItems: 'center',
       boxSizing: 'border-box',
       justifyContent: 'center',
+      overflow: type === 'content' ? 'auto' : 'hidden',
       borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
       borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
       borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor
@@ -652,7 +668,7 @@ const Modal = ({
     }
   }, /*#__PURE__*/React__default.createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default.createElement("div", {
     style: {
-      width: '100%',
+      width: imageWrapWidth ? imageWrapWidth : configStyles.MODAL.imageWrapWidth,
       height: imageWrapHeight ? imageWrapHeight : configStyles.MODAL.imageWrapHeight
     }
   }, innerData && innerData.length > 0 && innerData.map((item, index) => {
@@ -666,9 +682,11 @@ const Modal = ({
             display: 'block',
             objectFit: 'cover',
             objectPosition: 'center',
+            margin: imageMargin ? imageMargin : configStyles.MODAL.imageMargin,
             borderRadius: radius ? radius : configStyles.MODAL.radius,
             width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
-            height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
+            height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight,
+            maxWidth: imageMaxWidth ? imageMaxWidth : configStyles.MODAL.imageMaxWidth
           },
           src: item.url,
           key: item.id ? item.id : index
@@ -733,7 +751,11 @@ Modal.propTypes = {
   justifyContent: PropTypes.string,
   backgroundColor: PropTypes.string,
   grayDecorHeight: PropTypes.string,
-  layerBackgroundColor: PropTypes.string
+  layerBackgroundColor: PropTypes.string,
+  imageMargin: PropTypes.string,
+  imageMaxWidth: PropTypes.string,
+  imageWrapWidth: PropTypes.string,
+  imageWrapHeight: PropTypes.string
 };
 Modal.defaultProps = {
   type: 'content'
@@ -1090,16 +1112,12 @@ const Input = ({
       lineHeight: labelLineHeight ? labelLineHeight : configStyles.INPUT.labelLineHeight,
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom
     }
-  }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
-    style: {
-      color: errorColor ? errorColor : '#ee0000'
-    }
-  }, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
+  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$a['input-content']}`,
     style: {
       width: width ? width : configStyles.INPUT.width,
       borderRadius: radius ? radius : configStyles.INPUT.radius,
-      boxShadow: innerErrorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
+      boxShadow: innerErrorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover && !disabled ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
@@ -1623,11 +1641,7 @@ const Select = ({
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.SELECT.labelMarginBottom,
       textTransform: labelTextTransform ? labelTextTransform : configStyles.SELECT.labelTextTransform
     }
-  }, label, required && /*#__PURE__*/React__default.createElement("sup", {
-    style: {
-      color: '#ee0000'
-    }
-  }, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
+  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default.createElement("div", {
     ref: ref
   }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$8['select-content']
@@ -2414,7 +2428,7 @@ Captcha.propTypes = {
   getRange: PropTypes.func.isRequired
 };
 
-var css_248z$6 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;cursor:pointer;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
+var css_248z$6 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
 var styles$4 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
 styleInject(css_248z$6);
 
@@ -2509,6 +2523,46 @@ function v4(options, buf, offset) {
   return unsafeStringify(rnds);
 }
 
+const SvgHeic = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "32",
+  height: "42",
+  viewBox: "0 0 32 42",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "m31.884 10.667-.022-.026c-.007-.01-.014-.018-.021-.025a.356.356 0 0 0-.052-.058L21.396.21 21.37.188l-.025-.021a.48.48 0 0 0-.029-.026l-.029-.025L21.178 0H2.91C2.138 0 1.398.305.852.848A2.891 2.891 0 0 0 0 2.897v36.206c0 .768.306 1.505.852 2.049A2.917 2.917 0 0 0 2.909 42h26.182c.771 0 1.511-.305 2.057-.848.546-.544.852-1.28.852-2.049V10.775l-.116-.108Zm-1.338 28.437a1.45 1.45 0 0 1-.427 1.022 1.463 1.463 0 0 1-1.028.426H2.91a1.463 1.463 0 0 1-1.027-.426 1.45 1.45 0 0 1-.427-1.022V27.85h9.986l1.963 2.238a.716.716 0 0 0 .546.246h16.596v8.77ZM5.088 18.357a.724.724 0 1 1 0-1.448h21.825a.724.724 0 1 1 0 1.448H5.088Zm21.825 1.738a.724.724 0 0 1 0 1.448H15.48a.724.724 0 0 1 0-1.448h11.432Zm.724-5.641c0 .4-.325.724-.724.724H5.088a.724.724 0 1 1 0-1.449h21.825c.4 0 .724.325.724.725ZM5.088 11.99a.724.724 0 1 1 0-1.448H16.52a.724.724 0 0 1 0 1.449H5.088Zm17.974-1.643A1.451 1.451 0 0 1 21.607 8.9V2.47l7.913 7.878h-6.458Zm2.434 26.076h-1.104c-.033.28-.1.517-.203.711-.1.192-.25.337-.446.437-.195.1-.45.15-.764.15-.26 0-.482-.051-.667-.154a1.278 1.278 0 0 1-.46-.437 2.158 2.158 0 0 1-.264-.676 4.288 4.288 0 0 1-.084-.883v-.543c0-.341.03-.645.093-.91.064-.267.16-.493.287-.675.126-.183.284-.321.472-.415.188-.094.41-.142.662-.142.31 0 .56.053.751.16a1 1 0 0 1 .433.45c.1.197.165.434.194.71H25.5a2.768 2.768 0 0 0-.362-1.143 2.041 2.041 0 0 0-.821-.781c-.354-.189-.786-.283-1.299-.283a2.7 2.7 0 0 0-1.09.212 2.29 2.29 0 0 0-.826.614c-.23.265-.406.584-.53.958-.12.374-.18.792-.18 1.254v.534c0 .462.058.88.176 1.254.12.374.294.693.52.958.228.262.5.465.818.61.318.141.675.212 1.073.212.518 0 .958-.095 1.32-.283.362-.188.643-.446.843-.773.2-.33.318-.705.354-1.126Zm-15-.772H7.608v2.865H6.5v-6.429h1.108v2.685h2.888v-2.685H11.6v6.43h-1.104v-2.866Zm6.632 2.865v-.878h-3.1v-2h2.654v-.866H14.03V32.97h3.077v-.883H12.92v6.43h4.208Zm2.089-6.429v6.43h-1.109v-6.43h1.109Z",
+  fill: "#051942"
+}));
+
+const SvgWrong = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "32",
+  height: "42",
+  viewBox: "0 0 32 42",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "m31.884 10.667-.022-.026c-.007-.01-.014-.018-.021-.025a.356.356 0 0 0-.052-.058L21.396.21 21.37.188l-.025-.021a.48.48 0 0 0-.029-.026l-.029-.025L21.178 0H2.91C2.138 0 1.398.305.852.848A2.891 2.891 0 0 0 0 2.897v36.206c0 .768.306 1.505.852 2.049A2.917 2.917 0 0 0 2.909 42h26.182c.771 0 1.511-.305 2.057-.848.546-.544.852-1.28.852-2.049V10.775l-.116-.108Zm-1.338 28.437a1.45 1.45 0 0 1-.427 1.022 1.463 1.463 0 0 1-1.028.426H2.91a1.463 1.463 0 0 1-1.027-.426 1.45 1.45 0 0 1-.427-1.022V27.85h9.986l1.963 2.238a.716.716 0 0 0 .546.246h16.596v8.77ZM5.088 18.357a.724.724 0 1 1 0-1.448h21.825a.724.724 0 1 1 0 1.448H5.088Zm21.825 1.738a.724.724 0 0 1 0 1.448H15.48a.724.724 0 0 1 0-1.448h11.432Zm.724-5.641c0 .4-.325.724-.724.724H5.088a.724.724 0 1 1 0-1.449h21.825c.4 0 .724.325.724.725ZM5.088 11.99a.724.724 0 1 1 0-1.448H16.52a.724.724 0 0 1 0 1.449H5.088Zm17.974-1.643A1.451 1.451 0 0 1 21.607 8.9V2.47l7.913 7.878h-6.458Z",
+  fill: "#051942"
+}));
+
 const SvgListItemPdf = ({
   title,
   titleId,
@@ -2693,27 +2747,59 @@ const FileItem = /*#__PURE__*/React__default.memo(({
       height: listItemHeight,
       boxSizing: 'border-box',
       padding: listItemPadding,
-      flexDirection: check !== '' ? 'column' : 'row',
-      justifyContent: check !== '' ? 'space-around' : 'space-between',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      border: check !== '' ? `1px solid ${listItemErrorColor}` : '',
       backgroundColor: check !== '' ? listItemBackgroundErrorColor : listItemBackgroundColor
     }
-  }, check !== '' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
+  }, check !== '' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
+      width: '32px'
+    }
+  }, /*#__PURE__*/React__default.createElement(SvgWrong, null)), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: 'relative',
+      display: 'flex',
+      height: '40px',
       margin: '0px',
-      color: listItemErrorColor,
+      alignItems: 'flex-end',
+      width: 'calc(100% - 40px)'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      paddingTop: '5px',
+      color: progressColor,
+      boxSizing: 'border-box',
+      flexDirection: 'column',
       fontSize: listItemErrorSize
     }
+  }, /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      margin: '0px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      width: '100%',
+      maxWidth: '100%'
+    }
   }, name), /*#__PURE__*/React__default.createElement("p", {
     style: {
       margin: '0px',
-      color: listItemErrorColor,
-      fontSize: listItemErrorSize
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      width: '100%',
+      maxWidth: '100%',
+      color: listItemErrorColor
     }
-  }, check)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+  }, check ? check : '')))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: '32px'
     }
-  }, fileFormat === 'pdf' ? /*#__PURE__*/React__default.createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : fileFormat === 'png' ? /*#__PURE__*/React__default.createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? /*#__PURE__*/React__default.createElement(SvgListItemJpeg, null) : ''), /*#__PURE__*/React__default.createElement("div", {
+  }, fileFormat === 'pdf' ? /*#__PURE__*/React__default.createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : fileFormat === 'png' ? /*#__PURE__*/React__default.createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? /*#__PURE__*/React__default.createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? /*#__PURE__*/React__default.createElement(SvgHeic, null) : ''), /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'relative',
       display: 'flex',
@@ -2886,7 +2972,6 @@ const NewFile = ({
   progressTrackColor,
   fileAreaImageWidth,
   listItemErrorColor,
-  labelRequiredColor,
   timeForRemoveError,
   progressFailedColor,
   fileAreaImageHeight,
@@ -2928,7 +3013,7 @@ const NewFile = ({
       for (let ix = 0; ix < file.length; ix++) {
         if (file[ix]) {
           if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-            if (fileExtensions.includes(file[ix].type.split('/')[1])) {
+            if (fileExtensions.includes(file[ix].type.split('/')[1]) || fileExtensions.includes('heic') && file[ix].type.split('/')[1] === 'heif') {
               change({
                 id: '',
                 check: '',
@@ -2958,12 +3043,14 @@ const NewFile = ({
     } else {
       if (file[0]) {
         if (file[0].size <= maxSize * Math.pow(2, 20)) {
-          if (fileExtensions.includes(file[0].type.split('/')[1])) {
+          if (fileExtensions.includes(file[0].type.split('/')[1]) || fileExtensions.includes('heic') && (file[0].type === 'image/heif' || file[0].type === 'image/heic')) {
             setError('');
             change(file);
             setSingleFile(file);
             if (file[0].type === 'application/pdf') {
               setImage('pdf');
+            } else if (file[0].type === 'image/heif' || file[0].type === 'image/heic') {
+              setImage('heic');
             } else {
               setImage(URL.createObjectURL(file[0]));
             }
@@ -3062,11 +3149,7 @@ const NewFile = ({
       color: labelColor ? labelColor : configStyles.File.labelColor,
       fontSize: labelSize ? labelSize : configStyles.File.labelSize
     }
-  }, label, required && /*#__PURE__*/React__default.createElement("sup", {
-    style: {
-      color: labelRequiredColor ? labelRequiredColor : configStyles.File.labelRequiredColor
-    }
-  }, "*")), deleteComponent && /*#__PURE__*/React__default.createElement("span", {
+  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))), deleteComponent && /*#__PURE__*/React__default.createElement("span", {
     style: {
       cursor: 'pointer'
     },
@@ -3112,7 +3195,7 @@ const NewFile = ({
       fontSize: size ? size : configStyles.File.size,
       fontWeight: weight ? weight : configStyles.File.weight
     }
-  }, !multiple && image ? image === 'pdf' ? /*#__PURE__*/React__default.createElement(SvgPdf, null) : /*#__PURE__*/React__default.createElement("img", {
+  }, !multiple && image ? image === 'pdf' ? /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? /*#__PURE__*/React__default.createElement(SvgHeic, null) : /*#__PURE__*/React__default.createElement("img", {
     src: image,
     style: {
       display: 'block',
@@ -3234,7 +3317,6 @@ NewFile.propTypes = {
   borderHoverColor: PropTypes.string,
   listItemErrorSize: PropTypes.string,
   timeForRemoveError: PropTypes.number,
-  labelRequiredColor: PropTypes.string,
   progressTrackColor: PropTypes.string,
   fileAreaImageWidth: PropTypes.string,
   listItemErrorColor: PropTypes.string,
@@ -3251,8 +3333,8 @@ NewFile.propTypes = {
 };
 NewFile.defaultProps = {
   maxSize: 10,
-  timeForRemoveError: 4000,
-  fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
+  timeForRemoveError: 5000,
+  fileExtensions: ['jpg', 'jpeg', 'png', 'pdf', 'heic']
 };
 
 var css_248z$5 = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;bottom:0;display:inline-block;height:14px;left:0;margin:auto 4px auto auto;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
@@ -3352,6 +3434,7 @@ const Textarea = ({
   resize,
   radius,
   padding,
+  disabled,
   required,
   onChange,
   minWidth,
@@ -3374,8 +3457,7 @@ const Textarea = ({
   borderFocusColor,
   borderHoverColor,
   labelMarginBottom,
-  showCharacterCount,
-  labelRequiredColor
+  showCharacterCount
 }) => {
   const [error, setError] = useState('');
   const [isHover, setIsHover] = useState(false);
@@ -3447,11 +3529,7 @@ const Textarea = ({
       display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
       fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight
     }
-  }, label, required && /*#__PURE__*/React__default.createElement("sup", {
-    style: {
-      color: labelRequiredColor ? labelRequiredColor : configStyles.TEXTAREA.labelRequiredColor
-    }
-  }, "*")) : '', showCharacterCount && maxLength && /*#__PURE__*/React__default.createElement("span", {
+  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && /*#__PURE__*/React__default.createElement("span", {
     style: {
       color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
       fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize
@@ -3462,6 +3540,7 @@ const Textarea = ({
       border: 'none',
       outline: 'none',
       overflow: 'auto',
+      cursor: disabled ? 'not-allowed' : 'auto',
       fontSize: size ? size : configStyles.TEXTAREA.size,
       height: height ? height : configStyles.TEXTAREA.height,
       padding: padding ? padding : configStyles.TEXTAREA.padding,
@@ -3476,6 +3555,7 @@ const Textarea = ({
       resize: resize ? resize : configStyles.TEXTAREA.resize
     },
     value: innerValue,
+    disabled: disabled,
     onBlur: handleBlur,
     onFocus: handleFocus,
     onChange: handleChange,
@@ -3499,6 +3579,7 @@ Textarea.propTypes = {
   resize: PropTypes.string,
   radius: PropTypes.string,
   required: PropTypes.bool,
+  disabled: PropTypes.bool,
   padding: PropTypes.string,
   minWidth: PropTypes.string,
   maxWidth: PropTypes.string,
@@ -3522,8 +3603,7 @@ Textarea.propTypes = {
   borderFocusColor: PropTypes.string,
   borderHoverColor: PropTypes.string,
   labelMarginBottom: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  labelRequiredColor: PropTypes.string
+  onChange: PropTypes.func.isRequired
 };
 
 var css_248z$3 = "";
@@ -3602,7 +3682,6 @@ const Typography = ({
   return validVariant ? 'Please set Typography valid variant' : tagT;
 };
 Typography.propTypes = {
-  size: PropTypes.oneOf(PropTypes.string, PropTypes.number),
   color: PropTypes.string,
   onClick: PropTypes.func,
   weight: PropTypes.string,
@@ -3619,7 +3698,8 @@ Typography.propTypes = {
   textTransform: PropTypes.string,
   textDecoration: PropTypes.string,
   backgroundColor: PropTypes.string,
-  variant: PropTypes.oneOf(Object.values(TypographyType))
+  variant: PropTypes.oneOf(Object.values(TypographyType)),
+  size: PropTypes.oneOf(PropTypes.string, PropTypes.number)
 };
 Typography.defaultProps = {
   variant: 'p'
@@ -3961,11 +4041,7 @@ const Autocomplate = ({
   }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("label", {
     className: `${styles$1['autocomplate-title']} autocomplate-title-rem`
-  }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
-    style: {
-      color: '#ee0000'
-    }
-  }, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
+  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$1['autocomplate-content']} autocomplate-content-rem`
   }, /*#__PURE__*/React__default.createElement("input", _extends({
     id: inputId,
@@ -4046,7 +4122,6 @@ const NewAutocomplete = ({
   contentBottomLeft,
   innerErrorPadding,
   showOptionDuration,
-  labelRequiredColor,
   contentTopMaxWidth,
   labelTextTransform,
   contentBottomWidth,
@@ -4194,7 +4269,7 @@ const NewAutocomplete = ({
         backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
       }
     }, item[keyNames.name]);
-  }))) : innerOptions.length <= 0 ? innerError ? '' : /*#__PURE__*/React__default.createElement("span", {
+  }))) : innerOptions.length <= 0 ? innerError ? '' : innerValue.length <= 0 ? '' : /*#__PURE__*/React__default.createElement("span", {
     style: {
       position: 'absolute',
       zIndex: '1',
@@ -4250,11 +4325,7 @@ const NewAutocomplete = ({
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.NEWAUTOCOMPLETE.labelMarginBottom,
       textTransform: labelTextTransform ? labelTextTransform : configStyles.NEWAUTOCOMPLETE.labelTextTransform
     }
-  }, label, required && /*#__PURE__*/React__default.createElement("sup", {
-    style: {
-      color: labelRequiredColor ? labelRequiredColor : configStyles.NEWAUTOCOMPLETE.labelRequiredColor
-    }
-  }, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
+  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: contentDisplay ? contentDisplay : configStyles.NEWAUTOCOMPLETE.contentDisplay,
       position: contentPosition ? contentPosition : configStyles.NEWAUTOCOMPLETE.contentPosition,
@@ -4340,7 +4411,6 @@ NewAutocomplete.propTypes = {
   options: PropTypes.array.isRequired,
   labelMarginBottom: PropTypes.string,
   innerErrorPadding: PropTypes.string,
-  labelRequiredColor: PropTypes.string,
   labelTextTransform: PropTypes.string,
   showOptionDuration: PropTypes.string,
   contentTopMaxWidth: PropTypes.string,