@wix/patterns-fields 1.55.0 → 1.59.0

package/src/components/reference/form-multi-reference.tsx

@@ -0,0 +1,234 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+import {
+  Box,
+  FormField,
+  MultiSelect,
+  listItemSelectBuilder,
+  type DropdownLayoutValueOption,
+  type MultiSelectTag,
+} from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+
+import { BaseInputProps } from '../../types/base-input';
+import { useTranslations } from '../../hooks/use-translations';
+import { ReferenceAvatar } from './reference-avatar';
+import { useReferenceDropdownFooter } from './reference-dropdown-footer';
+import type { FormReferenceItem } from './form-reference';
+
+/** Selected references, each stored as `{ [idField], [displayField] }`. */
+export type FormMultiReferenceValue = Record<string, unknown>[] | null;
+
+// Data-agnostic like CellMultiReferenceInput: the caller owns fetching, search,
+// and pagination and passes the results in as props. This renderer only wraps
+// them in a FormField with react-hook-form wiring. See remaining-issues.md #2.
+export interface FormMultiReferenceProps
+  extends BaseInputProps<FormMultiReferenceValue> {
+  /** Candidate items for the dropdown. */
+  items: FormReferenceItem[];
+  /** Referenced-item field the selected id is written to. */
+  idField: string;
+  /** Referenced-item field used as the tag label. */
+  displayField: string;
+  /** Referenced-item field holding an avatar image, when the schema has one. */
+  imageField?: string;
+  /** Current search text. The caller owns search state. */
+  searchValue?: string;
+  onSearch: (query: string) => void;
+  onClearSearch?: () => void;
+  hasMore?: boolean;
+  loadMore?: () => void;
+  fixedFooter?: React.ReactNode;
+  /** When set, renders an "Open Collection" action at the bottom of the dropdown. */
+  onOpenCollection?: () => void;
+  placeholder?: string;
+}
+
+interface MultiSelectHandle {
+  hideOptions?: () => void;
+}
+
+const _FormMultiReference = (props: FormMultiReferenceProps) => {
+  const {
+    field,
+    dataHook,
+    formControl,
+    data,
+    items,
+    idField,
+    displayField,
+    imageField,
+    searchValue,
+    onSearch,
+    onClearSearch,
+    hasMore,
+    loadMore,
+    fixedFooter,
+    onOpenCollection,
+    placeholder,
+  } = props;
+
+  const { translate: t } = useWixPatternsContainer();
+  const { t: tf } = useTranslations();
+  const msRef = useRef<MultiSelectHandle | null>(null);
+
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data?.[field.id],
+    rules: {
+      validate: (value) => {
+        const arr = value as FormMultiReferenceValue;
+        if (field.validation?.required && (!arr || !arr.length)) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      },
+    },
+  });
+
+  const selectedValues = useMemo(
+    () => (controller.field.value as Record<string, unknown>[]) || [],
+    [controller.field.value],
+  );
+
+  const tags = useMemo<MultiSelectTag[]>(
+    () =>
+      selectedValues.map((item) => {
+        const selectedId = item[idField] as string;
+        // A referenced item with no value in the display field still needs a
+        // readable tag — the dropdown options use the same fallback.
+        const label =
+          (item[displayField] as string) ||
+          tf('patterns-fields.reference.untitled');
+        const image = imageField
+          ? (item[imageField] as string | undefined)
+          : undefined;
+        return {
+          id: selectedId,
+          label,
+          removable: true,
+          size: 'medium',
+          thumb: (
+            <Box
+              align="center"
+              verticalAlign="middle"
+              position="absolute"
+              top="calc(50% - 12px)"
+              left="calc(50% - 12px)"
+            >
+              <ReferenceAvatar name={label} image={image} />
+            </Box>
+          ),
+          dataHook: `multi-reference-tag-${field.id}-${selectedId}`,
+        };
+      }),
+    [selectedValues, idField, displayField, imageField, field.id, tf],
+  );
+
+  const options = useMemo(
+    () =>
+      items.map((item) =>
+        listItemSelectBuilder({
+          id: item.id,
+          title: item.name || tf('patterns-fields.reference.untitled'),
+          prefix: <ReferenceAvatar name={item.name} image={item.image} />,
+        }),
+      ),
+    [items, tf],
+  );
+
+  const handleSelect = useCallback(
+    (option: DropdownLayoutValueOption) => {
+      const selectedId = String(option.id);
+      if (selectedValues.some((item) => item[idField] === selectedId)) {
+        onClearSearch?.();
+        return;
+      }
+      const item = items.find((i) => i.id === selectedId);
+      controller.field.onChange([
+        ...selectedValues,
+        { [idField]: selectedId, [displayField]: item?.name || '' },
+      ]);
+      onClearSearch?.();
+    },
+    [
+      selectedValues,
+      items,
+      idField,
+      displayField,
+      controller.field,
+      onClearSearch,
+    ],
+  );
+
+  const handleRemoveTag = useCallback(
+    (tagId: string) => {
+      controller.field.onChange(
+        selectedValues.filter((item) => item[idField] !== tagId),
+      );
+    },
+    [controller.field, selectedValues, idField],
+  );
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onSearch(e.target.value);
+    },
+    [onSearch],
+  );
+
+  const handleClear = useCallback(() => {
+    controller.field.onChange([]);
+    onClearSearch?.();
+  }, [controller.field, onClearSearch]);
+
+  const handleBlur = useCallback(() => {
+    onClearSearch?.();
+  }, [onClearSearch]);
+
+  const hideOptions = useCallback(() => msRef.current?.hideOptions?.(), []);
+  const combinedFooter = useReferenceDropdownFooter({
+    fixedFooter,
+    onOpenCollection,
+    hideOptions,
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+    >
+      <MultiSelect
+        ref={(instance: MultiSelectHandle | null) => {
+          msRef.current = instance;
+        }}
+        placeholder={
+          placeholder ?? tf('auto-patterns.fields.select_placeholder')
+        }
+        options={options}
+        value={searchValue ?? ''}
+        size="large"
+        tags={tags}
+        clearOnBlur={false}
+        onChange={handleChange}
+        onSelect={handleSelect}
+        onRemoveTag={handleRemoveTag}
+        onClear={handleClear}
+        onBlur={handleBlur}
+        clearButton={!field.validation?.required}
+        infiniteScroll={!!loadMore}
+        hasMore={hasMore}
+        loadMore={loadMore}
+        fixedFooter={combinedFooter}
+        dataHook={`multi-reference-input-${field.id}`}
+      />
+    </FormField>
+  );
+};
+
+export const FormMultiReference = observer(_FormMultiReference);

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

