pixel-react 1.7.9 → 1.8.1

package/src/components/Search/index.ts

@@ -1 +1 @@
-export { default } from './Search';
+export { default } from './Search';

package/src/components/Search/types.ts

@@ -1,19 +1,19 @@
-export interface SearchProps {
-  /**
-   * Placeholder for the input field
-   */
-  placeholder?: string;
-  /**
-   * Callback function to be called when the search button is clicked or enter key is pressed
-   */
-  onSearch: (query: string) => void;
-  /**
-   * Additional styles for the button
-   */
-  disabled?: boolean;
-  width?: number;
-  value: string;
-  isExpand: boolean;
-  onClose: () => void;
-  onExpand: (isExpand: boolean) => void;
-}
+export interface SearchProps {
+  /**
+   * Placeholder for the input field
+   */
+  placeholder?: string;
+  /**
+   * Callback function to be called when the search button is clicked or enter key is pressed
+   */
+  onSearch: (query: string) => void;
+  /**
+   * Additional styles for the button
+   */
+  disabled?: boolean;
+  width?: number;
+  value: string;
+  isExpand: boolean;
+  onClose: () => void;
+  onExpand: (isExpand: boolean) => void;
+}

package/src/components/Select/Select.scss

@@ -1,213 +1,213 @@
-@use '../../assets/styles/fonts';
-
-@mixin svg-path-style($fill-color: var(--ff-select-brand-color)) {
-  svg {
-    path {
-      fill: $fill-color;
-      transition: all 0.18s ease;
-    }
-  }
-}
-
-@mixin select-state-style($color) {
-  border-color: $color;
-
-  .ff-select-labels {
-    color: $color;
-  }
-
-  .ff-select-arrows-wrapper {
-    .ff-select-arrows {
-      @include svg-path-style($color);
-    }
-  }
-}
-
-.ff-select-wrapper {
-  min-height: 24px;
-  min-width: 50px;
-
-  .ff-select {
-    height: 100%;
-    border: 1px solid var(--ff-select-border-color);
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: space-evenly;
-    position: relative;
-    box-sizing: border-box;
-
-    &:hover {
-      border-color: var(--ff-select-brand-color);
-
-      .ff-select-labels {
-        color: var(--ff-select-default-color);
-      }
-
-      .ff-select-arrows-wrapper {
-        .ff-select-arrows {
-          @include svg-path-style(var(--ff-select-text-hover-color));
-        }
-      }
-    }
-
-    .ff-select-input-icon {
-      margin-left: 6px;
-    }
-
-    .ff-select-inputField {
-      @extend .fontSm;
-      width: calc(100% - 8px);
-      height: 100%;
-      padding: 0 0 0 8px;
-      border: none;
-      outline: none;
-      letter-spacing: 0.5px;
-      z-index: 10;
-      background: transparent;
-
-      &__disabled {
-        cursor: not-allowed;
-        color: var(--ff-select-border-color);
-      }
-
-      &__readonly {
-        cursor: pointer;
-      }
-
-      &__icon {
-        width: calc(100% - 36px);
-        padding: 4;
-      }
-    }
-
-    .ff-select-arrows-wrapper {
-      cursor: pointer;
-      height: 100%;
-      padding: 0 8px 0 0;
-      display: flex;
-      align-items: center;
-
-      .ff-select-arrows {
-        @include svg-path-style(var(--ff-select-border-color));
-      }
-
-      &__disabled {
-        cursor: not-allowed;
-        border-color: var(--ff-select-border-color);
-      }
-    }
-
-    .ff-select-labels {
-      @extend .fontSm;
-      position: absolute;
-      left: 8px;
-      color: var(--ff-select-border-color);
-      letter-spacing: 0.5px;
-      line-height: 18px;
-      transition: 0.18s ease all;
-      border-radius: 4px;
-
-      &__icon {
-        left: 24px;
-      }
-
-      &__active {
-        transform: translateY(-16px);
-        transition: 0.18s ease all;
-        background-color: var(--ff-select-background-color);
-        padding: 0 2px;
-        z-index: 100000;
-        left: 8px;
-      }
-    }
-
-    &__focus {
-      border-color: var(--ff-select-brand-color);
-
-      &:hover {
-        @include select-state-style(var(--ff-select-brand-color));
-      }
-
-      .ff-select-labels {
-        @extend .font-size-8;
-        transform: translateY(-16px);
-        transition: 0.18s ease all;
-        color: var(--ff-select-brand-color);
-        background-color: var(--ff-select-background-color);
-        padding: 0 2px;
-        line-height: 18px;
-        z-index: 100000;
-        left: 8px;
-      }
-
-      .ff-select-arrows-wrapper {
-        .ff-select-arrows {
-          transform: rotate(180deg);
-          transition: 0.18s ease all;
-          @include svg-path-style(var(--ff-select-brand-color));
-        }
-      }
-    }
-
-    &__disabled {
-      cursor: not-allowed;
-
-      &:hover {
-        @include select-state-style(var(--ff-select-border-color));
-      }
-    }
-
-    &__error {
-      border-color: var(--error_light);
-
-      &:hover {
-        border-color: var(--error_light);
-
-        .ff-select-labels {
-          color: var(--error_light);
-        }
-
-        .ff-select-arrows-wrapper {
-          .ff-select-arrows {
-            @include svg-path-style(var(--ff-select-default-color));
-          }
-        }
-      }
-
-      &__focused {
-        &:hover {
-          .ff-select-arrows-wrapper {
-            .ff-select-arrows {
-              @include svg-path-style(var(--ff-select-brand-color));
-            }
-          }
-        }
-      }
-
-      .ff-select-labels {
-        @extend .font-size-8;
-        transform: translateY(-16px);
-        transition: 0.3s ease all;
-        color: var(--error_light);
-        background-color: var(--ff-select-background-color);
-        padding: 0 2px;
-        line-height: 18px;
-        left: 8px;
-      }
-    }
-
-    &__no_border {
-      border-color: transparent;
-
-      &:hover {
-        border-color: transparent;
-      }
-    }
-  }
-
-  .ff-select-error-msg {
-    padding-left: 8px;
-    letter-spacing: 0.5px;
-  }
-}
+@use '../../assets/styles/fonts';
+
+@mixin svg-path-style($fill-color: var(--ff-select-brand-color)) {
+  svg {
+    path {
+      fill: $fill-color;
+      transition: all 0.18s ease;
+    }
+  }
+}
+
+@mixin select-state-style($color) {
+  border-color: $color;
+
+  .ff-select-labels {
+    color: $color;
+  }
+
+  .ff-select-arrows-wrapper {
+    .ff-select-arrows {
+      @include svg-path-style($color);
+    }
+  }
+}
+
+.ff-select-wrapper {
+  min-height: 24px;
+  min-width: 50px;
+
+  .ff-select {
+    height: 100%;
+    border: 1px solid var(--ff-select-border-color);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    position: relative;
+    box-sizing: border-box;
+
+    &:hover {
+      border-color: var(--ff-select-brand-color);
+
+      .ff-select-labels {
+        color: var(--ff-select-default-color);
+      }
+
+      .ff-select-arrows-wrapper {
+        .ff-select-arrows {
+          @include svg-path-style(var(--ff-select-text-hover-color));
+        }
+      }
+    }
+
+    .ff-select-input-icon {
+      margin-left: 6px;
+    }
+
+    .ff-select-inputField {
+      @extend .fontSm;
+      width: calc(100% - 8px);
+      height: 100%;
+      padding: 0 0 0 8px;
+      border: none;
+      outline: none;
+      letter-spacing: 0.5px;
+      z-index: 10;
+      background: transparent;
+
+      &__disabled {
+        cursor: not-allowed;
+        color: var(--ff-select-border-color);
+      }
+
+      &__readonly {
+        cursor: pointer;
+      }
+
+      &__icon {
+        width: calc(100% - 36px);
+        padding: 4;
+      }
+    }
+
+    .ff-select-arrows-wrapper {
+      cursor: pointer;
+      height: 100%;
+      padding: 0 8px 0 0;
+      display: flex;
+      align-items: center;
+
+      .ff-select-arrows {
+        @include svg-path-style(var(--ff-select-border-color));
+      }
+
+      &__disabled {
+        cursor: not-allowed;
+        border-color: var(--ff-select-border-color);
+      }
+    }
+
+    .ff-select-labels {
+      @extend .fontSm;
+      position: absolute;
+      left: 8px;
+      color: var(--ff-select-border-color);
+      letter-spacing: 0.5px;
+      line-height: 18px;
+      transition: 0.18s ease all;
+      border-radius: 4px;
+
+      &__icon {
+        left: 24px;
+      }
+
+      &__active {
+        transform: translateY(-16px);
+        transition: 0.18s ease all;
+        background-color: var(--ff-select-background-color);
+        padding: 0 2px;
+        z-index: 100000;
+        left: 8px;
+      }
+    }
+
+    &__focus {
+      border-color: var(--ff-select-brand-color);
+
+      &:hover {
+        @include select-state-style(var(--ff-select-brand-color));
+      }
+
+      .ff-select-labels {
+        @extend .font-size-8;
+        transform: translateY(-16px);
+        transition: 0.18s ease all;
+        color: var(--ff-select-brand-color);
+        background-color: var(--ff-select-background-color);
+        padding: 0 2px;
+        line-height: 18px;
+        z-index: 100000;
+        left: 8px;
+      }
+
+      .ff-select-arrows-wrapper {
+        .ff-select-arrows {
+          transform: rotate(180deg);
+          transition: 0.18s ease all;
+          @include svg-path-style(var(--ff-select-brand-color));
+        }
+      }
+    }
+
+    &__disabled {
+      cursor: not-allowed;
+
+      &:hover {
+        @include select-state-style(var(--ff-select-border-color));
+      }
+    }
+
+    &__error {
+      border-color: var(--error_light);
+
+      &:hover {
+        border-color: var(--error_light);
+
+        .ff-select-labels {
+          color: var(--error_light);
+        }
+
+        .ff-select-arrows-wrapper {
+          .ff-select-arrows {
+            @include svg-path-style(var(--ff-select-default-color));
+          }
+        }
+      }
+
+      &__focused {
+        &:hover {
+          .ff-select-arrows-wrapper {
+            .ff-select-arrows {
+              @include svg-path-style(var(--ff-select-brand-color));
+            }
+          }
+        }
+      }
+
+      .ff-select-labels {
+        @extend .font-size-8;
+        transform: translateY(-16px);
+        transition: 0.3s ease all;
+        color: var(--error_light);
+        background-color: var(--ff-select-background-color);
+        padding: 0 2px;
+        line-height: 18px;
+        left: 8px;
+      }
+    }
+
+    &__no_border {
+      border-color: transparent;
+
+      &:hover {
+        border-color: transparent;
+      }
+    }
+  }
+
+  .ff-select-error-msg {
+    padding-left: 8px;
+    letter-spacing: 0.5px;
+  }
+}