@inntechcorp/it-design 2.2.90 → 3.1.0

package/dist/es/textarea/styled.js

@@ -0,0 +1,220 @@
+import{ThemeAppearances as e}from"../enums/enum.js";import r,{css as t}from"styled-components";import{withOpacity as o}from"../helpers/theme/Color.js";const a=r.div`
+  
+  width: inherit;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  
+  textarea {
+
+    background      : none;
+    display         : block;
+    width           : 100%;
+    height          : 100%;
+    min-height      : 47px;
+    padding         : 12px;
+    resize          : vertical;
+    
+    font-size       : 14px;
+    font-weight     : 400;
+    color           : ${({theme:e})=>e.colorText};
+    
+    border-radius   : calc( ${({theme:e})=>e.borderRadius} - 2px);
+    border          : 1px solid transparent;
+    outline         : 0 solid transparent;
+    outline-offset  : ${({theme:e})=>e.ringOffset};
+
+    transition      : outline 100ms linear,
+                      border-color ${({theme:e})=>e.transitionDuration} ${({theme:e})=>e.transitionTimingFunction},
+                      background-color ${({theme:e})=>e.transitionDuration} ${({theme:e})=>e.transitionTimingFunction},
+                      scrollbar-color ${({theme:e})=>e.transitionDuration} ${({theme:e})=>e.transitionTimingFunction};
+
+    /* Chrome, Edge, Safari */
+    &::-webkit-scrollbar {
+      width: 22px; /* Scroll bar width */
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent; /* Scroll bar background */
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: ${({theme:e})=>e.scrollbarThumb};
+      border-radius: 10px;
+      border: 13px solid transparent;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: ${({theme:e})=>e.scrollbarThumbHover};
+      scrollbar-width: thin!important;
+    }
+
+    /* Firefox */
+    scrollbar-width: thin; /* Thin scroll bar */
+    scrollbar-color: ${({theme:e})=>e.scrollbarThumb} transparent; /* Scroll bar color and background */
+
+    &:hover {
+      scrollbar-color: ${({theme:e})=>e.scrollbarThumbHover} transparent;
+    }
+
+    &::placeholder {
+      color: ${({theme:e})=>e.colorPlaceholder};
+    }
+
+  }
+
+  /* ------------------------ */
+  // VARIANT
+  /* ------------------------ */
+  ${()=>t`
+    
+    /* DEFAULT */
+    &.itd-textarea-default
+    {
+
+      textarea {
+        border: 1px solid ${({theme:e})=>e.colorBorder};
+      }
+
+      &:hover:not(&.itd-textarea-focus, &.itd-textarea-disabled) {
+        textarea {
+          border-color: ${({theme:e})=>e.colorBorderHover};
+        }
+      }
+      
+    }
+
+    /* FILLED */
+    &.itd-textarea-filled {
+
+      textarea {
+        background-color: ${({theme:e})=>e.colorBackgroundAlt};
+      }
+
+      &:hover:not(&.itd-textarea-focus, &.itd-textarea-disabled) {
+        textarea {
+          background-color: ${({theme:e})=>e.colorBackgroundAltHover};
+        }
+      }
+    
+    }
+    
+    /* DASHED */
+    &.itd-textarea-dashed {
+    
+      textarea {
+        border: 1px dashed ${({theme:e})=>e.colorBorder};
+      }
+      
+      &:hover:not(&.itd-textarea-focus, &.itd-textarea-disabled) {
+        textarea {
+          border-color: ${({theme:e})=>e.colorBorderHover};
+        }
+      }
+    
+    }
+
+    &&.itd-textarea-focus:not(.itd-textarea-filled) {
+      textarea {
+        border-color: ${({theme:r})=>r.primaryScale[r.appearance===e.LIGHT?400:900]};
+      }
+    }
+
+    &&.itd-textarea-focus.itd-input-error:not(.itd-textarea-filled) {
+      textarea {
+        border-color: ${({theme:e})=>e.colorErrorBorder};
+      }
+    }
+
+  `}
+
+  &.itd-textarea-default textarea {
+    box-shadow    : ${({theme:e})=>e.boxShadow};
+  }
+
+  &.itd-textarea-focus {
+
+    &.itd-textarea-filled {
+      textarea {
+        background-color: ${({theme:e})=>e.colorBackgroundAltHover};
+      }
+    }
+
+    &.itd-textarea-default, &.itd-textarea-dashed, &.itd-textarea-filled, &.itd-textarea-custom {
+
+      &.itd-textarea-keyboard-focus {
+
+        /* Tab ile focus - outline göster */
+        textarea {
+          outline: ${({theme:e})=>e.ringWidth} solid ${({theme:r})=>o(r.primaryScale[r.appearance===e.LIGHT?400:900],.5)};
+        }
+
+      }
+
+      /* Error durumunda outline ve border kırmızı */
+      &.itd-textarea-keyboard-focus.itd-textarea-error {
+        textarea {
+          outline: ${({theme:e})=>e.ringWidth} solid ${({theme:e})=>o(e.colorErrorBorder,.5)} !important;
+          border-color  : ${({theme:e})=>e.colorErrorBorder} !important;
+        }
+      }
+
+    }
+
+  }
+
+  &.itd-textarea-disabled {
+    
+    textarea {
+      background-color: ${({theme:e})=>e.colorDisabledBg};
+      border: 1px solid ${({theme:e})=>e.colorDisabledBorder};
+    }
+    
+    textarea, textarea::placeholder {
+      color: ${({theme:e})=>e.colorDisabledText};
+      cursor: not-allowed;
+    }
+
+  }
+  
+`,i=r.div`
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  transform: translateY(-50%);
+
+  svg circle {
+    fill: ${({theme:e})=>e.colorError};
+  }
+  svg path {
+    fill: ${({theme:e})=>e.colorErrorText};
+  }
+
+
+
+`;r(i)`
+
+`,r(i)`
+
+`,r(i)`
+  &:hover .itd-textarea-error-tooltip {
+    display: flex;
+  }
+`;const l=r.div`
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+`;export{l as ErrorWrapper,a as Wrapper};

