@wix/patterns 1.255.0 → 1.256.0

package/src/components/Tags/BulkAssignTagsPopover/BulkAssignTagsPopover.tsx

@@ -0,0 +1,133 @@
+import React, { useCallback, ReactElement } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { Box, Loader, Popover, SelectorList, Tag } from '@wix/design-system';
+import { TagsBulkAssignPopoverState } from '../../../state/TagsBulkAssignPopoverState';
+import { CreateTagButton } from './CreateTagButton';
+import { EmptyState } from './EmptyState';
+import { Footer } from './Footer';
+import { FiltersMap, TAG_MAX_LENGTH } from '@wix/bex-core';
+import { minimalRequiredWdsRuntimeCheck } from '../../../minimalRequiredWdsRuntimeCheck';
+import { AsyncJobProgressModal } from './AsyncJobProgressModal';
+
+export interface BulkAssignTagsPopoverProps<T, F extends FiltersMap> {
+  state: TagsBulkAssignPopoverState<T, F>;
+  popoverElement: ReactElement;
+}
+
+export const _BulkAssignTagsPopover = <T, F extends FiltersMap>({
+  state,
+  popoverElement,
+}: BulkAssignTagsPopoverProps<T, F>) => {
+  const { translate: t } = useWixPatternsContainer();
+
+  const closePopover = useCallback(() => {
+    state.closePopover();
+  }, [state]);
+
+  const handleItemSelect = useCallback(
+    (item) => {
+      state.handleItemSelect(item.id);
+    },
+    [state],
+  );
+
+  if (process.env.NODE_ENV !== 'production') {
+    minimalRequiredWdsRuntimeCheck({
+      required: '^1.76.1',
+      requiredBy: 'WixPatterns/BulkAssignTagsPopover',
+    });
+  }
+
+  const selectorListDataSource = (searchQuery: string) => {
+    state.handleSearchChange(searchQuery);
+    const filteredOptions = state.tagOptions.filter((tag) => {
+      return tag.name!.toLowerCase().includes(searchQuery);
+    });
+
+    if (filteredOptions.length === 0 && searchQuery.length > TAG_MAX_LENGTH) {
+      const truncatedTag = state.tagOptions.find(
+        (tag) =>
+          tag.name?.toLowerCase() ===
+          searchQuery.substring(0, TAG_MAX_LENGTH).toLowerCase(),
+      );
+
+      if (truncatedTag) {
+        filteredOptions.push(truncatedTag);
+      }
+    }
+
+    const items = filteredOptions.map((tag, idx) => ({
+      id: tag.id!,
+      title: (
+        <Tag
+          id={tag.id!}
+          removable={false}
+          maxWidth="198px"
+          dataHook={`bulk-assign-tags-tag-${idx}`}
+        >
+          {tag.name}
+        </Tag>
+      ),
+      selected: state.assignedWithOptimisticTagIds.includes(tag.id!),
+      indeterminate: state.indeterminateTagIds.includes(tag.id!),
+    }));
+    return Promise.resolve({
+      items,
+      totalCount: items.length,
+    });
+  };
+
+  return (
+    <>
+      <Popover
+        showArrow
+        shown={state.isShown}
+        appendTo="window"
+        placement="bottom"
+        width="304px"
+        onClickOutside={closePopover}
+        dataHook="bulk-assign-tags-popover"
+      >
+        <Popover.Element>{popoverElement}</Popover.Element>
+        <Popover.Content>
+          <Box height="270px" direction="vertical">
+            {state.isLoading && (
+              <Box align="center" verticalAlign="middle" flex={1}>
+                <Loader dataHook="bulk-assign-tags-loading-state" />
+              </Box>
+            )}
+            {!state.isLoading && (
+              <SelectorList
+                key={state.tagsManagementState.items.length} // Remount the component on every new created tag
+                dataHook="bulk-assign-tags-selector-list"
+                dataSource={selectorListDataSource}
+                emptyState={<EmptyState state={state} />}
+                size="small"
+                searchPlaceholder={
+                  state.isInEmptyState
+                    ? t(
+                        'cairo.tags.collectionPage.popover.emptyState.search.placeholder',
+                      )
+                    : t('cairo.tags.collectionPage.popover.search.placeholder')
+                }
+                renderNoResults={(searchValue) => (
+                  <Box padding="SP2 SP5">
+                    <CreateTagButton state={state} searchValue={searchValue} />
+                  </Box>
+                )}
+                multiple
+                onSelect={handleItemSelect}
+                height="216px"
+              />
+            )}
+            <Footer state={state} />
+          </Box>
+        </Popover.Content>
+      </Popover>
+      <AsyncJobProgressModal state={state} />
+    </>
+  );
+};
+
+export const BulkAssignTagsPopover = observer(_BulkAssignTagsPopover);

