plataforma-fundacao-componentes 2.24.1 → 2.25.1

package/dist/index.css

@@ -3485,26 +3485,28 @@ max-width	100%	540px	720px	960px	1140px
   warningLight: #ffeb98;
   warningDark: #765f00; }
 
-.component-etiqueta {
+.etiqueta {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 25px;
   border: 1px solid rgba(0, 0, 0, 0);
   border-radius: 20px;
-  padding: 10px; }
-  .component-etiqueta .component-etiqueta-text {
+  padding: 0 10px; }
+  .etiqueta .etiqueta-text {
     white-space: nowrap;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     font-size: 14px;
     font-weight: 700;
     -webkit-user-select: none;
     -moz-user-select: none;
     user-select: none;
-    margin-bottom: 2px; }
-  .component-etiqueta .component-etiqueta-icon {
+    margin-bottom: 2px;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+    vertical-align: middle; }
+  .etiqueta .etiqueta-icon {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -3513,75 +3515,75 @@ max-width	100%	540px	720px	960px	1140px
     user-select: none;
     margin-right: 8px;
     margin-bottom: 1px; }
-    .component-etiqueta .component-etiqueta-icon svg {
+    .etiqueta .etiqueta-icon svg {
       height: 14px;
       width: 14px; }
-  .component-etiqueta.fit-content {
+  .etiqueta.fit-content {
     width: -moz-fit-content;
     width: fit-content;
     padding: 8px 12px; }
 
-.component-etiqueta.programas {
+.etiqueta.programas {
   background-color: rgba(0, 0, 0, 0);
   color: #3fa110;
   border-color: #3fa110; }
 
-.component-etiqueta.em-edicao {
+.etiqueta.em-edicao {
   background-color: #d7e6c8;
   color: #33820d;
   border-color: #d7e6c8; }
 
-.component-etiqueta.em-revisao {
+.etiqueta.em-revisao {
   background-color: #cbe5fd;
   color: #2b517b;
   border-color: #cbe5fd; }
 
-.component-etiqueta.em-aprovacao {
+.etiqueta.em-aprovacao {
   background-color: #ffcd00;
   color: #765f00;
   border-color: #ffcd00; }
 
-.component-etiqueta.finalizado {
+.etiqueta.finalizado {
   background-color: #cdd3cd;
   color: #5a645a;
   border-color: #cdd3cd; }
 
-.component-etiqueta.aprovado {
+.etiqueta.aprovado {
   background-color: #3fa110;
   color: #fefefe;
   border-color: #3fa110; }
 
-.component-etiqueta.reprovado {
+.etiqueta.reprovado {
   background-color: #e60000;
   color: #fefefe;
   border-color: #e60000; }
 
-.component-etiqueta.cancelado {
+.etiqueta.cancelado {
   background-color: rgba(0, 0, 0, 0);
   color: #ab4745;
   border-color: #ab4745; }
 
-.component-etiqueta.outline-primary {
+.etiqueta.outline-primary {
   background-color: rgba(0, 0, 0, 0);
   color: #3fa110;
   border-color: #3fa110; }
 
-.component-etiqueta.outline-danger {
+.etiqueta.outline-danger {
   background-color: rgba(0, 0, 0, 0);
   color: #ab4745;
   border-color: #ab4745; }
 
-.component-etiqueta.outline-blue {
+.etiqueta.outline-blue {
   background-color: rgba(0, 0, 0, 0);
   color: #2b517b;
   border-color: #2b517b; }
 
-.component-etiqueta.outline-dark {
+.etiqueta.outline-dark {
   background-color: rgba(0, 0, 0, 0);
   color: #323c32;
   border-color: #323c32; }
 
-.component-etiqueta.outline-warning-dark {
+.etiqueta.outline-warning-dark {
   background-color: rgba(0, 0, 0, 0);
   color: #765f00;
   border-color: #765f00; }
@@ -4794,7 +4796,8 @@ header.component-header {
      -moz-user-select: none;
           user-select: none;
   position: relative;
-  height: 45px;
+  min-height: 45px;
+  height: auto;
   width: 100%;
   display: flex;
   padding: 1px 9px 1px 3px;
@@ -5362,6 +5365,329 @@ header.component-header {
     .component-paginator .component-paginator-right-arrow svg {
       max-height: 16px; }
 
+@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");
+:export {
+  white: #fefefe;
+  darkenWhite: #efefef;
+  black: #121212;
+  transparent: rgba(0, 0, 0, 0);
+  primary: #3fa110;
+  primaryDark: #33820d;
+  primaryLight: #d7e6c8;
+  secondaryDarker: #323c32;
+  secondaryDark: #5a645a;
+  blueDarker: #2b517b;
+  secondary: #828a82;
+  secondaryLight: #cdd3cd;
+  secondaryLighter: #f8f9f7;
+  danger: #e60000;
+  dangerLight: #ffb4b4;
+  dangerDark: #ab4745;
+  warning: #ffcd00;
+  warningLight: #ffeb98;
+  warningDark: #765f00; }
+
+:export {
+  widthXs: 575.98px;
+  widthSm: 767.98px;
+  widthMd: 991.98px;
+  widthLg: 1199.98px; }
+
+:root {
+  --rowPadding: 0;
+  --colPadding: 8px; }
+
+body.sb-show-main.sb-main-padded {
+  padding: 15px; }
+
+*.nunito {
+  font-family: "Nunito", sans-serif; }
+
+*:not(.nunito) {
+  font-family: "Exo 2", sans-serif; }
+
+.document-grabbing {
+  cursor: grabbing !important; }
+
+h1 {
+  font-size: 36px;
+  font-weight: 600;
+  margin: 0; }
+
+h2 {
+  font-size: 32px;
+  font-weight: 500;
+  margin: 0; }
+
+h3 {
+  font-size: 24px;
+  font-weight: 500;
+  margin: 0; }
+
+h4 {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0; }
+
+h5 {
+  font-family: "Nunito", sans-serif;
+  font-size: 24px;
+  font-weight: 400;
+  margin: 0; }
+
+.fade-enter {
+  position: absolute;
+  opacity: 0; }
+
+.fade-enter-active {
+  transition: opacity 0.2s ease;
+  position: absolute;
+  opacity: 1; }
+
+.fade-exit {
+  position: absolute;
+  opacity: 1; }
+
+.fade-exit-active {
+  transition: opacity 0.15s ease;
+  position: absolute;
+  opacity: 0; }
+
+* {
+  box-sizing: border-box; }
+  *::-webkit-scrollbar-track {
+    background-color: #f8f9f7;
+    border-radius: 20px; }
+  *::-webkit-scrollbar {
+    width: 12px;
+    height: 12px; }
+  *::-webkit-scrollbar-thumb {
+    -webkit-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+    border-radius: 10px;
+    background-color: #cdd3cd;
+    border-width: 3px;
+    border-style: solid;
+    border-color: #f8f9f7; }
+    *::-webkit-scrollbar-thumb:hover {
+      border-width: 2px;
+      background-color: #bfc7bf; }
+  *::-webkit-scrollbar-button {
+    display: none; }
+
+.scroll-white::-webkit-scrollbar-track {
+  background-color: #fefefe;
+  border-radius: 20px; }
+
+.scroll-white::-webkit-scrollbar-thumb {
+  background-color: #cdd3cd;
+  border-color: #fefefe; }
+  .scroll-white::-webkit-scrollbar-thumb:hover {
+    background-color: #bfc7bf; }
+
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  list-style: none; }
+  @media (max-width: 575.98px) {
+    .root.oneOf {
+      justify-content: center;
+      flex-direction: row-reverse;
+      flex-direction: column; } }
+  .root p {
+    font-family: 'Nunito', sans-serif !important;
+    color: #323c32;
+    margin: 0; }
+  .root > div > div {
+    width: -moz-fit-content;
+    width: fit-content;
+    display: flex;
+    gap: 8px;
+    position: relative; }
+  .root.hasLeftItem {
+    justify-content: space-between; }
+  .root .paginationLeftContainer {
+    display: flex;
+    align-items: center; }
+    @media (max-width: 767.98px) {
+      .root .paginationLeftContainer.oneOf {
+        width: 100%;
+        justify-content: flex-start; } }
+    @media (max-width: 575.98px) {
+      .root .paginationLeftContainer.oneOf {
+        justify-content: center;
+        margin-bottom: 16px; } }
+    @media (max-width: 767.98px) {
+      .root .paginationLeftContainer.both {
+        width: 100%;
+        justify-content: space-between;
+        margin-bottom: 12px; } }
+  .root .linesPerPage {
+    display: flex;
+    align-items: center;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none; }
+    .root .linesPerPage :not(:last-child) > svg {
+      margin-bottom: -3px;
+      max-width: 6px;
+      margin-right: 8px; }
+    .root .linesPerPage .wrapper {
+      display: flex;
+      align-items: center;
+      padding-top: 3px;
+      gap: 6px;
+      cursor: default; }
+      .root .linesPerPage .wrapper > div {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        margin-top: -3px;
+        border-bottom: 2px solid #d7e6c8;
+        transition: 0.3s;
+        border-radius: 0px 0px 4px 4px; }
+        .root .linesPerPage .wrapper > div:hover {
+          border-color: #3fa110; }
+        .root .linesPerPage .wrapper > div > div {
+          display: flex; }
+          .root .linesPerPage .wrapper > div > div:nth-child(2) button {
+            min-width: unset !important; }
+          .root .linesPerPage .wrapper > div > div > div {
+            display: flex;
+            align-items: center;
+            margin-top: 4px;
+            margin-bottom: 2px; }
+      .root .linesPerPage .wrapper.disabled {
+        pointer-events: none;
+        -webkit-user-select: none;
+           -moz-user-select: none;
+                user-select: none; }
+        .root .linesPerPage .wrapper.disabled > div {
+          border-color: #828a82 !important;
+          opacity: 0.45; }
+          .root .linesPerPage .wrapper.disabled > div svg {
+            color: #828a82; }
+    .root .linesPerPage .drop {
+      margin: 0;
+      padding: 0;
+      padding-top: 7px; }
+      .root .linesPerPage .drop p {
+        -webkit-user-select: none;
+           -moz-user-select: none;
+                user-select: none;
+        margin-left: 4px;
+        margin-right: 8px;
+        color: #323c32; }
+      .root .linesPerPage .drop svg {
+        width: 14px;
+        color: #3fa110;
+        transition: 0.3s;
+        transform: rotate(0deg); }
+      .root .linesPerPage .drop.active svg {
+        transform: rotate(-180deg); }
+  .root .paginationContainer {
+    display: flex;
+    align-items: center;
+    list-style-type: none;
+    gap: 12px;
+    color: #3fa110;
+    margin: 0;
+    padding: 0;
+    position: relative; }
+    .root .paginationContainer .paginationItem {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #3fa110;
+      font-size: 16px;
+      font-weight: 700;
+      font-family: 'Nunito', sans-serif;
+      width: 100%;
+      min-width: 20px;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+      transition: 0.3s ease-in-out; }
+      .root .paginationContainer .paginationItem:hover {
+        cursor: pointer; }
+      .root .paginationContainer .paginationItem.dots {
+        display: flex;
+        -webkit-user-select: none;
+           -moz-user-select: none;
+                user-select: none;
+        pointer-events: none; }
+        .root .paginationContainer .paginationItem.dots svg {
+          color: #3fa110;
+          width: 18px;
+          margin-bottom: 1px; }
+      .root .paginationContainer .paginationItem.dots:hover {
+        background-color: transparent;
+        cursor: default; }
+      .root .paginationContainer .paginationItem:hover {
+        cursor: pointer;
+        color: #33820d; }
+      .root .paginationContainer .paginationItem.selected {
+        width: 100%;
+        color: #33820d;
+        position: relative;
+        transition: 0.3s ease-in-out; }
+        .root .paginationContainer .paginationItem.selected.nonLoader::after {
+          content: '';
+          bottom: -2px;
+          position: absolute;
+          height: 2px;
+          width: 100%;
+          background: #33820d;
+          border-radius: 2px;
+          transition: 0.3s ease-in-out;
+          z-index: -1; }
+      .root .paginationContainer .paginationItem:active {
+        transform: scale(0.9); }
+      .root .paginationContainer .paginationItem.disabled {
+        pointer-events: none;
+        color: #828a82;
+        opacity: 0.75; }
+        .root .paginationContainer .paginationItem.disabled svg {
+          color: #828a82;
+          opacity: 0.25; }
+        .root .paginationContainer .paginationItem.disabled.selected {
+          pointer-events: none;
+          width: 100%;
+          color: #828a82;
+          position: relative;
+          transition: 0.3s ease-in-out; }
+          .root .paginationContainer .paginationItem.disabled.selected::after {
+            display: none; }
+        .root .paginationContainer .paginationItem.disabled:hover {
+          background-color: transparent;
+          cursor: default; }
+    .root .paginationContainer .arrows svg {
+      max-height: 16px; }
+  .root .paginationContainerLoader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #f8f9f7;
+    opacity: 1; }
+    .root .paginationContainerLoader.enter {
+      opacity: 0; }
+    .root .paginationContainerLoader.enterActive {
+      transition: 0.3s ease;
+      opacity: 1; }
+    .root .paginationContainerLoader.exit {
+      opacity: 1; }
+    .root .paginationContainerLoader.exitActive {
+      transition: 0.3s ease;
+      opacity: 0; }
+
 :export {
   widthXs: 575.98px;
   widthSm: 767.98px;
@@ -5597,6 +5923,177 @@ header.component-header {
   warningLight: #ffeb98;
   warningDark: #765f00; }
 
+.component-search {
+  position: relative;
+  width: 100%; }
+  .component-search .component-search-right-container {
+    display: flex;
+    gap: 12px; }
+    .component-search .component-search-right-container .component-chip {
+      font-size: 10px;
+      white-space: nowrap; }
+      .component-search .component-search-right-container .component-chip > span {
+        padding-left: 6px; }
+      .component-search .component-search-right-container .component-chip .component-chip-button > svg {
+        width: 25px;
+        height: 20px; }
+  .component-search .component-search-panel {
+    margin-top: -16px;
+    z-index: 987;
+    background-color: #fefefe;
+    position: fixed;
+    box-shadow: 0 1px 2px 0 rgba(90, 100, 90, 0.3);
+    border-radius: 0 0 8px 8px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    overflow-y: auto;
+    overflow-y: overlay;
+    max-height: 140px; }
+    .component-search .component-search-panel .component-search-options {
+      min-height: 40px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 8px 16px;
+      transition: background-color 0.3s ease; }
+      .component-search .component-search-panel .component-search-options:last-child {
+        border-radius: 0 0 8px 8px; }
+      .component-search .component-search-panel .component-search-options button {
+        min-width: 18px; }
+      .component-search .component-search-panel .component-search-options:hover {
+        background-color: #f3f3f3;
+        cursor: pointer; }
+      .component-search .component-search-panel .component-search-options:focus {
+        outline: none;
+        background-color: #f3f3f3; }
+    .component-search .component-search-panel .component-search-no-result {
+      font-family: 'Nunito', sans-serif;
+      height: 40px;
+      width: 100%;
+      padding: 0 16px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start; }
+    .component-search .component-search-panel.panel-fade-enter {
+      transform: translateY(10px);
+      opacity: 0; }
+    .component-search .component-search-panel.panel-fade-enter-active {
+      transition: transform 0.3s ease, opacity 0.3s ease;
+      opacity: 1;
+      transform: translateY(0); }
+    .component-search .component-search-panel.panel-fade-exit {
+      opacity: 1;
+      transform: translateY(0); }
+    .component-search .component-search-panel.panel-fade-exit-active {
+      transition: transform 0.3s ease, opacity 0.3s ease;
+      transform: translateY(10px);
+      opacity: 0; }
+
+:export {
+  widthXs: 575.98px;
+  widthSm: 767.98px;
+  widthMd: 991.98px;
+  widthLg: 1199.98px; }
+
+:export {
+  white: #fefefe;
+  darkenWhite: #efefef;
+  black: #121212;
+  transparent: rgba(0, 0, 0, 0);
+  primary: #3fa110;
+  primaryDark: #33820d;
+  primaryLight: #d7e6c8;
+  secondaryDarker: #323c32;
+  secondaryDark: #5a645a;
+  blueDarker: #2b517b;
+  secondary: #828a82;
+  secondaryLight: #cdd3cd;
+  secondaryLighter: #f8f9f7;
+  danger: #e60000;
+  dangerLight: #ffb4b4;
+  dangerDark: #ab4745;
+  warning: #ffcd00;
+  warningLight: #ffeb98;
+  warningDark: #765f00; }
+
+.component-chip {
+  font-size: 14px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 200px;
+  border-width: 1px;
+  border-style: solid;
+  font-weight: 600;
+  transition: all 0.3s ease; }
+  .component-chip span {
+    max-width: calc(100% - 24px);
+    padding-left: 4px;
+    text-overflow: ellipsis;
+    overflow: hidden; }
+  .component-chip.w100 {
+    width: 100%; }
+  .component-chip.all-clickable,
+  .component-chip .component-chip-button {
+    transform: scale(1);
+    transition: transform 0.3s ease;
+    cursor: pointer; }
+    .component-chip.all-clickable:active,
+    .component-chip .component-chip-button:active {
+      transform: scale(0.95); }
+  .component-chip .component-chip-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px; }
+    .component-chip .component-chip-button svg {
+      width: 20px;
+      height: 20px; }
+  .component-chip.primary-outline {
+    color: #3fa110;
+    background-color: rgba(0, 0, 0, 0);
+    border: 1px solid #3fa110; }
+  .component-chip.primary {
+    color: #fefefe;
+    background-color: #3fa110;
+    border: 1px solid #3fa110; }
+  .component-chip.danger {
+    color: #fefefe;
+    background-color: #e60000;
+    border: 1px solid #e60000; }
+
+:export {
+  widthXs: 575.98px;
+  widthSm: 767.98px;
+  widthMd: 991.98px;
+  widthLg: 1199.98px; }
+
+:export {
+  white: #fefefe;
+  darkenWhite: #efefef;
+  black: #121212;
+  transparent: rgba(0, 0, 0, 0);
+  primary: #3fa110;
+  primaryDark: #33820d;
+  primaryLight: #d7e6c8;
+  secondaryDarker: #323c32;
+  secondaryDark: #5a645a;
+  blueDarker: #2b517b;
+  secondary: #828a82;
+  secondaryLight: #cdd3cd;
+  secondaryLighter: #f8f9f7;
+  danger: #e60000;
+  dangerLight: #ffb4b4;
+  dangerDark: #ab4745;
+  warning: #ffcd00;
+  warningLight: #ffeb98;
+  warningDark: #765f00; }
+
 .component-select-outer {
   position: relative;
   width: 100%; }
@@ -5719,6 +6216,9 @@ header.component-header {
       font-size: 16px;
       color: #3fa110; }
       @media screen and (max-width: 575.98px) {
+        .component-select-panel .component-select-panel-footer .component-select-footer-button {
+          font-size: 11px; } }
+      @media screen and (max-width: 767.98px) {
         .component-select-panel .component-select-panel-footer .component-select-footer-button {
           font-size: 13px; } }
   .component-select-panel .component-select-no-result {
@@ -5888,52 +6388,6 @@ header.component-header {
   warningLight: #ffeb98;
   warningDark: #765f00; }
 
-.component-table-left-checkbox-with-label {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  overflow: hidden; }
-  .component-table-left-checkbox-with-label .component-table-left-checkbox-with-label-checkbox-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center; }
-  .component-table-left-checkbox-with-label .component-table-left-checkbox-with-label-label-wrapper {
-    display: block;
-    margin-left: 8px;
-    max-width: calc(100% - 24px);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap; }
-  .component-table-left-checkbox-with-label.w-100 .component-table-left-checkbox-with-label-label-wrapper {
-    width: 100%; }
-
-:export {
-  widthXs: 575.98px;
-  widthSm: 767.98px;
-  widthMd: 991.98px;
-  widthLg: 1199.98px; }
-
-:export {
-  white: #fefefe;
-  darkenWhite: #efefef;
-  black: #121212;
-  transparent: rgba(0, 0, 0, 0);
-  primary: #3fa110;
-  primaryDark: #33820d;
-  primaryLight: #d7e6c8;
-  secondaryDarker: #323c32;
-  secondaryDark: #5a645a;
-  blueDarker: #2b517b;
-  secondary: #828a82;
-  secondaryLight: #cdd3cd;
-  secondaryLighter: #f8f9f7;
-  danger: #e60000;
-  dangerLight: #ffb4b4;
-  dangerDark: #ab4745;
-  warning: #ffcd00;
-  warningLight: #ffeb98;
-  warningDark: #765f00; }
-
 table.component-table {
   font-family: "Nunito", sans-serif;
   width: 100%;
@@ -6029,6 +6483,8 @@ table.component-table {
     transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
     outline: none;
     -webkit-appearance: none;
+    -moz-appearance: none;
+         appearance: none;
     border: none;
     padding: 8px;
     display: flex;
@@ -7006,15 +7462,17 @@ nav.component-tabs {
   position: relative;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap; }
+  justify-content: space-between; }
   .component-title .component-title-wrapper {
     display: flex;
-    align-items: center; }
+    align-items: center;
+    flex: 1 1 100%;
+    min-width: 0; }
   .component-title .component-title-icon {
     display: flex;
     align-items: center;
-    margin-right: 12px; }
+    margin-right: 12px;
+    margin-top: 2px; }
   .component-title .component-title-text {
     -webkit-user-select: none;
        -moz-user-select: none;
@@ -7028,8 +7486,18 @@ nav.component-tabs {
     @media screen and (max-width: 575.98px) {
       .component-title .component-title-text {
         font-size: 20px; } }
-  .component-title .component-title-right-element {
-    margin-left: auto; }
+    .component-title .component-title-text.ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: calc(100% - 48px);
+      white-space: nowrap; }
+      @media screen and (max-width: 767.98px) {
+        .component-title .component-title-text.ellipsis {
+          white-space: pre-wrap; } }
+  @media screen and (max-width: 575.98px) {
+    .component-title .component-title-right-element {
+      display: none;
+      visibility: hidden; } }
 
 :export {
   widthXs: 575.98px;
@@ -8220,51 +8688,26 @@ nav.component-tabs {
   warningLight: #ffeb98;
   warningDark: #765f00; }
 
-.component-chip {
-  font-size: 14px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
+.component-table-left-checkbox-with-label {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  border-radius: 200px;
-  border-width: 1px;
-  border-style: solid;
-  font-weight: 600;
-  transition: all 0.3s ease; }
-  .component-chip span {
+  width: 100%;
+  overflow: hidden; }
+  .component-table-left-checkbox-with-label .component-table-left-checkbox-with-label-add-remove-button svg {
+    height: 18px;
+    transform: scale(calc(5 / 4)); }
+  .component-table-left-checkbox-with-label .component-table-left-checkbox-with-label-add-remove-button.component-table-left-checkbox-with-label-danger {
+    color: #e60000 !important; }
+  .component-table-left-checkbox-with-label .component-table-left-checkbox-with-label-checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+  .component-table-left-checkbox-with-label .component-table-left-checkbox-with-label-label-wrapper {
+    display: block;
+    margin-left: 8px;
     max-width: calc(100% - 24px);
-    padding-left: 4px;
+    overflow: hidden;
     text-overflow: ellipsis;
-    overflow: hidden; }
-  .component-chip.w100 {
+    white-space: nowrap; }
+  .component-table-left-checkbox-with-label.w-100 .component-table-left-checkbox-with-label-label-wrapper {
     width: 100%; }
-  .component-chip.all-clickable,
-  .component-chip .component-chip-button {
-    transform: scale(1);
-    transition: transform 0.3s ease;
-    cursor: pointer; }
-    .component-chip.all-clickable:active,
-    .component-chip .component-chip-button:active {
-      transform: scale(0.95); }
-  .component-chip .component-chip-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2px; }
-    .component-chip .component-chip-button svg {
-      width: 20px;
-      height: 20px; }
-  .component-chip.primary-outline {
-    color: #3fa110;
-    background-color: rgba(0, 0, 0, 0);
-    border: 1px solid #3fa110; }
-  .component-chip.primary {
-    color: #fefefe;
-    background-color: #3fa110;
-    border: 1px solid #3fa110; }
-  .component-chip.danger {
-    color: #fefefe;
-    background-color: #e60000;
-    border: 1px solid #e60000; }