package/dist/es/tinyscrollbar/index.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{useRef as e,useEffect as o}from"react";import{OverlayScrollbars as l}from"../node_modules/overlayscrollbars/overlayscrollbars.js";import"../node_modules/overlayscrollbars/styles/overlayscrollbars.css.js";import{ScrollWrapper as s}from"./scroll.styled.js";function t({className:t="",children:a,style:c}){const i=e(null);return o(()=>{if(i.current){const r=l(i.current,{paddingAbsolute:!0,showNativeOverlaidScrollbars:!1,overflow:{x:"hidden",y:"scroll"},scrollbars:{theme:"os-theme-dark",visibility:"auto",autoHide:"leave",autoHideDelay:1300,dragScroll:!0,clickScroll:!0,pointers:["mouse","touch","pen"]}});return()=>{r.destroy()}}},[]),r(s,{style:c,children:r("div",{ref:i,className:`os-viewport ${t}`,style:{width:"100%",overflow:"auto"},children:a})})}export{t as default};

package/dist/es/tinyscrollbar/scroll.styled.js

@@ -0,0 +1,21 @@
+import r from"styled-components";const o=r.div`
+
+  /* OverlayScrollbars v2 class selectors */
+  .os-scrollbar-horizontal { height: 10px; }
+  .os-scrollbar-vertical   { width: 10px; }
+
+  .os-scrollbar-track {
+    background: transparent;
+  }
+
+  .os-scrollbar-handle {
+    background: ${({theme:r})=>r.scrollbarThumb} !important;
+    border-radius: 8px;
+  }
+
+  .os-scrollbar-handle:hover,
+  .os-scrollbar-handle:active {
+    background: ${({theme:r})=>r.scrollbarThumbHover} !important;
+  }
+
+`;export{o as ScrollWrapper};

package/dist/es/types/InputProps.js

@@ -0,0 +1 @@
+var r;!function(r){r.TEXT="text",r.NUMBER="number",r.CURRENCY="currency",r.PASSWORD="password"}(r||(r={}));export{r as InputTypes};

