@seamapi/react 0.27.0 → 1.1.0

package/lib/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAA;AACxD,cAAc,sCAAsC,CAAA;AACpD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wCAAwC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAA;AACxD,cAAc,sCAAsC,CAAA;AACpD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gDAAgD,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "0.27.0",
+  "version": "1.1.0",
   "description": "Seam React component library.",
   "type": "module",
   "main": "index.js",

package/src/lib/capitalize.ts

@@ -0,0 +1,3 @@
+export function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}

package/src/lib/icons/ChevronDown.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react'
+export const ChevronDownIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={20}
+    height={20}
+    fill='none'
+    {...props}
+  >
+    <g mask='url(#chevron-down_svg__mask0_1045_100036)'>
+      <path
+        fill='#6E7179'
+        d='m10 12.813-5-5 1.167-1.167L10 10.479l3.833-3.833L15 7.813l-5 5Z'
+      />
+    </g>
+  </svg>
+)

package/src/lib/ui/Button.tsx

@@ -1,11 +1,12 @@
 import classNames from 'classnames'
+import type { MouseEventHandler, PropsWithChildren } from 'react'
 
 interface ButtonProps {
-  children?: string
   variant?: 'solid' | 'outline' | 'neutral'
   size?: 'small' | 'medium' | 'large'
   disabled?: boolean
-  onClick?: () => void
+  onClick?: MouseEventHandler<HTMLButtonElement>
+  className?: string
 }
 
 export function Button({
@@ -14,12 +15,17 @@ export function Button({
   size = 'medium',
   disabled,
   onClick,
-}: ButtonProps): JSX.Element {
+  className,
+}: PropsWithChildren<ButtonProps>): JSX.Element {
   return (
     <button
-      className={classNames(`seam-btn seam-btn-${variant} seam-btn-${size}`, {
-        'seam-btn-disabled': disabled,
-      })}
+      className={classNames(
+        `seam-btn seam-btn-${variant} seam-btn-${size}`,
+        {
+          'seam-btn-disabled': disabled,
+        },
+        className
+      )}
       disabled={disabled}
       onClick={onClick}
     >

package/src/lib/ui/SupportedDeviceTable/FilterCategoryMenu.tsx

@@ -0,0 +1,65 @@
+import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
+import { Menu } from 'lib/ui/Menu/Menu.js'
+import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
+
+interface FilterCategoryMenuBaseProps {
+  label: string
+  options: string[]
+  onSelect: (option: string) => void
+  buttonLabel?: string
+}
+
+export type FilterCategoryMenuProps =
+  | (FilterCategoryMenuBaseProps & {
+      addAllOption: true
+      onAllOptionSelect: () => void
+    })
+  | (FilterCategoryMenuBaseProps & {
+      addAllOption?: false
+      onAllOptionSelect?: never
+    })
+
+export function FilterCategoryMenu({
+  label,
+  options,
+  addAllOption,
+  onSelect,
+  onAllOptionSelect,
+  buttonLabel,
+}: FilterCategoryMenuProps) {
+  const usableOptions = addAllOption !== null ? ['All', ...options] : options
+
+  return (
+    <div className='seam-supported-devices-filter-menu-wrap'>
+      <p>{label}</p>
+      <Menu
+        renderButton={({ onOpen }) => (
+          <button onClick={onOpen}>
+            <span>{buttonLabel}</span>
+            <ChevronDownIcon />
+          </button>
+        )}
+      >
+        {usableOptions.map((option, index) => (
+          <MenuItem
+            key={`${index}:${option}`}
+            onClick={() => {
+              if (option === 'All') {
+                onAllOptionSelect?.()
+              } else {
+                onSelect(option)
+              }
+            }}
+          >
+            <span>{option}</span>
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  )
+}
+
+FilterCategoryMenu.defaultProps = {
+  addAllOption: true,
+  buttonLabel: 'Filter',
+}

package/src/lib/ui/SupportedDeviceTable/SupportedDeviceContent.tsx

@@ -0,0 +1,147 @@
+import { useQuery } from '@tanstack/react-query'
+import axios from 'axios'
+import { useCallback, useEffect, useState } from 'react'
+
+import { Button } from 'lib/ui/Button.js'
+import { SupportedDeviceFilterArea } from 'lib/ui/SupportedDeviceTable/SupportedDeviceFilterArea.js'
+import type { DeviceModel, Filters } from 'lib/ui/SupportedDeviceTable/types.js'
+
+import { SupportedDeviceHeader } from './SupportedDeviceHeader.js'
+import { SupportedDeviceRow } from './SupportedDeviceRow.js'
+
+const BASE_URL = 'https://devicedb.seam.co/api/device_models/list'
+
+export interface SupportedDeviceContentProps {
+  cannotFilter?: boolean
+}
+
+export function SupportedDeviceContent({
+  cannotFilter = false,
+}: SupportedDeviceContentProps) {
+  const [allDeviceModels, setAllDeviceModels] = useState<DeviceModel[]>([])
+  const [filterValue, setFilterValue] = useState('')
+  const [filters, setFilters] = useState<Filters>({
+    supportedOnly: false,
+    category: null,
+    brand: null,
+  })
+
+  const fetchDeviceModels = useCallback(async () => {
+    const queries = []
+
+    if (filterValue.trim() !== '') {
+      queries.push(`text_search=${encodeURIComponent(filterValue.trim())}`)
+    }
+
+    if (filters.supportedOnly) {
+      queries.push('support_level=live')
+    }
+
+    if (filters.category !== null) {
+      queries.push(`main_category=${encodeURIComponent(filters.category)}`)
+    }
+
+    if (filters.brand !== null) {
+      queries.push(`brand=${encodeURIComponent(filters.brand)}`)
+    }
+
+    const url = `${BASE_URL}?${queries.join('&')}`
+    return await axios.get(url)
+  }, [filterValue, filters])
+
+  const { data, isLoading, isError, refetch } = useQuery<{
+    data: {
+      device_models?: DeviceModel[]
+    }
+  }>({
+    queryKey: ['supported_devices', filterValue, filters],
+    queryFn: fetchDeviceModels,
+  })
+
+  useEffect(() => {
+    if (
+      data?.data?.device_models !== undefined &&
+      allDeviceModels.length === 0
+    ) {
+      setAllDeviceModels(data.data.device_models)
+    }
+  }, [data, allDeviceModels.length])
+
+  const deviceModels = data?.data?.device_models ?? []
+
+  return (
+    <div className='seam-supported-devices-table-wrap'>
+      {!cannotFilter && (
+        <SupportedDeviceFilterArea
+          deviceModels={allDeviceModels}
+          filterValue={filterValue}
+          setFilterValue={setFilterValue}
+          filters={filters}
+          setFilters={setFilters}
+        />
+      )}
+
+      {isLoading && (
+        <div className='seam-supported-devices-table-state-block'>
+          <p>Loading device models...</p>
+        </div>
+      )}
+
+      {isError && (
+        <div className='seam-supported-devices-table-state-block'>
+          <p>There was an error fetching device models.</p>
+          <Button
+            variant='solid'
+            size='small'
+            onClick={() => {
+              void refetch()
+            }}
+          >
+            Retry
+          </Button>
+        </div>
+      )}
+
+      {!isLoading && !isError && data?.data?.device_models !== null && (
+        <table className='seam-supported-devices-table'>
+          <SupportedDeviceHeader />
+          <tbody>
+            {deviceModels.length !== 0 &&
+              deviceModels.map((deviceModel, index) => (
+                <SupportedDeviceRow
+                  key={`${index}:${deviceModel.manufacturer_model_id}`}
+                  deviceModel={deviceModel}
+                />
+              ))}
+
+            {deviceModels.length === 0 && (
+              <tr className='seam-supported-devices-table-message-row'>
+                <td colSpan={6}>
+                  <div className='seam-supported-devices-table-message'>
+                    {filterValue.length === 0 ? (
+                      <p>No device models found.</p>
+                    ) : (
+                      <>
+                        <p>No device models matched your search.</p>
+                        <Button
+                          variant='outline'
+                          size='small'
+                          onClick={() => {
+                            setFilterValue('')
+                          }}
+                          className='seam-supported-devices-table-message-clear-search'
+                        >
+                          Clear search terms
+                        </Button>
+                      </>
+                    )}
+                  </div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      )}
+    </div>
+  )
+}

package/src/lib/ui/SupportedDeviceTable/SupportedDeviceFilterArea.tsx

@@ -0,0 +1,131 @@
+import type { Dispatch, SetStateAction } from 'react'
+
+import { capitalize } from 'lib/capitalize.js'
+import { Button } from 'lib/ui/Button.js'
+import { Menu } from 'lib/ui/Menu/Menu.js'
+import { FilterCategoryMenu } from 'lib/ui/SupportedDeviceTable/FilterCategoryMenu.js'
+import type { DeviceModel, Filters } from 'lib/ui/SupportedDeviceTable/types.js'
+import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
+
+interface SupportedDeviceFilterAreaProps {
+  deviceModels: DeviceModel[]
+  filterValue: string
+  setFilterValue: (filter: string) => void
+  filters: Filters
+  setFilters: Dispatch<SetStateAction<Filters>>
+}
+
+export function SupportedDeviceFilterArea({
+  deviceModels,
+  filterValue,
+  setFilterValue,
+  filters,
+  setFilters,
+}: SupportedDeviceFilterAreaProps) {
+  const appliedFilters = Object.keys(filters).filter((key) => {
+    const filterProperty = filters[key as keyof Filters]
+    return (
+      filterProperty !== undefined &&
+      filterProperty !== null &&
+      filterProperty !== false
+    )
+  })
+  const appliedFiltersCount = appliedFilters.length
+
+  const getAvailablePropertiesFromDeviceModels = (
+    property: keyof DeviceModel
+  ) => {
+    const properties = new Set<string>()
+    deviceModels.forEach((deviceModel) => {
+      properties.add(capitalize(deviceModel[property]))
+    })
+    return Array.from(properties)
+  }
+
+  const resetFilter = (filterType: keyof Filters) => {
+    setFilters((filters) => ({
+      ...filters,
+      [filterType]: null,
+    }))
+  }
+
+  const isPlural = appliedFiltersCount > 1
+  const filterButtonLabel = isPlural
+    ? `Filters (${appliedFiltersCount})`
+    : 'Filter'
+
+  return (
+    <div className='seam-supported-devices-filter-area'>
+      <div className='seam-deliberate-block' />
+      <div className='seam-filters-wrap'>
+        <Menu
+          renderButton={({ onOpen }) => (
+            <Button
+              variant='outline'
+              className='seam-filters-button'
+              onClick={onOpen}
+            >
+              {filterButtonLabel}
+            </Button>
+          )}
+        >
+          <div
+            className='seam-supported-devices-filter-menu'
+            onClick={(event) => {
+              event.stopPropagation()
+            }}
+          >
+            <div className='seam-filter-menu-row'>
+              <FilterCategoryMenu
+                label='Brand'
+                options={getAvailablePropertiesFromDeviceModels('brand')}
+                onSelect={(brand: string) => {
+                  setFilters((filters) => ({
+                    ...filters,
+                    brand,
+                  }))
+                }}
+                buttonLabel={filters.brand ?? 'All'}
+                onAllOptionSelect={() => {
+                  resetFilter('brand')
+                }}
+              />
+            </div>
+
+            <div className='seam-filter-menu-row'>
+              <label
+                htmlFor='supportedOnly'
+                className='seam-filter-checkbox-label'
+              >
+                <p>Supported</p>
+                <input
+                  id='supportedOnly'
+                  name='supportedOnly'
+                  type='checkbox'
+                  className='seam-filter-checkbox'
+                  checked={filters.supportedOnly}
+                  onChange={(event) => {
+                    setFilters((filters) => ({
+                      ...filters,
+                      supportedOnly: event.target.checked,
+                    }))
+                  }}
+                />
+              </label>
+            </div>
+          </div>
+        </Menu>
+
+        <div className='seam-supported-devices-filter-area-search-bar-wrap'>
+          <SearchTextField
+            value={filterValue}
+            onChange={(value) => {
+              setFilterValue(value)
+            }}
+            className='seam-supported-devices-filter-area-search-bar'
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/lib/ui/{SupportedDevices/SupportedDevicesHeader.tsx → SupportedDeviceTable/SupportedDeviceHeader.tsx}

@@ -1,4 +1,4 @@
-export function SupportedDevicesHeader() {
+export function SupportedDeviceHeader() {
   return (
     <thead>
       <tr>

package/src/lib/ui/{SupportedDevices → SupportedDeviceTable}/SupportedDeviceRow.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 
-import type { DeviceModel } from 'lib/ui/SupportedDevices/types.js'
+import type { DeviceModel } from 'lib/ui/SupportedDeviceTable/types.js'
 
 export interface SupportedDeviceRowProps {
   deviceModel: DeviceModel

package/src/lib/ui/SupportedDeviceTable/SupportedDeviceTable.tsx

@@ -0,0 +1,16 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import type { SupportedDeviceContentProps } from 'lib/ui/SupportedDeviceTable/SupportedDeviceContent.js'
+import { SupportedDeviceContent } from 'lib/ui/SupportedDeviceTable/SupportedDeviceContent.js'
+
+const client = new QueryClient()
+
+export type SupportedDeviceTableProps = SupportedDeviceContentProps
+
+export function SupportedDeviceTable(props: SupportedDeviceContentProps) {
+  return (
+    <QueryClientProvider client={client}>
+      <SupportedDeviceContent {...props} />
+    </QueryClientProvider>
+  )
+}

package/src/lib/ui/{SupportedDevices → SupportedDeviceTable}/types.ts

@@ -8,3 +8,9 @@ export interface DeviceModel {
   icon_url: string
   seam_device_model_page_url: string
 }
+
+export interface Filters {
+  supportedOnly: boolean
+  category: string | null
+  brand: string | null
+}

package/src/lib/ui/index.ts

@@ -2,4 +2,4 @@ export * from './AccessCodeDetails/AccessCodeDetails.js'
 export * from './AccessCodeTable/AccessCodeTable.js'
 export * from './DeviceDetails/DeviceDetails.js'
 export * from './DeviceTable/DeviceTable.js'
-export * from './SupportedDevices/SupportedDevices.js'
+export * from './SupportedDeviceTable/SupportedDeviceTable.js'

package/src/styles/_supported-devices.scss

@@ -3,6 +3,95 @@
 $row-padding: 8px;
 
 @mixin all {
+  .seam-supported-devices-filter-area {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    padding: 16px;
+
+    .seam-filters-wrap {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-direction: row;
+      gap: 8px;
+    }
+
+    .seam-supported-devices-filter-area-search-bar-wrap {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: row;
+    }
+  }
+
+  .seam-supported-devices-filter-menu {
+    width: 100%;
+    padding: 8px 16px;
+
+    .seam-filter-menu-row {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: row;
+
+      &:not(:last-of-type) {
+        margin-bottom: 8px;
+      }
+
+      .seam-filter-checkbox-label {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-direction: row;
+      }
+
+      .seam-filter-checkbox {
+        appearance: checkbox;
+      }
+    }
+
+    .seam-supported-devices-filter-menu-wrap {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: row;
+
+      & button {
+        appearance: none;
+        padding: 4px 8px;
+        padding-right: 24px;
+        margin: 0;
+        border: 0;
+        box-shadow: none;
+        border-radius: 4px;
+        background-color: colors.$bg-b;
+        position: relative;
+        cursor: pointer;
+
+        &:hover {
+          background-color: colors.$bg-c;
+        }
+
+        & span {
+          font-size: 14px;
+          font-weight: 500;
+        }
+
+        & svg {
+          position: absolute;
+          top: 2px;
+        }
+      }
+    }
+  }
+
   .seam-supported-devices-table-state-block {
     width: 100%;
     background-color: colors.$bg-a;
@@ -14,6 +103,31 @@ $row-padding: 8px;
     gap: 8px;
   }
 
+  .seam-supported-devices-table-message-row {
+    height: auto !important;
+  }
+
+  .seam-supported-devices-table-message {
+    width: 100%;
+    padding: 32px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    gap: 4px;
+
+    & p {
+      line-height: 1;
+      margin: 0;
+    }
+
+    & button {
+      cursor: pointer;
+      margin-top: 8px;
+    }
+  }
+
   .seam-supported-devices-table {
     width: 100%;
     overflow-x: auto;

package/lib/ui/SupportedDevices/SupportedDeviceRow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SupportedDeviceRow.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDevices/SupportedDeviceRow.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAQnC,MAAM,UAAU,kBAAkB,CAAC,EAAE,WAAW,EAA2B;IACzE,MAAM,WAAW,GAAG,kBAAkB,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,MAAM,CAAA;IAC3E,OAAO,CACL,yBACE,uBACE,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,CAAC,QAAQ,GAAI,GACrD,EACL,uBAAK,WAAW,CAAC,aAAa,GAAM,EACpC,uBAAK,WAAW,CAAC,UAAU,GAAM,EACjC,uBAAK,WAAW,CAAC,qBAAqB,GAAM,EAC5C,uBAAK,WAAW,CAAC,eAAe,GAAM,EACtC,uBACE,cACE,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,UAAU,WAAW,EAAE,CAAC,YAElE,yBAAO,WAAW,CAAC,aAAa,GAAQ,GACpC,GACH,IACF,CACN,CAAA;AACH,CAAC;AAED,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,QAAQ;CACtB,CAAA"}

package/lib/ui/SupportedDevices/SupportedDevices.d.ts

@@ -1 +0,0 @@
-export declare function SupportedDevices(): import("react/jsx-runtime").JSX.Element;

package/lib/ui/SupportedDevices/SupportedDevices.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useQuery } from '@tanstack/react-query';
-import axios from 'axios';
-import { Button } from '../../../lib/ui/Button.js';
-import { SupportedDeviceRow } from './SupportedDeviceRow.js';
-import { SupportedDevicesHeader } from './SupportedDevicesHeader.js';
-export function SupportedDevices() {
-    const { data, isLoading, isError, refetch } = useQuery({
-        queryKey: ['supported_devices'],
-        queryFn: async () => {
-            return await axios.get('https://devicedb.seam.co/api/device_models/list');
-        },
-    });
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: 'seam-supported-devices-table-wrap', children: [isLoading && (_jsx("div", { className: 'seam-supported-devices-table-state-block', children: _jsx("p", { children: "Loading device models..." }) })), isError && (_jsxs("div", { className: 'seam-supported-devices-table-state-block', children: [_jsx("p", { children: "There was an error fetching device models." }), _jsx(Button, { variant: 'solid', size: 'small', onClick: () => {
-                                void refetch();
-                            }, children: "Retry" })] })), !isLoading &&
-                    !isError &&
-                    data?.data?.device_models !== null &&
-                    Array.isArray(data?.data?.device_models) && (_jsxs("table", { className: 'seam-supported-devices-table', children: [_jsx(SupportedDevicesHeader, {}), _jsx("tbody", { children: data.data.device_models.map((deviceModel) => (_jsx(SupportedDeviceRow, { deviceModel: deviceModel }, deviceModel.manufacturer_model_id))) })] }))] }) }));
-}
-//# sourceMappingURL=SupportedDevices.js.map

package/lib/ui/SupportedDevices/SupportedDevices.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SupportedDevices.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDevices/SupportedDevices.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAGzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAEpE,MAAM,UAAU,gBAAgB;IAC9B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,QAAQ,CAInD;QACD,QAAQ,EAAE,CAAC,mBAAmB,CAAC;QAC/B,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,OAAO,MAAM,KAAK,CAAC,GAAG,CAAC,iDAAiD,CAAC,CAAA;QAC3E,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,CACL,4BACE,eAAK,SAAS,EAAC,mCAAmC,aAC/C,SAAS,IAAI,CACZ,cAAK,SAAS,EAAC,0CAA0C,YACvD,mDAA+B,GAC3B,CACP,EAEA,OAAO,IAAI,CACV,eAAK,SAAS,EAAC,0CAA0C,aACvD,qEAAiD,EACjD,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,OAAO,EAAE,CAAA;4BAChB,CAAC,sBAGM,IACL,CACP,EAEA,CAAC,SAAS;oBACT,CAAC,OAAO;oBACR,IAAI,EAAE,IAAI,EAAE,aAAa,KAAK,IAAI;oBAClC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,CAAC,IAAI,CAC1C,iBAAO,SAAS,EAAC,8BAA8B,aAC7C,KAAC,sBAAsB,KAAG,EAC1B,0BACG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAC5C,KAAC,kBAAkB,IAEjB,WAAW,EAAE,WAAW,IADnB,WAAW,CAAC,qBAAqB,CAEtC,CACH,CAAC,GACI,IACF,CACT,IACC,GACL,CACJ,CAAA;AACH,CAAC"}

package/lib/ui/SupportedDevices/SupportedDevicesHeader.d.ts

@@ -1 +0,0 @@
-export declare function SupportedDevicesHeader(): import("react/jsx-runtime").JSX.Element;

package/lib/ui/SupportedDevices/SupportedDevicesHeader.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SupportedDevicesHeader.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDevices/SupportedDevicesHeader.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,sBAAsB;IACpC,OAAO,CACL,0BACE,yBACE,cAAM,EACN,oCAAiB,EACjB,sCAAmB,EACnB,iDAA8B,EAC9B,2CAAwB,EACxB,kCAAe,IACZ,GACC,CACT,CAAA;AACH,CAAC"}

package/lib/ui/SupportedDevices/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDevices/types.ts"],"names":[],"mappings":""}