@wistia/vhs 4.0.0 → 4.0.1-beta.03d0758a.21c9d56

package/dist/index.d.mts

@@ -2,14 +2,15 @@ import * as styled_components from 'styled-components';
 import { css, DefaultTheme } from 'styled-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { JSX, ReactNode, ComponentPropsWithoutRef, Dispatch, SetStateAction, RefObject, MutableRefObject, MouseEvent, ComponentPropsWithRef, ChangeEvent, ElementType, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType, PropsWithChildren } from 'react';
+import { JSX, ReactNode, ComponentPropsWithoutRef, Dispatch, SetStateAction, RefObject, MutableRefObject, MouseEvent, ComponentPropsWithRef, ChangeEvent, ElementType, Ref, ComponentClass, ComponentProps, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType, PropsWithChildren } from 'react';
 import { FormikProps, FormikHelpers, FormikErrors, Field } from 'formik';
 export { useFormikContext } from 'formik';
+import { BaseEditor, Descendant } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { HistoryEditor } from 'slate-history';
 import { DropdownMenuProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps } from '@radix-ui/react-dropdown-menu';
 export { DropdownMenuRadioGroup as MenuRadioGroup } from '@radix-ui/react-dropdown-menu';
 import * as styled_components_dist_types from 'styled-components/dist/types';
-import { Descendant } from 'slate';
-import { ReactEditor } from 'slate-react';
 
 interface VHSTheme {
     readonly breakpoint: {
@@ -547,7 +548,7 @@ type Rect = {
     x: number;
     y: number;
 };
-declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T>, Rect];
+declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T | null>, Rect];
 
 type AddEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
 type RemoveEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
