@yamada-ui/notice 0.4.12 → 0.5.0

package/dist/chunk-H6JQLH3P.mjs

@@ -0,0 +1,144 @@
+"use client"
+import {
+  noticeStore
+} from "./chunk-VLY5Y4MA.mjs";
+
+// src/notice-provider.tsx
+import { ui } from "@yamada-ui/core";
+import {
+  AnimatePresence,
+  motion,
+  useIsPresent
+} from "@yamada-ui/motion";
+import { Portal } from "@yamada-ui/portal";
+import { useTimeout } from "@yamada-ui/use-timeout";
+import { runIfFunc, useUpdateEffect } from "@yamada-ui/utils";
+import { memo, useEffect, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+var NoticeProvider = ({
+  variants,
+  gap = "md",
+  appendToParentPortal,
+  containerRef
+}) => {
+  const state = useSyncExternalStore(
+    noticeStore.subscribe,
+    noticeStore.getSnapshot,
+    noticeStore.getSnapshot
+  );
+  const components = Object.entries(state).map(([placement, notices]) => {
+    const top = placement.includes("top") ? "env(safe-area-inset-top, 0px)" : void 0;
+    const bottom = placement.includes("bottom") ? "env(safe-area-inset-bottom, 0px)" : void 0;
+    const right = !placement.includes("left") ? "env(safe-area-inset-right, 0px)" : void 0;
+    const left = !placement.includes("right") ? "env(safe-area-inset-left, 0px)" : void 0;
+    const css = {
+      position: "fixed",
+      zIndex: "zarbon",
+      pointerEvents: "none",
+      display: "flex",
+      flexDirection: "column",
+      margin: gap,
+      gap,
+      top,
+      bottom,
+      right,
+      left
+    };
+    return /* @__PURE__ */ jsx(ui.ul, { className: "ui-notice-list", __css: css, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: notices.map((notice) => /* @__PURE__ */ jsx(NoticeComponent, { variants, ...notice }, notice.id)) }) }, placement);
+  });
+  return /* @__PURE__ */ jsx(
+    Portal,
+    {
+      appendToParentPortal,
+      containerRef,
+      children: components
+    }
+  );
+};
+var defaultVariants = {
+  initial: ({ placement }) => ({
+    opacity: 0,
+    [["top", "bottom"].includes(placement) ? "y" : "x"]: (placement === "bottom" ? 1 : placement.includes("right") ? 1 : -1) * 24
+  }),
+  animate: {
+    opacity: 1,
+    y: 0,
+    x: 0,
+    scale: 1,
+    transition: {
+      duration: 0.4,
+      ease: [0.4, 0, 0.2, 1]
+    }
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    transition: {
+      duration: 0.2,
+      ease: [0.4, 0, 1, 1]
+    }
+  }
+};
+var NoticeComponent = memo(
+  ({
+    variants = defaultVariants,
+    placement,
+    duration = 5e3,
+    message,
+    onCloseComplete,
+    isDelete = false,
+    onDelete,
+    style
+  }) => {
+    const [delay, setDelay] = useState(duration);
+    const isPresent = useIsPresent();
+    useUpdateEffect(() => {
+      if (!isPresent)
+        onCloseComplete == null ? void 0 : onCloseComplete();
+    }, [isPresent]);
+    useUpdateEffect(() => {
+      setDelay(duration);
+    }, [duration]);
+    const onMouseEnter = () => setDelay(null);
+    const onMouseLeave = () => setDelay(duration);
+    const onClose = () => {
+      if (isPresent)
+        onDelete();
+    };
+    useEffect(() => {
+      if (isPresent && isDelete)
+        onDelete();
+    }, [isPresent, isDelete, onDelete]);
+    useTimeout(onClose, delay);
+    const css = {
+      pointerEvents: "auto",
+      maxW: "2xl",
+      minW: "sm",
+      ...style
+    };
+    return /* @__PURE__ */ jsx(
+      motion.li,
+      {
+        layout: true,
+        className: "ui-notice",
+        variants,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        onHoverStart: onMouseEnter,
+        onHoverEnd: onMouseLeave,
+        custom: { placement },
+        style: {
+          display: "flex",
+          justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center"
+        },
+        children: /* @__PURE__ */ jsx(ui.div, { className: "ui-notice-container", __css: css, children: runIfFunc(message, { onClose }) })
+      }
+    );
+  }
+);
+NoticeComponent.displayName = "NoticeComponent";
+
+export {
+  NoticeProvider
+};

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 export { NoticeOptions, NoticeProps, UseNoticeOptions, noticeStore, useNotice } from './notice.mjs';
+export { NoticeProvider, NoticeProviderProps } from './notice-provider.mjs';
 import '@yamada-ui/alert';
 import '@yamada-ui/core';
 import 'react';

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { NoticeOptions, NoticeProps, UseNoticeOptions, noticeStore, useNotice } from './notice.js';
+export { NoticeProvider, NoticeProviderProps } from './notice-provider.js';
 import '@yamada-ui/alert';
 import '@yamada-ui/core';
 import 'react';

