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

package/src/components/Notification/layout.css

@@ -0,0 +1,46 @@
+.charcoal-notification-region {
+  position: fixed;
+  left: 0;
+  right: 0;
+  display: grid;
+  justify-content: center;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.charcoal-notification {
+  box-sizing: border-box;
+  border-radius: var(--charcoal-radius-oval);
+  width: fit-content;
+  max-width: calc(100vw - var(--charcoal-space-46));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--charcoal-space-20);
+  pointer-events: auto;
+}
+
+.charcoal-notification-content {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.charcoal-notification-label {
+  min-width: 0;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: var(--charcoal-text-font-size-caption-m);
+  font-weight: var(--charcoal-text-font-weight-bold);
+  line-height: var(--charcoal-text-line-height-caption-m);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .charcoal-notification,
+  .charcoal-notification[data-exiting='true'] {
+    animation: none;
+  }
+}

package/src/components/Notification/types.ts

@@ -0,0 +1,28 @@
+export type NotificationName = 'snackbar' | 'toast'
+export type Position = 'top' | 'bottom'
+export type NotificationOrder = 'queue' | 'replace'
+
+export type UseNotificationOptions = {
+  position?: Position
+  /**
+   * 画面端からの距離（ピクセル）
+   * @default 16
+   */
+  offset?: number
+  /**
+   * 通知を表示する時間（ミリ秒）。負の値は 0、数値でない値は 5000 として扱う
+   * @default 5000
+   */
+  duration?: number
+  /**
+   * 表示中の通知がある場合の次の通知の表示方法
+   * @default 'queue'
+   */
+  order?: NotificationOrder
+}
+
+export type NotificationProps = UseNotificationOptions & {
+  zIndex?: number
+  portalContainer?: HTMLElement
+  className?: string
+}

package/src/components/Notification/useNotificationQueue.ts

@@ -0,0 +1,235 @@
+import { useCallback, useEffect, useRef } from 'react'
+import { useToastState } from 'react-stately/useToastState'
+import type { NotificationName, NotificationOrder } from './types'
+
+const DEFAULT_DURATION_MS = 5000
+const ANIMATION_DURATION_MS = 300
+
+type QueueItem<TContent, TCloseReason> = {
+  content: TContent
+  onClose?: (reason: TCloseReason) => void
+}
+
+export function useNotificationQueue<
+  TContent,
+  TCloseReason extends string = never,
+>(
+  name: NotificationName,
+  {
+    duration: durationOption,
+    order = 'queue',
+    timeoutReason,
+    unmountedReason,
+  }: {
+    duration?: number
+    order?: NotificationOrder
+    timeoutReason?: TCloseReason
+    unmountedReason?: TCloseReason
+  } = {},
+) {
+  const itemRef = useRef<HTMLDivElement>(null)
+  const queueRef = useRef<
+    Array<QueueItem<TContent, TCloseReason> & { duration: number }>
+  >([])
+  const isShowingRef = useRef(false)
+  const activeRef = useRef<{
+    key: string
+    onClose?: (reason: TCloseReason) => void
+    reason?: TCloseReason
+    notified: boolean
+  }>()
+  const replaceRef = useRef(false)
+  const hoverRef = useRef({
+    active: false,
+    pending: undefined as (() => void) | undefined,
+  })
+  // wrapUpdate を固定したまま、後から定義する playNext の最新版を呼ぶ
+  const playNextRef = useRef<(() => void) | undefined>(undefined)
+
+  // wrapUpdate の参照が変わると useToastState が ToastQueue を作り直すため useCallback で固定する
+  const wrapUpdate = useCallback(
+    function wrapUpdate(
+      update: () => void,
+      action: 'add' | 'remove' | 'clear',
+    ) {
+      if (action !== 'remove') {
+        update()
+        return
+      }
+
+      function notifyActive() {
+        const active = activeRef.current
+        if (active === undefined || active.notified) return
+        active.notified = true
+        const reason = active.reason ?? timeoutReason
+        if (reason !== undefined) {
+          active.onClose?.(reason)
+        }
+      }
+
+      function finish() {
+        activeRef.current = undefined
+        update()
+        playNextRef.current?.()
+      }
+
+      notifyActive()
+
+      if (hoverRef.current.active) {
+        hoverRef.current.pending = () => wrapUpdate(update, 'remove')
+        return
+      }
+
+      if (itemRef.current === null) {
+        finish()
+        return
+      }
+
+      if (replaceRef.current) {
+        replaceRef.current = false
+        finish()
+        return
+      }
+      const item: HTMLDivElement = itemRef.current
+
+      // allow-discreteが Newly Available で使えないので、要素の削除をアニメーション完了まで待つ
+      item.dataset.exiting = 'true'
+      let completed = false
+      let fallbackTimer = 0 // complete 内で clearTimeout(setTimeout(...)) すると新規タイマーを即キャンセルしてしまう
+      function handleAnimationEnd(event: AnimationEvent) {
+        if (
+          event.target === item &&
+          event.animationName === `charcoal-${name}-exit`
+        ) {
+          complete()
+        }
+      }
+      function complete() {
+        if (completed) return
+        completed = true
+        item.removeEventListener('animationend', handleAnimationEnd)
+        window.clearTimeout(fallbackTimer)
+        finish()
+      }
+      item.addEventListener('animationend', handleAnimationEnd)
+      fallbackTimer = window.setTimeout(complete, ANIMATION_DURATION_MS + 100)
+      if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
+        complete()
+      }
+    },
+    [name, timeoutReason],
+  )
+
+  const state = useToastState<TContent>({
+    maxVisibleToasts: 1,
+    wrapUpdate,
+  })
+
+  useEffect(() => {
+    return () => {
+      const active = activeRef.current
+      if (active !== undefined && !active.notified) {
+        if (unmountedReason !== undefined) {
+          active.onClose?.(unmountedReason)
+        }
+      }
+      activeRef.current = undefined
+      queueRef.current = []
+      isShowingRef.current = false
+    }
+  }, [unmountedReason])
+
+  function playNext() {
+    const next = queueRef.current.shift()
+    if (next === undefined) {
+      isShowingRef.current = false
+      return
+    }
+
+    const { duration, onClose, content } = next
+    isShowingRef.current = true
+    const enterMs = window.matchMedia?.('(prefers-reduced-motion: reduce)')
+      .matches
+      ? 0
+      : ANIMATION_DURATION_MS
+    const key = state.add(content, {
+      // react-stately は 0 を「タイマーなし」と扱うため、最小の正数を渡す
+      timeout: Math.max(1, duration + enterMs),
+    })
+    activeRef.current = { key, onClose, notified: false }
+  }
+  playNextRef.current = playNext
+
+  function enqueue(
+    content: TContent,
+    onClose?: (reason: TCloseReason) => void,
+  ) {
+    const duration =
+      typeof durationOption === 'number' && Number.isFinite(durationOption)
+        ? Math.max(0, durationOption)
+        : DEFAULT_DURATION_MS
+
+    queueRef.current.push({
+      content,
+      onClose,
+      duration,
+    })
+    if (!isShowingRef.current) {
+      playNext()
+    } else if (order === 'replace') {
+      const active = activeRef.current
+      if (active === undefined) return
+
+      active.reason = 'replaced' as TCloseReason
+      replaceRef.current = true
+      hoverRef.current.active = false
+      const pending = hoverRef.current.pending
+      hoverRef.current.pending = undefined
+      if (pending !== undefined) {
+        pending()
+      } else {
+        state.close(active.key)
+      }
+    }
+  }
+
+  function close(key: string, reason: TCloseReason) {
+    const active = activeRef.current
+    if (active?.key !== key) return
+    active.reason = reason
+    hoverRef.current.active = false
+    const pending = hoverRef.current.pending
+    hoverRef.current.pending = undefined
+    if (pending !== undefined) {
+      pending()
+    } else {
+      state.close(key)
+    }
+  }
+
+  function onHoverStart() {
+    hoverRef.current.active = true
+  }
+
+  function onHoverEnd() {
+    hoverRef.current.active = false
+    const pending = hoverRef.current.pending
+    hoverRef.current.pending = undefined
+    pending?.()
+  }
+
+  function clearHover() {
+    hoverRef.current.active = false
+    hoverRef.current.pending = undefined
+  }
+
+  return {
+    state,
+    itemRef,
+    enqueue,
+    close,
+    onHoverStart,
+    onHoverEnd,
+    clearHover,
+  }
+}

