pixel-react 1.13.43 → 1.13.44

package/lib/styles/FileDropzone.scss

@@ -1,263 +0,0 @@
-@mixin column-flex-gap($gap: 0) {
-  display: flex;
-  flex-direction: column;
-  gap: $gap;
-}
-
-@mixin flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin center {
-  display: grid;
-  place-items: center;
-}
-
-@mixin icon-container($height: 24px, $width: 24px) {
-  height: $height;
-  width: $width;
-}
-
-.ff-file-dropzone-wrapper {
-  @include column-flex-gap(10px);
-  
-
-  .ff-file-dropzone {
-    padding: 16px 0;
-    border-radius: 8px;
-    background: var(--file-dropzone-default-color);
-    border: 1px dashed var(--brand-color);
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    text-align: center;
-    gap: 8px;
-    transition: background-color 0.2s ease;
-
-    .ff-radio-group-wrapper {
-      position: relative;
-      bottom: 8px;
-    }
-
-    &:hover,
-    &--active {
-      background-color: var(--file-dropzone-selected-color);
-    }
-    &--webservice-file {
-      @include center;
-    }
-    &--webservice-container {
-      @include center;
-      padding: 16px 0 40px 0;
-    }
-    &-content {
-      &__icon {
-        height: 80px;
-        width: 80px;
-        display: grid;
-        place-items: center;
-      }
-
-      &__labels {
-        .choose-file-btn {
-          margin: 0 auto;
-          position: relative;
-          font-weight: 600;
-          line-height: 15px;
-
-          input {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            opacity: 0;
-          }
-        }
-      }
-      &__webservice-file {
-        padding: 4px;
-      }
-    }
-  }
-}
-.ff-file-details-wrapper {
-    @include column-flex-gap(10px);
-    max-height: 300px;
-    overflow-y: auto;
-    scroll-behavior: smooth;
-    padding: 2px;
-    ::-webkit-scrollbar {
-      width: 2px;
-    }
-    -ms-overflow-style: none;
-    scrollbar-width: thin;
-
-    .ff-file-details {
-      @include column-flex-gap(10px);
-
-      &__item {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 4px;
-        border-radius: 4px;
-        background-color: var(--file-details-bg);
-        box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);
-        overflow: hidden;
-
-        .ff-file-info {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-          width: 87%;
-
-          .ff-file-info__icon {
-            @include center;
-            @include icon-container;
-          }
-
-          &__name-wrapper {
-            @include column-flex-gap(2px);
-            justify-content: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            width: 100%;
-
-            &__name {
-              overflow: hidden;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              display: block;
-              color: var(--text-color);
-            }
-          }
-        }
-
-        .ff-file-actions {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          &__icon-replace,
-          &__icon-remove {
-            @include icon-container;
-            @include center;
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-.ff-webservice-file-wrapper {
-  display: flex;
-  gap: 8px;
-  .ff-webservice-file-name {
-    position: relative;
-    bottom: 2px;
-  }
-}
-.ff-input-ref {
-  display: none;
-}
-.ff-disable-file-dropzone-wrapper {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.footer_basic_button {
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  @include flex-center;
-  justify-content: flex-end;
-  gap: 16px;
-  border-top: 1px solid var(--border-color);
-  padding: 4px 8px;
-  background-color: var(--primary-icon-color);
-}
-
-
-.ff-upload-options-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  align-items: center;
-}
-
-.ff-upload-mode-buttons {
-  display: flex;
-  width: 640px;
-  gap: 10px;
-}
-
-.ff-url-upload-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  width: 640px;
-}
-
-.ff-custom-button {
-  padding: 8px 16px;
-   border: 1px solid var(--border-color);
-  border-radius: 7px;
-  cursor: pointer;
-  transition: background-color 0.2s ease, opacity 0.2s ease;
-   background-color: var(--drawer-footer-bg); 
-  color: var(--text-color);
-
-  &:hover {
-    background-color: var(--default-chip-count-background-color); 
-    color:var(--text-color);
-  }
-
-  &--active {
-    background-color: var(--default-chip-count-background-color);
-    color: var(--text-color);
-
-    &:hover {
-      background-color: var(--default-chip-count-background-color); 
-      color: var(--text-color);
-    }
-  }
-
-}
-
-
-.ff-uploaded-apps-wrapper {
-  display: flex;
-  flex-direction: column;
-  width: 640px;
-  border-top: 2px solid var(--border-color);
-  background-color: var(--drawer-footer-bg); 
-  padding: 10px 0px;
-}
-
-.ff-uploaded-apps-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.ff-uploaded-app-item {
-  padding: 6px;
-  border-radius: 4px;
-  cursor: pointer;
-
-      &:hover {
-      background-color: var(--default-chip-count-background-color); 
-      color: var(--text-color);
-    }
-
-    &--selected {
-    background-color: var(--default-chip-count-background-color); 
-    color: var(--text-color); 
-  }
-
-}

package/lib/styles/Form.scss

@@ -1,159 +0,0 @@
-@use '../../assets/styles/fonts';
-
-.ff-form-container {
-  @extend .fontSm;
-  background-color: var(--hover-color);
-  border: 1px solid var(--arrows-button-border-color);
-  border-radius: 8px;
-  padding: 20px;
-  width: 400px;
-  margin: 0 auto;
-  display: grid;
-  gap: 8px;
-
-  .ff-form-group {
-    margin-bottom: 16px;
-
-    .ff-label {
-      display: block;
-      margin-bottom: 4px;
-      font-weight: bold;
-    }
-
-    input {
-      width: 94%;
-      padding: 10px;
-      border: 1px solid var(--arrows-button-border-color);
-      border-radius: 8px;
-
-      &:focus {
-        border-color: var(--brand-color);
-      }
-
-      &.ff-error {
-        border-color: var(--ff-error-light);
-      }
-    }
-
-    .ff-error {
-      color: var(--error-light);
-      margin-top: 4px;
-    }
-  }
-
-  .ff-form-group {
-    margin-bottom: 16px;
-
-    .ff-label {
-      display: block;
-      margin-bottom: 4px;
-      font-weight: bold;
-    }
-
-    input,
-    select {
-      width: 94%;
-      padding: 10px;
-      border: 1px solid var(--arrows-button-border-color);
-      border-radius: 8px;
-
-      &:focus {
-        border-color: var(--brand-color);
-      }
-
-      &.ff-error {
-        border-color: var(--ff-error-light); // Ensure red border color
-      }
-    }
-  }
-
-  .ff-form-radio-group {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    margin-bottom: 16px;
-
-    .ff-radio-group-wrapper {
-      display: flex;
-    }
-
-    .ff-radio-gender {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      input[type="radio"] {
-        margin-right: 0.5rem;
-      }
-    }
-
-    .ff-error {
-      padding-left: 12px;
-      color: var(--error-light);
-      margin-top: 4px;
-    }
-  }
-
-  .ff-button-layout {
-    width: 99%;
-    display: flex;
-    gap: 12px;
-    margin-top: 24px;
-
-    button {
-      width: 50%;
-      background-color: var(--brand-color);
-      color: var(--primary-button-text-color);
-      border: none;
-      border-radius: 8px;
-      padding: 10px;
-      cursor: pointer;
-    }
-  }
-}
-
-.ff-forms-container {
-  height: 450px;
-  overflow-y: scroll;
-
-  .ff-main {
-    padding: 40px;
-    border-radius: 10px;
-    background-color: var(--tree-connecting-lines-color);
-
-    .ff-error {
-      padding-left: 12px;
-      color: var(--error-light);
-      margin-top: 4px;
-    }
-
-    .ff-radio {
-      margin-top: 8px;
-    }
-
-    .ff-check {
-      display: flex;
-    }
-
-    .ff-textarea {
-      margin-top: 8px;
-    }
-
-    .ff-button-layout {
-      width: 99%;
-      display: flex;
-      gap: 12px;
-      margin-top: 24px;
-
-      button {
-        // width: 50%;
-        background-color: var(--brand-color);
-        color: var(--primary-button-text-color);
-        border: none;
-        border-radius: 8px;
-        padding: 10px;
-        cursor: pointer;
-      }
-    }
-  }
-}

package/lib/styles/GridLayout.scss

@@ -1,69 +0,0 @@
-/* Container */
-.ff-container {
-  margin-right: auto;
-  margin-left: auto;
-  width: 90%;
-  display: grid;
-}
-
-.ff-container-fluid {
-  width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  display: grid;
-}
-
-/* Row */
-.ff-row {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-}
-
-/* Column sizes based on a 12-column layout */
-.ff-col {
-  grid-column: span 12;
-}
-
-.ff-col-1 {
-  grid-column: span 1;
-}
-.ff-col-2 {
-  grid-column: span 2;
-}
-.ff-col-3 {
-  grid-column: span 3;
-}
-.ff-col-4 {
-  grid-column: span 4;
-}
-.ff-col-5 {
-  grid-column: span 5;
-}
-.ff-col-6 {
-  grid-column: span 6;
-}
-.ff-col-7 {
-  grid-column: span 7;
-}
-.ff-col-8 {
-  grid-column: span 8;
-}
-.ff-col-9 {
-  grid-column: span 9;
-}
-.ff-col-10 {
-  grid-column: span 10;
-}
-.ff-col-11 {
-  grid-column: span 11;
-}
-.ff-col-12 {
-  grid-column: span 12;
-}
-
-@media (max-width: 768px) {
-  /* Stacking columns on small screens */
-  .ff-col {
-    grid-column: span 12;
-  }
-}

package/lib/styles/GridLayoutStory.scss

@@ -1,25 +0,0 @@
-
-@mixin p-20(){
-    padding: 20px;
-}
-
-.one{
-    background-color: var(--brand-color);
-    @include p-20;
-}
-.two{
-    background-color: var(--status-warning-text-color);
-    @include p-20;
-}
-.three{
-    background-color: var(--status-rejected-text-color);
-    @include p-20;
-}
-.four{
-    background-color: var(--status-rejected-bg-color);
-    @include p-20;
-}
-.five{
-    background-color: var(--status-skipped-bg-color);
-    @include p-20;
-}

package/lib/styles/HighlightText.scss

@@ -1,3 +0,0 @@
-.ff-highlight-bg {
-  background-color: var(--text-bg-highlight);
-}

package/lib/styles/HistoryCard.scss

@@ -1,79 +0,0 @@
-@use '../../assets/styles/mixins' as *;
-
-.ff-history-card {
-  display: flex;
-  flex-direction: column;
-  .header {
-    width: fit-content;
-    padding: 4px 8px;
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-    text-transform: capitalize;
-    &--primary {
-      background-color: var(--disable-color);
-      color: var(--brand-color);
-    }
-    &--danger {
-      background-color: var(--status-rejected-bg-color);
-      color: var(--status-rejected-text-color);
-    }
-    &--success {
-      background-color: var(--status-success-bg-color);
-      color: var(--status-success-text-color);
-    }
-    &--warning {
-      background-color: var(--status-warning-bg-color);
-      color: var(--status-warning-text-color);
-    }
-  }
-  .body {
-    padding: 8px;
-    border-radius: 0 10px 10px 10px;
-    box-shadow: 0px 0px 4px 0px var(--toggle-strip-shadow);
-    .title {
-      @include horizontal-space-between;
-      .profile {
-        @include center-horizontal;
-        @include center-vertical;
-        gap: 8px;
-        .avatar {
-          @include center-horizontal;
-          @include center-vertical;
-          height: 24px;
-          width: 24px;
-          border-radius: 50%;
-          color: var(--primary-button-text-color);
-          text-transform: uppercase;
-
-          &--primary {
-            background-color: var(--brand-color);
-          }
-          &--danger {
-            background-color: var(--error);
-          }
-          &--success {
-            background-color: var(--ff-success);
-          }
-          &--warning {
-            background-color: var(--ff-warning);
-          }
-        }
-      }
-    }
-
-    .comment-container {
-      border: 1px solid var(--border-color);
-      margin-top: 10px;
-      border-radius: 10px;
-      padding: 10px;
-      .heading {
-        display: flex;
-      }
-      .comment {
-        margin-top: 4px;
-        color: var(--details-page-value-color);
-        word-break: break-word;
-      }
-    }
-  }
-}

package/lib/styles/IconButton.scss

@@ -1,86 +0,0 @@
-@use '../../assets/styles/fonts';
-@use '../../assets/styles/mixins';
-
-.ff-plus-icon {
-  border-radius: 16px;
-  border-style: none;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-  @include mixins.center-content();
-  background-color: var(--hover-color);
-  gap: 8px;
-  padding: 2px 8px 2px 2px;
-
-  .button-icon {
-    width: 20px;
-    height: 20px;
-    border: 1px solid var(--primary-icon-color);
-    border-radius: 12px;
-    @include mixins.center-content();
-    background-color: var(--secondary-icon-color);
-    .ff-icon-color {
-      path {
-        color: var(--primary-icon-color);
-      }
-    }
-  }
-
-  .icon-name {
-    color: var(--secondary-icon-color);
-    @include mixins.center-content();
-  }
-  background-color: var(--hover-color);
-
-  &:not(:disabled):hover {
-    background-color: var(--secondary-icon-color);
-
-    .icon-name {
-      font-weight: 600;
-      color: var(--primary-icon-color);
-      @include mixins.center-content();
-    }
-
-    .button-icon {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      @include mixins.center-content();
-      background-color: var(--hover-color);
-
-      .ff-icon-color {
-        path {
-          color: var(--secondary-icon-color);
-        }
-      }
-    }
-  }
-  &:disabled {
-    background-color: var(--disable-icon-btn-bg-color);
-    .icon-name {
-      color: var(--primary-icon-color);
-    }
-  }
-  .icon-name {
-    color: var(--secondary-icon-color);
-  }
-}
-
-.ff-plus-no-icon {
-  gap: 0px;
-  padding: 4px 8px 4px 8px;
-  border-radius: 16px;
-
-  .button-icon {
-    display: none;
-  }
-
-  .icon-name {
-    font-weight: normal;
-  }
-}
-
-.ff-plus-disabled {
-  opacity: 0.2;
-  cursor: not-allowed;
-}

package/lib/styles/IconRadialChart.scss

@@ -1,30 +0,0 @@
-@use '../../../assets/styles/fonts';
-
-.ff-icon-radial-chart-container {
-  position: relative;
-  cursor: pointer; 
-  svg {
-    .ff-radial-chart-icon-padding {
-      padding: 0px;
-    }
-
-    text {
-      @extend .fontXs;
-      font-size: var(--fontSize) !important;
-      font-weight: 400;
-    }
-  }
-
-  path {
-    transition: stroke-opacity 0.2s;
-  }
-
-  .ff-icon-radial-chart-tooltip {
-    position: fixed;
-    padding: 5px;
-    border-radius: 4px;
-    pointer-events: none;
-    background-color: var(--tooltip-bg-color);
-    color: var(--tooltip-text-color);
-  }
-}