@seamapi/react 4.14.2 → 5.1.0

package/dist/index.css

@@ -1758,351 +1758,6 @@
     width: 100%;
   }
 }
-.seam-components .seam-supported-device-table-content-wrap {
-  background: #fff;
-}
-.seam-components .seam-supported-device-table-filter-area {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
-  padding: 16px;
-}
-.seam-components .seam-supported-device-table-filter-area .seam-filters-wrap {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-direction: row;
-  gap: 8px;
-}
-.seam-components .seam-supported-device-table-filter-area .seam-supported-device-table-filter-area-search-bar-wrap {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: row;
-}
-.seam-components .seam-supported-device-table-filter-menu {
-  width: 100%;
-  padding: 8px 16px;
-}
-.seam-components .seam-supported-device-table-filter-menu .seam-filter-menu-row {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
-}
-.seam-components .seam-supported-device-table-filter-menu .seam-filter-menu-row:not(:last-of-type) {
-  margin-bottom: 8px;
-}
-.seam-components .seam-supported-device-table-filter-menu .seam-filter-menu-row .seam-filter-checkbox-label {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
-}
-.seam-components .seam-supported-device-table-filter-menu .seam-filter-menu-row .seam-filter-checkbox {
-  appearance: checkbox;
-}
-.seam-components .seam-supported-device-table-filter-menu .seam-supported-device-table-filter-menu-wrap {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
-}
-.seam-components .seam-supported-device-table-filter-menu .seam-supported-device-table-filter-menu-wrap button {
-  appearance: none;
-  padding: 4px 8px;
-  padding-right: 24px;
-  margin: 0;
-  border: 0;
-  box-shadow: none;
-  border-radius: 4px;
-  background-color: #e9edef;
-  position: relative;
-  cursor: pointer;
-}
-.seam-components .seam-supported-device-table-filter-menu .seam-supported-device-table-filter-menu-wrap button:hover {
-  background-color: #dde0e2;
-}
-.seam-components .seam-supported-device-table-filter-menu .seam-supported-device-table-filter-menu-wrap button span {
-  font-size: 14px;
-  font-weight: 500;
-}
-.seam-components .seam-supported-device-table-filter-menu .seam-supported-device-table-filter-menu-wrap button svg {
-  position: absolute;
-  top: 2px;
-}
-.seam-components .seam-manufacturer-section {
-  margin-bottom: 32px;
-  position: relative;
-  display: flex;
-  padding: 8px 16px 16px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 10px;
-  align-self: stretch;
-}
-.seam-components .seam-manufacturer-section .seam-manufacturer-annotation-box {
-  display: flex;
-  padding: 8px;
-  align-items: center;
-  align-content: center;
-  gap: 0 8px;
-  align-self: stretch;
-  flex-wrap: wrap;
-  border-radius: 6px;
-  background-color: rgba(0, 122, 252, 0.08);
-}
-.seam-components .seam-manufacturer-section .seam-manufacturer-annotation-box .seam-annotation {
-  display: flex;
-  align-items: flex-start;
-  align-content: flex-start;
-  gap: 2px;
-  flex: 1 0 0;
-  flex-wrap: wrap;
-  color: #6e7179;
-  font-size: 14px;
-  line-height: 120%;
-}
-.seam-components .seam-manufacturer-section .seam-header {
-  display: flex;
-  align-items: center;
-  height: 64px;
-}
-.seam-components .seam-manufacturer-section .seam-header .seam-manufacturer-image {
-  width: 48px;
-  height: 48px;
-  padding: 0 8px;
-  box-sizing: content-box;
-  margin-right: 8px;
-}
-.seam-components .seam-manufacturer-section .seam-header .seam-manufacturer-name {
-  font-size: 21px;
-  line-height: 132%;
-  flex: 1;
-}
-.seam-components .seam-manufacturer-section .seam-header .chevron {
-  transform: rotate(90deg);
-  margin-right: 24px;
-}
-.seam-components .seam-manufacturer-section .show-all-devices-button {
-  cursor: pointer;
-  background: #fff;
-  display: flex;
-  height: 30px;
-  padding: 5px 24px 4px 16px;
-  align-items: center;
-  gap: 2px;
-  font-size: 14px;
-  line-height: 115%;
-  color: #6e7179;
-  border-radius: 30px;
-  border: 0;
-  box-shadow: 0 1px 1px 0 rgba(16, 27, 37, 0.1), 0 1px 8px 0 rgba(46, 69, 82, 0.12);
-  position: absolute;
-  bottom: -13px;
-  left: 50%;
-  transform: translate(-50%, -47px);
-  z-index: 3;
-}
-.seam-components .seam-manufacturer-section .show-all-devices-button svg {
-  transform: rotate(90deg);
-  font-size: 25px;
-}
-.seam-components .seam-manufacturer-section .hidden-devices-overlay {
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 10.17%, #fff 86.98%);
-  position: absolute;
-  height: 64px;
-  width: 100%;
-  bottom: 0;
-  z-index: 2;
-}
-.seam-components .seam-manufacturer-section.can-expand .seam-header {
-  cursor: pointer;
-}
-.seam-components .seam-manufacturer-section.can-expand .seam-header:hover {
-  background: #fafafa;
-}
-.seam-components .seam-manufacturer-section.expanded {
-  margin-bottom: 96px;
-}
-.seam-components .seam-manufacturer-section.expanded .seam-header .chevron {
-  transform: rotate(270deg);
-}
-.seam-components .seam-manufacturer-section.expanded .show-all-devices-button {
-  transform: translate(-50%, 16px);
-}
-.seam-components .seam-manufacturer-section.expanded .show-all-devices-button svg {
-  transform: rotate(270deg);
-}
-.seam-components .seam-supported-device-table-content-state-block {
-  width: 100%;
-  background-color: #f1f3f4;
-  padding: 32px 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 8px;
-}
-.seam-components .seam-supported-device-table-content-message-row {
-  height: auto !important;
-}
-.seam-components .seam-supported-device-table-content-message {
-  width: 100%;
-  padding: 32px 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  text-align: center;
-  gap: 4px;
-}
-.seam-components .seam-supported-device-table-content-message p {
-  line-height: 1;
-  margin: 0;
-}
-.seam-components .seam-supported-device-table-content-message button {
-  cursor: pointer;
-  margin-top: 8px;
-}
-.seam-components .seam-supported-device-table-content {
-  width: 100%;
-  overflow-x: auto;
-  table-layout: auto;
-  border-collapse: collapse;
-}
-.seam-components .seam-supported-device-table-content .seam-row {
-  height: 64px;
-  border-bottom: 1px solid #e9edef;
-  display: flex;
-}
-.seam-components .seam-supported-device-table-content .seam-row:first-child {
-  border-top: 1px solid #e9edef;
-}
-.seam-components .seam-supported-device-table-content .seam-row .seam-col {
-  display: flex;
-  padding: 8px;
-}
-.seam-components .seam-supported-device-table-content .seam-status-pill {
-  display: inline-flex;
-  padding: 4px 8px;
-  border-radius: 16px;
-}
-.seam-components .seam-supported-device-table-content .seam-status-pill span {
-  font-size: 11px;
-  line-height: 134%;
-  letter-spacing: 0.55px;
-}
-.seam-components .seam-supported-device-table-content .seam-status-pill.status-green {
-  background-color: rgba(98, 232, 139, 0.3);
-  color: #0d8841;
-}
-.seam-components .seam-supported-device-table-content .seam-status-pill.status-blue {
-  background-color: rgba(125, 192, 241, 0.3);
-  color: #1653b8;
-}
-.seam-components .seam-supported-device-table-content .seam-status-pill.status-unknown {
-  color: #6e7179;
-  font-size: 12px;
-  line-height: 118%;
-}
-.seam-components .seam-supported-device-table-content .seam-status-pill:not(.status-unknown) {
-  font-weight: 600;
-}
-.seam-components .seam-supported-device-table-content .seam-device-image-col {
-  align-items: center;
-}
-.seam-components .seam-supported-device-table-content .seam-device-image-col .seam-image-box {
-  width: 48px;
-  height: 48px;
-}
-.seam-components .seam-supported-device-table-content .seam-device-image-col .seam-image-box img {
-  width: 100%;
-}
-.seam-components .seam-supported-device-table-content .seam-model-col {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 2px;
-}
-.seam-components .seam-supported-device-table-content .seam-model-col .seam-model-name {
-  font-size: 14px;
-}
-.seam-components .seam-supported-device-table-content .seam-model-col .seam-model-name .seam-truncated-text {
-  width: 270px;
-}
-.seam-components .seam-supported-device-table-content .seam-model-col .seam-model-id {
-  color: #9da1a9;
-  font-size: 12px;
-}
-.seam-components .seam-supported-device-table-content .seam-model-col .seam-model-id .seam-truncated-text {
-  width: 220px;
-}
-.seam-components .seam-supported-device-table-content .seam-model-col .seam-model-id .seam-dot-divider {
-  margin: 0 4px;
-  color: #d5d8dc;
-}
-@media only screen and (width >= 450px) {
-  .seam-components .seam-supported-device-table-content .seam-model-col .seam-model-name {
-    font-size: 16px;
-  }
-  .seam-components .seam-supported-device-table-content .seam-model-col .seam-model-id {
-    font-size: 14px;
-  }
-}
-@media only screen and (width >= 768px) {
-  .seam-components .seam-supported-device-table-content .seam-model-col {
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-  }
-  .seam-components .seam-supported-device-table-content .seam-model-col .seam-model-name {
-    flex: 1;
-    font-size: 14px;
-  }
-  .seam-components .seam-supported-device-table-content .seam-model-col .seam-model-id {
-    flex: 0 0 40%;
-    font-size: 14px;
-    display: flex;
-    justify-content: flex-end;
-  }
-  .seam-components .seam-supported-device-table-content .seam-model-col .seam-model-id .seam-truncated-text {
-    text-align: right;
-  }
-}
-.seam-components .seam-supported-device-table-content .seam-status-col {
-  width: 70px;
-  text-align: center;
-  align-items: center;
-}
-.seam-components .seam-supported-device-table-filter-menu-content {
-  max-height: 300px;
-  overflow: auto;
-}
-.seam-components .supported-device-table-manufacturer-keys {
-  font-size: 18px;
-}
-.seam-components .supported-device-table-manufacturer-keys .seam-manufacturer-key {
-  display: table-row;
-}
-.seam-components .supported-device-table-manufacturer-keys .seam-manufacturer-key-value {
-  display: table-cell;
-}
-.seam-components .supported-device-table-manufacturer-keys .seam-copy-button {
-  display: table-cell;
-  cursor: pointer;
-  padding-left: 10px;
-  font-size: 25px;
-}
 .seam-components .seam-climate-setting-control-group {
   display: flex;
   flex-direction: column;
@@ -3056,5 +2711,474 @@
   gap: 6px;
   justify-content: flex-end;
 }