package/dist/es/upload/index.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as o,useRef as a,useState as r,useEffect as i,useImperativeHandle as s}from"react";import{useTranslation as l}from"react-i18next";import n from"../button/index.js";import d from"../image/index.js";import u from"../modal/index.js";import c from"../notification/index.js";import p from"../hooks/useCoreFetch.js";import m from"../helpers/binary/FormatBytes.js";import h from"../helpers/checker/CheckFileURL.js";import{FileTypes as f,ComponentVariants as g,ComponentSizes as F}from"../enums/enum.js";import v from"../icons/Picture.js";import y from"../helpers/binary/GetTypeByFileType.js";import w from"../icons/Upload.js";import N from"../helpers/promise/Wait.js";import $ from"../flex/index.js";import x from"../helpers/unit/AddDefaultUnit.js";import{Wrapper as b,Label as j,FileContent as D,IconsWrapper as P,Uploading as S,UploadStatusBox as C,Overlay as E,OverlayContent as k,Failed as M,CenterContent as U}from"./styled.js";import{ErrorSVGIcon as H,ErrorTooltip as L}from"../utils/CommonStyledComponents.js";import T from"../node_modules/uuid/dist/esm-browser/v4.js";import B from"../node_modules/lucide-react/dist/esm/icons/trash.js";import O from"../node_modules/lucide-react/dist/esm/icons/eye.js";const W=o(({id:o="itd-upload-"+T(),variant:W=g.DEFAULT,resultFileName:z=null,action:A="",filePath:q="",binaryName:G="file",showDeleteIcon:I=!1,showPreviewIcon:R=!1,buttonsPosition:V="default",padding:_=10,fluid:Q=!0,fileWidth:J="100%",fileHeight:Y="auto",maxFileWidth:K="none",maxFileHeight:X="none",containerWidth:Z="100%",containerHeight:ee="auto",previewFileWidth:te="100%",previewFileHeight:oe="100%",previewFilePadding:ae="0",requestMethod:re="put",maxFileSize:ie=1024,disabled:se=!1,extraFormData:le={},extraQueryString:ne={},extraHeader:de={},fileTypes:ue=[f.JPG,f.PNG,f.SVG,f.PDF],removeAction:ce="",removeExtraFormData:pe={},removeExtraQueryString:me={},removeExtraHeader:he={},onUpdate:fe,onUploadSuccess:ge,onUploadFailed:Fe,onRemoveFileSuccess:ve,onRemoveFileFailed:ye},we)=>{const Ne=a(null),{addNotification:$e}=c.useNotifications(),{showModal:xe}=u.useModal(),{fetch:be,cancel:je}=p(),{t:De}=l("itd"),[Pe,Se]=r(!1),[Ce,Ee]=r(!1),[ke,Me]=r(".svg, .png, .jpg"),[Ue,He]=r(!1),[Le,Te]=r(!1),[Be,Oe]=r(!1),[We,ze]=r(null),[Ae,qe]=r(null),[Ge,Ie]=r(""),[Re,Ve]=r(!1),[_e,Qe]=r(!1),[Je,Ye]=r(null),[Ke,Xe]=r(!1),[Ze,et]=r(null);i(()=>()=>{je()},[]),i(()=>{Ee(se)},[se]),i(()=>{qe(q?q.split("?")[0]:"")},[q]),i(()=>{null!==Ae&&(void 0!==Ae?at():Se(!1))},[Ae]),i(()=>{let e=[];ue.map(t=>{e.push(y(t))}),Me(e.join(", "))},[ue]);const tt=(e,t)=>{$e({title:e,description:t,placement:"topRight",autoHide:!0,delay:5e3,type:"error"})},ot=(e,t=!0,o=!0)=>{fe&&fe(e,t,o)};s(we,()=>({setFocus(){Oe(!0)},reset(e=!1,t=!1){rt(),qe(null),Ie(""),ot("",e,t)},setValue(e,t=!0,o=!0){qe(e),ot(e,t,o)},getValue:()=>Ae||"",setError(e){Ie(e)},forceUpdate(){ot(Ae||"")},clear(){qe("")}}));const at=async()=>{let e=!1;Ae&&(e=await h(Ae),ze(e),e?ot(Ae):ot("",!0,!0),Pe||Se(!0)),""!==Ae||Pe||Se(!0),""===Ae&&Pe&&ot("",!0,!0)},rt=()=>{et(null),Ye(null),Xe(!1),ze(null)},it=async()=>{Ee(!0),xe({content:t("div",{children:De("uploader.areYouSureToDeleteThisFile")}),title:De("uploader.removeFile"),okButtonText:De("uploader.yes"),cancelButtonText:De("uploader.no"),okButtonProps:{variant:"statable",state:"reject"},closeOnClickOutside:!1,showCloseButton:!1,onOk:()=>(ce?be({action:ce,params:pe,queries:me,headers:he,onFetched:e=>{e.data.success?(rt(),ot("",!0,!0),ve&&ve(e.data.data)):ye&&ye()},onError:()=>{ye&&ye()}}):(rt(),ot("",!0,!0),ve&&ve()),Ee(!1),!0),onCancel:()=>(Ee(!1),!0)})},st=e=>{e.preventDefault(),_e||(Te(!1),e.dataTransfer&&0!==e.dataTransfer.files.length?dt(e.dataTransfer.files[0]):console.log(De("uploader.browserDoesntSupportDND")))},lt=e=>{Te(!1);const t=e.target.files[0];dt(t)},nt=async({path:e,errorMessage:t,errorCode:o})=>{await N(1e3),Ye(null),Qe(!1),await N(1500),Xe(!1),e?ge&&ge(e):t&&Fe&&Fe(t,o||0)},dt=e=>{if(e&&(e=>!!ue.includes(e.type)||(tt(De("uploader.error"),De("uploader.fileFormatError",{fileFormat:ke})),!1))(e)&&(e=>!(e.size>1024*ie&&(tt(De("uploader.error"),De("uploader.fileSizeError",{fileSize:m(1024*ie)})),1)))(e)){if(z){const t=y(e.type);e=new File([e],z+t,{type:t,lastModified:e.lastModified})}(async e=>{if(!e)return;let t=new FormData;t.append(G,e),z&&t.append("name",z),Object.keys(le).forEach(e=>{t.append(e,le[e])}),be({action:A,requestMethod:re,params:t,queries:ne,headers:de,onFetched:e=>{e.data.success?(et({message:De("uploader.fileUploadSuccess"),status:"success"}),Xe(!0),qe(e.data.data.url),nt({path:e.data.data.url})):(et({message:De("uploader.fileUploadFailed"),status:"error"}),ot("",!0,!0),nt({errorMessage:De("uploader.fileUploadFailed")}))},onError:(e,t)=>{et({message:De("uploader.fileUploadFailed"),status:"error"}),ot("",!0,!0),nt({errorMessage:e,errorCode:t})},onProgress:e=>{Ye({estimated:e.estimated?(Math.round(100*e.estimated)/100).toFixed(2):"0",progress:e.progress?Math.round(100*e.progress):0,bytes:e.bytes?m(e.bytes):"",total:e.total?m(e.total):""})}})})(e),Qe(!0)}},ut=()=>{Ee(!0),xe({content:t(U,{className:"itd-upload-preview-content",$width:te,$height:oe,$padding:ae,children:t(d,{src:Ae||""})}),showOkButton:!1,showCancelButton:!1,contentPadding:"0px",width:"max-content",onCancel:()=>(Ee(!1),!0)})},ct=()=>{if(I&&Ae&&!_e&&We)return t("span",{className:"delete-icon",children:t(n,{variant:W===g.FILLED?"solid":"outline",size:F.SMALL,type:"button",onClick:it,disabled:Ce,icon:t(B,{size:16,strokeWidth:2}),className:"itd-upload-delete-button",circle:!0})})},pt=()=>{if(R&&Ae&&!_e&&We)return t("span",{className:"preview-icon",children:t(n,{variant:W===g.FILLED?"solid":"outline",size:F.SMALL,type:"button",onClick:ut,disabled:Ce,icon:t(O,{size:16,strokeWidth:2}),className:"itd-upload-preview-button",circle:!0})})},mt=()=>{if(""===Ge||_e)return;return e(M,{...{className:"itd-upload-failed itd-failed-status",onPointerOver:()=>Ve(!0),onPointerOut:()=>Ve(!1)},children:[Re?t(L,{className:"itd-upload-error-tooltip itd-error-tooltip",children:Ge}):null,H]})},ht=()=>{if(Pe)return null===We?t(w,{className:"itd-upload-icon",width:24,height:24}):!1===We?t(v,{width:40,height:40}):t(d,{src:Ae||"",width:x(J),height:x(Y)})},ft=()=>{let o=(Ue||Le)&&!_e&&!Ce;return t(E,{$isHover:o,className:"itd-upload-overlay",children:e(k,{$isHover:o,className:"itd-upload-overlay-content",children:[t("span",{className:"itd-upload-header",children:De("uploader.header")}),t("span",{className:"itd-upload-hint",children:De("uploader.hint")})]})})};return e(b,{className:"itd-upload",$fluid:Q,children:[t("input",{type:"file",id:o,accept:ke,onChange:lt,onFocus:e=>{e.target.matches(":focus-visible")&&Oe(!0)},onBlur:()=>Oe(!1),onPointerOver:()=>{!Le&&He(!0)},onPointerOut:()=>{!Le&&He(!1)},onDragOver:e=>{e.preventDefault(),_e||Te(!0)},onDragLeave:e=>{e.preventDefault(),_e||Te(!1)},onDrop:st,disabled:_e||Ce,ref:Ne}),t(j,{$showFocus:Be,$hasError:""!==Ge,className:"itd-upload-label",children:e(D,{$showBorder:(Le||Ue)&&!_e,$padding:_,$disabled:se,$hasError:""!==Ge&&!_e,$fileWidth:J,$fileHeight:Y,$maxFileWidth:K,$maxFileHeight:X,$containerWidth:Z,$containerHeight:ee,$variant:W,$showFocus:Be,className:"itd-upload-content",children:[ht(),e(S,{className:"itd-upload-status",$isActive:_e,$complete:"success"===Ze?.status,$error:"error"===Ze?.status,children:[t(C,{className:"itd-upload-status-box",$progress:Je?Je.progress:0,$complete:"success"===Ze?.status,$error:"error"===Ze?.status}),t("span",{className:"itd-upload-status-message",children:De(Ke||Ze?String(Ze?.message):"uploader.fileUploading")}),t("span",Je?{className:"itd-upload-status-info",children:De("uploader.info",{total:Je.total,estimated:Je.estimated})}:{className:"itd-upload-status-calculating",children:De("uploader.calculating")})]}),ft(),e(P,{$position:""===Ge?V:"default",children:[e($,{vertical:!0,gap:"small",className:"itd-upload-icons",children:[ct(),pt()]}),mt()]})]})})]})});export{W as default};

