indicator-ui 0.0.4 → 0.0.6

package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputWrapper/CustomInputWrapper.scss

@@ -0,0 +1,55 @@
+@use '../../../dependencies' as *;
+@use './config' as *;
+
+@mixin insertCustomInputWrapperTags() {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+
+  .label {
+    width: 100%;
+    height: fit-content;
+
+    display: flex;
+    padding: 0 12px;
+    gap: 2px;
+    @include fnt($size: 14, $weight: 500, $line_height: 20, $color: $custom-input-field-label-text-color);
+
+    .requiredMark {
+      flex: none;
+      @include fnt($size: 14, $weight: 500, $line_height: 20, $color: $custom-input-field-label-required-mark-text-color);
+    }
+  }
+
+  .hint {
+    width: 100%;
+    height: fit-content;
+
+    padding: 0 12px;
+    gap: 2px;
+    @include fnt($size: 14, $weight: 400, $line_height: 20, $color: $custom-input-field-hint-text-color);
+  }
+
+  .hintError {
+    width: 100%;
+    height: fit-content;
+
+    padding: 0 12px;
+    gap: 2px;
+    @include fnt($size: 14, $weight: 400, $line_height: 20, $color: $custom-input-field-hint-error-text-color);
+  }
+
+  .helperLink {
+    width: 100%;
+    height: fit-content;
+    padding: 0 12px;
+    gap: 2px;
+    @include fnt($size: 14, $weight: 400, $line_height: 20, $color: $custom-input-field-helper-link-text-color);
+
+    * {
+      stroke: $custom-input-field-helper-link-text-color;
+    }
+  }
+  @content;
+}

package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputWrapper/config.scss

@@ -0,0 +1,5 @@
+$custom-input-field-label-text-color: #344054;
+$custom-input-field-label-required-mark-text-color: #F04438;
+$custom-input-field-hint-text-color: #475467;
+$custom-input-field-hint-error-text-color: #F04438;
+$custom-input-field-helper-link-text-color: #1A40FF;

package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomInputWrapper/index.scss

@@ -0,0 +1 @@
+@forward './CustomInputWrapper';

package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomOptionsInput/index.scss

@@ -0,0 +1,48 @@
+@use '../CustomInputField/CustomInput' as *;
+@use '../../../dependencies' as *;
+
+@mixin insertCustomOptionsInput(
+  $width: 320,
+  $height: 44,
+  $owner-width: none,
+  $owner-height: none,
+  $one-input: true,
+) {
+  .customOptionsInput {
+    display: flex;
+    gap: 6px;
+
+    @include insertCustomInputTags(
+            $width: $width,
+            $height: $height,
+    );
+
+    input {
+      @if ($one-input) {
+        width: 100%;
+      } @else {
+        flex: 1;
+      }
+    }
+
+    &.focus {
+      @include insertCustomInputFocusTags();
+    }
+
+    &.disabled {
+      @include insertCustomInputDisabledTags();
+    }
+
+    @content;
+  }
+}
+
+@mixin insertCustomOptionsInputError() {
+  .customOptionsInput {
+    @include insertCustomInputErrorTags();
+
+    &.focus {
+      @include insertCustomInputErrorFocusTags();
+    }
+  }
+}

package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSelectField/CustomSelectField.scss

