@seamapi/react 1.43.0 → 1.45.0

package/src/lib/seam/components/AccessCodeTable/AccessCodeMenu.tsx

@@ -0,0 +1,118 @@
+import { CopyIcon } from 'lib/icons/Copy.js'
+import type { UseAccessCodeData } from 'lib/seam/access-codes/use-access-code.js'
+import { useDeleteAccessCode } from 'lib/seam/access-codes/use-delete-access-code.js'
+import { Button } from 'lib/ui/Button.js'
+import { copyToClipboard } from 'lib/ui/clipboard.js'
+import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
+import { MoreActionsMenu } from 'lib/ui/Menu/MoreActionsMenu.js'
+import { useToggle } from 'lib/ui/use-toggle.js'
+
+export interface AccessCodeMenuProps {
+  accessCode: NonNullable<UseAccessCodeData>
+  onEdit: () => void
+  onViewDetails: () => void
+  disableEditAccessCode: boolean
+  disableDeleteAccessCode: boolean
+}
+
+export function AccessCodeMenu(props: AccessCodeMenuProps): JSX.Element {
+  return (
+    <MoreActionsMenu
+      menuProps={{
+        backgroundProps: {
+          className: 'seam-access-code-table-action-menu',
+        },
+      }}
+    >
+      <Content {...props} />
+    </MoreActionsMenu>
+  )
+}
+
+function Content({
+  accessCode,
+  onViewDetails,
+  disableEditAccessCode,
+  disableDeleteAccessCode,
+  onEdit,
+}: AccessCodeMenuProps): JSX.Element {
+  const [deleteConfirmationVisible, toggleDeleteConfirmation] = useToggle()
+
+  const deleteAccessCode = useDeleteAccessCode()
+
+  if (deleteConfirmationVisible) {
+    return (
+      <div className='seam-delete-confirmation'>
+        <span>{t.deleteCodeConfirmation}</span>
+        <div className='seam-actions'>
+          <Button
+            onClick={toggleDeleteConfirmation}
+            disabled={deleteAccessCode.isLoading}
+          >
+            {t.cancelDelete}
+          </Button>
+          <Button
+            variant='solid'
+            disabled={deleteAccessCode.isLoading}
+            onClick={() => {
+              deleteAccessCode.mutate({
+                access_code_id: accessCode.access_code_id,
+              })
+            }}
+          >
+            {t.confirmDelete}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <MenuItem
+        onClick={() => {
+          void copyToClipboard(accessCode.code ?? '')
+        }}
+      >
+        <div className='seam-menu-item-copy'>
+          <span>
+            {t.copyCode} - {accessCode.code}
+          </span>
+          <CopyIcon />
+        </div>
+      </MenuItem>
+      <div className='seam-divider' />
+      <MenuItem onClick={onViewDetails}>{t.viewCodeDetails}</MenuItem>
+      {!disableEditAccessCode && (
+        <MenuItem onClick={onEdit}>{t.editCode}</MenuItem>
+      )}
+      {!disableDeleteAccessCode && (
+        <>
+          <div className='seam-divider' />
+          <MenuItem
+            onClick={(event) => {
+              event.stopPropagation() // Prevent hiding menu on outside click
+              toggleDeleteConfirmation()
+            }}
+            preventDefaultOnClick
+            className='seam-text-danger'
+          >
+            {t.deleteCode}
+          </MenuItem>
+        </>
+      )}
+    </>
+  )
+}
+
+const t = {
+  copyCode: 'Copy code',
+  codeIssue: 'code issue',
+  codeIssues: 'code issues',
+  editCode: 'Edit code',
+  viewCodeDetails: 'View code details',
+  deleteCode: 'Delete code',
+  deleteCodeConfirmation: 'Delete this code and data?',
+  cancelDelete: 'Cancel',
+  confirmDelete: 'Delete',
+}

package/src/lib/seam/components/AccessCodeTable/AccessCodeRow.tsx

@@ -0,0 +1,73 @@
+import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
+import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
+import { TriangleWarningOutlineIcon } from 'lib/icons/TriangleWarningOutline.js'
+import type { UseAccessCodesData } from 'lib/seam/access-codes/use-access-codes.js'
+import { AccessCodeMenu } from 'lib/seam/components/AccessCodeTable/AccessCodeMenu.js'
+import { CodeDetails } from 'lib/seam/components/AccessCodeTable/CodeDetails.js'
+import { TableCell } from 'lib/ui/Table/TableCell.js'
+import { TableRow } from 'lib/ui/Table/TableRow.js'
+import { Title } from 'lib/ui/typography/Title.js'
+
+export interface AccessCodeRowProps {
+  accessCode: UseAccessCodesData[number]
+  onClick: () => void
+  onEdit: () => void
+  disableEditAccessCode: boolean
+  disableDeleteAccessCode: boolean
+}
+
+export function AccessCodeRow({
+  onClick,
+  accessCode,
+  onEdit,
+  disableEditAccessCode,
+  disableDeleteAccessCode,
+}: AccessCodeRowProps): JSX.Element {
+  const errorCount = accessCode.errors.length
+  const warningCount = accessCode.warnings.length
+  const isPlural = errorCount === 0 || errorCount > 1
+  const errorIconTitle = isPlural
+    ? `${errorCount} ${t.codeIssues}`
+    : `${errorCount} ${t.codeIssue}`
+  const warningIconTitle = isPlural
+    ? `${warningCount} ${t.codeIssues}`
+    : `${warningCount} ${t.codeIssue}`
+
+  return (
+    <TableRow onClick={onClick}>
+      <TableCell className='seam-icon-cell'>
+        <div>
+          <AccessCodeKeyIcon />
+        </div>
+      </TableCell>
+      <TableCell className='seam-name-cell'>
+        <Title className='seam-truncated-text'>{accessCode.name}</Title>
+        <CodeDetails accessCode={accessCode} />
+      </TableCell>
+      <TableCell className='seam-action-cell'>
+        {errorCount > 0 && (
+          <div className='seam-code-issue-icon-wrap' title={errorIconTitle}>
+            <ExclamationCircleOutlineIcon />
+          </div>
+        )}
+        {errorCount === 0 && warningCount > 0 && (
+          <div className='seam-code-issue-icon-wrap' title={warningIconTitle}>
+            <TriangleWarningOutlineIcon />
+          </div>
+        )}
+        <AccessCodeMenu
+          accessCode={accessCode}
+          onEdit={onEdit}
+          onViewDetails={onClick}
+          disableDeleteAccessCode={disableDeleteAccessCode}
+          disableEditAccessCode={disableEditAccessCode}
+        />
+      </TableCell>
+    </TableRow>
+  )
+}
+
+const t = {
+  codeIssue: 'code issue',
+  codeIssues: 'code issues',
+}

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.element.ts

@@ -7,6 +7,7 @@ export const name = 'seam-access-code-table'
 export const props: ElementProps<Omit<AccessCodeTableProps, 'title'>> = {
   deviceId: 'string',
   disableLockUnlock: 'boolean',
+  disableDeleteAccessCode: 'boolean',
   disableSearch: 'boolean',
   accessCodeFilter: 'object',
   accessCodeComparator: 'object',

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx

@@ -2,11 +2,7 @@ import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'
 
 import { compareByCreatedAtDesc } from 'lib/dates.js'
-import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
 import { AddIcon } from 'lib/icons/Add.js'
-import { CopyIcon } from 'lib/icons/Copy.js'
-import { ExclamationCircleOutlineIcon } from 'lib/icons/ExclamationCircleOutline.js'
-import { TriangleWarningOutlineIcon } from 'lib/icons/TriangleWarningOutline.js'
 import {
   useAccessCodes,
   type UseAccessCodesData,
@@ -16,27 +12,21 @@ import {
   type AccessCodeFilter,
   AccessCodeHealthBar,
 } from 'lib/seam/components/AccessCodeTable/AccessCodeHealthBar.js'
-import { CodeDetails } from 'lib/seam/components/AccessCodeTable/CodeDetails.js'
+import { AccessCodeRow } from 'lib/seam/components/AccessCodeTable/AccessCodeRow.js'
 import { CreateAccessCodeForm } from 'lib/seam/components/CreateAccessCodeForm/CreateAccessCodeForm.js'
 import { EditAccessCodeForm } from 'lib/seam/components/EditAccessCodeForm/EditAccessCodeForm.js'
-import { copyToClipboard } from 'lib/ui/clipboard.js'
 import { IconButton } from 'lib/ui/IconButton.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
-import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
-import { MoreActionsMenu } from 'lib/ui/Menu/MoreActionsMenu.js'
 import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
-import { TableCell } from 'lib/ui/Table/TableCell.js'
 import { TableHeader } from 'lib/ui/Table/TableHeader.js'
-import { TableRow } from 'lib/ui/Table/TableRow.js'
 import { TableTitle } from 'lib/ui/Table/TableTitle.js'
 import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js'
 import { Caption } from 'lib/ui/typography/Caption.js'
-import { Title } from 'lib/ui/typography/Title.js'
 import { useToggle } from 'lib/ui/use-toggle.js'
 
 const disableCreateAccessCode = true
-const disableEditAccessCode = false
+const disableEditAccessCode = true
 
 export interface AccessCodeTableProps {
   deviceId: string
@@ -59,6 +49,7 @@ export interface AccessCodeTableProps {
    */
   title?: string | null
   className?: string
+  disableDeleteAccessCode?: boolean
 }
 
 type AccessCode = UseAccessCodesData[number]
@@ -88,6 +79,7 @@ export function AccessCodeTable({
   heading = t.accessCodes,
   title = t.accessCodes,
   className,
+  disableDeleteAccessCode = false,
 }: AccessCodeTableProps): JSX.Element {
   const { accessCodes } = useAccessCodes({
     device_id: deviceId,
@@ -155,6 +147,7 @@ export function AccessCodeTable({
         onEdit={() => {
           setSelectedEditAccessCodeId(selectedViewAccessCodeId)
         }}
+        disableDeleteAccessCode={disableDeleteAccessCode}
       />
     )
   }
@@ -205,6 +198,7 @@ export function AccessCodeTable({
           onAccessCodeClick={handleAccessCodeClick}
           onAccessCodeEdit={handleAccessCodeEdit}
           disableEditAccessCode={disableEditAccessCode}
+          disableDeleteAccessCode={disableDeleteAccessCode}
         />
       </TableBody>
     </div>
@@ -216,12 +210,14 @@ function Content(props: {
   onAccessCodeClick: (accessCodeId: string) => void
   onAccessCodeEdit: (accessCodeId: string) => void
   disableEditAccessCode: boolean
+  disableDeleteAccessCode: boolean
 }): JSX.Element {
   const {
     accessCodes,
     onAccessCodeClick,
     onAccessCodeEdit,
     disableEditAccessCode,
+    disableDeleteAccessCode,
   } = props
   const [filter, setFilter] = useState<AccessCodeFilter | null>(null)
 
@@ -258,6 +254,7 @@ function Content(props: {
             onAccessCodeClick(accessCode.access_code_id)
           }}
           disableEditAccessCode={disableEditAccessCode}
+          disableDeleteAccessCode={disableDeleteAccessCode}
           onEdit={() => {
             onAccessCodeEdit(accessCode.access_code_id)
           }}
@@ -267,82 +264,7 @@ function Content(props: {
   )
 }
 
-function AccessCodeRow(props: {
-  accessCode: UseAccessCodesData[number]
-  onClick: () => void
-  onEdit: () => void
-  disableEditAccessCode: boolean
-}): JSX.Element {
-  const { onClick, accessCode, onEdit, disableEditAccessCode } = props
-
-  const errorCount = accessCode.errors.length
-  const warningCount = accessCode.warnings.length
-  const isPlural = errorCount === 0 || errorCount > 1
-  const errorIconTitle = isPlural
-    ? `${errorCount} ${t.codeIssues}`
-    : `${errorCount} ${t.codeIssue}`
-  const warningIconTitle = isPlural
-    ? `${warningCount} ${t.codeIssues}`
-    : `${warningCount} ${t.codeIssue}`
-
-  return (
-    <TableRow onClick={onClick}>
-      <TableCell className='seam-icon-cell'>
-        <div>
-          <AccessCodeKeyIcon />
-        </div>
-      </TableCell>
-      <TableCell className='seam-name-cell'>
-        <Title className='seam-truncated-text'>{accessCode.name}</Title>
-        <CodeDetails accessCode={accessCode} />
-      </TableCell>
-      <TableCell className='seam-action-cell'>
-        {errorCount > 0 && (
-          <div className='seam-code-issue-icon-wrap' title={errorIconTitle}>
-            <ExclamationCircleOutlineIcon />
-          </div>
-        )}
-        {errorCount === 0 && warningCount > 0 && (
-          <div className='seam-code-issue-icon-wrap' title={warningIconTitle}>
-            <TriangleWarningOutlineIcon />
-          </div>
-        )}
-        <MoreActionsMenu
-          menuProps={{
-            backgroundProps: {
-              className: 'seam-access-code-table-action-menu',
-            },
-          }}
-        >
-          <MenuItem
-            onClick={() => {
-              void copyToClipboard(accessCode.code ?? '')
-            }}
-          >
-            <div className='seam-menu-item-copy'>
-              <span>
-                {t.copyCode} - {accessCode.code}
-              </span>
-              <CopyIcon />
-            </div>
-          </MenuItem>
-          {!disableEditAccessCode && (
-            <>
-              <div className='seam-divider' />
-              <MenuItem onClick={onEdit}>{t.editCode}</MenuItem>
-            </>
-          )}
-        </MoreActionsMenu>
-      </TableCell>
-    </TableRow>
-  )
-}
-
 const t = {
   accessCodes: 'Access Codes',
-  copyCode: 'Copy code',
   noAccessCodesMessage: 'Sorry, no access codes were found',
-  codeIssue: 'code issue',
-  codeIssues: 'code issues',
-  editCode: 'Edit code',
 }

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceContent.tsx

@@ -14,6 +14,7 @@ interface SupportedDeviceContentProps {
   resetFilterValue: () => void
   filters: DeviceModelFilters
   brands: string[] | null
+  excludedBrands: string[]
 }
 
 export function SupportedDeviceContent({
@@ -21,12 +22,14 @@ export function SupportedDeviceContent({
   filterValue,
   filters,
   brands,
+  excludedBrands,
 }: SupportedDeviceContentProps): JSX.Element | null {
   const { deviceModels, isLoading, isError, refetch } = useFilteredDeviceModels(
     {
       filterValue,
       filters,
       brands,
+      excludedBrands,
     }
   )
 

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceFilterArea.tsx

@@ -14,6 +14,7 @@ interface SupportedDeviceFilterAreaProps {
   filters: DeviceModelFilters
   setFilters: Dispatch<SetStateAction<DeviceModelFilters>>
   brands: string[] | null
+  excludedBrands: string[]
 }
 
 export function SupportedDeviceFilterArea({
@@ -22,10 +23,11 @@ export function SupportedDeviceFilterArea({
   filters,
   setFilters,
   brands,
+  excludedBrands,
 }: SupportedDeviceFilterAreaProps): JSX.Element {
   const appliedFiltersCount = getAppliedFilterCount(filters)
 
-  const availableBrands = useAvailableBrands(brands)
+  const availableBrands = useAvailableBrands(brands, excludedBrands)
 
   const resetFilter = (filterType: keyof DeviceModelFilters): void => {
     setFilters((filters) => ({
@@ -121,27 +123,27 @@ const getAppliedFilterCount = (filters: DeviceModelFilters): number => {
   return count
 }
 
-const useAvailableBrands = (brands: string[] | null): string[] => {
+const useAvailableBrands = (
+  brands: string[] | null,
+  excludedBrands: string[]
+): string[] => {
   const { deviceModels } = useDeviceModels()
 
   if (deviceModels == null) return []
 
-  const uniqueBrands = new Set<string>()
-  for (const deviceModel of deviceModels) {
-    const value = deviceModel.brand
-
-    // UPSTREAM: API can return an empty value for brand.
-    if (value.trim() === '') continue
-
-    uniqueBrands.add(deviceModel.brand)
-  }
-
-  return Array.from(uniqueBrands)
+  const availableBrands = deviceModels
+    .map(({ brand }) => brand.trim())
+    .filter((brand) => {
+      // UPSTREAM: API can return an empty value for brand.
+      return brand !== ''
+    })
     .filter((brand) => {
       if (brands === null) return true
-      return brands.includes(brand)
+      return brands.includes(brand) && !excludedBrands.includes(brand)
     })
     .map((brand) => capitalize(brand))
+
+  return Array.from(new Set(availableBrands))
 }
 
 const t = {

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.element.ts

@@ -8,6 +8,7 @@ export const props: ElementProps<SupportedDeviceTableProps> = {
   cannotFilter: 'boolean',
   disableFilter: 'boolean',
   brands: 'array',
+  excludedBrands: 'array',
   className: 'string',
 }
 

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTable.tsx

@@ -12,6 +12,7 @@ export interface SupportedDeviceTableProps {
    */
   cannotFilter?: boolean
   brands?: string[] | null
+  excludedBrands?: string[]
   className?: string
 }
 
@@ -19,6 +20,7 @@ export function SupportedDeviceTable({
   disableFilter = false,
   cannotFilter,
   brands = null,
+  excludedBrands = [],
   className,
 }: SupportedDeviceTableProps = {}): JSX.Element {
   const [filterValue, setFilterValue] = useState('')
@@ -43,6 +45,7 @@ export function SupportedDeviceTable({
           filters={filters}
           setFilters={setFilters}
           brands={brands}
+          excludedBrands={excludedBrands}
         />
       )}
       <SupportedDeviceContent
@@ -52,6 +55,7 @@ export function SupportedDeviceTable({
         filterValue={filterValue}
         filters={filters}
         brands={brands}
+        excludedBrands={excludedBrands}
       />
     </div>
   )

package/src/lib/seam/components/SupportedDeviceTable/use-filtered-device-models.ts

@@ -12,10 +12,12 @@ export const useFilteredDeviceModels = ({
   filterValue,
   filters,
   brands,
+  excludedBrands,
 }: {
   filterValue: string
   filters: DeviceModelFilters
   brands: string[] | null
+  excludedBrands: string[]
 }): ReturnType<typeof useDeviceModels> => {
   const params: UseDeviceModelsParams = {}
 
@@ -37,12 +39,12 @@ export const useFilteredDeviceModels = ({
     return query
   }
 
-  // UPSTREAM: The API does not have a brands query parameter,
+  // UPSTREAM: The API does not have a brands or excludedBrands query parameter,
   // so selected brands are filtered here.
   return {
     ...query,
-    deviceModels: query.deviceModels?.filter((deviceModel) =>
-      brands.includes(deviceModel.brand)
+    deviceModels: query.deviceModels?.filter(
+      ({ brand }) => brands.includes(brand) && !excludedBrands.includes(brand)
     ),
   }
 }

package/src/lib/ui/Menu/MenuItem.tsx

@@ -1,20 +1,31 @@
+import classNames from 'classnames'
 import type { PropsWithChildren } from 'react'
 
 import { useMenu } from 'lib/ui/Menu/Menu.js'
 
 interface MenuItemProps extends PropsWithChildren {
-  onClick: () => void
+  onClick: (event: React.MouseEvent) => void
+  className?: string
+  preventDefaultOnClick?: boolean
 }
 
-export function MenuItem({ onClick, children }: MenuItemProps): JSX.Element {
+export function MenuItem({
+  onClick,
+  children,
+  className,
+  preventDefaultOnClick = false,
+}: MenuItemProps): JSX.Element {
   const { close: closeMenu } = useMenu()
 
   return (
     <div
-      className='seam-menu-item'
-      onClick={() => {
-        onClick()
-        closeMenu()
+      className={classNames('seam-menu-item', className)}
+      onClick={(event: React.MouseEvent) => {
+        onClick(event)
+
+        if (!preventDefaultOnClick) {
+          closeMenu()
+        }
       }}
     >
       {children}

package/src/lib/ui/thermostat/ClimateSettingStatus.tsx

@@ -0,0 +1,88 @@
+import type { ClimateSetting } from 'seamapi'
+
+import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
+import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
+import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
+import { ThermostatOffIcon } from 'lib/icons/ThermostatOff.js'
+
+interface ClimateSettingStatusProps {
+  climateSetting: ClimateSetting
+  temperatureUnit?: 'fahrenheit' | 'celsius'
+  iconPlacement?: 'left' | 'right'
+}
+
+export function ClimateSettingStatus({
+  climateSetting,
+  temperatureUnit = 'fahrenheit',
+  iconPlacement = 'left',
+}: ClimateSettingStatusProps): JSX.Element {
+  return (
+    <div className='seam-climate-setting-status'>
+      {iconPlacement === 'left' && (
+        <ClimateSettingIcon mode={climateSetting.hvac_mode_setting} />
+      )}
+      <Content
+        mode={climateSetting.hvac_mode_setting}
+        coolingSetPoint={climateSetting.cooling_set_point_fahrenheit}
+        heatingSetPoint={climateSetting.heating_set_point_fahrenheit}
+        temperatureUnit={temperatureUnit}
+      />
+      {iconPlacement === 'right' && (
+        <ClimateSettingIcon mode={climateSetting.hvac_mode_setting} />
+      )}
+    </div>
+  )
+}
+
+function ClimateSettingIcon(props: {
+  mode: ClimateSetting['hvac_mode_setting']
+}): JSX.Element | null {
+  const { mode } = props
+
+  return (
+    <div className='seam-climate-setting-status-icon'>
+      {mode === 'cool' && <ThermostatCoolIcon />}
+      {mode === 'heat' && <ThermostatHeatIcon />}
+      {mode === 'heatcool' && <ThermostatHeatCoolIcon />}
+      {mode === 'off' && <ThermostatOffIcon />}
+    </div>
+  )
+}
+
+function Content(props: {
+  mode: ClimateSetting['hvac_mode_setting']
+  coolingSetPoint:
+    | ClimateSetting['cooling_set_point_fahrenheit']
+    | ClimateSetting['cooling_set_point_celsius']
+  heatingSetPoint:
+    | ClimateSetting['heating_set_point_fahrenheit']
+    | ClimateSetting['heating_set_point_celsius']
+  temperatureUnit: 'fahrenheit' | 'celsius'
+}): JSX.Element | null {
+  const { mode, coolingSetPoint, heatingSetPoint, temperatureUnit } = props
+  const hasCoolingSetPoint = coolingSetPoint !== undefined
+  const hasHeatingSetPoint = heatingSetPoint !== undefined
+  const unit =
+    temperatureUnit === 'fahrenheit' ? t.degreeFahrenheit : t.degreeCelsius
+
+  if (mode === 'cool' && hasCoolingSetPoint)
+    return <span>{`${coolingSetPoint}${unit}`}</span>
+
+  if (mode === 'heat' && hasHeatingSetPoint)
+    return <span>{`${heatingSetPoint}${unit}`}</span>
+
+  if (mode === 'heatcool' && hasHeatingSetPoint && hasCoolingSetPoint)
+    return (
+      <span>{`${heatingSetPoint}${unit} - ${coolingSetPoint}${unit}`}</span>
+    )
+
+  if (mode === 'off') return <span>{t.off}</span>
+
+  return null
+}
+
+const t = {
+  degreeFahrenheit: '°F',
+  degreeCelsius: '°C',
+  off: 'Off',
+}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '1.43.0'
+const seamapiReactVersion = '1.45.0'
 
 export default seamapiReactVersion

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

@@ -82,6 +82,8 @@
     .seam-actions {
       margin-bottom: 16px;
       padding: 0 24px;
+      display: flex;
+      gap: 8px;
     }
 
     .seam-details {