@@ -0,0 +1,211 @@
+import React, { useCallback, useMemo, useRef } from 'react';
+import {
+  AutoComplete,
+  FormField,
+  Input,
+  listItemSelectBuilder,
+  type DropdownLayoutValueOption,
+} from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+
+import { BaseInputProps } from '../../types/base-input';
+import { useTranslations } from '../../hooks/use-translations';
+import { ReferenceAvatar } from './reference-avatar';
+import { useReferenceDropdownFooter } from './reference-dropdown-footer';
+
+export interface FormReferenceItem {
+  id: string;
+  name: string;
+  image?: string;
+}
+
+/** The selected reference, stored on the form as `{ [idField], [displayField] }`. */
+export type FormReferenceValue = Record<string, unknown> | null;
+
+// Data-agnostic like CellReferenceInput: the caller owns fetching, search, and
+// pagination and passes the results in as props. This renderer only wraps them
+// in a FormField with react-hook-form wiring. See remaining-issues.md #2.
+export interface FormReferenceProps extends BaseInputProps<FormReferenceValue> {
+  /** Candidate items for the dropdown. */
+  items: FormReferenceItem[];
+  /** Referenced-item field the selected id is written to. */
+  idField: string;
+  /** Referenced-item field used as the display label. */
+  displayField: string;
+  /** Referenced-item field holding an avatar image, when the schema has one. */
+  imageField?: string;
+  /** Current search text. Empty ⇒ show the selected item's label. */
+  searchValue?: string;
+  onSearch: (query: string) => void;
+  onClearSearch?: () => void;
+  hasMore?: boolean;
+  loadMore?: () => void;
+  fixedFooter?: React.ReactNode;
+  /** When set, renders an "Open Collection" action at the bottom of the dropdown. */
+  onOpenCollection?: () => void;
+  placeholder?: string;
+}
+
+const _FormReference = (props: FormReferenceProps) => {
+  const {
+    field,
+    dataHook,
+    formControl,
+    data,
+    items,
+    idField,
+    displayField,
+    imageField,
+    searchValue,
+    onSearch,
+    onClearSearch,
+    hasMore,
+    loadMore,
+    fixedFooter,
+    onOpenCollection,
+    placeholder,
+  } = props;
+
+  const { translate: t } = useWixPatternsContainer();
+  const { t: tf } = useTranslations();
+  const acRef = useRef<React.ComponentRef<typeof AutoComplete> | null>(null);
+
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data?.[field.id],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && !value) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      },
+    },
+  });
+
+  const selectedValue = controller.field.value as FormReferenceValue;
+  const selectedDisplayValue = (selectedValue?.[displayField] as string) || '';
+  // A reference whose label is empty (the referenced item has no value in the
+  // display field) still has to look picked — an empty input reads as "nothing
+  // happened". Same fallback the options use.
+  const selectedLabel =
+    selectedDisplayValue ||
+    (selectedValue ? tf('patterns-fields.reference.untitled') : '');
+  const displayValue = searchValue || selectedLabel;
+  const selectedId = selectedValue?.[idField]
+    ? String(selectedValue[idField])
+    : undefined;
+
+  const selectedImage = useMemo(() => {
+    if (!selectedId) {
+      return undefined;
+    }
+    const found = items.find((item) => item.id === selectedId);
+    if (found?.image) {
+      return found.image;
+    }
+    return imageField
+      ? (selectedValue?.[imageField] as string | undefined)
+      : undefined;
+  }, [selectedValue, selectedId, imageField, items]);
+
+  const options = useMemo(
+    () =>
+      items.map((item) =>
+        listItemSelectBuilder({
+          id: item.id,
+          title: item.name || tf('patterns-fields.reference.untitled'),
+          prefix: <ReferenceAvatar name={item.name} image={item.image} />,
+        }),
+      ),
+    [items, tf],
+  );
+
+  const selectedPrefix =
+    selectedLabel && !searchValue ? (
+      <Input.Affix>
+        <ReferenceAvatar name={selectedLabel} image={selectedImage} />
+      </Input.Affix>
+    ) : undefined;
+
+  const handleSelect = useCallback(
+    (option: DropdownLayoutValueOption) => {
+      const item = items.find((i) => i.id === String(option.id));
+      controller.field.onChange({
+        [idField]: String(option.id),
+        [displayField]: item?.name || '',
+      });
+      onClearSearch?.();
+    },
+    [items, idField, displayField, controller.field, onClearSearch],
+  );
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onSearch(e.target.value);
+      if (!e.target.value) {
+        controller.field.onChange(null);
+      }
+    },
+    [onSearch, controller.field],
+  );
+
+  const handleClear = useCallback(() => {
+    controller.field.onChange(null);
+    onClearSearch?.();
+  }, [controller.field, onClearSearch]);
+
+  const handleBlur = useCallback(() => {
+    onClearSearch?.();
+  }, [onClearSearch]);
+
+  const hideOptions = useCallback(() => acRef.current?.hideOptions?.(), []);
+  const combinedFooter = useReferenceDropdownFooter({
+    fixedFooter,
+    onOpenCollection,
+    hideOptions,
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+    >
+      <AutoComplete
+        ref={acRef}
+        placeholder={
+          placeholder ?? tf('auto-patterns.fields.select_placeholder')
+        }
+        options={options}
+        value={displayValue}
+        // Without this the dropdown tracks its own picks only, so a value that
+        // came from the form (a loaded entity, or a re-opened dropdown) shows no
+        // selected row. `selected` on listItemSelectBuilder does not do this —
+        // the builder drops it.
+        selectedId={selectedId}
+        prefix={selectedPrefix}
+        onChange={handleChange}
+        onSelect={handleSelect}
+        onClear={handleClear}
+        onBlur={handleBlur}
+        clearButton={!field.validation?.required}
+        infiniteScroll={!!loadMore}
+        hasMore={hasMore}
+        loadMore={loadMore}
+        fixedFooter={combinedFooter}
+        // Hand the input to react-hook-form so shouldFocusError scrolls to +
+        // focuses this field when it blocks save.
+        inputRef={controller.field.ref}
+        dataHook={`reference-input-${field.id}`}
+      />
+    </FormField>
+  );
+};
+
+export const FormReference = observer(_FormReference);

