decentraland-ui2 0.0.2-9020206964.commit-054087b → 0.0.3-9857431499.commit-4197294

package/dist/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ModalProps } from "./Modal.types";
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta;
+type Story = StoryObj<ModalProps>;
+declare const Simple: {
+    args: {
+        open: boolean;
+        title: string;
+        children: JSX.Element;
+        actions: JSX.Element;
+    };
+};
+declare const Tiny: Story;
+declare const Small: Story;
+declare const CustomHeader: Story;
+declare const Form: Story;
+declare const Closable: Story;
+declare const Navigation: Story;
+export default meta;
+export { Simple, Tiny, Small, CustomHeader, Form, Closable, Navigation };

package/dist/components/Modal/Modal.stories.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, Checkbox, FormControlLabel, Modal, TextField, Typography, } from "@mui/material";
+import { ModalContent } from "./Modal";
+import { Mana } from "../Mana";
+const meta = {
+    component: Modal,
+    title: "Decentraland UI/Modal",
+    tags: ["autodocs"],
+    argTypes: {
+        size: {
+            description: "Size of the Modal",
+            control: "radio",
+            options: ["tiny", "small", "medium", "large"],
+        },
+    },
+    render: (args) => (_jsx(Box, { sx: { height: "400px" }, children: _jsx(ModalContent, { ...args, children: args.children }) })),
+};
+const Simple = {
+    args: {
+        open: false,
+        title: "Are you sure?",
+        children: (_jsx(_Fragment, { children: _jsxs(Typography, { variant: "body1", children: ["You are about to sell your soul for", " ", _jsx(Mana, { inline: true, children: (2500).toLocaleString() }), "."] }) })),
+        actions: (_jsxs(_Fragment, { children: [_jsx(Button, { color: "primary", variant: "contained", children: "Proceed" }), _jsx(Button, { variant: "outlined", children: "Cancel" })] })),
+    },
+};
+const Tiny = {
+    args: {
+        open: false,
+        size: "tiny",
+        title: "Are you sure?",
+        children: (_jsxs(_Fragment, { children: ["You are about to sell your soul for", " ", _jsx(Mana, { inline: true, children: (2500).toLocaleString() }), "."] })),
+        actions: (_jsxs(_Fragment, { children: [_jsx(Button, { color: "primary", variant: "contained", children: "Proceed" }), _jsx(Button, { variant: "outlined", children: "Cancel" })] })),
+    },
+};
+const Small = {
+    args: {
+        open: false,
+        size: "small",
+        title: "Are you sure?",
+        children: (_jsxs(_Fragment, { children: ["You are about to sell your soul for", " ", _jsx(Mana, { inline: true, children: (2500).toLocaleString() }), "."] })),
+        actions: (_jsxs(_Fragment, { children: [_jsx(Button, { color: "primary", variant: "contained", children: "Proceed" }), _jsx(Button, { variant: "outlined", children: "Cancel" })] })),
+    },
+};
+const CustomHeader = {
+    name: "Custom Header",
+    args: {
+        open: false,
+        header: (_jsxs(Box, { sx: {
+                height: "200px",
+                backgroundColor: "#123",
+                color: "#fff",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+            }, children: [_jsx(Typography, { variant: "h4", children: "Give us your email!" }), _jsx("p", { children: "We need to feed our marketing gnomes" })] })),
+        children: (_jsxs(_Fragment, { children: ["You are about to sell your soul for", " ", _jsx(Mana, { inline: true, children: (2500).toLocaleString() }), "."] })),
+        actions: (_jsxs(_Fragment, { children: [_jsx(Button, { color: "primary", variant: "contained", children: "Proceed" }), _jsx(Button, { variant: "outlined", children: "Cancel" })] })),
+    },
+};
+const Form = {
+    args: {
+        open: false,
+        title: "Are you sure?",
+        children: (_jsx(_Fragment, { children: _jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: "16px" }, children: [_jsx(TextField, { label: "Name", variant: "standard", placeholder: "Luis XVII" }), _jsx(TextField, { label: "Email", variant: "standard", placeholder: "luigi@mail.com" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { defaultChecked: true }), label: "Check me" })] }) })),
+        actions: (_jsxs(_Fragment, { children: [_jsx(Button, { color: "primary", variant: "contained", children: "Proceed" }), _jsx(Button, { variant: "outlined", children: "Cancel" })] })),
+    },
+};
+const Closable = {
+    args: {
+        open: false,
+        title: "Are you sure?",
+        onClose: () => alert("Close!"),
+        children: (_jsx(_Fragment, { children: _jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: "16px" }, children: [_jsx(TextField, { label: "Name", variant: "standard", placeholder: "Luis XVII" }), _jsx(TextField, { label: "Email", variant: "standard", placeholder: "luigi@mail.com" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { defaultChecked: true }), label: "Check me" })] }) })),
+        actions: (_jsxs(_Fragment, { children: [_jsx(Button, { color: "primary", variant: "contained", children: "Proceed" }), _jsx(Button, { variant: "outlined", children: "Cancel" })] })),
+    },
+};
+const Navigation = {
+    args: {
+        open: false,
+        title: "Are you sure?",
+        onClose: () => alert("Close!"),
+        onBack: () => alert("Back!"),
+        children: (_jsx(_Fragment, { children: _jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: "16px" }, children: [_jsx(TextField, { label: "Name", variant: "standard", placeholder: "Luis XVII" }), _jsx(TextField, { label: "Email", variant: "standard", placeholder: "luigi@mail.com" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { defaultChecked: true }), label: "Check me" })] }) })),
+        actions: (_jsxs(_Fragment, { children: [_jsx(Button, { color: "primary", variant: "contained", children: "Proceed" }), _jsx(Button, { variant: "outlined", children: "Cancel" })] })),
+    },
+};
+// eslint-disable-next-line import/no-default-export
+export default meta;
+export { Simple, Tiny, Small, CustomHeader, Form, Closable, Navigation };
+//# sourceMappingURL=Modal.stories.js.map