package/src/components/Tags/BulkAssignTagsPopover/BulkAssignTagsPopover.uni.driver.ts

@@ -0,0 +1,133 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../unidriver';
+import {
+  ButtonUniDriver,
+  EmptyStateUniDriver,
+  LoaderUniDriver,
+  PopoverUniDriver,
+  SearchUniDriver,
+  SelectorListUniDriver,
+  TagUniDriver,
+  TextButtonUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+import { ManageTagsModalUniDriver } from '../ManageTags/ManageTagsModal/ManageTagsModal.uni.driver';
+import { AsyncJobProgressModalUniDriver } from './AsyncJobProgressModal.uni.driver';
+
+export function BulkAssignTagsPopoverUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+) {
+  const popoverBase = () =>
+    PopoverUniDriver(base.$('[data-hook="bulk-assign-tags-popover"]'), body);
+
+  const getContentElement = async () =>
+    popoverBase().getContentElementUniDriver();
+
+  const getInnerPopoverDriver = async <T>(
+    dataHook: string,
+    driverConstructor: (base: UniDriver, body: UniDriver) => T,
+  ): Promise<T> => {
+    const contentElement = await getContentElement();
+    return driverConstructor(contentElement.$(`[data-hook=${dataHook}]`), body);
+  };
+
+  const getTagsListDriver = async () =>
+    getInnerPopoverDriver(
+      'bulk-assign-tags-selector-list',
+      SelectorListUniDriver,
+    );
+
+  const getCloseButtonDriver = async () =>
+    getInnerPopoverDriver('bulk-assign-tags-close-button', ButtonUniDriver);
+
+  const getApplyButtonDriver = async () =>
+    getInnerPopoverDriver('bulk-assign-tags-apply-button', ButtonUniDriver);
+
+  const getCreateTagButtonDriver = async () =>
+    getInnerPopoverDriver(
+      'bulk-assign-tags-create-tag-button',
+      ButtonUniDriver,
+    );
+
+  const getManageTagsButtonDriver = async () =>
+    getInnerPopoverDriver(
+      'bulk-assign-tags-manage-tags-button',
+      TextButtonUniDriver,
+    );
+
+  const getEmptyStateDriver = async () =>
+    getInnerPopoverDriver('bulk-assign-tags-empty-state', EmptyStateUniDriver);
+
+  const getErrorStateDriver = async () =>
+    getInnerPopoverDriver('bulk-assign-tags-error-state', EmptyStateUniDriver);
+
+  const getErrorStateRetryButtonDriver = async () =>
+    getInnerPopoverDriver(
+      'bulk-assign-tags-error-state-retry-button',
+      ButtonUniDriver,
+    );
+
+  const getLoaderDriver = async () =>
+    getInnerPopoverDriver('bulk-assign-tags-loading-state', LoaderUniDriver);
+
+  const enterSearchValue = async (value: string) => {
+    const contentElement = await getContentElement();
+    const tagsListDriver = await getTagsListDriver();
+    const isEmptyState = await tagsListDriver.showsEmptyState();
+    if (isEmptyState) {
+      await SearchUniDriver(
+        contentElement.$('[data-hook="bulk-assign-tags-empty-state-search"]'),
+        body,
+      ).inputDriver.enterText(value);
+    } else {
+      await tagsListDriver.enterSearchValue(value);
+    }
+  };
+
+  const getTagDriverAt = async (idx: number) =>
+    getInnerPopoverDriver(`bulk-assign-tags-tag-${idx}`, TagUniDriver);
+
+  return {
+    ...baseUniDriverFactory(base),
+    asyncJobProgressModal: () => AsyncJobProgressModalUniDriver(base, body),
+    popoverExists: () => popoverBase().exists(),
+    clickOutside: () => popoverBase().clickOutside(),
+    tagsSelectorlistExist: async () => (await getTagsListDriver()).exists(),
+    enterSearchValue,
+    clickSearchInputClear: async () =>
+      (await getTagsListDriver()).clickSearchInputClear(),
+    isSelectorCheckedAt: async (idx: number) =>
+      (await getTagsListDriver()).isSelectorCheckedAt(idx),
+    isSelectorIsIndeterminateAt: async (idx: number) =>
+      (await getTagsListDriver()).isSelectorIsIndeterminateAt(idx),
+    tagsListExists: async () => (await getTagsListDriver()).listExists(),
+    numberOfItemsInList: async () =>
+      (await getTagsListDriver()).numberOfItemsInList(),
+    getTagLabelAt: async (idx: number) =>
+      (await getTagDriverAt(idx)).getLabel(),
+    toggleSelectorAt: async (idx: number) =>
+      (await getTagsListDriver()).toggleSelectorAt(idx),
+    closeButtonExists: async () => (await getCloseButtonDriver()).exists(),
+    clickCloseButton: async () => (await getCloseButtonDriver()).click(),
+    applyButtonExists: async () => (await getApplyButtonDriver()).exists(),
+    clickApplyButton: async () => (await getApplyButtonDriver()).click(),
+    createTagButtonExists: async () =>
+      (await getCreateTagButtonDriver()).exists(),
+    clickCreateTagButton: async () =>
+      (await getCreateTagButtonDriver()).click(),
+    manageTagsButtonExists: async () =>
+      (await getManageTagsButtonDriver()).exists(),
+    clickManageTagsButton: async () =>
+      (await getManageTagsButtonDriver()).click(),
+    manageTagsModal: () => ManageTagsModalUniDriver(base, body),
+    emptyStateExists: async () => (await getEmptyStateDriver()).exists(),
+    errorStateExists: async () => (await getErrorStateDriver()).exists(),
+    errorStateRetryButtonExists: async () =>
+      (await getErrorStateRetryButtonDriver()).exists(),
+    clickErrorStateRetryButton: async () =>
+      (await getErrorStateRetryButtonDriver()).click(),
+    isLoading: async () => (await getLoaderDriver()).exists(),
+    isContentElementExists: () => popoverBase().isContentElementExists(),
+    getContentElement: () => popoverBase().getContentElement(),
+  };
+}

