@se-studio/core-ui 1.0.46 → 1.0.47

package/dist/showcase/mockFactory.js

@@ -0,0 +1,352 @@
+import { BLOCKS, MARKS, } from '@contentful/rich-text-types';
+import { DEFAULT_ALLOWED_UNUSED } from '../utils/UnusedChecker';
+import { DEFAULT_SHOWCASE_CONTROL_STATE } from './types';
+/**
+ * Parses inline marks (bold) from a text string.
+ * Returns an array of text nodes with appropriate marks.
+ */
+function parseInlineMarks(text) {
+    const parts = text.split(/(\*\*.*?\*\*)/g);
+    return parts
+        .filter((part) => part.length > 0)
+        .map((part) => {
+        if (part.startsWith('**') && part.endsWith('**')) {
+            return {
+                nodeType: 'text',
+                value: part.slice(2, -2),
+                marks: [{ type: MARKS.BOLD }],
+                data: {},
+            };
+        }
+        return {
+            nodeType: 'text',
+            value: part,
+            marks: [],
+            data: {},
+        };
+    });
+}
+/**
+ * Creates a valid Contentful Rich Text document from a string, supporting basic markdown:
+ * - Paragraphs (split by double newline)
+ * - Bold text (**text**)
+ * - Headings (# H1, ## H2, etc.)
+ * - Bullet lists (- item or * item)
+ */
+export function createRichTextFromMarkdown(text) {
+    if (!text) {
+        return null;
+    }
+    const paragraphs = text.split(/\n\n+/);
+    const content = paragraphs.map((paragraphText) => {
+        // Check for bullet lists (lines starting with - or *)
+        const lines = paragraphText.split('\n');
+        const isUnorderedList = lines.every((line) => /^[-*]\s+/.test(line) || line.trim() === '');
+        if (isUnorderedList && lines.some((line) => /^[-*]\s+/.test(line))) {
+            const listItems = lines
+                .filter((line) => /^[-*]\s+/.test(line))
+                .map((line) => {
+                const itemText = line.replace(/^[-*]\s+/, '');
+                return {
+                    nodeType: BLOCKS.LIST_ITEM,
+                    data: {},
+                    content: [
+                        {
+                            nodeType: BLOCKS.PARAGRAPH,
+                            data: {},
+                            content: parseInlineMarks(itemText),
+                        },
+                    ],
+                };
+            });
+            return {
+                nodeType: BLOCKS.UL_LIST,
+                data: {},
+                content: listItems,
+            };
+        }
+        // Check for headings
+        let nodeType = BLOCKS.PARAGRAPH;
+        let cleanText = paragraphText;
+        const headingMatch = paragraphText.match(/^(#{1,6})\s+(.+)/);
+        if (headingMatch?.[1] && headingMatch[2]) {
+            const level = headingMatch[1].length;
+            cleanText = headingMatch[2];
+            switch (level) {
+                case 1:
+                    nodeType = BLOCKS.HEADING_1;
+                    break;
+                case 2:
+                    nodeType = BLOCKS.HEADING_2;
+                    break;
+                case 3:
+                    nodeType = BLOCKS.HEADING_3;
+                    break;
+                case 4:
+                    nodeType = BLOCKS.HEADING_4;
+                    break;
+                case 5:
+                    nodeType = BLOCKS.HEADING_5;
+                    break;
+                case 6:
+                    nodeType = BLOCKS.HEADING_6;
+                    break;
+            }
+        }
+        return {
+            nodeType,
+            data: {},
+            content: parseInlineMarks(cleanText),
+        };
+    });
+    const document = {
+        nodeType: BLOCKS.DOCUMENT,
+        data: {},
+        content: content,
+    };
+    return {
+        json: document,
+    };
+}
+/**
+ * Creates a valid Visual object
+ */
+export function createVisual(id, width, height) {
+    return {
+        type: 'Visual',
+        id: `visual-${id}`,
+        image: {
+            type: 'Picture',
+            id: `img-${id}`,
+            name: 'Sample Image',
+            mimeType: 'image/jpeg',
+            width,
+            height,
+            size: 1024,
+            src: `https://placehold.co/${width}x${height}`,
+            description: 'Sample placeholder image',
+        },
+    };
+}
+/**
+ * Creates a Responsive Visual object
+ */
+export function createResponsiveVisual(showVisual, showMobile, customSize, width = 800, height = 600) {
+    if (!showVisual) {
+        return undefined;
+    }
+    // Calculate mobile dimensions maintaining roughly the same aspect ratio, but max width 400
+    const aspectRatio = width / height;
+    const mobileWidth = 400;
+    const mobileHeight = Math.round(mobileWidth / aspectRatio);
+    return {
+        visual: createVisual('desktop', width, height),
+        mobileVisual: showMobile ? createVisual('mobile', mobileWidth, mobileHeight) : undefined,
+        hideVisual: false,
+        hideMobileVisual: !showMobile,
+        visualCustomSize: customSize > 0 ? customSize : null,
+    };
+}
+/**
+ * Creates sample links
+ */
+export function createLinks(count) {
+    return Array.from({ length: count }).map((_, i) => ({
+        type: 'Internal link',
+        internalType: 'Page',
+        id: `link-${i}`,
+        name: `Sample Link ${i + 1}`,
+        title: `Action ${i + 1}`,
+        text: `Action ${i + 1}`,
+        slug: 'sample-page',
+        href: '#',
+        variant: i === 0 ? 'Primary' : 'Secondary',
+    }));
+}
+export function parseShowcaseControls(searchParams, defaultState = DEFAULT_SHOWCASE_CONTROL_STATE) {
+    const params = new URLSearchParams();
+    Object.entries(searchParams).forEach(([key, value]) => {
+        if (typeof value === 'string') {
+            params.set(key, value);
+        }
+        else if (Array.isArray(value) && value.length > 0 && value[0] !== undefined) {
+            params.set(key, value[0]);
+        }
+    });
+    const getBool = (key) => {
+        const val = params.get(key);
+        return (val === null ? defaultState[key] : val === 'true');
+    };
+    const getStr = (key) => {
+        return (params.get(key) || defaultState[key]);
+    };
+    const getNum = (key) => {
+        const val = params.get(key);
+        return (val ? Number(val) : defaultState[key]);
+    };
+    return {
+        heading: getStr('heading'),
+        showHeading: getBool('showHeading'),
+        preHeading: getStr('preHeading'),
+        postHeading: getStr('postHeading'),
+        body: getStr('body'),
+        additionalCopy: getStr('additionalCopy'),
+        showVisual: getBool('showVisual'),
+        showMobileVisual: getBool('showMobileVisual'),
+        visualCustomSize: getNum('visualCustomSize'),
+        backgroundColour: getStr('backgroundColour'),
+        textColour: getStr('textColour'),
+        textSize: getStr('textSize'),
+        showLinks: getBool('showLinks'),
+        numberOfLinks: getNum('numberOfLinks'),
+        cmsLabel: getStr('cmsLabel'),
+    };
+}
+/**
+ * Creates a mock card item for a collection
+ */
+export function createMockCardContent(collectionType, index, controls, collectionCardFieldsMap, cardMockData) {
+    const cardId = `mock-card-${index}`;
+    const cardName = `Mock Card ${index + 1}`;
+    // Special handling for Media Carousel which expects Visuals
+    if (collectionType === 'Carousel: Media' || collectionType.includes('Media')) {
+        return createVisual(`media-${index}`, cardMockData?.visual?.width || 800, cardMockData?.visual?.height || 600);
+    }
+    // Extract visual dimensions from mock data if present
+    const visualDims = cardMockData?.visual;
+    const mockFields = cardMockData || {};
+    const getString = (key, defaultVal) => {
+        const val = mockFields[key];
+        return typeof val === 'string' ? val : defaultVal;
+    };
+    // Helper to get rich text from mock data (auto-converting markdown string)
+    const getRichText = (key, defaultVal) => {
+        const val = mockFields[key];
+        if (typeof val === 'string') {
+            return createRichTextFromMarkdown(val);
+        }
+        return createRichTextFromMarkdown(defaultVal);
+    };
+    const rawCard = {
+        id: cardId,
+        type: 'Component',
+        componentType: 'Generic',
+        name: cardName,
+        cmsLabel: cardName,
+        index,
+        isFirst: index === 0,
+        isLast: index === 3,
+        indexOfType: index,
+        preHeading: getString('preHeading', `Pre-heading ${index + 1}`),
+        heading: getString('heading', `Card Heading ${index + 1}`),
+        postHeading: getString('postHeading', `Post-heading ${index + 1}`),
+        body: getRichText('body', `This is the body content for mock card ${index + 1}.`),
+        additionalCopy: getRichText('additionalCopy', `Additional copy for card ${index + 1}.`),
+        // Spread other mock fields
+        ...Object.fromEntries(Object.entries(mockFields)
+            .filter(([key]) => !['visual', 'preHeading', 'heading', 'postHeading', 'body', 'additionalCopy'].includes(key))
+            .map(([key, val]) => {
+            // If it's a string, pass it as is (could be string field OR markdown for unknown rich text field)
+            // We can't automatically know if custom fields are rich text or not without schema.
+            return [key, val];
+        })),
+        visual: createResponsiveVisual(controls.showVisual, controls.showMobileVisual, controls.visualCustomSize, visualDims?.width, visualDims?.height),
+        icon: createVisual(`icon-${index}`, 64, 64),
+        backgroundColour: controls.backgroundColour,
+        textColour: controls.textColour,
+        textSize: controls.textSize,
+        links: createLinks(1),
+    };
+    const usedFields = collectionCardFieldsMap[collectionType];
+    if (!usedFields) {
+        return rawCard;
+    }
+    // Filter fields to only include those that are used or allowed
+    const filteredCard = Object.fromEntries(Object.entries(rawCard).filter(([key]) => {
+        if (['id', 'type', 'componentType', 'name', 'cmsLabel', 'index'].includes(key)) {
+            return true;
+        }
+        if (usedFields.has(key)) {
+            return true;
+        }
+        if (DEFAULT_ALLOWED_UNUSED.has(key)) {
+            return true;
+        }
+        return false;
+    }));
+    return filteredCard;
+}
+/**
+ * Generates a mock component or collection based on the control state
+ */
+export function createMockShowcaseData(type, mode, controls, componentFieldsMap, collectionFieldsMap, collectionCardFieldsMap, componentMockMap = {}, collectionMockMap = {}, collectionCardMockMap = {}) {
+    // Determine used fields first so we can conditionally create contents
+    const usedFields = mode === 'component' ? componentFieldsMap[type] : collectionFieldsMap[type];
+    const mockData = mode === 'component' ? componentMockMap[type] : collectionMockMap[type];
+    const mockFields = mockData || {};
+    const visualDims = mockData?.visual;
+    const commonFields = {
+        id: 'mock-id',
+        name: controls.cmsLabel,
+        cmsLabel: controls.cmsLabel,
+        index: 0,
+        isFirst: true,
+        isLast: true,
+        indexOfType: 0,
+        // Prefer control state (which is merged with mock data in ShowcaseRenderPage),
+        // but here we are using the controls directly.
+        preHeading: controls.preHeading || null,
+        heading: controls.showHeading ? controls.heading : null,
+        postHeading: controls.postHeading || null,
+        // Rich Text - created from the control string (which was populated from mock data)
+        body: controls.body ? createRichTextFromMarkdown(controls.body) : null,
+        additionalCopy: controls.additionalCopy
+            ? createRichTextFromMarkdown(controls.additionalCopy)
+            : null,
+        // Spread other mock fields that are NOT standard controls
+        // (Standard controls like heading/body are passed via `controls` object,
+        // so we don't need to spread them again, but we do need custom fields)
+        ...Object.fromEntries(Object.entries(mockFields)
+            .filter(([key]) => !['visual', 'preHeading', 'heading', 'postHeading', 'body', 'additionalCopy'].includes(key))
+            .map(([key, val]) => [key, val])),
+        // Visuals
+        visual: createResponsiveVisual(controls.showVisual, controls.showMobileVisual, controls.visualCustomSize, visualDims?.width, visualDims?.height),
+        // Theme
+        backgroundColour: controls.backgroundColour,
+        textColour: controls.textColour,
+        textSize: controls.textSize,
+        // Links
+        links: controls.showLinks ? createLinks(controls.numberOfLinks) : [],
+    };
+    // Only create contents if the collection explicitly uses them
+    const collectionUsesContents = usedFields?.has('contents') ?? true;
+    const rawData = mode === 'component'
+        ? {
+            ...commonFields,
+            type: 'Component',
+            componentType: type,
+        }
+        : {
+            ...commonFields,
+            type: 'Collection',
+            collectionType: type,
+            ...(collectionUsesContents && {
+                contents: Array.from({ length: 4 }).map((_, i) => createMockCardContent(type, i, controls, collectionCardFieldsMap, collectionCardMockMap[type])),
+            }),
+        };
+    // Filter fields to only include those that are used or allowed
+    const filteredData = Object.fromEntries(Object.entries(rawData).filter(([key]) => {
+        if (['type', 'componentType', 'collectionType'].includes(key)) {
+            return true;
+        }
+        if (usedFields?.has(key)) {
+            return true;
+        }
+        if (DEFAULT_ALLOWED_UNUSED.has(key)) {
+            return true;
+        }
+        return false;
+    }));
+    return filteredData;
+}
+//# sourceMappingURL=mockFactory.js.map

package/dist/showcase/mockFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockFactory.js","sourceRoot":"","sources":["../../src/showcase/mockFactory.ts"],"names":[],"mappings":"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"}

package/dist/showcase/types.d.ts

@@ -0,0 +1,20 @@
+export interface ShowcaseControlState<TColor = string, TGradient = string> {
+    heading: string;
+    showHeading: boolean;
+    preHeading: string;
+    postHeading: string;
+    body: string;
+    additionalCopy: string;
+    showVisual: boolean;
+    showMobileVisual: boolean;
+    visualCustomSize: number;
+    backgroundColour: TColor | TGradient;
+    textColour: TColor;
+    textSize: 'Large' | 'Medium' | 'Small';
+    showLinks: boolean;
+    numberOfLinks: number;
+    cmsLabel: string;
+}
+export type ShowcaseMode = 'component' | 'collection';
+export declare const DEFAULT_SHOWCASE_CONTROL_STATE: ShowcaseControlState;
+//# sourceMappingURL=types.d.ts.map

package/dist/showcase/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/showcase/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB,CAAC,MAAM,GAAG,MAAM,EAAE,SAAS,GAAG,MAAM;IAEvE,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IAGvB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,MAAM,CAAC;IAGzB,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAGvC,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IAGtB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,YAAY,GAAG,WAAW,GAAG,YAAY,CAAC;AAEtD,eAAO,MAAM,8BAA8B,EAAE,oBAgB5C,CAAC"}

package/dist/showcase/types.js

@@ -0,0 +1,18 @@
+export const DEFAULT_SHOWCASE_CONTROL_STATE = {
+    heading: 'Sample Heading',
+    showHeading: true,
+    preHeading: 'Pre-heading',
+    postHeading: '',
+    body: 'This is a sample body text to demonstrate the component layout and typography. You can edit this text in the controls.',
+    additionalCopy: '',
+    showVisual: true,
+    showMobileVisual: false,
+    visualCustomSize: 0,
+    backgroundColour: 'White',
+    textColour: 'Primary Blue',
+    textSize: 'Medium',
+    showLinks: true,
+    numberOfLinks: 1,
+    cmsLabel: 'Showcase Component',
+};
+//# sourceMappingURL=types.js.map

package/dist/showcase/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/showcase/types.ts"],"names":[],"mappings":"AA6BA,MAAM,CAAC,MAAM,8BAA8B,GAAyB;IAClE,OAAO,EAAE,gBAAgB;IACzB,WAAW,EAAE,IAAI;IACjB,UAAU,EAAE,aAAa;IACzB,WAAW,EAAE,EAAE;IACf,IAAI,EAAE,wHAAwH;IAC9H,cAAc,EAAE,EAAE;IAClB,UAAU,EAAE,IAAI;IAChB,gBAAgB,EAAE,KAAK;IACvB,gBAAgB,EAAE,CAAC;IACnB,gBAAgB,EAAE,OAAO;IACzB,UAAU,EAAE,cAAc;IAC1B,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,IAAI;IACf,aAAa,EAAE,CAAC;IAChB,QAAQ,EAAE,oBAAoB;CAC/B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@se-studio/core-ui",
-  "version": "1.0.46",
+  "version": "1.0.47",
   "description": "Shared React UI component library with Tailwind CSS v4 for SE Studio applications",
   "repository": {
     "type": "git",
@@ -18,7 +18,9 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "*.md",
+    "src/showcase/README.md"
   ],
   "keywords": [
     "react",
@@ -58,19 +60,20 @@
     "html-entities": "^2.6.0",
     "mustache": "4.2.0",
     "tailwind-merge": "^3.4.0",
-    "@se-studio/contentful-rest-api": "1.0.46",
-    "@se-studio/core-data-types": "1.0.46"
+    "@se-studio/contentful-rest-api": "1.0.47",
+    "@se-studio/core-data-types": "1.0.47"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.10",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
-    "@types/node": "^24.10.4",
+    "@types/node": "^22.19.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
     "jsdom": "^27.4.0",
     "next": "^15.5.9",
+    "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.0.16"
   },

package/src/showcase/README.md

@@ -0,0 +1,131 @@
+# CMS Showcase Infrastructure
+
+The CMS Showcase is a developer tool designed to test and preview CMS components and collections with mock data. This directory contains the shared infrastructure used by multiple projects to implement their own showcase pages.
+
+## Architecture
+
+The showcase is split into several key parts:
+
+- `ShowcasePage.tsx`: The main container component that handles the layout, top bar, and panels.
+- `ShowcaseRenderPage.tsx`: The iframe content component that renders the actual CMS component or collection with mock data.
+- `mockFactory.ts`: Logic for generating mock data based on component/collection types and control state.
+- `components/`: UI components for the showcase interface (Sidebar, Controls, TopBar, etc.).
+- `types.ts`: TypeScript definitions for the showcase state and control options.
+
+## Styling Conventions
+
+**IMPORTANT:** Because this code is shared across multiple projects, it **must not** rely on project-specific Tailwind configurations.
+
+All styling in this directory uses **hardcoded Tailwind arbitrary values** to ensure consistent rendering regardless of the host project's `tailwind.config.ts`.
+
+- **Colors:** Use hex codes, e.g., `text-[#374151]`, `bg-[#f9fafb]`, `border-[#e5e7eb]`.
+- **Spacing/Size:** Use pixel values, e.g., `text-[11px]`, `w-[300px]`, `p-[16px]`.
+- **Fonts:** Use standard weights, e.g., `font-[500]`, `font-[600]`.
+
+## Registration Pattern & `usedFields`
+
+The showcase uses the `usedFields` and `cardUsedFields` from the CMS registration system to determine which controls to show for a given component or collection. It also uses the `mock` and `cardMock` properties to generate realistic initial data.
+
+When you register a component using `defineComponent` or a collection using `defineCollection`, you provide a `Set<string>` of fields that the component actually uses. The `mockFactory` uses these sets to:
+1. Filter the generated mock data to only include relevant fields.
+2. Show or hide controls in the sidebar based on whether a field is "used".
+
+Example registration:
+
+```tsx
+export const HeroRegistration = defineComponent({
+  name: 'Hero', // Must match CMS componentType
+  renderer: Hero,
+  usedFields: new Set(['heading', 'preHeading', 'body', 'visual', 'links']),
+  mock: {
+    heading: 'Hero Heading',
+    body: 'Hero body text description.',
+    visual: { width: 1200, height: 600 },
+  },
+});
+```
+
+## Integration Guide
+
+To add a CMS Showcase to a project:
+
+1. Create a `page.tsx` for the main showcase interface:
+   ```tsx
+   import { ShowcasePage } from '@se-studio/core-ui';
+   import {
+     componentFieldsMap,
+     collectionFieldsMap,
+     projectRendererConfig,
+     // ... other props
+   } from '@/lib/cms';
+
+   export default async function Page({ searchParams }) {
+     return (
+       <ShowcasePage
+         searchParams={await searchParams}
+         rendererConfig={projectRendererConfig}
+         componentFieldsMap={componentFieldsMap}
+         collectionFieldsMap={collectionFieldsMap}
+         basePath="/cms-showcase"
+         // ... project-specific color options
+       />
+     );
+   }
+   ```
+
+2. Create a separate route for the preview iframe (e.g., `/cms-showcase/render/page.tsx`):
+   ```tsx
+   import { ShowcaseRenderPage } from '@se-studio/core-ui';
+   import {
+     componentFieldsMap,
+     collectionFieldsMap,
+     collectionCardFieldsMap,
+     componentMockMap,
+     collectionMockMap,
+     collectionCardMockMap,
+     projectRendererConfig
+   } from '@/lib/cms';
+
+   export default async function Page({ searchParams }) {
+     return (
+       <ShowcaseRenderPage
+         searchParams={await searchParams}
+         rendererConfig={projectRendererConfig}
+         componentFieldsMap={componentFieldsMap}
+         collectionFieldsMap={collectionFieldsMap}
+         collectionCardFieldsMap={collectionCardFieldsMap}
+         componentMockMap={componentMockMap}
+         collectionMockMap={collectionMockMap}
+         collectionCardMockMap={collectionCardMockMap}
+       />
+     );
+   }
+   ```
+
+3. Ensure your `cms.ts` exports all the maps built from registrations:
+   ```ts
+   // Build maps from registrations
+   const {
+     componentMap,
+     componentFieldsMap,
+     componentMockMap
+   } = buildComponentMaps(componentRegistrations);
+
+   const {
+     collectionMap,
+     collectionFieldsMap,
+     collectionCardFieldsMap,
+     collectionMockMap,
+     collectionCardMockMap
+   } = buildCollectionMaps(collectionRegistrations);
+
+   // Export maps for cms-showcase
+   export {
+     componentFieldsMap,
+     collectionFieldsMap,
+     collectionCardFieldsMap,
+     componentMockMap,
+     collectionMockMap,
+     collectionCardMockMap,
+   };
+   ```

package/dist/__tests__/setup.d.ts

@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom';
-//# sourceMappingURL=setup.d.ts.map

package/dist/__tests__/setup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/__tests__/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/__tests__/setup.js

@@ -1,2 +0,0 @@
-import '@testing-library/jest-dom';
-//# sourceMappingURL=setup.js.map

package/dist/__tests__/setup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"setup.js","sourceRoot":"","sources":["../../src/__tests__/setup.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}