@@ -0,0 +1,54 @@
+@use './CustomSelectFieldOption';
+@use './CustomSelectFieldViewField';
+
+@mixin insertCustomSelectFieldError() {
+  .customSelect {
+    @include CustomSelectFieldViewField.insertSelectFieldViewFieldError();
+  }
+}
+
+@mixin insertCustomSelectField(
+  $width: 320,
+  $height: 44,
+) {
+  .customSelect {
+    width: #{$width}px;
+    height: #{$height}px;
+
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    @include CustomSelectFieldViewField.insertCustomSelectFieldViewField($width: $width, $height: $height) {
+      @content;
+    }
+
+    .options {
+      $padding-width: 4;
+
+      width: 100%;
+      max-height: 316px;
+
+      position: absolute;
+      transform: translateY(#{$height + 2}px);
+
+      padding: #{$padding-width}px;
+      border-radius: 8px;
+
+      background-color: #FFFFFF;
+      border: 1px solid #EAECF0;
+      box-shadow: 0 4px 6px -2px #10182808, 0 12px 16px -4px #10182814;
+
+      box-sizing: border-box;
+
+      overflow-y: auto;
+      overflow-x: hidden;
+
+      z-index: 10;
+      @include CustomSelectFieldOption.insertCustomSelectFieldOption($width: $width - $padding-width * 2);
+    }
+
+    @content;
+  }
+}

package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSelectField/CustomSelectFieldOption.scss

@@ -0,0 +1,50 @@
+@use '../../../dependencies' as *;
+
+@mixin insertCustomSelectFieldOption($width: 312) {
+  .option {
+    width: 100%;
+
+    display: flex;
+    flex-direction: row;
+
+    justify-content: space-between;
+
+    padding: 10px 16px;
+    gap: 8px;
+
+    box-sizing: border-box;
+
+    cursor: pointer;
+
+    .label {
+      all: unset;
+      width: 252px;
+      @include fnt($size: 16, $line_height: 24, $weight: 400, $color: #101828);
+    }
+
+    &:hover {
+      background-color: #F2F4F7;
+    }
+
+    &.active {
+      background-color: #F0F6FF;
+
+      .icon {
+        width: 20px;
+        height: 20px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        * {
+          stroke: #1A40FF;
+        }
+      }
+
+      &:hover {
+        background-color: #D9E6FF;
+      }
+    }
+  }
+}

package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSelectField/CustomSelectFieldViewField.scss

@@ -0,0 +1,28 @@
+@use '../../../dependencies' as *;
+@use '../CustomInputField/CustomInput';
+
+@mixin insertCustomSelectFieldViewField($width: 320, $height: 44) {
+  .field {
+    @include CustomInput.insertCustomInputTags() {
+      @content;
+    }
+
+    .label {
+      all: unset;
+      flex: 1;
+      overflow: hidden;
+      text-align: left;
+      text-wrap: nowrap;
+      text-overflow: ellipsis;
+      @include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-900));
+    }
+
+    @include changeSvg($width: 20, $height: 20, $stroke: var(--gray-500), $flex: none);
+  }
+}
+
+@mixin insertSelectFieldViewFieldError() {
+  .field {
+    @include CustomInput.insertCustomInputErrorTags();
+  }
+}

package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSelectField/index.scss

@@ -0,0 +1 @@
+@forward "CustomSelectField";

package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSwitchersField/CustomSwitchersField.scss

@@ -0,0 +1,17 @@
+@use "./components" as components;
+
+@mixin insertCustomSwitchersField(
+  $flag-outer-width: 16,
+  $flag-inner-width: 6,
+  $checkbox-width: 20,
+  $checkbox-height: 20,
+) {
+  @include components.insertCustomSwitchersFieldOption(
+          $flag-outer-width: $flag-outer-width,
+          $flag-inner-width: $flag-inner-width,
+          $checkbox-width: $checkbox-width,
+          $checkbox-height: $checkbox-height,
+  ) {
+    @content;
+  }
+}

package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSwitchersField/components/index.scss

@@ -0,0 +1 @@
+@forward './option';

package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSwitchersField/components/option.scss

