@charcoal-ui/react 6.1.0-beta.1 → 6.1.0-beta.2

package/dist/components/Notification/Snackbar/index.d.ts

@@ -1,45 +1,29 @@
 import '../layout.css';
 import './index.css';
-import type { ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 import type { NotificationProps, Position } from '../types';
 export type SnackbarCloseReason = 'timeout' | 'replaced' | 'action' | 'close' | 'unmounted';
 export type ShowSnackbarOptions = {
-    /**
-     * Snackbar の右側に表示するアクション
-     */
     action?: ReactNode;
-    /**
-     * Snackbar が閉じるときに呼び出される
-     */
     onClose?: (reason: SnackbarCloseReason) => void;
 };
-export type SnackbarHandler = {
-    show: (message: ReactNode, options?: ShowSnackbarOptions) => void;
-};
-export type SnackbarProps = Omit<NotificationProps, 'position'> & {
-    /**
-     * Snackbar の表示位置。ボタン付きの場合は `bottom` に固定される
-     * @default 'bottom'
-     */
-    position?: Position;
-    /**
-     * 暗い背景色
-     * @default false
-     */
+type SnackbarBaseProps = {
+    message: ReactNode;
+    action?: ReactNode;
     dim?: boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+export type SnackbarProps = Omit<SnackbarBaseProps, 'action'> & {
+    /** Snackbar の右側に表示するアクション */
+    action: NonNullable<ReactNode>;
 };
-declare const Snackbar: import("react").ForwardRefExoticComponent<Omit<NotificationProps, "position"> & {
-    /**
-     * Snackbar の表示位置。ボタン付きの場合は `bottom` に固定される
-     * @default 'bottom'
-     */
+export type UseSnackbarProps = Omit<NotificationProps, 'position'> & {
     position?: Position;
-    /**
-     * 暗い背景色
-     * @default false
-     */
     dim?: boolean;
-} & import("react").RefAttributes<SnackbarHandler>>;
+};
+declare const Snackbar: import("react").ForwardRefExoticComponent<Omit<SnackbarBaseProps, "action"> & {
+    /** Snackbar の右側に表示するアクション */
+    action: NonNullable<ReactNode>;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export default Snackbar;
-export declare function useSnackbar(props?: SnackbarProps): readonly [import("react/jsx-runtime").JSX.Element, (message: ReactNode, options?: ShowSnackbarOptions) => void];
+export declare function useSnackbar(props?: UseSnackbarProps): readonly [import("react/jsx-runtime").JSX.Element, (message: ReactNode, options?: ShowSnackbarOptions) => void];
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Notification/Snackbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notification/Snackbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AACtB,OAAO,aAAa,CAAA;AAGpB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAE3D,MAAM,MAAM,mBAAmB,GAC7B,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,CAAA;AAE3D,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;CAChD,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAA;CAClE,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG;IAChE;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,CAAA;CACd,CAAA;AAOD,QAAA,MAAM,QAAQ;IAjBZ;;;OAGG;eACQ,QAAQ;IACnB;;;OAGG;UACG,OAAO;mDAqEb,CAAA;eAEa,QAAQ;AAEvB,wBAAgB,WAAW,CAAC,KAAK,GAAE,aAAkB,gEAK5B,SAAS,YAAY,mBAAmB,WAIhE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notification/Snackbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AACtB,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAE3D,MAAM,MAAM,mBAAmB,GAC7B,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,WAAW,CAAA;AAE3D,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;CAChD,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,GAAG,CAAC,EAAE,OAAO,CAAA;CACd,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;AAEpD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,EAAE,QAAQ,CAAC,GAAG;IAC9D,6BAA6B;IAC7B,MAAM,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG;IACnE,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,GAAG,CAAC,EAAE,OAAO,CAAA;CACd,CAAA;AAOD,QAAA,MAAM,QAAQ;IAdZ,6BAA6B;YACrB,WAAW,CAAC,SAAS,CAAC;kDAiB/B,CAAA;eAEc,QAAQ;AAEvB,wBAAgB,WAAW,CAAC,KAAK,GAAE,gBAAqB,gEAkB/B,SAAS,YAAW,mBAAmB,WAsC/D"}

package/dist/components/Notification/Snackbar/index2.cjs

@@ -1,4 +1,5 @@
 "use client";
+const require_useClassNames = require('../../../_lib/useClassNames.cjs');
 require('../layout.cjs');
 require('./index.cjs');
 const require_NotificationItem = require('../NotificationItem.cjs');
@@ -6,11 +7,17 @@ const require_NotificationRegion = require('../NotificationRegion.cjs');
 const require_useNotificationQueue = require('../useNotificationQueue.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-let react_compiler_runtime = require("react-compiler-runtime");
 
 //#region src/components/Notification/Snackbar/index.tsx
-const Snackbar = (0, react.forwardRef)(function Snackbar({ position = "bottom", dim = false, duration, order, ...regionProps }, ref) {
+const Snackbar = (0, react.forwardRef)(function Snackbar(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnackbarBase, {
+		...props,
+		ref
+	});
+});
+function useSnackbar(props = {}) {
 	"use memo";
+	const { position = "bottom", dim = false, duration, order, ...regionProps } = props;
 	const { state, itemRef, enqueue, close, onHoverStart, onHoverEnd } = require_useNotificationQueue.useNotificationQueue("snackbar", {
 		duration,
 		order,
@@ -23,8 +30,7 @@ const Snackbar = (0, react.forwardRef)(function Snackbar({ position = "bottom",
 			action: options.action
 		}, options.onClose);
 	}
-	(0, react.useImperativeHandle)(ref, () => ({ show }));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationRegion.NotificationRegion, {
+	return [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NotificationRegion.NotificationRegion, {
 		name: "snackbar",
 		state,
 		position: state.visibleToasts.some((toast) => toast.content.action !== void 0) ? "bottom" : position,
@@ -38,59 +44,33 @@ const Snackbar = (0, react.forwardRef)(function Snackbar({ position = "bottom",
 			onHoverEnd,
 			"data-dim": dim,
 			"data-with-action": toast_0.content.action !== void 0,
-			children: toast_0.content.action !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnackbarAction, {
-				action: toast_0.content.action,
-				onClick: () => close(toast_0.key, "action")
+			children: toast_0.content.action !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				onClick: () => close(toast_0.key, "action"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnackbarAction, { action: toast_0.content.action })
 			})
 		}, toast_0.key))
-	});
-});
-function useSnackbar(t0) {
-	"use memo";
-	const $ = (0, react_compiler_runtime.c)(8);
-	if ($[0] !== "1dc1eb8429c7be1137abcfa05286c14e7ca96230a56b18d315897aa3a5101e4e") {
-		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "1dc1eb8429c7be1137abcfa05286c14e7ca96230a56b18d315897aa3a5101e4e";
-	}
-	let t1;
-	if ($[1] !== t0) {
-		t1 = t0 === void 0 ? {} : t0;
-		$[1] = t0;
-		$[2] = t1;
-	} else t1 = $[2];
-	const props = t1;
-	const snackbarHandlerRef = (0, react.useRef)(null);
-	let t2;
-	if ($[3] !== props) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Snackbar, {
-			ref: snackbarHandlerRef,
-			...props
-		});
-		$[3] = props;
-		$[4] = t2;
-	} else t2 = $[4];
-	const element = t2;
-	let t3;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = function show(message, options) {
-			snackbarHandlerRef.current?.show(message, options);
-		};
-		$[5] = t3;
-	} else t3 = $[5];
-	const show = t3;
-	let t4;
-	if ($[6] !== element) {
-		t4 = [element, show];
-		$[6] = element;
-		$[7] = t4;
-	} else t4 = $[7];
-	return t4;
+	}), show];
 }
-function SnackbarAction({ action, onClick }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		onClick,
-		children: action
+const SnackbarBase = (0, react.forwardRef)(function SnackbarBase({ message, action, dim = false, className, ...rootProps }, ref) {
+	const classNames = require_useClassNames.useClassNames("charcoal-notification", "charcoal-snackbar", className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...rootProps,
+		ref,
+		className: classNames,
+		"data-dim": dim,
+		"data-with-action": action !== void 0,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "status",
+			className: "charcoal-notification-content",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "charcoal-notification-label",
+				children: message
+			})
+		}), action !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnackbarAction, { action })]
 	});