package/dist/es/upload/styled.js

@@ -0,0 +1,228 @@
+import t,{css as o}from"styled-components";import{ComponentVariants as e,ThemeAppearances as i}from"../enums/enum.js";import{withOpacity as r}from"../helpers/theme/Color.js";export{ErrorBorder,ErrorTooltip}from"../utils/CommonStyledComponents.js";import n from"../helpers/unit/AddDefaultUnit.js";import"../helpers/theme/tokens.js";import"../helpers/theme/cssVariables.js";import"react/jsx-runtime";import"../utils/InlineSVGCached.js";import"../helpers/svg/styles.js";import"../helpers/datetime/dayjsSetup.js";const a=t.div`
+
+  position    : relative;
+  width       : ${t=>t.$fluid?"100%":"max-content"};
+  font-size   : 13px;
+  font-weight : 400;
+
+  input[type="file"] {
+
+    width     : 100%;
+    height    : 100%;
+    position  : absolute;
+    opacity   : 0;
+    z-index   : 1;
+    
+  }
+
+`,l=t.div`
+
+  >img {
+    max-width     : 100%;
+    width         : ${t=>t.$fileWidth?n(t.$fileWidth):"100%"};
+    height        : ${t=>t.$fileHeight?n(t.$fileHeight):"auto"};
+    max-width     : ${t=>t.$maxFileWidth?n(t.$maxFileWidth):"none"};
+    max-height    : ${t=>t.$maxFileHeight?n(t.$maxFileHeight):"none"};
+    overflow      : hidden;
+    border-radius : ${({theme:t})=>t.borderRadius};
+  }
+
+  transition-property         : border-color;
+  transition-duration         : 500ms;
+  transition-timing-function  : cubic-bezier(0.075, 0.82, 0.165, 1);
+
+  background-color            : ${({theme:t,$variant:o})=>o===e.FILLED?t.colorBackgroundAlt:"transparent"};
+  border                      : 1px dashed ${({theme:t,$hasError:o,$showBorder:e,$disabled:r,$showFocus:n})=>o?t.colorErrorBorder:e&&!r?t.colorBorderHover:n?t.primaryScale[t.appearance===i.LIGHT?400:900]:t.colorBorder};
+
+  border-radius   : ${({theme:t})=>t.borderRadius};
+  padding         : ${t=>t.$padding+"px"};
+  //overflow: hidden;
+
+  display         : flex;
+  justify-content : center;
+  align-items     : center;
+  position        : relative;
+
+  min-height      : 100px;
+  width           : ${t=>t.$containerWidth?n(t.$containerWidth):"100%"};
+  height          : ${t=>t.$containerHeight?n(t.$containerHeight):"auto"};
+
+  .itd-upload-icon svg {
+    color: ${({theme:t})=>t.colorText};
+  }
+
+`,s=t.div`
+
+  display: block;
+
+  /* Tab ile focus - outline göster */
+  outline           : ${t=>t.$showFocus?({theme:o})=>t.$hasError?`${o.ringWidth} solid ${r(o.colorErrorBorder,.5)}`:`${o.ringWidth} solid ${r(o.primaryScale[o.appearance===i.LIGHT?400:900],.5)}`:"0 solid transparent"};
+
+  outline-offset    : ${({theme:t})=>t.ringOffset};
+  border-radius     : ${({theme:t})=>t.borderRadius};
+
+  transition        : outline 100ms linear;
+
+`,d=t.div`
+
+  position    : absolute;
+  top         : 50%;
+  right       : ${t=>"default"===t.$position?"15px":"-17px"};
+  height      : ${t=>"default"===t.$position?"auto":"100%"};
+  transform   : translateY(-50%);
+  z-index     : 2;
+
+  ${t=>{if("corners"===t.$position)return o`
+        .delete-icon {
+          position  : absolute;
+          bottom    : -17px;
+          right     : 0;
+        }
+        .preview-icon {
+          position  : absolute;
+          top       : -17px;
+          right     : 0px;
+        }
+      `}}
+
+`,p=t.div`
+
+  display         : flex;
+  justify-content : center;
+  align-items     : center;
+  padding         : ${t=>t.$padding?n(t.$padding):"100%"};
+
+  img {
+    width   : ${t=>t.$width?n(t.$width):"100%"};
+    height  : ${t=>t.$height?n(t.$height):"100%"};
+  }
+
+`,h=t.div`
+
+  transition-property         : all;
+  transition-duration         : 0ms;
+  transition-timing-function  : ${({theme:t})=>t.transitionTimingFunction};
+  transition-delay            : 0ms;
+  //animation-direction: reverse;
+
+  position          : absolute;
+  top               : 150%;
+  left              : 50%;
+  transform         : translateX(-50%) translateY(-50%);
+
+  display           : flex;
+  flex-direction    : column;
+  width             : 100%;
+  
+  span {
+    &:nth-child(1) {
+      color         : ${({theme:t})=>t.colorUploadText};
+      text-align    : center;
+      font-weight   : 500;
+    }
+    &:nth-child(2) {
+      color         : ${({theme:t})=>r(t.colorUploadText,.5)};
+      text-align    : center;
+      font-weight   : 400;
+    }
+  }
+
+  ${({$isHover:t})=>t&&o`
+      top: 50%;
+    `}
+
+`,c=t.div`
+
+  position                    : absolute;
+  display                     : flex;
+  pointer-events              : all;
+
+  transition-property         : all;
+  transition-duration         : ${({theme:t})=>t.transitionDuration};
+  transition-timing-function  : ${({theme:t})=>t.transitionTimingFunction};
+  animation-direction         : reverse;
+
+  width                       : 100%;
+  height                      : 100%;
+  background-color            : transparent;
+  backdrop-filter             : blur(0px);
+  border-radius               : ${({theme:t})=>t.borderRadius};
+  overflow                    : hidden;
+
+  ${({$isHover:t})=>t&&o`
+      backdrop-filter         : blur(2px);
+      background-color        : ${({theme:t})=>t.colorUploadOverlay};
+    `}
+
+`,m=t.div`
+
+  position: absolute;
+
+  display                       : flex;
+  justify-content               : center;
+  align-items                   : center;
+  flex-direction                : column;
+
+  width                         : 100%;
+  height                        : 100%;
+  background-color              : transparent;
+  border-radius                 : ${({theme:t})=>t.borderRadius};
+  overflow                      : hidden;
+
+  transition-property           : all;
+  transition-duration           : ${({theme:t})=>t.transitionDuration};
+  transition-timing-function    : ${({theme:t})=>t.transitionTimingFunction};
+
+  span, div {
+
+    color                       : transparent;
+    z-index                     : 1;
+    pointer-events              : none;
+
+    transition-property         : all;
+    transition-duration         : ${({theme:t})=>t.transitionDuration};
+    transition-timing-function  : ${({theme:t})=>t.transitionTimingFunction};
+    
+  }
+  
+  ${({$isActive:t,$complete:e,$error:i})=>t&&o`
+      background-color  : ${e?({theme:t})=>t.colorUploadOverlayCompleted:i?({theme:t})=>t.colorUploadOverlayError:({theme:t})=>t.colorUploadOverlayUploading};
+      span {
+        color: ${e?({theme:t})=>t.colorUploadCompletedText:i?({theme:t})=>t.colorUploadErrorText:({theme:t})=>t.colorUploadingText};
+      }
+    `}
+
+`,$=t.div`
+  transition-property         : all;
+  transition-duration         : ${({theme:t})=>t.transitionDuration};
+  transition-timing-function  : ${({theme:t})=>t.transitionTimingFunction};
+  
+  position          : absolute;
+  top               : 0;
+  left              : 0;
+  height            : 100%;
+  content           : "";
+
+  width             : ${t=>t.$progress+"%"};
+  background-color  : ${({$complete:t,$error:o})=>t?({theme:t})=>t.colorUploadOverlayCompleted:o?({theme:t})=>t.colorUploadOverlayError:({theme:t})=>t.colorUploadOverlayUploading};
+`,u=t(t.div`
+
+  display           : flex;
+  align-items       : center;
+  justify-content   : center;
+
+  cursor            : pointer;
+  position          : relative;
+
+  &[data-icon="i"] {
+    &::before {
+      padding       : 4px;
+      border-radius : 50px;
+    }
+  }
+
+`)`
+  &::before { background-color: ${({theme:t})=>t.colorError}; }
+  svg circle { fill: ${({theme:t})=>t.colorError}; }
+  svg { color: ${({theme:t})=>t.colorErrorText}; }
+`;export{p as CenterContent,u as Failed,l as FileContent,d as IconsWrapper,s as Label,c as Overlay,h as OverlayContent,$ as UploadStatusBox,m as Uploading,a as Wrapper};