package/dist/index.js

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  NoticeProvider: () => NoticeProvider,
   noticeStore: () => noticeStore,
   useNotice: () => useNotice
 });
@@ -256,8 +257,141 @@ var Notice = ({
     }
   );
 };
+
+// src/notice-provider.tsx
+var import_core2 = require("@yamada-ui/core");
+var import_motion = require("@yamada-ui/motion");
+var import_portal = require("@yamada-ui/portal");
+var import_use_timeout = require("@yamada-ui/use-timeout");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var NoticeProvider = ({
+  variants,
+  gap = "md",
+  appendToParentPortal,
+  containerRef
+}) => {
+  const state = (0, import_react2.useSyncExternalStore)(
+    noticeStore.subscribe,
+    noticeStore.getSnapshot,
+    noticeStore.getSnapshot
+  );
+  const components = Object.entries(state).map(([placement, notices]) => {
+    const top = placement.includes("top") ? "env(safe-area-inset-top, 0px)" : void 0;
+    const bottom = placement.includes("bottom") ? "env(safe-area-inset-bottom, 0px)" : void 0;
+    const right = !placement.includes("left") ? "env(safe-area-inset-right, 0px)" : void 0;
+    const left = !placement.includes("right") ? "env(safe-area-inset-left, 0px)" : void 0;
+    const css = {
+      position: "fixed",
+      zIndex: "zarbon",
+      pointerEvents: "none",
+      display: "flex",
+      flexDirection: "column",
+      margin: gap,
+      gap,
+      top,
+      bottom,
+      right,
+      left
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.ul, { className: "ui-notice-list", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_motion.AnimatePresence, { initial: false, children: notices.map((notice) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NoticeComponent, { variants, ...notice }, notice.id)) }) }, placement);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_portal.Portal,
+    {
+      appendToParentPortal,
+      containerRef,
+      children: components
+    }
+  );
+};
+var defaultVariants = {
+  initial: ({ placement }) => ({
+    opacity: 0,
+    [["top", "bottom"].includes(placement) ? "y" : "x"]: (placement === "bottom" ? 1 : placement.includes("right") ? 1 : -1) * 24
+  }),
+  animate: {
+    opacity: 1,
+    y: 0,
+    x: 0,
+    scale: 1,
+    transition: {
+      duration: 0.4,
+      ease: [0.4, 0, 0.2, 1]
+    }
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    transition: {
+      duration: 0.2,
+      ease: [0.4, 0, 1, 1]
+    }
+  }
+};
+var NoticeComponent = (0, import_react2.memo)(
+  ({
+    variants = defaultVariants,
+    placement,
+    duration = 5e3,
+    message,
+    onCloseComplete,
+    isDelete = false,
+    onDelete,
+    style
+  }) => {
+    const [delay, setDelay] = (0, import_react2.useState)(duration);
+    const isPresent = (0, import_motion.useIsPresent)();
+    (0, import_utils2.useUpdateEffect)(() => {
+      if (!isPresent)
+        onCloseComplete == null ? void 0 : onCloseComplete();
+    }, [isPresent]);
+    (0, import_utils2.useUpdateEffect)(() => {
+      setDelay(duration);
+    }, [duration]);
+    const onMouseEnter = () => setDelay(null);
+    const onMouseLeave = () => setDelay(duration);
+    const onClose = () => {
+      if (isPresent)
+        onDelete();
+    };
+    (0, import_react2.useEffect)(() => {
+      if (isPresent && isDelete)
+        onDelete();
+    }, [isPresent, isDelete, onDelete]);
+    (0, import_use_timeout.useTimeout)(onClose, delay);
+    const css = {
+      pointerEvents: "auto",
+      maxW: "2xl",
+      minW: "sm",
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_motion.motion.li,
+      {
+        layout: true,
+        className: "ui-notice",
+        variants,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        onHoverStart: onMouseEnter,
+        onHoverEnd: onMouseLeave,
+        custom: { placement },
+        style: {
+          display: "flex",
+          justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { className: "ui-notice-container", __css: css, children: (0, import_utils2.runIfFunc)(message, { onClose }) })
+      }
+    );
+  }
+);
+NoticeComponent.displayName = "NoticeComponent";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  NoticeProvider,
   noticeStore,
   useNotice
 });

