@seamapi/react 1.28.1 → 1.30.0

package/src/styles/_access-code-table.scss

@@ -6,6 +6,17 @@
       width: 170px;
     }
 
+    .seam-table-header {
+      .seam-left {
+        display: flex;
+        align-items: center;
+
+        .seam-add-access-code-button {
+          margin-left: 8px;
+        }
+      }
+    }
+
     .seam-table-row {
       cursor: pointer;
 

package/src/styles/_buttons.scss

@@ -7,12 +7,22 @@
     border: 1px solid rgb(0 122 252 / 50%);
     cursor: pointer;
     background: colors.$white;
-    padding: 6px;
+    padding: 2px;
     line-height: 0;
+    width: 30px;
+    height: 30px;
 
     &:hover {
       background: rgb(0 122 252 / 8%);
     }
+
+    svg {
+      scale: 0.75;
+
+      * {
+        fill: colors.$primary;
+      }
+    }
   }
 }
 

package/src/styles/_colors.scss

@@ -22,6 +22,7 @@ $bg-aa: #fafafa;
 $bg-gray: #ececec;
 $status-red: #e36857;
 $white: #fff;
+$black: #000;
 $alert-error-dark: #cb7d7d;
 $alert-error-line: #f1d4d4;
 $alert-error-fill: #ffefef;

package/src/styles/_form-field.scss

@@ -0,0 +1,15 @@
+@use './colors';
+
+@mixin all {
+  .seam-form-field {
+    margin-bottom: 24px;
+
+    > .seam-input-label {
+      user-select: none;
+    }
+
+    > .seam-radio-field {
+      margin-top: 4px;
+    }
+  }
+}

package/src/styles/_input-label.scss

@@ -0,0 +1,11 @@
+@use './colors';
+
+@mixin all {
+  .seam-input-label {
+    cursor: default;
+    margin-bottom: 4px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 134%;
+  }
+}

package/src/styles/_inputs.scss

@@ -2,33 +2,27 @@
 
 @mixin text-field {
   .seam-text-field {
-    border: 1px solid colors.$text-gray-3;
-    border-radius: 8px;
-    padding: 0 8px;
-    display: flex;
-    align-items: center;
-
-    &:hover {
-      border-color: colors.$text-default;
-    }
-
-    &:focus-within {
-      border-color: colors.$primary;
-    }
+    > .seam-main {
+      border: 1px solid colors.$text-gray-3;
+      border-radius: 8px;
+      display: flex;
+      padding: 0 8px;
+      align-items: center;
 
-    &.seam-disabled {
-      border-color: colors.$text-gray-3;
-      background: colors.$bg-gray;
-      cursor: not-allowed;
+      &:hover {
+        border-color: colors.$text-default;
+      }
 
-      .seam-text-field-input {
-        cursor: not-allowed;
+      &:focus-within {
+        border-color: colors.$primary;
       }
     }
 
     .seam-text-field-input {
       height: 40px;
       border: 0;
+      width: 100%;
+      border-radius: 8px;
 
       &:focus {
         outline: none;
@@ -73,9 +67,40 @@
       }
     }
 
-    &.seam-search-text-field {
-      .seam-text-field-input {
-        width: 100%;
+    > .seam-helper-text {
+      margin-top: 4px;
+    }
+
+    &.seam-disabled {
+      > .seam-main {
+        border-color: colors.$text-gray-3;
+        background: colors.$bg-gray;
+        cursor: not-allowed;
+
+        > .seam-text-field-input {
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    &.seam-large {
+      > .seam-main {
+        padding: 0 12px;
+
+        > .seam-text-field-input {
+          height: 48px;
+          font-size: 16px;
+        }
+      }
+    }
+
+    &.seam-error {
+      > .seam-main {
+        border: 1px solid colors.$status-red;
+      }
+
+      > .seam-helper-text {
+        color: colors.$status-red;
       }
     }
   }

package/src/styles/_layout.scss

@@ -12,7 +12,7 @@
     .seam-back-icon {
       position: absolute;
       top: 50%;
-      transform: translate(4px, -25%);
+      transform: translate(4px, -50%);
       left: 0;
       cursor: pointer;
     }
@@ -22,6 +22,14 @@
       line-height: 134%;
       color: colors.$text-gray-1;
     }
+
+    .seam-subheading {
+      display: block;
+      font-size: 12px;
+      line-height: 140%;
+      text-align: center;
+      color: colors.$text-gray-1;
+    }
   }
 }
 

package/src/styles/_main.scss

@@ -13,6 +13,9 @@
 @use './device-table';
 @use './access-code-details';
 @use './supported-device-table';
+@use './access-code-form';
+@use './input-label';
+@use './form-field';
 
 .seam-components {
   // Reset
@@ -22,6 +25,8 @@
   @include typography.all;
   @include tables.all;
   @include inputs.all;
+  @include input-label.all;
+  @include form-field.all;
   @include buttons.all;
   @include layout.all;
   @include icons.all;
@@ -32,6 +37,7 @@
   @include device-table.all;
   @include access-code-table.all;
   @include access-code-details.all;
+  @include access-code-form.all;
   @include alert.all;
   @include supported-device-table.all;
 }

package/src/styles/_menus.scss

@@ -25,7 +25,9 @@
     position: absolute;
     padding: 8px 0;
     background: colors.$white;
-    box-shadow: 0 0 1px rgb(0 0 0 / 30%), 0 2px 16px 2px rgb(15 22 28 / 15%);
+    box-shadow:
+      0 0 1px rgb(0 0 0 / 30%),
+      0 2px 16px 2px rgb(15 22 28 / 15%);
     border-radius: 8px;
 
     .seam-menu-item {

package/src/styles/_supported-device-table.scss

@@ -134,7 +134,8 @@ $row-padding: 8px;
       color: colors.$text-gray-1;
       border-radius: 30px;
       border: 0;
-      box-shadow: 0 1px 1px 0 rgb(16 27 37 / 10%),
+      box-shadow:
+        0 1px 1px 0 rgb(16 27 37 / 10%),
         0 1px 8px 0 rgb(46 69 82 / 12%);
       position: absolute;
       left: 50%;

package/src/styles/_tables.scss

@@ -4,7 +4,7 @@
   .seam-table-header {
     display: flex;
     justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
     height: 56px;
     padding: 0 16px;
 

package/src/styles/_typography.scss

@@ -1,8 +1,18 @@
 @use './colors';
 
 @mixin font-family {
-  font-family: 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
+  font-family:
+    'Source Sans Pro',
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
     sans-serif;
 }