package/dist/es/utils/CommonStyledComponents.js

@@ -0,0 +1,61 @@
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import r from"styled-components";import{useState as e}from"react";const n=t("svg",{width:"16",height:"16",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:o("g",{fill:"none",fillRule:"evenodd",children:[t("circle",{fill:"currentColor",cx:"10",cy:"10",r:"10"}),t("path",{d:"M10.04,8.62 L12.86,5.79 C13.25,5.40 13.89,5.40 14.28,5.79 C14.67,6.18 14.67,6.82 14.28,7.21 L11.45,10.04 L14.28,12.86 C14.67,13.25 14.67,13.89 14.28,14.28 C13.89,14.67 13.25,14.67 12.86,14.28 L10.04,11.45 L7.21,14.28 C6.82,14.67 6.18,14.67 5.79,14.28 C5.40,13.89 5.40,13.25 5.79,12.86 L8.62,10.04 L5.79,7.21 C5.40,6.82 5.40,6.18 5.79,5.79 C6.18,5.40 6.82,5.40 7.21,5.79 L10.04,8.62 Z",fill:"currentColor"})]})}),i=r.span`
+  
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+
+  font-size: .785rem;
+  line-height: .875rem;
+
+  border-radius: calc( ${({theme:t})=>t.borderRadius} - 2px);
+  padding: 8px 7px;
+  color: ${({theme:t})=>t.colorErrorText};
+  background: ${({theme:t})=>t.colorError};
+  width: max-content;
+  max-width: 210px;
+
+  z-index: 1;
+
+  ${({$position:t="top-right"})=>{switch(t){case"top-left":return"\n          left: -10px;\n          bottom: 30px;\n        ";case"top-right":return"\n          right: -16px;\n          bottom: 30px;\n        ";case"bottom-left":return"\n          left: -95px;\n          top: -40px;\n        ";case"bottom-right":return"\n          right: -95px;\n          bottom: -40px;\n        "}}}
+
+  &::after {
+
+    content: "";
+    width: 0;
+    height: 0;
+    position: absolute;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+
+    ${({$position:t="top-right",$offsetX:o=0,$offsetY:r=0,theme:e})=>{switch(t){case"top-right":return`\n            bottom: calc(-6px + ${r}px);\n            right: calc(17px + ${o}px);\n            border-top: 10px solid ${e.colorError};\n          `;case"top-left":return`\n            bottom: calc(-6px + ${r}px);\n            left: calc(17px + ${o}px);\n            border-top: 10px solid ${e.colorError};\n          `;case"bottom-left":return`\n            top: calc(-6px + ${r}px);\n            left: calc(17px + ${o}px);\n            border-bottom: 10px solid ${e.colorError};\n          `;case"bottom-right":return`\n            top: calc(-6px + ${r}px);\n            right: calc(17px + ${o}px);\n            border-bottom: 10px solid ${e.colorError};\n          `}}}
+
+  }
+
+`,l=r.div`
+
+  position: absolute;
+  border: 1px solid ${({theme:t})=>t.colorErrorBorder};
+  width: ${({$fullSize:t})=>t?"100%":"calc(100% + 2px)"};
+  height: ${({$fullSize:t})=>t?"100%":"calc(100% + 2px)"};
+  border-radius: calc( ${({theme:t})=>t.borderRadius} - 2px);
+  top: ${({$fullSize:t})=>t?"0":"-1px"};
+  left: ${({$fullSize:t})=>t?"0":"-1px"};
+  pointer-events: none;
+
+`,p=r.div`
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+
+  svg circle {
+    fill: ${({theme:t})=>t.colorError};
+  }
+  svg path {
+    fill: ${({theme:t})=>t.colorErrorText};
+  }
+
+`,c=({message:r,icon:l,className:c="itd-error-icon",tooltipPosition:s="top-right"})=>{const[x,a]=e(!1);return o(p,{className:c,onPointerOver:()=>a(!0),onPointerOut:()=>a(!1),children:[l||n,x&&t(i,{$position:s,children:r})]})};export{l as ErrorBorder,c as ErrorIcon,n as ErrorSVGIcon,i as ErrorTooltip};

