@furystack/shades-common-components 11.0.0 → 12.0.0

package/esm/components/dialog.spec.js

@@ -0,0 +1,113 @@
+import { createComponent } from '@furystack/shades';
+import { describe, expect, it, vi } from 'vitest';
+import { ConfirmDialog, Dialog } from './dialog.js';
+describe('Dialog', () => {
+    it('should be defined', () => {
+        expect(Dialog).toBeDefined();
+        expect(typeof Dialog).toBe('function');
+    });
+    it('should create a dialog element', () => {
+        const el = (createComponent(Dialog, { isVisible: true }));
+        expect(el).toBeDefined();
+        expect(el.tagName?.toLowerCase()).toBe('shade-dialog');
+    });
+    it('should pass title prop', () => {
+        const el = (createComponent(Dialog, { isVisible: true, title: "Test Title" }));
+        expect(el.props.title).toBe('Test Title');
+    });
+    it('should pass onClose prop', () => {
+        const onClose = vi.fn();
+        const el = (createComponent(Dialog, { isVisible: true, onClose: onClose }));
+        expect(el.props.onClose).toBe(onClose);
+    });
+    it('should pass actions prop', () => {
+        const actions = createComponent("button", null, "OK");
+        const el = (createComponent(Dialog, { isVisible: true, actions: actions }));
+        expect(el.props.actions).toBeDefined();
+    });
+    it('should pass maxWidth prop', () => {
+        const el = (createComponent(Dialog, { isVisible: true, maxWidth: "800px" }));
+        expect(el.props.maxWidth).toBe('800px');
+    });
+    it('should pass fullWidth prop', () => {
+        const el = (createComponent(Dialog, { isVisible: true, fullWidth: true }));
+        expect(el.props.fullWidth).toBe(true);
+    });
+    it('should pass children as dialog content', () => {
+        const el = (createComponent(Dialog, { isVisible: true },
+            createComponent("p", null, "Dialog content")));
+        expect(el).toBeDefined();
+    });
+    it('should accept isVisible boolean', () => {
+        const el = (createComponent(Dialog, { isVisible: false }));
+        expect(el.props.isVisible).toBe(false);
+    });
+});
+describe('ConfirmDialog', () => {
+    it('should be defined', () => {
+        expect(ConfirmDialog).toBeDefined();
+        expect(typeof ConfirmDialog).toBe('function');
+    });
+    it('should create a confirm dialog element', () => {
+        const onConfirm = vi.fn();
+        const el = ConfirmDialog(true, {
+            title: 'Confirm',
+            message: 'Are you sure?',
+            onConfirm,
+        });
+        expect(el).toBeDefined();
+        expect(el.tagName?.toLowerCase()).toBe('shade-dialog');
+    });
+    it('should pass the title to the dialog', () => {
+        const onConfirm = vi.fn();
+        const el = ConfirmDialog(true, {
+            title: 'Delete Item',
+            message: 'Are you sure?',
+            onConfirm,
+        });
+        expect(el.props.title).toBe('Delete Item');
+    });
+    it('should render with default button texts', () => {
+        const onConfirm = vi.fn();
+        const el = ConfirmDialog(true, {
+            title: 'Confirm',
+            message: 'Are you sure?',
+            onConfirm,
+        });
+        expect(el.props.actions).toBeDefined();
+    });
+    it('should accept custom button texts', () => {
+        const onConfirm = vi.fn();
+        const el = ConfirmDialog(true, {
+            title: 'Confirm',
+            message: 'Are you sure?',
+            confirmText: 'Yes, delete',
+            cancelText: 'No, keep',
+            onConfirm,
+        });
+        expect(el).toBeDefined();
+    });
+    it('should accept JSX as message', () => {
+        const onConfirm = vi.fn();
+        const el = ConfirmDialog(true, {
+            title: 'Confirm',
+            message: (createComponent("div", null,
+                createComponent("strong", null, "Warning:"),
+                " This action cannot be undone.")),
+            onConfirm,
+        });
+        expect(el).toBeDefined();
+    });
+    it('should call onCancel when onClose is triggered', () => {
+        const onCancel = vi.fn();
+        const el = ConfirmDialog(true, {
+            title: 'Confirm',
+            message: 'Are you sure?',
+            onConfirm: vi.fn(),
+            onCancel,
+        });
+        el.props.onClose?.();
+        expect(onCancel).toHaveBeenCalledOnce();
+    });
+});
+//# sourceMappingURL=dialog.spec.js.map

