datocms-react-ui 1.0.1 → 1.1.0

package/src/Dropdown/OptionAction.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import { DropdownContext } from './DropdownContext';
 import s from './styles.module.css.json';
 
@@ -20,7 +21,7 @@ export const OptionAction = ({
     {(context) => (
       <button
         type="button"
-        className={classNames(s['Dropdown__menu__option__icon'], {
+        className={classNames(s.Dropdown__menu__option__icon, {
           [s['Dropdown__menu__option__icon--delete']]: red,
         })}
         onClick={(e) => {

package/src/Dropdown/Portal.tsx

@@ -1,9 +1,10 @@
+import classNames from 'classnames';
+import React from 'react';
+import { type ReactNode, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import React, { ReactNode, useEffect, useRef } from 'react';
 import { useCtx } from '..';
 import s from '../Canvas/styles.module.css.json';
 import { generateStyleFromCtx } from '../generateStyleFromCtx';
-import classNames from 'classnames';
 
 export function Portal({
   children,
@@ -36,8 +37,8 @@ export function Portal({
 
   return ReactDOM.createPortal(
     <div
-      className={classNames(s['themeVariables'], s['canvas'])}
-      style={generateStyleFromCtx(ctx)}
+      className={classNames(s.themeVariables, s.canvas)}
+      style={generateStyleFromCtx(ctx, true)}
     >
       {children}
     </div>,

package/src/Dropdown/Separator.tsx

@@ -9,5 +9,5 @@ export const Separator = (): JSX.Element | null => {
     return null;
   }
 
-  return <div className={s['Dropdown__menu__separator']} />;
+  return <div className={s.Dropdown__menu__separator} />;
 };

package/src/Dropdown/Text.tsx

@@ -4,5 +4,5 @@ import s from './styles.module.css.json';
 export type TextProps = { children: React.ReactNode };
 
 export function Text({ children }: TextProps): JSX.Element {
-  return <div className={s['Dropdown__menu__text']}>{children}</div>;
+  return <div className={s.Dropdown__menu__text}>{children}</div>;
 }

package/src/Dropdown/index.tsx

@@ -1,10 +1,10 @@
-import { Dropdown, DropdownProps } from './Dropdown';
-import { Group, GroupProps } from './Group';
-import { Menu, MenuProps } from './Menu';
-import { Option, OptionProps } from './Option';
-import { OptionAction, OptionActionProps } from './OptionAction';
+import { Dropdown, type DropdownProps } from './Dropdown';
+import { Group, type GroupProps } from './Group';
+import { Menu, type MenuProps } from './Menu';
+import { Option, type OptionProps } from './Option';
+import { OptionAction, type OptionActionProps } from './OptionAction';
 import { Separator } from './Separator';
-import { Text, TextProps } from './Text';
+import { Text, type TextProps } from './Text';
 
 export {
   Dropdown,

package/src/FieldError/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import s from './styles.module.css.json';
 
 type FieldErrorProps = {

package/src/FieldGroup/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import cn from 'classnames';
+import React from 'react';
 import styles from './styles.module.css.json';
 
 export interface FieldGroupProps {

package/src/FieldHint/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import s from './styles.module.css.json';
 
 type FieldHintProps = {

package/src/FieldWrapper/index.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode } from 'react';
-import { FieldError, FieldHint, FormLabel, FormLabelProps } from '..';
+import React, { type ReactNode } from 'react';
+import { FieldError, FieldHint, FormLabel, type FormLabelProps } from '..';
 
 type FieldWrapperProps = {
   id: string;

package/src/Form/index.tsx

@@ -1,12 +1,12 @@
+import cn from 'classnames';
 import React, {
   Children,
   useCallback,
-  CSSProperties,
-  FormEventHandler,
-  FormEvent,
-  ReactNode,
+  type CSSProperties,
+  type FormEventHandler,
+  type FormEvent,
+  type ReactNode,
 } from 'react';
-import cn from 'classnames';
 import styles from './styles.module.css.json';
 
 export interface FormProps {

package/src/FormLabel/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import cn from 'classnames';
+import React from 'react';
 import s from './styles.module.css.json';
 
 export interface FormLabelProps {

package/src/Section/index.tsx

@@ -1,5 +1,5 @@
-import React, { CSSProperties, ReactNode } from 'react';
 import cn from 'classnames';
+import React, { type CSSProperties, type ReactNode } from 'react';
 import s from './styles.module.css.json';
 
 type SectionProps = {
@@ -72,15 +72,15 @@ export function Section({
 }: SectionProps): JSX.Element {
   return (
     <div
-      className={cn(s['Section'], { [s['Section--highlighted']]: highlighted })}
+      className={cn(s.Section, { [s['Section--highlighted']]: highlighted })}
     >
       <div
-        className={cn(s['Section__header'], headerClassName)}
+        className={cn(s.Section__header, headerClassName)}
         style={headerStyle}
       >
         <div
           className={cn(
-            s['Section__title'],
+            s.Section__title,
 
             titleClassName,
           )}
@@ -89,13 +89,13 @@ export function Section({
           {collapsible && (
             <button
               type="button"
-              className={cn(s['Section__arrow'], {
+              className={cn(s.Section__arrow, {
                 [s['Section__arrow--is-open']]: collapsible.isOpen,
               })}
               onClick={collapsible.onToggle}
             />
           )}
-          <div className={s['Section__title__content']}>{title}</div>
+          <div className={s.Section__title__content}>{title}</div>
         </div>
       </div>
       {(!collapsible || collapsible.isOpen) && children}

package/src/SelectField/index.tsx

@@ -1,17 +1,17 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
+import type { GroupBase } from 'react-select';
 import {
   AsyncCreatableSelectInput,
-  AsyncCreatableSelectInputProps,
+  type AsyncCreatableSelectInputProps,
   AsyncSelectInput,
-  AsyncSelectInputProps,
+  type AsyncSelectInputProps,
   CreatableSelectInput,
-  CreatableSelectInputProps,
+  type CreatableSelectInputProps,
   FieldWrapper,
-  FormLabelProps,
+  type FormLabelProps,
   SelectInput,
-  SelectInputProps,
+  type SelectInputProps,
 } from '..';
-import { GroupBase } from 'react-select';
 
 type SelectFieldProps<
   Option,

package/src/SelectInput/index.tsx

@@ -1,15 +1,17 @@
 import React, { useMemo } from 'react';
 import RawSelect, {
-  Props as RawSelectProps,
-  GroupBase,
-  StylesConfig,
-  ThemeConfig,
+  type Props as RawSelectProps,
+  type GroupBase,
+  type StylesConfig,
+  type ThemeConfig,
 } from 'react-select';
-import RawAsyncSelect, { AsyncProps } from 'react-select/async';
+import RawAsyncSelect, { type AsyncProps } from 'react-select/async';
 import RawAsyncCreatableSelect, {
-  AsyncCreatableProps,
+  type AsyncCreatableProps,
 } from 'react-select/async-creatable';
-import RawCreatableSelect, { CreatableProps } from 'react-select/creatable';
+import RawCreatableSelect, {
+  type CreatableProps,
+} from 'react-select/creatable';
 
 const themeConfig: ThemeConfig = (existing) => ({
   ...existing,

package/src/SidebarPanel/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ReactNode, useState } from 'react';
+import React, { type ReactNode, useState } from 'react';
 import s from './styles.module.css.json';
 
 function ChevronDownIcon() {
@@ -10,7 +10,7 @@ function ChevronDownIcon() {
       width="1em"
       height="1em"
     >
-      <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path>
+      <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" />
     </svg>
   );
 }
@@ -23,7 +23,7 @@ function ChevronUpIcon() {
       width="1em"
       height="1em"
     >
-      <path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
+      <path d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" />
     </svg>
   );
 }
@@ -83,22 +83,22 @@ export function SidebarPanel({
   };
 
   return (
-    <div className={s['SidebarPanel']}>
+    <div className={s.SidebarPanel}>
       {title && (
         <button
           type="button"
-          className={s['SidebarPanel__header']}
+          className={s.SidebarPanel__header}
           onClick={handleToggle}
         >
-          <div className={s['SidebarPanel__header__title']}>{title}</div>
-          <div className={s['SidebarPanel__header__chevron']}>
+          <div className={s.SidebarPanel__header__title}>{title}</div>
+          <div className={s.SidebarPanel__header__chevron}>
             {open ? <ChevronDownIcon /> : <ChevronUpIcon />}
           </div>
         </button>
       )}
       {open && (
         <div
-          className={classNames(s['SidebarPanel__content'], {
+          className={classNames(s.SidebarPanel__content, {
             [s['SidebarPanel__content--no-padding']]: noPadding,
           })}
         >

package/src/Spinner/index.tsx

@@ -38,7 +38,7 @@ export function Spinner({
     const barStyle: React.CSSProperties = {};
     barStyle.animationDelay = `${(i - 12) / 10}s`;
     barStyle.transform = `rotate(${i * 30}deg) translate(146%)`;
-    bars.push(<div style={barStyle} className={s['Spinner__bar']} key={i} />);
+    bars.push(<div style={barStyle} className={s.Spinner__bar} key={i} />);
   }
 
   const style: React.CSSProperties = {

package/src/SwitchField/index.tsx

@@ -1,13 +1,13 @@
-import React, { ReactNode } from 'react';
+import cn from 'classnames';
+import React, { type ReactNode } from 'react';
 import {
   FieldError,
   FieldHint,
   FormLabel,
-  FormLabelProps,
+  type FormLabelProps,
   SwitchInput,
-  SwitchInputProps,
+  type SwitchInputProps,
 } from '..';
-import cn from 'classnames';
 import s from './styles.module.css.json';
 
 type SwitchFieldProps = {

package/src/SwitchInput/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import cn from 'classnames';
+import React from 'react';
 import s from './styles.module.css.json';
 
 export type SwitchInputChangeEventHandler = (
@@ -52,9 +52,9 @@ export function SwitchInput({
     onClick?.(e);
   }
 
-  const switchClassName = cn(s['switchInput'], className, {
-    [s['switchInput__checked']]: value,
-    [s['switchInput__disabled']]: disabled,
+  const switchClassName = cn(s.switchInput, className, {
+    [s.switchInput__checked]: value,
+    [s.switchInput__disabled]: disabled,
   });
 
   return (
@@ -68,7 +68,7 @@ export function SwitchInput({
       onKeyDown={onInternalKeyDown}
       onClick={onInternalClick}
     >
-      <span className={s['switchInput__inner']} />
+      <span className={s.switchInput__inner} />
     </button>
   );
 }

package/src/TextField/index.tsx

@@ -1,5 +1,10 @@
-import React, { ReactNode } from 'react';
-import { FieldWrapper, FormLabelProps, TextInput, TextInputProps } from '..';
+import React, { type ReactNode } from 'react';
+import {
+  FieldWrapper,
+  type FormLabelProps,
+  TextInput,
+  type TextInputProps,
+} from '..';
 
 type TextFieldProps = {
   id: string;

package/src/TextInput/index.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback, RefObject, ChangeEvent } from 'react';
 import cn from 'classnames';
+import React from 'react';
+import { type ChangeEvent, type RefObject, useCallback } from 'react';
 import s from './styles.module.css.json';
 
 export type TextInputChangeEventHandler = (
@@ -54,7 +55,7 @@ export const TextInput = ({
     [onChange],
   );
 
-  const classNames = cn(s['TextInput'], className, {
+  const classNames = cn(s.TextInput, className, {
     [s['TextInput--disabled']]: disabled,
     [s['TextInput--error']]: error,
     [s['TextInput--monospaced']]: monospaced,

package/src/TextareaField/index.tsx

@@ -1,9 +1,9 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import {
   FieldWrapper,
-  FormLabelProps,
+  type FormLabelProps,
   TextareaInput,
-  TextareaInputProps,
+  type TextareaInputProps,
 } from '..';
 
 type TextareaFieldProps = {

package/src/TextareaInput/index.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback, RefObject, ChangeEvent } from 'react';
 import cn from 'classnames';
+import React from 'react';
+import { type ChangeEvent, type RefObject, useCallback } from 'react';
 import s from './styles.module.css.json';
 
 export type TextareaInputChangeEventHandler = (
@@ -44,7 +45,7 @@ export const TextareaInput = ({
     [onChange],
   );
 
-  const classNames = cn(s['TextareaInput'], className, {
+  const classNames = cn(s.TextareaInput, className, {
     [s['TextareaInput--disabled']]: disabled,
     [s['TextareaInput--error']]: error,
     [s['TextareaInput--monospaced']]: monospaced,

package/src/Toolbar/Button/index.tsx

@@ -1,5 +1,9 @@
 import classNames from 'classnames';
-import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import React, {
+  type CSSProperties,
+  type MouseEventHandler,
+  type ReactNode,
+} from 'react';
 import s from './styles.module.css.json';
 
 export type ButtonProps = {
@@ -20,7 +24,7 @@ export function Button({
       type="button"
       onClick={onClick}
       className={classNames(
-        s['Button'],
+        s.Button,
 
         className,
       )}

package/src/Toolbar/Stack/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { CSSProperties, ReactNode } from 'react';
+import React, { type CSSProperties, type ReactNode } from 'react';
 import s from './styles.module.css.json';
 
 export type StackProps = {
@@ -18,7 +18,7 @@ export function Stack({
   return (
     <div
       className={classNames(
-        s['Stack'],
+        s.Stack,
         {
           [s['Stack--s']]: stackSize === 's',
           [s['Stack--l']]: stackSize === 'l',

package/src/Toolbar/Title/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { CSSProperties, ReactNode } from 'react';
+import React, { type CSSProperties, type ReactNode } from 'react';
 import s from './styles.module.css.json';
 
 export type TitleProps = {
@@ -10,7 +10,7 @@ export type TitleProps = {
 
 export function Title({ children, style, className }: TitleProps): JSX.Element {
   return (
-    <div className={classNames(s['Title'], className)} style={style}>
+    <div className={classNames(s.Title, className)} style={style}>
       {children}
     </div>
   );

package/src/Toolbar/Toolbar/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { CSSProperties, ReactNode } from 'react';
+import React, { type CSSProperties, type ReactNode } from 'react';
 import s from './styles.module.css.json';
 
 export type ToolbarProps = {
@@ -100,7 +100,7 @@ export function Toolbar({
   return (
     <div
       className={classNames(
-        s['Toolbar'],
+        s.Toolbar,
 
         className,
       )}

package/src/generateStyleFromCtx/index.ts

@@ -1,25 +1,29 @@
-import { RenderProperties } from 'datocms-plugin-sdk';
-import { CSSProperties } from 'react';
+import type { RenderProperties } from 'datocms-plugin-sdk';
+import type { CSSProperties } from 'react';
 
 function camelToDash(str: string) {
-  if (str != str.toLowerCase()) {
-    str = str.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+  if (str === str.toLowerCase()) {
+    return str;
   }
-  return str;
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 }
 
-export function generateStyleFromCtx(ctx: RenderProperties): CSSProperties {
-  return Object.entries(ctx.theme).reduce(
-    (acc, [k, v]) => {
-      return {
-        ...acc,
-        [`--${camelToDash(k)}`]: v,
-        [`--${camelToDash(`${k}RgbComponents`)}`]:
+export function generateStyleFromCtx(
+  ctx: RenderProperties,
+  noBodyPadding = false,
+): CSSProperties {
+  return {
+    padding: noBodyPadding
+      ? undefined
+      : ctx.bodyPadding.map((p) => `${p}px`).join(' '),
+    ...Object.fromEntries(
+      Object.entries(ctx.theme).flatMap(([k, v]) => [
+        [`--${camelToDash(k)}`, v],
+        [
+          `--${camelToDash(`${k}RgbComponents`)}`,
           v.match(/rgb\((\d+, \d+, \d+)\)/)?.[1] || undefined,
-      };
-    },
-    {
-      padding: ctx.bodyPadding.map((p) => `${p}px`).join(' '),
-    },
-  );
+        ],
+      ]),
+    ),
+  };
 }

package/src/icons.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React, { type CSSProperties } from 'react';
 
 export type IconProps = {
   width?: string | number;
@@ -22,7 +22,7 @@ export function BackIcon({
       style={style}
       className={className}
     >
-      <path d="M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"></path>
+      <path d="M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z" />
     </svg>
   );
 }
@@ -42,7 +42,7 @@ export function SidebarLeftArrowIcon({
       style={style}
       className={className}
     >
-      <path d="M152 412.5L3.5 264.5c-4.7-4.7-4.7-12.3 0-17L152 99.5c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L60.1 239H372c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H60.1L176 388.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.6 4.7-12.2 4.7-16.9 0zM436 64h-8c-6.6 0-12 5.4-12 12v360c0 6.6 5.4 12 12 12h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12z"></path>
+      <path d="M152 412.5L3.5 264.5c-4.7-4.7-4.7-12.3 0-17L152 99.5c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L60.1 239H372c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H60.1L176 388.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.6 4.7-12.2 4.7-16.9 0zM436 64h-8c-6.6 0-12 5.4-12 12v360c0 6.6 5.4 12 12 12h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12z" />
     </svg>
   );
 }
@@ -62,7 +62,7 @@ export function SidebarRightArrowIcon({
       style={style}
       className={className}
     >
-      <path d="M296 99.5l148.5 148c4.7 4.7 4.7 12.3 0 17L296 412.5c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17l116-115.4H76c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h311.9L272 123.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.6-4.7 12.2-4.7 16.9 0zM12 448h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12h-8C5.4 64 0 69.4 0 76v360c0 6.6 5.4 12 12 12z"></path>
+      <path d="M296 99.5l148.5 148c4.7 4.7 4.7 12.3 0 17L296 412.5c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17l116-115.4H76c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h311.9L272 123.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.6-4.7 12.2-4.7 16.9 0zM12 448h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12h-8C5.4 64 0 69.4 0 76v360c0 6.6 5.4 12 12 12z" />
     </svg>
   );
 }

package/src/mergeRefs/index.ts

@@ -1,8 +1,9 @@
 export const mergeRefs =
   <T>(...refs: React.Ref<T>[]): React.RefCallback<T> =>
-  (element: T) =>
-    refs.forEach((ref) => {
+  (element: T) => {
+    for (const ref of refs) {
       if (typeof ref === 'function') ref(element);
       else if (ref && typeof ref === 'object')
         (ref as React.MutableRefObject<T>).current = element;
-    });
+    }
+  };

package/src/useMediaQuery/index.ts

@@ -39,7 +39,9 @@ export function useMediaQuery(media: string): MediaQueryList {
         listener: (mql) => {
           const match = list[mql.media];
           if (match) {
-            match.notifiers.forEach((updateFn) => updateFn({}));
+            for (const updateFn of match.notifiers) {
+              updateFn({});
+            }
           }
         },
       };
@@ -106,7 +108,7 @@ function getResizeObserver(): ResizeObserver | undefined {
   }
 
   resizeObserver = new ResizeObserver((entries) => {
-    entries.forEach((entry) => {
+    for (const entry of entries) {
       const node = entry.target;
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -143,7 +145,7 @@ function getResizeObserver(): ResizeObserver | undefined {
         }
         return new DOMRect(0, 0, elRect.width, elRect.height);
       });
-    });
+    }
   });
 
   return resizeObserver;