package/src/index.ts

@@ -107,10 +107,22 @@ export {
   type ScrollStepContext,
 } from './components/Carousel'
 export {
-  default as unstable_Snackbar,
+  default as UnstableSnackbar,
   useSnackbar as unstable_useSnackbar,
-  type SnackbarProps as unstable_SnackbarProps,
-  type SnackbarHandler as unstable_SnackbarHandler,
-  type SnackbarShowOptions as unstable_SnackbarShowOptions,
-} from './components/Snackbar'
+  type SnackbarProps as UnstableSnackbarProps,
+  type UseSnackbarProps as unstable_UseSnackbarProps,
+  type SnackbarCloseReason as unstable_SnackbarCloseReason,
+  type ShowSnackbarOptions as unstable_ShowSnackbarOptions,
+} from './components/Notification/Snackbar'
+export {
+  default as unstable_Toast,
+  useToast as unstable_useToast,
+  type ToastProps as unstable_ToastProps,
+  type ToastHandler as unstable_ToastHandler,
+  type ShowToastOptions as unstable_ShowToastOptions,
+} from './components/Notification/Toast'
+export {
+  type NotificationOrder as unstable_NotificationOrder,
+  type UseNotificationOptions as unstable_UseNotificationOptions,
+} from './components/Notification/types'
 import './components/FocusRing/index.css'

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