package/dist/components/Modal/Modal.stories.js.map

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

package/dist/components/Modal/Modal.styled.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { ModalProps } from "./Modal.types";
+declare const ModalContainer: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "className" | "children" | "style" | "square" | "classes" | "sx" | "variant" | "elevation"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Pick<ModalProps, "size">, {}, {}>;
+declare const ModalTitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+declare const ModalContentContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+declare const ModalActionsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export { ModalContainer, ModalTitleContainer, ModalContentContainer, ModalActionsContainer, };

package/dist/components/Modal/Modal.styled.js

@@ -0,0 +1,51 @@
+import styled from "@emotion/styled";
+import { Box as BoxMui, Paper as PaperMui } from "@mui/material";
+const ModalContainer = styled(PaperMui)((props) => {
+    let size = "900px";
+    if (props.size === "tiny") {
+        size = "540px";
+    }
+    else if (props.size === "small") {
+        size = "720px";
+    }
+    return {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: size,
+        borderRadius: "12px",
+        overflow: "hidden",
+        "@media (max-width: 700px)": {
+            minWidth: "100vw",
+            maxWidth: "100vw",
+            minHeight: "100vh",
+            borderRadius: "0px",
+            margin: "0",
+            padding: "0",
+            top: "0",
+            left: "0",
+            transform: "translate(0, 0)",
+        },
+    };
+});
+const ModalTitleContainer = styled(BoxMui)({
+    display: "flex",
+    justifyContent: "space-between",
+    padding: "24px",
+});
+const ModalContentContainer = styled(BoxMui)({
+    padding: "24px",
+});
+const ModalActionsContainer = styled(BoxMui)({
+    display: "flex",
+    padding: "24px",
+    "& > *": {
+        flex: 1,
+    },
+    "& > *.MuiButtonBase-root:not(:last-child)": {
+        marginRight: "16px",
+    },
+});
+export { ModalContainer, ModalTitleContainer, ModalContentContainer, ModalActionsContainer, };
+//# sourceMappingURL=Modal.styled.js.map