package/src/components/Tags/BulkAssignTagsPopover/CreateTagButton.tsx

@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react';
+import { TagsBulkAssignPopoverState } from '../../../state/TagsBulkAssignPopoverState';
+import { TextButton, Box } from '@wix/design-system';
+import { Add as AddIcon } from '@wix/wix-ui-icons-common';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { FiltersMap, TAG_MAX_LENGTH } from '@wix/bex-core';
+
+export interface CreateTagButtonProps<T, F extends FiltersMap> {
+  state: TagsBulkAssignPopoverState<T, F>;
+  searchValue: string;
+}
+
+export const CreateTagButton = <T, F extends FiltersMap>({
+  state,
+  searchValue,
+}: CreateTagButtonProps<T, F>) => {
+  const { translate: t } = useWixPatternsContainer();
+  const createAndAssignTag = useCallback(
+    (tagName) => {
+      state.createAndAssignTag(tagName);
+    },
+    [state],
+  );
+
+  return (
+    <Box height="18px" width="100%">
+      <TextButton
+        dataHook="bulk-assign-tags-create-tag-button"
+        prefixIcon={<AddIcon />}
+        onClick={() => createAndAssignTag(searchValue)}
+        size="small"
+        ellipsis
+      >
+        {t('cairo.tags.collectionPage.popover.create.CTA', {
+          tagName: searchValue.slice(0, TAG_MAX_LENGTH),
+        })}
+      </TextButton>
+    </Box>
+  );
+};

