@xaypay/tui 0.0.107 → 0.0.109

package/dist/index.js

@@ -69,6 +69,24 @@ const SvgPdf = ({
   fill: fillColor ? fillColor : '#00236A'
 }));
 
+const SvgRequired = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.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__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.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;
@@ -159,11 +177,7 @@ const File = ({
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
     className: `${styles$c['file-form-title']} ile-form-title-rem`
-  }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
-    style: {
-      color: '#ee0000'
-    }
-  }, "*")), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classnames__default["default"](`${styles$c['file-form-wrap']} file-form-wrap-rem`, image ? styles$c['active'] : '')
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$c['file-form']} file-form-rem ${error || errorMessage ? styles$c['error'] : ''}`,
@@ -290,7 +304,8 @@ const Checkbox$1 = ({
   disabled,
   checkedColor,
   handleChecked,
-  unCheckedColor
+  unCheckedColor,
+  ignoreDisabledForChecked
 }) => {
   const configStyles = compereConfigs();
   const [innerChecked, setInnerChecked] = React.useState(false);
@@ -314,7 +329,7 @@ const Checkbox$1 = ({
       ...styles
     },
     onClick: !innerDisabled && handleChecked ? handleClick : _ => _
-  }, innerChecked && !innerDisabled ? /*#__PURE__*/React__default["default"].createElement(SvgCheckboxChecked, {
+  }, innerChecked && (ignoreDisabledForChecked ? ignoreDisabledForChecked : !innerDisabled) ? /*#__PURE__*/React__default["default"].createElement(SvgCheckboxChecked, {
     fillColor: checkedColor ? checkedColor : configStyles.SINGLECHECKBOX.checkedColor
   }) : /*#__PURE__*/React__default["default"].createElement(SvgCheckboxUnchecked, {
     fillColor: unCheckedColor ? unCheckedColor : configStyles.SINGLECHECKBOX.unCheckedColor
@@ -328,7 +343,8 @@ const SingleCheckbox = ({
   disabled,
   checkedColor,
   handleChecked,
-  unCheckedColor
+  unCheckedColor,
+  ignoreDisabledForChecked
 }) => {
   const [innerData, setInnerData] = React.useState(null);
   React.useEffect(() => {
@@ -350,7 +366,8 @@ const SingleCheckbox = ({
     disabled: disabled,
     checkedColor: checkedColor,
     handleChecked: handleChecked,
-    unCheckedColor: unCheckedColor
+    unCheckedColor: unCheckedColor,
+    ignoreDisabledForChecked: ignoreDisabledForChecked
   });
 };
 SingleCheckbox.propTypes = {
@@ -359,7 +376,8 @@ SingleCheckbox.propTypes = {
   styles: PropTypes__default["default"].object,
   disabled: PropTypes__default["default"].bool,
   checkedColor: PropTypes__default["default"].string,
-  unCheckedColor: PropTypes__default["default"].string
+  unCheckedColor: PropTypes__default["default"].string,
+  ignoreDisabledForChecked: PropTypes__default["default"].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}";
@@ -381,12 +399,6 @@ styleInject(css_248z$e);
   tBodyFontWeight: PropTypes__default["default"].string,
   tBodyFontFamily: PropTypes__default["default"].string,
   tBodyRowBorder: PropTypes__default["default"].string,
-  // handleCheckedBody: PropTypes.func,
-  // handleCheckedHeader: PropTypes.func,
-  // handleHeaderItemClick: PropTypes.func,
-  // handleBodyActionClick: PropTypes.func
-
-  setTableDataBody: PropTypes__default["default"].func,
   setTableDataHeader: PropTypes__default["default"].func
 });
 
@@ -509,6 +521,9 @@ const Modal = ({
   backgroundColor,
   grayDecorHeight,
   layerBackgroundColor,
+  imageMargin,
+  imageMaxWidth,
+  imageWrapWidth,
   imageWrapHeight
 }) => {
   const [select, setSelect] = React.useState(0);
@@ -614,6 +629,7 @@ const Modal = ({
   }, type === 'content' && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '100%',
+      minWidth: '0',
       display: 'flex',
       alignItems: 'center',
       boxSizing: 'border-box',
@@ -645,11 +661,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
@@ -682,7 +698,7 @@ const Modal = ({
     }
   }, /*#__PURE__*/React__default["default"].createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default["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) => {
@@ -696,9 +712,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
@@ -763,7 +781,11 @@ Modal.propTypes = {
   justifyContent: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   grayDecorHeight: PropTypes__default["default"].string,
-  layerBackgroundColor: PropTypes__default["default"].string
+  layerBackgroundColor: PropTypes__default["default"].string,
+  imageMargin: PropTypes__default["default"].string,
+  imageMaxWidth: PropTypes__default["default"].string,
+  imageWrapWidth: PropTypes__default["default"].string,
+  imageWrapHeight: PropTypes__default["default"].string
 };
 Modal.defaultProps = {
   type: 'content'
@@ -1120,16 +1142,12 @@ const Input = ({
       lineHeight: labelLineHeight ? labelLineHeight : configStyles.INPUT.labelLineHeight,
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom
     }
-  }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
-    style: {
-      color: errorColor ? errorColor : '#ee0000'
-    }
-  }, "*")) : '', /*#__PURE__*/React__default["default"].createElement("div", {
+  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["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
@@ -1653,11 +1671,7 @@ const Select = ({
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.SELECT.labelMarginBottom,
       textTransform: labelTextTransform ? labelTextTransform : configStyles.SELECT.labelTextTransform
     }
-  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", {
-    style: {
-      color: '#ee0000'
-    }
-  }, "*")) : '', /*#__PURE__*/React__default["default"].createElement("div", {
+  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$8['select-content']
@@ -2444,7 +2458,7 @@ Captcha.propTypes = {
   getRange: PropTypes__default["default"].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);
 
@@ -2539,6 +2553,46 @@ function v4(options, buf, offset) {
   return unsafeStringify(rnds);
 }
 
+const SvgHeic = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.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__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.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,
@@ -2723,27 +2777,59 @@ const FileItem = /*#__PURE__*/React__default["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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
+  }, check !== '' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
+      width: '32px'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(SvgWrong, null)), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      position: 'relative',
+      display: 'flex',
+      height: '40px',
       margin: '0px',
-      color: listItemErrorColor,
+      alignItems: 'flex-end',
+      width: 'calc(100% - 40px)'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      paddingTop: '5px',
+      color: progressColor,
+      boxSizing: 'border-box',
+      flexDirection: 'column',
       fontSize: listItemErrorSize
     }
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    style: {
+      margin: '0px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      width: '100%',
+      maxWidth: '100%'
+    }
   }, name), /*#__PURE__*/React__default["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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, check ? check : '')))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: '32px'
     }
-  }, fileFormat === 'pdf' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : fileFormat === 'png' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, fileFormat === 'pdf' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : fileFormat === 'png' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'relative',
       display: 'flex',
@@ -2916,7 +3002,6 @@ const NewFile = ({
   progressTrackColor,
   fileAreaImageWidth,
   listItemErrorColor,
-  labelRequiredColor,
   timeForRemoveError,
   progressFailedColor,
   fileAreaImageHeight,
@@ -2958,7 +3043,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: '',
@@ -2988,12 +3073,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]));
             }
@@ -3092,11 +3179,7 @@ const NewFile = ({
       color: labelColor ? labelColor : configStyles.File.labelColor,
       fontSize: labelSize ? labelSize : configStyles.File.labelSize
     }
-  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", {
-    style: {
-      color: labelRequiredColor ? labelRequiredColor : configStyles.File.labelRequiredColor
-    }
-  }, "*")), deleteComponent && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), deleteComponent && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       cursor: 'pointer'
     },
@@ -3142,7 +3225,7 @@ const NewFile = ({
       fontSize: size ? size : configStyles.File.size,
       fontWeight: weight ? weight : configStyles.File.weight
     }
-  }, !multiple && image ? image === 'pdf' ? /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : /*#__PURE__*/React__default["default"].createElement("img", {
+  }, !multiple && image ? image === 'pdf' ? /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : /*#__PURE__*/React__default["default"].createElement("img", {
     src: image,
     style: {
       display: 'block',
@@ -3264,7 +3347,6 @@ NewFile.propTypes = {
   borderHoverColor: PropTypes__default["default"].string,
   listItemErrorSize: PropTypes__default["default"].string,
   timeForRemoveError: PropTypes__default["default"].number,
-  labelRequiredColor: PropTypes__default["default"].string,
   progressTrackColor: PropTypes__default["default"].string,
   fileAreaImageWidth: PropTypes__default["default"].string,
   listItemErrorColor: PropTypes__default["default"].string,
@@ -3281,8 +3363,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}";
@@ -3382,6 +3464,7 @@ const Textarea = ({
   resize,
   radius,
   padding,
+  disabled,
   required,
   onChange,
   minWidth,
@@ -3404,8 +3487,7 @@ const Textarea = ({
   borderFocusColor,
   borderHoverColor,
   labelMarginBottom,
-  showCharacterCount,
-  labelRequiredColor
+  showCharacterCount
 }) => {
   const [error, setError] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
@@ -3477,11 +3559,7 @@ const Textarea = ({
       display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
       fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight
     }
-  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", {
-    style: {
-      color: labelRequiredColor ? labelRequiredColor : configStyles.TEXTAREA.labelRequiredColor
-    }
-  }, "*")) : '', showCharacterCount && maxLength && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
       fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize
@@ -3492,6 +3570,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,
@@ -3506,6 +3585,7 @@ const Textarea = ({
       resize: resize ? resize : configStyles.TEXTAREA.resize
     },
     value: innerValue,
+    disabled: disabled,
     onBlur: handleBlur,
     onFocus: handleFocus,
     onChange: handleChange,
@@ -3529,6 +3609,7 @@ Textarea.propTypes = {
   resize: PropTypes__default["default"].string,
   radius: PropTypes__default["default"].string,
   required: PropTypes__default["default"].bool,
+  disabled: PropTypes__default["default"].bool,
   padding: PropTypes__default["default"].string,
   minWidth: PropTypes__default["default"].string,
   maxWidth: PropTypes__default["default"].string,
@@ -3552,8 +3633,7 @@ Textarea.propTypes = {
   borderFocusColor: PropTypes__default["default"].string,
   borderHoverColor: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
-  onChange: PropTypes__default["default"].func.isRequired,
-  labelRequiredColor: PropTypes__default["default"].string
+  onChange: PropTypes__default["default"].func.isRequired
 };
 
 var css_248z$3 = "";
@@ -3632,7 +3712,6 @@ const Typography = ({
   return validVariant ? 'Please set Typography valid variant' : tagT;
 };
 Typography.propTypes = {
-  size: PropTypes__default["default"].oneOf(PropTypes__default["default"].string, PropTypes__default["default"].number),
   color: PropTypes__default["default"].string,
   onClick: PropTypes__default["default"].func,
   weight: PropTypes__default["default"].string,
@@ -3649,7 +3728,8 @@ Typography.propTypes = {
   textTransform: PropTypes__default["default"].string,
   textDecoration: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
-  variant: PropTypes__default["default"].oneOf(Object.values(TypographyType))
+  variant: PropTypes__default["default"].oneOf(Object.values(TypographyType)),
+  size: PropTypes__default["default"].oneOf(PropTypes__default["default"].string, PropTypes__default["default"].number)
 };
 Typography.defaultProps = {
   variant: 'p'
@@ -3991,11 +4071,7 @@ const Autocomplate = ({
   }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     className: `${styles$1['autocomplate-title']} autocomplate-title-rem`
-  }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
-    style: {
-      color: '#ee0000'
-    }
-  }, "*")) : '', /*#__PURE__*/React__default["default"].createElement("div", {
+  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$1['autocomplate-content']} autocomplate-content-rem`
   }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
     id: inputId,