package/esm/components/dialog.spec.js.map

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

package/esm/components/divider.d.ts

@@ -0,0 +1,22 @@
+import type { PartialElement } from '@furystack/shades';
+export type DividerProps = PartialElement<HTMLElement> & {
+    /** Orientation of the divider */
+    orientation?: 'horizontal' | 'vertical';
+    /** Variant controls whether the divider spans the full width/height or is inset */
+    variant?: 'full' | 'inset' | 'middle';
+    /** Alignment of text content within the divider. Only applies to horizontal dividers with children. */
+    textAlign?: 'left' | 'center' | 'right';
+};
+export declare const Divider: (props: Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+} & {
+    /** Orientation of the divider */
+    orientation?: "horizontal" | "vertical";
+    /** Variant controls whether the divider spans the full width/height or is inset */
+    variant?: "full" | "inset" | "middle";
+    /** Alignment of text content within the divider. Only applies to horizontal dividers with children. */
+    textAlign?: "left" | "center" | "right";
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=divider.d.ts.map

package/esm/components/divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../src/components/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAIvD,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACvD,iCAAiC;IACjC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;IACrC,uGAAuG;IACvG,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;CACxC,CAAA;AAED,eAAO,MAAM,OAAO;;;;;IARlB,iCAAiC;kBACnB,YAAY,GAAG,UAAU;IACvC,mFAAmF;cACzE,MAAM,GAAG,OAAO,GAAG,QAAQ;IACrC,uGAAuG;gBAC3F,MAAM,GAAG,QAAQ,GAAG,OAAO;sEAwIvC,CAAA"}

package/esm/components/divider.js

@@ -0,0 +1,113 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { cssVariableTheme } from '../services/css-variable-theme.js';
+export const Divider = Shade({
+    shadowDomName: 'shade-divider',
+    css: {
+        display: 'flex',
+        alignItems: 'center',
+        margin: '0',
+        border: 'none',
+        flexShrink: '0',
+        // ==========================================
+        // HORIZONTAL (default)
+        // ==========================================
+        '&:not([data-orientation="vertical"])': {
+            width: '100%',
+            flexDirection: 'row',
+        },
+        // Horizontal line (no children)
+        '&:not([data-orientation="vertical"]):not([data-has-children])': {
+            borderTop: `1px solid ${cssVariableTheme.divider}`,
+            margin: `${cssVariableTheme.spacing.md} 0`,
+        },
+        // Horizontal with children: lines on both sides
+        '&:not([data-orientation="vertical"])[data-has-children]': {
+            margin: `${cssVariableTheme.spacing.md} 0`,
+            gap: cssVariableTheme.spacing.md,
+        },
+        '&:not([data-orientation="vertical"])[data-has-children]::before, &:not([data-orientation="vertical"])[data-has-children]::after': {
+            content: '""',
+            flex: '1',
+            borderTop: `1px solid ${cssVariableTheme.divider}`,
+        },
+        // Text align left: shrink left line
+        '&[data-text-align="left"]::before': {
+            flex: '0 0 10%',
+        },
+        // Text align right: shrink right line
+        '&[data-text-align="right"]::after': {
+            flex: '0 0 10%',
+        },
+        // Divider text styling
+        '& .divider-text': {
+            fontFamily: cssVariableTheme.typography.fontFamily,
+            fontSize: cssVariableTheme.typography.fontSize.sm,
+            color: cssVariableTheme.text.secondary,
+            whiteSpace: 'nowrap',
+            lineHeight: '1',
+        },
+        // ==========================================
+        // VERTICAL
+        // ==========================================
+        '&[data-orientation="vertical"]': {
+            flexDirection: 'column',
+            alignSelf: 'stretch',
+            height: 'auto',
+            width: 'auto',
+        },
+        // Vertical line (no children)
+        '&[data-orientation="vertical"]:not([data-has-children])': {
+            borderLeft: `1px solid ${cssVariableTheme.divider}`,
+            margin: `0 ${cssVariableTheme.spacing.md}`,
+        },
+        // Vertical with children
+        '&[data-orientation="vertical"][data-has-children]': {
+            margin: `0 ${cssVariableTheme.spacing.md}`,
+            gap: cssVariableTheme.spacing.sm,
+        },
+        '&[data-orientation="vertical"][data-has-children]::before, &[data-orientation="vertical"][data-has-children]::after': {
+            content: '""',
+            flex: '1',
+            borderLeft: `1px solid ${cssVariableTheme.divider}`,
+        },
+        // ==========================================
+        // VARIANT: INSET (indented on the start side)
+        // ==========================================
+        '&:not([data-orientation="vertical"])[data-variant="inset"]': {
+            marginLeft: cssVariableTheme.spacing.xl,
+        },
+        '&[data-orientation="vertical"][data-variant="inset"]': {
+            marginTop: cssVariableTheme.spacing.xl,
+        },
+        // ==========================================
+        // VARIANT: MIDDLE (indented on both sides)
+        // ==========================================
+        '&:not([data-orientation="vertical"])[data-variant="middle"]': {
+            marginLeft: cssVariableTheme.spacing.lg,
+            marginRight: cssVariableTheme.spacing.lg,
+        },
+        '&[data-orientation="vertical"][data-variant="middle"]': {
+            marginTop: cssVariableTheme.spacing.lg,
+            marginBottom: cssVariableTheme.spacing.lg,
+        },
+    },
+    render: ({ props, children, useHostProps }) => {
+        const { orientation, variant, textAlign, style } = props;
+        const isVertical = orientation === 'vertical';
+        const hasChildren = children && (Array.isArray(children) ? children.length > 0 : true);
+        useHostProps({
+            role: 'separator',
+            'data-orientation': isVertical ? 'vertical' : undefined,
+            'aria-orientation': isVertical ? 'vertical' : undefined,
+            'data-variant': variant && variant !== 'full' ? variant : undefined,
+            'data-has-children': hasChildren ? '' : undefined,
+            'data-text-align': textAlign && textAlign !== 'center' ? textAlign : undefined,
+            ...(style ? { style: style } : {}),
+        });
+        if (hasChildren) {
+            return createComponent("span", { className: "divider-text" }, children);
+        }
+        return createComponent(createComponent, null);
+    },
+});
+//# sourceMappingURL=divider.js.map

package/esm/components/divider.js.map

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

package/esm/components/divider.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=divider.spec.d.ts.map

package/esm/components/divider.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.spec.d.ts","sourceRoot":"","sources":["../../src/components/divider.spec.tsx"],"names":[],"mappings":""}

package/esm/components/divider.spec.js

@@ -0,0 +1,136 @@
+import { createComponent, flushUpdates } from '@furystack/shades';
+import { describe, expect, it } from 'vitest';
+import { Divider } from './divider.js';
+describe('Divider', () => {
+    it('should be defined', () => {
+        expect(Divider).toBeDefined();
+        expect(typeof Divider).toBe('function');
+    });
+    it('should create a divider element with default props', () => {
+        const el = (createComponent(Divider, null));
+        expect(el).toBeDefined();
+        expect(el.tagName?.toLowerCase()).toBe('shade-divider');
+    });
+    it('should set role="separator" by default', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, null)));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        await flushUpdates();
+        expect(divider.getAttribute('role')).toBe('separator');
+    });
+    it('should render as horizontal by default (no data-orientation)', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, null)));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        await flushUpdates();
+        expect(divider.hasAttribute('data-orientation')).toBe(false);
+    });
+    it('should set data-orientation="vertical" when orientation is vertical', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, { orientation: "vertical" })));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        await flushUpdates();
+        expect(divider.getAttribute('data-orientation')).toBe('vertical');
+        expect(divider.getAttribute('aria-orientation')).toBe('vertical');
+    });
+    it('should set data-variant for inset variant', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, { variant: "inset" })));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        await flushUpdates();
+        expect(divider.getAttribute('data-variant')).toBe('inset');
+    });
+    it('should set data-variant for middle variant', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, { variant: "middle" })));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        await flushUpdates();
+        expect(divider.getAttribute('data-variant')).toBe('middle');
+    });
+    it('should not set data-variant for full variant', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, { variant: "full" })));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        await flushUpdates();
+        expect(divider.hasAttribute('data-variant')).toBe(false);
+    });
+    it('should not set data-variant when no variant is specified', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, null)));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        await flushUpdates();
+        expect(divider.hasAttribute('data-variant')).toBe(false);
+    });
+    it('should set data-has-children when children are provided', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, null, "Section")));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        await flushUpdates();
+        expect(divider.hasAttribute('data-has-children')).toBe(true);
+    });
+    it('should not set data-has-children when no children', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, null)));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        await flushUpdates();
+        expect(divider.hasAttribute('data-has-children')).toBe(false);
+    });
+    it('should render children inside a divider-text span', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, null, "OR")));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        await flushUpdates();
+        const textSpan = divider.querySelector('.divider-text');
+        expect(textSpan).not.toBeNull();
+    });
+    it('should set data-text-align for left alignment', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, { textAlign: "left" }, "Section")));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        await flushUpdates();
+        expect(divider.getAttribute('data-text-align')).toBe('left');
+    });
+    it('should set data-text-align for right alignment', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, { textAlign: "right" }, "Section")));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        await flushUpdates();
+        expect(divider.getAttribute('data-text-align')).toBe('right');
+    });
+    it('should not set data-text-align for center alignment (default)', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, { textAlign: "center" }, "Section")));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        await flushUpdates();
+        expect(divider.hasAttribute('data-text-align')).toBe(false);
+    });
+    it('should not set data-text-align when no textAlign is provided', async () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, null, "Section")));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        await flushUpdates();
+        expect(divider.hasAttribute('data-text-align')).toBe(false);
+    });
+    it('should accept and apply custom style', () => {
+        const el = (createComponent("div", null,
+            createComponent(Divider, { style: { borderColor: 'red' } })));
+        const divider = el.firstElementChild;
+        divider.updateComponent();
+        expect(divider.style.borderColor).toBe('red');
+    });
+});
+//# sourceMappingURL=divider.spec.js.map