package/dist/components/Modal/Modal.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styled.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,GAAG,IAAI,MAAM,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGhE,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,KAA+B,EAAE,EAAE;IAC1E,IAAI,IAAI,GAAG,OAAO,CAAA;IAClB,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE;QACzB,IAAI,GAAG,OAAO,CAAA;KACf;SAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;QACjC,IAAI,GAAG,OAAO,CAAA;KACf;IAED,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,uBAAuB;QAClC,KAAK,EAAE,IAAI;QACX,YAAY,EAAE,MAAM;QACpB,QAAQ,EAAE,QAAQ;QAClB,2BAA2B,EAAE;YAC3B,QAAQ,EAAE,OAAO;YACjB,QAAQ,EAAE,OAAO;YACjB,SAAS,EAAE,OAAO;YAClB,YAAY,EAAE,KAAK;YACnB,MAAM,EAAE,GAAG;YACX,OAAO,EAAE,GAAG;YACZ,GAAG,EAAE,GAAG;YACR,IAAI,EAAE,GAAG;YACT,SAAS,EAAE,iBAAiB;SAC7B;KACF,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACzC,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,eAAe;IAC/B,OAAO,EAAE,MAAM;CAChB,CAAC,CAAA;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAC3C,OAAO,EAAE,MAAM;CAChB,CAAC,CAAA;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAC3C,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,MAAM;IACf,OAAO,EAAE;QACP,IAAI,EAAE,CAAC;KACR;IACD,2CAA2C,EAAE;QAC3C,WAAW,EAAE,MAAM;KACpB;CACF,CAAC,CAAA;AAEF,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,GACtB,CAAA"}

package/dist/components/Modal/Modal.types.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type ModalProps = {
+    open: boolean;
+    size?: "tiny" | "small" | "medium" | "large";
+    title?: string;
+    subtitle?: string;
+    header?: React.ReactNode;
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+    onClose?: React.MouseEventHandler<HTMLButtonElement>;
+    onBack?: React.MouseEventHandler<HTMLButtonElement>;
+};
+export { ModalProps };

package/dist/components/Modal/Modal.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Modal.types.js.map

package/dist/components/Modal/Modal.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.types.js","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":""}

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { Modal } from "./Modal";
+export { ModalProps } from "./Modal.types";

package/dist/components/Modal/index.js

@@ -0,0 +1,2 @@
+export { Modal } from "./Modal";
+//# sourceMappingURL=index.js.map

package/dist/components/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}

package/dist/components/Notifications/NotificationItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { NotificationItemProps } from "./NotificationItem.types";
+declare const NotificationItem: React.MemoExoticComponent<(props: React.PropsWithChildren<NotificationItemProps>) => JSX.Element>;
+export { NotificationItem };

package/dist/components/Notifications/NotificationItem.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { formatDistanceToNow } from "date-fns";
+import { enUS, es, zhCN } from "date-fns/locale";
+import { NotificationItemImage } from "./NotificationItemImage";
+import { NewNotificationIcon } from "../Icon";
+import { NotificationItemContainer, NotificationItemContent, NotificationItemImageContainer, NotificationItemTimestamp, } from "./NotificationItem.styled";
+const NotificationItem = React.memo((props) => {
+    const { image, imageBackgroundColor, badgeIcon, timestamp, isNew, children, locale, } = props;
+    const usedLocale = locale === "en" ? enUS : locale === "es" ? es : zhCN;
+    return (_jsxs(NotificationItemContainer, { children: [_jsx(NotificationItemImageContainer, { children: _jsx(NotificationItemImage, { image: image, imageBackgroundColor: imageBackgroundColor, badgeIcon: badgeIcon }) }), _jsxs(NotificationItemContent, { children: [children, _jsx(NotificationItemTimestamp, { children: formatDistanceToNow(timestamp, { locale: usedLocale }) })] }), isNew && _jsx(NewNotificationIcon, { fontStyle: 12 })] }));
+});
+export { NotificationItem };
+//# sourceMappingURL=NotificationItem.js.map