package/src/components/reference/index.ts

@@ -1,4 +1,6 @@
 export * from './reference-avatar';
+export * from './form-reference';
+export * from './form-multi-reference';
 export * from './cell-reference-view';
 export * from './cell-reference-input';
 export * from './cell-multi-reference-view';

package/src/components/reference/reference-dropdown-footer.tsx

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { Divider, ListItemAction } from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+
+export interface ReferenceDropdownFooterParams {
+  /** Caller-supplied footer content (loader / empty state / error state). */
+  fixedFooter?: React.ReactNode;
+  /** When set, an "Open Collection" action is appended below the footer. */
+  onOpenCollection?: () => void;
+  /** Closes the dropdown before navigating to the referenced collection. */
+  hideOptions?: () => void;
+}
+
+/**
+ * Footer for a reference dropdown: the caller's content plus an "Open
+ * Collection" action. Returns `undefined` when there is nothing to show, so the
+ * dropdown renders no footer at all.
+ */
+export function useReferenceDropdownFooter({
+  fixedFooter,
+  onOpenCollection,
+  hideOptions,
+}: ReferenceDropdownFooterParams): React.ReactNode | undefined {
+  const { t } = useTranslations();
+
+  return useMemo(() => {
+    if (!fixedFooter && !onOpenCollection) {
+      return undefined;
+    }
+    return (
+      // Pressing inside the footer must not blur the input — that would close
+      // the dropdown before the click lands.
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      <div onMouseDown={(e) => e.preventDefault()}>
+        {fixedFooter}
+        {onOpenCollection && <Divider />}
+        {onOpenCollection && (
+          <ListItemAction
+            title={t('patterns-fields.reference.open_collection')}
+            size="small"
+            onClick={() => {
+              hideOptions?.();
+              onOpenCollection();
+            }}
+            dataHook="reference-open-collection"
+          />
+        )}
+      </div>
+    );
+  }, [fixedFooter, onOpenCollection, hideOptions, t]);
+}

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_ = "richcontentdefaultvalueinput1686739801";
+var _namespace_ = "richcontentdefaultvalueinput927131759";
 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":"richcontentdefaultvalueinput1686739801__root","richContentEditorContainer":"richcontentdefaultvalueinput1686739801__richContentEditorContainer","editor":"richcontentdefaultvalueinput1686739801__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput927131759__root","richContentEditorContainer":"richcontentdefaultvalueinput927131759__richContentEditorContainer","editor":"richcontentdefaultvalueinput927131759__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.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentforminput885213562";