@@ -0,0 +1,34 @@
+@use '../../../../dependencies' as *;
+
+@mixin insertCustomSwitchersFieldOption(
+  $checkbox-width: 20,
+  $checkbox-height: 20,
+  $flag-outer-width: 16,
+  $flag-inner-width: 6,
+) {
+  .customSwitcherOption {
+    display: flex;
+    flex-direction: row;
+
+    gap: 8px;
+
+    .label {
+      display: flex;
+      align-items: start;
+      padding: 0;
+      @include fnt($size: 14, $line_height: 20, $weight: 500, $color: #344054)
+    }
+
+    .checkbox {
+      @include insertCircleDotCheckboxTags($outer-size: $flag-outer-width);
+    }
+
+    &.active {
+      .checkbox {
+        @include insertCircleDotCheckboxActiveTags($inner-size: $flag-inner-width);
+      }
+    }
+
+    @content;
+  }
+}

package/dist/scss/ui/FormBuilder/styles/CustomFields/CustomSwitchersField/index.scss

@@ -0,0 +1 @@
+@forward "CustomSwitchersField";

package/dist/scss/ui/FormBuilder/styles/CustomFields/index.scss

@@ -0,0 +1,5 @@
+@forward './CustomInputField';
+@forward './CustomSwitchersField';
+@forward './CustomSelectField';
+@forward './CustomInputWrapper';
+@forward './CustomOptionsInput';

package/dist/scss/ui/InputFields/FlexField/styles/mixins/flexField.scss

@@ -10,8 +10,8 @@
     padding: 10px 12px;
     border-radius: 8px;
     gap: 12px;
-    background-color: $base-white;
-    box-shadow: 0 0 0 1px $gray-300, 0 1px 2px 0 #1018280D;
+    background-color: var(--test-variable);
+    box-shadow: 0 0 0 1px var(--gray-300), 0 1px 2px 0 #1018280D;
     box-sizing: border-box;
 
     .inputField {
@@ -28,10 +28,83 @@
       overflow: hidden;
       text-overflow: ellipsis;
 
-      @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-900);
+      @include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-900));
 
       &::placeholder {
-        @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-400);
+        @include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-400));
+      }
+    }
+
+    .icon {
+      padding: 2px 0;
+      @include centerInsideContent();
+      @include modify-svg($stroke: var(--gray-400)) {
+        width: 20px;
+        height: 20px;
+        flex: none;
+      }
+    }
+
+    .textSupport {
+      @include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-400));
+    }
+
+    .userPic {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      object-fit: scale-down;
+    }
+
+    .help {
+      padding: 2px 0;
+      @include centerInsideContent();
+      @include modify-svg($stroke: var(--gray-400)) {
+        width: 16px;
+        height: 16px;
+        flex: none;
+      }
+    }
+
+    .dropdown {
+      padding: 2px 0;
+      transition: all ease-in-out 200ms;
+      @include centerInsideContent();
+      @include modify-svg($stroke: var(--gray-500)) {
+        width: 20px;
+        height: 20px;
+        flex: none;
+      }
+
+      &.dropdownReverse {
+        transform: rotateX(-180deg);
+      }
+    }
+
+    .button {
+      padding: 2px 0;
+      transition: all ease-in-out 200ms;
+      @include centerInsideContent();
+      @include modify-svg() {
+        width: 20px;
+        height: 20px;
+        flex: none;
+      }
+
+      &.red {
+        @include modify-svg($stroke: var(--error-400));
+
+        &:hover {
+          @include modify-svg($stroke: var(--error-500));
+        }
+      }
+
+      &.gray {
+        @include modify-svg($stroke: var(--gray-400));
+
+        &:hover {
+          @include modify-svg($stroke: var(--gray-500));
+        }
       }
     }
 
@@ -43,9 +116,12 @@
       box-shadow: 0 0 0 4px #F2F4F7, 0 1px 2px 0 #1018280D;
     }
 
-
     &.isError {
-      box-shadow: 0 0 0 1px $error-300, 0 1px 2px 0 #1018280D;
+      box-shadow: 0 0 0 1px var(--error-300), 0 1px 2px 0 #1018280D;
+
+      .help {
+        @include modify-svg($stroke: var(--error-500));
+      }
 
       &.focus {
         box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 #1018280D;
@@ -53,7 +129,7 @@
     }
 
     &.disabled {
-      background-color: $gray-100;
+      background-color: var(--gray-100);
       cursor: default;
 
       * {
@@ -61,7 +137,7 @@
       }
 
       .inputField {
-        @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-500);
+        @include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-500));
       }
     }
 

package/dist/scss/ui/InputFields/InputFieldWrapper/styles/mixins/inputFieldWrapper.scss

@@ -13,10 +13,10 @@
       padding: 0 12px;
       gap: 2px;
 