package/src/components/Tags/BulkAssignTagsPopover/EmptyState.tsx

@@ -0,0 +1,85 @@
+import React, { useCallback } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  Box,
+  Search,
+  TextButton,
+  EmptyState as WSREmptyState,
+} from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { TagsBulkAssignPopoverState } from '../../../state/TagsBulkAssignPopoverState';
+import { CreateTagButton } from './CreateTagButton';
+import { FiltersMap } from '@wix/bex-core';
+
+interface EmptyStateProps<T, F extends FiltersMap> {
+  state: TagsBulkAssignPopoverState<T, F>;
+}
+
+const _EmptyState = <T, F extends FiltersMap>({
+  state,
+}: EmptyStateProps<T, F>) => {
+  const { translate: t } = useWixPatternsContainer();
+
+  const handleEmptyStateSearchChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      state.handleSearchChange(value);
+    },
+    [state.handleSearchChange],
+  );
+
+  const renderErrorState = useCallback(() => {
+    const resolvedError = state.error;
+    return (
+      <Box height="100%" verticalAlign="middle">
+        <WSREmptyState
+          dataHook="bulk-assign-tags-error-state"
+          theme="page-no-border"
+          subtitle={resolvedError?.message}
+        >
+          {resolvedError?.action?.onClick && (
+            <TextButton
+              dataHook="bulk-assign-tags-error-state-retry-button"
+              onClick={resolvedError?.action?.onClick}
+            >
+              {resolvedError?.action?.text}
+            </TextButton>
+          )}
+        </WSREmptyState>
+      </Box>
+    );
+  }, [state.error]);
+
+  return (
+    <Box direction="vertical" boxSizing="border-box" height="100%">
+      {state.isInEmptyState && (
+        <Box direction="vertical" padding="SP5 SP5 0">
+          <Box>
+            <Search
+              dataHook="bulk-assign-tags-empty-state-search"
+              placeholder={t(
+                'cairo.tags.collectionPage.popover.emptyState.search.placeholder',
+              )}
+              onChange={handleEmptyStateSearchChange}
+            ></Search>
+          </Box>
+          {!!state.searchValue && (
+            <Box marginTop="SP4">
+              <CreateTagButton state={state} searchValue={state.searchValue} />
+            </Box>
+          )}
+        </Box>
+      )}
+      {state.isError && renderErrorState()}
+      {state.isInEmptyState && !state.searchValue && (
+        <WSREmptyState
+          dataHook="bulk-assign-tags-empty-state"
+          theme="page-no-border"
+          subtitle={t('cairo.tags.collectionPage.popover.emptyState.body')}
+        />
+      )}
+    </Box>
+  );
+};
+
+export const EmptyState = observer(_EmptyState);

