@wix/patterns-fields 1.81.0 → 1.83.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formaudiofield633769055";
+var _namespace_ = "formaudiofield1598691903";
 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":"formaudiofield633769055__root","addItem":"formaudiofield633769055__addItem","mediaTitle":"formaudiofield633769055__mediaTitle"};
+export var classes = {"root":"formaudiofield1598691903__root","addItem":"formaudiofield1598691903__addItem","mediaTitle":"formaudiofield1598691903__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-player/audio-player.st.css.ts

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

package/src/components/color-view/cell-color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellcolorview1815702415";
+var _namespace_ = "cellcolorview3348088318";
 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":"cellcolorview1815702415__root","hashPrefix":"cellcolorview1815702415__hashPrefix"};
+export var classes = {"root":"cellcolorview3348088318__root","hashPrefix":"cellcolorview3348088318__hashPrefix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview308249970";
+var _namespace_ = "colorview2640372915";
 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":"colorview308249970__root","view":"colorview308249970__view","fillPreview":"colorview308249970__fillPreview"};
+export var classes = {"root":"colorview2640372915__root","view":"colorview2640372915__view","fillPreview":"colorview2640372915__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/datetime-input/date-time-input.tsx

@@ -51,10 +51,17 @@ export const ControlledDateTimeInput: React.FC<DateTimeInputProps> = ({
     <div
       data-hook={dataHook}
       onBlur={(event) => {
+        // The calendar and time dropdowns render outside this wrapper (a
+        // Drawer with role="dialog" on mobile, a Popover with a
+        // data-hook*="calendar" or the TimeInput dropdown on desktop), so
+        // `contains()` alone would treat moving focus into them as leaving
+        // the field.
         const relatedTarget = event.relatedTarget;
         if (
           relatedTarget instanceof Element &&
-          relatedTarget.closest('[role="dialog"], [data-hook*="calendar"]')
+          relatedTarget.closest(
+            '[role="dialog"], [data-hook*="calendar"], [data-hook="TimeInput-dropdown"]',
+          )
         ) {
           return;
         }

package/src/components/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog928694296";
+var _namespace_ = "deletedialog591839243";
 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":"deletedialog928694296__root","layout":"deletedialog928694296__layout"};
+export var classes = {"root":"deletedialog591839243__root","layout":"deletedialog591839243__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield998924595";
+var _namespace_ = "formdocumentfield125589374";
 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":"formdocumentfield998924595__root","viewWrapper":"formdocumentfield998924595__viewWrapper","textWidth":"formdocumentfield998924595__textWidth","documentLoader":"formdocumentfield998924595__documentLoader","addDocument":"formdocumentfield998924595__addDocument","addItemWrapper":"formdocumentfield998924595__addItemWrapper"};
+export var classes = {"root":"formdocumentfield125589374__root","viewWrapper":"formdocumentfield125589374__viewWrapper","textWidth":"formdocumentfield125589374__textWidth","documentLoader":"formdocumentfield125589374__documentLoader","addDocument":"formdocumentfield125589374__addDocument","addItemWrapper":"formdocumentfield125589374__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation3904891972";
+var _namespace_ = "exclamation107353727";
 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":"exclamation3904891972__root","exclamation":"exclamation3904891972__exclamation","actions":"exclamation3904891972__actions","action":"exclamation3904891972__action"};
+export var classes = {"root":"exclamation107353727__root","exclamation":"exclamation107353727__exclamation","actions":"exclamation107353727__actions","action":"exclamation107353727__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/field-validation-settings/field-validation-settings-input.tsx

@@ -0,0 +1,384 @@
+import React from 'react';
+import {
+  Box,
+  FormField,
+  IconButton,
+  Input,
+  NumberInput,
+  Text,
+  TextButton,
+  ToggleSwitch,
+  Tooltip,
+} from '@wix/design-system';
+import { AddSmall, DeleteSmall } from '@wix/wix-ui-icons-common/lazy';
+import { v4 as uuid } from 'uuid';
+import type { ControlledInputProps } from '../../types/controlled-input';
+import type {
+  CharactersLimitFieldValidationRuleConfig,
+  FieldValidationRuleConfig,
+  FieldValidationSettingsValue,
+  PatternFieldValidationRuleConfig,
+  RequiredFieldValidationRuleConfig,
+  SpecificValuesFieldValidationRuleConfig,
+} from '../../types/validation';
+import { getFieldValidationSettingsViolations } from '../../validations/field-validation-settings';
+
+export interface FieldValidationSettingsInputProps
+  extends Omit<
+    ControlledInputProps<FieldValidationSettingsValue>,
+    'autoFocus' | 'onBlur'
+  > {
+  rules: readonly FieldValidationRuleConfig[];
+}
+
+interface RuleToggleProps {
+  dataHook: string;
+  checked: boolean;
+  disabled?: boolean;
+  label: string;
+  infoContent: string;
+  onChange(): void;
+}
+
+const RuleToggle = ({
+  dataHook,
+  checked,
+  disabled,
+  label,
+  infoContent,
+  onChange,
+}: RuleToggleProps) => (
+  <FormField
+    dataHook={dataHook}
+    label={label}
+    labelPlacement="right"
+    labelSize="small"
+    stretchContent={false}
+    infoContent={infoContent}
+  >
+    <ToggleSwitch
+      dataHook={`${dataHook}-toggle`}
+      size="medium"
+      checked={checked}
+      disabled={disabled}
+      onChange={onChange}
+    />
+  </FormField>
+);
+
+export const FieldValidationSettingsInput = ({
+  data,
+  onChange,
+  readOnly,
+  invalid,
+  dataHook = 'field-validation-settings',
+  rules,
+}: FieldValidationSettingsInputProps) => {
+  const supportedRules = rules.map(({ type }) => type);
+  const violations = getFieldValidationSettingsViolations(data, supportedRules);
+  const supportsSpecificValues = rules.some(
+    ({ type }) => type === 'specificValues',
+  );
+  const supportsCharactersLimit = rules.some(
+    ({ type }) => type === 'charactersLimit',
+  );
+  const supportsPattern = rules.some(({ type }) => type === 'pattern');
+  const hasSpecificValues =
+    supportsSpecificValues && data.specificValues !== undefined;
+  const hasCharactersLimit =
+    supportsCharactersLimit && data.charactersLimit !== undefined;
+  const hasPattern = supportsPattern && data.pattern !== undefined;
+  const hasUnattributedInvalidState =
+    Boolean(invalid) && violations.length === 0;
+  const showsExclusiveRulesExplanation =
+    (supportsCharactersLimit && (hasSpecificValues || hasCharactersLimit)) ||
+    (supportsPattern && (hasSpecificValues || hasPattern));
+
+  const update = (next: Partial<FieldValidationSettingsValue>) =>
+    onChange({ ...data, ...next });
+
+  const renderRequired = (rule: RequiredFieldValidationRuleConfig) => (
+    <RuleToggle
+      key="required"
+      dataHook="field-validation-required"
+      checked={Boolean(data.required)}
+      disabled={readOnly}
+      label={rule.label}
+      infoContent={rule.tooltip}
+      onChange={() => update({ required: !data.required })}
+    />
+  );
+
+  const renderCharactersLimit = (
+    rule: CharactersLimitFieldValidationRuleConfig,
+  ) => {
+    const minViolation = violations.find(
+      (violation) =>
+        violation.rule === 'charactersLimit' &&
+        violation.type === 'outOfBounds' &&
+        violation.bound === 'min',
+    );
+    const maxOutOfBoundsViolation = violations.find(
+      (violation) =>
+        violation.rule === 'charactersLimit' &&
+        violation.type === 'outOfBounds' &&
+        violation.bound === 'max',
+    );
+    const maxBelowMinViolation = violations.find(
+      (violation) =>
+        violation.rule === 'charactersLimit' &&
+        violation.type === 'maxBelowMin',
+    );
+
+    return (
+      <Box key="charactersLimit" direction="vertical" gap="SP2">
+        <RuleToggle
+          dataHook="field-validation-characters-limit"
+          checked={hasCharactersLimit}
+          disabled={readOnly || (hasSpecificValues && !hasCharactersLimit)}
+          label={rule.label}
+          infoContent={rule.tooltip}
+          onChange={() =>
+            update({ charactersLimit: hasCharactersLimit ? undefined : {} })
+          }
+        />
+        {hasCharactersLimit && (
+          <Box verticalAlign="middle" gap="SP2">
+            <Box width="112px">
+              <FormField stretchContent label={rule.minLabel}>
+                <NumberInput
+                  dataHook="field-validation-min-characters"
+                  size="small"
+                  value={data.charactersLimit?.min}
+                  disabled={readOnly}
+                  status={
+                    hasUnattributedInvalidState || minViolation
+                      ? 'error'
+                      : undefined
+                  }
+                  statusMessage={
+                    minViolation?.type === 'outOfBounds'
+                      ? rule.outOfBoundsError(
+                          minViolation.min,
+                          minViolation.max,
+                        )
+                      : undefined
+                  }
+                  onChange={(value) =>
+                    update({
+                      charactersLimit: {
+                        ...data.charactersLimit,
+                        min: value ?? undefined,
+                      },
+                    })
+                  }
+                />
+              </FormField>
+            </Box>
+            <Text size="small" secondary>
+              {rule.separator}
+            </Text>
+            <Box width="112px">
+              <FormField stretchContent label={rule.maxLabel}>
+                <NumberInput
+                  dataHook="field-validation-max-characters"
+                  size="small"
+                  value={data.charactersLimit?.max}
+                  disabled={readOnly}
+                  status={
+                    hasUnattributedInvalidState ||
+                    maxOutOfBoundsViolation ||
+                    maxBelowMinViolation
+                      ? 'error'
+                      : undefined
+                  }
+                  statusMessage={
+                    maxOutOfBoundsViolation?.type === 'outOfBounds'
+                      ? rule.outOfBoundsError(
+                          maxOutOfBoundsViolation.min,
+                          maxOutOfBoundsViolation.max,
+                        )
+                      : maxBelowMinViolation
+                      ? rule.maxBelowMinError
+                      : undefined
+                  }
+                  onChange={(value) =>
+                    update({
+                      charactersLimit: {
+                        ...data.charactersLimit,
+                        max: value ?? undefined,
+                      },
+                    })
+                  }
+                />
+              </FormField>
+            </Box>
+          </Box>
+        )}
+      </Box>
+    );
+  };
+
+  const renderSpecificValues = (
+    rule: SpecificValuesFieldValidationRuleConfig,
+  ) => (
+    <Box key="specificValues" direction="vertical" gap="SP2">
+      <RuleToggle
+        dataHook="field-validation-specific-values"
+        checked={hasSpecificValues}
+        disabled={
+          readOnly || ((hasCharactersLimit || hasPattern) && !hasSpecificValues)
+        }
+        label={rule.label}
+        infoContent={rule.tooltip}
+        onChange={() =>
+          update({ specificValues: hasSpecificValues ? undefined : [] })
+        }
+      />
+      {hasSpecificValues && (
+        <Box direction="vertical" gap="SP2">
+          {data.specificValues?.map((option, index) => {
+            const optionViolation = violations.find(
+              (violation) =>
+                violation.rule === 'specificValues' &&
+                'optionId' in violation &&
+                violation.optionId === option.id,
+            );
+            return (
+              <Box key={option.id} verticalAlign="middle" gap="SP1">
+                <Box width="100%">
+                  <Input
+                    dataHook={`field-validation-specific-value-${index}`}
+                    size="small"
+                    value={option.value}
+                    disabled={readOnly}
+                    status={
+                      optionViolation || hasUnattributedInvalidState
+                        ? 'error'
+                        : undefined
+                    }
+                    statusMessage={
+                      optionViolation?.type === 'blank'
+                        ? rule.blankError
+                        : optionViolation?.type === 'duplicate'
+                        ? rule.duplicateError
+                        : undefined
+                    }
+                    onChange={(event) =>
+                      update({
+                        specificValues: data.specificValues?.map((item) =>
+                          item.id === option.id
+                            ? { ...item, value: event.target.value }
+                            : item,
+                        ),
+                      })
+                    }
+                  />
+                </Box>
+                <Tooltip content={rule.removeButton}>
+                  <IconButton
+                    dataHook={`field-validation-specific-value-remove-${index}`}
+                    size="tiny"
+                    priority="secondary"
+                    disabled={readOnly}
+                    ariaLabel={rule.removeButton}
+                    onClick={() =>
+                      update({
+                        specificValues: data.specificValues?.filter(
+                          ({ id }) => id !== option.id,
+                        ),
+                      })
+                    }
+                  >
+                    <DeleteSmall />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+            );
+          })}
+          <Box>
+            <TextButton
+              dataHook="field-validation-specific-value-add"
+              size="small"
+              prefixIcon={<AddSmall />}
+              disabled={readOnly}
+              onClick={() =>
+                update({
+                  specificValues: [
+                    ...(data.specificValues ?? []),
+                    { id: uuid(), value: '' },
+                  ],
+                })
+              }
+            >
+              {rule.addButton}
+            </TextButton>
+          </Box>
+        </Box>
+      )}
+      {showsExclusiveRulesExplanation && (
+        <Text size="tiny" secondary dataHook="field-validation-exclusive-help">
+          {rule.exclusiveRulesExplanation}
+        </Text>
+      )}
+    </Box>
+  );
+
+  const renderPattern = (rule: PatternFieldValidationRuleConfig) => {
+    const invalidPatternViolation = violations.find(
+      (violation) =>
+        violation.rule === 'pattern' && violation.type === 'invalidPattern',
+    );
+
+    return (
+      <Box key="pattern" direction="vertical" gap="SP2">
+        <RuleToggle
+          dataHook="field-validation-pattern"
+          checked={hasPattern}
+          disabled={readOnly || (hasSpecificValues && !hasPattern)}
+          label={rule.label}
+          infoContent={rule.tooltip}
+          onChange={() => update({ pattern: hasPattern ? undefined : '' })}
+        />
+        {hasPattern && (
+          <FormField stretchContent label={rule.inputLabel}>
+            <Input
+              dataHook="field-validation-pattern-input"
+              size="small"
+              value={data.pattern}
+              disabled={readOnly}
+              status={
+                hasUnattributedInvalidState || invalidPatternViolation
+                  ? 'error'
+                  : undefined
+              }
+              statusMessage={
+                invalidPatternViolation ? rule.invalidError : undefined
+              }
+              onChange={(event) => update({ pattern: event.target.value })}
+            />
+          </FormField>
+        )}
+      </Box>
+    );
+  };
+
+  const renderRule = (rule: FieldValidationRuleConfig) => {
+    switch (rule.type) {
+      case 'required':
+        return renderRequired(rule);
+      case 'charactersLimit':
+        return renderCharactersLimit(rule);
+      case 'specificValues':
+        return renderSpecificValues(rule);
+      case 'pattern':
+        return renderPattern(rule);
+    }
+  };
+
+  return (
+    <Box dataHook={dataHook} direction="vertical" gap="SP3">
+      {rules.map(renderRule)}
+    </Box>
+  );
+};

package/src/components/field-validation-settings/field-validation-settings.uni.driver.ts

@@ -0,0 +1,60 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  IconButtonUniDriver,
+  InputUniDriver,
+  NumberInputUniDriver,
+  TextButtonUniDriver,
+  ToggleSwitchUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function FieldValidationSettingsUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+) {
+  const getToggle = (rule: string) =>
+    ToggleSwitchUniDriver(
+      base.$(`[data-hook="field-validation-${rule}-toggle"]`),
+      body,
+    );
+
+  return {
+    ...baseUniDriverFactory(base),
+    getRequiredToggle: () => getToggle('required'),
+    getCharactersLimitToggle: () => getToggle('characters-limit'),
+    getSpecificValuesToggle: () => getToggle('specific-values'),
+    getPatternToggle: () => getToggle('pattern'),
+    getMinCharactersInput: () =>
+      NumberInputUniDriver(
+        base.$('[data-hook="field-validation-min-characters"]'),
+        body,
+      ),
+    getMaxCharactersInput: () =>
+      NumberInputUniDriver(
+        base.$('[data-hook="field-validation-max-characters"]'),
+        body,
+      ),
+    getSpecificValueInput: (index: number) =>
+      InputUniDriver(
+        base.$(`[data-hook="field-validation-specific-value-${index}"]`),
+        body,
+      ),
+    getAddSpecificValueButton: () =>
+      TextButtonUniDriver(
+        base.$('[data-hook="field-validation-specific-value-add"]'),
+        body,
+      ),
+    getRemoveSpecificValueButton: (index: number) =>
+      IconButtonUniDriver(
+        base.$(`[data-hook="field-validation-specific-value-remove-${index}"]`),
+        body,
+      ),
+    getPatternInput: () =>
+      InputUniDriver(
+        base.$('[data-hook="field-validation-pattern-input"]'),
+        body,
+      ),
+    hasExclusiveRulesExplanation: () =>
+      base.$('[data-hook="field-validation-exclusive-help"]').exists(),
+  };
+}

package/src/components/field-validation-settings/index.ts

@@ -0,0 +1,2 @@
+export * from './field-validation-settings-input';
+export * from '../../validations/field-validation-settings';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext974507702";
+var _namespace_ = "highlightedtext1316333891";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext974507702__root","substring":"highlightedtext974507702__substring"};
-export var keyframes = {"highlighted":"highlightedtext974507702__highlighted","highlighted-match":"highlightedtext974507702__highlighted-match"}; 
+export var classes = {"root":"highlightedtext1316333891__root","substring":"highlightedtext1316333891__substring"};
+export var keyframes = {"highlighted":"highlightedtext1316333891__highlighted","highlighted-match":"highlightedtext1316333891__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay1007832735";
+var _namespace_ = "thumbnailreplaceoverlay476914298";
 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":"thumbnailreplaceoverlay1007832735__root","icon":"thumbnailreplaceoverlay1007832735__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay476914298__root","icon":"thumbnailreplaceoverlay476914298__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/index.ts

@@ -24,3 +24,4 @@ export * from './number-input';
 export * from './url';
 export * from './image';
 export * from './reference';
+export * from './field-validation-settings';

package/src/components/media-control/cell-media-edit-shell.st.css.ts

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