@wix/patterns-fields 1.2.0 → 1.4.0

package/src/components/document/document-control.tsx

@@ -16,7 +16,7 @@ import { useTranslations } from '../../hooks';
 import { classes } from './form-document-field.st.css.js';
 import { DocumentLoader } from './document-loader';
 import { openDocument } from './utils';
-import { useWixPatternsContainer } from '@wix/patterns';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 const DOCUMENT_VIEW_ACTIONS_WIDTH = '196px';
 

package/src/components/document/form-document-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield3334819271";
+var _namespace_ = "formdocumentfield413423433";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formdocumentfield3334819271__root","viewWrapper":"formdocumentfield3334819271__viewWrapper","textWidth":"formdocumentfield3334819271__textWidth","documentLoader":"formdocumentfield3334819271__documentLoader","addDocument":"formdocumentfield3334819271__addDocument","addItemWrapper":"formdocumentfield3334819271__addItemWrapper"};
+export var classes = {"root":"formdocumentfield413423433__root","viewWrapper":"formdocumentfield413423433__viewWrapper","textWidth":"formdocumentfield413423433__textWidth","documentLoader":"formdocumentfield413423433__documentLoader","addDocument":"formdocumentfield413423433__addDocument","addItemWrapper":"formdocumentfield413423433__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/email/email-input.tsx

@@ -0,0 +1,77 @@
+import React, { forwardRef, useState, useCallback } from 'react';
+import { Input } from '@wix/design-system';
+import type { InputProps, InputImperativeActions } from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+import { isValid } from '../../validations/email';
+
+export interface EmailInputProps
+  extends Omit<InputProps, 'value' | 'onChange' | 'type'> {
+  value?: string;
+  onChange?(value: string): void;
+  onInvalidChange?(invalid: boolean): void;
+  onInput?(): void;
+}
+
+export const EmailInput = forwardRef<InputImperativeActions, EmailInputProps>(
+  (
+    {
+      value = '',
+      onChange,
+      onBlur,
+      onInvalidChange,
+      onInput,
+      placeholder,
+      statusMessage,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslations();
+    const [invalid, setInvalid] = useState(false);
+
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        onInput?.();
+        onChange?.(e.target.value);
+      },
+      [onChange, onInput],
+    );
+
+    const handleBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        const val = e.target.value;
+        const nextInvalid = val ? !isValid(val) : false;
+
+        setInvalid((prev) => {
+          if (prev !== nextInvalid) {
+            onInvalidChange?.(nextInvalid);
+          }
+          return nextInvalid;
+        });
+
+        onBlur?.(e);
+      },
+      [onBlur, onInvalidChange],
+    );
+
+    return (
+      <Input
+        {...props}
+        ref={forwardedRef}
+        type="email"
+        value={value}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        status={invalid ? 'error' : undefined}
+        statusMessage={
+          invalid
+            ? statusMessage ?? t('auto-patterns.email_input.invalid_message')
+            : undefined
+        }
+        placeholder={placeholder ?? t('auto-patterns.email_input.placeholder')}
+      />
+    );
+  },
+);
+
+EmailInput.displayName = 'EmailInput';

package/src/components/email/form-email-input.tsx

@@ -0,0 +1,43 @@
+import type { FC } from 'react';
+import React, { useRef, useCallback } from 'react';
+
+import type { InputImperativeActions } from '@wix/design-system';
+
+import type { FormInputProps } from '../../types';
+import { useAutoFocus } from '../../hooks';
+
+import { EmailInput } from './email-input';
+
+export type FormEmailInputProps = FormInputProps<string>;
+
+export const FormEmailInput: FC<FormEmailInputProps> = ({
+  data,
+  onChange,
+  onInput,
+  autoFocus,
+  readOnly,
+  dataHook,
+}) => {
+  const inputRef = useRef<InputImperativeActions | null>(null);
+  useAutoFocus(inputRef, autoFocus);
+
+  const handleChange = useCallback(
+    (value: string) => {
+      onChange(value);
+    },
+    [onChange],
+  );
+
+  return (
+    <EmailInput
+      dataHook={dataHook}
+      ref={inputRef}
+      readOnly={readOnly}
+      value={data ?? ''}
+      onChange={handleChange}
+      onInput={onInput}
+    />
+  );
+};
+
+FormEmailInput.displayName = 'FormEmailInput';

