@wix/patterns-fields 1.73.0 → 1.75.0

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_ = "formmediagalleryfield2943984590";
+var _namespace_ = "formmediagalleryfield2420637271";
 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":"formmediagalleryfield2943984590__root","container":"formmediagalleryfield2943984590__container","viewBox":"formmediagalleryfield2943984590__viewBox","addItemWrapper":"formmediagalleryfield2943984590__addItemWrapper","addItem":"formmediagalleryfield2943984590__addItem","overlay":"formmediagalleryfield2943984590__overlay","image":"formmediagalleryfield2943984590__image","previewImage":"formmediagalleryfield2943984590__previewImage","previewVideo":"formmediagalleryfield2943984590__previewVideo"};
+export var classes = {"root":"formmediagalleryfield2420637271__root","container":"formmediagalleryfield2420637271__container","viewBox":"formmediagalleryfield2420637271__viewBox","addItemWrapper":"formmediagalleryfield2420637271__addItemWrapper","addItem":"formmediagalleryfield2420637271__addItem","overlay":"formmediagalleryfield2420637271__overlay","image":"formmediagalleryfield2420637271__image","previewImage":"formmediagalleryfield2420637271__previewImage","previewVideo":"formmediagalleryfield2420637271__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/form-media-gallery.tsx

@@ -7,6 +7,7 @@ import { BaseInputProps } from '../../types/base-input';
 import type { WixCodeGalleryItem } from '../../auto-field-types';
 import { isEmpty } from '../../validations/array';
 import { FormMediaGalleryField } from './form-media-gallery-field';
+import { useFieldRef } from '../../hooks';
 
 export interface FormMediaGalleryProps
   extends BaseInputProps<WixCodeGalleryItem[]> {
@@ -31,6 +32,8 @@ const _FormMediaGallery = (props: FormMediaGalleryProps) => {
     },
   });
 
