@seamapi/react 4.1.0 → 4.2.0

package/src/lib/icons/FanOutline.tsx

@@ -7,9 +7,10 @@ export function FanOutlineIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={22}
-      height={22}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 22 22'
       {...props}
     >
       <path

package/src/lib/icons/Info.tsx

@@ -7,9 +7,10 @@ export function InfoIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={18}
-      height={19}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 18 19'
       {...props}
     >
       <mask

package/src/lib/icons/InfoBlue.tsx

@@ -7,9 +7,10 @@ export function InfoBlueIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={16}
-      height={16}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 16 16'
       {...props}
     >
       <mask

package/src/lib/icons/InfoDark.tsx

@@ -7,9 +7,10 @@ export function InfoDarkIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={19}
-      height={19}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 19 19'
       {...props}
     >
       <circle cx={9.755} cy={9.416} r={6.655} fill='#E9EDEF' />

package/src/lib/icons/LockLocked.tsx

@@ -7,9 +7,10 @@ export function LockLockedIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={25}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 25 25'
       {...props}
     >
       <mask

package/src/lib/icons/LockUnlocked.tsx

@@ -7,9 +7,10 @@ export function LockUnlockedIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={25}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 25 25'
       {...props}
     >
       <mask

package/src/lib/icons/NoiseLevels.tsx

@@ -7,9 +7,10 @@ export function NoiseLevelsIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={18}
-      height={19}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 18 19'
       {...props}
     >
       <path

package/src/lib/icons/NoiseLevelsRed.tsx

@@ -9,9 +9,10 @@ export function NoiseLevelsRedIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={18}
-      height={19}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 18 19'
       {...props}
     >
       <path

package/src/lib/icons/Off.tsx

@@ -7,9 +7,10 @@ export function OffIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={16}
-      height={16}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 16 16'
       {...props}
     >
       <mask

package/src/lib/icons/OnlineStatusAccountOffline.tsx

@@ -9,9 +9,10 @@ export function OnlineStatusAccountOfflineIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 25'
       {...props}
     >
       <mask

package/src/lib/icons/OnlineStatusDeviceOffline.tsx

@@ -9,9 +9,10 @@ export function OnlineStatusDeviceOfflineIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 25'
       {...props}
     >
       <path

package/src/lib/icons/OnlineStatusOnline.tsx

@@ -9,9 +9,10 @@ export function OnlineStatusOnlineIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <path

package/src/lib/icons/RadioChecked.tsx

@@ -7,9 +7,10 @@ export function RadioCheckedIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <path

package/src/lib/icons/RadioUnchecked.tsx

@@ -9,9 +9,10 @@ export function RadioUncheckedIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <path

package/src/lib/icons/Seam.tsx

@@ -7,9 +7,10 @@ export function SeamIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={167}
-      height={200}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 167 200'
       {...props}
     >
       <style>{'@media (prefers-color-scheme:dark){path{fill:#fff}}'}</style>

package/src/lib/icons/Search.tsx

@@ -7,9 +7,10 @@ export function SearchIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={25}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 25'
       {...props}
     >
       <mask

package/src/lib/icons/TemperatureAdd.tsx

@@ -9,9 +9,10 @@ export function TemperatureAddIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={18}
-      height={18}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 18 18'
       {...props}
     >
       <mask

package/src/lib/icons/TemperatureSubtract.tsx

@@ -9,9 +9,10 @@ export function TemperatureSubtractIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={18}
-      height={18}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 18 18'
       {...props}
     >
       <mask

package/src/lib/icons/ThermostatCool.tsx

@@ -9,9 +9,10 @@ export function ThermostatCoolIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={16}
-      height={16}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 16 16'
       {...props}
     >
       <path

package/src/lib/icons/ThermostatCoolLarge.tsx

@@ -9,9 +9,10 @@ export function ThermostatCoolLargeIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask

package/src/lib/icons/ThermostatHeat.tsx

@@ -9,9 +9,10 @@ export function ThermostatHeatIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={12}
-      height={14}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 12 14'
       {...props}
     >
       <path

package/src/lib/icons/ThermostatHeatCool.tsx

@@ -9,9 +9,10 @@ export function ThermostatHeatCoolIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={19}
-      height={18}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 19 18'
       {...props}
     >
       <path

package/src/lib/icons/ThermostatHeatLarge.tsx

@@ -9,9 +9,10 @@ export function ThermostatHeatLargeIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <path

package/src/lib/icons/ThermostatOff.tsx

