@sankhyalabs/ezui 1.1.74 → 1.1.75

package/dist/collection/components/ez-calendar/ez-calendar.css

@@ -1,66 +1,66 @@
 :host {
   /*@doc Define a família da fonte do componente.*/
-  --cal--font-family: var(--font-pattern, Arial);
+  --ez-calendar--font-family: var(--font-pattern, Arial);
   /*@doc Define a cor dos textos dentro do componente.*/
-  --cal--color: var(--title--primary, #626e82);
+  --ez-calendar--color: var(--title--primary, #626e82);
   /*@doc Define a sombra dos textos dentro do componente.*/
-  --cal--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
+  --ez-calendar--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
 
   /* cal__body */
   /*@doc Define a cor de fundo do corpo do calendário.*/
-  --cal__body--background-color: var(--background--xlight, #FFF);
+  --ez-calendar__body--background-color: var(--background--xlight, #FFF);
   /*@doc Define o espaçamento do corpo do calendário.*/
-  --cal__body--padding: var(--space--medium, 12px);
+  --ez-calendar__body--padding: var(--space--medium, 12px);
   /*@doc Define o raio da borda do corpo do calendário.*/
-  --cal__body--border-radius: var(--border--radius-medium, 12px);
+  --ez-calendar__body--border-radius: var(--border--radius-medium, 12px);
   /*@doc Define a sombra do corpo do calendário.*/
-  --cal__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
+  --ez-calendar__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
 
   /* cal__header */
   /*@doc Define a espessura da borda inferior do header.*/
-  --cal__header-line--stroke: 2px;
+  --ez-calendar__header-line--stroke: 2px;
   /*@doc Define a cor da borda inferior do header.*/
-  --cal__header-line--color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__header-line--color: var(--color--strokes, #C0C0C0);
 
   /* nav buttons */
   /*@doc Define a cor do ícone de navegação.*/
-  --cal__nav-btn--fill: var(--text--primary, #008561);
+  --ez-calendar__nav-btn--fill: var(--text--primary, #008561);
   /*@doc Define a cor do ícone de navegação quando o cursor está sobre ele.*/
-  --cal__nav-btn--hover--fill: var(--color--primary, #350404);
+  --ez-calendar__nav-btn--hover--fill: var(--color--primary, #350404);
   /*@doc Define a largura do ícone de navegação.*/
-  --cal__nav-btn--width: 10px;
+  --ez-calendar__nav-btn--width: 10px;
   /*@doc Define a altura do ícone de navegação.*/
-  --cal__nav-btn--height: 16px;
+  --ez-calendar__nav-btn--height: 16px;
   /*@doc Contém a imagem do ícone de navegação à esquerda.*/
-  --cal__nav-btn--previous-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z"/></svg>');
+  --ez-calendar__nav-btn--previous-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z"/></svg>');
   /*@doc Contém a imagem do ícone de navegação à direita.*/
-  --cal__nav-btn--next-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
+  --ez-calendar__nav-btn--next-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
 
   /* cell */
   /*@doc Define o espaçamento vertical entre as células.*/
-  --cal__cell--margin: 0px var(--space--small, 12px);
+  --ez-calendar__cell--margin: 0px var(--space--small, 12px);
   /*@doc Define a largura das células.*/
-  --cal__cell--width: var(--space--large, 24px);
+  --ez-calendar__cell--width: var(--space--large, 24px);
   /*@doc Define o espaçamento horizontal entre as células.*/
-  --cal__cell--padding: var(--space--extra-small, 3px) 0px;
+  --ez-calendar__cell--padding: var(--space--extra-small, 3px) 0px;
   /*@doc Define o raio da borda das células.*/
-  --cal__cell--border-radius: var(--border--radius-small, 6px);
+  --ez-calendar__cell--border-radius: var(--border--radius-small, 6px);
   /*@doc Define a cor de fundo das células.*/
-  --cal__cell--over--background-color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__cell--over--background-color: var(--color--strokes, #C0C0C0);
   /*@doc Define a cor do texto para células secundárias (fora do mês selecionado).*/
-  --cal__cell--outset--color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__cell--outset--color: var(--color--strokes, #C0C0C0);
   /*@doc Define a cor de fundo das células selecionadas.*/
-  --cal__cell--selected--background-color: var(--color--primary, #008561);
+  --ez-calendar__cell--selected--background-color: var(--color--primary, #008561);
   /*@doc Define a cor do texto da célula selecionada.*/
-  --cal__cell--selected--color: var(--color--inverted, #FFF);
+  --ez-calendar__cell--selected--color: var(--color--inverted, #FFF);
 
   /* btn today */
   /*@doc Define a cor do texto do botão "Hoje".*/
-  --cal__btn-today--color: var(--color--primary);
+  --ez-calendar__btn-today--color: var(--color--primary);
   /*@doc Define a cor de fundo do botão "Hoje" quando o cursor está sobre ele.*/
-  --cal__btn-today--hover--background-color: var(--color--strokes, #C0C0C0);
+  --ez-calendar__btn-today--hover--background-color: var(--color--strokes, #C0C0C0);
   /*@doc Define o raio da borda do botão "Hoje".*/
-  --cal__btn-today--border-radius: var(--border--radius-small, 6px);
+  --ez-calendar__btn-today--border-radius: var(--border--radius-small, 6px);
 
   /***************
      host style  
@@ -78,10 +78,10 @@
   flex-direction: column;
 
   /*public*/
-  background-color: var(--cal__body--background-color);
-  padding: var(--cal__body--padding);
-  border-radius: var(--cal__body--border-radius);
-  box-shadow: var(--cal__body--shadow);
+  background-color: var(--ez-calendar__body--background-color);
+  padding: var(--ez-calendar__body--padding);
+  border-radius: var(--ez-calendar__body--border-radius);
+  box-shadow: var(--ez-calendar__body--shadow);
 }
 
 .calendar__header {
@@ -92,10 +92,10 @@
   margin: var(--space--small, 6px) var(--space--, 12px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-  border-bottom: solid var(--cal__header-line--stroke) var(--cal__header-line--color);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+  border-bottom: solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);
 }
 
 .calendar__btn-next, .calendar__btn-previous {
@@ -113,27 +113,27 @@
   display: flex;
 
   /*public*/
-  background-color: var(--cal__nav-btn--fill);
+  background-color: var(--ez-calendar__nav-btn--fill);
   /*parece estranho, mas o bg funciona como fill pq aplicaremos a mascara.*/
-  width: var(--cal__nav-btn--width);
-  height: var(--cal__nav-btn--height);
+  width: var(--ez-calendar__nav-btn--width);
+  height: var(--ez-calendar__nav-btn--height);
 }
 
 .calendar__btn-previous::after {
   /*public*/
-  -webkit-mask-image: var(--cal__nav-btn--previous-image);
-  mask-image: var(--cal__nav-btn--previous-image);
+  -webkit-mask-image: var(--ez-calendar__nav-btn--previous-image);
+  mask-image: var(--ez-calendar__nav-btn--previous-image);
 }
 
 .calendar__btn-next::after {
   /*public*/
-  -webkit-mask-image: var(--cal__nav-btn--next-image);
-  mask-image: var(--cal__nav-btn--next-image);
+  -webkit-mask-image: var(--ez-calendar__nav-btn--next-image);
+  mask-image: var(--ez-calendar__nav-btn--next-image);
 }
 
 .calendar__btn-next:hover::after, .calendar__btn-previous:hover::after {
   /*public*/
-  background-color: var(--cal__nav-btn--hover--fill);
+  background-color: var(--ez-calendar__nav-btn--hover--fill);
 }
 
 .calendar__lbl-month {
@@ -142,9 +142,9 @@
   font-size: var(--title--medium, 16px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
 }
 
 .calendar__line {
@@ -163,24 +163,24 @@
   font-size: var(--text--small, 12px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
-  padding: var(--cal__cell--padding);
-  margin: var(--cal__cell--margin);
-  min-width: var(--cal__cell--width);
-  border-radius: var(--cal__cell--border-radius);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+  padding: var(--ez-calendar__cell--padding);
+  margin: var(--ez-calendar__cell--margin);
+  min-width: var(--ez-calendar__cell--width);
+  border-radius: var(--ez-calendar__cell--border-radius);
 }
 
 
 .calendar__cell:hover {
   /*public*/
-  background-color: var(--cal__cell--over--background-color);
+  background-color: var(--ez-calendar__cell--over--background-color);
 }
 
 .calendar__cell--secondary {
   /*public*/
-  color: var(--cal__cell--outset--color);
+  color: var(--ez-calendar__cell--outset--color);
 }
 
 .calendar__cell--unselectable:hover {
@@ -195,15 +195,15 @@
   font-weight: var(--text-weight--large, 600);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  color: var(--cal--color);
-  text-shadow: var(--cal--text-shadow);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
 }
 
 .calendar__cell--selected, .calendar__cell--selected:hover {
   /*public*/
-  background-color: var(--cal__cell--selected--background-color);
-  color: var(--cal__cell--selected--color);
+  background-color: var(--ez-calendar__cell--selected--background-color);
+  color: var(--ez-calendar__cell--selected--color);
 }
 
 .calendar__body {
@@ -227,13 +227,13 @@
   padding: var(--space--extra-small, 6px);
 
   /*public*/
-  font-family: var(--cal--font-family);
-  text-shadow: var(--cal--text-shadow);
-  color: var(--cal__btn-today--color);
-  border-radius: var(--cal__btn-today--border-radius);
+  font-family: var(--ez-calendar--font-family);
+  text-shadow: var(--ez-calendar--text-shadow);
+  color: var(--ez-calendar__btn-today--color);
+  border-radius: var(--ez-calendar__btn-today--border-radius);
 }
 
 .calendar__btn-today:hover {
   /*public*/
-  background-color: var(--cal__btn-today--hover--background-color);
+  background-color: var(--ez-calendar__btn-today--hover--background-color);
 }

package/dist/collection/components/ez-calendar/ez-calendar.js

@@ -1,11 +1,11 @@
-import { FloatingManager } from '@sankhyalabs/core';
-import { Component, forceUpdate, h, Prop, Method, Event, Watch } from '@stencil/core';
+import { FloatingManager } from "@sankhyalabs/core";
+import { Component, forceUpdate, h, Prop, Method, Event, Watch } from "@stencil/core";
 export class EzCalendar {
   constructor() {
     this._firstRender = true;
-    this._todayLabel = 'Hoje';
-    this._weekDayLabels = ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'];
-    this._monthLabels = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
+    this._todayLabel = "Hoje";
+    this._weekDayLabels = ["D", "S", "T", "Q", "Q", "S", "S"];
+    this._monthLabels = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
     /**
      * A data selecionada no calendário
      */
@@ -26,18 +26,21 @@ export class EzCalendar {
     if (this.floating) {
       this._floatingID = FloatingManager.float(this._box, this._container, { autoClose: true, top, left, bottom, right });
       window.requestAnimationFrame(() => {
-        this._box.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+        this._box.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
       });
     }
   }
+  /**
+  * Método necessário para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espaço.
+  */
   async fitVertical(topOffset, bottomOffset) {
     const neededHeight = this._container.getBoundingClientRect().bottom + this._calendarHeight;
     const availableBottom = (window.innerHeight || document.documentElement.clientHeight) > neededHeight;
     if (availableBottom) {
-      this.show(topOffset + 'px', undefined, 'unset');
+      this.show(topOffset + "px", undefined, "unset");
     }
     else {
-      this.show('unset', undefined, bottomOffset + 'px');
+      this.show("unset", undefined, bottomOffset + "px");
     }
   }
   /**
@@ -223,7 +226,7 @@ export class EzCalendar {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "M\u00E9todo necess\u00E1rio para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espa\u00E7o.",
         "tags": []
       }
     },

package/dist/collection/components/ez-form/subcomponents/structure/Field.js

@@ -69,7 +69,7 @@ export const Field = ({ dataUnit, field, forceScroll, enabled }) => {
       const headers = strHeaders ? JSON.parse(strHeaders) : {};
       const maxfiles = Number(getProp(properties, "maxfiles") || 0);
       return (h("div", { class: "col col--sd-12 padding--small" }, loadingData ? h("place-holder", null) :
-        h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlupload: target, requestheaders: headers, maxfiles: maxfiles })));
+        h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlUpload: target, requestHeaders: headers, maxFiles: maxfiles })));
     case 'DATE':
       return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
         h("ez-date-input", { value: !value ? null : DateUtils.clearTime(value), label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key }));

package/dist/collection/components/ez-time-input/ez-time-input.js

@@ -97,7 +97,7 @@ export class EzTimeInput {
   render() {
     return (h(Host, null,
       h("ez-text-input", { ref: (el) => this._inputElem = el, value: this.viewValue, enabled: this.enabled, label: this.label, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, errorMessage: this.errorMessage },
-        h("ez-icon", { slot: "leftIcon", href: getAssetPath("./assets/actions-sprite.svg") + "#timer-outline" }))));
+        h("ez-icon", { slot: "leftIcon", href: getAssetPath("../assets/actions-sprite.svg") + "#timer-outline" }))));
   }
   static get is() { return "ez-time-input"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ez-upload/ez-upload.css

@@ -2,50 +2,50 @@
 
   /* dimensions */
   /*@doc Define a altura do componente.*/
-  --iu--height: 42px;
+  --ez-upload--height: 42px;
   /*@doc Define a largura do componente.*/
-  --iu--width: 100%;
+  --ez-upload--width: 100%;
   /*@doc Define a largura do slot que contém o ícone.*/
-  --iu__icon--width: 48px;
+  --ez-upload__icon--width: 48px;
 
   /* box--container */
   /*@doc Define a cor de fundo do container.*/
-  --iu__container--background-color: var(--background--medium, #d2dce9);
+  --ez-upload__container--background-color: var(--background--medium, #d2dce9);
 
   /* colors */
   /*@doc Define a cor de fundo do container.*/
-  --iu__color--primary: var(--color--primary, #008561);
+  --ez-upload__color--primary: var(--color--primary, #008561);
 
   /* espaçamento */
   /*@doc Define os espaçamentos extra pequenos no componente.*/
-  --iu--padding--extra-small: var(--space--extra-small, 3px);
+  --ez-upload--padding--extra-small: var(--space--extra-small, 3px);
   /*@doc Define os espaçamentos pequenos no componente.*/
-  --iu--padding--small: var(--space--small, 6px);
+  --ez-upload--padding--small: var(--space--small, 6px);
   /*@doc Define os espaçamentos médios no componente.*/
-  --iu--padding--medium: var(--space--medium, 12px);
+  --ez-upload--padding--medium: var(--space--medium, 12px);
   /*@doc Define os espaçamentos grandes no componente.*/
-  --iu--padding--large: var(--space--large, 24px);
+  --ez-upload--padding--large: var(--space--large, 24px);
 
   /* border */
   /*@doc Define a cor das bordas no componente.*/
-  --iu__border--color: var(--color-strokes, #DCE0E8);
+  --ez-upload__border--color: var(--color-strokes, #DCE0E8);
 
   /* text */
   /*@doc Define as sombras dos textos do componente.*/
-  --iu--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
+  --ez-upload--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
   /*@doc Define a cor dos textos do componente.*/
-  --iu--text--primary: var(--text-primary, #626e82);
+  --ez-upload--text--primary: var(--text-primary, #626e82);
   /*@doc Define o tamanho dos textos do componente.*/
-  --iu--font-size: var(--text--medium, 14px);
+  --ez-upload--font-size: var(--text--medium, 14px);
   /*@doc Define a família dos textos do componente.*/
-  --iu--font-family: var(--font-pattern, Arial);
+  --ez-upload--font-family: var(--font-pattern, Arial);
   /*@doc Define o peso dos textos do componente.*/
-  --iu--font-weight: var(--text-weight--large, 500);
+  --ez-upload--font-weight: var(--text-weight--large, 500);
 
   /*@doc Contém o ícone de cancelamento.*/
-  --iu__btn__cancel-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="8x" width="8px"><path d="M 8,0.8 7.2,0 4,3.2 0.8,0 0,0.8 3.2,4 0,7.2 0.8,8 4,4.8 7.2,8 8,7.2 4.8,4 Z"/></svg>');
+  --ez-upload__btn__cancel-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="8x" width="8px"><path d="M 8,0.8 7.2,0 4,3.2 0.8,0 0,0.8 3.2,4 0,7.2 0.8,8 4,4.8 7.2,8 8,7.2 4.8,4 Z"/></svg>');
   /*@doc Contém o ícone de arquivo.*/
-  --iu__file-icon-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="11x" width="9px"><path d="M 1.2272719,8.4999999 V 2.75 c 0,-1.1045695 1.4652499,-2 3.2727273,-2 1.8074777,0 3.2727281,0.8954305 3.2727281,2 V 8.9999999 C 7.7727273,9.690356 6.8569456,10.25 5.7272719,10.25 4.5975985,10.25 3.6818174,9.690356 3.6818174,8.9999999 V 3.75 c 0,-0.2761425 0.3663125,-0.5 0.8181818,-0.5 0.4518694,0 0.8181818,0.2238575 0.8181818,0.5 V 8.4999999 H 6.5454537 V 3.75 C 6.5454537,3.059644 5.6296725,2.5 4.4999992,2.5 3.3703258,2.5 2.4545446,3.059644 2.4545446,3.75 V 8.9999999 C 2.4545446,10.10457 3.9197945,11 5.7272719,11 7.5347496,11 9,10.10457 9,8.9999999 V 2.75 C 9,1.231217 6.9852809,0 4.4999992,0 2.0147181,5e-7 0,1.231217 0,2.75 v 5.7499999 z"/></svg>');
+  --ez-upload__file-icon-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="11x" width="9px"><path d="M 1.2272719,8.4999999 V 2.75 c 0,-1.1045695 1.4652499,-2 3.2727273,-2 1.8074777,0 3.2727281,0.8954305 3.2727281,2 V 8.9999999 C 7.7727273,9.690356 6.8569456,10.25 5.7272719,10.25 4.5975985,10.25 3.6818174,9.690356 3.6818174,8.9999999 V 3.75 c 0,-0.2761425 0.3663125,-0.5 0.8181818,-0.5 0.4518694,0 0.8181818,0.2238575 0.8181818,0.5 V 8.4999999 H 6.5454537 V 3.75 C 6.5454537,3.059644 5.6296725,2.5 4.4999992,2.5 3.3703258,2.5 2.4545446,3.059644 2.4545446,3.75 V 8.9999999 C 2.4545446,10.10457 3.9197945,11 5.7272719,11 7.5347496,11 9,10.10457 9,8.9999999 V 2.75 C 9,1.231217 6.9852809,0 4.4999992,0 2.0147181,5e-7 0,1.231217 0,2.75 v 5.7499999 z"/></svg>');
 
   /*private*/
   display: flex;
@@ -53,17 +53,17 @@
   position: relative;
 
   /*public*/
-  font-family: var(--iu--font-family);
-  font-size: var(--iu--font-size);
-  width: var(--iu--width);
-  font-weight: var(--iu--font-weight);
+  font-family: var(--ez-upload--font-family);
+  font-size: var(--ez-upload--font-size);
+  width: var(--ez-upload--width);
+  font-weight: var(--ez-upload--font-weight);
 }
 
 .iu {
   display: flex;
   flex-wrap: wrap;
-  background-color: var(--iu__container--background-color);
-  padding: var(--iu--padding--small);
+  background-color: var(--ez-upload__container--background-color);
+  padding: var(--ez-upload--padding--small);
   width: 100%;
   border-radius: 12px;
   box-sizing: border-box;
@@ -75,7 +75,7 @@
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  border: 2px dashed var(--iu__border--color);
+  border: 2px dashed var(--ez-upload__border--color);
   border-radius: 6px;
   box-sizing: border-box;
 }
@@ -85,7 +85,7 @@
   flex-wrap: wrap;
   justify-content: flex-start;
   width: 100%;
-  padding: 0 var(--iu--padding--medium) var(--iu--padding--medium) var(--iu--padding--medium);
+  padding: 0 var(--ez-upload--padding--medium) var(--ez-upload--padding--medium) var(--ez-upload--padding--medium);
   box-sizing: border-box;
 }
 
@@ -95,7 +95,7 @@
   justify-content: flex-start;
   align-items: center;
   align-self: center;
-  padding-bottom: var(--iu--padding--extra-small);
+  padding-bottom: var(--ez-upload--padding--extra-small);
   box-sizing: border-box;
   white-space: nowrap;
   overflow: hidden;
@@ -118,7 +118,7 @@
   justify-content: center;
   align-items: center;
   height: 100%;
-  border: 1px dashed var(--iu__border--color);
+  border: 1px dashed var(--ez-upload__border--color);
   border-radius: 6px;
   box-sizing: border-box;
 }
@@ -126,7 +126,7 @@
 .box__container {
   display: flex;
   flex-wrap: wrap;
-  background-color: var(--iu__container--background-color);
+  background-color: var(--ez-upload__container--background-color);
   padding: 6px;
   width: 100%;
   border-radius: 12px;
@@ -145,7 +145,7 @@ progress[value] {
   display: flex;
   width: 100%;
   appearance: none;
-  border: 1px solid var(--iu__border--color);
+  border: 1px solid var(--ez-upload__border--color);
   height: 12px;
   justify-content: flex-start;
   align-items: center;
@@ -165,7 +165,7 @@ progress[value]::-webkit-progress-bar {
 progress[value]::-webkit-progress-value {
   display: flex;
   width: 100%;
-  background-color: var(--iu__color--primary);
+  background-color: var(--ez-upload__color--primary);
 }
 
 .text--center {
@@ -183,8 +183,8 @@ progress[value]::-webkit-progress-value {
 }
 
 .text--primary {
-  color: var(--iu--text--primary);
-  text-shadow: var(--iu--text-shadow);
+  color: var(--ez-upload--text--primary);
+  text-shadow: var(--ez-upload--text-shadow);
 }
 
 .text--ellipsis {
@@ -214,8 +214,8 @@ progress[value]::-webkit-progress-value {
   background-color: var(--text--primary, #008561);
   width: 8px;
   height: 8px;
-  -webkit-mask-image: var(--iu__btn__cancel-image);
-  mask-image: var(--iu__btn__cancel-image);
+  -webkit-mask-image: var(--ez-upload__btn__cancel-image);
+  mask-image: var(--ez-upload__btn__cancel-image);
 }
 
 .iu_header {
@@ -232,11 +232,11 @@ progress[value]::-webkit-progress-value {
   white-space: nowrap;
 
   /*public*/
-  font-family: var(--iu--font-family);
+  font-family: var(--ez-upload--font-family);
   font-size: var(--text--extra-small);
-  font-weight: var(--iu--font-weight);
-  color: var(--iu--text--primary);
-  text-shadow: var(--iu--text-shadow);
+  font-weight: var(--ez-upload--font-weight);
+  color: var(--ez-upload--text--primary);
+  text-shadow: var(--ez-upload--text-shadow);
 }
 
 .iu__file-icon {
@@ -256,8 +256,8 @@ progress[value]::-webkit-progress-value {
   background-color: var(--text--primary, #626e82);
   width: 9px;
   height: 11px;
-  -webkit-mask-image: var(--iu__file-icon-image);
-  mask-image: var(--iu__file-icon-image);
+  -webkit-mask-image: var(--ez-upload__file-icon-image);
+  mask-image: var(--ez-upload__file-icon-image);
 }
 
 .iu__file-icon:disabled::after {
@@ -268,7 +268,7 @@ progress[value]::-webkit-progress-value {
   justify-content: center;
   display: flex;
   cursor: pointer;
-  padding: var(--iu--padding--large) 0px;
+  padding: var(--ez-upload--padding--large) 0px;
   box-sizing: border-box;
 }