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

package/dist/components/Pagination/index2.js

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

package/dist/components/Pagination/index2.js.map

@@ -1 +1 @@
-{"version":3,"file":"index2.js","names":["size","ariaLabel","value","pageItemClassName"],"sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { usePaginationWindow } from './helper'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport {\n  PaginationContext,\n  usePaginationContext,\n  type LinkComponentProps,\n  type PaginationContextValue,\n  type PageRangeDisplayed,\n  type Size,\n} from './PaginationContext'\n\ntype NavButtonProps = {\n  direction: 'prev' | 'next'\n  ariaLabel: IconButtonProps['aria-label']\n}\n\nfunction NavButton({ direction, ariaLabel }: NavButtonProps) {\n  'use memo'\n  const {\n    page,\n    pageCount,\n    size,\n    isLinkMode,\n    makeUrl,\n    LinkComponent,\n    makeClickHandler,\n    linkProps,\n  } = usePaginationContext()\n\n  const isPrev = direction === 'prev'\n  const targetPage = isPrev\n    ? Math.max(1, page - 1)\n    : Math.min(pageCount, page + 1)\n  const disabled = isPrev ? page <= 1 : page >= pageCount\n  const navButtonClassName = useClassNames(\n    'charcoal-pagination-nav-button',\n    linkProps?.className,\n  )\n\n  return (\n    <IconButton\n      icon={isPrev ? '24/Prev' : '24/Next'}\n      size={size}\n      /* Use data-hidden, not [hidden]: Tailwind preflight's `[hidden] { display: none !important }` would clobber `visibility: hidden` and collapse the layout space. */\n      data-hidden={disabled || undefined}\n      aria-label={ariaLabel}\n      {...(isLinkMode && makeUrl\n        ? {\n            component: LinkComponent as 'a',\n            href: makeUrl(targetPage),\n            'aria-disabled': disabled,\n            ...linkProps,\n            className: navButtonClassName,\n          }\n        : {\n            disabled,\n            onClick: makeClickHandler(targetPage),\n            className: navButtonClassName,\n          })}\n    />\n  )\n}\n\nfunction PageItem({ value }: { value: number | string }) {\n  'use memo'\n  const {\n    page,\n    size,\n    isLinkMode,\n    makeUrl,\n    LinkComponent,\n    makeClickHandler,\n    linkProps,\n  } = usePaginationContext()\n  const pageItemClassName = useClassNames(\n    'charcoal-pagination-button',\n    linkProps?.className,\n  )\n\n  // 省略記号\n  if (value === '...') {\n    return (\n      <IconButton\n        icon=\"24/Dot\"\n        size={size}\n        disabled\n        className=\"charcoal-pagination-spacer\"\n        aria-hidden\n      />\n    )\n  }\n  // 現在ページ（クリック不可）\n  if (value === page) {\n    return (\n      <span className=\"charcoal-pagination-button\" aria-current=\"page\">\n        {value}\n      </span>\n    )\n  }\n  if (typeof value !== 'number') return null\n  // リンクモード: ページへのリンク\n  if (isLinkMode && makeUrl) {\n    return (\n      <LinkComponent\n        href={makeUrl(value)}\n        {...linkProps}\n        className={pageItemClassName}\n      >\n        {value}\n      </LinkComponent>\n    )\n  }\n  // ボタンモード: クリックでページ遷移\n  return (\n    <button\n      type=\"button\"\n      className=\"charcoal-pagination-button\"\n      onClick={makeClickHandler(value)}\n    >\n      {value}\n    </button>\n  )\n}\n\ninterface PaginationCommonProps {\n  page: number\n  pageCount: number\n  pageRangeDisplayed?: PageRangeDisplayed\n  size?: Size\n  ariaLabelPrev?: string\n  ariaLabelNext?: string\n}\n\ntype NavProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'>\n\n/**\n * Pagination component. Use either `onChange` (button mode) or `makeUrl` (link mode).\n *\n * @example\n * // Button mode - for client-side state\n * <Pagination page={1} pageCount={10} onChange={setPage} />\n *\n * @example\n * // Link mode - for server routing / static pages\n * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} />\n *\n * @example\n * // Link mode with custom component (e.g. Next.js Link)\n * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} component={Link} />\n *\n * @example\n * // Link mode with linkProps (e.g. Next.js scroll)\n * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} component={Link} linkProps={{ scroll: 'marker' }} />\n */\nexport type PaginationProps<T extends React.ElementType = 'a'> =\n  PaginationCommonProps &\n    NavProps &\n    (\n      | {\n          onChange(newPage: number): void\n          makeUrl?: never\n          component?: never\n          linkProps?: undefined\n        }\n      | {\n          makeUrl(page: number): string\n          onChange?: never\n          /**\n           * The component used for link elements. Receives `href`, `className`, and `children`.\n           * @default 'a'\n           */\n          component?: T\n          /**\n           * Additional props passed to all link elements (e.g. Next.js Link's scroll, prefetch).\n           */\n          linkProps?: Omit<\n            React.ComponentPropsWithoutRef<T>,\n            'href' | 'children'\n          >\n        }\n    )\n\nexport default function Pagination<T extends React.ElementType = 'a'>({\n  page,\n  pageCount,\n  pageRangeDisplayed,\n  size = 'M',\n  onChange,\n  makeUrl,\n  component: LinkComponent = 'a' as T,\n  linkProps,\n  className,\n  ariaLabelNext = 'Next',\n  ariaLabelPrev = 'Previous',\n  ...navProps\n}: PaginationProps<T>) {\n  'use memo'\n  const window = usePaginationWindow(page, pageCount, pageRangeDisplayed)\n  const isLinkMode = makeUrl !== undefined\n  const makeClickHandler = (value: number) => () => onChange?.(value)\n  const classNames = useClassNames('charcoal-pagination', className)\n\n  const contextValue = {\n    page,\n    pageCount,\n    size,\n    isLinkMode,\n    makeUrl,\n    LinkComponent,\n    makeClickHandler,\n    linkProps,\n  }\n\n  return (\n    <PaginationContext.Provider\n      value={\n        contextValue as PaginationContextValue<\n          React.ElementType<LinkComponentProps>\n        >\n      }\n    >\n      <nav\n        data-size={size}\n        aria-label=\"Pagination\"\n        {...navProps}\n        className={classNames}\n      >\n        <NavButton direction=\"prev\" ariaLabel={ariaLabelPrev} />\n        {window.map((p) => (\n          <PageItem key={p} value={p} />\n        ))}\n        <NavButton direction=\"next\" ariaLabel={ariaLabelNext} />\n      </nav>\n    </PaginationContext.Provider>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"index2.js","names":["size","ariaLabel","value","pageItemClassName"],"sources":["../../../src/components/Pagination/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { usePaginationWindow } from './helper'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport {\n  PaginationContext,\n  usePaginationContext,\n  type LinkComponentProps,\n  type PaginationContextValue,\n  type PageRangeDisplayed,\n  type Size,\n} from './PaginationContext'\n\ntype NavButtonProps = {\n  direction: 'prev' | 'next'\n  ariaLabel: IconButtonProps['aria-label']\n}\n\nfunction NavButton({ direction, ariaLabel }: NavButtonProps) {\n  'use memo'\n  const {\n    page,\n    pageCount,\n    size,\n    isLinkMode,\n    makeUrl,\n    LinkComponent,\n    makeClickHandler,\n    linkProps,\n  } = usePaginationContext()\n\n  const isPrev = direction === 'prev'\n  const targetPage = isPrev\n    ? Math.max(1, page - 1)\n    : Math.min(pageCount, page + 1)\n  const disabled = isPrev ? page <= 1 : page >= pageCount\n  const navButtonClassName = useClassNames(\n    'charcoal-pagination-nav-button',\n    linkProps?.className,\n  )\n\n  return (\n    <IconButton\n      icon={isPrev ? '24/Prev' : '24/Next'}\n      size={size}\n      /* Use data-hidden, not [hidden]: Tailwind preflight's `[hidden] { display: none !important }` would clobber `visibility: hidden` and collapse the layout space. */\n      data-hidden={disabled || undefined}\n      aria-label={ariaLabel}\n      {...(isLinkMode && makeUrl\n        ? {\n            component: LinkComponent as 'a',\n            href: makeUrl(targetPage),\n            'aria-disabled': disabled,\n            ...linkProps,\n            className: navButtonClassName,\n          }\n        : {\n            disabled,\n            onClick: makeClickHandler(targetPage),\n            className: navButtonClassName,\n          })}\n    />\n  )\n}\n\nfunction PageItem({ value }: { value: number | string }) {\n  'use memo'\n  const {\n    page,\n    size,\n    isLinkMode,\n    makeUrl,\n    LinkComponent,\n    makeClickHandler,\n    linkProps,\n  } = usePaginationContext()\n  const pageItemClassName = useClassNames(\n    'charcoal-pagination-button',\n    linkProps?.className,\n  )\n\n  // 省略記号\n  if (value === '...') {\n    return (\n      <IconButton\n        icon=\"24/Dot\"\n        size={size}\n        disabled\n        className=\"charcoal-pagination-spacer\"\n        aria-hidden\n      />\n    )\n  }\n  // 現在ページ（クリック不可）\n  if (value === page) {\n    return (\n      <span className=\"charcoal-pagination-button\" aria-current=\"page\">\n        {value}\n      </span>\n    )\n  }\n  if (typeof value !== 'number') return null\n  // リンクモード: ページへのリンク\n  if (isLinkMode && makeUrl) {\n    return (\n      <LinkComponent\n        href={makeUrl(value)}\n        {...linkProps}\n        className={pageItemClassName}\n      >\n        {value}\n      </LinkComponent>\n    )\n  }\n  // ボタンモード: クリックでページ遷移\n  return (\n    <button\n      type=\"button\"\n      className=\"charcoal-pagination-button\"\n      onClick={makeClickHandler(value)}\n    >\n      {value}\n    </button>\n  )\n}\n\ninterface PaginationCommonProps {\n  page: number\n  pageCount: number\n  pageRangeDisplayed?: PageRangeDisplayed\n  size?: Size\n  ariaLabelPrev?: string\n  ariaLabelNext?: string\n}\n\ntype NavProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'>\n\n/**\n * Pagination component. Use either `onChange` (button mode) or `makeUrl` (link mode).\n *\n * @example\n * // Button mode - for client-side state\n * <Pagination page={1} pageCount={10} onChange={setPage} />\n *\n * @example\n * // Link mode - for server routing / static pages\n * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} />\n *\n * @example\n * // Link mode with custom component (e.g. Next.js Link)\n * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} component={Link} />\n *\n * @example\n * // Link mode with linkProps (e.g. Next.js scroll)\n * <Pagination page={1} pageCount={10} makeUrl={(p) => `?page=${p}`} component={Link} linkProps={{ scroll: 'marker' }} />\n */\nexport type PaginationProps<T extends React.ElementType = 'a'> =\n  PaginationCommonProps &\n    NavProps &\n    (\n      | {\n          onChange(newPage: number): void\n          makeUrl?: never\n          component?: never\n          linkProps?: undefined\n        }\n      | {\n          makeUrl(page: number): string\n          onChange?: never\n          /**\n           * The component used for link elements. Receives `href`, `className`, and `children`.\n           * @default 'a'\n           */\n          component?: T\n          /**\n           * Additional props passed to all link elements (e.g. Next.js Link's scroll, prefetch).\n           */\n          linkProps?: Omit<\n            React.ComponentPropsWithoutRef<T>,\n            'href' | 'children'\n          >\n        }\n    )\n\nexport default function Pagination<T extends React.ElementType = 'a'>({\n  page,\n  pageCount,\n  pageRangeDisplayed,\n  size = 'M',\n  onChange,\n  makeUrl,\n  component: LinkComponent = 'a' as T,\n  linkProps,\n  className,\n  ariaLabelNext = 'Next',\n  ariaLabelPrev = 'Previous',\n  ...navProps\n}: PaginationProps<T>) {\n  'use memo'\n  const window = usePaginationWindow(page, pageCount, pageRangeDisplayed)\n  const isLinkMode = makeUrl !== undefined\n  const makeClickHandler = (value: number) => () => onChange?.(value)\n  const classNames = useClassNames('charcoal-pagination', className)\n\n  const contextValue = {\n    page,\n    pageCount,\n    size,\n    isLinkMode,\n    makeUrl,\n    LinkComponent,\n    makeClickHandler,\n    linkProps,\n  }\n\n  return (\n    <PaginationContext.Provider\n      value={\n        contextValue as PaginationContextValue<\n          React.ElementType<LinkComponentProps>\n        >\n      }\n    >\n      <nav\n        data-size={size}\n        aria-label=\"Pagination\"\n        {...navProps}\n        className={classNames}\n      >\n        <NavButton direction=\"prev\" ariaLabel={ariaLabelPrev} />\n        {window.map((p) => (\n          <PageItem key={p} value={p} />\n        ))}\n        <NavButton direction=\"next\" ariaLabel={ariaLabelNext} />\n      </nav>\n    </PaginationContext.Provider>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,268 @@
+"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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["wrapToastUpdate","duration","snackbarHandlerRef","position","offset","dim","zIndex","portalContainer","className"],"sources":["../../../src/components/Snackbar/index.tsx"],"sourcesContent":["import './index.css'\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react'\nimport type { ElementType, ReactNode, RefObject } from 'react'\nimport { Overlay } from 'react-aria/Overlay'\nimport { useToast, useToastRegion } from 'react-aria/useToast'\nimport {\n  useToastState,\n  type QueuedToast,\n  type ToastState,\n} from 'react-stately/useToastState'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport Button, { type ButtonProps } from '../Button'\n\nconst DEFAULT_DURATION_MS = 5000\nconst DEFAULT_Z_INDEX = 20\nconst ENTER_ANIMATION_DURATION_MS = 300\nconst EXIT_ANIMATION_DURATION_MS = 300\n\ntype SnackbarPosition = 'top' | 'bottom'\n\ntype SnackbarButtonOption<T extends ElementType = 'button'> = Omit<\n  ButtonProps<T>,\n  'component' | 'className' | 'size'\n> & {\n  /**\n   * ボタンのルート要素として使用するコンポーネント。ページ遷移を伴う場合は `Link` を指定する\n   * @default 'button'\n   * @example 'Link'\n   */\n  component?: T\n} & ('button' extends T ? unknown : { component: T })\n\nexport type SnackbarShowOptions<T extends ElementType = 'button'> = {\n  /**\n   * Snackbar を表示する時間（ミリ秒）。負の値は 0、数値でない値は 5000 として扱う\n   * @default 5000\n   */\n  duration?: number\n  /**\n   * Snackbar の右側に表示するボタン\n   */\n  button?: SnackbarButtonOption<T>\n}\n\nexport type SnackbarHandler = {\n  show: <T extends ElementType = 'button'>(\n    message: ReactNode,\n    options?: SnackbarShowOptions<T>,\n  ) => void\n}\n\nexport type SnackbarProps = {\n  /**\n   * Snackbar の表示位置。ボタン付きの場合は `bottom` に固定される\n   * @default 'bottom'\n   */\n  position?: SnackbarPosition\n  /**\n   * 画面端からの距離（ピクセル）\n   * @default 16\n   */\n  offset?: number\n  /**\n   * 暗い背景色\n   * @default false\n   */\n  dim?: boolean\n  zIndex?: number\n  portalContainer?: HTMLElement\n  className?: string\n}\n\ntype SnackbarContent = {\n  message: ReactNode\n  button?: SnackbarButtonContent\n}\n\ntype QueuedSnackbar = SnackbarContent & {\n  duration: number\n}\n\ntype SnackbarButtonContent = Omit<SnackbarButtonOption, 'component'> & {\n  component?: ElementType\n}\n\nconst Snackbar = forwardRef<SnackbarHandler, SnackbarProps>(function Snackbar(\n  {\n    position = 'bottom',\n    offset = 16,\n    dim = false,\n    zIndex = DEFAULT_Z_INDEX,\n    portalContainer,\n    className,\n  },\n  ref,\n) {\n  'use memo'\n\n  const snackbarRef = useRef<HTMLDivElement>(null)\n  const queueRef = useRef<QueuedSnackbar[]>([])\n  const isShowingRef = useRef(false)\n  const hoverRef = useRef({\n    active: false,\n    pending: undefined as (() => void) | undefined,\n  })\n  // wrapUpdate を固定したまま、後から定義する playNext の最新版を呼ぶ\n  const playNextRef = useRef<(() => void) | undefined>(undefined)\n\n  // wrapUpdate の参照が変わると useToastState が ToastQueue を作り直すため useCallback で固定する\n  const wrapToastUpdate = useCallback(function wrapToastUpdate(\n    update: () => void,\n    action: 'add' | 'remove' | 'clear',\n  ) {\n    if (action !== 'remove') {\n      update()\n      return\n    }\n\n    function finish() {\n      update()\n      playNextRef.current?.()\n    }\n\n    if (hoverRef.current.active) {\n      hoverRef.current.pending = () => wrapToastUpdate(update, 'remove')\n      return\n    }\n\n    if (snackbarRef.current === null) {\n      finish()\n      return\n    }\n    const snackbar: HTMLDivElement = snackbarRef.current\n\n    // allow-discreteが Newly Available で使えないので、要素の削除をアニメーション完了まで待つ\n    snackbar.dataset.exiting = 'true'\n    let completed = false\n    let fallbackTimer = 0 // complete 内で clearTimeout(setTimeout(...)) すると新規タイマーを即キャンセルしてしまう\n    function handleAnimationEnd(event: AnimationEvent) {\n      if (\n        event.target === snackbar &&\n        event.animationName === 'charcoal-snackbar-exit'\n      ) {\n        complete()\n      }\n    }\n    function complete() {\n      if (completed) return\n      completed = true\n      snackbar.removeEventListener('animationend', handleAnimationEnd)\n      window.clearTimeout(fallbackTimer)\n      finish()\n    }\n    snackbar.addEventListener('animationend', handleAnimationEnd)\n    fallbackTimer = window.setTimeout(\n      complete,\n      EXIT_ANIMATION_DURATION_MS + 100,\n    )\n    if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {\n      complete()\n    }\n  }, [])\n\n  const state = useToastState<SnackbarContent>({\n    maxVisibleToasts: 1,\n    wrapUpdate: wrapToastUpdate,\n  })\n\n  useEffect(() => {\n    return () => {\n      queueRef.current = []\n      isShowingRef.current = false\n    }\n  }, [])\n\n  function playNext() {\n    const next = queueRef.current.shift()\n    if (next === undefined) {\n      isShowingRef.current = false\n      return\n    }\n\n    const { duration, ...content } = next\n    isShowingRef.current = true\n    const enterMs = window.matchMedia?.('(prefers-reduced-motion: reduce)')\n      .matches\n      ? 0\n      : ENTER_ANIMATION_DURATION_MS\n    state.add(content, {\n      // react-stately は 0 を「タイマーなし」と扱うため、最小の正数を渡す\n      timeout: Math.max(1, duration + enterMs),\n    })\n  }\n  playNextRef.current = playNext\n\n  function show<T extends ElementType = 'button'>(\n    message: ReactNode,\n    options: SnackbarShowOptions<T> = {},\n  ) {\n    const { duration: durationOption = DEFAULT_DURATION_MS, button } = options\n    const duration =\n      typeof durationOption === 'number' && Number.isFinite(durationOption)\n        ? Math.max(0, durationOption)\n        : DEFAULT_DURATION_MS\n\n    queueRef.current.push({\n      message,\n      button: button as SnackbarButtonContent | undefined,\n      duration,\n    })\n    if (!isShowingRef.current) {\n      playNext()\n    }\n  }\n\n  useImperativeHandle(ref, () => ({ show }))\n\n  return (\n    <SnackbarRegion\n      state={state}\n      position={position}\n      offset={offset}\n      dim={dim}\n      zIndex={zIndex}\n      portalContainer={portalContainer}\n      className={className}\n      snackbarRef={snackbarRef}\n      onHoverStart={() => {\n        hoverRef.current.active = true\n      }}\n      onHoverEnd={() => {\n        hoverRef.current.active = false\n        const pending = hoverRef.current.pending\n        hoverRef.current.pending = undefined\n        pending?.()\n      }}\n      onActionClose={() => {\n        hoverRef.current.active = false\n        hoverRef.current.pending = undefined\n      }}\n    />\n  )\n})\n\nexport default Snackbar\n\nexport function useSnackbar(props: SnackbarProps = {}) {\n  'use memo'\n\n  const { position, offset, dim, zIndex, portalContainer, className } = props\n  const snackbarHandlerRef = useRef<SnackbarHandler>(null)\n  const element = (\n    <Snackbar\n      ref={snackbarHandlerRef}\n      position={position}\n      offset={offset}\n      dim={dim}\n      zIndex={zIndex}\n      portalContainer={portalContainer}\n      className={className}\n    />\n  )\n  function show<T extends ElementType = 'button'>(\n    message: ReactNode,\n    options?: SnackbarShowOptions<T>,\n  ) {\n    snackbarHandlerRef.current?.show(message, options)\n  }\n  return [element, show] as const\n}\n\nfunction SnackbarRegion({\n  state,\n  position,\n  offset,\n  dim,\n  zIndex,\n  portalContainer,\n  className,\n  snackbarRef,\n  onHoverStart,\n  onHoverEnd,\n  onActionClose,\n}: {\n  state: ToastState<SnackbarContent>\n  position: SnackbarPosition\n  offset: number\n  dim: boolean\n  zIndex: number\n  portalContainer?: HTMLElement\n  className?: string\n  snackbarRef: RefObject<HTMLDivElement>\n  onHoverStart: () => void\n  onHoverEnd: () => void\n  onActionClose: () => void\n}) {\n  const regionRef = useRef<HTMLDivElement>(null)\n  const pausedByFocusRef = useRef(false)\n  const timerState: ToastState<SnackbarContent> = {\n    ...state,\n    pauseAll() {\n      if (regionRef.current?.contains(document.activeElement)) {\n        pausedByFocusRef.current = true\n        state.pauseAll()\n      }\n    },\n    resumeAll() {\n      if (pausedByFocusRef.current) {\n        pausedByFocusRef.current = false\n        state.resumeAll()\n      }\n    },\n  }\n  const { regionProps } = useToastRegion({}, timerState, regionRef)\n  const classNames = useClassNames('charcoal-snackbar-region', className)\n\n  if (state.visibleToasts.length === 0) {\n    return null\n  }\n\n  // ボタン付きの Snackbar は常に下部に表示される\n  const hasButton = state.visibleToasts.some(\n    (toast) => toast.content.button !== undefined,\n  )\n  const effectivePosition = hasButton ? 'bottom' : position\n\n  return (\n    <Overlay disableFocusManagement portalContainer={portalContainer}>\n      <div\n        {...regionProps}\n        ref={regionRef}\n        className={classNames}\n        data-position={effectivePosition}\n        style={{\n          zIndex,\n          '--charcoal-snackbar-offset': `${offset}px`,\n        }}\n      >\n        {state.visibleToasts.map((toast) => (\n          <SnackbarItem\n            key={toast.key}\n            toast={toast}\n            state={state}\n            dim={dim}\n            snackbarRef={snackbarRef}\n            onHoverStart={onHoverStart}\n            onHoverEnd={onHoverEnd}\n            onActionClose={() => {\n              onActionClose()\n              state.close(toast.key)\n            }}\n          />\n        ))}\n      </div>\n    </Overlay>\n  )\n}\n\nfunction SnackbarItem({\n  toast,\n  state,\n  dim,\n  snackbarRef,\n  onHoverStart,\n  onHoverEnd,\n  onActionClose,\n}: {\n  toast: QueuedToast<SnackbarContent>\n  state: ToastState<SnackbarContent>\n  dim: boolean\n  snackbarRef: RefObject<HTMLDivElement>\n  onHoverStart: () => void\n  onHoverEnd: () => void\n  onActionClose: () => void\n}) {\n  const { toastProps, contentProps, titleProps } = useToast(\n    { toast },\n    state,\n    snackbarRef,\n  )\n  const { message, button } = toast.content\n\n  return (\n    <div\n      {...toastProps}\n      ref={snackbarRef}\n      className=\"charcoal-snackbar\"\n      data-dim={dim}\n      data-with-button={button !== undefined}\n      onPointerEnter={onHoverStart}\n      onPointerLeave={onHoverEnd}\n    >\n      <div\n        {...contentProps}\n        role=\"status\"\n        className=\"charcoal-snackbar-content\"\n      >\n        <div {...titleProps} className=\"charcoal-snackbar-label\">\n          {message}\n        </div>\n      </div>\n      {button !== undefined && (\n        <SnackbarAction button={button} dim={dim} onClose={onActionClose} />\n      )}\n    </div>\n  )\n}\n\nfunction SnackbarAction({\n  button,\n  dim,\n  onClose,\n}: {\n  button: SnackbarButtonContent\n  dim: boolean\n  onClose: () => void\n}) {\n  const { onClick, variant, children: buttonChildren, ...buttonProps } = button\n\n  function handleButtonClick(\n    event: Parameters<NonNullable<ButtonProps<'button'>['onClick']>>[0],\n  ) {\n    onClick?.(event)\n    onClose()\n  }\n\n  return (\n    <PolymorphicButton\n      {...buttonProps}\n      size=\"S\"\n      variant={variant ?? (dim ? 'Navigation' : undefined)}\n      onClick={handleButtonClick}\n    >\n      {buttonChildren}\n    </PolymorphicButton>\n  )\n}\n\nfunction PolymorphicButton({\n  component,\n  ...props\n}: Omit<ButtonProps, 'component'> & { component?: ElementType }) {\n  if (component === undefined || component === 'button') {\n    return <Button {...props} />\n  }\n\n  return <Button {...props} component={component} />\n}\n"],"mappings":"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"}