-      @include fnt($size: 14, $line-height: 20, $weight: 500, $color: $gray-700);
+      @include fnt($size: 14, $line-height: 20, $weight: 500, $color: var(--gray-700));
 
       .required {
-        @include fnt($size: 14, $line-height: 20, $weight: 500, $color: $error-500);
+        @include fnt($size: 14, $line-height: 20, $weight: 500, $color: var(--error-500));
       }
     }
 
@@ -25,7 +25,7 @@
       padding: 0 12px;
       gap: 2px;
 
-      @include fnt($size: 14, $line-height: 20, $weight: 400, $color: $gray-600);
+      @include fnt($size: 14, $line-height: 20, $weight: 400, $color: var(--gray-600));
     }
 
     .hintError {
@@ -33,7 +33,7 @@
       padding: 0 12px;
       gap: 2px;
 
-      @include fnt($size: 14, $line-height: 20, $weight: 400, $color: $error-500);
+      @include fnt($size: 14, $line-height: 20, $weight: 400, $color: var(--error-500));
     }
 
     .helperLink {
@@ -41,8 +41,8 @@
       padding: 0 12px;
       gap: 2px;
       cursor: pointer;
-      @include changeSvg($width: 20, $height: 20, $stroke: $blue-dark-500, $flex: none);
-      @include fnt($size: 14, $line-height: 20, $weight: 400, $color: $blue-dark-500);
+      @include changeSvg($width: 20, $height: 20, $stroke: var(--blue-dark-500), $flex: none);
+      @include fnt($size: 14, $line-height: 20, $weight: 400, $color: var(--blue-dark-500));
     }
 
     @content;

package/dist/scss/ui/InputFields/RadioField/styles/mixins/radioField.scss

@@ -15,14 +15,14 @@
       height: 16px;
 
       border-radius: 50%;
-      border: 1px solid $gray-300;
-      background-color: $base-white;
+      border: 1px solid var(--gray-300);
+      background-color: var(--base-white);
 
       @include centerInsideContent();
     }
 
     .label {
-      @include fnt($size: 14, $line-height: 20, $weight: 500, $color: $gray-700);
+      @include fnt($size: 14, $line-height: 20, $weight: 500, $color: var(--gray-700));
     }
 
     &.active {
@@ -33,10 +33,10 @@
           width: 6px;
           height: 6px;
           border-radius: 50%;
-          background-color: $blue-dark-500;
+          background-color: var(--blue-dark-500);
         }
 
-        border: 1px solid $blue-dark-500;
+        border: 1px solid var(--blue-dark-500);
       }
     }
 

package/dist/scss/ui/InputFields/SelectField/styles/mixins/selectField.scss

@@ -24,8 +24,8 @@
         border-radius: 8px;
         padding: 4px;
 
-        background-color: $base-white;
-        box-shadow: 0 0 0 1px $gray-300, 0 4px 6px -2px #10182808, 0px 12px 16px -4px #10182814;
+        background-color: var(--base-white);
+        box-shadow: 0 0 0 1px var(--gray-300), 0 4px 6px -2px #10182808, 0px 12px 16px -4px #10182814;
 
         overflow: scroll;
         scrollbar-width: none;
@@ -42,12 +42,12 @@
           .label {
             flex: 1;
             text-align: left;
-            @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-900);
+            @include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-900));
           }
 
           &.active {
-            background-color: $blue-dark-50;
-            @include changeSvg($width: 20, $height: 20, $stroke: $blue-dark-500, $flex: none);
+            background-color: var(--blue-dark-50);
+            @include changeSvg($width: 20, $height: 20, $stroke: var(--blue-dark-500), $flex: none);
           }
         }
       }

package/dist/scss/ui/InputFields/SwitcherField/styles/mixins/switcherField.scss