package/dist/components/Notifications/NotificationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAE7C,OAAO,EACL,yBAAyB,EACzB,uBAAuB,EACvB,8BAA8B,EAC9B,yBAAyB,GAC1B,MAAM,2BAA2B,CAAA;AAElC,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CACjC,CAAC,KAAqD,EAAE,EAAE;IACxD,MAAM,EACJ,KAAK,EACL,oBAAoB,EACpB,SAAS,EACT,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,GACP,GAAG,KAAK,CAAA;IACT,MAAM,UAAU,GAAG,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;IAEvE,OAAO,CACL,MAAC,yBAAyB,eACxB,KAAC,8BAA8B,cAC7B,KAAC,qBAAqB,IACpB,KAAK,EAAE,KAAK,EACZ,oBAAoB,EAAE,oBAAoB,EAC1C,SAAS,EAAE,SAAS,GACpB,GAC6B,EACjC,MAAC,uBAAuB,eACrB,QAAQ,EACT,KAAC,yBAAyB,cACvB,mBAAmB,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,GAC7B,IACJ,EACzB,KAAK,IAAI,KAAC,mBAAmB,IAAC,SAAS,EAAE,EAAE,GAAI,IACtB,CAC7B,CAAA;AACH,CAAC,CACF,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Notifications/NotificationItem.styled.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+declare const NotificationItemContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const NotificationItemImageContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const NotificationItemContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const NotificationItemTimestamp: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "className" | "width" | "height" | "padding" | "top" | "left" | "children" | "color" | "p" | "style" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "classes" | "sx" | "variant" | "align" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+declare const NotificationItemTitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "className" | "width" | "height" | "padding" | "top" | "left" | "children" | "color" | "p" | "style" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "classes" | "sx" | "variant" | "align" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+declare const NotificationItemDescription: import("@emotion/styled").StyledComponent<import("@mui/material").LinkOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, "className" | "width" | "height" | "padding" | "top" | "left" | "children" | "color" | "p" | "style" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "classes" | "sx" | "variant" | "align" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "TypographyClasses" | "underline"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+declare const NotificationItemCountdown: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const SpanHighlighted: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export { NotificationItemContainer, NotificationItemImageContainer, NotificationItemContent, NotificationItemTimestamp, NotificationItemTitle, NotificationItemDescription, NotificationItemCountdown, SpanHighlighted, };

package/dist/components/Notifications/NotificationItem.styled.js

@@ -0,0 +1,63 @@
+import styled from "@emotion/styled";
+import { Link, Typography, useTheme } from "@mui/material";
+const NotificationItemContainer = styled("div")({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    padding: "8px 16px",
+    justifyContent: "space-between",
+    gap: "16px",
+    "&:last-of-type": {
+        padding: "8px 16px 16px",
+    },
+});
+const NotificationItemImageContainer = styled("div")({
+    marginLeft: "16px",
+    fontSize: "48px",
+});
+const NotificationItemContent = styled("div")({
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+});
+const NotificationItemTimestamp = styled(Typography)({
+    fontWeight: 600,
+    fontSize: "12px",
+});
+const NotificationItemTitle = styled(Typography)({
+    fontWeight: 600,
+    fontSize: "14px",
+    marginBottom: 0,
+});
+const NotificationItemDescription = styled(Link)({
+    display: "inline",
+    color: "#a09ba8",
+    margin: "4px 0",
+    gap: "5px",
+    flexWrap: "wrap",
+    alignItems: "center",
+    fontSize: "14px",
+});
+const NotificationItemCountdown = styled("div")({
+    padding: "0 10px",
+    backgroundColor: "#37333d",
+    width: "fit-content",
+    color: "#fff",
+    borderRadius: "20px",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: "-2px",
+    transform: "translateY(2px)",
+    "& svg": {
+        marginRight: "5px",
+    },
+});
+const SpanHighlighted = styled("span")(() => {
+    const theme = useTheme();
+    return {
+        color: theme.palette.primary.main,
+    };
+});
+export { NotificationItemContainer, NotificationItemImageContainer, NotificationItemContent, NotificationItemTimestamp, NotificationItemTitle, NotificationItemDescription, NotificationItemCountdown, SpanHighlighted, };
+//# sourceMappingURL=NotificationItem.styled.js.map

