@wix/patterns-fields 1.55.0 → 1.58.0

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

@@ -0,0 +1,212 @@
+import React, { useCallback, useMemo } 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 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;
+  onOpenCollection?: () => void;
+  placeholder?: string;
+}
+
+const _FormMultiReference = (props: FormMultiReferenceProps) => {
+  const {
+    field,
+    dataHook,
+    formControl,
+    data,
+    items,
+    idField,
+    displayField,
+    imageField,
+    searchValue,
+    onSearch,
+    onClearSearch,
+    hasMore,
+    loadMore,
+    fixedFooter,
+    placeholder,
+  } = props;
+
+  const { translate: t } = useWixPatternsContainer();
+  const { t: tf } = useTranslations();
+
+  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;
+        const label = item[displayField] as string;
+        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],
+  );
+
+  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]);
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+    >
+      <MultiSelect
+        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={fixedFooter}
+        dataHook={`multi-reference-input-${field.id}`}
+      />
+    </FormField>
+  );
+};
+
+export const FormMultiReference = observer(_FormMultiReference);

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

@@ -0,0 +1,186 @@
+import React, { useCallback, useMemo } 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';
+
+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;
+  onOpenCollection?: () => void;
+  placeholder?: string;
+}
+
+const _FormReference = (props: FormReferenceProps) => {
+  const {
+    field,
+    dataHook,
+    formControl,
+    data,
+    items,
+    idField,
+    displayField,
+    imageField,
+    searchValue,
+    onSearch,
+    onClearSearch,
+    hasMore,
+    loadMore,
+    fixedFooter,
+    placeholder,
+  } = props;
+
+  const { translate: t } = useWixPatternsContainer();
+  const { t: tf } = useTranslations();
+
+  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) || '';
+  const displayValue = searchValue || selectedDisplayValue;
+
+  const selectedImage = useMemo(() => {
+    const selectedId = selectedValue?.[idField];
+    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, idField, 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 =
+    selectedDisplayValue && !searchValue ? (
+      <Input.Affix>
+        <ReferenceAvatar name={selectedDisplayValue} 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]);
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+    >
+      <AutoComplete
+        placeholder={
+          placeholder ?? tf('auto-patterns.fields.select_placeholder')
+        }
+        options={options}
+        value={displayValue}
+        prefix={selectedPrefix}
+        onChange={handleChange}
+        onSelect={handleSelect}
+        onClear={handleClear}
+        onBlur={handleBlur}
+        clearButton={!field.validation?.required}
+        infiniteScroll={!!loadMore}
+        hasMore={hasMore}
+        loadMore={loadMore}
+        fixedFooter={fixedFooter}
+        // 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/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_ = "richcontentdefaultvalueinput443326018";
 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":"richcontentdefaultvalueinput443326018__root","richContentEditorContainer":"richcontentdefaultvalueinput443326018__richContentEditorContainer","editor":"richcontentdefaultvalueinput443326018__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_ = "richcontentforminput3334825677";
 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":"richcontentforminput3334825677__root","editor":"richcontentforminput3334825677__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_ = "richcontentformreadonlyinput2425623005";
 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":"richcontentformreadonlyinput2425623005__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_ = "fullscreenmodal1841647145";
 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":"fullscreenmodal1841647145__root","modalContent":"fullscreenmodal1841647145__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_ = "publishloader1701008763";
 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":"publishloader1701008763__root","publishLoader":"publishloader1701008763__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_ = "togglefullscreenbutton3828783328";
 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":"togglefullscreenbutton3828783328__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_ = "richcontenteditor2306322343";
+var _namespace_ = "richcontenteditor1104792148";
 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":"richcontenteditor1104792148__root","toolbarContainer":"richcontenteditor1104792148__toolbarContainer","footerToolbarContainer":"richcontenteditor1104792148__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor1104792148__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor1104792148__editor","modalEditor":"richcontenteditor1104792148__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_ = "richcontenttoolbar1597960395";
 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":"richcontenttoolbar1597960395__root","toolbar":"richcontenttoolbar1597960395__toolbar","toolbarButton":"richcontenttoolbar1597960395__toolbarButton","separator":"richcontenttoolbar1597960395__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_ = "richcontentviewer3873042823";
 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":"richcontentviewer3873042823__root","viewer":"richcontentviewer3873042823__viewer","modalViewer":"richcontentviewer3873042823__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_ = "richeditor4033665438";
+var _namespace_ = "richeditor1957756590";
 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":"richeditor4033665438__root","editor":"richeditor4033665438__editor","header-one":"richeditor4033665438__header-one","header-two":"richeditor4033665438__header-two","header-three":"richeditor4033665438__header-three","header-four":"richeditor4033665438__header-four","header-five":"richeditor4033665438__header-five","header-six":"richeditor4033665438__header-six","paragraph-one":"richeditor4033665438__paragraph-one","unstyled":"richeditor4033665438__unstyled","paragraph-three":"richeditor4033665438__paragraph-three","align-left":"richeditor4033665438__align-left","align-right":"richeditor4033665438__align-right","align-center":"richeditor4033665438__align-center","align-justify":"richeditor4033665438__align-justify","withMargin":"richeditor4033665438__withMargin","dir-rtl":"richeditor4033665438__dir-rtl"};
+export var classes = {"root":"richeditor1957756590__root","editor":"richeditor1957756590__editor","header-one":"richeditor1957756590__header-one","header-two":"richeditor1957756590__header-two","header-three":"richeditor1957756590__header-three","header-four":"richeditor1957756590__header-four","header-five":"richeditor1957756590__header-five","header-six":"richeditor1957756590__header-six","paragraph-one":"richeditor1957756590__paragraph-one","unstyled":"richeditor1957756590__unstyled","paragraph-three":"richeditor1957756590__paragraph-three","align-left":"richeditor1957756590__align-left","align-right":"richeditor1957756590__align-right","align-center":"richeditor1957756590__align-center","align-justify":"richeditor1957756590__align-justify","withMargin":"richeditor1957756590__withMargin","dir-rtl":"richeditor1957756590__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.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richtexteditor2366770085";
+var _namespace_ = "richtexteditor2252892878";
 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":"richtexteditor2366770085__root","nativeInput":"richtexteditor2366770085__nativeInput","editor":"richtexteditor2366770085__editor"};
+export var classes = {"root":"richtexteditor2252892878__root","nativeInput":"richtexteditor2252892878__nativeInput","editor":"richtexteditor2252892878__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_ = "toolbar3600818548";
+var _namespace_ = "toolbar273985549";
 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":"toolbar3600818548__root","item":"toolbar3600818548__item","separator":"toolbar3600818548__separator","clearFormatting":"toolbar3600818548__clearFormatting","fullScreen":"toolbar3600818548__fullScreen","dropdownItemContent":"toolbar3600818548__dropdownItemContent","dropdownItemTitle":"toolbar3600818548__dropdownItemTitle","dropdownItemSubtitle":"toolbar3600818548__dropdownItemSubtitle","dropdownHeaderOne":"toolbar3600818548__dropdownHeaderOne","dropdownHeaderTwo":"toolbar3600818548__dropdownHeaderTwo","dropdownHeaderThree":"toolbar3600818548__dropdownHeaderThree","dropdownHeaderFour":"toolbar3600818548__dropdownHeaderFour","dropdownHeaderFive":"toolbar3600818548__dropdownHeaderFive","dropdownHeaderSix":"toolbar3600818548__dropdownHeaderSix","dropdownParagraphOne":"toolbar3600818548__dropdownParagraphOne","dropdownNormalText":"toolbar3600818548__dropdownNormalText","dropdownParagraphThree":"toolbar3600818548__dropdownParagraphThree"};
+export var classes = {"root":"toolbar273985549__root","item":"toolbar273985549__item","separator":"toolbar273985549__separator","clearFormatting":"toolbar273985549__clearFormatting","fullScreen":"toolbar273985549__fullScreen","dropdownItemContent":"toolbar273985549__dropdownItemContent","dropdownItemTitle":"toolbar273985549__dropdownItemTitle","dropdownItemSubtitle":"toolbar273985549__dropdownItemSubtitle","dropdownHeaderOne":"toolbar273985549__dropdownHeaderOne","dropdownHeaderTwo":"toolbar273985549__dropdownHeaderTwo","dropdownHeaderThree":"toolbar273985549__dropdownHeaderThree","dropdownHeaderFour":"toolbar273985549__dropdownHeaderFour","dropdownHeaderFive":"toolbar273985549__dropdownHeaderFive","dropdownHeaderSix":"toolbar273985549__dropdownHeaderSix","dropdownParagraphOne":"toolbar273985549__dropdownParagraphOne","dropdownNormalText":"toolbar273985549__dropdownNormalText","dropdownParagraphThree":"toolbar273985549__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview370550586";
+var _namespace_ = "textview1813358791";
 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":"textview370550586__root","textView":"textview370550586__textView"};
+export var classes = {"root":"textview1813358791__root","textView":"textview1813358791__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};