@@ -25,12 +25,12 @@ $size-config: (
 
 $tone-config: (
         light: (
-                main: $gray-200,
-                hover: $gray-300,
+                main: var(--gray-200),
+                hover: var(--gray-300),
         ),
         dark: (
-                main: $gray-300,
-                hover: $gray-400,
+                main: var(--gray-300),
+                hover: var(--gray-400),
         ),
 );
 
@@ -58,7 +58,7 @@ $tone-config: (
       height: #{map.get($size-settings, radius)}px;
       border-radius: 50%;
       box-shadow: 0 1px 2px 0 #1018280F, 0 1px 3px 0 #1018281A;
-      background-color: $base-white;
+      background-color: var(--base-white);
     }
 
     &:hover {
@@ -66,15 +66,15 @@ $tone-config: (
     }
 
     &:focus {
-      box-shadow: 0 0 0 4px $gray-100;
+      box-shadow: 0 0 0 4px var(--gray-100);
     }
 
     &.active {
       justify-content: right;
-      background-color: $blue-dark-500;
+      background-color: var(--blue-dark-500);
 
       &:hover {
-        background-color: $blue-dark-600;
+        background-color: var(--blue-dark-600);
       }
     }
 

package/dist/scss/ui/InputFields/TextareaField/styles/mixin/textareaField.scss

@@ -10,13 +10,13 @@
     border-radius: 8px;
     padding: 10px 12px;
 
-    background-color: $base-white;
-    box-shadow: 0 0 0 1px $gray-300, 0 1px 2px 0 #1018280D;
+    background-color: var(--base-white);
+    box-shadow: 0 0 0 1px var(--gray-300), 0 1px 2px 0 #1018280D;
 
-    @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-900);
+    @include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-900));
 
     &::placeholder {
-      @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-400);
+      @include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-400));
     }
 
     &:focus {
@@ -24,12 +24,12 @@
     }
 
     &:disabled {
-      background-color: $gray-100;
-      @include fnt($size: 16, $line-height: 24, $weight: 400, $color: $gray-500);
+      background-color: var(--gray-100);
+      @include fnt($size: 16, $line-height: 24, $weight: 400, $color: var(--gray-500));
     }
 
     &.isError {
-      border: 1px solid $error-300;
+      border: 1px solid var(--error-300);
 
       &:focus {
         box-shadow: 0 0 0 4px #FEE4E2, 0 1px 2px 0 #1018280D;

package/dist/scss/ui/MicroButton/styles/mixins/properties/color-fill.scss

@@ -1,12 +1,12 @@
 @use '../../../../../styles' as *;
 
 @mixin color-fill() {
-  background: $base-white;
-  box-shadow: 0 0 0 1px $blue-dark-200;
-  @include modify-svg($stroke: $blue-dark-500);
+  background: var(--base-white);
+  box-shadow: 0 0 0 1px var(--blue-dark-200);
+  @include modify-svg($stroke: var(--blue-dark-500));
 
   &:hover {
-    background: $blue-dark-50;
-    @include modify-svg($stroke: $blue-dark-500);
+    background: var(--blue-dark-50);
+    @include modify-svg($stroke: var(--blue-dark-500));
   }
 }

package/dist/scss/ui/MicroButton/styles/mixins/properties/color-hover.scss

@@ -2,10 +2,10 @@
 
 @mixin color-hover() {
   background: none;
-  @include modify-svg($stroke: $blue-dark-400);
+  @include modify-svg($stroke: var(--blue-dark-400));
 
   &:hover {
-    background-color: $blue-dark-100;
-    @include modify-svg($stroke: $blue-dark-500);
+    background-color: var(--blue-dark-100);
+    @include modify-svg($stroke: var(--blue-dark-500));
   }
 }

package/dist/scss/ui/MicroButton/styles/mixins/properties/color.scss

@@ -2,10 +2,10 @@
 
 @mixin color() {
   background: none;
-  @include modify-svg($stroke: $blue-dark-500);
+  @include modify-svg($stroke: var(--blue-dark-500));
 
   &:hover {
-    background-color: $base-white;
-    @include modify-svg($stroke: $blue-dark-600);
+    background-color: var(--base-white);
+    @include modify-svg($stroke: var(--blue-dark-600));
   }
 }

package/dist/scss/ui/MicroButton/styles/mixins/properties/dark.scss

@@ -2,7 +2,7 @@
 
 @mixin dark() {
   background-color: #0C111D80;
-  @include modify-svg($stroke: $base-white);
+  @include modify-svg($stroke: var(--base-white));
 
   &:hover {
     background-color: #0C111DCC;