package/src/components/email/index.ts

@@ -0,0 +1,2 @@
+export * from './email-input';
+export * from './form-email-input';

package/src/components/exclamation/exclamation.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation2717074473";
+var _namespace_ = "exclamation298514202";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"exclamation2717074473__root","exclamation":"exclamation2717074473__exclamation","actions":"exclamation2717074473__actions","action":"exclamation2717074473__action"};
+export var classes = {"root":"exclamation298514202__root","exclamation":"exclamation298514202__exclamation","actions":"exclamation298514202__actions","action":"exclamation298514202__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/highlighted-text/highlighted-text.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext2440711656";
+var _namespace_ = "highlightedtext182426327";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext2440711656__root","substring":"highlightedtext2440711656__substring"};
-export var keyframes = {"highlighted":"highlightedtext2440711656__highlighted","highlighted-match":"highlightedtext2440711656__highlighted-match"}; 
+export var classes = {"root":"highlightedtext182426327__root","substring":"highlightedtext182426327__substring"};
+export var keyframes = {"highlighted":"highlightedtext182426327__highlighted","highlighted-match":"highlightedtext182426327__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/index.ts

@@ -14,3 +14,4 @@ export * from './document';
 export * from './multi-document';
 export * from './color-view';
 export * from './delete-dialog';
+export * from './email';

package/src/components/media-control/paste-url-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "pasteurlbutton1753934750";
+var _namespace_ = "pasteurlbutton3578730255";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"pasteurlbutton1753934750__root","iconButtonTooltip":"pasteurlbutton1753934750__iconButtonTooltip","iconButton":"pasteurlbutton1753934750__iconButton"};
+export var classes = {"root":"pasteurlbutton3578730255__root","iconButtonTooltip":"pasteurlbutton3578730255__iconButtonTooltip","iconButton":"pasteurlbutton3578730255__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/form-media-gallery-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield371742610";
+var _namespace_ = "formmediagalleryfield3412386839";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmediagalleryfield371742610__root","container":"formmediagalleryfield371742610__container","viewBox":"formmediagalleryfield371742610__viewBox","addItemWrapper":"formmediagalleryfield371742610__addItemWrapper","addItem":"formmediagalleryfield371742610__addItem","overlay":"formmediagalleryfield371742610__overlay","image":"formmediagalleryfield371742610__image","previewImage":"formmediagalleryfield371742610__previewImage","previewVideo":"formmediagalleryfield371742610__previewVideo"};
+export var classes = {"root":"formmediagalleryfield3412386839__root","container":"formmediagalleryfield3412386839__container","viewBox":"formmediagalleryfield3412386839__viewBox","addItemWrapper":"formmediagalleryfield3412386839__addItemWrapper","addItem":"formmediagalleryfield3412386839__addItem","overlay":"formmediagalleryfield3412386839__overlay","image":"formmediagalleryfield3412386839__image","previewImage":"formmediagalleryfield3412386839__previewImage","previewVideo":"formmediagalleryfield3412386839__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image/media-image.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage2247042067";
+var _namespace_ = "mediaimage2014641014";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediaimage2247042067__root"};
+export var classes = {"root":"mediaimage2014641014__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage2247042067-from","to":"--mediaimage2247042067-to"}; 
+export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage2014641014-from","to":"--mediaimage2014641014-to"}; 
 
 
 

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay2076063268";
+var _namespace_ = "overlay3524016728";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"overlay2076063268__root","iconOverlay":"overlay2076063268__iconOverlay"};
+export var classes = {"root":"overlay3524016728__root","iconOverlay":"overlay3524016728__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {"iconShadow":"drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6))"}; 
-export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay2076063268-wsr-color-D80"}; 
+export var vars = {"wds-color-white":"--wds-color-white","wsr-color-D80":"--overlay3524016728-wsr-color-D80"}; 
 
 
 

package/src/components/media-loader/media-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader1426177708";
+var _namespace_ = "medialoader3727996649";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"medialoader1426177708__root","loader":"medialoader1426177708__loader"};
+export var classes = {"root":"medialoader3727996649__root","loader":"medialoader3727996649__loader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-tag/web-media-tag/media-tag.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "mediatag3894720997";
+var _namespace_ = "mediatag715676404";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediatag3894720997__root"};
+export var classes = {"root":"mediatag715676404__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formmultidocument3830954437";
+var _namespace_ = "formmultidocument699566404";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmultidocument3830954437__root","viewRoot":"formmultidocument3830954437__viewRoot","singleViewWrapper":"formmultidocument3830954437__singleViewWrapper","addDocumentButton":"formmultidocument3830954437__addDocumentButton"};
+export var classes = {"root":"formmultidocument699566404__root","viewRoot":"formmultidocument699566404__viewRoot","singleViewWrapper":"formmultidocument699566404__singleViewWrapper","addDocumentButton":"formmultidocument699566404__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/object/cell-json-input.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef, useCallback } from 'react';
+
+import type { InputAreaProps } from '@wix/design-system';
+import { InputArea } from '@wix/design-system';
+import { useControlledInput } from '../../hooks';
+import { safeParse, safeStringify } from '../../utils';
+
+export interface CellJsonInputProps
+  extends Omit<InputAreaProps, 'value' | 'onChange'> {
+  value?: any;
+  /** Called on every keystroke with the parsed value (unlike JsonInput which calls onChange on blur). */
+  onChange?: (value?: any) => void;
+}
+
+/**
+ * Cell-oriented JSON input — fires onChange on every keystroke so the
+ * host can read the current value at any time (e.g. Tab-commit in EditableTable).
+ *
+ * Contrast with JsonInput which defers onChange to blur.
+ */
+export const CellJsonInput = forwardRef<InputArea, CellJsonInputProps>(
+  ({ value, onChange, onBlur, readOnly, disabled, ...props }, ref) => {
+    const [json, setJson] = useControlledInput(safeStringify(value, true));
+
+    const onInputChange = useCallback(
+      (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        const raw = event.target.value;
+        setJson(raw);
+        if (!readOnly && !disabled) {
+          onChange?.(raw ? safeParse(raw) : undefined);
+        }
+      },
+      [setJson, readOnly, disabled, onChange],
+    );
+
+    return (
+      <InputArea
+        {...props}
+        ref={ref}
+        value={json ?? ''}
+        onChange={onInputChange}
+        onBlur={onBlur}
+        readOnly={readOnly}
+        disabled={disabled}
+        autoSelect={false}
+      />
+    );
+  },
+);
+
+CellJsonInput.displayName = 'CellJsonInput';

package/src/components/object/index.ts

@@ -1,2 +1,4 @@
 export * from './json-view';
+export * from './json-input';
+export * from './cell-json-input';
 export * from './form-json-input';

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentdefaultvalueinput3439351237";
+var _namespace_ = "richcontentdefaultvalueinput1162373916";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontentdefaultvalueinput3439351237__root","richContentEditorContainer":"richcontentdefaultvalueinput3439351237__richContentEditorContainer","editor":"richcontentdefaultvalueinput3439351237__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput1162373916__root","richContentEditorContainer":"richcontentdefaultvalueinput1162373916__richContentEditorContainer","editor":"richcontentdefaultvalueinput1162373916__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput3439351237-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput3439351237-bottomToolbarHeight"}; 
+export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput1162373916-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput1162373916-bottomToolbarHeight"}; 
 
 
 

package/src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentforminput309451108";
+var _namespace_ = "richcontentforminput3054080369";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontentforminput309451108__root","editor":"richcontentforminput309451108__editor"};
+export var classes = {"root":"richcontentforminput3054080369__root","editor":"richcontentforminput3054080369__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-blue-300":"--wds-color-blue-300","wds-border-radius-300":"--wds-border-radius-300","wds-color-blue-100":"--wds-color-blue-100","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","topToolbarHeight":"--richcontentforminput309451108-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput309451108-bottomToolbarHeight"}; 
+export var vars = {"wds-color-blue-300":"--wds-color-blue-300","wds-border-radius-300":"--wds-border-radius-300","wds-color-blue-100":"--wds-color-blue-100","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","topToolbarHeight":"--richcontentforminput3054080369-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput3054080369-bottomToolbarHeight"}; 
 
 
 

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentformreadonlyinput1458053380";
+var _namespace_ = "richcontentformreadonlyinput2993743656";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontentformreadonlyinput1458053380__root"};
+export var classes = {"root":"richcontentformreadonlyinput2993743656__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "fullscreenmodal1648892059";
+var _namespace_ = "fullscreenmodal3342682765";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"fullscreenmodal1648892059__root","modalContent":"fullscreenmodal1648892059__modalContent"};
+export var classes = {"root":"fullscreenmodal3342682765__root","modalContent":"fullscreenmodal3342682765__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/hooks.ts

@@ -3,7 +3,7 @@ import { useRef, useMemo, useState, useEffect } from 'react';
 
 import type { BISettings, RichContent } from '@wix/ricos';
 import { ensureRicosContent, fromPlainText } from '@wix/ricos';
-import { useWixPatternsContainer } from '@wix/patterns';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 import { CMS_RICOS_APP_ID } from '../consts';
 

package/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "publishloader3024151817";
+var _namespace_ = "publishloader842481879";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"publishloader3024151817__root","publishLoader":"publishloader3024151817__publishLoader"};
+export var classes = {"root":"publishloader842481879__root","publishLoader":"publishloader842481879__publishLoader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "togglefullscreenbutton1765242596";
+var _namespace_ = "togglefullscreenbutton2465693475";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"togglefullscreenbutton1765242596__root"};
+export var classes = {"root":"togglefullscreenbutton2465693475__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenteditor146543049";
+var _namespace_ = "richcontenteditor1042024571";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontenteditor146543049__root","toolbarContainer":"richcontenteditor146543049__toolbarContainer","footerToolbarContainer":"richcontenteditor146543049__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor146543049__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor146543049__editor","modalEditor":"richcontenteditor146543049__modalEditor"};
+export var classes = {"root":"richcontenteditor1042024571__root","toolbarContainer":"richcontenteditor1042024571__toolbarContainer","footerToolbarContainer":"richcontenteditor1042024571__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1042024571__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1042024571__editor","modalEditor":"richcontenteditor1042024571__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"topToolbarHeight":"--richcontenteditor146543049-topToolbarHeight","bottomToolbarHeight":"--richcontenteditor146543049-bottomToolbarHeight"}; 
+export var vars = {"topToolbarHeight":"--richcontenteditor1042024571-topToolbarHeight","bottomToolbarHeight":"--richcontenteditor1042024571-bottomToolbarHeight"}; 
 
 
 

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenttoolbar3814375543";
+var _namespace_ = "richcontenttoolbar2846765880";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontenttoolbar3814375543__root","toolbar":"richcontenttoolbar3814375543__toolbar","toolbarButton":"richcontenttoolbar3814375543__toolbarButton"};
+export var classes = {"root":"richcontenttoolbar2846765880__root","toolbar":"richcontenttoolbar2846765880__toolbar","toolbarButton":"richcontenttoolbar2846765880__toolbarButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentviewer4134098454";
+var _namespace_ = "richcontentviewer916583475";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"richcontentviewer4134098454__root","viewer":"richcontentviewer4134098454__viewer","modalViewer":"richcontentviewer4134098454__modalViewer"};
+export var classes = {"root":"richcontentviewer916583475__root","viewer":"richcontentviewer916583475__viewer","modalViewer":"richcontentviewer916583475__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/services/rich-content-document-http-service.ts

@@ -1,4 +1,4 @@
-import type { WixPatternsContainer } from '@wix/patterns';
+import type { WixPatternsContainer } from '@wix/bex-core';
 import { ricosDocuments } from '@wix/rich-content';
 import type { RichContent } from '@wix/ricos';
 import { isRicosLikeObject } from '../../../../auto-field-types';

package/src/components/rich-content/rich-content-input/services/use-rich-content-document-service.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { useWixPatternsContainer } from '@wix/patterns';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 import { createRichContentDocumentHttpService } from './rich-content-document-http-service';
 import type { RichContentDocumentService } from './types';