package/src/components/Tags/BulkAssignTagsPopover/Footer.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback } from 'react';
+import { TagsBulkAssignPopoverState } from '../../../state/TagsBulkAssignPopoverState';
+import { Box, Button, Divider, TextButton } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { observer } from 'mobx-react-lite';
+import { FiltersMap } from '@wix/bex-core';
+
+interface FooterProps<T, F extends FiltersMap> {
+  state: TagsBulkAssignPopoverState<T, F>;
+}
+
+const _Footer = <T, F extends FiltersMap>({ state }: FooterProps<T, F>) => {
+  const { translate: t } = useWixPatternsContainer();
+
+  const closePopover = useCallback(() => {
+    state.closePopover();
+  }, [state]);
+
+  const applyChanges = useCallback(() => {
+    state.applyChanges();
+  }, [state]);
+
+  const handleManageTagsCtaClick = useCallback(() => {
+    state.handleManageTagsCtaClick();
+  }, [state]);
+
+  return (
+    <Box height="54px" width="100%" direction="vertical">
+      <Divider />
+      <Box
+        height="100%"
+        align="space-between"
+        verticalAlign="middle"
+        padding="0 SP3"
+      >
+        {!state.isLoading && !state.isError && (
+          <TextButton
+            dataHook="bulk-assign-tags-manage-tags-button"
+            size="small"
+            onClick={handleManageTagsCtaClick}
+          >
+            {t('cairo.tags.collectionPage.popover.manage.CTA')}
+          </TextButton>
+        )}
+        <Box marginLeft="auto">
+          {state.isDirty ? (
+            <Button
+              onClick={applyChanges}
+              dataHook="bulk-assign-tags-apply-button"
+            >
+              {t('cairo.tags.collectionPage.applyChanges.CTA')}
+            </Button>
+          ) : (
+            <Button
+              onClick={closePopover}
+              dataHook="bulk-assign-tags-close-button"
+            >
+              {t('cairo.tags.collectionPage.popover.close.CTA')}
+            </Button>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export const Footer = observer(_Footer);

package/src/components/Tags/BulkAssignTagsPopover/index.ts

@@ -0,0 +1 @@
+export { BulkAssignTagsPopover } from './BulkAssignTagsPopover';

package/src/components/Tags/ManageTags/CollectionManageTagsModal.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { useToolbarCollectionContext } from '../../ToolbarCollectionContext';
+import { ManageTagsModal } from './ManageTagsModal/ManageTagsModal';
+
+export const CollectionManageTagsModal = () => {
+  const toolbarState = useToolbarCollectionContext();
+  const tagsModalState = toolbarState.tagsCollectionState?.tagsModalState;
+  if (!tagsModalState) {
+    return null;
+  }
+  return <ManageTagsModal state={tagsModalState} />;
+};

package/src/components/Tags/ManageTags/ManageTagsModal/List/TagListItemEditable.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Text } from '@wix/design-system';
+import { Tag } from '@wix/bex-utils/@wix/ambassador-os-tags-v1-tag/types';
+import { TagsModalState } from '../../../../../state/TagsModalState';
+import { TagItemEditable } from '../TagItemEditable';
+import { MessageActionModal } from '../../../../ActionModal';
+import { Trans } from '../../../../Trans';
+import { observer } from 'mobx-react-lite';
+import { TAG_MAX_LENGTH } from '@wix/bex-core';
+
+export interface TagListItemEditableProps {
+  state: TagsModalState;
+  tag: Tag;
+  isLastTag: boolean;
+}
+
+const _TagListItemEditable = ({
+  state,
+  tag,
+  isLastTag,
+}: TagListItemEditableProps) => {
+  const onCancel = () => {
+    state.handleCancelEditCtaClick();
+  };
+
+  const onApprove = async (newName: string) => {
+    await state.updateTag({ tag, newName, isLastTag });
+  };
+
+  return (
+    <>
+      <TagItemEditable
+        tagName={tag.name!}
+        isLastTag={isLastTag}
+        errorMessage={state.editedTagErrorMessage}
+        onApprove={onApprove}
+        onCancel={onCancel}
+        maxLength={TAG_MAX_LENGTH}
+      />
+
+      {state.confirmModalState.value && (
+        <MessageActionModal
+          dataHook="manage-tags-modal-confirm-delete-modal"
+          state={state.confirmModalState}
+          content={
+            <Trans
+              i18nKey="cairo.tags.manageTags.modal.deleteModal.body"
+              values={{ name: tag.name }}
+              components={{
+                text: <Text />,
+                name: <Text weight="bold" />,
+              }}
+            />
+          }
+          {...state.confirmModalState.value}
+        />
+      )}
+    </>
+  );
+};
+
+export const TagListItemEditable = observer(_TagListItemEditable);

package/src/components/Tags/ManageTags/ManageTagsModal/List/TagListItemView.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {
+  TableListItem,
+  Tag as TagComponent,
+  IconButton,
+  Box,
+  Tooltip,
+} from '@wix/design-system';
+import { DeleteSmall, EditSmall } from '@wix/wix-ui-icons-common';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { Tag } from '@wix/bex-utils/@wix/ambassador-os-tags-v1-tag/types';
+import { TagsModalState } from '../../../../../state/TagsModalState';
+
+export interface TagsListItemViewProps {
+  state: TagsModalState;
+  tag: Tag;
+  isLastTag: boolean;
+}
+
+export const TagsListItemView = ({
+  state,
+  tag,
+  isLastTag,
+}: TagsListItemViewProps) => {
+  const { translate: t } = useWixPatternsContainer();
+
+  const handleEditClick = () => {
+    state.handleEditCtaClick(tag);
+  };
+
+  const handleDeleteClick = () => {
+    state.deleteTag(tag);
+  };
+
+  return (
+    <TableListItem
+      dataHook="manage-tags-modal-tag-row"
+      options={[
+        {
+          value: (
+            <TagComponent
+              id={tag.id!}
+              removable={false}
+              ellipsisProps={{ enterDelay: 500 }}
+              dataHook="manage-tags-modal-tag"
+            >
+              {tag.name}
+            </TagComponent>
+          ),
+          width: '1fr',
+          align: 'left',
+        },
+        {
+          value: (
+            <Box gap="SP2" align="right">
+              <Tooltip
+                content={t(
+                  'cairo.tags.manageTags.modal.list.action.rename.CTA',
+                )}
+              >
+                <IconButton
+                  dataHook="manage-tags-modal-tag-action-edit"
+                  size="small"
+                  priority="secondary"
+                  onClick={handleEditClick}
+                >
+                  <EditSmall />
+                </IconButton>
+              </Tooltip>
+              <Tooltip
+                content={t(
+                  'cairo.tags.manageTags.modal.list.action.delete.CTA',
+                )}
+              >
+                <IconButton
+                  dataHook="manage-tags-modal-tag-action-delete"
+                  size="small"
+                  priority="secondary"
+                  onClick={handleDeleteClick}
+                >
+                  <DeleteSmall />
+                </IconButton>
+              </Tooltip>
+            </Box>
+          ),
+          width: 'max-content',
+          align: 'right',
+        },
+      ]}
+      verticalPadding="tiny"
+      showDivider={!isLastTag}
+    />
+  );
+};

package/src/components/Tags/ManageTags/ManageTagsModal/List/TagsListItem.tsx

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react';
+import { TagsListItemView } from './TagListItemView';
+import { TagListItemEditable } from './TagListItemEditable';
+import { TagsModalState } from '../../../../../state/TagsModalState';
+import { Tag } from '@wix/bex-utils/@wix/ambassador-os-tags-v1-tag/types';
+import { observer } from 'mobx-react-lite';
+
+export interface TagsListItemProps {
+  state: TagsModalState;
+  tag: Tag;
+  isLastTag: boolean;
+}
+
+export const _TagsListItem = ({ state, tag, isLastTag }: TagsListItemProps) => {
+  const viewMode = useMemo(
+    () => tag?.id !== state.editedTagId,
+    [state.editedTagId, tag],
+  );
+
+  return viewMode && tag ? (
+    <TagsListItemView state={state} tag={tag} isLastTag={isLastTag} />
+  ) : (
+    <TagListItemEditable state={state} tag={tag} isLastTag={isLastTag} />
+  );
+};
+
+export const TagsListItem = observer(_TagsListItem);

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css

@@ -0,0 +1,3 @@
+.root {
+  display: flex;
+}

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

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