+  const setFieldRef = useFieldRef(controller.field.ref);
+
   return (
     <FormField
       label={field.displayName}
@@ -43,7 +46,7 @@ const _FormMediaGallery = (props: FormMediaGalleryProps) => {
         // Hand the add button to react-hook-form so
         // shouldFocusError scrolls to + focuses this field when it
         // blocks save.
-        inputRef={controller.field.ref}
+        inputRef={setFieldRef}
         data={controller.field.value}
         onChange={(value) => controller.field.onChange(value)}
         onClear={() => controller.field.onChange([])}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage1081502549";
+var _namespace_ = "mediaimage3743484186";
 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":"mediaimage1081502549__root"};
+export var classes = {"root":"mediaimage3743484186__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":"--mediaimage1081502549-from","to":"--mediaimage1081502549-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":"--mediaimage3743484186-from","to":"--mediaimage3743484186-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_ = "overlay1338093693";
+var _namespace_ = "overlay3849110904";
 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":"overlay1338093693__root","iconOverlay":"overlay1338093693__iconOverlay"};
+export var classes = {"root":"overlay3849110904__root","iconOverlay":"overlay3849110904__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader142891810";
+var _namespace_ = "medialoader1993987350";
 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":"medialoader142891810__root","loader":"medialoader142891810__loader"};
+export var classes = {"root":"medialoader1993987350__root","loader":"medialoader1993987350__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_ = "mediatag1597208276";
+var _namespace_ = "mediatag1475573568";
 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":"mediatag1597208276__root"};
+export var classes = {"root":"mediatag1475573568__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/cell-multi-document-edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultidocumentedit2776735104";
+var _namespace_ = "cellmultidocumentedit2282935291";
 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":"cellmultidocumentedit2776735104__root","chipTrigger":"cellmultidocumentedit2776735104__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit2282935291__root","chipTrigger":"cellmultidocumentedit2282935291__chipTrigger"};
 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_ = "formmultidocument857357206";
+var _namespace_ = "formmultidocument1787570023";
 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":"formmultidocument857357206__root","viewRoot":"formmultidocument857357206__viewRoot","singleViewWrapper":"formmultidocument857357206__singleViewWrapper","addDocumentButton":"formmultidocument857357206__addDocumentButton"};
+export var classes = {"root":"formmultidocument1787570023__root","viewRoot":"formmultidocument1787570023__viewRoot","singleViewWrapper":"formmultidocument1787570023__singleViewWrapper","addDocumentButton":"formmultidocument1787570023__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document.tsx

@@ -7,6 +7,7 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps } from '../../../types/base-input';
 import { isEmpty } from '../../../validations/array';
 import { FormMultiDocumentField } from './form-multi-document-field';
+import { useFieldRef } from '../../../hooks';
 
 export interface FormMultiDocumentProps extends BaseInputProps<string[]> {}
 
@@ -30,6 +31,8 @@ const _FormMultiDocument = (props: FormMultiDocumentProps) => {
     },
   });
 
+  const setFieldRef = useFieldRef(controller.field.ref);
+
   return (
     <FormField
       label={field.displayName}
@@ -42,7 +45,7 @@ const _FormMultiDocument = (props: FormMultiDocumentProps) => {
         // Hand the add button to react-hook-form so
         // shouldFocusError scrolls to + focuses this field when it
         // blocks save.
-        inputRef={controller.field.ref}
+        inputRef={setFieldRef}
         data={controller.field.value}
         onChange={(value) => controller.field.onChange(value)}
         dataHook={`multi-document-${field.id}`}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { NumberInput } from '@wix/design-system';
+import type { NumberInputProps } from '@wix/design-system';
+
+import type { ControlledInputProps } from '../../types/controlled-input';
+
+export interface FormNumberInputProps
+  extends ControlledInputProps<number | null> {
+  inputRef?: NumberInputProps['inputRef'];
+  onInvalid?(value: string): void;
+}
+
+export const FormNumberInput: React.FC<FormNumberInputProps> = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  invalid,
+  dataHook,
+  inputRef,
+  onInvalid,
+}) => (
+  <NumberInput
+    value={data ?? undefined}
+    onChange={(value) => onChange(value)}
+    onBlur={onBlur}
+    readOnly={readOnly}
+    autoFocus={autoFocus}
+    status={invalid ? 'error' : undefined}
+    inputRef={inputRef}
+    onInvalid={(value) => onInvalid?.(value)}
+    dataHook={dataHook}
+  />
+);
+
+FormNumberInput.displayName = 'FormNumberInput';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormField, NumberInput } from '@wix/design-system';
+import { FormField } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
@@ -7,6 +7,7 @@ import { useController } from '@wix/bex-core/form';
 import { BaseInputProps } from '../../types/base-input';
 import { isGreaterThan, isLessThan } from '../../validations/number';
 import { isEmpty } from '../../validations/value';
+import { FormNumberInput } from './form-number-input';
 
 export interface FormNumberProps extends BaseInputProps<number | null> {}
 
@@ -51,12 +52,13 @@ const _FormNumber = (props: FormNumberProps) => {
       statusMessage={controller.fieldState.error?.message}
       dataHook={dataHook}
     >
-      <NumberInput
-        value={controller.field.value ?? undefined}
-        onChange={(e) => controller.field.onChange(e)}
+      <FormNumberInput
+        data={controller.field.value ?? null}
+        onChange={controller.field.onChange}
         onBlur={controller.field.onBlur}
         inputRef={controller.field.ref}
         dataHook={`number-${field.id}`}
+        invalid={Boolean(controller.fieldState.error)}
       />
     </FormField>
   );

package/src/components/number-input/index.ts

@@ -1,2 +1,3 @@
 export * from './cell-number-input';
 export * from './form-number';
+export * from './form-number-input';

package/src/components/reference/cell-multi-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultireferenceinput2676689456";
+var _namespace_ = "cellmultireferenceinput4229781845";
 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":"cellmultireferenceinput2676689456__root"};
+export var classes = {"root":"cellmultireferenceinput4229781845__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/cell-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput1109486214";
+var _namespace_ = "cellreferenceinput2806108015";
 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":"cellreferenceinput1109486214__root","autocomplete":"cellreferenceinput1109486214__autocomplete"};
+export var classes = {"root":"cellreferenceinput2806108015__root","autocomplete":"cellreferenceinput2806108015__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "richcontentdefaultvalueinput4174470607";
+var _namespace_ = "richcontentdefaultvalueinput1301683321";
 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":"richcontentdefaultvalueinput4174470607__root","richContentEditorContainer":"richcontentdefaultvalueinput4174470607__richContentEditorContainer","editor":"richcontentdefaultvalueinput4174470607__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput1301683321__root","richContentEditorContainer":"richcontentdefaultvalueinput1301683321__richContentEditorContainer","editor":"richcontentdefaultvalueinput1301683321__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -4,21 +4,29 @@
 @import "../variables.css";
 @import "../rich-content-editor/rich-content-editor.st.css";
 
-@property st-global(--wds-color-blue-300);
-@property st-global(--wds-border-radius-300);
-@property st-global(--wds-color-blue-100);
+/* The border needs the same fallback chain WDS Input itself uses. A `var()`
+   with no fallback that resolves to nothing makes the whole declaration
+   invalid, and the editor renders with no border at all — which is what it did
+   outside the theme that defines the --wds-color-* palette. See CAIRO-4561. */
+@property st-global(--wds-input-border-color);
+@property st-global(--wds-input-border-color-focus);
 @property st-global(--wds-input-shadow-focus-standard);
+@property st-global(--wds-input-border-radius-default-medium);
+@property st-global(--wsr-color-B10);
+@property st-global(--wsr-color-B40);
+@property st-global(--wsr-color-F00);
+@property st-global(--wsr-border-radius-06);
 
 .root {
     outline: 0;
     box-sizing: border-box;
-    border: 1px solid var(--wds-color-blue-300);
-    border-radius: var(--wds-border-radius-300);
+    border: 1px solid var(--wds-input-border-color, var(--wsr-color-B40, #D6E6FE));
+    border-radius: var(--wds-input-border-radius-default-medium, var(--wsr-border-radius-06, 6px));
 }
 
 .root:focus-within {
-    border: 1px solid var(--wds-color-blue-100);
-    box-shadow: var(--wds-input-shadow-focus-standard);
+    border: 1px solid var(--wds-input-border-color-focus, var(--wsr-color-B10, #116DFF));
+    box-shadow: var(--wds-input-shadow-focus-standard, 0 0 0 3px var(--wsr-color-F00, #A6D0FF));
 }
 
 .root .editor {

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_ = "richcontentforminput1903671592";
+var _namespace_ = "richcontentforminput252005457";
 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":"richcontentforminput1903671592__root","editor":"richcontentforminput1903671592__editor"};
+export var classes = {"root":"richcontentforminput252005457__root","editor":"richcontentforminput252005457__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"topToolbarHeight":"--topToolbarHeight","bottomToolbarHeight":"--bottomToolbarHeight","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"}; 
+export var vars = {"topToolbarHeight":"--topToolbarHeight","bottomToolbarHeight":"--bottomToolbarHeight","wds-input-border-color":"--wds-input-border-color","wds-input-border-color-focus":"--wds-input-border-color-focus","wds-input-shadow-focus-standard":"--wds-input-shadow-focus-standard","wds-input-border-radius-default-medium":"--wds-input-border-radius-default-medium","wsr-color-B10":"--wsr-color-B10","wsr-color-B40":"--wsr-color-B40","wsr-color-F00":"--wsr-color-F00","wsr-border-radius-06":"--wsr-border-radius-06"}; 
 
 
 

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_ = "richcontentformreadonlyinput172558332";
+var _namespace_ = "richcontentformreadonlyinput1891295513";
 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":"richcontentformreadonlyinput172558332__root"};
+export var classes = {"root":"richcontentformreadonlyinput1891295513__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_ = "fullscreenmodal208254918";
+var _namespace_ = "fullscreenmodal3562829559";
 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":"fullscreenmodal208254918__root","modalContent":"fullscreenmodal208254918__modalContent"};
+export var classes = {"root":"fullscreenmodal3562829559__root","modalContent":"fullscreenmodal3562829559__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "publishloader1461570400";
+var _namespace_ = "publishloader2046471268";
 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":"publishloader1461570400__root","publishLoader":"publishloader1461570400__publishLoader"};
+export var classes = {"root":"publishloader2046471268__root","publishLoader":"publishloader2046471268__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_ = "togglefullscreenbutton2385173147";
+var _namespace_ = "togglefullscreenbutton3926881265";
 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":"togglefullscreenbutton2385173147__root"};
+export var classes = {"root":"togglefullscreenbutton3926881265__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_ = "richcontenteditor3535846372";
+var _namespace_ = "richcontenteditor2590819754";
 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":"richcontenteditor3535846372__root","toolbarContainer":"richcontenteditor3535846372__toolbarContainer","footerToolbarContainer":"richcontenteditor3535846372__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3535846372__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3535846372__editor","modalEditor":"richcontenteditor3535846372__modalEditor"};
+export var classes = {"root":"richcontenteditor2590819754__root","toolbarContainer":"richcontenteditor2590819754__toolbarContainer","footerToolbarContainer":"richcontenteditor2590819754__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2590819754__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2590819754__editor","modalEditor":"richcontenteditor2590819754__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "richcontenttoolbar2126134109";
+var _namespace_ = "richcontenttoolbar53582336";
 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":"richcontenttoolbar2126134109__root","toolbar":"richcontenttoolbar2126134109__toolbar","toolbarButton":"richcontenttoolbar2126134109__toolbarButton","separator":"richcontenttoolbar2126134109__separator"};
+export var classes = {"root":"richcontenttoolbar53582336__root","toolbar":"richcontenttoolbar53582336__toolbar","toolbarButton":"richcontenttoolbar53582336__toolbarButton","separator":"richcontenttoolbar53582336__separator"};
 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_ = "richcontentviewer3587365751";
+var _namespace_ = "richcontentviewer1550030462";
 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":"richcontentviewer3587365751__root","viewer":"richcontentviewer3587365751__viewer","modalViewer":"richcontentviewer3587365751__modalViewer"};
+export var classes = {"root":"richcontentviewer1550030462__root","viewer":"richcontentviewer1550030462__viewer","modalViewer":"richcontentviewer1550030462__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richeditor3576807230";
+var _namespace_ = "richeditor1718041748";
 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":"richeditor3576807230__root","editor":"richeditor3576807230__editor","header-one":"richeditor3576807230__header-one","header-two":"richeditor3576807230__header-two","header-three":"richeditor3576807230__header-three","header-four":"richeditor3576807230__header-four","header-five":"richeditor3576807230__header-five","header-six":"richeditor3576807230__header-six","paragraph-one":"richeditor3576807230__paragraph-one","unstyled":"richeditor3576807230__unstyled","paragraph-three":"richeditor3576807230__paragraph-three","align-left":"richeditor3576807230__align-left","align-right":"richeditor3576807230__align-right","align-center":"richeditor3576807230__align-center","align-justify":"richeditor3576807230__align-justify","withMargin":"richeditor3576807230__withMargin","dir-rtl":"richeditor3576807230__dir-rtl"};
+export var classes = {"root":"richeditor1718041748__root","editor":"richeditor1718041748__editor","header-one":"richeditor1718041748__header-one","header-two":"richeditor1718041748__header-two","header-three":"richeditor1718041748__header-three","header-four":"richeditor1718041748__header-four","header-five":"richeditor1718041748__header-five","header-six":"richeditor1718041748__header-six","paragraph-one":"richeditor1718041748__paragraph-one","unstyled":"richeditor1718041748__unstyled","paragraph-three":"richeditor1718041748__paragraph-three","align-left":"richeditor1718041748__align-left","align-right":"richeditor1718041748__align-right","align-center":"richeditor1718041748__align-center","align-justify":"richeditor1718041748__align-justify","withMargin":"richeditor1718041748__withMargin","dir-rtl":"richeditor1718041748__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css

@@ -1,12 +1,25 @@
-@property st-global(--wds-color-blue-100);
-@property st-global(--wds-color-blue-300);
-@property st-global(--wds-color-red-100);
-@property st-global(--wds-color-red-300);
-@property st-global(--wds-color-yellow-100);
-@property st-global(--wds-color-yellow-300);
-@property st-global(--wds-color-black-700);
+/* Every border declaration below needs the same fallback chain WDS Input
+   itself uses. A `var()` with no fallback that resolves to nothing makes the
+   whole declaration invalid, and the element renders with no border at all —
+   which is what these editors did outside the theme that defines the
+   --wds-color-* palette. See CAIRO-4561. */
+@property st-global(--wds-input-border-color);
+@property st-global(--wds-input-border-color-focus);
 @property st-global(--wds-input-shadow-focus-standard);
-@property st-global(--wds-border-radius-300);
+@property st-global(--wds-input-shadow-focus-destructive);
+@property st-global(--wds-input-shadow-focus-warning);
+@property st-global(--wds-input-border-radius-default-medium);
+@property st-global(--wds-color-border-destructive-secondary-active);
+@property st-global(--wds-color-border-warning-secondary-active);
+@property st-global(--wsr-color-B10);
+@property st-global(--wsr-color-B40);
+@property st-global(--wsr-color-R10);
+@property st-global(--wsr-color-R40);
+@property st-global(--wsr-color-Y10);
+@property st-global(--wsr-color-Y40);
+@property st-global(--wsr-color-F00);
+@property st-global(--wsr-border-radius-06);
+@property st-global(--wds-color-black-700);
 
 /* Cannot import Editor from rich-editor.st.css - causes Stylable build error
 :import {
@@ -24,37 +37,37 @@
     box-sizing: border-box;
     outline: 0;
     overflow: hidden;
-    border-radius: var(--wds-border-radius-300);
+    border-radius: var(--wds-input-border-radius-default-medium, var(--wsr-border-radius-06, 6px));
 }
 
 .root:border(none) {
     border: none;
 }
 .root:border(standard) {
-    border: 1px solid var(--wds-color-blue-300);
+    border: 1px solid var(--wds-input-border-color, var(--wsr-color-B40, #D6E6FE));
 }
 .root:border(standard):focus,
 .root:border(standard):focus-within {
-    border: 1px solid var(--wds-color-blue-100);
-    box-shadow: var(--wds-input-shadow-focus-standard);
+    border: 1px solid var(--wds-input-border-color-focus, var(--wsr-color-B10, #116DFF));
+    box-shadow: var(--wds-input-shadow-focus-standard, 0 0 0 3px var(--wsr-color-F00, #A6D0FF));
 }
 
 .root:border(standard):status(error) {
-    border: 1px solid var(--wds-color-red-100);
+    border: 1px solid var(--wds-color-border-destructive-secondary-active, var(--wsr-color-R10, #E62214));
 }
 .root:border(standard):status(error):focus,
 .root:border(standard):status(error):focus-within {
-    border: 1px solid var(--wds-color-red-100);
-    box-shadow: 0 0 0 3px var(--wds-color-red-300);
+    border: 1px solid var(--wds-color-border-destructive-secondary-active, var(--wsr-color-R10, #E62214));
+    box-shadow: var(--wds-input-shadow-focus-destructive, 0 0 0 3px var(--wsr-color-R40, #FBD0CD));
 }
 
 .root:border(standard):status(warning) {
-    border: 1px solid var(--wds-color-yellow-100);
+    border: 1px solid var(--wds-color-border-warning-secondary-active, var(--wsr-color-Y10, #FFB700));
 }
 .root:border(standard):status(warning):focus,
 .root:border(standard):status(warning):focus-within {
-    border: 1px solid var(--wds-color-yellow-100);
-    box-shadow: 0 0 0 3px var(--wds-color-yellow-300);
+    border: 1px solid var(--wds-color-border-warning-secondary-active, var(--wsr-color-Y10, #FFB700));
+    box-shadow: var(--wds-input-shadow-focus-warning, 0 0 0 3px var(--wsr-color-Y40, #FFE2A5));
 }
 
 .nativeInput {
@@ -78,7 +91,7 @@
     overflow: hidden;
     box-sizing: border-box;
     flex-direction: row;
-    border-radius: var(--wds-border-radius-300);
+    border-radius: var(--wds-input-border-radius-default-medium, var(--wsr-border-radius-06, 6px));
 }
 .editor:isFullScreen {
     max-width: 782px;