@@ -1,52 +0,0 @@
-import './index.css';
-import type { ElementType, ReactNode } from 'react';
-import { type ButtonProps } from '../Button';
-type SnackbarPosition = 'top' | 'bottom';
-type SnackbarButtonOption<T extends ElementType = 'button'> = Omit<ButtonProps<T>, 'component' | 'className' | 'size'> & {
-    /**
-     * ボタンのルート要素として使用するコンポーネント。ページ遷移を伴う場合は `Link` を指定する
-     * @default 'button'
-     * @example 'Link'
-     */
-    component?: T;
-} & ('button' extends T ? unknown : {
-    component: T;
-});
-export type SnackbarShowOptions<T extends ElementType = 'button'> = {
-    /**
-     * Snackbar を表示する時間（ミリ秒）。負の値は 0、数値でない値は 5000 として扱う
-     * @default 5000
-     */
-    duration?: number;
-    /**
-     * Snackbar の右側に表示するボタン
-     */
-    button?: SnackbarButtonOption<T>;
-};
-export type SnackbarHandler = {
-    show: <T extends ElementType = 'button'>(message: ReactNode, options?: SnackbarShowOptions<T>) => void;
-};
-export type SnackbarProps = {
-    /**
-     * Snackbar の表示位置。ボタン付きの場合は `bottom` に固定される
-     * @default 'bottom'
-     */
-    position?: SnackbarPosition;
-    /**
-     * 画面端からの距離（ピクセル）
-     * @default 16
-     */
-    offset?: number;
-    /**
-     * 暗い背景色
-     * @default false
-     */
-    dim?: boolean;
-    zIndex?: number;
-    portalContainer?: HTMLElement;
-    className?: string;
-};
-declare const Snackbar: import("react").ForwardRefExoticComponent<SnackbarProps & import("react").RefAttributes<SnackbarHandler>>;
-export default Snackbar;
-export declare function useSnackbar(props?: SnackbarProps): readonly [import("react/jsx-runtime").JSX.Element, <T extends ElementType = "button">(message: ReactNode, options?: SnackbarShowOptions<T>) => void];
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AASpB,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAS9D,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AAOpD,KAAK,gBAAgB,GAAG,KAAK,GAAG,QAAQ,CAAA;AAExC,KAAK,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI,IAAI,CAChE,WAAW,CAAC,CAAC,CAAC,EACd,WAAW,GAAG,WAAW,GAAG,MAAM,CACnC,GAAG;IACF;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,CAAA;CACd,GAAG,CAAC,QAAQ,SAAS,CAAC,GAAG,OAAO,GAAG;IAAE,SAAS,EAAE,CAAC,CAAA;CAAE,CAAC,CAAA;AAErD,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,IAAI;IAClE;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAA;CACjC,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EACrC,OAAO,EAAE,SAAS,EAClB,OAAO,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAC7B,IAAI,CAAA;CACV,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAeD,QAAA,MAAM,QAAQ,2GA6JZ,CAAA;eAEa,QAAQ;AAEvB,wBAAgB,WAAW,CAAC,KAAK,GAAE,aAAkB,uDAgBrC,CAAC,SAAS,WAAW,sBACxB,SAAS,YACR,mBAAmB,CAAC,CAAC,CAAC,WAKnC"}

package/dist/components/Snackbar/index2.cjs