package/dist/components/Notifications/NotificationItem.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.styled.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAE1D,MAAM,yBAAyB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,KAAK;IACpB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,UAAU;IACnB,cAAc,EAAE,eAAe;IAC/B,GAAG,EAAE,MAAM;IACX,gBAAgB,EAAE;QAChB,OAAO,EAAE,eAAe;KACzB;CACF,CAAC,CAAA;AAEF,MAAM,8BAA8B,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACnD,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAA;AAEF,MAAM,uBAAuB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,QAAQ,EAAE,CAAC;CACZ,CAAC,CAAA;AAEF,MAAM,yBAAyB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IACnD,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAA;AAEF,MAAM,qBAAqB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAC/C,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,CAAC;CAChB,CAAC,CAAA;AAEF,MAAM,2BAA2B,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,OAAO;IACf,GAAG,EAAE,KAAK;IACV,QAAQ,EAAE,MAAM;IAChB,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,MAAM;CACjB,CAAC,CAAA;AAEF,MAAM,yBAAyB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,EAAE,QAAQ;IACjB,eAAe,EAAE,SAAS;IAC1B,KAAK,EAAE,aAAa;IACpB,KAAK,EAAE,MAAM;IACb,YAAY,EAAE,MAAM;IACpB,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,iBAAiB;IAC5B,OAAO,EAAE;QACP,WAAW,EAAE,KAAK;KACnB;CACF,CAAC,CAAA;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE;IAC1C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;KAClC,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EACL,yBAAyB,EACzB,8BAA8B,EAC9B,uBAAuB,EACvB,yBAAyB,EACzB,qBAAqB,EACrB,2BAA2B,EAC3B,yBAAyB,EACzB,eAAe,GAChB,CAAA"}

package/dist/components/Notifications/NotificationItem.types.d.ts

@@ -0,0 +1,8 @@
+import { NotificationLocale } from "./types";
+import { NotificationItemImageProps } from "./NotificationItemImage.types";
+type NotificationItemProps = NotificationItemImageProps & {
+    timestamp: number;
+    isNew: boolean;
+    locale: NotificationLocale;
+};
+export { NotificationItemProps };

package/dist/components/Notifications/NotificationItem.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=NotificationItem.types.js.map

package/dist/components/Notifications/NotificationItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.types.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItem.types.tsx"],"names":[],"mappings":""}

package/dist/components/Notifications/NotificationItemImage.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { NotificationItemImageProps } from "./NotificationItemImage.types";
+declare const NotificationItemImage: React.MemoExoticComponent<(props: NotificationItemImageProps) => JSX.Element>;
+export { NotificationItemImage };

package/dist/components/Notifications/NotificationItemImage.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { Badge, ImageContainer } from "./NotificationItemImage.styled";
+const NotificationItemImage = React.memo((props) => {
+    const { image, badgeIcon, imageBackgroundColor } = props;
+    return (_jsx(Badge, { overlap: "circular", anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "left",
+        }, badgeContent: badgeIcon, children: typeof image === "string" ? (_jsx(ImageContainer, { backgroundColor: imageBackgroundColor, children: _jsx("img", { src: image, alt: "Notification Image" }) })) : (image) }));
+});
+export { NotificationItemImage };
+//# sourceMappingURL=NotificationItemImage.js.map

