@dt-dds/react-toast 1.0.0-beta.56

package/dist/index.mjs

@@ -0,0 +1,539 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// ../../dt-dds-react/core/assets/svgs/AllOut.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Apis.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Apps.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropDown.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowDropUp.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowLeft.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ArrowRight.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/AvatarThumbnail.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Bolt.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/CalendarMonth.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Cancel.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Check.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircle.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/CheckCircleOutline.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var CheckCircleOutlineIcon = (props) => {
+  return /* @__PURE__ */ jsx14(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "currentColor",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ jsx14(
+        "path",
+        {
+          d: "M12 0C5.376 0 0 5.376 0 12C0 18.624 5.376 24 12 24C18.624 24 24 18.624 24 12C24 5.376 18.624 0 12 0ZM12 21.6C6.708 21.6 2.4 17.292 2.4 12C2.4 6.708 6.708 2.4 12 2.4C17.292 2.4 21.6 6.708 21.6 12C21.6 17.292 17.292 21.6 12 21.6ZM17.508 6.696L9.6 14.604L6.492 11.508L4.8 13.2L9.6 18L19.2 8.4L17.508 6.696Z",
+          fill: "currentColor"
+        }
+      )
+    })
+  );
+};
+var CheckCircleOutline_default = CheckCircleOutlineIcon;
+
+// ../../dt-dds-react/core/assets/svgs/Close.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var CloseIcon = (props) => {
+  return /* @__PURE__ */ jsx15(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "none",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ jsx15(
+        "path",
+        {
+          d: "M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z",
+          fill: "currentColor"
+        }
+      )
+    })
+  );
+};
+var Close_default = CloseIcon;
+
+// ../../dt-dds-react/core/assets/svgs/Copy.tsx
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Delete.tsx
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Edit.tsx
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Email.tsx
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/EmailSend.tsx
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Error.tsx
+import { useTheme } from "@emotion/react";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ErrorOutline.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var ErrorOutline = (props) => {
+  return /* @__PURE__ */ jsx22(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "none",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ jsx22(
+        "path",
+        {
+          d: "M11.988 0C5.364 0 0 5.376 0 12C0 18.624 5.364 24 11.988 24C18.624 24 24 18.624 24 12C24 5.376 18.624 0 11.988 0ZM12 21.6C6.696 21.6 2.4 17.304 2.4 12C2.4 6.696 6.696 2.4 12 2.4C17.304 2.4 21.6 6.696 21.6 12C21.6 17.304 17.304 21.6 12 21.6ZM10.8 15.6H13.2V18H10.8V15.6ZM10.8 6H13.2V13.2H10.8V6Z",
+          fill: "currentColor"
+        }
+      )
+    })
+  );
+};
+var ErrorOutline_default = ErrorOutline;
+
+// ../../dt-dds-react/core/assets/svgs/EVStation.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Info.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/InfoOutline.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+var InfoOutline = (props) => {
+  return /* @__PURE__ */ jsx25(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "currentColor",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ jsx25("path", { d: "M11 7H13V9H11V7ZM11 11H13V17H11V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" })
+    })
+  );
+};
+var InfoOutline_default = InfoOutline;
+
+// ../../dt-dds-react/core/assets/svgs/Input.tsx
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Language.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/LocationOn.tsx
+import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/LocationSearching.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MenuCompact.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MenuExpand.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Menu.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MoreHorizontal.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/MoreVertical.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/NoData.tsx
+import { useTheme as useTheme2 } from "@emotion/react";
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/NotFound.tsx
+import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropDown.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/OutlinedArrowDropUp.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/PhoneOutlined.tsx
+import { jsx as jsx39 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Payments.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Products.tsx
+import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/RemoveCircleOutline.tsx
+import { jsx as jsx42 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Share.tsx
+import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Signout.tsx
+import { jsx as jsx44 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Teams.tsx
+import { jsx as jsx45, jsxs as jsxs18 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Timeline.tsx
+import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Topic.tsx
+import { jsx as jsx47, jsxs as jsxs20 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldLess.tsx
+import { jsx as jsx48 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/UnfoldMore.tsx
+import { jsx as jsx49 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Username.tsx
+import { jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/ViewAgenda.tsx
+import { jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Visibility.tsx
+import { jsx as jsx52, jsxs as jsxs23 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/VisibilityOff.tsx
+import { jsx as jsx53, jsxs as jsxs24 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/WarningOutline.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
+var WarningOutline = (props) => {
+  return /* @__PURE__ */ jsx54(
+    "svg",
+    __spreadProps(__spreadValues({
+      fill: "currentColor",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props), {
+      children: /* @__PURE__ */ jsx54("path", { d: "M12 6.49L19.53 19.5H4.47L12 6.49ZM12 2.5L1 21.5H23L12 2.5ZM13 16.5H11V18.5H13V16.5ZM13 10.5H11V14.5H13V10.5Z" })
+    })
+  );
+};
+var WarningOutline_default = WarningOutline;
+
+// ../../dt-dds-react/core/assets/svgs/Warning.tsx
+import { jsx as jsx55 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Wifi.tsx
+import { jsx as jsx56 } from "react/jsx-runtime";
+
+// ../../dt-dds-react/core/assets/svgs/Settings.tsx
+import { jsx as jsx57 } from "react/jsx-runtime";
+
+// src/constants/enums.ts
+var ToastPosition = /* @__PURE__ */ ((ToastPosition2) => {
+  ToastPosition2["TopLeft"] = "top-left";
+  ToastPosition2["TopCenter"] = "top-center";
+  ToastPosition2["TopRight"] = "top-right";
+  ToastPosition2["BottomLeft"] = "bottom-left";
+  ToastPosition2["BottomCenter"] = "bottom-center";
+  ToastPosition2["BottomRight"] = "bottom-right";
+  return ToastPosition2;
+})(ToastPosition || {});
+var ToastType = /* @__PURE__ */ ((ToastType2) => {
+  ToastType2["Success"] = "success";
+  ToastType2["Error"] = "error";
+  ToastType2["Info"] = "informative";
+  ToastType2["Warning"] = "warning";
+  return ToastType2;
+})(ToastType || {});
+
+// src/Toast.styled.ts
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+var ToastIconStyled = styled.div`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding-left: 8px;
+  padding-right: 8px;
+  ${({ theme, type }) => `
+    background-color: ${theme.palette[type].default};  
+    color: ${theme.palette.content.contrast}
+`}
+`;
+var fadeIn = keyframes`
+  from { opacity: 0; }
+  to   { opacity: 1; }
+`;
+var ToastStyled = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 360px;
+  animation: ${fadeIn} 0.75s ease-in;
+  transition: all 0.75s ease-in-out;
+  overflow: hidden;
+  ${({ theme, isVisible }) => `
+    background-color: ${theme.palette.surface.contrast};  
+    opacity: ${isVisible ? 1 : 0};
+    color: ${theme.palette.content.default};
+    border-radius: ${theme.shape.toast};
+    box-shadow: ${theme.shadows.s};
+  `}
+`;
+var ToastContentStyled = styled.div`
+  ${({ theme }) => `
+    height: 100%;
+    flex-grow: 1;
+    padding: ${theme.spacing["2xs"]} ${theme.spacing["2xs"]};
+  `}
+`;
+var ToastTitleStyled = styled.div`
+  ${({ theme }) => `
+      ${theme.fontStyles.h6};
+      color: ${theme.palette.content.dark};
+      margin-bottom: ${theme.spacing["5xs"]};
+      text-transform: capitalize;
+  `}
+`;
+var ToastMessageStyled = styled.div`
+  ${({ theme }) => `
+    ${theme.fontStyles.body2};
+    color: ${theme.palette.content.default};
+    overflow: hidden;
+    word-break: break-word;
+    hyphens: auto;
+    display: -webkit-box;
+    -webkit-line-clamp: 6;
+    -webkit-box-orient: vertical;
+  `}
+`;
+var ToastButtonCloseStyled = styled.button`
+  ${({ theme }) => `
+    color: ${theme.palette.content.default};
+    border: 0;
+    cursor: pointer;
+    background: transparent;
+    align-self: flex-start;
+    font-size: 0;
+    line-height: 0;
+  
+    &:hover {
+      background-color: ${theme.palette.surface.contrast};
+    }
+  `}
+`;
+var ToastTextContainer = styled.div`
+  ${({ theme, hasCloseButton }) => `
+    display: grid;
+    ${hasCloseButton ? "grid-template-columns: auto 24px;" : "grid-template-rows: auto auto;"}
+    column-gap: ${theme.spacing["2xs"]};
+  `}
+`;
+var ToastActionsStyled = styled.div`
+  ${({ theme, hasChildren }) => `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding-top: ${hasChildren ? theme.spacing["5xs"] : 0};
+  `}
+`;
+
+// src/Toast.tsx
+import { jsx as jsx58, jsxs as jsxs25 } from "react/jsx-runtime";
+var ToastIcons = {
+  ["success" /* Success */]: CheckCircleOutline_default,
+  ["error" /* Error */]: ErrorOutline_default,
+  ["informative" /* Info */]: InfoOutline_default,
+  ["warning" /* Warning */]: WarningOutline_default
+};
+var Toast = ({
+  children,
+  id,
+  dataTestId,
+  title,
+  message,
+  onClose,
+  type,
+  isVisible = true,
+  dismissible = true
+}) => {
+  const Icon = ToastIcons[type];
+  const dataTest = dataTestId != null ? dataTestId : `toast-${id}`;
+  return /* @__PURE__ */ jsxs25(
+    ToastStyled,
+    {
+      "data-testid": dataTest,
+      isVisible,
+      type,
+      children: [
+        /* @__PURE__ */ jsx58(ToastIconStyled, { type, children: /* @__PURE__ */ jsx58(Icon, { height: 20, width: 20 }) }),
+        /* @__PURE__ */ jsxs25(ToastContentStyled, { children: [
+          /* @__PURE__ */ jsxs25(ToastTextContainer, { hasCloseButton: dismissible, children: [
+            /* @__PURE__ */ jsx58(ToastTitleStyled, { children: title }),
+            dismissible ? /* @__PURE__ */ jsx58(ToastButtonCloseStyled, { onClick: onClose, children: /* @__PURE__ */ jsx58(Close_default, {}) }) : null,
+            /* @__PURE__ */ jsx58(ToastMessageStyled, { children: message })
+          ] }),
+          /* @__PURE__ */ jsx58(ToastActionsStyled, { hasChildren: Boolean(children), children })
+        ] })
+      ]
+    },
+    id
+  );
+};
+var Toast_default = Toast;
+
+// src/Toaster.tsx
+import { useMedia } from "@dt-dds/react-core";
+import { useTheme as useTheme3 } from "@emotion/react";
+import { Children, cloneElement } from "react";
+import {
+  toast,
+  Toaster as ToastProvider
+} from "react-hot-toast";
+import { jsx as jsx59 } from "react/jsx-runtime";
+var TOAST_DEFAULT_DURATION = 4e3;
+var TOAST_ERROR_DURATION = Infinity;
+var smallPosition = "bottom-center" /* BottomCenter */;
+var defaultPosition = "bottom-right" /* BottomRight */;
+var dismissToast = (id) => {
+  toast.dismiss(id);
+};
+var emitToast = (_a) => {
+  var _b = _a, {
+    type,
+    title,
+    message,
+    children,
+    dismissible
+  } = _b, props = __objRest(_b, [
+    "type",
+    "title",
+    "message",
+    "children",
+    "dismissible"
+  ]);
+  const duration = type === "error" /* Error */ ? TOAST_ERROR_DURATION : TOAST_DEFAULT_DURATION;
+  toast.custom(
+    (t) => {
+      const clonedChildren = Children.map(children, (child) => {
+        return child && cloneElement(child, __spreadValues({
+          toastId: t.id
+        }, child.props));
+      });
+      return /* @__PURE__ */ jsx59(
+        Toast_default,
+        {
+          dismissible,
+          id: t.id,
+          isVisible: t.visible,
+          message,
+          onClose: () => toast.dismiss(t.id),
+          title,
+          type,
+          children: clonedChildren
+        }
+      );
+    },
+    __spreadValues({
+      duration
+    }, props)
+  );
+};
+var Toaster = (_a) => {
+  var _b = _a, { gutter = 8 } = _b, props = __objRest(_b, ["gutter"]);
+  const theme = useTheme3();
+  const small = useMedia(`(max-width: ${theme.breakpoints.s}px)`);
+  const position = small ? smallPosition : defaultPosition;
+  const margin = small ? 8 : 16;
+  return /* @__PURE__ */ jsx59(
+    ToastProvider,
+    __spreadProps(__spreadValues({
+      gutter,
+      position
+    }, props), {
+      containerStyle: __spreadValues({
+        bottom: 16,
+        right: margin,
+        top: margin,
+        left: margin
+      }, props.containerStyle)
+    })
+  );
+};
+var Toaster_default = Toaster;
+export {
+  Toast_default as Toast,
+  ToastPosition,
+  ToastType,
+  Toaster_default as Toaster,
+  dismissToast,
+  emitToast
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@dt-dds/react-toast",
+  "version": "1.0.0-beta.56",
+  "license": "MIT",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint --cache .",
+    "test": "jest",
+    "test:report": "open ./jest-coverage/lcov-report/index.html",
+    "test:update:snapshot": "jest -u"
+  },
+  "dependencies": {
+    "@dt-dds/react-button": "1.0.0-beta.39",
+    "@dt-dds/react-core": "1.0.0-beta.41",
+    "react-hot-toast": "^2.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.23.3",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/css": "^11.7.1",
+    "@emotion/jest": "^11.10.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "babel-loader": "^8.3.0",
+    "eslint-config-custom": "*",
+    "eslint-plugin-storybook": "^9.1.0",
+    "jest-config": "*",
+    "react": "^18.1.0",
+    "react-dom": "^18.2.0",
+    "tsconfig": "*",
+    "tsup": "^6.6.3",
+    "typescript": "^4.5.3"
+  },
+  "peerDependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  }
+}