@@ -555,7 +556,7 @@ declare const useEvent: <T extends Event>(eventName: Parameters<AddEventListener
 
 type UseFocusTrapOptions = {
     disableAriaHider?: boolean;
-    focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
+    focusSelector?: HTMLElement | RefObject<HTMLElement | null> | string | null | undefined;
 };
 declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
 
@@ -1786,7 +1787,7 @@ type FormProps = {
     /**
      * Ref to access the form's state and API
      */
-    innerRef?: React.Ref<FormState>;
+    innerRef?: Ref<FormState>;
     /**
      * On-submit callback
      */
@@ -1868,6 +1869,35 @@ type CustomComponentClass = {
     };
 };
 
+type NodeElementObject = {
+    attributes?: Record<string, string>;
+    children?: NodeLeafObject[];
+    type?: string;
+    url?: string;
+};
+type NodeObject = NodeElementObject | NodeLeafObject;
+type NodeLeafObject = {
+    attributes?: Record<string, string>;
+    bold?: boolean;
+    code?: boolean;
+    italic?: boolean;
+    parent?: NodeObject;
+    children?: NodeLeafObject[];
+    strikethrough?: boolean;
+    text?: string;
+    type?: string;
+    url?: string;
+    underline?: boolean;
+};
+type CustomEditor = BaseEditor & HistoryEditor & ReactEditor;
+declare module 'slate' {
+    interface CustomTypes {
+        Editor: CustomEditor;
+        Element: NodeElementObject;
+        Text: NodeLeafObject;
+    }
+}
+
 declare const rteFormatTypes: Readonly<{
     BOLD: "BOLD";
     ITALIC: "ITALIC";
@@ -1886,7 +1916,7 @@ type FormFieldProps = Omit<ComponentPropsWithRef<'input'>, 'placeholder'> & {
     /**
      * A custom component that acts as a field and that needs access to Formik fields
      */
-    customComponent?: React.ComponentClass<CustomComponentClass> | ((arg?: React.ComponentProps<typeof Field>) => ReactNode) | ((arg?: Record<string, unknown>) => ReactNode) | undefined;
+    customComponent?: ComponentClass<CustomComponentClass> | ((arg?: ComponentProps<typeof Field>) => ReactNode) | ((arg?: Record<string, unknown>) => ReactNode) | undefined;
     /**
      * Should the radio buttons be displayed vertically as a column or horizontally as a row
      */
@@ -2532,7 +2562,7 @@ type ModalProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Ref to the element that should receive focus when the modal opens
      */
-    initialFocusRef?: RefObject<HTMLElement>;
+    initialFocusRef?: RefObject<HTMLElement | null>;
     /**
      * Whether or not the modal is open, and should be rendered
      */
@@ -2837,34 +2867,6 @@ declare const RangeSelector: {
     displayName: string;
 };
 
-type NodeElementObject = {
-    attributes?: Record<string, string>;
-    children?: NodeLeafObject[];
-    type?: string;
-    url?: string;
-};
-type NodeObject = NodeElementObject | NodeLeafObject;
-type NodeLeafObject = {
-    attributes?: Record<string, string>;
-    bold?: boolean;
-    code?: boolean;
-    italic?: boolean;
-    parent?: NodeObject;
-    children?: NodeLeafObject[];
-    strikethrough?: boolean;
-    text?: string;
-    type?: string;
-    url?: string;
-    underline?: boolean;
-};
-declare module 'slate' {
-    interface CustomTypes {
-        Editor: ReactEditor;
-        Element: NodeElementObject;
-        Text: NodeLeafObject;
-    }
-}
-
 type RichTextEditorProps = {
     /**
      * Optional id to set aria-labelledby

package/dist/index.d.ts

@@ -2,14 +2,15 @@ import * as styled_components from 'styled-components';
 import { css, DefaultTheme } from 'styled-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { JSX, ReactNode, ComponentPropsWithoutRef, Dispatch, SetStateAction, RefObject, MutableRefObject, MouseEvent, ComponentPropsWithRef, ChangeEvent, ElementType, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType, PropsWithChildren } from 'react';
+import { JSX, ReactNode, ComponentPropsWithoutRef, Dispatch, SetStateAction, RefObject, MutableRefObject, MouseEvent, ComponentPropsWithRef, ChangeEvent, ElementType, Ref, ComponentClass, ComponentProps, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType, PropsWithChildren } from 'react';
 import { FormikProps, FormikHelpers, FormikErrors, Field } from 'formik';
 export { useFormikContext } from 'formik';
+import { BaseEditor, Descendant } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { HistoryEditor } from 'slate-history';
 import { DropdownMenuProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps } from '@radix-ui/react-dropdown-menu';
 export { DropdownMenuRadioGroup as MenuRadioGroup } from '@radix-ui/react-dropdown-menu';
 import * as styled_components_dist_types from 'styled-components/dist/types';
-import { Descendant } from 'slate';
-import { ReactEditor } from 'slate-react';
 
 interface VHSTheme {
     readonly breakpoint: {
@@ -547,7 +548,7 @@ type Rect = {
     x: number;
     y: number;
 };
-declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T>, Rect];
+declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T | null>, Rect];
 
 type AddEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
 type RemoveEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
@@ -555,7 +556,7 @@ declare const useEvent: <T extends Event>(eventName: Parameters<AddEventListener
 
 type UseFocusTrapOptions = {
     disableAriaHider?: boolean;
-    focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
+    focusSelector?: HTMLElement | RefObject<HTMLElement | null> | string | null | undefined;
 };
 declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
 
@@ -1786,7 +1787,7 @@ type FormProps = {
     /**
      * Ref to access the form's state and API
      */
-    innerRef?: React.Ref<FormState>;
+    innerRef?: Ref<FormState>;
     /**
      * On-submit callback
      */
@@ -1868,6 +1869,35 @@ type CustomComponentClass = {
     };
 };
 
+type NodeElementObject = {
+    attributes?: Record<string, string>;
+    children?: NodeLeafObject[];
+    type?: string;
+    url?: string;
+};
+type NodeObject = NodeElementObject | NodeLeafObject;
+type NodeLeafObject = {
+    attributes?: Record<string, string>;
+    bold?: boolean;
+    code?: boolean;
+    italic?: boolean;
+    parent?: NodeObject;
+    children?: NodeLeafObject[];
+    strikethrough?: boolean;
+    text?: string;
+    type?: string;
+    url?: string;
+    underline?: boolean;
+};
+type CustomEditor = BaseEditor & HistoryEditor & ReactEditor;
+declare module 'slate' {
+    interface CustomTypes {
+        Editor: CustomEditor;
+        Element: NodeElementObject;
+        Text: NodeLeafObject;
+    }
+}
+
 declare const rteFormatTypes: Readonly<{
     BOLD: "BOLD";
     ITALIC: "ITALIC";
@@ -1886,7 +1916,7 @@ type FormFieldProps = Omit<ComponentPropsWithRef<'input'>, 'placeholder'> & {
     /**
      * A custom component that acts as a field and that needs access to Formik fields
      */
-    customComponent?: React.ComponentClass<CustomComponentClass> | ((arg?: React.ComponentProps<typeof Field>) => ReactNode) | ((arg?: Record<string, unknown>) => ReactNode) | undefined;
+    customComponent?: ComponentClass<CustomComponentClass> | ((arg?: ComponentProps<typeof Field>) => ReactNode) | ((arg?: Record<string, unknown>) => ReactNode) | undefined;
     /**
      * Should the radio buttons be displayed vertically as a column or horizontally as a row
      */
@@ -2532,7 +2562,7 @@ type ModalProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Ref to the element that should receive focus when the modal opens
      */
-    initialFocusRef?: RefObject<HTMLElement>;
+    initialFocusRef?: RefObject<HTMLElement | null>;
     /**
      * Whether or not the modal is open, and should be rendered
      */
@@ -2837,34 +2867,6 @@ declare const RangeSelector: {
     displayName: string;
 };
 
-type NodeElementObject = {
-    attributes?: Record<string, string>;
-    children?: NodeLeafObject[];
-    type?: string;
-    url?: string;
-};
-type NodeObject = NodeElementObject | NodeLeafObject;
-type NodeLeafObject = {
-    attributes?: Record<string, string>;
-    bold?: boolean;
-    code?: boolean;
-    italic?: boolean;
-    parent?: NodeObject;
-    children?: NodeLeafObject[];
-    strikethrough?: boolean;
-    text?: string;
-    type?: string;
-    url?: string;
-    underline?: boolean;
-};
-declare module 'slate' {
-    interface CustomTypes {
-        Editor: ReactEditor;
-        Element: NodeElementObject;
-        Text: NodeLeafObject;
-    }
-}
-
 type RichTextEditorProps = {
     /**
      * Optional id to set aria-labelledby

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/vhs v4.0.0
+ * @license @wistia/vhs v4.0.1-beta.03d0758a.21c9d56
  *
  * Copyright (c) 2021-2025, Wistia, Inc. and its affiliates.
  *
@@ -3707,7 +3707,7 @@ var normalize = css3`
   [type='button'],
   [type='reset'],
   [type='submit'] {
-    appearance: button;
+    appearance: auto;
   }
 
   /**
@@ -3817,7 +3817,7 @@ var normalize = css3`
   */
 
   ::-webkit-file-upload-button {
-    appearance: button; /* 1 */
+    appearance: auto; /* 1 */
     font: inherit; /* 2 */
   }
 
@@ -3937,7 +3937,7 @@ import { useCallback as useCallback5 } from "react";
 import { useEffect as useEffect2, useRef as useRef2, useState as useState5 } from "react";
 var useTimedToggle = (initialValue) => {
   const [value, setValue] = useState5(false);
-  const timeoutRef = useRef2();
+  const timeoutRef = useRef2(void 0);
   const initialValueRef = useRef2(initialValue);
   const toggleValue = (timeout2) => {
     clearTimeout(timeoutRef.current);
@@ -4010,8 +4010,8 @@ var isEventTargetSupported = (eventTarget) => (
   Boolean(typeof eventTarget === "object" && eventTarget?.addEventListener)
 );
 var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}) => {
-  const savedEventHandler = useRef4();
-  const savedEventOptions = useRef4();
+  const savedEventHandler = useRef4(void 0);
+  const savedEventOptions = useRef4(void 0);
   useEffect3(() => {
     savedEventHandler.current = eventHandler;
   }, [eventHandler]);
@@ -4448,7 +4448,7 @@ var usePreventScroll = (locked) => {
 // src/hooks/usePreviousValue/usePreviousValue.ts
 import { useEffect as useEffect7, useRef as useRef7 } from "react";
 var usePreviousValue = (value) => {
-  const ref = useRef7();
+  const ref = useRef7(void 0);
   useEffect7(() => {
     ref.current = value;
   });
@@ -4545,7 +4545,7 @@ var ModalBaseContent = ({
   const wasJustShown = usePreviousValue(isShown);
   const hide = () => setIsShownAttempted(false);
   const show = useCallback8(() => setIsShownAttempted(true), []);
-  const toggleButtonRef = useRef8();
+  const toggleButtonRef = useRef8(void 0);
   const modalEl = document.createElement("div");
   modalEl.classList.add("Modal");
   if (isNotUndefined2(className)) {
@@ -4976,8 +4976,7 @@ import { isNotNil as isNotNil7 } from "@wistia/type-guards";
 import { jsx as jsx126 } from "react/jsx-runtime";
 var screenReaderOnlyStyle = css7`
   border: 0;
-  clip: rect(1px, 1px, 1px, 1px); /* deprecated but remains as fallback */
-  clip-path: inset(50%); /* modern but less support */
+  clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   padding: 0;
@@ -6623,7 +6622,9 @@ var disabledStyle3 = css13`
 var errorHoverStyle = css13`
   border-color: transparent;
 `;
-var errorFocusedStyle = css13``;
+var errorFocusedStyle = css13`
+  outline: none;
+`;
 var errorStyle = css13`
   background-color: ${({ theme: theme2 }) => theme2.color.error100};
   border: 1px solid ${({ theme: theme2 }) => theme2.color.error500};
@@ -7555,7 +7556,7 @@ import { useEffect as useEffect13 } from "react";
 import { useCallback as useCallback10, useEffect as useEffect12, useRef as useRef10 } from "react";
 var useTimeoutFunc = (func, timeout2 = 0) => {
   const readyRef = useRef10(false);
-  const timeoutRef = useRef10();
+  const timeoutRef = useRef10(void 0);
   const callbackRef = useRef10(func);
   const isReady = useCallback10(() => readyRef.current, []);
   const set = useCallback10(() => {
@@ -7931,7 +7932,7 @@ FormConnectorCheckboxGroup.displayName = "FormConnectorCheckboxGroup";
 import { isNotUndefined as isNotUndefined6 } from "@wistia/type-guards";
 import { jsx as jsx158 } from "react/jsx-runtime";
 var FormConnectorCustomField = ({
-  customComponent: Element7,
+  customComponent: Element8,
   field,
   form,
   label = "",
@@ -7950,7 +7951,7 @@ var FormConnectorCustomField = ({
       labelProps,
       name,
       children: /* @__PURE__ */ jsx158(
-        Element7,
+        Element8,
         {
           field,
           form,
@@ -8920,9 +8921,9 @@ import { isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
 import { useCallback as useCallback12, useMemo as useMemo7, useEffect as useEffect18 } from "react";
 import { styled as styled41 } from "styled-components";
 import { Editable, withReact, Slate, ReactEditor } from "slate-react";
-import { createEditor, Transforms as Transforms5, Element as Element6, Text as Text4 } from "slate";
+import { createEditor, Transforms as Transforms5, Element as Element7, Text as Text4 } from "slate";
 import { withHistory } from "slate-history";
-import isHotkey from "is-hotkey";
+import { isHotkey } from "is-hotkey";
 import { isNil as isNil14, isNotNil as isNotNil26, isNonEmptyString as isNonEmptyString11 } from "@wistia/type-guards";
 import isEqual2 from "react-fast-compare";
 
@@ -9171,7 +9172,10 @@ var deserializeHTMLNode = (el) => {
     return null;
   }
   const children = getNodeChildren(el, deserializeHTMLNode);
-  const safeChildren = children.length > 0 && children[0] != null ? children : [emptyTextNode];
+  const filteredChildren = children.filter(
+    (child) => child === null || typeof child === "string" || typeof child === "object" && ("text" in child || "type" in child)
+  );
+  const safeChildren = filteredChildren.length > 0 && filteredChildren[0] != null ? filteredChildren : [emptyTextNode];
   if (el.nodeName === "BODY") {
     return jsx168("fragment", {}, safeChildren);
   }
@@ -9232,7 +9236,7 @@ import { useSelected, useFocused } from "slate-react";
 import { styled as styled39, css as css21 } from "styled-components";
 import { jsx as jsx170, jsxs as jsxs28 } from "react/jsx-runtime";
 var Wrapper = styled39.span`
-  display: 'inline-block';
+  display: inline-block;
   user-select: none;
 `;
 var Image = styled39.img`
@@ -9358,10 +9362,10 @@ import { Transforms as Transforms2, Element as Element4, Text as Text3 } from "s
 import { isNotUndefined as isNotUndefined10, isNotNil as isNotNil25 } from "@wistia/type-guards";
 
 // src/components/RichTextEditor/utilities/toggle.ts
-import { Element as Element3, Editor, Transforms } from "slate";
+import { Element as Element3, Transforms, Editor as SlateEditor } from "slate";
 import { isNotNil as isNotNil24, isNonEmptyString as isNonEmptyString8 } from "@wistia/type-guards";
 var isBlockActive = (editor, format) => {
-  const [match] = Editor.nodes(editor, {
+  const [match] = SlateEditor.nodes(editor, {
     match: (node) => Element3.isElement(node) && node.type === format
   });
   return Boolean(match);
@@ -9384,15 +9388,15 @@ var toggleBlck = (editor, format) => {
   }
 };
 var isMarkActive = (editor, format) => {
-  const valueMarks = Editor.marks(editor);
+  const valueMarks = SlateEditor.marks(editor);
   return isNonEmptyString8(valueMarks && Object.keys(valueMarks).find((mark) => mark === format));
 };
 var toggleMark = (editor, format) => {
   const isActive = isMarkActive(editor, format);
   if (isActive) {
-    Editor.removeMark(editor, format);
+    SlateEditor.removeMark(editor, format);
   } else {
-    Editor.addMark(editor, format, true);
+    SlateEditor.addMark(editor, format, true);
   }
 };
 
@@ -9449,14 +9453,14 @@ var withImages = (editor) => {
 };
 
 // src/components/RichTextEditor/utilities/withLinksPlugin.ts
-import { Transforms as Transforms3, Element as Element5, Node, Editor as Editor2, Range, Path } from "slate";
+import { Transforms as Transforms3, Element as Element5, Node, Editor, Range, Path } from "slate";
 import { isNonEmptyString as isNonEmptyString9 } from "@wistia/type-guards";
 var isHashUrl = (urlString) => {
   const urlPattern = /^#.+$/i;
   return Boolean(urlPattern.test(urlString));
 };
 var isLinkActive = (editor) => {
-  const [link] = Editor2.nodes(editor, {
+  const [link] = Editor.nodes(editor, {
     match: (node) => Element5.isElement(node) && node.type === "link"
   });
   return Boolean(link);
@@ -9540,10 +9544,10 @@ var insertLink = (editor) => {
 };
 
 // src/components/RichTextEditor/utilities/handleListEscape.ts
-import { Transforms as Transforms4, Range as Range2, Editor as Editor3 } from "slate";
+import { Transforms as Transforms4, Range as Range2, Editor as Editor2, Element as Element6 } from "slate";
 var OverriddenEditor = {
-  ...Editor3,
-  isBlck: Editor3.isBlock
+  ...Editor2,
+  isBlck: Editor2.isBlock
 };
 var newLine = {
   type: "paragraph",
@@ -9567,7 +9571,7 @@ var handleListEscape = (editor) => {
   const selectedElement = editor.children[selection.anchor.path[0]];
   const isList = selectedElement.type === "bulleted-list" || selectedElement.type === "numbered-list";
   const blockAbove = OverriddenEditor.above(editor, {
-    match: (node) => OverriddenEditor.isBlck(editor, node)
+    match: (node) => Element6.isElement(node) && OverriddenEditor.isBlck(editor, node)
   });
   if ((textIsNotSelected ?? false) && isList && isLastChildBlankText(blockAbove[0].children)) {
     Transforms4.removeNodes(editor, { hanging: true });
@@ -10055,17 +10059,19 @@ var RichTextEditor = ({
       return;
     }
     const selectedElement = editor.children[selection.anchor.path[0]];
-    if (Element6.isElement(selectedElement) && selectedElement.type === "image") {
+    if (Element7.isElement(selectedElement) && selectedElement.type === "image") {
       toggleBlck(editor, "image");
       Transforms5.removeNodes(editor, { at: selection });
       Transforms5.move(editor, { reverse: true });
-      const spanElement = editor.children.filter((child) => child.type === "span")[0];
-      if (Element6.isElement(spanElement) && spanElement.type === "span" && isNotNil26(spanElement.children) && isNotNil26(spanElement.children[0]) && isNotNil26(spanElement.children[0].text) && spanElement.children[0].text.trim() !== "") {
+      const spanElement = editor.children.filter(
+        (child) => Element7.isElement(child) && child.type === "span"
+      )[0];
+      if (Element7.isElement(spanElement) && spanElement.type === "span" && isNotNil26(spanElement.children) && isNotNil26(spanElement.children[0]) && isNotNil26(spanElement.children[0].text) && spanElement.children[0].text.trim() !== "") {
         Transforms5.setNodes(
           editor,
           { type: "paragraph" },
           {
-            match: (node) => node.type === "span" && isNotNil26(node.children) && Text4.isText(node.children[0]) && isNotNil26(node.children[0].text) && node.children[0].text.trim() !== "",
+            match: (node) => Element7.isElement(node) && node.type === "span" && isNotNil26(node.children) && Text4.isText(node.children[0]) && isNotNil26(node.children[0].text) && node.children[0].text.trim() !== "",
             split: true,
             mode: "highest"
           }
@@ -10081,7 +10087,9 @@ var RichTextEditor = ({
         "data-testid": dataTestId,
         disabled,
         height,
-        onClick: () => ReactEditor.focus(editor),
+        onClick: () => {
+          ReactEditor.focus(editor);
+        },
         children: /* @__PURE__ */ jsxs30(
           Slate,
           {
@@ -11307,7 +11315,7 @@ var Menu2 = forwardRef16(
     onClose,
     ...otherProps
   }, ref) => {
-    const menuRef = useRef12();
+    const menuRef = useRef12(void 0);
     const onClickOutsideFn = isNotNil32(onClickOutside) ? onClickOutside : () => {
     };
     useOnClickOutside(menuRef, onClickOutsideFn);
@@ -12633,7 +12641,7 @@ var setCursorPosition = (ref, start, end) => {
 var getSelectionFromMove = (selection, move, positions) => {
   const currentIndex = positions.findIndex((pos) => pos.start === selection[0]);
   let nextPosition = positions[currentIndex + move];
-  if (nextPosition && nextPosition.type === "skip") {
+  if (nextPosition?.type === "skip") {
     nextPosition = positions[currentIndex + move * 2];
   }
   if (nextPosition) {
@@ -13728,7 +13736,7 @@ var ThumbnailCollageContainer = styled71.div`
   grid-template-columns: 3fr 2fr;
   grid-template-rows: 1fr 1fr;
   width: 100%;
-  grid-gap: ${({ theme: theme2 }) => theme2.spacing.space01};
+  gap: ${({ theme: theme2 }) => theme2.spacing.space01};
   height: 100%;
 `;
 var CollageImage2 = styled71.div`