package/dist/components/Notifications/NotificationItemImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItemImage.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItemImage.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAEtE,MAAM,qBAAqB,GAAG,KAAK,CAAC,IAAI,CACtC,CAAC,KAAiC,EAAE,EAAE;IACpC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,GAAG,KAAK,CAAA;IACxD,OAAO,CACL,KAAC,KAAK,IACJ,OAAO,EAAC,UAAU,EAClB,YAAY,EAAE;YACZ,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE,MAAM;SACnB,EACD,YAAY,EAAE,SAAS,YAEtB,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,KAAC,cAAc,IAAC,eAAe,EAAE,oBAAoB,YACnD,cAAK,GAAG,EAAE,KAAK,EAAE,GAAG,EAAC,oBAAoB,GAAG,GAC7B,CAClB,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACK,CACT,CAAA;AACH,CAAC,CACF,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,CAAA"}

package/dist/components/Notifications/NotificationItemImage.styled.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+declare const Badge: import("@emotion/styled").StyledComponent<import("@mui/material").BadgeOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "className" | "children" | "color" | "style" | "classes" | "sx" | "variant" | "slots" | "slotProps" | "max" | "components" | "componentsProps" | "anchorOrigin" | "badgeContent" | "invisible" | "overlap" | "showZero"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+declare const ImageContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    backgroundColor?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export { Badge, ImageContainer };

package/dist/components/Notifications/NotificationItemImage.styled.js

@@ -0,0 +1,26 @@
+import styled from "@emotion/styled";
+import { Badge as BadgeMui } from "@mui/material";
+const Badge = styled(BadgeMui)({
+    height: "48px",
+    width: "48px",
+    "& svg.MuiSvgIcon-root": {
+        fontSize: "inherit",
+    },
+});
+const ImageContainer = styled("div")((props) => {
+    return {
+        borderRadius: "100%",
+        height: "48px",
+        width: "48px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "rgba(103, 99, 112, 0.4)",
+        backgroundImage: props.backgroundColor && `radial-gradient(${props.backgroundColor})`,
+        "& img": {
+            width: "80%",
+        },
+    };
+});
+export { Badge, ImageContainer };
+//# sourceMappingURL=NotificationItemImage.styled.js.map

package/dist/components/Notifications/NotificationItemImage.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItemImage.styled.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItemImage.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC7B,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,MAAM;IACb,uBAAuB,EAAE;QACvB,QAAQ,EAAE,SAAS;KACpB;CACF,CAAC,CAAA;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAmC,EAAE,EAAE;IAC3E,OAAO;QACL,YAAY,EAAE,MAAM;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,eAAe,EAAE,yBAAyB;QAC1C,eAAe,EACb,KAAK,CAAC,eAAe,IAAI,mBAAmB,KAAK,CAAC,eAAe,GAAG;QACtE,OAAO,EAAE;YACP,KAAK,EAAE,KAAK;SACb;KACF,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/Notifications/NotificationItemImage.types.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+type NotificationItemImageProps = {
+    imageBackgroundColor?: string;
+    image: string | React.ReactNode;
+    badgeIcon?: React.ReactNode;
+};
+export { NotificationItemImageProps };

package/dist/components/Notifications/NotificationItemImage.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=NotificationItemImage.types.js.map

package/dist/components/Notifications/NotificationItemImage.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItemImage.types.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItemImage.types.tsx"],"names":[],"mappings":""}

package/dist/components/Notifications/NotificationItemNFTLink.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { NotificationItemNFTLinkProps } from "./NotificationItemNFTLink.types";
+declare const NotificationItemNFTLink: React.MemoExoticComponent<(props: NotificationItemNFTLinkProps) => JSX.Element>;
+export { NotificationItemNFTLink };