@@ -1,268 +0,0 @@
-"use client";
-const require_useClassNames = require('../../_lib/useClassNames.cjs');
-const require_index = require('../Button/index2.cjs');
-require('./index.cjs');
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let react_aria_Overlay = require("react-aria/Overlay");
-let react_compiler_runtime = require("react-compiler-runtime");
-let react_aria_useToast = require("react-aria/useToast");
-let react_stately_useToastState = require("react-stately/useToastState");
-
-//#region src/components/Snackbar/index.tsx
-const DEFAULT_DURATION_MS = 5e3;
-const DEFAULT_Z_INDEX = 20;
-const ENTER_ANIMATION_DURATION_MS = 300;
-const Snackbar = (0, react.forwardRef)(function Snackbar({ position = "bottom", offset = 16, dim = false, zIndex = DEFAULT_Z_INDEX, portalContainer, className }, ref) {
-	"use memo";
-	const snackbarRef = (0, react.useRef)(null);
-	const queueRef = (0, react.useRef)([]);
-	const isShowingRef = (0, react.useRef)(false);
-	const hoverRef = (0, react.useRef)({
-		active: false,
-		pending: void 0
-	});
-	const playNextRef = (0, react.useRef)(void 0);
-	const state = (0, react_stately_useToastState.useToastState)({
-		maxVisibleToasts: 1,
-		wrapUpdate: (0, react.useCallback)(function wrapToastUpdate(update, action) {
-			if (action !== "remove") {
-				update();
-				return;
-			}
-			function finish() {
-				update();
-				playNextRef.current?.();
-			}
-			if (hoverRef.current.active) {
-				hoverRef.current.pending = () => wrapToastUpdate(update, "remove");
-				return;
-			}
-			if (snackbarRef.current === null) {
-				finish();
-				return;
-			}
-			const snackbar = snackbarRef.current;
-			snackbar.dataset.exiting = "true";
-			let completed = false;
-			let fallbackTimer = 0;
-			function handleAnimationEnd(event) {
-				if (event.target === snackbar && event.animationName === "charcoal-snackbar-exit") complete();
-			}
-			function complete() {
-				if (completed) return;
-				completed = true;
-				snackbar.removeEventListener("animationend", handleAnimationEnd);
-				window.clearTimeout(fallbackTimer);
-				finish();
-			}
-			snackbar.addEventListener("animationend", handleAnimationEnd);
-			fallbackTimer = window.setTimeout(complete, 400);
-			if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) complete();
-		}, [])
-	});
-	(0, react.useEffect)(() => {
-		return () => {
-			queueRef.current = [];
-			isShowingRef.current = false;
-		};
-	}, []);
-	function playNext() {
-		const next = queueRef.current.shift();
-		if (next === void 0) {
-			isShowingRef.current = false;
-			return;
-		}
-		const { duration, ...content } = next;
-		isShowingRef.current = true;
-		const enterMs = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : ENTER_ANIMATION_DURATION_MS;
-		state.add(content, { timeout: Math.max(1, duration + enterMs) });
-	}
-	playNextRef.current = playNext;
-	function show(message, options = {}) {
-		const { duration: durationOption = DEFAULT_DURATION_MS, button } = options;
-		const duration_0 = typeof durationOption === "number" && Number.isFinite(durationOption) ? Math.max(0, durationOption) : DEFAULT_DURATION_MS;
-		queueRef.current.push({
-			message,
-			button,
-			duration: duration_0
-		});
-		if (!isShowingRef.current) playNext();
-	}
-	(0, react.useImperativeHandle)(ref, () => ({ show }));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnackbarRegion, {
-		state,
-		position,
-		offset,
-		dim,
-		zIndex,
-		portalContainer,
-		className,
-		snackbarRef,
-		onHoverStart: () => {
-			hoverRef.current.active = true;
-		},
-		onHoverEnd: () => {
-			hoverRef.current.active = false;
-			const pending = hoverRef.current.pending;
-			hoverRef.current.pending = void 0;
-			pending?.();
-		},
-		onActionClose: () => {
-			hoverRef.current.active = false;
-			hoverRef.current.pending = void 0;
-		}
-	});
-});
-function useSnackbar(t0) {
-	"use memo";
-	const $ = (0, react_compiler_runtime.c)(13);
-	if ($[0] !== "48b810b1254edf94a70dbb5631d15f47f0d432d4831df67ae86f2f07a6c66338") {
-		for (let $i = 0; $i < 13; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "48b810b1254edf94a70dbb5631d15f47f0d432d4831df67ae86f2f07a6c66338";
-	}
-	let t1;
-	if ($[1] !== t0) {
-		t1 = t0 === void 0 ? {} : t0;
-		$[1] = t0;
-		$[2] = t1;
-	} else t1 = $[2];
-	const { position, offset, dim, zIndex, portalContainer, className } = t1;
-	const snackbarHandlerRef = (0, react.useRef)(null);
-	let t2;
-	if ($[3] !== className || $[4] !== dim || $[5] !== offset || $[6] !== portalContainer || $[7] !== position || $[8] !== zIndex) {
-		t2 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Snackbar, {
-			ref: snackbarHandlerRef,
-			position,
-			offset,
-			dim,
-			zIndex,
-			portalContainer,
-			className
-		});
-		$[3] = className;
-		$[4] = dim;
-		$[5] = offset;
-		$[6] = portalContainer;
-		$[7] = position;
-		$[8] = zIndex;
-		$[9] = t2;
-	} else t2 = $[9];
-	const element = t2;
-	let t3;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = function show(message, options) {
-			snackbarHandlerRef.current?.show(message, options);
-		};
-		$[10] = t3;
-	} else t3 = $[10];
-	const show = t3;
-	let t4;
-	if ($[11] !== element) {
-		t4 = [element, show];
-		$[11] = element;
-		$[12] = t4;
-	} else t4 = $[12];
-	return t4;
-}
-function SnackbarRegion({ state, position, offset, dim, zIndex, portalContainer, className, snackbarRef, onHoverStart, onHoverEnd, onActionClose }) {
-	const regionRef = (0, react.useRef)(null);
-	const pausedByFocusRef = (0, react.useRef)(false);
-	const { regionProps } = (0, react_aria_useToast.useToastRegion)({}, {
-		...state,
-		pauseAll() {
-			if (regionRef.current?.contains(document.activeElement)) {
-				pausedByFocusRef.current = true;
-				state.pauseAll();
-			}
-		},
-		resumeAll() {
-			if (pausedByFocusRef.current) {
-				pausedByFocusRef.current = false;
-				state.resumeAll();
-			}
-		}
-	}, regionRef);
-	const classNames = require_useClassNames.useClassNames("charcoal-snackbar-region", className);
-	if (state.visibleToasts.length === 0) return null;
-	const effectivePosition = state.visibleToasts.some((toast) => toast.content.button !== void 0) ? "bottom" : position;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_Overlay.Overlay, {
-		disableFocusManagement: true,
-		portalContainer,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			...regionProps,
-			ref: regionRef,
-			className: classNames,
-			"data-position": effectivePosition,
-			style: {
-				zIndex,
-				"--charcoal-snackbar-offset": `${offset}px`
-			},
-			children: state.visibleToasts.map((toast) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnackbarItem, {
-				toast,
-				state,
-				dim,
-				snackbarRef,
-				onHoverStart,
-				onHoverEnd,
-				onActionClose: () => {
-					onActionClose();
-					state.close(toast.key);
-				}
-			}, toast.key))
-		})
-	});
-}
-function SnackbarItem({ toast, state, dim, snackbarRef, onHoverStart, onHoverEnd, onActionClose }) {
-	const { toastProps, contentProps, titleProps } = (0, react_aria_useToast.useToast)({ toast }, state, snackbarRef);
-	const { message, button } = toast.content;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		...toastProps,
-		ref: snackbarRef,
-		className: "charcoal-snackbar",
-		"data-dim": dim,
-		"data-with-button": button !== void 0,
-		onPointerEnter: onHoverStart,
-		onPointerLeave: onHoverEnd,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			...contentProps,
-			role: "status",
-			className: "charcoal-snackbar-content",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				...titleProps,
-				className: "charcoal-snackbar-label",
-				children: message
-			})
-		}), button !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnackbarAction, {
-			button,
-			dim,
-			onClose: onActionClose
-		})]
-	});
-}
-function SnackbarAction({ button, dim, onClose }) {
-	const { onClick, variant, children: buttonChildren, ...buttonProps } = button;
-	function handleButtonClick(event) {
-		onClick?.(event);
-		onClose();
-	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PolymorphicButton, {
-		...buttonProps,
-		size: "S",
-		variant: variant ?? (dim ? "Navigation" : void 0),
-		onClick: handleButtonClick,
-		children: buttonChildren
-	});
-}
-function PolymorphicButton({ component, ...props }) {
-	if (component === void 0 || component === "button") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, { ...props });
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
-		...props,
-		component
-	});
-}
-
-//#endregion
-exports.default = Snackbar;
-exports.useSnackbar = useSnackbar;
-//# sourceMappingURL=index2.cjs.map