+.seam-components .seam-ecosystem {
+  --seam-ecosystem-fg-1: #232b3a;
+  --seam-ecosystem-fg-2: #6e7179;
+  --seam-ecosystem-fg-3: #9da1a9;
+  --seam-ecosystem-surface-1: #fff;
+  --seam-ecosystem-surface-2: #f1f3f4;
+  --seam-ecosystem-line-1: #e9edef;
+  --seam-ecosystem-line-2: #cbd0d3;
+  --seam-ecosystem-accent: #007afc;
+  --seam-ecosystem-accent-soft: rgba(0, 122, 252, 0.08);
+  --seam-ecosystem-skeleton: #e9edef;
+  width: 100%;
+  color: var(--seam-ecosystem-fg-1);
+  font-size: 16px;
+  line-height: 1.4;
+}
+.seam-components .seam-ecosystem.seam-ecosystem-theme-dark {
+  --seam-ecosystem-fg-1: #f1f3f4;
+  --seam-ecosystem-fg-2: #b9bec5;
+  --seam-ecosystem-fg-3: #8a9099;
+  --seam-ecosystem-surface-1: #16191d;
+  --seam-ecosystem-surface-2: #22262c;
+  --seam-ecosystem-line-1: #2c3138;
+  --seam-ecosystem-line-2: #434a54;
+  --seam-ecosystem-accent: #4da3ff;
+  --seam-ecosystem-accent-soft: rgb(77 163 255 / 14%);
+  --seam-ecosystem-skeleton: #2c3138;
+}
+.seam-components .seam-ecosystem.seam-ecosystem-theme-dark .seam-ecosystem-light-only {
+  display: none;
+}
+.seam-components .seam-ecosystem.seam-ecosystem-theme-dark .seam-ecosystem-dark-only {
+  display: block;
+}
+@media (prefers-color-scheme: dark) {
+  .seam-components .seam-ecosystem.seam-ecosystem-theme-auto {
+    --seam-ecosystem-fg-1: #f1f3f4;
+    --seam-ecosystem-fg-2: #b9bec5;
+    --seam-ecosystem-fg-3: #8a9099;
+    --seam-ecosystem-surface-1: #16191d;
+    --seam-ecosystem-surface-2: #22262c;
+    --seam-ecosystem-line-1: #2c3138;
+    --seam-ecosystem-line-2: #434a54;
+    --seam-ecosystem-accent: #4da3ff;
+    --seam-ecosystem-accent-soft: rgb(77 163 255 / 14%);
+    --seam-ecosystem-skeleton: #2c3138;
+  }
+  .seam-components .seam-ecosystem.seam-ecosystem-theme-auto .seam-ecosystem-light-only {
+    display: none;
+  }
+  .seam-components .seam-ecosystem.seam-ecosystem-theme-auto .seam-ecosystem-dark-only {
+    display: block;
+  }
+}
+.seam-components .seam-ecosystem .seam-ecosystem-dark-only {
+  display: none;
+}
+.seam-components .seam-ecosystem a {
+  color: inherit;
+  text-decoration: none;
+}
+.seam-components .seam-ecosystem img {
+  max-width: 100%;
+}
+.seam-components .seam-ecosystem-header {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: 8px 12px;
+  margin-bottom: 16px;
+}
+.seam-components .seam-ecosystem-title {
+  margin: 0 auto 0 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--seam-ecosystem-fg-1);
+}
+.seam-components .seam-ecosystem-controls {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+}
+.seam-components .seam-ecosystem-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 200px;
+}
+.seam-components .seam-ecosystem-search .seam-ecosystem-search-icon {
+  position: absolute;
+  left: 10px;
+  font-size: 18px;
+  pointer-events: none;
+}
+.seam-components .seam-ecosystem-search .seam-ecosystem-search-icon path {
+  fill: var(--seam-ecosystem-fg-3);
+}
+.seam-components .seam-ecosystem-search .seam-ecosystem-search-input {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px 0 34px;
+  border: 1px solid var(--seam-ecosystem-line-2);
+  border-radius: 8px;
+  background: var(--seam-ecosystem-surface-1);
+  color: var(--seam-ecosystem-fg-1);
+  font: inherit;
+  font-size: 14px;
+}
+.seam-components .seam-ecosystem-search .seam-ecosystem-search-input::placeholder {
+  color: var(--seam-ecosystem-fg-3);
+}
+.seam-components .seam-ecosystem-search .seam-ecosystem-search-input:focus {
+  outline: 2px solid var(--seam-ecosystem-accent);
+  outline-offset: -1px;
+  border-color: transparent;
+}
+.seam-components .seam-ecosystem-search .seam-ecosystem-search-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.seam-components .seam-ecosystem-select {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.seam-components .seam-ecosystem-select .seam-ecosystem-select-input {
+  appearance: none;
+  height: 36px;
+  max-width: 220px;
+  padding: 0 32px 0 12px;
+  border: 1px solid var(--seam-ecosystem-line-2);
+  border-radius: 8px;
+  background: var(--seam-ecosystem-surface-1);
+  color: var(--seam-ecosystem-fg-1);
+  font: inherit;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.seam-components .seam-ecosystem-select .seam-ecosystem-select-input:focus {
+  outline: 2px solid var(--seam-ecosystem-accent);
+  outline-offset: -1px;
+  border-color: transparent;
+}
+.seam-components .seam-ecosystem-select .seam-ecosystem-select-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.seam-components .seam-ecosystem-select .seam-ecosystem-select-icon {
+  position: absolute;
+  right: 8px;
+  font-size: 18px;
+  pointer-events: none;
+}
+.seam-components .seam-ecosystem-select .seam-ecosystem-select-icon path {
+  fill: var(--seam-ecosystem-fg-2);
+}
+.seam-components .seam-ecosystem-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--seam-ecosystem-line-2);
+  border-radius: 8px;
+  background: var(--seam-ecosystem-surface-1);
+  color: var(--seam-ecosystem-fg-1);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.seam-components .seam-ecosystem-button:hover {
+  background: var(--seam-ecosystem-surface-2);
+}
+.seam-components .seam-ecosystem-button:focus-visible {
+  outline: 2px solid var(--seam-ecosystem-accent);
+  outline-offset: 2px;
+}
+.seam-components .seam-ecosystem-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 32px 16px;
+  border: 1px dashed var(--seam-ecosystem-line-2);
+  border-radius: 12px;
+  color: var(--seam-ecosystem-fg-2);
+  font-size: 14px;
+  text-align: center;
+}
+.seam-components .seam-ecosystem-message p {
+  margin: 0;
+}
+.seam-components .seam-ecosystem-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: var(--seam-ecosystem-accent-soft);
+  color: var(--seam-ecosystem-accent);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+  white-space: nowrap;
+}
+.seam-components .seam-ecosystem-badge.seam-ecosystem-badge-type {
+  background: var(--seam-ecosystem-surface-2);
+  color: var(--seam-ecosystem-fg-1);
+}
+.seam-components .seam-ecosystem-badge.seam-ecosystem-badge-conditional {
+  border: 1px dashed var(--seam-ecosystem-accent);
+  background: transparent;
+  cursor: help;
+}
+.seam-components .seam-ecosystem-skeleton {
+  border-radius: 6px;
+  background: var(--seam-ecosystem-skeleton);
+  animation: seam-ecosystem-pulse 1.5s ease-in-out infinite;
+}
+.seam-components .seam-ecosystem-skeleton-line {
+  width: 60%;
+  height: 14px;
+}
+.seam-components .seam-ecosystem-skeleton-line-short {
+  width: 35%;
+  height: 12px;
+}
+.seam-components .seam-ecosystem-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+@keyframes seam-ecosystem-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .seam-components .seam-ecosystem-skeleton {
+    animation: none;
+  }
+}
+.seam-components .seam-compatible-apps .seam-compatible-apps-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.seam-components .seam-compatible-apps .seam-compatible-apps-card {
+  border: 1px solid var(--seam-ecosystem-line-1);
+  border-radius: 12px;
+  background: var(--seam-ecosystem-surface-1);
+  transition: border-color 0.15s ease;
+}
+.seam-components .seam-compatible-apps .seam-compatible-apps-card:hover, .seam-components .seam-compatible-apps .seam-compatible-apps-card:focus-within {
+  border-color: var(--seam-ecosystem-line-2);
+}
+.seam-components .seam-compatible-apps .seam-compatible-apps-card-body {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  height: 100%;
+  padding: 12px;
+  border-radius: 12px;
+}
+.seam-components .seam-compatible-apps .seam-compatible-apps-card-body:focus-visible {
+  outline: 2px solid var(--seam-ecosystem-accent);
+  outline-offset: 2px;
+}
+.seam-components .seam-compatible-apps .seam-compatible-apps-logo {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  overflow: hidden;
+  border: 1px solid var(--seam-ecosystem-line-1);
+  border-radius: 8px;
+  background: var(--seam-ecosystem-surface-2);
+}
+.seam-components .seam-compatible-apps .seam-compatible-apps-logo img {
+  width: 100%;
+  height: 100%;
+  padding: 4px;
+  object-fit: contain;
+  object-position: center;
+}
+.seam-components .seam-compatible-apps .seam-compatible-apps-logo-initial {
+  color: var(--seam-ecosystem-fg-2);
+  font-size: 18px;
+  font-weight: 600;
+}
+.seam-components .seam-compatible-apps .seam-compatible-apps-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+.seam-components .seam-compatible-apps .seam-compatible-apps-name {
+  overflow: hidden;
+  color: var(--seam-ecosystem-fg-1);
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.seam-components .seam-compatible-apps .seam-compatible-apps-subtitle {
+  overflow: hidden;
+  color: var(--seam-ecosystem-fg-2);
+  font-size: 14px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.seam-components .seam-compatible-apps .seam-compatible-apps-note {
+  padding-top: 4px;
+  color: var(--seam-ecosystem-fg-2);
+  font-size: 12px;
+}
+.seam-components .seam-compatible-apps .seam-compatible-apps-footer {
+  display: flex;
+  justify-content: center;
+  padding-top: 16px;
+}
+.seam-components .seam-supported-devices {
+  container-type: inline-size;
+}
+.seam-components .seam-supported-devices .seam-supported-devices-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.seam-components .seam-supported-devices .seam-supported-devices-section {
+  overflow: hidden;
+  border: 1px solid var(--seam-ecosystem-line-1);
+  border-radius: 12px;
+  background: var(--seam-ecosystem-surface-1);
+}
+.seam-components .seam-supported-devices .seam-supported-devices-section-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--seam-ecosystem-line-1);
+}
+.seam-components .seam-supported-devices .seam-supported-devices-logo {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--seam-ecosystem-surface-2);
+  color: var(--seam-ecosystem-fg-2);
+  font-weight: 600;
+}
+.seam-components .seam-supported-devices .seam-supported-devices-logo img {
+  width: 100%;
+  height: 100%;
+  padding: 4px;
+  object-fit: contain;
+}
+.seam-components .seam-supported-devices .seam-supported-devices-section-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: 18px;
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.seam-components .seam-supported-devices .seam-supported-devices-count {
+  flex-shrink: 0;
+  color: var(--seam-ecosystem-fg-2);
+  font-size: 14px;
+}
+.seam-components .seam-supported-devices .seam-supported-devices-rows {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.seam-components .seam-supported-devices .seam-supported-devices-row {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px 12px;
+  padding: 12px 16px;
+}
+.seam-components .seam-supported-devices .seam-supported-devices-row:not(:last-child) {
+  border-bottom: 1px solid var(--seam-ecosystem-line-1);
+}
+.seam-components .seam-supported-devices .seam-supported-devices-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--seam-ecosystem-surface-2);
+  color: var(--seam-ecosystem-fg-3);
+  font-weight: 600;
+}
+.seam-components .seam-supported-devices .seam-supported-devices-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.seam-components .seam-supported-devices .seam-supported-devices-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.seam-components .seam-supported-devices .seam-supported-devices-name {
+  color: var(--seam-ecosystem-fg-1);
+  font-weight: 600;
+}
+.seam-components .seam-supported-devices a.seam-supported-devices-name:hover {
+  text-decoration: underline;
+}
+.seam-components .seam-supported-devices .seam-supported-devices-meta {
+  overflow: hidden;
+  color: var(--seam-ecosystem-fg-2);
+  font-size: 13px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.seam-components .seam-supported-devices .seam-supported-devices-badges {
+  display: flex;
+  flex-wrap: wrap;
+  grid-column: 2;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.seam-components .seam-supported-devices .seam-supported-devices-section-footer {
+  display: flex;
+  justify-content: center;
+  padding: 12px 16px;
+  border-top: 1px solid var(--seam-ecosystem-line-1);
+}
+@container (width >= 720px) {
+  .seam-components .seam-supported-devices .seam-supported-devices-row {
+    grid-template-columns: 48px minmax(0, 1fr) minmax(0, 45%);
+  }
+  .seam-components .seam-supported-devices .seam-supported-devices-badges {
+    grid-column: 3;
+    justify-content: flex-end;
+  }
+}
 
 /*# sourceMappingURL=index.css.map */