package/dist/components/Notifications/NotificationItemNFTLink.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { Link } from "./NotificationItemNFTLink.styled";
+const NotificationItemNFTLink = React.memo((props) => {
+    const { link, rarity, name } = props;
+    return (_jsx(Link, { href: link, rarity: rarity, children: name }));
+});
+export { NotificationItemNFTLink };
+//# sourceMappingURL=NotificationItemNFTLink.js.map

package/dist/components/Notifications/NotificationItemNFTLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItemNFTLink.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItemNFTLink.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,MAAM,kCAAkC,CAAA;AAEvD,MAAM,uBAAuB,GAAG,KAAK,CAAC,IAAI,CACxC,CAAC,KAAmC,EAAE,EAAE;IACtC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IACpC,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAC7B,IAAI,GACA,CACR,CAAA;AACH,CAAC,CACF,CAAA;AAED,OAAO,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/components/Notifications/NotificationItemNFTLink.styled.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Rarity } from "@dcl/schemas";
+declare const Link: import("@emotion/styled").StyledComponent<import("@mui/material").LinkOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, "className" | "width" | "height" | "padding" | "top" | "left" | "children" | "color" | "p" | "style" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "classes" | "sx" | "variant" | "align" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "TypographyClasses" | "underline"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    rarity: Rarity;
+}, {}, {}>;
+export { Link };

package/dist/components/Notifications/NotificationItemNFTLink.styled.js

@@ -0,0 +1,11 @@
+import { Rarity } from "@dcl/schemas";
+import styled from "@emotion/styled";
+import { Link as LinkMui } from "@mui/material";
+const Link = styled(LinkMui)((props) => {
+    return {
+        color: `${Rarity.getColor(props.rarity)}`,
+        textDecorationColor: "transparent",
+    };
+});
+export { Link };
+//# sourceMappingURL=NotificationItemNFTLink.styled.js.map

package/dist/components/Notifications/NotificationItemNFTLink.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItemNFTLink.styled.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItemNFTLink.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,MAAM,eAAe,CAAA;AAE/C,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAyB,EAAE,EAAE;IACzD,OAAO;QACL,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;QACzC,mBAAmB,EAAE,aAAa;KACnC,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/Notifications/NotificationItemNFTLink.types.d.ts

@@ -0,0 +1,7 @@
+import { Rarity } from "@dcl/schemas";
+type NotificationItemNFTLinkProps = {
+    link: string;
+    rarity: Rarity;
+    name: string;
+};
+export { NotificationItemNFTLinkProps };

package/dist/components/Notifications/NotificationItemNFTLink.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=NotificationItemNFTLink.types.js.map

package/dist/components/Notifications/NotificationItemNFTLink.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItemNFTLink.types.js","sourceRoot":"","sources":["../../../src/components/Notifications/NotificationItemNFTLink.types.tsx"],"names":[],"mappings":""}

package/dist/components/Notifications/NotificationTypes/Events/Countdown.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const Countdown: React.MemoExoticComponent<({ startDate }: {
+    startDate: string;
+}) => JSX.Element>;
+export { Countdown };

package/dist/components/Notifications/NotificationTypes/Events/Countdown.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import WatchLaterOutlinedIcon from "@mui/icons-material/WatchLaterOutlined";
+import { NotificationItemCountdown } from "../../NotificationItem.styled";
+let interval;
+const Countdown = React.memo(({ startDate }) => {
+    const [time, setTime] = useState("--:--");
+    useEffect(() => {
+        interval = setInterval(() => {
+            const eventStartDate = new Date(startDate).getTime();
+            const distance = eventStartDate - Date.now();
+            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)).toString();
+            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+            setTime(`${minutes.padStart(2, "0")}:${seconds}`);
+            if (distance < 0) {
+                setTime("00:00");
+                clearInterval(interval);
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, []);
+    return (_jsxs(NotificationItemCountdown, { children: [_jsx(WatchLaterOutlinedIcon, { fontSize: "inherit" }), time] }));
+});
+export { Countdown };
+//# sourceMappingURL=Countdown.js.map