package/dist/es/utils/GetIconSizeBySize.js

@@ -0,0 +1 @@
+import{ComponentSizes as L}from"../enums/enum.js";function e(e){return e===L.X_SMALL?"14":e===L.SMALL?"16":e===L.MEDIUM?"18":e===L.DEFAULT?"20":e===L.LARGE?"22":e===L.X_LARGE?"24":"20"}export{e as default};

package/dist/es/utils/GetSizeSlugBySize.js

@@ -0,0 +1 @@
+import{ComponentSizes as L,ComponentSizesSlug as A}from"../enums/enum.js";function E(E){return E===L.X_SMALL?A.X_SMALL:E===L.SMALL?A.SMALL:E===L.MEDIUM?A.MEDIUM:E===L.DEFAULT?A.DEFAULT:E===L.LARGE?A.LARGE:E===L.X_LARGE?A.X_LARGE:A.DEFAULT}export{E as default};

package/dist/es/utils/InlineSVGCached.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{memo as r,useRef as e,useEffect as s}from"react";const a=new Map;var n=r(({src:r,className:n,style:o,title:l,role:i,onLoaded:c,onError:u})=>{const f=e(null);return s(()=>{const t=f.current;if(!t)return;let e=!1;const s=r=>{if(e)return;t.__itdLastSvg!==r?(t.innerHTML=r,t.__itdLastSvg=r,c&&c()):c&&c()};try{if(r.trim().startsWith("<svg"))return s(r),()=>{e=!0};if(a.has(r))return s(a.get(r)),()=>{e=!0};const t=new AbortController;return fetch(r,{signal:t.signal}).then(async t=>{if(!t.ok)throw new Error(`SVG load failed: ${t.status}`);return t.text()}).then(t=>{a.set(r,t),s(t)}).catch(t=>{e||u&&u(t)}),()=>{e=!0,t.abort()}}catch(t){u&&u(t)}return()=>{e=!0}},[r]),t("span",{ref:f,className:n,style:o,title:l,role:i,"aria-hidden":!l||void 0})},(t,r)=>t.src===r.src&&t.className===r.className&&t.title===r.title&&t.role===r.role&&t.style===r.style);export{n as default};