@@ -4076,7 +4152,6 @@ const NewAutocomplete = ({
   contentBottomLeft,
   innerErrorPadding,
   showOptionDuration,
-  labelRequiredColor,
   contentTopMaxWidth,
   labelTextTransform,
   contentBottomWidth,
@@ -4224,7 +4299,7 @@ const NewAutocomplete = ({
         backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
       }
     }, item[keyNames.name]);
-  }))) : innerOptions.length <= 0 ? innerError ? '' : /*#__PURE__*/React__default["default"].createElement("span", {
+  }))) : innerOptions.length <= 0 ? innerError ? '' : innerValue.length <= 0 ? '' : /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       position: 'absolute',
       zIndex: '1',
@@ -4280,11 +4355,7 @@ const NewAutocomplete = ({
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.NEWAUTOCOMPLETE.labelMarginBottom,
       textTransform: labelTextTransform ? labelTextTransform : configStyles.NEWAUTOCOMPLETE.labelTextTransform
     }
-  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", {
-    style: {
-      color: labelRequiredColor ? labelRequiredColor : configStyles.NEWAUTOCOMPLETE.labelRequiredColor
-    }
-  }, "*")) : '', /*#__PURE__*/React__default["default"].createElement("div", {
+  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: contentDisplay ? contentDisplay : configStyles.NEWAUTOCOMPLETE.contentDisplay,
       position: contentPosition ? contentPosition : configStyles.NEWAUTOCOMPLETE.contentPosition,
@@ -4370,7 +4441,6 @@ NewAutocomplete.propTypes = {
   options: PropTypes__default["default"].array.isRequired,
   labelMarginBottom: PropTypes__default["default"].string,
   innerErrorPadding: PropTypes__default["default"].string,
-  labelRequiredColor: PropTypes__default["default"].string,
   labelTextTransform: PropTypes__default["default"].string,
   showOptionDuration: PropTypes__default["default"].string,
   contentTopMaxWidth: PropTypes__default["default"].string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.107",
+  "version": "0.0.109",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/autocomplate/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { compereConfigs } from './../../utils'
+import SvgRequired from './../icon/Required'
 import styles from './autocomplate.module.css'
 
 export const Autocomplate = ({
@@ -105,7 +106,12 @@ export const Autocomplate = ({
         <>
             {label ? (
                 <label className={`${styles['autocomplate-title']} autocomplate-title-rem`}>
-                    {label} {required && <sup style={{ color: '#ee0000' }}>*</sup>}
+                    {label}
+                    {required && (
+                        <sup>
+                            <SvgRequired />
+                        </sup>
+                    )}
                 </label>
             ) : (
                 ''

package/src/components/file/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import PDF from './../icon/PDF'
+import SvgRequired from './../icon/Required'
 
 import styles from './file.module.css'
 
@@ -66,7 +67,12 @@ export const File = ({
     return (
         <>
             <p className={`${styles['file-form-title']} ile-form-title-rem`}>
-                {label} {required && <sup style={{ color: '#ee0000' }}>*</sup>}
+                {label}
+                {required && (
+                    <sup>
+                        <SvgRequired />
+                    </sup>
+                )}
             </p>
             <div
                 className={classnames(`${styles['file-form-wrap']} file-form-wrap-rem`, image ? styles['active'] : '')}

package/src/components/icon/Heic.js

@@ -0,0 +1,21 @@
+import * as React from 'react'
+const SvgHeic = ({ title, titleId, ...props }) => (
+    <svg
+        width="32"
+        height="42"
+        viewBox="0 0 32 42"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-labelledby={titleId}
+        {...props}
+    >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <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"
+        />
+    </svg>
+)
+export default SvgHeic

package/src/components/icon/Required.js

@@ -0,0 +1,19 @@
+import * as React from 'react'
+const SvgRequired = ({ title, titleId, ...props }) => (
+    <svg
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-labelledby={titleId}
+        {...props}
+    >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <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"
+        />
+    </svg>
+)
+export default SvgRequired

package/src/components/icon/Wrong.js

@@ -0,0 +1,21 @@
+import * as React from 'react'
+const SvgWrong = ({ title, titleId, ...props }) => (
+    <svg
+        width="32"
+        height="42"
+        viewBox="0 0 32 42"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-labelledby={titleId}
+        {...props}
+    >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <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"
+        />
+    </svg>
+)
+export default SvgWrong