+});
+function SnackbarAction({ action }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: action });
 }
 
 //#endregion

package/dist/components/Notification/Snackbar/index2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index2.cjs","names":["toast","snackbarHandlerRef"],"sources":["../../../../src/components/Notification/Snackbar/index.tsx"],"sourcesContent":["import '../layout.css'\nimport './index.css'\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport { NotificationItem } from '../NotificationItem'\nimport { NotificationRegion } from '../NotificationRegion'\nimport { useNotificationQueue } from '../useNotificationQueue'\nimport type { NotificationProps, Position } from '../types'\n\nexport type SnackbarCloseReason =\n  'timeout' | 'replaced' | 'action' | 'close' | 'unmounted'\n\nexport type ShowSnackbarOptions = {\n  /**\n   * Snackbar の右側に表示するアクション\n   */\n  action?: ReactNode\n  /**\n   * Snackbar が閉じるときに呼び出される\n   */\n  onClose?: (reason: SnackbarCloseReason) => void\n}\n\nexport type SnackbarHandler = {\n  show: (message: ReactNode, options?: ShowSnackbarOptions) => void\n}\n\nexport type SnackbarProps = Omit<NotificationProps, 'position'> & {\n  /**\n   * Snackbar の表示位置。ボタン付きの場合は `bottom` に固定される\n   * @default 'bottom'\n   */\n  position?: Position\n  /**\n   * 暗い背景色\n   * @default false\n   */\n  dim?: boolean\n}\n\ntype SnackbarContent = {\n  message: ReactNode\n  action?: ReactNode\n}\n\nconst Snackbar = forwardRef<SnackbarHandler, SnackbarProps>(function Snackbar(\n  { position = 'bottom', dim = false, duration, order, ...regionProps },\n  ref,\n) {\n  'use memo'\n\n  const { state, itemRef, enqueue, close, onHoverStart, onHoverEnd } =\n    useNotificationQueue<SnackbarContent, SnackbarCloseReason>('snackbar', {\n      duration,\n      order,\n      timeoutReason: 'timeout',\n      unmountedReason: 'unmounted',\n    })\n\n  function show(message: ReactNode, options: ShowSnackbarOptions = {}) {\n    enqueue(\n      {\n        message,\n        action: options.action,\n      },\n      options.onClose,\n    )\n  }\n\n  useImperativeHandle(ref, () => ({ show }))\n\n  // アクション付きの Snackbar は常に下部に表示される\n  const hasAction = state.visibleToasts.some(\n    (toast) => toast.content.action !== undefined,\n  )\n  const effectivePosition = hasAction ? 'bottom' : position\n\n  return (\n    <NotificationRegion\n      name=\"snackbar\"\n      state={state}\n      position={effectivePosition}\n      {...regionProps}\n    >\n      {state.visibleToasts.map((toast) => (\n        <NotificationItem\n          key={toast.key}\n          name=\"snackbar\"\n          toast={toast}\n          state={state}\n          itemRef={itemRef}\n          onHoverStart={onHoverStart}\n          onHoverEnd={onHoverEnd}\n          data-dim={dim}\n          data-with-action={toast.content.action !== undefined}\n        >\n          {toast.content.action !== undefined && (\n            <SnackbarAction\n              action={toast.content.action}\n              onClick={() => close(toast.key, 'action')}\n            />\n          )}\n        </NotificationItem>\n      ))}\n    </NotificationRegion>\n  )\n})\n\nexport default Snackbar\n\nexport function useSnackbar(props: SnackbarProps = {}) {\n  'use memo'\n\n  const snackbarHandlerRef = useRef<SnackbarHandler>(null)\n  const element = <Snackbar ref={snackbarHandlerRef} {...props} />\n  function show(message: ReactNode, options?: ShowSnackbarOptions) {\n    snackbarHandlerRef.current?.show(message, options)\n  }\n  return [element, show] as const\n}\n\nfunction SnackbarAction({\n  action,\n  onClick,\n}: {\n  action: ReactNode\n  onClick: () => void\n}) {\n  return <div onClick={onClick}>{action}</div>\n}\n"],"mappings":";;;;;;;;;;;AA8CA,MAAM,iCAAsD,SAAS,SACnE,EAAE,WAAW,UAAU,MAAM,OAAO,UAAU,OAAO,GAAG,eACxD,KACA;CACA;CAEA,MAAM,EAAE,OAAO,SAAS,SAAS,OAAO,cAAc,eACpD,kDAA2D,YAAY;EACrE;EACA;EACA,eAAe;EACf,iBAAiB;CACnB,CAAC;CAEH,SAAS,KAAK,SAAoB,UAA+B,CAAC,GAAG;EACnE,QACE;GACE;GACA,QAAQ,QAAQ;EAClB,GACA,QAAQ,OACV;CACF;CAEA,+BAAoB,YAAY,EAAE,KAAK,EAAE;CAQzC,OACE,2CAAC,+CAAD;EACE,MAAK;EACE;EACP,UATc,MAAM,cAAc,MACnC,UAAU,MAAM,QAAQ,WAAW,MAEZ,IAAY,WAAW;EAO7C,GAAI;YAEH,MAAM,cAAc,KAAKA,YACxB,2CAAC,2CAAD;GAEE,MAAK;GACL,OAAOA;GACA;GACE;GACK;GACF;GACZ,YAAU;GACV,oBAAkBA,QAAM,QAAQ,WAAW;aAE1CA,QAAM,QAAQ,WAAW,UACxB,2CAAC,gBAAD;IACE,QAAQA,QAAM,QAAQ;IACtB,eAAe,MAAMA,QAAM,KAAK,QAAQ;GAAE;EAG9B,GAhBXA,QAAM,GAgBK,CACnB;CACiB;AAExB,CAAC;AAID,SAAO,YAAA,IAAA;CAAA;CAAA,MAAA,kCAAA,CAAA;CAAA,IAAA,EAAA,OAAA,oEAAA;EAAA,KAAA,IAAA,KAAA,GAAA,KAAA,GAAA,MAAA,GAAA,EAAA,MAAA,OAAA,IAAA,2BAAA;EAAA,EAAA,KAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAqB,KAAA,OAAA,SAAA,CAAwB,IAAxB;EAAyB,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAzB,MAAA,QAAA;CAG1B,MAAA,uCAAmD,IAAI;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACxC,KAAA,2CAAC,UAAD;GAAeC,KAAA;GAAkB,GAAM;EAAK;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAhE,MAAA,UAAgB;CAAgD,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAChE,KAAA,SAAA,KAAA,SAAA,SAAA;GACE,mBAAkB,SAAc,KAAC,SAAS,OAAO;EAAC;EACnD,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAFD,MAAA,OAAA;CAEC,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EACM,KAAA,CAAC,SAAS,IAAI;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAf;AAAwB;AAGjC,SAAS,eAAe,EACtB,QACA,WAIC;CACD,OAAO,2CAAC,OAAD;EAAc;YAAU;CAAY;AAC7C"}
+{"version":3,"file":"index2.cjs","names":["toast"],"sources":["../../../../src/components/Notification/Snackbar/index.tsx"],"sourcesContent":["import '../layout.css'\nimport './index.css'\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { useClassNames } from '../../../_lib/useClassNames'\nimport { NotificationItem } from '../NotificationItem'\nimport { NotificationRegion } from '../NotificationRegion'\nimport { useNotificationQueue } from '../useNotificationQueue'\nimport type { NotificationProps, Position } from '../types'\n\nexport type SnackbarCloseReason =\n  'timeout' | 'replaced' | 'action' | 'close' | 'unmounted'\n\nexport type ShowSnackbarOptions = {\n  action?: ReactNode\n  onClose?: (reason: SnackbarCloseReason) => void\n}\n\ntype SnackbarBaseProps = {\n  message: ReactNode\n  action?: ReactNode\n  dim?: boolean\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>\n\nexport type SnackbarProps = Omit<SnackbarBaseProps, 'action'> & {\n  /** Snackbar の右側に表示するアクション */\n  action: NonNullable<ReactNode>\n}\n\nexport type UseSnackbarProps = Omit<NotificationProps, 'position'> & {\n  position?: Position\n  dim?: boolean\n}\n\ntype SnackbarContent = {\n  message: ReactNode\n  action?: ReactNode\n}\n\nconst Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(\n  function Snackbar(props, ref) {\n    return <SnackbarBase {...props} ref={ref} />\n  },\n)\n\nexport default Snackbar\n\nexport function useSnackbar(props: UseSnackbarProps = {}) {\n  'use memo'\n\n  const {\n    position = 'bottom',\n    dim = false,\n    duration,\n    order,\n    ...regionProps\n  } = props\n  const { state, itemRef, enqueue, close, onHoverStart, onHoverEnd } =\n    useNotificationQueue<SnackbarContent, SnackbarCloseReason>('snackbar', {\n      duration,\n      order,\n      timeoutReason: 'timeout',\n      unmountedReason: 'unmounted',\n    })\n\n  function show(message: ReactNode, options: ShowSnackbarOptions = {}) {\n    enqueue({ message, action: options.action }, options.onClose)\n  }\n\n  const hasAction = state.visibleToasts.some(\n    (toast) => toast.content.action !== undefined,\n  )\n  const effectivePosition = hasAction ? 'bottom' : position\n  const element = (\n    <NotificationRegion\n      name=\"snackbar\"\n      state={state}\n      position={effectivePosition}\n      {...regionProps}\n    >\n      {state.visibleToasts.map((toast) => (\n        <NotificationItem\n          key={toast.key}\n          name=\"snackbar\"\n          toast={toast}\n          state={state}\n          itemRef={itemRef}\n          onHoverStart={onHoverStart}\n          onHoverEnd={onHoverEnd}\n          data-dim={dim}\n          data-with-action={toast.content.action !== undefined}\n        >\n          {toast.content.action !== undefined && (\n            <div onClick={() => close(toast.key, 'action')}>\n              <SnackbarAction action={toast.content.action} />\n            </div>\n          )}\n        </NotificationItem>\n      ))}\n    </NotificationRegion>\n  )\n\n  return [element, show] as const\n}\n\nconst SnackbarBase = forwardRef<HTMLDivElement, SnackbarBaseProps>(\n  function SnackbarBase(\n    { message, action, dim = false, className, ...rootProps },\n    ref,\n  ) {\n    const classNames = useClassNames(\n      'charcoal-notification',\n      'charcoal-snackbar',\n      className,\n    )\n\n    return (\n      <div\n        {...rootProps}\n        ref={ref}\n        className={classNames}\n        data-dim={dim}\n        data-with-action={action !== undefined}\n      >\n        <div role=\"status\" className=\"charcoal-notification-content\">\n          <div className=\"charcoal-notification-label\">{message}</div>\n        </div>\n        {action !== undefined && <SnackbarAction action={action} />}\n      </div>\n    )\n  },\n)\n\nfunction SnackbarAction({ action }: { action: ReactNode }) {\n  return <div>{action}</div>\n}\n"],"mappings":";;;;;;;;;;;AAuCA,MAAM,iCACJ,SAAS,SAAS,OAAO,KAAK;CAC5B,OAAO,2CAAC,cAAD;EAAc,GAAI;EAAY;CAAI;AAC3C,CACF;AAIA,SAAgB,YAAY,QAA0B,CAAC,GAAG;CACxD;CAEA,MAAM,EACJ,WAAW,UACX,MAAM,OACN,UACA,OACA,GAAG,gBACD;CACJ,MAAM,EAAE,OAAO,SAAS,SAAS,OAAO,cAAc,eACpD,kDAA2D,YAAY;EACrE;EACA;EACA,eAAe;EACf,iBAAiB;CACnB,CAAC;CAEH,SAAS,KAAK,SAAoB,UAA+B,CAAC,GAAG;EACnE,QAAQ;GAAE;GAAS,QAAQ,QAAQ;EAAO,GAAG,QAAQ,OAAO;CAC9D;CAmCA,OAAO,CAAC,2CA5BL,+CAAD;EACE,MAAK;EACE;EACP,UARc,MAAM,cAAc,MACnC,UAAU,MAAM,QAAQ,WAAW,MAEZ,IAAY,WAAW;EAM7C,GAAI;YAEH,MAAM,cAAc,KAAKA,YACxB,2CAAC,2CAAD;GAEE,MAAK;GACL,OAAOA;GACA;GACE;GACK;GACF;GACZ,YAAU;GACV,oBAAkBA,QAAM,QAAQ,WAAW;aAE1CA,QAAM,QAAQ,WAAW,UACxB,2CAAC,OAAD;IAAK,eAAe,MAAMA,QAAM,KAAK,QAAQ;cAC3C,2CAAC,gBAAD,EAAgB,QAAQA,QAAM,QAAQ,OAAO;GAC1C;EAES,GAfXA,QAAM,GAeK,CACnB;CACiB,CAGd,GAAS,IAAI;AACvB;AAEA,MAAM,qCACJ,SAAS,aACP,EAAE,SAAS,QAAQ,MAAM,OAAO,WAAW,GAAG,aAC9C,KACA;CACA,MAAM,aAAa,oCACjB,yBACA,qBACA,SACF;CAEA,OACE,4CAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,YAAU;EACV,oBAAkB,WAAW;YAL/B,CAOE,2CAAC,OAAD;GAAK,MAAK;GAAS,WAAU;aAC3B,2CAAC,OAAD;IAAK,WAAU;cAA+B;GAAa;EACxD,IACJ,WAAW,UAAa,2CAAC,gBAAD,EAAwB,OAAO,EACrD;;AAET,CACF;AAEA,SAAS,eAAe,EAAE,UAAiC;CACzD,OAAO,2CAAC,OAAD,YAAM,OAAY;AAC3B"}

package/dist/components/Notification/Snackbar/index2.js

@@ -1,16 +1,23 @@
 "use client";
+import { useClassNames } from "../../../_lib/useClassNames.js";
 /* empty css        */
 /* empty css      */
 import { NotificationItem } from "../NotificationItem.js";
 import { NotificationRegion } from "../NotificationRegion.js";
 import { useNotificationQueue } from "../useNotificationQueue.js";
-import { forwardRef, useImperativeHandle, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { c } from "react-compiler-runtime";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Notification/Snackbar/index.tsx
-const Snackbar = forwardRef(function Snackbar({ position = "bottom", dim = false, duration, order, ...regionProps }, ref) {
+const Snackbar = forwardRef(function Snackbar(props, ref) {
+	return /* @__PURE__ */ jsx(SnackbarBase, {
+		...props,
+		ref
+	});
+});
+function useSnackbar(props = {}) {
 	"use memo";
+	const { position = "bottom", dim = false, duration, order, ...regionProps } = props;
 	const { state, itemRef, enqueue, close, onHoverStart, onHoverEnd } = useNotificationQueue("snackbar", {
 		duration,
 		order,
@@ -23,8 +30,7 @@ const Snackbar = forwardRef(function Snackbar({ position = "bottom", dim = false
 			action: options.action
 		}, options.onClose);
 	}
-	useImperativeHandle(ref, () => ({ show }));
-	return /* @__PURE__ */ jsx(NotificationRegion, {
+	return [/* @__PURE__ */ jsx(NotificationRegion, {
 		name: "snackbar",
 		state,
 		position: state.visibleToasts.some((toast) => toast.content.action !== void 0) ? "bottom" : position,
@@ -38,55 +44,33 @@ const Snackbar = forwardRef(function Snackbar({ position = "bottom", dim = false
 			onHoverEnd,
 			"data-dim": dim,
 			"data-with-action": toast_0.content.action !== void 0,
-			children: toast_0.content.action !== void 0 && /* @__PURE__ */ jsx(SnackbarAction, {
-				action: toast_0.content.action,
-				onClick: () => close(toast_0.key, "action")
+			children: toast_0.content.action !== void 0 && /* @__PURE__ */ jsx("div", {
+				onClick: () => close(toast_0.key, "action"),
+				children: /* @__PURE__ */ jsx(SnackbarAction, { action: toast_0.content.action })
 			})
 		}, toast_0.key))
-	});
-});
-function useSnackbar(t0) {
-	"use memo";
-	const $ = c(7);
-	let t1;
-	if ($[0] !== t0) {
-		t1 = t0 === void 0 ? {} : t0;
-		$[0] = t0;
-		$[1] = t1;
-	} else t1 = $[1];
-	const props = t1;
-	const snackbarHandlerRef = useRef(null);
-	let t2;
-	if ($[2] !== props) {
-		t2 = /* @__PURE__ */ jsx(Snackbar, {
-			ref: snackbarHandlerRef,
-			...props
-		});
-		$[2] = props;
-		$[3] = t2;
-	} else t2 = $[3];
-	const element = t2;
-	let t3;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = function show(message, options) {
-			snackbarHandlerRef.current?.show(message, options);
-		};
-		$[4] = t3;
-	} else t3 = $[4];
-	const show = t3;
-	let t4;
-	if ($[5] !== element) {
-		t4 = [element, show];
-		$[5] = element;
-		$[6] = t4;
-	} else t4 = $[6];
-	return t4;
+	}), show];
 }
-function SnackbarAction({ action, onClick }) {
-	return /* @__PURE__ */ jsx("div", {
-		onClick,
-		children: action
+const SnackbarBase = forwardRef(function SnackbarBase({ message, action, dim = false, className, ...rootProps }, ref) {
+	const classNames = useClassNames("charcoal-notification", "charcoal-snackbar", className);
+	return /* @__PURE__ */ jsxs("div", {
+		...rootProps,
+		ref,
+		className: classNames,
+		"data-dim": dim,
+		"data-with-action": action !== void 0,
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "status",
+			className: "charcoal-notification-content",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "charcoal-notification-label",
+				children: message
+			})
+		}), action !== void 0 && /* @__PURE__ */ jsx(SnackbarAction, { action })]
 	});
+});
+function SnackbarAction({ action }) {
+	return /* @__PURE__ */ jsx("div", { children: action });
 }
 
 //#endregion

package/dist/components/Notification/Snackbar/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","names":["toast","snackbarHandlerRef"],"sources":["../../../../src/components/Notification/Snackbar/index.tsx"],"sourcesContent":["import '../layout.css'\nimport './index.css'\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport { NotificationItem } from '../NotificationItem'\nimport { NotificationRegion } from '../NotificationRegion'\nimport { useNotificationQueue } from '../useNotificationQueue'\nimport type { NotificationProps, Position } from '../types'\n\nexport type SnackbarCloseReason =\n  'timeout' | 'replaced' | 'action' | 'close' | 'unmounted'\n\nexport type ShowSnackbarOptions = {\n  /**\n   * Snackbar の右側に表示するアクション\n   */\n  action?: ReactNode\n  /**\n   * Snackbar が閉じるときに呼び出される\n   */\n  onClose?: (reason: SnackbarCloseReason) => void\n}\n\nexport type SnackbarHandler = {\n  show: (message: ReactNode, options?: ShowSnackbarOptions) => void\n}\n\nexport type SnackbarProps = Omit<NotificationProps, 'position'> & {\n  /**\n   * Snackbar の表示位置。ボタン付きの場合は `bottom` に固定される\n   * @default 'bottom'\n   */\n  position?: Position\n  /**\n   * 暗い背景色\n   * @default false\n   */\n  dim?: boolean\n}\n\ntype SnackbarContent = {\n  message: ReactNode\n  action?: ReactNode\n}\n\nconst Snackbar = forwardRef<SnackbarHandler, SnackbarProps>(function Snackbar(\n  { position = 'bottom', dim = false, duration, order, ...regionProps },\n  ref,\n) {\n  'use memo'\n\n  const { state, itemRef, enqueue, close, onHoverStart, onHoverEnd } =\n    useNotificationQueue<SnackbarContent, SnackbarCloseReason>('snackbar', {\n      duration,\n      order,\n      timeoutReason: 'timeout',\n      unmountedReason: 'unmounted',\n    })\n\n  function show(message: ReactNode, options: ShowSnackbarOptions = {}) {\n    enqueue(\n      {\n        message,\n        action: options.action,\n      },\n      options.onClose,\n    )\n  }\n\n  useImperativeHandle(ref, () => ({ show }))\n\n  // アクション付きの Snackbar は常に下部に表示される\n  const hasAction = state.visibleToasts.some(\n    (toast) => toast.content.action !== undefined,\n  )\n  const effectivePosition = hasAction ? 'bottom' : position\n\n  return (\n    <NotificationRegion\n      name=\"snackbar\"\n      state={state}\n      position={effectivePosition}\n      {...regionProps}\n    >\n      {state.visibleToasts.map((toast) => (\n        <NotificationItem\n          key={toast.key}\n          name=\"snackbar\"\n          toast={toast}\n          state={state}\n          itemRef={itemRef}\n          onHoverStart={onHoverStart}\n          onHoverEnd={onHoverEnd}\n          data-dim={dim}\n          data-with-action={toast.content.action !== undefined}\n        >\n          {toast.content.action !== undefined && (\n            <SnackbarAction\n              action={toast.content.action}\n              onClick={() => close(toast.key, 'action')}\n            />\n          )}\n        </NotificationItem>\n      ))}\n    </NotificationRegion>\n  )\n})\n\nexport default Snackbar\n\nexport function useSnackbar(props: SnackbarProps = {}) {\n  'use memo'\n\n  const snackbarHandlerRef = useRef<SnackbarHandler>(null)\n  const element = <Snackbar ref={snackbarHandlerRef} {...props} />\n  function show(message: ReactNode, options?: ShowSnackbarOptions) {\n    snackbarHandlerRef.current?.show(message, options)\n  }\n  return [element, show] as const\n}\n\nfunction SnackbarAction({\n  action,\n  onClick,\n}: {\n  action: ReactNode\n  onClick: () => void\n}) {\n  return <div onClick={onClick}>{action}</div>\n}\n"],"mappings":";;;;;;;;;;;AA8CA,MAAM,WAAW,WAA2C,SAAS,SACnE,EAAE,WAAW,UAAU,MAAM,OAAO,UAAU,OAAO,GAAG,eACxD,KACA;CACA;CAEA,MAAM,EAAE,OAAO,SAAS,SAAS,OAAO,cAAc,eACpD,qBAA2D,YAAY;EACrE;EACA;EACA,eAAe;EACf,iBAAiB;CACnB,CAAC;CAEH,SAAS,KAAK,SAAoB,UAA+B,CAAC,GAAG;EACnE,QACE;GACE;GACA,QAAQ,QAAQ;EAClB,GACA,QAAQ,OACV;CACF;CAEA,oBAAoB,YAAY,EAAE,KAAK,EAAE;CAQzC,OACE,oBAAC,oBAAD;EACE,MAAK;EACE;EACP,UATc,MAAM,cAAc,MACnC,UAAU,MAAM,QAAQ,WAAW,MAEZ,IAAY,WAAW;EAO7C,GAAI;YAEH,MAAM,cAAc,KAAKA,YACxB,oBAAC,kBAAD;GAEE,MAAK;GACL,OAAOA;GACA;GACE;GACK;GACF;GACZ,YAAU;GACV,oBAAkBA,QAAM,QAAQ,WAAW;aAE1CA,QAAM,QAAQ,WAAW,UACxB,oBAAC,gBAAD;IACE,QAAQA,QAAM,QAAQ;IACtB,eAAe,MAAMA,QAAM,KAAK,QAAQ;GAAE;EAG9B,GAhBXA,QAAM,GAgBK,CACnB;CACiB;AAExB,CAAC;AAID,SAAO,YAAA,IAAA;CAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAqB,KAAA,OAAA,SAAA,CAAwB,IAAxB;EAAyB,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAzB,MAAA,QAAA;CAG1B,MAAA,qBAA2B,OAAwB,IAAI;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EACxC,KAAA,oBAAC,UAAD;GAAeC,KAAA;GAAkB,GAAM;EAAK;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAhE,MAAA,UAAgB;CAAgD,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAChE,KAAA,SAAA,KAAA,SAAA,SAAA;GACE,mBAAkB,SAAc,KAAC,SAAS,OAAO;EAAC;EACnD,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAFD,MAAA,OAAA;CAEC,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EACM,KAAA,CAAC,SAAS,IAAI;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAf;AAAwB;AAGjC,SAAS,eAAe,EACtB,QACA,WAIC;CACD,OAAO,oBAAC,OAAD;EAAc;YAAU;CAAY;AAC7C"}
+{"version":3,"file":"index2.js","names":["toast"],"sources":["../../../../src/components/Notification/Snackbar/index.tsx"],"sourcesContent":["import '../layout.css'\nimport './index.css'\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { useClassNames } from '../../../_lib/useClassNames'\nimport { NotificationItem } from '../NotificationItem'\nimport { NotificationRegion } from '../NotificationRegion'\nimport { useNotificationQueue } from '../useNotificationQueue'\nimport type { NotificationProps, Position } from '../types'\n\nexport type SnackbarCloseReason =\n  'timeout' | 'replaced' | 'action' | 'close' | 'unmounted'\n\nexport type ShowSnackbarOptions = {\n  action?: ReactNode\n  onClose?: (reason: SnackbarCloseReason) => void\n}\n\ntype SnackbarBaseProps = {\n  message: ReactNode\n  action?: ReactNode\n  dim?: boolean\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>\n\nexport type SnackbarProps = Omit<SnackbarBaseProps, 'action'> & {\n  /** Snackbar の右側に表示するアクション */\n  action: NonNullable<ReactNode>\n}\n\nexport type UseSnackbarProps = Omit<NotificationProps, 'position'> & {\n  position?: Position\n  dim?: boolean\n}\n\ntype SnackbarContent = {\n  message: ReactNode\n  action?: ReactNode\n}\n\nconst Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(\n  function Snackbar(props, ref) {\n    return <SnackbarBase {...props} ref={ref} />\n  },\n)\n\nexport default Snackbar\n\nexport function useSnackbar(props: UseSnackbarProps = {}) {\n  'use memo'\n\n  const {\n    position = 'bottom',\n    dim = false,\n    duration,\n    order,\n    ...regionProps\n  } = props\n  const { state, itemRef, enqueue, close, onHoverStart, onHoverEnd } =\n    useNotificationQueue<SnackbarContent, SnackbarCloseReason>('snackbar', {\n      duration,\n      order,\n      timeoutReason: 'timeout',\n      unmountedReason: 'unmounted',\n    })\n\n  function show(message: ReactNode, options: ShowSnackbarOptions = {}) {\n    enqueue({ message, action: options.action }, options.onClose)\n  }\n\n  const hasAction = state.visibleToasts.some(\n    (toast) => toast.content.action !== undefined,\n  )\n  const effectivePosition = hasAction ? 'bottom' : position\n  const element = (\n    <NotificationRegion\n      name=\"snackbar\"\n      state={state}\n      position={effectivePosition}\n      {...regionProps}\n    >\n      {state.visibleToasts.map((toast) => (\n        <NotificationItem\n          key={toast.key}\n          name=\"snackbar\"\n          toast={toast}\n          state={state}\n          itemRef={itemRef}\n          onHoverStart={onHoverStart}\n          onHoverEnd={onHoverEnd}\n          data-dim={dim}\n          data-with-action={toast.content.action !== undefined}\n        >\n          {toast.content.action !== undefined && (\n            <div onClick={() => close(toast.key, 'action')}>\n              <SnackbarAction action={toast.content.action} />\n            </div>\n          )}\n        </NotificationItem>\n      ))}\n    </NotificationRegion>\n  )\n\n  return [element, show] as const\n}\n\nconst SnackbarBase = forwardRef<HTMLDivElement, SnackbarBaseProps>(\n  function SnackbarBase(\n    { message, action, dim = false, className, ...rootProps },\n    ref,\n  ) {\n    const classNames = useClassNames(\n      'charcoal-notification',\n      'charcoal-snackbar',\n      className,\n    )\n\n    return (\n      <div\n        {...rootProps}\n        ref={ref}\n        className={classNames}\n        data-dim={dim}\n        data-with-action={action !== undefined}\n      >\n        <div role=\"status\" className=\"charcoal-notification-content\">\n          <div className=\"charcoal-notification-label\">{message}</div>\n        </div>\n        {action !== undefined && <SnackbarAction action={action} />}\n      </div>\n    )\n  },\n)\n\nfunction SnackbarAction({ action }: { action: ReactNode }) {\n  return <div>{action}</div>\n}\n"],"mappings":";;;;;;;;;;;AAuCA,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,KAAK;CAC5B,OAAO,oBAAC,cAAD;EAAc,GAAI;EAAY;CAAI;AAC3C,CACF;AAIA,SAAgB,YAAY,QAA0B,CAAC,GAAG;CACxD;CAEA,MAAM,EACJ,WAAW,UACX,MAAM,OACN,UACA,OACA,GAAG,gBACD;CACJ,MAAM,EAAE,OAAO,SAAS,SAAS,OAAO,cAAc,eACpD,qBAA2D,YAAY;EACrE;EACA;EACA,eAAe;EACf,iBAAiB;CACnB,CAAC;CAEH,SAAS,KAAK,SAAoB,UAA+B,CAAC,GAAG;EACnE,QAAQ;GAAE;GAAS,QAAQ,QAAQ;EAAO,GAAG,QAAQ,OAAO;CAC9D;CAmCA,OAAO,CAAC,oBA5BL,oBAAD;EACE,MAAK;EACE;EACP,UARc,MAAM,cAAc,MACnC,UAAU,MAAM,QAAQ,WAAW,MAEZ,IAAY,WAAW;EAM7C,GAAI;YAEH,MAAM,cAAc,KAAKA,YACxB,oBAAC,kBAAD;GAEE,MAAK;GACL,OAAOA;GACA;GACE;GACK;GACF;GACZ,YAAU;GACV,oBAAkBA,QAAM,QAAQ,WAAW;aAE1CA,QAAM,QAAQ,WAAW,UACxB,oBAAC,OAAD;IAAK,eAAe,MAAMA,QAAM,KAAK,QAAQ;cAC3C,oBAAC,gBAAD,EAAgB,QAAQA,QAAM,QAAQ,OAAO;GAC1C;EAES,GAfXA,QAAM,GAeK,CACnB;CACiB,CAGd,GAAS,IAAI;AACvB;AAEA,MAAM,eAAe,WACnB,SAAS,aACP,EAAE,SAAS,QAAQ,MAAM,OAAO,WAAW,GAAG,aAC9C,KACA;CACA,MAAM,aAAa,cACjB,yBACA,qBACA,SACF;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW;EACX,YAAU;EACV,oBAAkB,WAAW;YAL/B,CAOE,oBAAC,OAAD;GAAK,MAAK;GAAS,WAAU;aAC3B,oBAAC,OAAD;IAAK,WAAU;cAA+B;GAAa;EACxD,IACJ,WAAW,UAAa,oBAAC,gBAAD,EAAwB,OAAO,EACrD;;AAET,CACF;AAEA,SAAS,eAAe,EAAE,UAAiC;CACzD,OAAO,oBAAC,OAAD,YAAM,OAAY;AAC3B"}

package/dist/components/Notification/Toast/index2.js

@@ -40,39 +40,43 @@ const Toast = forwardRef(function Toast({ position = "top", duration, order, ...
 });
 function useToast(t0) {
 	"use memo";
-	const $ = c(7);
+	const $ = c(8);
+	if ($[0] !== "aad1570b2784f7343f322f27996bd84f97380bf45debf5009829c7eb5dc91e8e") {
+		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "aad1570b2784f7343f322f27996bd84f97380bf45debf5009829c7eb5dc91e8e";
+	}
 	let t1;
-	if ($[0] !== t0) {
+	if ($[1] !== t0) {
 		t1 = t0 === void 0 ? {} : t0;
-		$[0] = t0;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[1] = t0;
+		$[2] = t1;
+	} else t1 = $[2];
 	const props = t1;
 	const toastHandlerRef = useRef(null);
 	let t2;
-	if ($[2] !== props) {
+	if ($[3] !== props) {
 		t2 = /* @__PURE__ */ jsx(Toast, {
 			ref: toastHandlerRef,
 			...props
 		});
-		$[2] = props;
-		$[3] = t2;
-	} else t2 = $[3];
+		$[3] = props;
+		$[4] = t2;
+	} else t2 = $[4];
 	const element = t2;
 	let t3;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = function show(message, options) {
 			toastHandlerRef.current?.show(message, options);
 		};
-		$[4] = t3;
-	} else t3 = $[4];
+		$[5] = t3;
+	} else t3 = $[5];
 	const show = t3;
 	let t4;
-	if ($[5] !== element) {
+	if ($[6] !== element) {
 		t4 = [element, show];
-		$[5] = element;
-		$[6] = t4;
-	} else t4 = $[6];
+		$[6] = element;
+		$[7] = t4;
+	} else t4 = $[7];
 	return t4;
 }
 

package/dist/components/Notification/Toast/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","names":["toastHandlerRef"],"sources":["../../../../src/components/Notification/Toast/index.tsx"],"sourcesContent":["import '../layout.css'\nimport './index.css'\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport { NotificationItem } from '../NotificationItem'\nimport { NotificationRegion } from '../NotificationRegion'\nimport { useNotificationQueue } from '../useNotificationQueue'\nimport type { NotificationProps, Position } from '../types'\n\nexport type ToastType = 'success' | 'error'\n\nexport type ShowToastOptions = {\n  type: ToastType\n}\n\nexport type ToastHandler = {\n  show: (message: ReactNode, options: ShowToastOptions) => void\n}\n\nexport type ToastProps = Omit<NotificationProps, 'position'> & {\n  /**\n   * Toast の表示位置\n   * @default 'top'\n   */\n  position?: Position\n}\n\ntype ToastContent = {\n  message: ReactNode\n  type: ToastType\n}\n\nconst Toast = forwardRef<ToastHandler, ToastProps>(function Toast(\n  { position = 'top', duration, order, ...regionProps },\n  ref,\n) {\n  'use memo'\n\n  const { state, itemRef, enqueue, onHoverStart, onHoverEnd } =\n    useNotificationQueue<ToastContent>('toast', { duration, order })\n\n  function show(message: ReactNode, options: ShowToastOptions) {\n    enqueue({\n      message,\n      type: options.type,\n    })\n  }\n\n  useImperativeHandle(ref, () => ({ show }))\n\n  return (\n    <NotificationRegion\n      name=\"toast\"\n      state={state}\n      position={position}\n      {...regionProps}\n    >\n      {state.visibleToasts.map((toast) => (\n        <NotificationItem\n          key={toast.key}\n          name=\"toast\"\n          toast={toast}\n          state={state}\n          itemRef={itemRef}\n          onHoverStart={onHoverStart}\n          onHoverEnd={onHoverEnd}\n          data-type={toast.content.type}\n        />\n      ))}\n    </NotificationRegion>\n  )\n})\n\nexport default Toast\n\nexport function useToast(props: ToastProps = {}) {\n  'use memo'\n\n  const toastHandlerRef = useRef<ToastHandler>(null)\n  const element = <Toast ref={toastHandlerRef} {...props} />\n  function show(message: ReactNode, options: ShowToastOptions) {\n    toastHandlerRef.current?.show(message, options)\n  }\n  return [element, show] as const\n}\n"],"mappings":";;;;;;;;;;;AAiCA,MAAM,QAAQ,WAAqC,SAAS,MAC1D,EAAE,WAAW,OAAO,UAAU,OAAO,GAAG,eACxC,KACA;CACA;CAEA,MAAM,EAAE,OAAO,SAAS,SAAS,cAAc,eAC7C,qBAAmC,SAAS;EAAE;EAAU;CAAM,CAAC;CAEjE,SAAS,KAAK,SAAoB,SAA2B;EAC3D,QAAQ;GACN;GACA,MAAM,QAAQ;EAChB,CAAC;CACH;CAEA,oBAAoB,YAAY,EAAE,KAAK,EAAE;CAEzC,OACE,oBAAC,oBAAD;EACE,MAAK;EACE;EACG;EACV,GAAI;YAEH,MAAM,cAAc,KAAK,UACxB,oBAAC,kBAAD;GAEE,MAAK;GACE;GACA;GACE;GACK;GACF;GACZ,aAAW,MAAM,QAAQ;EAAK,GAPzB,MAAM,GAOmB,CAEjC;CACiB;AAExB,CAAC;AAID,SAAO,SAAA,IAAA;CAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAkB,KAAA,OAAA,SAAA,CAAqB,IAArB;EAAsB,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAtB,MAAA,QAAA;CAGvB,MAAA,kBAAwB,OAAqB,IAAI;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAClC,KAAA,oBAAC,OAAD;GAAYA,KAAA;GAAe,GAAM;EAAK;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAA1D,MAAA,UAAgB;CAA0C,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAC1D,KAAA,SAAA,KAAA,SAAA,SAAA;GACE,gBAAe,SAAc,KAAC,SAAS,OAAO;EAAC;EAChD,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAFD,MAAA,OAAA;CAEC,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EACM,KAAA,CAAC,SAAS,IAAI;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAf;AAAwB"}
+{"version":3,"file":"index2.js","names":["toastHandlerRef"],"sources":["../../../../src/components/Notification/Toast/index.tsx"],"sourcesContent":["import '../layout.css'\nimport './index.css'\n\nimport { forwardRef, useImperativeHandle, useRef } from 'react'\nimport type { ReactNode } from 'react'\nimport { NotificationItem } from '../NotificationItem'\nimport { NotificationRegion } from '../NotificationRegion'\nimport { useNotificationQueue } from '../useNotificationQueue'\nimport type { NotificationProps, Position } from '../types'\n\nexport type ToastType = 'success' | 'error'\n\nexport type ShowToastOptions = {\n  type: ToastType\n}\n\nexport type ToastHandler = {\n  show: (message: ReactNode, options: ShowToastOptions) => void\n}\n\nexport type ToastProps = Omit<NotificationProps, 'position'> & {\n  /**\n   * Toast の表示位置\n   * @default 'top'\n   */\n  position?: Position\n}\n\ntype ToastContent = {\n  message: ReactNode\n  type: ToastType\n}\n\nconst Toast = forwardRef<ToastHandler, ToastProps>(function Toast(\n  { position = 'top', duration, order, ...regionProps },\n  ref,\n) {\n  'use memo'\n\n  const { state, itemRef, enqueue, onHoverStart, onHoverEnd } =\n    useNotificationQueue<ToastContent>('toast', { duration, order })\n\n  function show(message: ReactNode, options: ShowToastOptions) {\n    enqueue({\n      message,\n      type: options.type,\n    })\n  }\n\n  useImperativeHandle(ref, () => ({ show }))\n\n  return (\n    <NotificationRegion\n      name=\"toast\"\n      state={state}\n      position={position}\n      {...regionProps}\n    >\n      {state.visibleToasts.map((toast) => (\n        <NotificationItem\n          key={toast.key}\n          name=\"toast\"\n          toast={toast}\n          state={state}\n          itemRef={itemRef}\n          onHoverStart={onHoverStart}\n          onHoverEnd={onHoverEnd}\n          data-type={toast.content.type}\n        />\n      ))}\n    </NotificationRegion>\n  )\n})\n\nexport default Toast\n\nexport function useToast(props: ToastProps = {}) {\n  'use memo'\n\n  const toastHandlerRef = useRef<ToastHandler>(null)\n  const element = <Toast ref={toastHandlerRef} {...props} />\n  function show(message: ReactNode, options: ShowToastOptions) {\n    toastHandlerRef.current?.show(message, options)\n  }\n  return [element, show] as const\n}\n"],"mappings":";;;;;;;;;;;AAiCA,MAAM,QAAQ,WAAqC,SAAS,MAC1D,EAAE,WAAW,OAAO,UAAU,OAAO,GAAG,eACxC,KACA;CACA;CAEA,MAAM,EAAE,OAAO,SAAS,SAAS,cAAc,eAC7C,qBAAmC,SAAS;EAAE;EAAU;CAAM,CAAC;CAEjE,SAAS,KAAK,SAAoB,SAA2B;EAC3D,QAAQ;GACN;GACA,MAAM,QAAQ;EAChB,CAAC;CACH;CAEA,oBAAoB,YAAY,EAAE,KAAK,EAAE;CAEzC,OACE,oBAAC,oBAAD;EACE,MAAK;EACE;EACG;EACV,GAAI;YAEH,MAAM,cAAc,KAAK,UACxB,oBAAC,kBAAD;GAEE,MAAK;GACE;GACA;GACE;GACK;GACF;GACZ,aAAW,MAAM,QAAQ;EAAK,GAPzB,MAAM,GAOmB,CAEjC;CACiB;AAExB,CAAC;AAID,SAAO,SAAA,IAAA;CAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA,EAAA,OAAA,oEAAA;EAAA,KAAA,IAAA,KAAA,GAAA,KAAA,GAAA,MAAA,GAAA,EAAA,MAAA,OAAA,IAAA,2BAAA;EAAA,EAAA,KAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAkB,KAAA,OAAA,SAAA,CAAqB,IAArB;EAAsB,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAtB,MAAA,QAAA;CAGvB,MAAA,kBAAwB,OAAqB,IAAI;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAClC,KAAA,oBAAC,OAAD;GAAYA,KAAA;GAAe,GAAM;EAAK;EAAI,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAA1D,MAAA,UAAgB;CAA0C,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAC1D,KAAA,SAAA,KAAA,SAAA,SAAA;GACE,gBAAe,SAAc,KAAC,SAAS,OAAO;EAAC;EAChD,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAFD,MAAA,OAAA;CAEC,IAAA;CAAA,IAAA,EAAA,OAAA,SAAA;EACM,KAAA,CAAC,SAAS,IAAI;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OAAf;AAAwB"}

package/dist/components/Pagination/index2.js

@@ -10,7 +10,11 @@ import { c } from "react-compiler-runtime";
 //#region src/components/Pagination/index.tsx
 function NavButton(t0) {
 	"use memo";
-	const $ = c(15);
+	const $ = c(16);
+	if ($[0] !== "6df9a461da70eeb5250dbca07b72d0ce43e952d7b7d08baba19bf889ba545794") {
+		for (let $i = 0; $i < 16; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "6df9a461da70eeb5250dbca07b72d0ce43e952d7b7d08baba19bf889ba545794";
+	}
 	const { direction, ariaLabel } = t0;
 	const { page, pageCount, size, isLinkMode, makeUrl, LinkComponent, makeClickHandler, linkProps } = usePaginationContext();
 	const isPrev = direction === "prev";
@@ -20,7 +24,7 @@ function NavButton(t0) {
 	const t1 = isPrev ? "24/Prev" : "24/Next";
 	const t2 = disabled || void 0;
 	let t3;
-	if ($[0] !== LinkComponent || $[1] !== disabled || $[2] !== isLinkMode || $[3] !== linkProps || $[4] !== makeClickHandler || $[5] !== makeUrl || $[6] !== navButtonClassName || $[7] !== targetPage) {
+	if ($[1] !== LinkComponent || $[2] !== disabled || $[3] !== isLinkMode || $[4] !== linkProps || $[5] !== makeClickHandler || $[6] !== makeUrl || $[7] !== navButtonClassName || $[8] !== targetPage) {
 		t3 = isLinkMode && makeUrl ? {
 			component: LinkComponent,
 			href: makeUrl(targetPage),
@@ -32,18 +36,18 @@ function NavButton(t0) {
 			onClick: makeClickHandler(targetPage),
 			className: navButtonClassName
 		};
-		$[0] = LinkComponent;
-		$[1] = disabled;
-		$[2] = isLinkMode;
-		$[3] = linkProps;
-		$[4] = makeClickHandler;
-		$[5] = makeUrl;
-		$[6] = navButtonClassName;
-		$[7] = targetPage;
-		$[8] = t3;
-	} else t3 = $[8];
+		$[1] = LinkComponent;
+		$[2] = disabled;
+		$[3] = isLinkMode;
+		$[4] = linkProps;
+		$[5] = makeClickHandler;
+		$[6] = makeUrl;
+		$[7] = navButtonClassName;
+		$[8] = targetPage;
+		$[9] = t3;
+	} else t3 = $[9];
 	let t4;
-	if ($[9] !== ariaLabel || $[10] !== size || $[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
+	if ($[10] !== ariaLabel || $[11] !== size || $[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
 		t4 = /* @__PURE__ */ jsx(IconButton, {
 			icon: t1,
 			size,
@@ -51,24 +55,28 @@ function NavButton(t0) {
 			"aria-label": ariaLabel,
 			...t3
 		});
-		$[9] = ariaLabel;
-		$[10] = size;
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-		$[14] = t4;
-	} else t4 = $[14];
+		$[10] = ariaLabel;
+		$[11] = size;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
 	return t4;
 }
 function PageItem(t0) {
 	"use memo";
-	const $ = c(19);
+	const $ = c(20);
+	if ($[0] !== "6df9a461da70eeb5250dbca07b72d0ce43e952d7b7d08baba19bf889ba545794") {
+		for (let $i = 0; $i < 20; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "6df9a461da70eeb5250dbca07b72d0ce43e952d7b7d08baba19bf889ba545794";
+	}
 	const { value } = t0;
 	const { page, size, isLinkMode, makeUrl, LinkComponent, makeClickHandler, linkProps } = usePaginationContext();
 	const pageItemClassName = useClassNames("charcoal-pagination-button", linkProps?.className);
 	if (value === "...") {
 		let t1;
-		if ($[0] !== size) {
+		if ($[1] !== size) {
 			t1 = /* @__PURE__ */ jsx(IconButton, {
 				icon: "24/Dot",
 				size,
@@ -76,69 +84,69 @@ function PageItem(t0) {
 				className: "charcoal-pagination-spacer",
 				"aria-hidden": true
 			});
-			$[0] = size;
-			$[1] = t1;
-		} else t1 = $[1];
+			$[1] = size;
+			$[2] = t1;
+		} else t1 = $[2];
 		return t1;
 	}
 	if (value === page) {
 		let t1;
-		if ($[2] !== value) {
+		if ($[3] !== value) {
 			t1 = /* @__PURE__ */ jsx("span", {
 				className: "charcoal-pagination-button",
 				"aria-current": "page",
 				children: value
 			});
-			$[2] = value;
-			$[3] = t1;
-		} else t1 = $[3];
+			$[3] = value;
+			$[4] = t1;
+		} else t1 = $[4];
 		return t1;
 	}
 	if (typeof value !== "number") return null;
 	if (isLinkMode && makeUrl) {
 		let t1;
-		if ($[4] !== makeUrl || $[5] !== value) {
+		if ($[5] !== makeUrl || $[6] !== value) {
 			t1 = makeUrl(value);
-			$[4] = makeUrl;
-			$[5] = value;
-			$[6] = t1;
-		} else t1 = $[6];
+			$[5] = makeUrl;
+			$[6] = value;
+			$[7] = t1;
+		} else t1 = $[7];
 		let t2;
-		if ($[7] !== LinkComponent || $[8] !== linkProps || $[9] !== pageItemClassName || $[10] !== t1 || $[11] !== value) {
+		if ($[8] !== LinkComponent || $[9] !== linkProps || $[10] !== pageItemClassName || $[11] !== t1 || $[12] !== value) {
 			t2 = /* @__PURE__ */ jsx(LinkComponent, {
 				href: t1,
 				...linkProps,
 				className: pageItemClassName,
 				children: value
 			});
-			$[7] = LinkComponent;
-			$[8] = linkProps;
-			$[9] = pageItemClassName;
-			$[10] = t1;
-			$[11] = value;
-			$[12] = t2;
-		} else t2 = $[12];
+			$[8] = LinkComponent;
+			$[9] = linkProps;
+			$[10] = pageItemClassName;
+			$[11] = t1;
+			$[12] = value;
+			$[13] = t2;
+		} else t2 = $[13];
 		return t2;
 	}
 	let t1;
-	if ($[13] !== makeClickHandler || $[14] !== value) {
+	if ($[14] !== makeClickHandler || $[15] !== value) {
 		t1 = makeClickHandler(value);
-		$[13] = makeClickHandler;
-		$[14] = value;
-		$[15] = t1;
-	} else t1 = $[15];
+		$[14] = makeClickHandler;
+		$[15] = value;
+		$[16] = t1;
+	} else t1 = $[16];
 	let t2;
-	if ($[16] !== t1 || $[17] !== value) {
+	if ($[17] !== t1 || $[18] !== value) {
 		t2 = /* @__PURE__ */ jsx("button", {
 			type: "button",
 			className: "charcoal-pagination-button",
 			onClick: t1,
 			children: value
 		});
-		$[16] = t1;
-		$[17] = value;
-		$[18] = t2;
-	} else t2 = $[18];
+		$[17] = t1;
+		$[18] = value;
+		$[19] = t2;
+	} else t2 = $[19];
 	return t2;
 }
 function Pagination({ page, pageCount, pageRangeDisplayed, size = "M", onChange, makeUrl, component: LinkComponent = "a", linkProps, className, ariaLabelNext = "Next", ariaLabelPrev = "Previous", ...navProps }) {