package/dist/index.mjs

@@ -1,9 +1,13 @@
 "use client"
+import {
+  NoticeProvider
+} from "./chunk-H6JQLH3P.mjs";
 import {
   noticeStore,
   useNotice
 } from "./chunk-VLY5Y4MA.mjs";
 export {
+  NoticeProvider,
   noticeStore,
   useNotice
 };

package/dist/notice-provider.d.mts

@@ -0,0 +1,7 @@
+import { ThemeConfig } from '@yamada-ui/core';
+import { FC } from 'react';
+
+type NoticeProviderProps = Omit<Required<ThemeConfig>['notice'], 'options'>;
+declare const NoticeProvider: FC<NoticeProviderProps>;
+
+export { NoticeProvider, NoticeProviderProps };

package/dist/notice-provider.d.ts

@@ -0,0 +1,7 @@
+import { ThemeConfig } from '@yamada-ui/core';
+import { FC } from 'react';
+
+type NoticeProviderProps = Omit<Required<ThemeConfig>['notice'], 'options'>;
+declare const NoticeProvider: FC<NoticeProviderProps>;
+
+export { NoticeProvider, NoticeProviderProps };

package/dist/notice-provider.js

@@ -0,0 +1,368 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/notice-provider.tsx
+var notice_provider_exports = {};
+__export(notice_provider_exports, {
+  NoticeProvider: () => NoticeProvider
+});
+module.exports = __toCommonJS(notice_provider_exports);
+var import_core2 = require("@yamada-ui/core");
+var import_motion = require("@yamada-ui/motion");
+var import_portal = require("@yamada-ui/portal");
+var import_use_timeout = require("@yamada-ui/use-timeout");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+
+// src/notice.tsx
+var import_alert = require("@yamada-ui/alert");
+var import_close_button = require("@yamada-ui/close-button");
+var import_core = require("@yamada-ui/core");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var findId = (options, id) => options.find((notice) => notice.id === id);
+var findNotice = (state, id) => {
+  const placement = getNoticePlacement(state, id);
+  const index = placement ? state[placement].findIndex((notice) => notice.id === id) : -1;
+  return { placement, index };
+};
+var getNoticePlacement = (state, id) => {
+  for (const [placement, values] of Object.entries(state)) {
+    if (findId(values, id))
+      return placement;
+  }
+};
+var counter = 0;
+var createNotice = (message, {
+  id,
+  placement = "top",
+  duration,
+  onCloseComplete,
+  status,
+  style
+}) => {
+  counter += 1;
+  id = id != null ? id : counter;
+  return {
+    id,
+    placement,
+    status,
+    duration,
+    message,
+    onDelete: () => noticeStore.remove(String(id), placement),
+    isDelete: false,
+    onCloseComplete,
+    style
+  };
+};
+var createRender = (options) => {
+  const { component } = options;
+  const Render = (props) => {
+    if (typeof component === "function") {
+      return component({ ...props, ...options });
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Notice, { ...props, ...options });
+    }
+  };
+  return Render;
+};
+var initialState = {
+  top: [],
+  "top-left": [],
+  "top-right": [],
+  bottom: [],
+  "bottom-left": [],
+  "bottom-right": []
+};
+var createNoticeStore = (initialState2) => {
+  let state = initialState2;
+  const storeChangeCache = /* @__PURE__ */ new Set();
+  const setState = (setStateFunc) => {
+    state = setStateFunc(state);
+    storeChangeCache.forEach((onStoreChange) => onStoreChange());
+  };
+  return {
+    getSnapshot: () => state,
+    subscribe: (onStoreChange) => {
+      storeChangeCache.add(onStoreChange);
+      return () => {
+        setState(() => initialState2);
+        storeChangeCache.delete(onStoreChange);
+      };
+    },
+    remove: (id, placement) => {
+      setState((prevState) => ({
+        ...prevState,
+        [placement]: prevState[placement].filter((notice) => notice.id != id)
+      }));
+    },
+    create: (message, options) => {
+      var _a;
+      const limit = ((_a = options.limit) != null ? _a : 0) - 1;
+      const notice = createNotice(message, options);
+      const { placement, id } = notice;
+      setState((prev) => {
+        var _a2;
+        let prevNotices = (_a2 = prev[placement]) != null ? _a2 : [];
+        if (limit > 0 && prevNotices.length > limit) {
+          const n = prevNotices.length - limit;
+          const notices2 = placement.includes("top") ? prevNotices.slice(n * -1) : prevNotices.slice(0, n);
+          const ids = notices2.map(({ id: id2 }) => id2);
+          prevNotices = prevNotices.map(
+            (notice2) => ids.includes(notice2.id) ? { ...notice2, isDelete: true } : notice2
+          );
+        }
+        const notices = placement.includes("top") ? [notice, ...prevNotices] : [...prevNotices, notice];
+        return { ...prev, [placement]: notices };
+      });
+      return id;
+    },
+    update: (id, options) => {
+      setState((prev) => {
+        const next = { ...prev };
+        const { placement, index } = findNotice(next, id);
+        if (placement && index !== -1) {
+          next[placement][index] = {
+            ...next[placement][index],
+            ...options,
+            message: createRender(options)
+          };
+        }
+        return next;
+      });
+    },
+    closeAll: ({ placement } = {}) => {
+      setState((prev) => {
+        let placements = [
+          "bottom",
+          "bottom-right",
+          "bottom-left",
+          "top",
+          "top-left",
+          "top-right"
+        ];
+        if (placement)
+          placements = placement;
+        return placements.reduce(
+          (acc, placement2) => {
+            acc[placement2] = prev[placement2].map((notice) => ({
+              ...notice,
+              isDelete: true
+            }));
+            return acc;
+          },
+          { ...prev }
+        );
+      });
+    },
+    close: (id) => {
+      setState((prev) => {
+        const placement = getNoticePlacement(prev, id);
+        if (!placement)
+          return prev;
+        return {
+          ...prev,
+          [placement]: prev[placement].map(
+            (notice) => notice.id == id ? { ...notice, isDelete: true } : notice
+          )
+        };
+      });
+    },
+    isActive: (id) => Boolean(findNotice(noticeStore.getSnapshot(), id).placement)
+  };
+};
+var noticeStore = createNoticeStore(initialState);
+var Notice = ({
+  variant = "basic",
+  colorScheme,
+  status,
+  icon,
+  title,
+  description,
+  isClosable,
+  onClose
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_alert.Alert,
+    {
+      status,
+      variant,
+      colorScheme,
+      alignItems: "start",
+      boxShadow: "lg",
+      pe: isClosable ? 8 : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_alert.AlertIcon,
+          {
+            variant: icon == null ? void 0 : icon.variant,
+            ...(icon == null ? void 0 : icon.color) ? { color: icon.color } : {},
+            children: icon == null ? void 0 : icon.children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.ui.div, { flex: "1", children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertTitle, { noOfLines: 1, children: title }) : null,
+          description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_alert.AlertDescription, { noOfLines: 3, children: description }) : null
+        ] }),
+        isClosable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_close_button.CloseButton,
+          {
+            size: "sm",
+            onClick: onClose,
+            position: "absolute",
+            top: 2,
+            right: 2
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+// src/notice-provider.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var NoticeProvider = ({
+  variants,
+  gap = "md",
+  appendToParentPortal,
+  containerRef
+}) => {
+  const state = (0, import_react2.useSyncExternalStore)(
+    noticeStore.subscribe,
+    noticeStore.getSnapshot,
+    noticeStore.getSnapshot
+  );
+  const components = Object.entries(state).map(([placement, notices]) => {
+    const top = placement.includes("top") ? "env(safe-area-inset-top, 0px)" : void 0;
+    const bottom = placement.includes("bottom") ? "env(safe-area-inset-bottom, 0px)" : void 0;
+    const right = !placement.includes("left") ? "env(safe-area-inset-right, 0px)" : void 0;
+    const left = !placement.includes("right") ? "env(safe-area-inset-left, 0px)" : void 0;
+    const css = {
+      position: "fixed",
+      zIndex: "zarbon",
+      pointerEvents: "none",
+      display: "flex",
+      flexDirection: "column",
+      margin: gap,
+      gap,
+      top,
+      bottom,
+      right,
+      left
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.ul, { className: "ui-notice-list", __css: css, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_motion.AnimatePresence, { initial: false, children: notices.map((notice) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NoticeComponent, { variants, ...notice }, notice.id)) }) }, placement);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_portal.Portal,
+    {
+      appendToParentPortal,
+      containerRef,
+      children: components
+    }
+  );
+};
+var defaultVariants = {
+  initial: ({ placement }) => ({
+    opacity: 0,
+    [["top", "bottom"].includes(placement) ? "y" : "x"]: (placement === "bottom" ? 1 : placement.includes("right") ? 1 : -1) * 24
+  }),
+  animate: {
+    opacity: 1,
+    y: 0,
+    x: 0,
+    scale: 1,
+    transition: {
+      duration: 0.4,
+      ease: [0.4, 0, 0.2, 1]
+    }
+  },
+  exit: {
+    opacity: 0,
+    scale: 0.95,
+    transition: {
+      duration: 0.2,
+      ease: [0.4, 0, 1, 1]
+    }
+  }
+};
+var NoticeComponent = (0, import_react2.memo)(
+  ({
+    variants = defaultVariants,
+    placement,
+    duration = 5e3,
+    message,
+    onCloseComplete,
+    isDelete = false,
+    onDelete,
+    style
+  }) => {
+    const [delay, setDelay] = (0, import_react2.useState)(duration);
+    const isPresent = (0, import_motion.useIsPresent)();
+    (0, import_utils2.useUpdateEffect)(() => {
+      if (!isPresent)
+        onCloseComplete == null ? void 0 : onCloseComplete();
+    }, [isPresent]);
+    (0, import_utils2.useUpdateEffect)(() => {
+      setDelay(duration);
+    }, [duration]);
+    const onMouseEnter = () => setDelay(null);
+    const onMouseLeave = () => setDelay(duration);
+    const onClose = () => {
+      if (isPresent)
+        onDelete();
+    };
+    (0, import_react2.useEffect)(() => {
+      if (isPresent && isDelete)
+        onDelete();
+    }, [isPresent, isDelete, onDelete]);
+    (0, import_use_timeout.useTimeout)(onClose, delay);
+    const css = {
+      pointerEvents: "auto",
+      maxW: "2xl",
+      minW: "sm",
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_motion.motion.li,
+      {
+        layout: true,
+        className: "ui-notice",
+        variants,
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        onHoverStart: onMouseEnter,
+        onHoverEnd: onMouseLeave,
+        custom: { placement },
+        style: {
+          display: "flex",
+          justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { className: "ui-notice-container", __css: css, children: (0, import_utils2.runIfFunc)(message, { onClose }) })
+      }
+    );
+  }
+);
+NoticeComponent.displayName = "NoticeComponent";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NoticeProvider
+});

package/dist/notice-provider.mjs

@@ -0,0 +1,8 @@
+"use client"
+import {
+  NoticeProvider
+} from "./chunk-H6JQLH3P.mjs";
+import "./chunk-VLY5Y4MA.mjs";
+export {
+  NoticeProvider
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/notice",
-  "version": "0.4.12",
+  "version": "0.5.0",
   "description": "Yamada UI notice component",
   "keywords": [
     "yamada",
@@ -35,9 +35,12 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.12.2",
-    "@yamada-ui/close-button": "0.3.12",
-    "@yamada-ui/alert": "0.5.6",
+    "@yamada-ui/core": "0.12.3",
+    "@yamada-ui/close-button": "0.3.13",
+    "@yamada-ui/alert": "0.5.7",
+    "@yamada-ui/portal": "0.3.4",
+    "@yamada-ui/motion": "0.4.13",
+    "@yamada-ui/use-timeout": "0.2.3",
     "@yamada-ui/utils": "0.3.1"
   },
   "devDependencies": {