package/dist/form/context/FormContext.d.ts

@@ -1,4 +1,5 @@
 import { FormValueProps, ITDImperativeFuncProps, FormItemProps } from "../../index";
+import { ITDVariant } from "../../types/ITDProps";
 export type FormContextType = {
     register: (item: FormItemProps) => void;
     unregister: (name: string) => void;
@@ -29,6 +30,8 @@ export type FormContextType = {
     removeFields: () => void;
     formId: string;
     updated: {};
+    variant?: ITDVariant;
+    disabled?: boolean;
 };
 declare const FormContext: import("react").Context<FormContextType>;
 export default FormContext;

package/dist/form/context/FormStore.d.ts

@@ -1,11 +1,14 @@
 import { FieldUpdateProps } from "../../index";
 import { FormContextType } from "./FormContext";
+import { ITDVariant } from "../../types/ITDProps";
 export type FormStoreProps = {
     name: string;
     onUpdate?: (values: {}) => void;
     onFieldUpdate?: (update: FieldUpdateProps) => void;
     onReset?: () => void;
     useQueryString?: boolean;
+    variant?: ITDVariant;
+    disabled?: boolean;
 };
-declare function FormStore({ name, useQueryString, onUpdate, onReset, onFieldUpdate, }: FormStoreProps): FormContextType;
+declare function FormStore({ name, useQueryString, onUpdate, onReset, onFieldUpdate, variant, disabled, }: FormStoreProps): FormContextType;
 export default FormStore;

package/dist/form/item/Item.d.ts

@@ -4,7 +4,6 @@ export type ItemProps = {
     name: string;
     id?: string;
     label?: string;
-    placeholder?: string;
     error?: string;
     rules?: FormRuleProps[];
     mask?: string | null;