package/esm/components/divider.spec.js.map

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

package/esm/components/drawer/drawer-toggle-button.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Props for the DrawerToggleButton component.
+ */
+export type DrawerToggleButtonProps = {
+    /** Which drawer to toggle */
+    position: 'left' | 'right';
+    /** Button aria-label for accessibility. Default: 'Toggle drawer' */
+    ariaLabel?: string;
+};
+/**
+ * Default toggle button for collapsible drawers.
+ *
+ * Provides a hamburger menu icon that toggles the drawer open/closed
+ * via LayoutService. The icon animates between menu and close states.
+ *
+ * @example
+ * ```tsx
+ * // In AppBar
+ * <AppBar>
+ *   <DrawerToggleButton position="left" />
+ *   <h1>My App</h1>
+ * </AppBar>
+ *
+ * // With custom aria-label
+ * <DrawerToggleButton
+ *   position="left"
+ *   ariaLabel="Toggle navigation menu"
+ * />
+ * ```
+ */
+export declare const DrawerToggleButton: (props: DrawerToggleButtonProps & Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=drawer-toggle-button.d.ts.map

package/esm/components/drawer/drawer-toggle-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-toggle-button.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer-toggle-button.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC,6BAA6B;IAC7B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,kBAAkB;;;;sEAwF7B,CAAA"}

package/esm/components/drawer/drawer-toggle-button.js

@@ -0,0 +1,94 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { cssVariableTheme } from '../../services/css-variable-theme.js';
+import { LayoutService } from '../../services/layout-service.js';
+/**
+ * Default toggle button for collapsible drawers.
+ *
+ * Provides a hamburger menu icon that toggles the drawer open/closed
+ * via LayoutService. The icon animates between menu and close states.
+ *
+ * @example
+ * ```tsx
+ * // In AppBar
+ * <AppBar>
+ *   <DrawerToggleButton position="left" />
+ *   <h1>My App</h1>
+ * </AppBar>
+ *
+ * // With custom aria-label
+ * <DrawerToggleButton
+ *   position="left"
+ *   ariaLabel="Toggle navigation menu"
+ * />
+ * ```
+ */
+export const DrawerToggleButton = Shade({
+    shadowDomName: 'shade-drawer-toggle-button',
+    css: {
+        display: 'inline-block',
+        '& button': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '40px',
+            height: '40px',
+            padding: '0',
+            margin: '0',
+            border: 'none',
+            borderRadius: '50%',
+            background: 'transparent',
+            cursor: 'pointer',
+            transition: `background-color ${cssVariableTheme.transitions.duration.normal} ease`,
+            color: cssVariableTheme.text.primary,
+        },
+        '& button:hover': {
+            backgroundColor: cssVariableTheme.button.hover,
+        },
+        '& button:focus-visible': {
+            outline: `2px solid ${cssVariableTheme.palette.primary.main}`,
+            outlineOffset: '2px',
+        },
+        // Hamburger icon container
+        '& .hamburger': {
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            width: '20px',
+            height: '14px',
+        },
+        '& .hamburger span': {
+            display: 'block',
+            width: '100%',
+            height: '2px',
+            backgroundColor: 'currentColor',
+            borderRadius: '1px',
+            transition: `transform ${cssVariableTheme.transitions.duration.slow} ease, opacity ${cssVariableTheme.transitions.duration.slow} ease`,
+        },
+        // Open state - transform to X
+        '& .hamburger.open span:nth-child(1)': {
+            transform: 'translateY(6px) rotate(45deg)',
+        },
+        '& .hamburger.open span:nth-child(2)': {
+            opacity: '0',
+        },
+        '& .hamburger.open span:nth-child(3)': {
+            transform: 'translateY(-6px) rotate(-45deg)',
+        },
+    },
+    render: ({ props, injector, useObservable }) => {
+        const layoutService = injector.getInstance(LayoutService);
+        const { position, ariaLabel = 'Toggle drawer' } = props;
+        // Subscribe to drawer state to update icon
+        const [drawerState] = useObservable('drawerState', layoutService.drawerState);
+        const isOpen = drawerState[position]?.open ?? false;
+        const handleClick = () => {
+            layoutService.toggleDrawer(position);
+        };
+        return (createComponent("button", { type: "button", onclick: handleClick, "aria-label": ariaLabel, "aria-expanded": isOpen ? 'true' : 'false', "data-testid": `drawer-toggle-${position}` },
+            createComponent("div", { className: `hamburger ${isOpen ? 'open' : ''}` },
+                createComponent("span", null),
+                createComponent("span", null),
+                createComponent("span", null))));
+    },
+});
+//# sourceMappingURL=drawer-toggle-button.js.map

package/esm/components/drawer/drawer-toggle-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-toggle-button.js","sourceRoot":"","sources":["../../../src/components/drawer/drawer-toggle-button.tsx"],"names":[],"mappings":"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"}

package/esm/components/drawer/drawer-toggle-button.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=drawer-toggle-button.spec.d.ts.map

package/esm/components/drawer/drawer-toggle-button.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-toggle-button.spec.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer-toggle-button.spec.tsx"],"names":[],"mappings":""}