cherry-styled-components 0.2.0 → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Luan Gjokaj
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,33 +1,43 @@
 # Cherry React Library
 
 [![npm version](https://img.shields.io/npm/v/cherry-styled-components.svg?style=flat)](https://www.npmjs.com/package/cherry-styled-components)
-
-## Introduction
+[![license](https://img.shields.io/npm/l/cherry-styled-components.svg?style=flat)](https://github.com/cherry-design-system/styled-components/blob/main/LICENSE)
 
 Cherry Design System is a versatile foundation for projects. It offers a white label base, ready-to-use Figma designs, open-source React components, built-in support for theming and dark mode. Explore the [docs](https://cherry.al/) to create delightful user interfaces.
 
----
-
-# Installation
+## Installation
 
-This project requires Node.js v20+ installed.
+Install the package along with its peer dependencies:
 
 ```bash
-npm install
+npm install cherry-styled-components react react-dom styled-components
 ```
 
-To run the development environment, use the following command:
+## Quick Start
 
-```bash
-npm run dev
-```
+Wrap your app in `CherryThemeProvider` and start using components. The provider injects the global styles and, when you pass `themeDark`, handles dark mode automatically:
 
-To build the library for production, use the following command:
+```tsx
+import {
+  Button,
+  CherryThemeProvider,
+  theme,
+  themeDark,
+} from "cherry-styled-components";
 
-```bash
-npm run build
+export default function App() {
+  return (
+    <CherryThemeProvider theme={theme} themeDark={themeDark}>
+      <Button $variant="primary">Hello Cherry</Button>
+    </CherryThemeProvider>
+  );
+}
 ```
 
+The built-in `theme` and `themeDark` objects are a starting point; both are plain objects you can extend or replace to white-label the system. Styled props use a `$` prefix (`$variant`, `$size`, `$fullWidth`) so they never leak into the DOM.
+
+The library ships form components (Button, Input, Select, Textarea, Toggle, Range, Password, Checkbox, Radio, Dropzone, AvatarDropzone), layout primitives (Container, Grid, Col, Flex, Box, MaxWidth, Space), and interactive components (Accordion, Modal, Toast, ThemeToggle, Icon, IconButton). See the [component docs](https://cherry.al/) for the full API.
+
 ## Theming
 
 Cherry ships two theme providers:
@@ -97,11 +107,22 @@ if (!req.cookies.get("theme")?.value && hint) {
 
 In a client-only app (like this repo's demo, see `src/main.tsx`), resolve the initial theme synchronously from the cookie, `localStorage`, or `matchMedia` before rendering and pass it as `$initial`.
 
+## Development
+
+To work on the library itself, clone the repo and use pnpm. Node.js v20+ is required for the dev tooling.
+
+```bash
+pnpm install       # Install dependencies
+pnpm run dev       # Start the Vite dev server (demo app + previews)
+pnpm run build     # Build the library to dist/
+pnpm run format    # Format with Prettier
+```
+
 ## Component Previews
 
 The dev server ships with a preview route that renders a single component in isolation, centered on the page. It is meant for visual inspection and for taking automated screenshots (e.g. with Playwright).
 
-With `npm run dev` running:
+With `pnpm run dev` running:
 
 - `/preview` shows an index page linking to every available preview.
 - `/preview/<name>` renders one component centered inside a wrapper with the stable selector `#preview-box`.
@@ -150,6 +171,10 @@ Append `?theme=dark` or `?theme=light` to any preview URL to force a theme:
 
 The value is persisted to the `theme` cookie and `localStorage`, exactly like a `ThemeToggle` click, and the demo resolves it synchronously before the first render. It persists for subsequent navigations in the same browser context, so always pass the parameter explicitly when comparing themes to avoid leakage from a previous visit.
 
+### Custom theme colors
+
+Append `?colors=<URI-encoded JSON>` to any preview URL to override theme colors. The JSON has the shape `{ "default": { "primary": "#BE123C", ... }, "dark": { ... } }` where `default` patches the light theme's colors and `dark` patches the dark theme's. Unknown keys and values that are not valid CSS colors are ignored, and the parameter only applies to preview routes.
+
 ### Taking screenshots
 
 `scripts/screenshot-previews.cjs` captures every preview in both themes and writes the framed images used by the documentation site. With the dev server running in another terminal:
@@ -178,6 +203,13 @@ The script drives your installed Chrome through `playwright-core` (no browser do
 | `PREVIEW_URL` | `http://localhost:5173/preview`                                |
 | `OUT_DIR`     | `../cherry-documentation/public/components`                    |
 | `CHROME_PATH` | `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome` |
+| `THEME_JSON`  | none (path to a JSON file with `default`/`dark` color maps)    |
+
+`THEME_JSON` points at a file like the documentation site's `theme.json`; its colors are passed to the preview via `?colors=` and also drive the baked-in border color (`grayLight`). Example:
+
+```bash
+THEME_JSON=../cherry-documentation/theme.json pnpm run screenshots
+```
 
 For one-off manual screenshots, target the `#preview-box` selector:
 
@@ -195,3 +227,7 @@ For help, discussion about best practices, or any other conversation that would
 For casual chit-chat with others using Cherry:
 
 [Join the Discord Server](https://discord.gg/6JvcWU5bke)
+
+## License
+
+[MIT](https://github.com/cherry-design-system/styled-components/blob/main/LICENSE)

package/dist/index.js

@@ -28,6 +28,6 @@ import { Select, StyledIconWrapper } from "./select.js";
 import { Space } from "./space.js";
 import { Textarea } from "./textarea.js";
 import { ThemeToggle } from "./theme-toggle.js";
-import { StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications } from "./toast.js";
+import { StyledNotificationItem, StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications } from "./toast.js";
 import { Toggle } from "./toggle.js";
-export { Accordion, AvatarDropzone, Box, Button, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconArrow, IconButton, IconCalendar, IconCheck, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotifications, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, breakpoints, buttonStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, errorInteractiveStyles, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, resolveTheme, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, useOnClickOutside, useToastNotifications };
+export { Accordion, AvatarDropzone, Box, Button, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconArrow, IconButton, IconCalendar, IconCheck, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, breakpoints, buttonStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, errorInteractiveStyles, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, resolveTheme, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, useOnClickOutside, useToastNotifications };

package/dist/toast.d.ts

@@ -1,23 +1,26 @@
 import { default as React } from 'react';
 import { Theme } from './utils';
 export type ToastColor = "info" | "success" | "error" | "warning";
+export type ToastAlign = "center" | "left" | "right";
 export interface ToastConfig {
     color?: ToastColor;
     autoHide?: number;
 }
 type Toast = {
+    id: number;
     text: string;
-    status: "hidden" | "visible";
     color: ToastColor;
     autoHide: number;
 };
 declare const ToastNotificationsContext: React.Context<{
     notifications: Toast[];
     addNotification: (text: string, config?: ToastConfig) => void;
+    removeNotification: (id: number) => void;
 }>;
 declare function useToastNotifications(): {
     notifications: Toast[];
     addNotification: (text: string, config?: ToastConfig) => void;
+    removeNotification: (id: number) => void;
 };
 interface ToastNotificationsProviderProps {
     children: React.ReactNode;
@@ -25,15 +28,30 @@ interface ToastNotificationsProviderProps {
 declare function ToastNotificationsProvider({ children, }: ToastNotificationsProviderProps): React.JSX.Element;
 export declare const StyledNotifications: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "theme" | "$align" | "$bottom"> & {
     theme: Theme;
-    $align?: "center" | "left" | "right";
+    $align?: ToastAlign;
     $bottom?: boolean;
 }, never> & Partial<Pick<import('styled-components').FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "theme" | "$align" | "$bottom"> & {
     theme: Theme;
-    $align?: "center" | "left" | "right";
+    $align?: ToastAlign;
+    $bottom?: boolean;
+}, never>>> & string;
+export declare const StyledNotificationItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "theme" | "$align" | "$bottom" | "$color" | "$visible" | "$static"> & {
+    theme: Theme;
+    $color: ToastColor;
+    $visible: boolean;
+    $static: boolean;
+    $align?: ToastAlign;
+    $bottom?: boolean;
+}, never> & Partial<Pick<import('styled-components').FastOmit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "theme" | "$align" | "$bottom" | "$color" | "$visible" | "$static"> & {
+    theme: Theme;
+    $color: ToastColor;
+    $visible: boolean;
+    $static: boolean;
+    $align?: ToastAlign;
     $bottom?: boolean;
 }, never>>> & string;
 export interface ToastNotificationsProps {
-    $align?: "center" | "left" | "right";
+    $align?: ToastAlign;
     $bottom?: boolean;
 }
 declare function ToastNotifications({ $align, $bottom, }: ToastNotificationsProps): React.JSX.Element;

package/dist/toast.js

@@ -3,7 +3,7 @@
 import { Icon } from "./icon.js";
 import { IconButton } from "./icon-button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import styled, { css } from "styled-components";
 //#region src/lib/toast.tsx
 var statusIcons = {
@@ -12,48 +12,62 @@ var statusIcons = {
 	warning: "TriangleAlert",
 	info: "Info"
 };
+var EXIT_DURATION_MS = 400;
 var ToastNotificationsContext = /*#__PURE__*/ createContext({
 	notifications: [],
-	addNotification: () => null
+	addNotification: () => null,
+	removeNotification: () => null
 });
 function useToastNotifications() {
 	return useContext(ToastNotificationsContext);
 }
 function ToastNotificationsProvider({ children }) {
 	const [notifications, setNotifications] = useState([]);
-	const addNotification = (text, config) => {
+	const nextId = useRef(0);
+	const addNotification = useCallback((text, config) => {
+		const id = nextId.current++;
 		setNotifications((prev) => [...prev, {
+			id,
 			text,
-			status: "hidden",
 			color: config?.color || "info",
 			autoHide: config?.autoHide || 0
 		}]);
-		setTimeout(() => {
-			setNotifications((prev) => prev.map((toast) => toast.status === "hidden" ? {
-				...toast,
-				status: "visible"
-			} : toast));
-		}, 50);
-	};
+	}, []);
+	const removeNotification = useCallback((id) => {
+		setNotifications((prev) => prev.filter((toast) => toast.id !== id));
+	}, []);
+	const value = useMemo(() => ({
+		notifications,
+		addNotification,
+		removeNotification
+	}), [
+		notifications,
+		addNotification,
+		removeNotification
+	]);
 	return /*#__PURE__*/ jsx(ToastNotificationsContext.Provider, {
-		value: {
-			notifications,
-			addNotification
-		},
+		value,
 		children
 	});
 }
 var StyledNotifications = styled.ul.withConfig({
 	displayName: "toast__StyledNotifications",
-	componentId: "sc-1dfe4a8-0"
+	componentId: "sc-1f36b7f7-0"
 })([
 	`position:fixed;z-index:99999;margin:0;padding:0;list-style:none;`,
 	` `,
 	` `,
 	` `,
-	` & li{justify-content:center;display:flex;margin:0;opacity:0;pointer-events:none;transform:translateY(-20px);padding:0;max-height:0;transition:opacity 0.2s ease,transform 0.2s ease,max-height 0.25s ease 0.15s,margin 0.25s ease 0.15s;`,
+	``
+], ({ $align }) => $align === "center" && css([`left:50%;transform:translateX(-50%);`]), ({ $align }) => $align === "right" && css([`right:20px;`]), ({ $align }) => $align === "left" && css([`left:20px;`]), ({ $bottom }) => $bottom ? css([`bottom:20px;`]) : css([`top:20px;`]));
+var StyledNotificationItem = styled.li.withConfig({
+	displayName: "toast__StyledNotificationItem",
+	componentId: "sc-1f36b7f7-1"
+})([
+	`display:grid;grid-template-rows:0fr;justify-items:center;margin:0;padding:0;opacity:0;pointer-events:none;transform:translateY(`,
+	`);transition:opacity 0.2s ease,transform 0.2s ease,grid-template-rows 0.25s ease 0.15s,margin 0.25s ease 0.15s;`,
 	` `,
-	` & .item{display:inline-flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 40px));padding:10px 10px 10px 18px;margin:0;border-radius:`,
+	` & .item-wrapper{min-height:0;}& .item{display:inline-flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 40px));padding:10px 10px 10px 18px;margin:0;border-radius:`,
 	`;background:`,
 	`;border:solid 1px `,
 	`;box-shadow:`,
@@ -61,55 +75,80 @@ var StyledNotifications = styled.ul.withConfig({
 	`;font-size:`,
 	`;line-height:`,
 	`;font-weight:500;& .status-icon{display:inline-flex;flex-shrink:0;& svg{width:20px;height:20px;color:`,
-	`;}}& .message{flex:1;min-width:0;line-height:1.5;overflow-wrap:anywhere;}& .close-button{flex-shrink:0;}}&.error{& .item .status-icon svg{color:`,
-	`;}}&.success{& .item .status-icon svg{color:`,
-	`;}}&.warning{& .item .status-icon svg{color:`,
-	`;}}&.info{& .item .status-icon svg{color:`,
-	`;}}&.visible{opacity:1;pointer-events:all;transform:translateY(0);max-height:320px;transition:max-height 0.25s ease,margin 0.25s ease,opacity 0.2s ease 0.15s,transform 0.2s ease 0.15s;`,
-	`}&.static{position:relative;z-index:10;}}`
-], ({ $align }) => $align === "center" && css([`left:50%;transform:translateX(-50%);`]), ({ $align }) => $align === "right" && css([`right:20px;`]), ({ $align }) => $align === "left" && css([`left:20px;`]), ({ $bottom }) => $bottom ? css([`bottom:20px;`]) : css([`top:20px;`]), ({ $align }) => $align === "right" && css([`justify-content:flex-end;`]), ({ $align }) => $align === "left" && css([`justify-content:flex-start;`]), ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.isDark ? theme.shadows.sm : theme.shadows.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg, ({ theme }) => theme.colors.info, ({ theme }) => theme.colors.error, ({ theme }) => theme.colors.success, ({ theme }) => theme.colors.warning, ({ theme }) => theme.colors.info, ({ $bottom }) => $bottom ? css([`margin-top:10px;`]) : css([`margin-bottom:10px;`]));
+	`;}}& .message{flex:1;min-width:0;line-height:1.5;overflow-wrap:anywhere;}& .close-button{flex-shrink:0;}}`,
+	` `,
+	``
+], ({ $bottom }) => $bottom ? "20px" : "-20px", ({ $align }) => $align === "right" && css([`justify-items:end;`]), ({ $align }) => $align === "left" && css([`justify-items:start;`]), ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.isDark ? theme.shadows.sm : theme.shadows.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg, ({ theme, $color }) => theme.colors[$color], ({ $visible, $bottom }) => $visible && css([`opacity:1;pointer-events:auto;transform:translateY(0);grid-template-rows:1fr;transition:grid-template-rows 0.25s ease,margin 0.25s ease,opacity 0.2s ease 0.15s,transform 0.2s ease 0.15s;`, ``], $bottom ? css([`margin-top:10px;`]) : css([`margin-bottom:10px;`])), ({ $static }) => $static && css([`position:relative;z-index:10;`]));
 function ToastNotifications({ $align = "center", $bottom }) {
 	const { notifications } = useToastNotifications();
 	return /*#__PURE__*/ jsx(StyledNotifications, {
 		$align,
 		$bottom,
-		children: notifications.map((notification, i) => /*#__PURE__*/ jsx(NotificationItem, { ...notification }, i))
+		"aria-live": "polite",
+		children: notifications.map((notification) => /*#__PURE__*/ jsx(NotificationItem, {
+			notification,
+			$align,
+			$bottom
+		}, notification.id))
 	});
 }
-function NotificationItem(notification) {
-	const [visible, setVisible] = useState(true);
+function NotificationItem({ notification, $align, $bottom }) {
+	const { removeNotification } = useToastNotifications();
+	const [phase, setPhase] = useState("entering");
+	useEffect(() => {
+		let inner;
+		const outer = requestAnimationFrame(() => {
+			inner = requestAnimationFrame(() => setPhase((prev) => prev === "entering" ? "visible" : prev));
+		});
+		return () => {
+			cancelAnimationFrame(outer);
+			cancelAnimationFrame(inner);
+		};
+	}, []);
 	useEffect(() => {
 		if (!notification.autoHide) return;
-		const timeout = setTimeout(() => setVisible(false), notification.autoHide);
+		const timeout = setTimeout(() => setPhase("exiting"), notification.autoHide);
 		return () => clearTimeout(timeout);
 	}, [notification.autoHide]);
-	return /*#__PURE__*/ jsx("li", {
-		className: [
-			visible ? notification.status : "hidden",
-			notification.color,
-			!notification.autoHide && "static"
-		].filter(Boolean).join(" "),
-		children: /*#__PURE__*/ jsxs("span", {
-			className: "item",
-			children: [
-				/*#__PURE__*/ jsx("span", {
-					className: "status-icon",
-					children: /*#__PURE__*/ jsx(Icon, { name: statusIcons[notification.color] || statusIcons.info })
-				}),
-				/*#__PURE__*/ jsx("span", {
-					className: "message",
-					children: notification.text
-				}),
-				/*#__PURE__*/ jsx(IconButton, {
-					$size: "small",
-					className: "close-button",
-					"aria-label": "Dismiss notification",
-					onClick: () => setVisible(false),
-					children: /*#__PURE__*/ jsx(Icon, { name: "X" })
-				})
-			]
+	useEffect(() => {
+		if (phase !== "exiting") return;
+		const timeout = setTimeout(() => removeNotification(notification.id), EXIT_DURATION_MS);
+		return () => clearTimeout(timeout);
+	}, [
+		phase,
+		notification.id,
+		removeNotification
+	]);
+	return /*#__PURE__*/ jsx(StyledNotificationItem, {
+		$visible: phase === "visible",
+		$color: notification.color,
+		$static: !notification.autoHide,
+		$align,
+		$bottom,
+		children: /*#__PURE__*/ jsx("span", {
+			className: "item-wrapper",
+			children: /*#__PURE__*/ jsxs("span", {
+				className: "item",
+				children: [
+					/*#__PURE__*/ jsx("span", {
+						className: "status-icon",
+						children: /*#__PURE__*/ jsx(Icon, { name: statusIcons[notification.color] || statusIcons.info })
+					}),
+					/*#__PURE__*/ jsx("span", {
+						className: "message",
+						children: notification.text
+					}),
+					/*#__PURE__*/ jsx(IconButton, {
+						$size: "small",
+						className: "close-button",
+						"aria-label": "Dismiss notification",
+						onClick: () => setPhase("exiting"),
+						children: /*#__PURE__*/ jsx(Icon, { name: "X" })
+					})
+				]
+			})
 		})
 	});
 }
 //#endregion
-export { StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications };
+export { StyledNotificationItem, StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",