@wix/patterns-fields 1.25.0 → 1.27.0

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_ = "formmultidocument2769476883";
+var _namespace_ = "formmultidocument2678194366";
 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":"formmultidocument2769476883__root","viewRoot":"formmultidocument2769476883__viewRoot","singleViewWrapper":"formmultidocument2769476883__singleViewWrapper","addDocumentButton":"formmultidocument2769476883__addDocumentButton"};
+export var classes = {"root":"formmultidocument2678194366__root","viewRoot":"formmultidocument2678194366__viewRoot","singleViewWrapper":"formmultidocument2678194366__singleViewWrapper","addDocumentButton":"formmultidocument2678194366__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -0,0 +1,10 @@
+.root {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.autocomplete {
+  width: 100%;
+}

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

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "cellreferenceinput2294275859";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style: import("@stylable/runtime").STFunction = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"cellreferenceinput2294275859__root","autocomplete":"cellreferenceinput2294275859__autocomplete"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/reference/cell-reference-input.tsx

@@ -0,0 +1,165 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { AutoComplete, Input, listItemSelectBuilder } from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+import { ReferenceAvatar } from './reference-avatar';
+import { st, classes } from './cell-reference-input.st.css.js';
+
+export interface CellReferenceItem {
+  id: string;
+  name: string;
+  image?: string;
+}
+
+export interface CellReferenceInputHandle {
+  focus: () => void;
+  hideOptions: () => void;
+}
+
+export interface CellReferenceInputProps {
+  /** Raw reference items — options are built internally with listItemSelectBuilder. */
+  items: CellReferenceItem[];
+  /** Text shown inside the input field (search query or selected item title). */
+  value: string;
+  /** When a reference is selected and there is no search query, show its avatar inside the input. */
+  selectedItem?: CellReferenceItem;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onSelect: (item: CellReferenceItem) => void;
+  onBlur?: () => void;
+  onClear: () => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+  clearButton?: boolean;
+  infiniteScroll?: boolean;
+  hasMore?: boolean;
+  loadMore?: () => void;
+  fixedFooter?: React.ReactNode;
+  /** Open dropdown immediately on mount (type-to-edit / Enter triggers). */
+  autoOpen?: boolean;
+  inputRef?: React.MutableRefObject<{ focus: () => void } | null | undefined>;
+}
+
+const ROW_HEIGHT = 30;
+const MAX_NUM_ROWS = 7;
+
+export const CellReferenceInput = React.forwardRef<
+  CellReferenceInputHandle,
+  CellReferenceInputProps
+>(
+  (
+    {
+      items,
+      value,
+      selectedItem,
+      onChange,
+      onBlur,
+      onSelect,
+      onClear,
+      onKeyDown,
+      clearButton,
+      infiniteScroll,
+      hasMore,
+      loadMore,
+      fixedFooter,
+      autoOpen,
+      inputRef,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslations();
+
+    const options = useMemo(
+      () =>
+        items.map((item) =>
+          listItemSelectBuilder({
+            id: item.id,
+            title: item.name || t('patterns-fields.reference.untitled'),
+            size: 'small',
+            selected: item.id === selectedItem?.id,
+            prefix: <ReferenceAvatar name={item.name} image={item.image} />,
+          }),
+        ),
+      [items, selectedItem?.id, t],
+    );
+    const acRef = useRef<React.ComponentRef<typeof AutoComplete>>(null);
+
+    React.useImperativeHandle(ref, () => ({
+      focus: () => acRef.current?.focus?.(),
+      hideOptions: () => acRef.current?.hideOptions?.(),
+    }));
+
+    useEffect(() => {
+      if (autoOpen) {
+        acRef.current?.focus?.();
+        requestAnimationFrame(() => acRef.current?.showOptions?.());
+      }
+      // Intentionally run only on mount
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const prefix =
+      selectedItem && !value ? (
+        <Input.Affix data-hook="reference-input-avatar-prefix">
+          <ReferenceAvatar
+            name={selectedItem.name}
+            image={selectedItem.image}
+          />
+        </Input.Affix>
+      ) : undefined;
+
+    return (
+      // Prevent EditableCell's row click/dblclick handlers from firing when
+      // the user interacts with the input or dropdown.
+      <div
+        className={st(classes.root)}
+        onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <AutoComplete
+          ref={acRef}
+          className={st(classes.autocomplete)}
+          size="small"
+          border="none"
+          options={options}
+          value={value}
+          prefix={prefix}
+          onChange={onChange}
+          onBlur={onBlur}
+          onSelect={(wdsOption: { id: string | number }) => {
+            const item = items.find((i) => i.id === String(wdsOption.id));
+            if (item) {
+              onSelect(item);
+            }
+          }}
+          onClear={onClear}
+          onKeyDown={onKeyDown}
+          clearButton={clearButton}
+          infiniteScroll={infiniteScroll}
+          hasMore={hasMore}
+          loadMore={loadMore}
+          fixedFooter={
+            fixedFooter ? (
+              // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+              <div onMouseDown={(e) => e.preventDefault()}>{fixedFooter}</div>
+            ) : undefined
+          }
+          placeholder={t('auto-patterns.fields.select_placeholder')}
+          showOptionsIfEmptyInput
+          autoSelect={false}
+          maxHeightPixels={ROW_HEIGHT * MAX_NUM_ROWS}
+          popoverProps={{
+            appendTo: 'window',
+            flip: true,
+            fixed: false,
+            placement: 'bottom-start',
+          }}
+          inputRef={(el: HTMLInputElement) => {
+            if (inputRef) {
+              inputRef.current = el;
+            }
+          }}
+        />
+      </div>
+    );
+  },
+);
+
+CellReferenceInput.displayName = 'CellReferenceInput';

package/src/components/reference/cell-reference-view.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box, Text } from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+import { ReferenceAvatar } from './reference-avatar';
+
+export interface CellReferenceViewProps {
+  name: string;
+  imageUrl?: string;
+  dataHook?: string;
+}
+
+export const CellReferenceView: React.FC<CellReferenceViewProps> = ({
+  name,
+  imageUrl,
+  dataHook,
+}) => {
+  const { t } = useTranslations();
+  const displayName = name || t('patterns-fields.reference.untitled');
+
+  return (
+    <Box
+      dataHook={dataHook}
+      direction="horizontal"
+      verticalAlign="middle"
+      gap="SP1"
+      minWidth={0}
+      padding="9px 12px"
+      height="100%"
+      style={{ boxSizing: 'border-box' }}
+    >
+      <ReferenceAvatar name={displayName} image={imageUrl} />
+      <Text size="small" ellipsis>
+        {displayName}
+      </Text>
+    </Box>
+  );
+};
+
+CellReferenceView.displayName = 'CellReferenceView';

package/src/components/reference/index.ts

@@ -0,0 +1,3 @@
+export * from './reference-avatar';
+export * from './cell-reference-view';
+export * from './cell-reference-input';

package/src/components/reference/reference-avatar.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Avatar } from '@wix/design-system';
+import { mediaURItoImageURL, ThumbnailSize } from '../../auto-field-types';
+
+export interface ReferenceAvatarProps {
+  image?: string;
+  name: string;
+  size?: 'size18' | 'size24' | 'size30' | 'size36' | 'size48';
+}
+
+const resolveSrc = (image?: string) => {
+  if (!image) return undefined;
+  return image.startsWith('wix:image://')
+    ? mediaURItoImageURL(image, ThumbnailSize.S)
+    : image;
+};
+
+export const ReferenceAvatar: React.FC<ReferenceAvatarProps> = ({
+  image,
+  name,
+  size = 'size24',
+}) => {
+  const src = resolveSrc(image);
+  return (
+    <Avatar
+      shape="square"
+      size={size}
+      name={name}
+      imgProps={
+        src ? { src, alt: name, style: { objectFit: 'cover' } } : undefined
+      }
+    />
+  );
+};

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_ = "richcontentdefaultvalueinput797127251";
+var _namespace_ = "richcontentdefaultvalueinput4057225375";
 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":"richcontentdefaultvalueinput797127251__root","richContentEditorContainer":"richcontentdefaultvalueinput797127251__richContentEditorContainer","editor":"richcontentdefaultvalueinput797127251__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput4057225375__root","richContentEditorContainer":"richcontentdefaultvalueinput4057225375__richContentEditorContainer","editor":"richcontentdefaultvalueinput4057225375__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput797127251-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput797127251-bottomToolbarHeight"}; 
+export var vars = {"topToolbarHeight":"--richcontentdefaultvalueinput4057225375-topToolbarHeight","bottomToolbarHeight":"--richcontentdefaultvalueinput4057225375-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_ = "richcontentforminput324134696";
+var _namespace_ = "richcontentforminput958444259";
 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":"richcontentforminput324134696__root","editor":"richcontentforminput324134696__editor"};
+export var classes = {"root":"richcontentforminput958444259__root","editor":"richcontentforminput958444259__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":"--richcontentforminput324134696-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput324134696-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":"--richcontentforminput958444259-topToolbarHeight","bottomToolbarHeight":"--richcontentforminput958444259-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_ = "richcontentformreadonlyinput1991503588";
+var _namespace_ = "richcontentformreadonlyinput586563627";
 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":"richcontentformreadonlyinput1991503588__root"};
+export var classes = {"root":"richcontentformreadonlyinput586563627__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_ = "fullscreenmodal2675356350";
+var _namespace_ = "fullscreenmodal1324383264";
 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":"fullscreenmodal2675356350__root","modalContent":"fullscreenmodal2675356350__modalContent"};
+export var classes = {"root":"fullscreenmodal1324383264__root","modalContent":"fullscreenmodal1324383264__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_ = "publishloader3220277891";
+var _namespace_ = "publishloader552045721";
 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":"publishloader3220277891__root","publishLoader":"publishloader3220277891__publishLoader"};
+export var classes = {"root":"publishloader552045721__root","publishLoader":"publishloader552045721__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_ = "togglefullscreenbutton2134792459";
+var _namespace_ = "togglefullscreenbutton14323248";
 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":"togglefullscreenbutton2134792459__root"};
+export var classes = {"root":"togglefullscreenbutton14323248__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_ = "richcontenteditor3098648123";
+var _namespace_ = "richcontenteditor1507655898";
 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":"richcontenteditor3098648123__root","toolbarContainer":"richcontenteditor3098648123__toolbarContainer","footerToolbarContainer":"richcontenteditor3098648123__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3098648123__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3098648123__editor","modalEditor":"richcontenteditor3098648123__modalEditor"};
+export var classes = {"root":"richcontenteditor1507655898__root","toolbarContainer":"richcontenteditor1507655898__toolbarContainer","footerToolbarContainer":"richcontenteditor1507655898__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1507655898__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1507655898__editor","modalEditor":"richcontenteditor1507655898__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-font-family-default":"--richcontenteditor3098648123-wds-font-family-default"}; 
+export var vars = {"wds-font-family-default":"--richcontenteditor1507655898-wds-font-family-default"}; 
 
 
 

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_ = "richcontenttoolbar790826118";
+var _namespace_ = "richcontenttoolbar1851709565";
 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":"richcontenttoolbar790826118__root","toolbar":"richcontenttoolbar790826118__toolbar","toolbarButton":"richcontenttoolbar790826118__toolbarButton"};
+export var classes = {"root":"richcontenttoolbar1851709565__root","toolbar":"richcontenttoolbar1851709565__toolbar","toolbarButton":"richcontenttoolbar1851709565__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_ = "richcontentviewer4176318547";
+var _namespace_ = "richcontentviewer630951315";
 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":"richcontentviewer4176318547__root","viewer":"richcontentviewer4176318547__viewer","modalViewer":"richcontentviewer4176318547__modalViewer"};
+export var classes = {"root":"richcontentviewer630951315__root","viewer":"richcontentviewer630951315__viewer","modalViewer":"richcontentviewer630951315__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_ = "richeditor2625930401";
+var _namespace_ = "richeditor2465378792";
 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":"richeditor2625930401__root","editor":"richeditor2625930401__editor","header-one":"richeditor2625930401__header-one","header-two":"richeditor2625930401__header-two","header-three":"richeditor2625930401__header-three","header-four":"richeditor2625930401__header-four","header-five":"richeditor2625930401__header-five","header-six":"richeditor2625930401__header-six","paragraph-one":"richeditor2625930401__paragraph-one","unstyled":"richeditor2625930401__unstyled","paragraph-three":"richeditor2625930401__paragraph-three","align-left":"richeditor2625930401__align-left","align-right":"richeditor2625930401__align-right","align-center":"richeditor2625930401__align-center","align-justify":"richeditor2625930401__align-justify","withMargin":"richeditor2625930401__withMargin","dir-rtl":"richeditor2625930401__dir-rtl"};
+export var classes = {"root":"richeditor2465378792__root","editor":"richeditor2465378792__editor","header-one":"richeditor2465378792__header-one","header-two":"richeditor2465378792__header-two","header-three":"richeditor2465378792__header-three","header-four":"richeditor2465378792__header-four","header-five":"richeditor2465378792__header-five","header-six":"richeditor2465378792__header-six","paragraph-one":"richeditor2465378792__paragraph-one","unstyled":"richeditor2465378792__unstyled","paragraph-three":"richeditor2465378792__paragraph-three","align-left":"richeditor2465378792__align-left","align-right":"richeditor2465378792__align-right","align-center":"richeditor2465378792__align-center","align-justify":"richeditor2465378792__align-justify","withMargin":"richeditor2465378792__withMargin","dir-rtl":"richeditor2465378792__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {"fontFamilyDefault":"var(--wds-font-family-default, var(--wsr-font-family, Madefor))","h1FontSize":"var(--rt-h1-fontSize, 72px)","h1FontStyle":"var(--rt-h1-fontStyle, normal)","h1FontWeight":"var(--rt-h1-fontWeight, var(--wds-font-weight-bold, 700))","h1FontFamily":"var(--rt-h1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h1LineHeight":"var(--rt-h1-lineHeight, 1.33)","h1Font":"var(--rt-h1-fontStyle, normal) var(--rt-h1-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h1-fontSize, 72px)/var(--rt-h1-lineHeight, 1.33) var(--rt-h1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h2FontSize":"var(--rt-h2-fontSize, 42px)","h2FontStyle":"var(--rt-h2-fontStyle, normal)","h2FontWeight":"var(--rt-h2-fontWeight, var(--wds-font-weight-bold, 700))","h2FontFamily":"var(--rt-h2-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h2LineHeight":"var(--rt-h2-lineHeight, 1.2)","h2Font":"var(--rt-h2-fontStyle, normal) var(--rt-h2-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h2-fontSize, 42px)/var(--rt-h2-lineHeight, 1.2) var(--rt-h2-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h3FontSize":"var(--rt-h3-fontSize, 38px)","h3FontStyle":"var(--rt-h3-fontStyle, normal)","h3FontWeight":"var(--rt-h3-fontWeight, var(--wds-font-weight-medium, 500))","h3FontFamily":"var(--rt-h3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h3LineHeight":"var(--rt-h3-lineHeight, 1.2)","h3Font":"var(--rt-h3-fontStyle, normal) var(--rt-h3-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-h3-fontSize, 38px)/var(--rt-h3-lineHeight, 1.2) var(--rt-h3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h4FontSize":"var(--rt-h4-fontSize, 34px)","h4FontStyle":"var(--rt-h4-fontStyle, normal)","h4FontWeight":"var(--rt-h4-fontWeight, var(--wds-font-weight-bold, 700))","h4FontFamily":"var(--rt-h4-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h4LineHeight":"var(--rt-h4-lineHeight, 1.2)","h4Font":"var(--rt-h4-fontStyle, normal) var(--rt-h4-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h4-fontSize, 34px)/var(--rt-h4-lineHeight, 1.2) var(--rt-h4-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h5FontSize":"var(--rt-h5-fontSize, 28px)","h5FontStyle":"var(--rt-h5-fontStyle, normal)","h5FontWeight":"var(--rt-h5-fontWeight, var(--wds-font-weight-bold, 700))","h5FontFamily":"var(--rt-h5-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h5LineHeight":"var(--rt-h5-lineHeight, 1.2)","h5Font":"var(--rt-h5-fontStyle, normal) var(--rt-h5-fontWeight, var(--wds-font-weight-bold, 700)) var(--rt-h5-fontSize, 28px)/var(--rt-h5-lineHeight, 1.2) var(--rt-h5-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h6FontSize":"var(--rt-h6-fontSize, 22px)","h6FontStyle":"var(--rt-h6-fontStyle, normal)","h6FontWeight":"var(--rt-h6-fontWeight, var(--wds-font-weight-medium, 500))","h6FontFamily":"var(--rt-h6-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","h6LineHeight":"var(--rt-h6-lineHeight, 1.2)","h6Font":"var(--rt-h6-fontStyle, normal) var(--rt-h6-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-h6-fontSize, 22px)/var(--rt-h6-lineHeight, 1.2) var(--rt-h6-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p1FontSize":"var(--rt-p1-fontSize, 18px)","p1FontStyle":"var(--rt-p1-fontStyle, normal)","p1FontWeight":"var(--rt-p1-fontWeight, var(--wds-font-weight-medium, 500))","p1FontFamily":"var(--rt-p1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p1LineHeight":"var(--rt-p1-lineHeight, 24px)","p1Font":"var(--rt-p1-fontStyle, normal) var(--rt-p1-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-p1-fontSize, 18px)/var(--rt-p1-lineHeight, 24px) var(--rt-p1-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","unstyledFontSize":"var(--rt-unstyled-fontSize, 16px)","unstyledFontStyle":"var(--rt-unstyled-fontStyle, normal)","unstyledFontWeight":"var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium, 500))","unstyledFontFamily":"var(--rt-unstyled-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","unstyledLineHeight":"var(--rt-unstyled-lineHeight, 24px)","unstyledFont":"var(--rt-unstyled-fontStyle, normal) var(--rt-unstyled-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-unstyled-fontSize, 16px)/var(--rt-unstyled-lineHeight, 24px) var(--rt-unstyled-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p3FontSize":"var(--rt-p3-fontSize, 14px)","p3FontStyle":"var(--rt-p3-fontStyle, normal)","p3FontWeight":"var(--rt-p3-fontWeight, var(--wds-font-weight-medium, 500))","p3FontFamily":"var(--rt-p3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))","p3LineHeight":"var(--rt-p3-lineHeight, 18px)","p3Font":"var(--rt-p3-fontStyle, normal) var(--rt-p3-fontWeight, var(--wds-font-weight-medium, 500)) var(--rt-p3-fontSize, 14px)/var(--rt-p3-lineHeight, 18px) var(--rt-p3-fontFamily, var(--wds-font-family-default, var(--wsr-font-family, Madefor)))"}; 
-export var vars = {"wds-color-black-100":"--wds-color-black-100","wds-color-black-700":"--wds-color-black-700","wds-font-family-default":"--wds-font-family-default","wsr-font-family":"--wsr-font-family","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300","rt-h1-fontSize":"--rt-h1-fontSize","rt-h1-fontStyle":"--rt-h1-fontStyle","rt-h1-fontWeight":"--rt-h1-fontWeight","rt-h1-fontFamily":"--rt-h1-fontFamily","rt-h1-lineHeight":"--rt-h1-lineHeight","rt-h2-fontSize":"--rt-h2-fontSize","rt-h2-fontStyle":"--rt-h2-fontStyle","rt-h2-fontWeight":"--rt-h2-fontWeight","rt-h2-fontFamily":"--rt-h2-fontFamily","rt-h2-lineHeight":"--rt-h2-lineHeight","rt-h3-fontSize":"--rt-h3-fontSize","rt-h3-fontStyle":"--rt-h3-fontStyle","rt-h3-fontWeight":"--rt-h3-fontWeight","rt-h3-fontFamily":"--rt-h3-fontFamily","rt-h3-lineHeight":"--rt-h3-lineHeight","rt-h4-fontSize":"--rt-h4-fontSize","rt-h4-fontStyle":"--rt-h4-fontStyle","rt-h4-fontWeight":"--rt-h4-fontWeight","rt-h4-fontFamily":"--rt-h4-fontFamily","rt-h4-lineHeight":"--rt-h4-lineHeight","rt-h5-fontSize":"--rt-h5-fontSize","rt-h5-fontStyle":"--rt-h5-fontStyle","rt-h5-fontWeight":"--rt-h5-fontWeight","rt-h5-fontFamily":"--rt-h5-fontFamily","rt-h5-lineHeight":"--rt-h5-lineHeight","rt-h6-fontSize":"--rt-h6-fontSize","rt-h6-fontStyle":"--rt-h6-fontStyle","rt-h6-fontWeight":"--rt-h6-fontWeight","rt-h6-fontFamily":"--rt-h6-fontFamily","rt-h6-lineHeight":"--rt-h6-lineHeight","rt-p1-fontSize":"--rt-p1-fontSize","rt-p1-fontStyle":"--rt-p1-fontStyle","rt-p1-fontWeight":"--rt-p1-fontWeight","rt-p1-fontFamily":"--rt-p1-fontFamily","rt-p1-lineHeight":"--rt-p1-lineHeight","rt-unstyled-fontSize":"--rt-unstyled-fontSize","rt-unstyled-fontStyle":"--rt-unstyled-fontStyle","rt-unstyled-fontWeight":"--rt-unstyled-fontWeight","rt-unstyled-fontFamily":"--rt-unstyled-fontFamily","rt-unstyled-lineHeight":"--rt-unstyled-lineHeight","rt-p3-fontSize":"--rt-p3-fontSize","rt-p3-fontStyle":"--rt-p3-fontStyle","rt-p3-fontWeight":"--rt-p3-fontWeight","rt-p3-fontFamily":"--rt-p3-fontFamily","rt-p3-lineHeight":"--rt-p3-lineHeight","wsr-color-D10":"--richeditor2625930401-wsr-color-D10","wsr-color-D70":"--richeditor2625930401-wsr-color-D70"}; 
+export var vars = {"wds-color-black-100":"--wds-color-black-100","wds-color-black-700":"--wds-color-black-700","wds-font-family-default":"--wds-font-family-default","wsr-font-family":"--wsr-font-family","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300","rt-h1-fontSize":"--rt-h1-fontSize","rt-h1-fontStyle":"--rt-h1-fontStyle","rt-h1-fontWeight":"--rt-h1-fontWeight","rt-h1-fontFamily":"--rt-h1-fontFamily","rt-h1-lineHeight":"--rt-h1-lineHeight","rt-h2-fontSize":"--rt-h2-fontSize","rt-h2-fontStyle":"--rt-h2-fontStyle","rt-h2-fontWeight":"--rt-h2-fontWeight","rt-h2-fontFamily":"--rt-h2-fontFamily","rt-h2-lineHeight":"--rt-h2-lineHeight","rt-h3-fontSize":"--rt-h3-fontSize","rt-h3-fontStyle":"--rt-h3-fontStyle","rt-h3-fontWeight":"--rt-h3-fontWeight","rt-h3-fontFamily":"--rt-h3-fontFamily","rt-h3-lineHeight":"--rt-h3-lineHeight","rt-h4-fontSize":"--rt-h4-fontSize","rt-h4-fontStyle":"--rt-h4-fontStyle","rt-h4-fontWeight":"--rt-h4-fontWeight","rt-h4-fontFamily":"--rt-h4-fontFamily","rt-h4-lineHeight":"--rt-h4-lineHeight","rt-h5-fontSize":"--rt-h5-fontSize","rt-h5-fontStyle":"--rt-h5-fontStyle","rt-h5-fontWeight":"--rt-h5-fontWeight","rt-h5-fontFamily":"--rt-h5-fontFamily","rt-h5-lineHeight":"--rt-h5-lineHeight","rt-h6-fontSize":"--rt-h6-fontSize","rt-h6-fontStyle":"--rt-h6-fontStyle","rt-h6-fontWeight":"--rt-h6-fontWeight","rt-h6-fontFamily":"--rt-h6-fontFamily","rt-h6-lineHeight":"--rt-h6-lineHeight","rt-p1-fontSize":"--rt-p1-fontSize","rt-p1-fontStyle":"--rt-p1-fontStyle","rt-p1-fontWeight":"--rt-p1-fontWeight","rt-p1-fontFamily":"--rt-p1-fontFamily","rt-p1-lineHeight":"--rt-p1-lineHeight","rt-unstyled-fontSize":"--rt-unstyled-fontSize","rt-unstyled-fontStyle":"--rt-unstyled-fontStyle","rt-unstyled-fontWeight":"--rt-unstyled-fontWeight","rt-unstyled-fontFamily":"--rt-unstyled-fontFamily","rt-unstyled-lineHeight":"--rt-unstyled-lineHeight","rt-p3-fontSize":"--rt-p3-fontSize","rt-p3-fontStyle":"--rt-p3-fontStyle","rt-p3-fontWeight":"--rt-p3-fontWeight","rt-p3-fontFamily":"--rt-p3-fontFamily","rt-p3-lineHeight":"--rt-p3-lineHeight","wsr-color-D10":"--richeditor2465378792-wsr-color-D10","wsr-color-D70":"--richeditor2465378792-wsr-color-D70"}; 
 
 
 

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richtexteditor2381714884";
+var _namespace_ = "richtexteditor468581331";
 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":"richtexteditor2381714884__root","nativeInput":"richtexteditor2381714884__nativeInput","editor":"richtexteditor2381714884__editor"};
+export var classes = {"root":"richtexteditor468581331__root","nativeInput":"richtexteditor468581331__nativeInput","editor":"richtexteditor468581331__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "toolbar1544401424";
+var _namespace_ = "toolbar3015150169";
 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":"toolbar1544401424__root","item":"toolbar1544401424__item","separator":"toolbar1544401424__separator","clearFormatting":"toolbar1544401424__clearFormatting","fullScreen":"toolbar1544401424__fullScreen","dropdownItemContent":"toolbar1544401424__dropdownItemContent","dropdownItemTitle":"toolbar1544401424__dropdownItemTitle","dropdownItemSubtitle":"toolbar1544401424__dropdownItemSubtitle","dropdownHeaderOne":"toolbar1544401424__dropdownHeaderOne","dropdownHeaderTwo":"toolbar1544401424__dropdownHeaderTwo","dropdownHeaderThree":"toolbar1544401424__dropdownHeaderThree","dropdownHeaderFour":"toolbar1544401424__dropdownHeaderFour","dropdownHeaderFive":"toolbar1544401424__dropdownHeaderFive","dropdownHeaderSix":"toolbar1544401424__dropdownHeaderSix","dropdownParagraphOne":"toolbar1544401424__dropdownParagraphOne","dropdownNormalText":"toolbar1544401424__dropdownNormalText","dropdownParagraphThree":"toolbar1544401424__dropdownParagraphThree"};
+export var classes = {"root":"toolbar3015150169__root","item":"toolbar3015150169__item","separator":"toolbar3015150169__separator","clearFormatting":"toolbar3015150169__clearFormatting","fullScreen":"toolbar3015150169__fullScreen","dropdownItemContent":"toolbar3015150169__dropdownItemContent","dropdownItemTitle":"toolbar3015150169__dropdownItemTitle","dropdownItemSubtitle":"toolbar3015150169__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3015150169__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3015150169__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3015150169__dropdownHeaderThree","dropdownHeaderFour":"toolbar3015150169__dropdownHeaderFour","dropdownHeaderFive":"toolbar3015150169__dropdownHeaderFive","dropdownHeaderSix":"toolbar3015150169__dropdownHeaderSix","dropdownParagraphOne":"toolbar3015150169__dropdownParagraphOne","dropdownNormalText":"toolbar3015150169__dropdownNormalText","dropdownParagraphThree":"toolbar3015150169__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-blue-400":"--wds-color-blue-400","wds-color-black-400":"--wds-color-black-400","wds-color-white":"--wds-color-white","wds-font-family-default":"--wds-font-family-default","wsr-font-family":"--wsr-font-family","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300","wsr-color-B40":"--toolbar1544401424-wsr-color-B40","wsr-color-D80":"--toolbar1544401424-wsr-color-D80"}; 
+export var vars = {"wds-color-blue-400":"--wds-color-blue-400","wds-color-black-400":"--wds-color-black-400","wds-color-white":"--wds-color-white","wds-font-family-default":"--wds-font-family-default","wsr-font-family":"--wsr-font-family","wds-font-weight-medium":"--wds-font-weight-medium","wds-font-weight-bold":"--wds-font-weight-bold","wds-font-size-500":"--wds-font-size-500","wds-font-line-height-300":"--wds-font-line-height-300","wsr-color-B40":"--toolbar3015150169-wsr-color-B40","wsr-color-D80":"--toolbar3015150169-wsr-color-D80"};