+var _namespace_ = "richcontentforminput2279180603";
 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":"richcontentforminput885213562__root","editor":"richcontentforminput885213562__editor"};
+export var classes = {"root":"richcontentforminput2279180603__root","editor":"richcontentforminput2279180603__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "richcontentformreadonlyinput1160116662";
+var _namespace_ = "richcontentformreadonlyinput4128499448";
 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":"richcontentformreadonlyinput1160116662__root"};
+export var classes = {"root":"richcontentformreadonlyinput4128499448__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_ = "fullscreenmodal3769450194";
+var _namespace_ = "fullscreenmodal15708560";
 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":"fullscreenmodal3769450194__root","modalContent":"fullscreenmodal3769450194__modalContent"};
+export var classes = {"root":"fullscreenmodal15708560__root","modalContent":"fullscreenmodal15708560__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_ = "publishloader2067404058";
+var _namespace_ = "publishloader932699564";
 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":"publishloader2067404058__root","publishLoader":"publishloader2067404058__publishLoader"};
+export var classes = {"root":"publishloader932699564__root","publishLoader":"publishloader932699564__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_ = "togglefullscreenbutton3767453356";
+var _namespace_ = "togglefullscreenbutton1277576667";
 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":"togglefullscreenbutton3767453356__root"};
+export var classes = {"root":"togglefullscreenbutton1277576667__root"};
 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.tsx

@@ -5,7 +5,7 @@ import { IconButton, Tooltip } from '@wix/design-system';
 import {
   DismissSmall as DismissIcon,
   MaximizeSmall as MaximizeIcon,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 
 import { useTranslations } from '../../../../../hooks';
 import { classes } from './toggle-fullscreen-button.st.css.js';

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_ = "richcontenteditor2306322343";
+var _namespace_ = "richcontenteditor3855532316";
 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":"richcontenteditor2306322343__root","toolbarContainer":"richcontenteditor2306322343__toolbarContainer","footerToolbarContainer":"richcontenteditor2306322343__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2306322343__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2306322343__editor","modalEditor":"richcontenteditor2306322343__modalEditor"};
+export var classes = {"root":"richcontenteditor3855532316__root","toolbarContainer":"richcontenteditor3855532316__toolbarContainer","footerToolbarContainer":"richcontenteditor3855532316__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3855532316__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3855532316__editor","modalEditor":"richcontenteditor3855532316__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_ = "richcontenttoolbar216750265";
+var _namespace_ = "richcontenttoolbar3242725985";
 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":"richcontenttoolbar216750265__root","toolbar":"richcontenttoolbar216750265__toolbar","toolbarButton":"richcontenttoolbar216750265__toolbarButton","separator":"richcontenttoolbar216750265__separator"};
+export var classes = {"root":"richcontenttoolbar3242725985__root","toolbar":"richcontenttoolbar3242725985__toolbar","toolbarButton":"richcontenttoolbar3242725985__toolbarButton","separator":"richcontenttoolbar3242725985__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_ = "richcontentviewer2914514418";
+var _namespace_ = "richcontentviewer453758759";
 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":"richcontentviewer2914514418__root","viewer":"richcontentviewer2914514418__viewer","modalViewer":"richcontentviewer2914514418__modalViewer"};
+export var classes = {"root":"richcontentviewer453758759__root","viewer":"richcontentviewer453758759__viewer","modalViewer":"richcontentviewer453758759__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};