@sankhyalabs/sankhyablocks 1.1.24 → 1.1.25

package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-icon/ez-icon.css

@@ -0,0 +1,176 @@
+:host {
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  /* @doc Define a cor do ícone. */
+  --ez-icon--color: var(--icon--color, #ffffff);
+}
+
+svg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  fill: var(--ez-icon--color);
+}
+
+.x-small {
+  width: 12px;
+  height: 12px;
+}
+
+.small {
+  width: 16px;
+  height: 16px;
+}
+
+.medium {
+  width: 20px;
+  height: 20px;
+}
+
+.large {
+  width: 24px;
+  height: 24px;
+}
+
+.x-large {
+  width: 30px;
+  height: 30px;
+}
+
+[class^="ez-icon-"], [class*=" ez-icon-"] {
+  color: var(--ez-icon--color);
+}
+
+/*
+  START CSS GENERATED BY EZ-DESIGN ICONS, SEE MORE AT ez-design\scripts\fontsGenerator.js.
+  WHEN ADD NEW ICONS THIS CSS NEED TO BE UPDATED
+*/
+[class^="ez-icon-"], [class*=" ez-icon-"] {
+  font-family: 'ez-icons' !important;
+  font-size: 16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.ez-icon-account-outline:before { content: "\ea01"; }
+.ez-icon-account:before { content: "\ea02"; }
+.ez-icon-alert-circle-inverted:before { content: "\ea03"; }
+.ez-icon-alert-circle:before { content: "\ea04"; }
+.ez-icon-alert-mail:before { content: "\ea05"; }
+.ez-icon-alert-outline:before { content: "\ea06"; }
+.ez-icon-alert-popup:before { content: "\ea07"; }
+.ez-icon-apps:before { content: "\ea08"; }
+.ez-icon-arrow_back:before { content: "\ea09"; }
+.ez-icon-bell-inverted:before { content: "\ea0a"; }
+.ez-icon-bell:before { content: "\ea0b"; }
+.ez-icon-business-center:before { content: "\ea0c"; }
+.ez-icon-calendar-text:before { content: "\ea0d"; }
+.ez-icon-calendar:before { content: "\ea0e"; }
+.ez-icon-check-circle-inverted:before { content: "\ea0f"; }
+.ez-icon-check-circle:before { content: "\ea10"; }
+.ez-icon-check:before { content: "\ea11"; }
+.ez-icon-chevron-down:before { content: "\ea12"; }
+.ez-icon-chevron-left:before { content: "\ea13"; }
+.ez-icon-chevron-right:before { content: "\ea14"; }
+.ez-icon-chevron-up:before { content: "\ea15"; }
+.ez-icon-circle--medium:before { content: "\ea16"; }
+.ez-icon-circle:before { content: "\ea17"; }
+.ez-icon-clipboard:before { content: "\ea18"; }
+.ez-icon-close-circle-inverted:before { content: "\ea19"; }
+.ez-icon-close-circle:before { content: "\ea1a"; }
+.ez-icon-close:before { content: "\ea1b"; }
+.ez-icon-comment-inverted:before { content: "\ea1c"; }
+.ez-icon-comment:before { content: "\ea1d"; }
+.ez-icon-configuration:before { content: "\ea1e"; }
+.ez-icon-copy:before { content: "\ea1f"; }
+.ez-icon-crop:before { content: "\ea20"; }
+.ez-icon-delete:before { content: "\ea21"; }
+.ez-icon-description:before { content: "\ea22"; }
+.ez-icon-dot-notification:before { content: "\ea23"; }
+.ez-icon-dots-horizontal:before { content: "\ea24"; }
+.ez-icon-dots-vertical:before { content: "\ea25"; }
+.ez-icon-drag-indicator:before { content: "\ea26"; }
+.ez-icon-edit-file:before { content: "\ea27"; }
+.ez-icon-edit-table:before { content: "\ea28"; }
+.ez-icon-edit-time:before { content: "\ea29"; }
+.ez-icon-edit:before { content: "\ea2a"; }
+.ez-icon-email-inverted:before { content: "\ea2b"; }
+.ez-icon-email:before { content: "\ea2c"; }
+.ez-icon-error-octagon:before { content: "\ea2d"; }
+.ez-icon-expand:before { content: "\ea2e"; }
+.ez-icon-eye-off:before { content: "\ea2f"; }
+.ez-icon-eye:before { content: "\ea30"; }
+.ez-icon-favorite:before { content: "\ea31"; }
+.ez-icon-file-download:before { content: "\ea32"; }
+.ez-icon-file-upload:before { content: "\ea33"; }
+.ez-icon-filter:before { content: "\ea34"; }
+.ez-icon-find-file:before { content: "\ea35"; }
+.ez-icon-find-page:before { content: "\ea36"; }
+.ez-icon-format-color-fill:before { content: "\ea37"; }
+.ez-icon-help-circle-outline:before { content: "\ea38"; }
+.ez-icon-help-inverted:before { content: "\ea39"; }
+.ez-icon-help:before { content: "\ea3a"; }
+.ez-icon-home:before { content: "\ea3b"; }
+.ez-icon-language:before { content: "\ea3c"; }
+.ez-icon-launch:before { content: "\ea3d"; }
+.ez-icon-lightbulb:before { content: "\ea3e"; }
+.ez-icon-list:before { content: "\ea3f"; }
+.ez-icon-loading:before { content: "\ea40"; }
+.ez-icon-lock-outline:before { content: "\ea41"; }
+.ez-icon-lock:before { content: "\ea42"; }
+.ez-icon-menu:before { content: "\ea43"; }
+.ez-icon-minus-circle-inverted:before { content: "\ea44"; }
+.ez-icon-minus:before { content: "\ea45"; }
+.ez-icon-money-off:before { content: "\ea46"; }
+.ez-icon-money:before { content: "\ea47"; }
+.ez-icon-north-west:before { content: "\ea48"; }
+.ez-icon-pause:before { content: "\ea49"; }
+.ez-icon-payments:before { content: "\ea4a"; }
+.ez-icon-play:before { content: "\ea4b"; }
+.ez-icon-plus-circle-inverted:before { content: "\ea4c"; }
+.ez-icon-plus-circle:before { content: "\ea4d"; }
+.ez-icon-plus:before { content: "\ea4e"; }
+.ez-icon-power:before { content: "\ea4f"; }
+.ez-icon-push-pin:before { content: "\ea50"; }
+.ez-icon-restore:before { content: "\ea51"; }
+.ez-icon-return:before { content: "\ea52"; }
+.ez-icon-rotate:before { content: "\ea53"; }
+.ez-icon-save:before { content: "\ea54"; }
+.ez-icon-search:before { content: "\ea55"; }
+.ez-icon-settings-inverted:before { content: "\ea56"; }
+.ez-icon-settings:before { content: "\ea57"; }
+.ez-icon-share:before { content: "\ea58"; }
+.ez-icon-shield:before { content: "\ea59"; }
+.ez-icon-south-east:before { content: "\ea5a"; }
+.ez-icon-success-circle:before { content: "\ea5b"; }
+.ez-icon-sync:before { content: "\ea5c"; }
+.ez-icon-table:before { content: "\ea5d"; }
+.ez-icon-timer-outline:before { content: "\ea5e"; }
+.ez-icon-user-circle:before { content: "\ea5f"; }
+.ez-icon-warning-minus:before { content: "\ea60"; }
+.ez-icon-warning-triangle:before { content: "\ea61"; }
+/*
+  END CSS GENERATED BY EZ-DESIGN ICONS
+*/
+
+.x-small--font {
+  font-size: 12px;
+}
+
+.small--font {
+  font-size: 16px;
+}
+
+.medium--font {
+  font-size: 20px;
+}
+
+.large--font {
+  font-size: 24px;
+}
+
+.x-large--font {
+  font-size: 30px;
+}

package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-label-chip/ez-label-chip.css

@@ -0,0 +1,139 @@
+:host {
+  /* dimensions */
+  /*@doc Define a altura do chip.*/
+  --ez-label-chip--height: 36px;
+
+  /* Label */
+  /*@doc Define o tamanho do label.*/
+  --ez-label-chip__label--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte do label.*/
+  --ez-label-chip__label--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do label.*/
+  --ez-label-chip__label--font-weight: var(--text-weight--large, 600);
+  /*@doc Define o espaçamento do label.*/
+  --ez-label-chip__label--space--medium: var(--space--medium, 12px);
+  /*@doc Define a cor do texto e do ícone.*/
+  --ez-label-chip__label--title--primary: var(--title--primary, #919191);
+
+  /* Label Container */
+  /*@doc Define o raio da borda do container do chip.*/
+  --ez-label-chip__label__container--border-radius: var(--border--radius-large, 24px);
+  /*@doc Define o estilo da borda do container.*/
+  --ez-label-chip__label__container--border: 1px solid;
+  /*@doc Define a cor da borda do container.*/
+  --ez-label-chip__label__container--border-color-strokes: var(--color--strokes, #DCE0E8);
+  /*@doc Define a cor do texto, do ícone do label e do botão de remoção (quando o chip está ativo).*/
+  --ez-label-chip__label__container--color-primary: var(--color--primary, #008561);
+  /*@doc Define a cor da borda e do fundo quando o chip está desativado.*/
+  --ez-label-chip__label__container-color--disable-secondary: var(--color--disable-secondary, #F2F5F8);
+  /*@doc Define a cor de fundo do container quando ativo.*/
+  --ez-label-chip__label__container--background-color: #0085610F;
+  /*@doc Define a cor da borda do container quando ativo.*/
+  --ez-label-chip__label__container--border-color: #0085610F;
+  /*@doc Define a cor da borda do container quando o cursor está sobre ele.*/
+  --ez-label-chip__label__container--default--border-color--hover: var(--color--primary-600, #007a5a);
+  /*@doc Define a cor do fundo do container quando o cursor está sobre ele.*/
+  --ez-label-chip__label__container--default--background-color--hover: var(--color--primary-200, #f2faf8);
+  /*@doc Define a cor do texto e do ícone quando o chip está desabilitado.*/
+  --ez-label-chip__label__container--text--disabled: var(--text--disable, #AFB6C0);
+
+  /* Buttons */
+  /* @doc Contém o ícone do botão de fechamento. */
+  --ez-label-chip__btn__close--image: url('data:image/svg+xml;utf8,<svg width="8" height="8" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg"><path d="M 4.7098145,3.9968334 7.8535703,0.85318776 C 7.9473034,0.75946455 8,0.63233985 8,0.49978585 8,0.36723841 7.947304,0.24011361 7.8535703,0.14638378 7.7598354,0.05266059 7.6327257,6.48e-8 7.500152,6.48e-8 7.3676457,6.48e-8 7.2404691,0.0526608 7.1467354,0.14638378 L 4.00298,3.2900293 0.8591984,0.14638378 C 0.76546463,0.05266059 0.63834103,6.48e-8 0.50578123,6.48e-8 0.3732281,6.48e-8 0.24609783,0.05266059 0.15236397,0.14638378 0.05863012,0.24011361 0.00597395,0.36723841 0.00597395,0.49978585 c 0,0.132554 0.05265617,0.2596787 0.14639002,0.35340191 L 3.2961455,3.9968334 0.15236397,7.1411589 C 0.10466427,7.1872561 0.06663114,7.2424161 0.04046961,7.303371 0.01431473,7.3643212 5.6180845e-4,7.429943 1.6859246e-5,7.4962264 -5.2808998e-4,7.5625744 0.01214297,7.6283944 0.03729854,7.6897476 c 0.02514888,0.061416 0.06227604,0.1171794 0.1092096,0.1640783 0.0469402,0.046903 0.10274083,0.083936 0.16415749,0.1090508 0.0614166,0.025114 0.12721688,0.037703 0.19355667,0.037103 0.06634,-5.714e-4 0.13190027,-0.014457 0.19284393,-0.04064 0.0609507,-0.026246 0.11606474,-0.064351 0.16213217,-0.1120492 L 4.00298,4.7036374 7.1467354,7.8472967 c 0.093734,0.09373 0.2209103,0.1463572 0.3534166,0.1463572 0.1325737,0 0.2596834,-0.052623 0.3534183,-0.1463572 C 7.9473034,7.753567 8,7.6264624 8,7.493895 8,7.3613281 7.9473086,7.2342224 7.8535703,7.1404927 Z"/></svg>');
+}
+
+.btn-close {
+  align-items: flex-start;
+  display: flex;
+  outline: none;
+  border: none;
+  padding: 0px 0px 0px 6px;
+  background-color: unset;
+  cursor: pointer;
+}
+
+.btn-close::after {
+  content: '';
+  display: flex;
+  background-color: var(--ez-label-chip__label__container--color-primary);
+  width: 8px;
+  height: 8px;
+  -webkit-mask-image: var(--ez-label-chip__btn__close--image);
+  mask-image: var(--ez-label-chip__btn__close--image);
+}
+
+.label__container {
+  /*private*/
+  width: fit-content;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  align-items: center;
+  background-color: #FFFFFF;
+  align-self: center;
+  color: var(--ez-label-chip__label--title--primary);
+  fill: var(--ez-label-chip__label--title--primary);
+  border: var(--ez-label-chip__label__container--border);
+  border-radius: var(--ez-label-chip__label__container--border-radius);
+  border-color: var(--ez-label-chip__label__container--border-color-strokes);
+  padding-right: var(--ez-label-chip__label--space--medium);
+  padding-left: var(--ez-label-chip__label--space--medium);
+}
+
+.label__container:hover {
+  border-color: var(--ez-label-chip__label__container--default--border-color--hover);
+  background-color: var(--ez-label-chip__label__container--default--background-color--hover);
+}
+
+.label__container--active {
+  /*private*/
+  width: fit-content;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  align-items: center;
+  align-self: center;
+  border: var(--ez-label-chip__label__container--border);
+  border-radius: var(--ez-label-chip__label__container--border-radius);
+  padding-right: var(--ez-label-chip__label--space--medium);
+  padding-left: var(--ez-label-chip__label--space--medium);
+  fill: var(--ez-label-chip__label__container--color-primary);
+  color: var(--ez-label-chip__label__container--color-primary);
+  border-color: var(--ez-label-chip__label__container--border-color);
+  background-color: var(--ez-label-chip__label__container--background-color);
+}
+
+
+.label__container--disabled {
+  width: fit-content;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  align-items: center;
+  align-self: center;
+  border: var(--ez-label-chip__label__container--border);
+  border-color: var(--ez-label-chip__label__container-color--disable-secondary);
+  border-radius: var(--ez-label-chip__label__container--border-radius);
+  padding-right: var(--ez-label-chip__label--space--medium);
+  padding-left: var(--ez-label-chip__label--space--medium);
+  fill: var(--ez-label-chip__label__container--text--disabled);
+  color: var(--ez-label-chip__label__container--text--disabled);
+  background-color: var(--ez-label-chip__label__container-color--disable-secondary);
+}
+
+label {
+  /*private*/
+  display: flex;
+  align-items: center;
+  font-weight: var(--ez-label-chip__label--font-weight);
+  cursor: pointer;
+  /*public*/
+  height: var(--ez-label-chip--height);
+  font-family: var(--ez-label-chip__label--font-family);
+  font-size: var(--ez-label-chip__label--font-size);
+}
+
+.label__icon {
+  display: flex;
+  cursor: pointer;
+}

package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-list/ez-list.css

@@ -0,0 +1,335 @@
+:host {
+
+  /* @doc Define a camada de visibilidae do componente. */
+  --ez-list__host--z-index: var(--visible, 1);
+  /* @doc Define o raio da borda do componente. */
+  --ez-list__host--border-radius: var(--border--radius-medium, 12px);
+  /* @doc Define o espaçamento entre a lista e o componente. */
+  --ez-list__host--padding: var(--space--medium, 12px);
+
+  /* @doc Define o espaçamento interno do ícone. */
+  --ez-list__icon__padding: var(--space--small, 6px);
+  /* @doc Define a cor do ícone de arrasto do item da lista. */
+  --ez-list__icon--color: #AFB6C0;
+
+  /* @doc Define o espaçamento externo do item da lista. */
+  --ez-list__item__margin: 0 var(--space--small, 6px);
+  /* @doc Define a cor do texto do item da lista. */
+  --ez-list__item--color: var(--title--primary, #2b3a54);
+  /* @doc Define o estilo borda inferior do item da lista. */
+  --ez-list__item--border-bottom: var(--border--small, 1px solid);
+  /* @doc Define a cor da borda inferior do item da lista. */
+  --ez-list__item--border-color: var(--title--primary, #2b3a54);
+  /* @doc Define o estilo do texto do item da lista. */
+  --ez-list__item--font-family: var(--font-pattern, "Sora");
+  /* @doc Define o tamanho do texto do item da lista. */
+  --ez-list__item--font-size: var(--text--medium, 14px);
+
+  /* @doc Define o espaçamento lateral direito para items selecionados. */
+  --ez-list__selectable--padding-right: var(--space--small, 6px);
+  /* @doc Define o espaçamento lateral esquerdo para items selecionados. */
+  --ez-list__selectable--padding-left: var(--space--small, 6px);
+
+  /*@doc Define o raio da borda de items selecionados.*/
+  --ez-list__selected-item__border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a cor de fundo de items selecionados.*/
+  --ez-list__selected-item__background: var(--color--primary-300, #E2F4EF);
+
+  /* @doc Define o estilo do texto do grupo da lista. */
+  --ez-list__group--font-family: var(--font-pattern, "Sora");
+  /* @doc Define o tamanho do texto do grupo da lista. */
+  --ez-list__group--font-size: var(--text--medium, 14px);
+  /* @doc Define o peso do texto do grupo da lista. */
+  --ez-list__group--font-weight: var(--text-weight--large, 600);
+  /* @doc Define o espaçamento inferior do grupo da lista. */
+  --ez-list__group--padding-bottom: var(--space-small, 6px);
+
+  /* @doc Define o estilo do texto da área de transferência de grupos. */
+  --ez-list__group__overlay--font-family: var(--font-pattern, "Sora");
+  /* @doc Define o tamanho do texto da área de transferência de grupos. */
+  --ez-list__group__overlay--font-size: var(--text--medium, 14px);
+
+  /*@doc Define o raio da borda da barra de rolagem do container de grupos.*/
+  --ez-list__group-container__scrollbar--border-radius: var(--border--radius-large, 24px);
+  /*@doc Define a largura da barra de rolagem do container de grupos.*/
+  --ez-list__group-container__scrollbar--width: var(--space--medium, 12px);
+  /*@doc Define a cor da barra de rolagem do container de grupos.*/
+  --ez-list__group-container__scrollbar--background-color: var(--text--primary, #626e82);
+
+  /* @doc Define a cor da borda pontilhada sobre os elementos da lista. */
+  --ez-list__over--border--color: var(--color--primary, #008561);
+
+  /*@doc Define o espaçamento do container de itens arrastáveis .*/
+  --ez-list__draggable__list--padding-bottom: var(--space--small, 6px);
+
+  /*@doc Define a altura do container para arrasto para última posição .*/
+  --ez-list__last-droppable-space--height: var(--space--small, 6px);
+
+  /*@doc Define o raio da borda da barra de rolagem do componente.*/
+  --ez-list__draggable__scrollbar--border-radius: var(--border--radius-large, 24px);
+  /*@doc Define a largura da barra de rolagem do componente.*/
+  --ez-list__draggable__scrollbar--width: var(--space--medium, 12px);
+  /*@doc Define a cor da barra de rolagem do componente.*/
+  --ez-list__draggable__scrollbar--background-color: var(--text--primary, #626e82);
+  /* @doc Define a imagem do ícone de drag. */
+  --ez-list__draggable__icon--image: url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><path d="m 6.75,2.25 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z m -3,3 h 1.5 v 1.5 h -1.5 z m 3,0 h 1.5 v 1.5 h -1.5 z"/></svg>');
+
+  max-height: 100%;
+  width: 100%;
+  background-color: #fff;
+  display: flex;
+  z-index: var(--ez-list__host--z-index);
+}
+
+p {
+  margin: 0;
+}
+
+.draggable {
+  display: flex;
+  align-items: center;
+  border-top: 1px dashed #fff;
+  justify-content: space-between;
+  background-color: #fff;
+  font-family: var(--ez-list__item--font-family);
+  font-size: var(--ez-list__item--font-size);
+  flex: 1;
+}
+
+.dragging {
+  background: #FFFFFF;
+  /* Primary/color--primary */
+
+  border: 1px solid #008561;
+  box-sizing: border-box;
+  box-shadow: 0px 0px 16px rgba(0, 38, 111, 0.122);
+  border-radius: 6px;
+}
+
+.selectable {
+  cursor: pointer;
+  padding-right: var(--ez-list__selectable--padding-right);
+  padding-left: var(--ez-list__selectable--padding-left);
+}
+
+.selectable-container {
+  margin: 0px !important;
+}
+
+.item-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.draggable-list {
+  color: var(--text-color);
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  max-height: 100%;
+}
+
+.draggable-list li {
+  background-color: #fff;
+  display: flex;
+  margin: var(--ez-list__item__margin);
+  font-family: var(--ez-list__item--font-family);
+  font-size: var(--ez-list__item--font-size);
+  color: var(--ez-list__item--color);
+  height: 32px;
+}
+
+.over {
+  border-top: 1px dashed var(--ez-list__over--border--color);
+}
+
+.last-droppable-space {
+  height: var(--ez-list__last-droppable-space--height);
+}
+
+.draggable-selected {
+  background-color: var(--background--strong) !important;
+}
+
+.draggable-selected div:hover {
+  background-color: var(--background--strong) !important;
+}
+
+
+/* Precisamos dos tokens do scrollbar */
+.draggable-list::-webkit-scrollbar-track {
+  background-color: #f0f2f5;
+}
+
+.draggable-list::-webkit-scrollbar-thumb {
+  background-color: var(--ez-list__draggable__scrollbar--background-color);
+  border-radius: var(--ez-list__draggable__scrollbar--border-radius);
+}
+
+.draggable-list::-webkit-scrollbar {
+  background-color: #f0f2f5;
+  width: var(--ez-list__draggable__scrollbar--width);
+  max-width: var(--ez-list__draggable__scrollbar--width);
+  min-width: var(--ez-list__draggable__scrollbar--width);
+}
+
+.draggable-icon {
+  align-items: flex-start;
+  display: flex;
+  outline: none;
+  border: none;
+  background-color: unset;
+}
+
+.draggable-icon::after {
+  content: '';
+  display: flex;
+  background-color: var(--ez-list__icon--color);
+  width: 18px;
+  height: 18px;
+  -webkit-mask-image: var(--ez-list__draggable__icon--image);
+  mask-image: var(--ez-list__draggable__icon--image);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.checkbox {
+  width: fit-content;
+}
+
+.text--ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.group-container {
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  overflow-y: auto;
+  outline: none;
+  width: 100%;
+}
+
+.group-name {
+  font-family: var(--ez-list__group--font-family);
+  font-size: var(--ez-list__group--font-size);
+  font-weight: var(--ez-list__group--font-weight);
+  padding-bottom: var(--ez-list__group--padding-bottom);
+  -webkit-user-select: none;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+}
+
+
+/* Precisamos dos tokens do scrollbar */
+.group-container::-webkit-scrollbar-track {
+  background-color: #f0f2f5;
+}
+
+.group-container::-webkit-scrollbar-thumb {
+  background-color: var(--ez-list__group-container__scrollbar--background-color);
+  border-radius: var(--ez-list__group-container__scrollbar--border-radius);
+}
+
+.group-container::-webkit-scrollbar {
+  background-color: #f0f2f5;
+  width: var(--ez-list__group-container__scrollbar--width);
+  max-width: var(--ez-list__group-container__scrollbar--width);
+  min-width: var(--ez-list__group-container__scrollbar--width);
+}
+
+.section-container {
+  display: flex;
+  position: relative;
+  height: 100%;
+}
+
+.items-container {
+  width: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+  outline: none;
+}
+
+.group-items-container {
+  width: 100%;
+  max-height: 100%;
+  height: 100%;
+  outline: none;
+}
+
+.items-container::-webkit-scrollbar-track {
+  background-color: #f0f2f5;
+}
+
+.items-container::-webkit-scrollbar-thumb {
+  background-color: var(--ez-list__draggable__scrollbar--background-color);
+  border-radius: var(--ez-list__draggable__scrollbar--border-radius);
+}
+
+.items-container::-webkit-scrollbar {
+  background-color: #f0f2f5;
+  width: var(--ez-list__draggable__scrollbar--width);
+  max-width: var(--ez-list__draggable__scrollbar--width);
+  min-width: var(--ez-list__draggable__scrollbar--width);
+}
+
+.group-overlay {
+  font-family: var(--ez-list__group__overlay--font-family);
+  font-size: var(--ez-list__group__overlay--font-size);
+  background: rgba(226, 244, 239, 0.8);
+  border: 1px solid #008561;
+  border-radius: 8px;
+  position: absolute;
+  display: none;
+  place-items: center;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+  margin: 0;
+  cursor: pointer;
+}
+
+.presetedHeight {
+  min-height: 100px;
+}
+
+.overlay-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  font-size: 50px;
+  color: white;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+}
+
+.selected-item {
+  background: var(--ez-list__selected-item__background);
+  border-radius: var(--ez-list__selected-item__border-radius);
+}
+
+.slot-item {
+  align-items: flex-end;
+}
+
+.overGroup {
+  background: rgba(226, 244, 239, 0.8);
+  border: 1px solid #008561;
+  box-sizing: border-box;
+  border-radius: 8px;
+  padding-top: 6px;
+}