@@ -7,9 +7,10 @@ export function ThermostatOffIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={14}
-      height={14}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 14 14'
       {...props}
     >
       <path

package/src/lib/icons/TriangleWarning.tsx

@@ -9,9 +9,10 @@ export function TriangleWarningIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <mask

package/src/lib/icons/TriangleWarningOutline.tsx

@@ -9,9 +9,10 @@ export function TriangleWarningOutlineIcon(
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={24}
-      height={24}
+      width='1em'
+      height='1em'
       fill='none'
+      viewBox='0 0 24 24'
       {...props}
     >
       <path fill='#FF9800' d='m12 6.49 7.53 13.01H4.47zm0-3.99-11 19h22z' />

package/src/lib/seam/components/DeviceDetails/DeviceInfo.tsx

@@ -32,7 +32,9 @@ export function DeviceInfo({
       <DetailRow label={t.manufacturer}>
         <div className='seam-detail-row-hstack'>
           {device.properties.model.manufacturer_display_name}
-          {device.properties.manufacturer === 'ecobee' && <BeeIcon />}
+          {device.properties.manufacturer === 'ecobee' && (
+            <BeeIcon style={{ fontSize: '33px' }} />
+          )}
         </div>
       </DetailRow>
       {!disableConnectedAccountInformation && (

package/src/lib/ui/Snackbar/Snackbar.tsx

@@ -67,7 +67,10 @@ export function Snackbar({
           'seam-snackbar-visible': automaticVisibility ? !hidden : visible,
         })}
       >
-        <SnackbarIcon variant={variant} />
+        <span className='seam-snackbar-icon-wrap'>
+          <SnackbarIcon variant={variant} />
+        </span>
+
         <div className='seam-snackbar-message-wrap'>
           <p className='seam-snackbar-message'>{message}</p>
         </div>

package/src/lib/ui/device/BatteryStatusIndicator.tsx

@@ -34,7 +34,7 @@ function Content(props: {
   if (status === 'full') {
     return (
       <>
-        <BatteryLevelFullIcon />
+        <BatteryLevelFullIcon style={{ fontSize: '24px' }} />
         <span className='seam-status-text'>
           {t.full}
           <Percentage level={level} />
@@ -46,7 +46,7 @@ function Content(props: {
   if (status === 'good') {
     return (
       <>
-        <BatteryLevelHighIcon />
+        <BatteryLevelHighIcon style={{ fontSize: '24px' }} />
         <span className='seam-status-text'>
           {t.high}
           <Percentage level={level} />
@@ -58,7 +58,7 @@ function Content(props: {
   if (status === 'low') {
     return (
       <>
-        <BatteryLevelLowIcon />
+        <BatteryLevelLowIcon style={{ fontSize: '24px' }} />
         <span className='seam-status-text'>
           {t.low}
           <Percentage level={level} />
@@ -70,7 +70,7 @@ function Content(props: {
   if (status === 'critical') {
     return (
       <>
-        <BatteryLevelCriticalIcon />
+        <BatteryLevelCriticalIcon style={{ fontSize: '24px' }} />
         <span className='seam-text-danger'>
           {t.critical}
           <Percentage level={level} />

package/src/lib/ui/device/OnlineStatus.tsx

@@ -25,7 +25,7 @@ export function OnlineStatus(props: OnlineStatusProps): JSX.Element {
 function AccountOfflineContent(): JSX.Element {
   return (
     <>
-      <OnlineStatusAccountOfflineIcon />
+      <OnlineStatusAccountOfflineIcon className='seam-font-24' />
       <span className='seam-text-danger'>{t.accountOffline}</span>
     </>
   )
@@ -36,7 +36,7 @@ function AccountOnlineContent(props: { isOnline: boolean }): JSX.Element {
   if (isOnline) {
     return (
       <>
-        <OnlineStatusOnlineIcon />
+        <OnlineStatusOnlineIcon className='seam-font-24' />
         <span className='seam-status-text'>{t.online}</span>
       </>
     )
@@ -44,7 +44,7 @@ function AccountOnlineContent(props: { isOnline: boolean }): JSX.Element {
 
   return (
     <>
-      <OnlineStatusDeviceOfflineIcon />
+      <OnlineStatusDeviceOfflineIcon className='seam-font-24' />
       <span className='seam-text-danger'>{t.deviceOffline}</span>
     </>
   )

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

@@ -25,7 +25,7 @@ export function ClimateModeMenu({
           <div className='seam-climate-mode-menu-button-icon'>
             <ModeIcon mode={mode} />
           </div>
-          <ChevronDownIcon />
+          <ChevronDownIcon className='seam-climate-mode-menu-button-chevron' />
         </button>
       )}
       verticalOffset={-180}

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

@@ -1,3 +1,5 @@
+import classNames from 'classnames'
+
 import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
 import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
 import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
@@ -46,7 +48,14 @@ function ClimateSettingIcon(props: {
   const { mode } = props
 
   return (
-    <div className='seam-climate-setting-status-icon'>
+    <div
+      className={classNames('seam-climate-setting-status-icon', {
+        'seam-climate-setting-status-icon-cool': mode === 'cool',
+        'seam-climate-setting-status-icon-heat': mode === 'heat',
+        'seam-climate-setting-status-icon-heat-cool': mode === 'heat_cool',
+        'seam-climate-setting-status-icon-off': mode === 'off',
+      })}
+    >
       {mode === 'cool' && <ThermostatCoolIcon />}
       {mode === 'heat' && <ThermostatHeatIcon />}
       {mode === 'heat_cool' && <ThermostatHeatCoolIcon />}

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

@@ -138,7 +138,7 @@ export function TemperatureControlGroup({
     <div className='seam-temperature-control-group'>
       {showHeat && (
         <div className='seam-temperature-control-group-block'>
-          <ThermostatHeatLargeIcon />
+          <ThermostatHeatLargeIcon className='seam-temperature-control-group-block-thermostat-icon' />
           <TemperatureControl
             variant='heat'
             value={heatValue}
@@ -151,7 +151,7 @@ export function TemperatureControlGroup({
 
       {showCool && (
         <div className='seam-temperature-control-group-block'>
-          <ThermostatCoolLargeIcon />
+          <ThermostatCoolLargeIcon className='seam-temperature-control-group-block-thermostat-icon' />
           <TemperatureControl
             variant='cool'
             value={coolValue}

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '4.1.0'
+const seamapiReactVersion = '4.2.0'
 
 export default seamapiReactVersion

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

@@ -59,7 +59,7 @@
             }
 
             svg {
-              scale: 0.8333;
+              font-size: 20px;
             }
           }
         }
@@ -141,7 +141,7 @@
               }
 
               svg {
-                scale: 0.8333;
+                font-size: 20px;
               }
             }
           }

package/src/styles/_alert.scss

@@ -80,6 +80,7 @@
     .seam-alert-icon {
       width: 24px;
       height: 24px;
+      font-size: 24px;
     }
 
     .seam-alert-content {

package/src/styles/_buttons.scss

@@ -11,17 +11,15 @@
     line-height: 0;
     width: 30px;
     height: 30px;
+    font-size: 18px;
+    color: colors.$primary;
 
-    &:hover {
-      background: rgb(0 122 252 / 8%);
+    path {
+      fill: colors.$primary;
     }
 
-    svg {
-      scale: 0.75;
-
-      * {
-        fill: colors.$primary;
-      }
+    &:hover {
+      background: rgb(0 122 252 / 8%);
     }
   }
 }

package/src/styles/_checkbox.scss

@@ -11,6 +11,7 @@
     > .seam-checkbox-icon {
       height: 24px;
       width: 24px;
+      font-size: 24px;
     }
 
     > input {

package/src/styles/_device-details.scss

@@ -123,7 +123,7 @@
               }
 
               svg {
-                scale: 0.75;
+                font-size: 18px !important;
                 margin-right: 8px;
               }
 

package/src/styles/_icons.scss

@@ -2,6 +2,8 @@
 
 @mixin all {
   .seam-lock-icon {
+    font-size: 24px;
+
     * {
       fill: colors.$text-gray-1;
     }

package/src/styles/_inputs.scss

@@ -49,7 +49,7 @@
       align-items: center;
 
       svg {
-        scale: 0.8333;
+        font-size: 22px;
       }
 
       &.seam-start {

package/src/styles/_layout.scss

@@ -18,6 +18,7 @@
       top: 50%;
       transform: translate(4px, -50%);
       left: 0;
+      font-size: 24px;
       cursor: pointer;
     }
 
@@ -281,6 +282,7 @@
       justify-content: center;
       align-items: center;
       transition: transform 0.2s ease-in-out;
+      font-size: 24px;
     }
   }
 }

package/src/styles/_radio-field.scss

@@ -20,6 +20,7 @@
       > .seam-radio-icon {
         height: 24px;
         width: 24px;
+        font-size: 24px;
       }
 
       > .seam-radio-label {