@charcoal-ui/react 6.1.0-beta.5 → 6.1.0

package/dist/components/Notification/NotificationRegion.cjs

@@ -8,7 +8,7 @@ let react_aria_useToast = require("react-aria/useToast");
 //#region src/components/Notification/NotificationRegion.tsx
 const DEFAULT_OFFSET = 16;
 const DEFAULT_Z_INDEX = 20;
-function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, zIndex = DEFAULT_Z_INDEX, portalContainer, className, children }) {
+function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, headerOffset = 0, zIndex = DEFAULT_Z_INDEX, portalContainer, className, children }) {
 	const regionRef = (0, react.useRef)(null);
 	const pausedByFocusRef = (0, react.useRef)(false);
 	const { regionProps } = (0, react_aria_useToast.useToastRegion)({}, {
@@ -26,21 +26,26 @@ function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, zI
 			}
 		}
 	}, regionRef);
-	const classNames = require_useClassNames.useClassNames("charcoal-notification-region", `charcoal-${name}-region`, className);
+	const classNames = require_useClassNames.useClassNames("charcoal-notification-region", className);
+	const effectiveOffset = Math.max(offset, DEFAULT_OFFSET);
 	if (state.visibleToasts.length === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_Overlay.Overlay, {
 		disableFocusManagement: true,
 		portalContainer,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			...regionProps,
 			ref: regionRef,
 			className: classNames,
-			"data-position": position,
 			style: {
 				zIndex,
-				[`--charcoal-${name}-offset`]: `${offset}px`
+				[`--charcoal-${name}-offset`]: `${effectiveOffset}px`,
+				justifyContent: position === "top" ? "flex-start" : "flex-end"
 			},
-			children
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: { height: `calc(${headerOffset}px + env(safe-area-inset-top, 0px) + var(--charcoal-${name}-offset))` } }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-position": position,
+				className: `charcoal-${name}-region`,
+				children
+			})]
 		})
 	});
 }

package/dist/components/Notification/NotificationRegion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationRegion.cjs","names":[],"sources":["../../../src/components/Notification/NotificationRegion.tsx"],"sourcesContent":["import { useRef, type CSSProperties, type ReactNode } from 'react'\nimport { Overlay } from 'react-aria/Overlay'\nimport { useToastRegion } from 'react-aria/useToast'\nimport type { ToastState } from 'react-stately/useToastState'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { NotificationName, Position } from './types'\n\nconst DEFAULT_OFFSET = 16\nconst DEFAULT_Z_INDEX = 20\n\nexport function NotificationRegion<TContent>({\n  name,\n  state,\n  position,\n  offset = DEFAULT_OFFSET,\n  zIndex = DEFAULT_Z_INDEX,\n  portalContainer,\n  className,\n  children,\n}: {\n  name: NotificationName\n  state: ToastState<TContent>\n  position: Position\n  offset?: number\n  zIndex?: number\n  portalContainer?: HTMLElement\n  className?: string\n  children: ReactNode\n}) {\n  const regionRef = useRef<HTMLDivElement>(null)\n  const pausedByFocusRef = useRef(false)\n  const timerState: ToastState<TContent> = {\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(\n    'charcoal-notification-region',\n    `charcoal-${name}-region`,\n    className,\n  )\n\n  if (state.visibleToasts.length === 0) {\n    return null\n  }\n\n  return (\n    <Overlay disableFocusManagement portalContainer={portalContainer}>\n      <div\n        {...regionProps}\n        ref={regionRef}\n        className={classNames}\n        data-position={position}\n        style={\n          {\n            zIndex,\n            [`--charcoal-${name}-offset`]: `${offset}px`,\n          } as CSSProperties\n        }\n      >\n        {children}\n      </div>\n    </Overlay>\n  )\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAExB,SAAgB,mBAA6B,EAC3C,MACA,OACA,UACA,SAAS,gBACT,SAAS,iBACT,iBACA,WACA,YAUC;CACD,MAAM,8BAAmC,IAAI;CAC7C,MAAM,qCAA0B,KAAK;CAgBrC,MAAM,EAAE,wDAA+B,CAAC,GAAG;EAdzC,GAAG;EACH,WAAW;GACT,IAAI,UAAU,SAAS,SAAS,SAAS,aAAa,GAAG;IACvD,iBAAiB,UAAU;IAC3B,MAAM,SAAS;GACjB;EACF;EACA,YAAY;GACV,IAAI,iBAAiB,SAAS;IAC5B,iBAAiB,UAAU;IAC3B,MAAM,UAAU;GAClB;EACF;CAEyC,GAAY,SAAS;CAChE,MAAM,aAAa,oCACjB,gCACA,YAAY,KAAI,UAChB,SACF;CAEA,IAAI,MAAM,cAAc,WAAW,GACjC,OAAO;CAGT,OACE,2CAAC,4BAAD;EAAS;EAAwC;YAC/C,2CAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAW;GACX,iBAAe;GACf,OACE;IACE;KACC,cAAc,KAAI,WAAY,GAAG,OAAM;GAC1C;GAGD;EACE;CACE;AAEb"}
+{"version":3,"file":"NotificationRegion.cjs","names":[],"sources":["../../../src/components/Notification/NotificationRegion.tsx"],"sourcesContent":["import { useRef, type CSSProperties, type ReactNode } from 'react'\nimport { Overlay } from 'react-aria/Overlay'\nimport { useToastRegion } from 'react-aria/useToast'\nimport type { ToastState } from 'react-stately/useToastState'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { NotificationName, Position } from './types'\n\nconst DEFAULT_OFFSET = 16\nconst DEFAULT_Z_INDEX = 20\n\nexport function NotificationRegion<TContent>({\n  name,\n  state,\n  position,\n  offset = DEFAULT_OFFSET,\n  headerOffset = 0,\n  zIndex = DEFAULT_Z_INDEX,\n  portalContainer,\n  className,\n  children,\n}: {\n  name: NotificationName\n  state: ToastState<TContent>\n  position: Position\n  offset?: number\n  headerOffset?: number\n  zIndex?: number\n  portalContainer?: HTMLElement\n  className?: string\n  children: ReactNode\n}) {\n  const regionRef = useRef<HTMLDivElement>(null)\n  const pausedByFocusRef = useRef(false)\n  const timerState: ToastState<TContent> = {\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-notification-region', className)\n  const effectiveOffset = Math.max(offset, DEFAULT_OFFSET)\n\n  if (state.visibleToasts.length === 0) {\n    return null\n  }\n\n  return (\n    <Overlay disableFocusManagement portalContainer={portalContainer}>\n      <div\n        {...regionProps}\n        ref={regionRef}\n        className={classNames}\n        style={\n          {\n            zIndex,\n            [`--charcoal-${name}-offset`]: `${effectiveOffset}px`,\n            justifyContent: position === 'top' ? 'flex-start' : 'flex-end',\n          } as CSSProperties\n        }\n      >\n        <div\n          style={{\n            height: `calc(${headerOffset}px + env(safe-area-inset-top, 0px) + var(--charcoal-${name}-offset))`,\n          }}\n        />\n        <div data-position={position} className={`charcoal-${name}-region`}>\n          {children}\n        </div>\n      </div>\n    </Overlay>\n  )\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAExB,SAAgB,mBAA6B,EAC3C,MACA,OACA,UACA,SAAS,gBACT,eAAe,GACf,SAAS,iBACT,iBACA,WACA,YAWC;CACD,MAAM,8BAAmC,IAAI;CAC7C,MAAM,qCAA0B,KAAK;CAgBrC,MAAM,EAAE,wDAA+B,CAAC,GAAG;EAdzC,GAAG;EACH,WAAW;GACT,IAAI,UAAU,SAAS,SAAS,SAAS,aAAa,GAAG;IACvD,iBAAiB,UAAU;IAC3B,MAAM,SAAS;GACjB;EACF;EACA,YAAY;GACV,IAAI,iBAAiB,SAAS;IAC5B,iBAAiB,UAAU;IAC3B,MAAM,UAAU;GAClB;EACF;CAEyC,GAAY,SAAS;CAChE,MAAM,aAAa,oCAAc,gCAAgC,SAAS;CAC1E,MAAM,kBAAkB,KAAK,IAAI,QAAQ,cAAc;CAEvD,IAAI,MAAM,cAAc,WAAW,GACjC,OAAO;CAGT,OACE,2CAAC,4BAAD;EAAS;EAAwC;YAC/C,4CAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAW;GACX,OACE;IACE;KACC,cAAc,KAAI,WAAY,GAAG,gBAAe;IACjD,gBAAgB,aAAa,QAAQ,eAAe;GACtD;aATJ,CAYE,2CAAC,OAAD,EACE,OAAO,EACL,QAAQ,QAAQ,aAAY,sDAAuD,KAAI,WACzF,EAAE,IAEJ,2CAAC,OAAD;IAAK,iBAAe;IAAU,WAAW,YAAY,KAAI;IACtD;GACE,EACF;;CACE;AAEb"}

package/dist/components/Notification/NotificationRegion.d.ts

@@ -1,11 +1,12 @@
 import { type ReactNode } from 'react';
 import type { ToastState } from 'react-stately/useToastState';
 import type { NotificationName, Position } from './types';
-export declare function NotificationRegion<TContent>({ name, state, position, offset, zIndex, portalContainer, className, children, }: {
+export declare function NotificationRegion<TContent>({ name, state, position, offset, headerOffset, zIndex, portalContainer, className, children, }: {
     name: NotificationName;
     state: ToastState<TContent>;
     position: Position;
     offset?: number;
+    headerOffset?: number;
     zIndex?: number;
     portalContainer?: HTMLElement;
     className?: string;

package/dist/components/Notification/NotificationRegion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationRegion.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/NotificationRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGlE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAE7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAKzD,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,EAC3C,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAuB,EACvB,MAAwB,EACxB,eAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,gBAAgB,CAAA;IACtB,KAAK,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;IAC3B,QAAQ,EAAE,QAAQ,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB,kDA+CA"}
+{"version":3,"file":"NotificationRegion.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/NotificationRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAGlE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAE7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAKzD,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,EAC3C,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAuB,EACvB,YAAgB,EAChB,MAAwB,EACxB,eAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,gBAAgB,CAAA;IACtB,KAAK,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAA;IAC3B,QAAQ,EAAE,QAAQ,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;CACpB,kDAmDA"}

package/dist/components/Notification/NotificationRegion.js

@@ -1,14 +1,14 @@
 "use client";
 import { useClassNames } from "../../_lib/useClassNames.js";
 import { useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Overlay } from "react-aria/Overlay";
 import { useToastRegion } from "react-aria/useToast";
 
 //#region src/components/Notification/NotificationRegion.tsx
 const DEFAULT_OFFSET = 16;
 const DEFAULT_Z_INDEX = 20;
-function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, zIndex = DEFAULT_Z_INDEX, portalContainer, className, children }) {
+function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, headerOffset = 0, zIndex = DEFAULT_Z_INDEX, portalContainer, className, children }) {
 	const regionRef = useRef(null);
 	const pausedByFocusRef = useRef(false);
 	const { regionProps } = useToastRegion({}, {
@@ -26,21 +26,26 @@ function NotificationRegion({ name, state, position, offset = DEFAULT_OFFSET, zI
 			}
 		}
 	}, regionRef);
-	const classNames = useClassNames("charcoal-notification-region", `charcoal-${name}-region`, className);
+	const classNames = useClassNames("charcoal-notification-region", className);
+	const effectiveOffset = Math.max(offset, DEFAULT_OFFSET);
 	if (state.visibleToasts.length === 0) return null;
 	return /* @__PURE__ */ jsx(Overlay, {
 		disableFocusManagement: true,
 		portalContainer,
-		children: /* @__PURE__ */ jsx("div", {
+		children: /* @__PURE__ */ jsxs("div", {
 			...regionProps,
 			ref: regionRef,
 			className: classNames,
-			"data-position": position,
 			style: {
 				zIndex,
-				[`--charcoal-${name}-offset`]: `${offset}px`
+				[`--charcoal-${name}-offset`]: `${effectiveOffset}px`,
+				justifyContent: position === "top" ? "flex-start" : "flex-end"
 			},
-			children
+			children: [/* @__PURE__ */ jsx("div", { style: { height: `calc(${headerOffset}px + env(safe-area-inset-top, 0px) + var(--charcoal-${name}-offset))` } }), /* @__PURE__ */ jsx("div", {
+				"data-position": position,
+				className: `charcoal-${name}-region`,
+				children
+			})]
 		})
 	});
 }

package/dist/components/Notification/NotificationRegion.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationRegion.js","names":[],"sources":["../../../src/components/Notification/NotificationRegion.tsx"],"sourcesContent":["import { useRef, type CSSProperties, type ReactNode } from 'react'\nimport { Overlay } from 'react-aria/Overlay'\nimport { useToastRegion } from 'react-aria/useToast'\nimport type { ToastState } from 'react-stately/useToastState'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { NotificationName, Position } from './types'\n\nconst DEFAULT_OFFSET = 16\nconst DEFAULT_Z_INDEX = 20\n\nexport function NotificationRegion<TContent>({\n  name,\n  state,\n  position,\n  offset = DEFAULT_OFFSET,\n  zIndex = DEFAULT_Z_INDEX,\n  portalContainer,\n  className,\n  children,\n}: {\n  name: NotificationName\n  state: ToastState<TContent>\n  position: Position\n  offset?: number\n  zIndex?: number\n  portalContainer?: HTMLElement\n  className?: string\n  children: ReactNode\n}) {\n  const regionRef = useRef<HTMLDivElement>(null)\n  const pausedByFocusRef = useRef(false)\n  const timerState: ToastState<TContent> = {\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(\n    'charcoal-notification-region',\n    `charcoal-${name}-region`,\n    className,\n  )\n\n  if (state.visibleToasts.length === 0) {\n    return null\n  }\n\n  return (\n    <Overlay disableFocusManagement portalContainer={portalContainer}>\n      <div\n        {...regionProps}\n        ref={regionRef}\n        className={classNames}\n        data-position={position}\n        style={\n          {\n            zIndex,\n            [`--charcoal-${name}-offset`]: `${offset}px`,\n          } as CSSProperties\n        }\n      >\n        {children}\n      </div>\n    </Overlay>\n  )\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAExB,SAAgB,mBAA6B,EAC3C,MACA,OACA,UACA,SAAS,gBACT,SAAS,iBACT,iBACA,WACA,YAUC;CACD,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,mBAAmB,OAAO,KAAK;CAgBrC,MAAM,EAAE,gBAAgB,eAAe,CAAC,GAAG;EAdzC,GAAG;EACH,WAAW;GACT,IAAI,UAAU,SAAS,SAAS,SAAS,aAAa,GAAG;IACvD,iBAAiB,UAAU;IAC3B,MAAM,SAAS;GACjB;EACF;EACA,YAAY;GACV,IAAI,iBAAiB,SAAS;IAC5B,iBAAiB,UAAU;IAC3B,MAAM,UAAU;GAClB;EACF;CAEyC,GAAY,SAAS;CAChE,MAAM,aAAa,cACjB,gCACA,YAAY,KAAI,UAChB,SACF;CAEA,IAAI,MAAM,cAAc,WAAW,GACjC,OAAO;CAGT,OACE,oBAAC,SAAD;EAAS;EAAwC;YAC/C,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAW;GACX,iBAAe;GACf,OACE;IACE;KACC,cAAc,KAAI,WAAY,GAAG,OAAM;GAC1C;GAGD;EACE;CACE;AAEb"}
+{"version":3,"file":"NotificationRegion.js","names":[],"sources":["../../../src/components/Notification/NotificationRegion.tsx"],"sourcesContent":["import { useRef, type CSSProperties, type ReactNode } from 'react'\nimport { Overlay } from 'react-aria/Overlay'\nimport { useToastRegion } from 'react-aria/useToast'\nimport type { ToastState } from 'react-stately/useToastState'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport type { NotificationName, Position } from './types'\n\nconst DEFAULT_OFFSET = 16\nconst DEFAULT_Z_INDEX = 20\n\nexport function NotificationRegion<TContent>({\n  name,\n  state,\n  position,\n  offset = DEFAULT_OFFSET,\n  headerOffset = 0,\n  zIndex = DEFAULT_Z_INDEX,\n  portalContainer,\n  className,\n  children,\n}: {\n  name: NotificationName\n  state: ToastState<TContent>\n  position: Position\n  offset?: number\n  headerOffset?: number\n  zIndex?: number\n  portalContainer?: HTMLElement\n  className?: string\n  children: ReactNode\n}) {\n  const regionRef = useRef<HTMLDivElement>(null)\n  const pausedByFocusRef = useRef(false)\n  const timerState: ToastState<TContent> = {\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-notification-region', className)\n  const effectiveOffset = Math.max(offset, DEFAULT_OFFSET)\n\n  if (state.visibleToasts.length === 0) {\n    return null\n  }\n\n  return (\n    <Overlay disableFocusManagement portalContainer={portalContainer}>\n      <div\n        {...regionProps}\n        ref={regionRef}\n        className={classNames}\n        style={\n          {\n            zIndex,\n            [`--charcoal-${name}-offset`]: `${effectiveOffset}px`,\n            justifyContent: position === 'top' ? 'flex-start' : 'flex-end',\n          } as CSSProperties\n        }\n      >\n        <div\n          style={{\n            height: `calc(${headerOffset}px + env(safe-area-inset-top, 0px) + var(--charcoal-${name}-offset))`,\n          }}\n        />\n        <div data-position={position} className={`charcoal-${name}-region`}>\n          {children}\n        </div>\n      </div>\n    </Overlay>\n  )\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AAExB,SAAgB,mBAA6B,EAC3C,MACA,OACA,UACA,SAAS,gBACT,eAAe,GACf,SAAS,iBACT,iBACA,WACA,YAWC;CACD,MAAM,YAAY,OAAuB,IAAI;CAC7C,MAAM,mBAAmB,OAAO,KAAK;CAgBrC,MAAM,EAAE,gBAAgB,eAAe,CAAC,GAAG;EAdzC,GAAG;EACH,WAAW;GACT,IAAI,UAAU,SAAS,SAAS,SAAS,aAAa,GAAG;IACvD,iBAAiB,UAAU;IAC3B,MAAM,SAAS;GACjB;EACF;EACA,YAAY;GACV,IAAI,iBAAiB,SAAS;IAC5B,iBAAiB,UAAU;IAC3B,MAAM,UAAU;GAClB;EACF;CAEyC,GAAY,SAAS;CAChE,MAAM,aAAa,cAAc,gCAAgC,SAAS;CAC1E,MAAM,kBAAkB,KAAK,IAAI,QAAQ,cAAc;CAEvD,IAAI,MAAM,cAAc,WAAW,GACjC,OAAO;CAGT,OACE,oBAAC,SAAD;EAAS;EAAwC;YAC/C,qBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAW;GACX,OACE;IACE;KACC,cAAc,KAAI,WAAY,GAAG,gBAAe;IACjD,gBAAgB,aAAa,QAAQ,eAAe;GACtD;aATJ,CAYE,oBAAC,OAAD,EACE,OAAO,EACL,QAAQ,QAAQ,aAAY,sDAAuD,KAAI,WACzF,EAAE,IAEJ,oBAAC,OAAD;IAAK,iBAAe;IAAU,WAAW,YAAY,KAAI;IACtD;GACE,EACF;;CACE;AAEb"}

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

@@ -9,6 +9,7 @@ export type SnackbarRootAttributes = {
 export type ShowSnackbarOptions = {
     action?: ReactNode;
     onClose?: (reason: SnackbarCloseReason) => void;
+    /** スナックバー自体にdata属性を渡せる */
     rootAttributes?: SnackbarRootAttributes;
 };
 type SnackbarBaseProps = {

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;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,GAAG,QAAQ,GAAG,WAAW,CAAA;AAExD,MAAM,MAAM,sBAAsB,GAAG;IACnC,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;CAC/D,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC/C,cAAc,CAAC,EAAE,sBAAsB,CAAA;CACxC,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;AAQD,QAAA,MAAM,QAAQ;IAfZ,6BAA6B;YACrB,WAAW,CAAC,SAAS,CAAC;kDAkB/B,CAAA;eAEc,QAAQ;AAEvB,wBAAgB,WAAW,CAAC,KAAK,GAAE,gBAAqB,gEAiB/B,SAAS,YAAW,mBAAmB,WAiD/D"}
+{"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,GAAG,QAAQ,GAAG,WAAW,CAAA;AAExD,MAAM,MAAM,sBAAsB,GAAG;IACnC,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;CAC/D,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC/C,0BAA0B;IAC1B,cAAc,CAAC,EAAE,sBAAsB,CAAA;CACxC,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;AAQD,QAAA,MAAM,QAAQ;IAfZ,6BAA6B;YACrB,WAAW,CAAC,SAAS,CAAC;kDAkB/B,CAAA;eAEc,QAAQ;AAEvB,wBAAgB,WAAW,CAAC,KAAK,GAAE,gBAAqB,gEAiB/B,SAAS,YAAW,mBAAmB,WAiD/D"}

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

@@ -1 +1 @@
-{"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 = 'action' | 'unmounted'\n\nexport type SnackbarRootAttributes = {\n  [key: `data-${string}`]: string | number | boolean | undefined\n}\n\nexport type ShowSnackbarOptions = {\n  action?: ReactNode\n  onClose?: (reason: SnackbarCloseReason) => void\n  rootAttributes?: SnackbarRootAttributes\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  rootAttributes?: SnackbarRootAttributes\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, 'action'>('snackbar', {\n      duration,\n      order,\n      animateReplace: true,\n    })\n\n  function show(message: ReactNode, options: ShowSnackbarOptions = {}) {\n    const onClose = options.onClose\n    enqueue(\n      {\n        message,\n        action: options.action,\n        rootAttributes: options.rootAttributes,\n      },\n      onClose === undefined\n        ? undefined\n        : (reason) => onClose(reason ?? 'unmounted'),\n    )\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          {...toast.content.rootAttributes}\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":";;;;;;;;;;;AA4CA,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,kDAAgD,YAAY;EAC1D;EACA;EACA,gBAAgB;CAClB,CAAC;CAEH,SAAS,KAAK,SAAoB,UAA+B,CAAC,GAAG;EACnE,MAAM,UAAU,QAAQ;EACxB,QACE;GACE;GACA,QAAQ,QAAQ;GAChB,gBAAgB,QAAQ;EAC1B,GACA,YAAY,SACR,UACC,WAAW,QAAQ,UAAU,WAAW,CAC/C;CACF;CAoCA,OAAO,CAAC,2CA7BL,+CAAD;EACE,MAAK;EACE;EACP,UARc,MAAM,cAAc,MACnC,UAAU,MAAM,QAAQ,WAAW,MAEZ,IAAY,WAAW;EAM7C,GAAI;YAEH,MAAM,cAAc,KAAKA,YACxB,yCAAC,2CAAD;GACE,GAAIA,QAAM,QAAQ;GAClB,KAAKA,QAAM;GACX,MAAK;GACL,OAAOA;GACA;GACE;GACK;GACF;GACZ,YAAU;GACV,oBAAkBA,QAAM,QAAQ,WAAW;EAO3B,GALfA,QAAM,QAAQ,WAAW,UACxB,2CAAC,OAAD;GAAK,eAAe,MAAMA,QAAM,KAAK,QAAQ;aAC3C,2CAAC,gBAAD,EAAgB,QAAQA,QAAM,QAAQ,OAAO;EAC1C,EAES,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"}
+{"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 = 'action' | 'unmounted'\n\nexport type SnackbarRootAttributes = {\n  [key: `data-${string}`]: string | number | boolean | undefined\n}\n\nexport type ShowSnackbarOptions = {\n  action?: ReactNode\n  onClose?: (reason: SnackbarCloseReason) => void\n  /** スナックバー自体にdata属性を渡せる */\n  rootAttributes?: SnackbarRootAttributes\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  rootAttributes?: SnackbarRootAttributes\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, 'action'>('snackbar', {\n      duration,\n      order,\n      animateReplace: true,\n    })\n\n  function show(message: ReactNode, options: ShowSnackbarOptions = {}) {\n    const onClose = options.onClose\n    enqueue(\n      {\n        message,\n        action: options.action,\n        rootAttributes: options.rootAttributes,\n      },\n      onClose === undefined\n        ? undefined\n        : (reason) => onClose(reason ?? 'unmounted'),\n    )\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          {...toast.content.rootAttributes}\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":";;;;;;;;;;;AA6CA,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,kDAAgD,YAAY;EAC1D;EACA;EACA,gBAAgB;CAClB,CAAC;CAEH,SAAS,KAAK,SAAoB,UAA+B,CAAC,GAAG;EACnE,MAAM,UAAU,QAAQ;EACxB,QACE;GACE;GACA,QAAQ,QAAQ;GAChB,gBAAgB,QAAQ;EAC1B,GACA,YAAY,SACR,UACC,WAAW,QAAQ,UAAU,WAAW,CAC/C;CACF;CAoCA,OAAO,CAAC,2CA7BL,+CAAD;EACE,MAAK;EACE;EACP,UARc,MAAM,cAAc,MACnC,UAAU,MAAM,QAAQ,WAAW,MAEZ,IAAY,WAAW;EAM7C,GAAI;YAEH,MAAM,cAAc,KAAKA,YACxB,yCAAC,2CAAD;GACE,GAAIA,QAAM,QAAQ;GAClB,KAAKA,QAAM;GACX,MAAK;GACL,OAAOA;GACA;GACE;GACK;GACF;GACZ,YAAU;GACV,oBAAkBA,QAAM,QAAQ,WAAW;EAO3B,GALfA,QAAM,QAAQ,WAAW,UACxB,2CAAC,OAAD;GAAK,eAAe,MAAMA,QAAM,KAAK,QAAQ;aAC3C,2CAAC,gBAAD,EAAgB,QAAQA,QAAM,QAAQ,OAAO;EAC1C,EAES,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.map

@@ -1 +1 @@
-{"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 = 'action' | 'unmounted'\n\nexport type SnackbarRootAttributes = {\n  [key: `data-${string}`]: string | number | boolean | undefined\n}\n\nexport type ShowSnackbarOptions = {\n  action?: ReactNode\n  onClose?: (reason: SnackbarCloseReason) => void\n  rootAttributes?: SnackbarRootAttributes\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  rootAttributes?: SnackbarRootAttributes\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, 'action'>('snackbar', {\n      duration,\n      order,\n      animateReplace: true,\n    })\n\n  function show(message: ReactNode, options: ShowSnackbarOptions = {}) {\n    const onClose = options.onClose\n    enqueue(\n      {\n        message,\n        action: options.action,\n        rootAttributes: options.rootAttributes,\n      },\n      onClose === undefined\n        ? undefined\n        : (reason) => onClose(reason ?? 'unmounted'),\n    )\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          {...toast.content.rootAttributes}\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":";;;;;;;;;;;AA4CA,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,qBAAgD,YAAY;EAC1D;EACA;EACA,gBAAgB;CAClB,CAAC;CAEH,SAAS,KAAK,SAAoB,UAA+B,CAAC,GAAG;EACnE,MAAM,UAAU,QAAQ;EACxB,QACE;GACE;GACA,QAAQ,QAAQ;GAChB,gBAAgB,QAAQ;EAC1B,GACA,YAAY,SACR,UACC,WAAW,QAAQ,UAAU,WAAW,CAC/C;CACF;CAoCA,OAAO,CAAC,oBA7BL,oBAAD;EACE,MAAK;EACE;EACP,UARc,MAAM,cAAc,MACnC,UAAU,MAAM,QAAQ,WAAW,MAEZ,IAAY,WAAW;EAM7C,GAAI;YAEH,MAAM,cAAc,KAAKA,YACxB,8BAAC,kBAAD;GACE,GAAIA,QAAM,QAAQ;GAClB,KAAKA,QAAM;GACX,MAAK;GACL,OAAOA;GACA;GACE;GACK;GACF;GACZ,YAAU;GACV,oBAAkBA,QAAM,QAAQ,WAAW;EAO3B,GALfA,QAAM,QAAQ,WAAW,UACxB,oBAAC,OAAD;GAAK,eAAe,MAAMA,QAAM,KAAK,QAAQ;aAC3C,oBAAC,gBAAD,EAAgB,QAAQA,QAAM,QAAQ,OAAO;EAC1C,EAES,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"}
+{"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 = 'action' | 'unmounted'\n\nexport type SnackbarRootAttributes = {\n  [key: `data-${string}`]: string | number | boolean | undefined\n}\n\nexport type ShowSnackbarOptions = {\n  action?: ReactNode\n  onClose?: (reason: SnackbarCloseReason) => void\n  /** スナックバー自体にdata属性を渡せる */\n  rootAttributes?: SnackbarRootAttributes\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  rootAttributes?: SnackbarRootAttributes\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, 'action'>('snackbar', {\n      duration,\n      order,\n      animateReplace: true,\n    })\n\n  function show(message: ReactNode, options: ShowSnackbarOptions = {}) {\n    const onClose = options.onClose\n    enqueue(\n      {\n        message,\n        action: options.action,\n        rootAttributes: options.rootAttributes,\n      },\n      onClose === undefined\n        ? undefined\n        : (reason) => onClose(reason ?? 'unmounted'),\n    )\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          {...toast.content.rootAttributes}\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":";;;;;;;;;;;AA6CA,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,qBAAgD,YAAY;EAC1D;EACA;EACA,gBAAgB;CAClB,CAAC;CAEH,SAAS,KAAK,SAAoB,UAA+B,CAAC,GAAG;EACnE,MAAM,UAAU,QAAQ;EACxB,QACE;GACE;GACA,QAAQ,QAAQ;GAChB,gBAAgB,QAAQ;EAC1B,GACA,YAAY,SACR,UACC,WAAW,QAAQ,UAAU,WAAW,CAC/C;CACF;CAoCA,OAAO,CAAC,oBA7BL,oBAAD;EACE,MAAK;EACE;EACP,UARc,MAAM,cAAc,MACnC,UAAU,MAAM,QAAQ,WAAW,MAEZ,IAAY,WAAW;EAM7C,GAAI;YAEH,MAAM,cAAc,KAAKA,YACxB,8BAAC,kBAAD;GACE,GAAIA,QAAM,QAAQ;GAClB,KAAKA,QAAM;GACX,MAAK;GACL,OAAOA;GACA;GACE;GACK;GACF;GACZ,YAAU;GACV,oBAAkBA,QAAM,QAAQ,WAAW;EAO3B,GALfA,QAAM,QAAQ,WAAW,UACxB,oBAAC,OAAD;GAAK,eAAe,MAAMA,QAAM,KAAK,QAAQ;aAC3C,oBAAC,gBAAD,EAAgB,QAAQA,QAAM,QAAQ,OAAO;EAC1C,EAES,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/types.d.ts

@@ -8,6 +8,11 @@ export type UseNotificationOptions = {
      * @default 16
      */
     offset?: number;
+    /**
+     * スクロールに追従しないヘッダーの高さを指定する
+     * @default 0
+     */
+    headerOffset?: number;
     /**
      * 通知を表示する時間（ミリ秒）。負の値は 0、数値でない値は 5000 として扱う
      * @default 5000

package/dist/components/Notification/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,OAAO,CAAA;AACnD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAA;AACvC,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,CAAA;AAEnD,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,sBAAsB,GAAG;IACvD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Notification/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,OAAO,CAAA;AACnD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAA;AACvC,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,CAAA;AAEnD,MAAM,MAAM,sBAAsB,GAAG;IACnC,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,sBAAsB,GAAG;IACvD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,eAAe,CAAC,EAAE,WAAW,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA"}

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

@@ -14,7 +14,6 @@ export type TextFieldProps = {
     requiredText?: string;
     disabled?: boolean;
     subLabel?: React.ReactNode;
-    rdfaPrefix?: string;
     getCount?: (value: string) => number;
 } & Omit<React.ComponentPropsWithoutRef<'input'>, 'prefix' | 'onChange'>;
 declare const TextField: React.ForwardRefExoticComponent<{
@@ -30,7 +29,6 @@ declare const TextField: React.ForwardRefExoticComponent<{
     requiredText?: string;
     disabled?: boolean;
     subLabel?: React.ReactNode;
-    rdfaPrefix?: string;
     getCount?: (value: string) => number;
 } & Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "prefix"> & React.RefAttributes<HTMLInputElement>>;
 export default TextField;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAC3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAElB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAElC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IAEnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACrC,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAA;AAExE,QAAA,MAAM,SAAS;aApBJ,SAAS;aACT,SAAS;YAEV,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;gBAEtB,OAAO;gBACP,OAAO;oBACH,MAAM;cACZ,OAAO;YAET,MAAM;mBACC,MAAM;eACV,OAAO;eACP,KAAK,CAAC,SAAS;iBACb,MAAM;eAER,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;6KAqHrC,CAAA;eAEc,SAAS"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAC3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAElB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAElC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACrC,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAA;AAExE,QAAA,MAAM,SAAS;aAnBJ,SAAS;aACT,SAAS;YAEV,MAAM;eACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;gBAEtB,OAAO;gBACP,OAAO;oBACH,MAAM;cACZ,OAAO;YAET,MAAM;mBACC,MAAM;eACV,OAAO;eACP,KAAK,CAAC,SAAS;eAEf,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;6KAqHrC,CAAA;eAEc,SAAS"}

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

@@ -1 +1 @@
-{"version":3,"file":"index2.cjs","names":[],"sources":["../../../src/components/TextField/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport FieldLabel from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { useFocusWithClick } from './useFocusWithClick'\nimport { AssistiveText } from './AssistiveText'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { useVisuallyHidden } from 'react-aria/VisuallyHidden'\nimport { useId } from 'react-aria/useId'\n\nexport type TextFieldProps = {\n  prefix?: ReactNode\n  suffix?: ReactNode\n\n  value?: string\n  onChange?: (value: string) => void\n\n  showCount?: boolean\n  showLabel?: boolean\n  assistiveText?: string\n  invalid?: boolean\n\n  label?: string\n  requiredText?: string\n  disabled?: boolean\n  subLabel?: React.ReactNode\n  rdfaPrefix?: string\n\n  getCount?: (value: string) => number\n} & Omit<React.ComponentPropsWithoutRef<'input'>, 'prefix' | 'onChange'>\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  function SingleLineTextFieldInner(\n    {\n      assistiveText,\n      className,\n      disabled = false,\n      label = '',\n      maxLength,\n      onChange,\n      prefix = null,\n      required,\n      requiredText,\n      showCount = false,\n      showLabel = false,\n      subLabel,\n      suffix = null,\n      type = 'text',\n      invalid,\n      value,\n      getCount = countCodePointsInString,\n      ...props\n    },\n    forwardRef,\n  ) {\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const { visuallyHiddenProps } = useVisuallyHidden()\n\n    const [count, setCount] = useState(getCount(value ?? ''))\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value\n        const count = getCount(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n        setCount(count)\n        onChange?.(value)\n      },\n      [getCount, maxLength, onChange],\n    )\n\n    useEffect(() => {\n      setCount(getCount(value ?? ''))\n    }, [getCount, value])\n\n    const containerRef = useRef(null)\n\n    useFocusWithClick(containerRef, inputRef)\n\n    const inputId = useId(props.id)\n    const describedbyId = useId()\n    const labelledbyId = useId()\n\n    const showAssistiveText =\n      assistiveText != null && assistiveText.length !== 0\n\n    const classNames = useClassNames('charcoal-text-field-root', className)\n\n    return (\n      <div className={classNames} aria-disabled={disabled}>\n        <FieldLabel\n          htmlFor={inputId}\n          id={labelledbyId}\n          label={label}\n          required={required}\n          requiredText={requiredText}\n          subLabel={subLabel}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <div\n          className=\"charcoal-text-field-container\"\n          aria-disabled={disabled === true ? true : undefined}\n          data-invalid={invalid === true}\n          ref={containerRef}\n        >\n          {prefix && <div className=\"charcoal-text-field-prefix\">{prefix}</div>}\n          <div className=\"charcoal-text-field-input-root\">\n            <input\n              className=\"charcoal-text-field-input\"\n              aria-describedby={showAssistiveText ? describedbyId : undefined}\n              aria-invalid={invalid}\n              aria-labelledby={labelledbyId}\n              id={inputId}\n              data-invalid={invalid === true}\n              maxLength={maxLength}\n              onChange={handleChange}\n              disabled={disabled}\n              ref={mergeRefs(forwardRef, inputRef)}\n              type={type}\n              value={value}\n              {...props}\n            />\n          </div>\n          {(suffix || showCount) && (\n            <div className=\"charcoal-text-field-suffix\">\n              {suffix}\n              {showCount && (\n                <span className=\"charcoal-text-field-line-counter\">\n                  {maxLength !== undefined ? `${count}/${maxLength}` : count}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n        {showAssistiveText && (\n          <AssistiveText data-invalid={invalid === true} id={describedbyId}>\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </div>\n    )\n  },\n)\n\nexport default TextField\n"],"mappings":";;;;;;;;;;;;;;;AAiCA,MAAM,YAAY,MAAM,WACtB,SAAS,yBACP,EACE,eACA,WACA,WAAW,OACX,QAAQ,IACR,WACA,UACA,SAAS,MACT,UACA,cACA,YAAY,OACZ,YAAY,OACZ,UACA,SAAS,MACT,OAAO,QACP,SACA,OACA,WAAW,yCACX,GAAG,SAEL,YACA;CACA,MAAM,6BAAoC,IAAI;CAE9C,MAAM,EAAE,yEAA0C;CAElD,MAAM,CAAC,OAAO,gCAAqB,SAAS,SAAS,EAAE,CAAC;CAExD,MAAM,uCACH,MAA2C;EAC1C,MAAM,QAAQ,EAAE,OAAO;EACvB,MAAM,QAAQ,SAAS,KAAK;EAC5B,IAAI,cAAc,UAAa,QAAQ,WACrC;EAEF,SAAS,KAAK;EACd,WAAW,KAAK;CAClB,GACA;EAAC;EAAU;EAAW;CAAQ,CAChC;CAEA,2BAAgB;EACd,SAAS,SAAS,SAAS,EAAE,CAAC;CAChC,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,MAAM,iCAAsB,IAAI;CAEhC,4CAAkB,cAAc,QAAQ;CAExC,MAAM,sCAAgB,MAAM,EAAE;CAC9B,MAAM,4CAAsB;CAC5B,MAAM,2CAAqB;CAE3B,MAAM,oBACJ,iBAAiB,QAAQ,cAAc,WAAW;CAIpD,OACE,4CAAC,OAAD;EAAK,WAHY,oCAAc,4BAA4B,SAG3C;EAAY,iBAAe;YAA3C;GACE,2CAAC,yBAAD;IACE,SAAS;IACT,IAAI;IACG;IACG;IACI;IACJ;IACV,GAAK,CAAC,YAAY,sBAAsB,CAAC;GAAG;GAE9C,4CAAC,OAAD;IACE,WAAU;IACV,iBAAe,aAAa,OAAO,OAAO;IAC1C,gBAAc,YAAY;IAC1B,KAAK;cAJP;KAMG,UAAU,2CAAC,OAAD;MAAK,WAAU;gBAA8B;KAAY;KACpE,2CAAC,OAAD;MAAK,WAAU;gBACb,2CAAC,SAAD;OACE,WAAU;OACV,oBAAkB,oBAAoB,gBAAgB;OACtD,gBAAc;OACd,mBAAiB;OACjB,IAAI;OACJ,gBAAc,YAAY;OACf;OACX,UAAU;OACA;OACV,KAAK,0BAAU,YAAY,QAAQ;OAC7B;OACC;OACP,GAAI;MAAM;KAET;MACH,UAAU,cACV,4CAAC,OAAD;MAAK,WAAU;gBAAf,CACG,QACA,aACC,2CAAC,QAAD;OAAM,WAAU;iBACb,cAAc,SAAY,GAAG,MAAK,GAAI,cAAc;MACjD,EAEL;;IAEJ;;GACJ,qBACC,2CAAC,+BAAD;IAAe,gBAAc,YAAY;IAAM,IAAI;cAChD;GACY;EAEd;;AAET,CACF"}
+{"version":3,"file":"index2.cjs","names":[],"sources":["../../../src/components/TextField/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport FieldLabel from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { useFocusWithClick } from './useFocusWithClick'\nimport { AssistiveText } from './AssistiveText'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { useVisuallyHidden } from 'react-aria/VisuallyHidden'\nimport { useId } from 'react-aria/useId'\n\nexport type TextFieldProps = {\n  prefix?: ReactNode\n  suffix?: ReactNode\n\n  value?: string\n  onChange?: (value: string) => void\n\n  showCount?: boolean\n  showLabel?: boolean\n  assistiveText?: string\n  invalid?: boolean\n\n  label?: string\n  requiredText?: string\n  disabled?: boolean\n  subLabel?: React.ReactNode\n\n  getCount?: (value: string) => number\n} & Omit<React.ComponentPropsWithoutRef<'input'>, 'prefix' | 'onChange'>\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  function SingleLineTextFieldInner(\n    {\n      assistiveText,\n      className,\n      disabled = false,\n      label = '',\n      maxLength,\n      onChange,\n      prefix = null,\n      required,\n      requiredText,\n      showCount = false,\n      showLabel = false,\n      subLabel,\n      suffix = null,\n      type = 'text',\n      invalid,\n      value,\n      getCount = countCodePointsInString,\n      ...props\n    },\n    forwardRef,\n  ) {\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const { visuallyHiddenProps } = useVisuallyHidden()\n\n    const [count, setCount] = useState(getCount(value ?? ''))\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value\n        const count = getCount(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n        setCount(count)\n        onChange?.(value)\n      },\n      [getCount, maxLength, onChange],\n    )\n\n    useEffect(() => {\n      setCount(getCount(value ?? ''))\n    }, [getCount, value])\n\n    const containerRef = useRef(null)\n\n    useFocusWithClick(containerRef, inputRef)\n\n    const inputId = useId(props.id)\n    const describedbyId = useId()\n    const labelledbyId = useId()\n\n    const showAssistiveText =\n      assistiveText != null && assistiveText.length !== 0\n\n    const classNames = useClassNames('charcoal-text-field-root', className)\n\n    return (\n      <div className={classNames} aria-disabled={disabled}>\n        <FieldLabel\n          htmlFor={inputId}\n          id={labelledbyId}\n          label={label}\n          required={required}\n          requiredText={requiredText}\n          subLabel={subLabel}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <div\n          className=\"charcoal-text-field-container\"\n          aria-disabled={disabled === true ? true : undefined}\n          data-invalid={invalid === true}\n          ref={containerRef}\n        >\n          {prefix && <div className=\"charcoal-text-field-prefix\">{prefix}</div>}\n          <div className=\"charcoal-text-field-input-root\">\n            <input\n              className=\"charcoal-text-field-input\"\n              aria-describedby={showAssistiveText ? describedbyId : undefined}\n              aria-invalid={invalid}\n              aria-labelledby={labelledbyId}\n              id={inputId}\n              data-invalid={invalid === true}\n              maxLength={maxLength}\n              onChange={handleChange}\n              disabled={disabled}\n              ref={mergeRefs(forwardRef, inputRef)}\n              type={type}\n              value={value}\n              {...props}\n            />\n          </div>\n          {(suffix || showCount) && (\n            <div className=\"charcoal-text-field-suffix\">\n              {suffix}\n              {showCount && (\n                <span className=\"charcoal-text-field-line-counter\">\n                  {maxLength !== undefined ? `${count}/${maxLength}` : count}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n        {showAssistiveText && (\n          <AssistiveText data-invalid={invalid === true} id={describedbyId}>\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </div>\n    )\n  },\n)\n\nexport default TextField\n"],"mappings":";;;;;;;;;;;;;;;AAgCA,MAAM,YAAY,MAAM,WACtB,SAAS,yBACP,EACE,eACA,WACA,WAAW,OACX,QAAQ,IACR,WACA,UACA,SAAS,MACT,UACA,cACA,YAAY,OACZ,YAAY,OACZ,UACA,SAAS,MACT,OAAO,QACP,SACA,OACA,WAAW,yCACX,GAAG,SAEL,YACA;CACA,MAAM,6BAAoC,IAAI;CAE9C,MAAM,EAAE,yEAA0C;CAElD,MAAM,CAAC,OAAO,gCAAqB,SAAS,SAAS,EAAE,CAAC;CAExD,MAAM,uCACH,MAA2C;EAC1C,MAAM,QAAQ,EAAE,OAAO;EACvB,MAAM,QAAQ,SAAS,KAAK;EAC5B,IAAI,cAAc,UAAa,QAAQ,WACrC;EAEF,SAAS,KAAK;EACd,WAAW,KAAK;CAClB,GACA;EAAC;EAAU;EAAW;CAAQ,CAChC;CAEA,2BAAgB;EACd,SAAS,SAAS,SAAS,EAAE,CAAC;CAChC,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,MAAM,iCAAsB,IAAI;CAEhC,4CAAkB,cAAc,QAAQ;CAExC,MAAM,sCAAgB,MAAM,EAAE;CAC9B,MAAM,4CAAsB;CAC5B,MAAM,2CAAqB;CAE3B,MAAM,oBACJ,iBAAiB,QAAQ,cAAc,WAAW;CAIpD,OACE,4CAAC,OAAD;EAAK,WAHY,oCAAc,4BAA4B,SAG3C;EAAY,iBAAe;YAA3C;GACE,2CAAC,yBAAD;IACE,SAAS;IACT,IAAI;IACG;IACG;IACI;IACJ;IACV,GAAK,CAAC,YAAY,sBAAsB,CAAC;GAAG;GAE9C,4CAAC,OAAD;IACE,WAAU;IACV,iBAAe,aAAa,OAAO,OAAO;IAC1C,gBAAc,YAAY;IAC1B,KAAK;cAJP;KAMG,UAAU,2CAAC,OAAD;MAAK,WAAU;gBAA8B;KAAY;KACpE,2CAAC,OAAD;MAAK,WAAU;gBACb,2CAAC,SAAD;OACE,WAAU;OACV,oBAAkB,oBAAoB,gBAAgB;OACtD,gBAAc;OACd,mBAAiB;OACjB,IAAI;OACJ,gBAAc,YAAY;OACf;OACX,UAAU;OACA;OACV,KAAK,0BAAU,YAAY,QAAQ;OAC7B;OACC;OACP,GAAI;MAAM;KAET;MACH,UAAU,cACV,4CAAC,OAAD;MAAK,WAAU;gBAAf,CACG,QACA,aACC,2CAAC,QAAD;OAAM,WAAU;iBACb,cAAc,SAAY,GAAG,MAAK,GAAI,cAAc;MACjD,EAEL;;IAEJ;;GACJ,qBACC,2CAAC,+BAAD;IAAe,gBAAc,YAAY;IAAM,IAAI;cAChD;GACY;EAEd;;AAET,CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"index2.js","names":[],"sources":["../../../src/components/TextField/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport FieldLabel from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { useFocusWithClick } from './useFocusWithClick'\nimport { AssistiveText } from './AssistiveText'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { useVisuallyHidden } from 'react-aria/VisuallyHidden'\nimport { useId } from 'react-aria/useId'\n\nexport type TextFieldProps = {\n  prefix?: ReactNode\n  suffix?: ReactNode\n\n  value?: string\n  onChange?: (value: string) => void\n\n  showCount?: boolean\n  showLabel?: boolean\n  assistiveText?: string\n  invalid?: boolean\n\n  label?: string\n  requiredText?: string\n  disabled?: boolean\n  subLabel?: React.ReactNode\n  rdfaPrefix?: string\n\n  getCount?: (value: string) => number\n} & Omit<React.ComponentPropsWithoutRef<'input'>, 'prefix' | 'onChange'>\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  function SingleLineTextFieldInner(\n    {\n      assistiveText,\n      className,\n      disabled = false,\n      label = '',\n      maxLength,\n      onChange,\n      prefix = null,\n      required,\n      requiredText,\n      showCount = false,\n      showLabel = false,\n      subLabel,\n      suffix = null,\n      type = 'text',\n      invalid,\n      value,\n      getCount = countCodePointsInString,\n      ...props\n    },\n    forwardRef,\n  ) {\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const { visuallyHiddenProps } = useVisuallyHidden()\n\n    const [count, setCount] = useState(getCount(value ?? ''))\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value\n        const count = getCount(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n        setCount(count)\n        onChange?.(value)\n      },\n      [getCount, maxLength, onChange],\n    )\n\n    useEffect(() => {\n      setCount(getCount(value ?? ''))\n    }, [getCount, value])\n\n    const containerRef = useRef(null)\n\n    useFocusWithClick(containerRef, inputRef)\n\n    const inputId = useId(props.id)\n    const describedbyId = useId()\n    const labelledbyId = useId()\n\n    const showAssistiveText =\n      assistiveText != null && assistiveText.length !== 0\n\n    const classNames = useClassNames('charcoal-text-field-root', className)\n\n    return (\n      <div className={classNames} aria-disabled={disabled}>\n        <FieldLabel\n          htmlFor={inputId}\n          id={labelledbyId}\n          label={label}\n          required={required}\n          requiredText={requiredText}\n          subLabel={subLabel}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <div\n          className=\"charcoal-text-field-container\"\n          aria-disabled={disabled === true ? true : undefined}\n          data-invalid={invalid === true}\n          ref={containerRef}\n        >\n          {prefix && <div className=\"charcoal-text-field-prefix\">{prefix}</div>}\n          <div className=\"charcoal-text-field-input-root\">\n            <input\n              className=\"charcoal-text-field-input\"\n              aria-describedby={showAssistiveText ? describedbyId : undefined}\n              aria-invalid={invalid}\n              aria-labelledby={labelledbyId}\n              id={inputId}\n              data-invalid={invalid === true}\n              maxLength={maxLength}\n              onChange={handleChange}\n              disabled={disabled}\n              ref={mergeRefs(forwardRef, inputRef)}\n              type={type}\n              value={value}\n              {...props}\n            />\n          </div>\n          {(suffix || showCount) && (\n            <div className=\"charcoal-text-field-suffix\">\n              {suffix}\n              {showCount && (\n                <span className=\"charcoal-text-field-line-counter\">\n                  {maxLength !== undefined ? `${count}/${maxLength}` : count}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n        {showAssistiveText && (\n          <AssistiveText data-invalid={invalid === true} id={describedbyId}>\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </div>\n    )\n  },\n)\n\nexport default TextField\n"],"mappings":";;;;;;;;;;;;;;AAiCA,MAAM,YAAY,QAAM,WACtB,SAAS,yBACP,EACE,eACA,WACA,WAAW,OACX,QAAQ,IACR,WACA,UACA,SAAS,MACT,UACA,cACA,YAAY,OACZ,YAAY,OACZ,UACA,SAAS,MACT,OAAO,QACP,SACA,OACA,WAAW,yBACX,GAAG,SAEL,YACA;CACA,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,EAAE,wBAAwB,kBAAkB;CAElD,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,SAAS,EAAE,CAAC;CAExD,MAAM,eAAe,aAClB,MAA2C;EAC1C,MAAM,QAAQ,EAAE,OAAO;EACvB,MAAM,QAAQ,SAAS,KAAK;EAC5B,IAAI,cAAc,UAAa,QAAQ,WACrC;EAEF,SAAS,KAAK;EACd,WAAW,KAAK;CAClB,GACA;EAAC;EAAU;EAAW;CAAQ,CAChC;CAEA,gBAAgB;EACd,SAAS,SAAS,SAAS,EAAE,CAAC;CAChC,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,MAAM,eAAe,OAAO,IAAI;CAEhC,kBAAkB,cAAc,QAAQ;CAExC,MAAM,UAAU,MAAM,MAAM,EAAE;CAC9B,MAAM,gBAAgB,MAAM;CAC5B,MAAM,eAAe,MAAM;CAE3B,MAAM,oBACJ,iBAAiB,QAAQ,cAAc,WAAW;CAIpD,OACE,qBAAC,OAAD;EAAK,WAHY,cAAc,4BAA4B,SAG3C;EAAY,iBAAe;YAA3C;GACE,oBAAC,YAAD;IACE,SAAS;IACT,IAAI;IACG;IACG;IACI;IACJ;IACV,GAAK,CAAC,YAAY,sBAAsB,CAAC;GAAG;GAE9C,qBAAC,OAAD;IACE,WAAU;IACV,iBAAe,aAAa,OAAO,OAAO;IAC1C,gBAAc,YAAY;IAC1B,KAAK;cAJP;KAMG,UAAU,oBAAC,OAAD;MAAK,WAAU;gBAA8B;KAAY;KACpE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,SAAD;OACE,WAAU;OACV,oBAAkB,oBAAoB,gBAAgB;OACtD,gBAAc;OACd,mBAAiB;OACjB,IAAI;OACJ,gBAAc,YAAY;OACf;OACX,UAAU;OACA;OACV,KAAK,UAAU,YAAY,QAAQ;OAC7B;OACC;OACP,GAAI;MAAM;KAET;MACH,UAAU,cACV,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,QACA,aACC,oBAAC,QAAD;OAAM,WAAU;iBACb,cAAc,SAAY,GAAG,MAAK,GAAI,cAAc;MACjD,EAEL;;IAEJ;;GACJ,qBACC,oBAAC,eAAD;IAAe,gBAAc,YAAY;IAAM,IAAI;cAChD;GACY;EAEd;;AAET,CACF"}
+{"version":3,"file":"index2.js","names":[],"sources":["../../../src/components/TextField/index.tsx"],"sourcesContent":["import './index.css'\n\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport * as React from 'react'\nimport FieldLabel from '../FieldLabel'\nimport { countCodePointsInString, mergeRefs } from '../../_lib'\nimport { useFocusWithClick } from './useFocusWithClick'\nimport { AssistiveText } from './AssistiveText'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport { useVisuallyHidden } from 'react-aria/VisuallyHidden'\nimport { useId } from 'react-aria/useId'\n\nexport type TextFieldProps = {\n  prefix?: ReactNode\n  suffix?: ReactNode\n\n  value?: string\n  onChange?: (value: string) => void\n\n  showCount?: boolean\n  showLabel?: boolean\n  assistiveText?: string\n  invalid?: boolean\n\n  label?: string\n  requiredText?: string\n  disabled?: boolean\n  subLabel?: React.ReactNode\n\n  getCount?: (value: string) => number\n} & Omit<React.ComponentPropsWithoutRef<'input'>, 'prefix' | 'onChange'>\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  function SingleLineTextFieldInner(\n    {\n      assistiveText,\n      className,\n      disabled = false,\n      label = '',\n      maxLength,\n      onChange,\n      prefix = null,\n      required,\n      requiredText,\n      showCount = false,\n      showLabel = false,\n      subLabel,\n      suffix = null,\n      type = 'text',\n      invalid,\n      value,\n      getCount = countCodePointsInString,\n      ...props\n    },\n    forwardRef,\n  ) {\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const { visuallyHiddenProps } = useVisuallyHidden()\n\n    const [count, setCount] = useState(getCount(value ?? ''))\n\n    const handleChange = useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        const value = e.target.value\n        const count = getCount(value)\n        if (maxLength !== undefined && count > maxLength) {\n          return\n        }\n        setCount(count)\n        onChange?.(value)\n      },\n      [getCount, maxLength, onChange],\n    )\n\n    useEffect(() => {\n      setCount(getCount(value ?? ''))\n    }, [getCount, value])\n\n    const containerRef = useRef(null)\n\n    useFocusWithClick(containerRef, inputRef)\n\n    const inputId = useId(props.id)\n    const describedbyId = useId()\n    const labelledbyId = useId()\n\n    const showAssistiveText =\n      assistiveText != null && assistiveText.length !== 0\n\n    const classNames = useClassNames('charcoal-text-field-root', className)\n\n    return (\n      <div className={classNames} aria-disabled={disabled}>\n        <FieldLabel\n          htmlFor={inputId}\n          id={labelledbyId}\n          label={label}\n          required={required}\n          requiredText={requiredText}\n          subLabel={subLabel}\n          {...(!showLabel ? visuallyHiddenProps : {})}\n        />\n        <div\n          className=\"charcoal-text-field-container\"\n          aria-disabled={disabled === true ? true : undefined}\n          data-invalid={invalid === true}\n          ref={containerRef}\n        >\n          {prefix && <div className=\"charcoal-text-field-prefix\">{prefix}</div>}\n          <div className=\"charcoal-text-field-input-root\">\n            <input\n              className=\"charcoal-text-field-input\"\n              aria-describedby={showAssistiveText ? describedbyId : undefined}\n              aria-invalid={invalid}\n              aria-labelledby={labelledbyId}\n              id={inputId}\n              data-invalid={invalid === true}\n              maxLength={maxLength}\n              onChange={handleChange}\n              disabled={disabled}\n              ref={mergeRefs(forwardRef, inputRef)}\n              type={type}\n              value={value}\n              {...props}\n            />\n          </div>\n          {(suffix || showCount) && (\n            <div className=\"charcoal-text-field-suffix\">\n              {suffix}\n              {showCount && (\n                <span className=\"charcoal-text-field-line-counter\">\n                  {maxLength !== undefined ? `${count}/${maxLength}` : count}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n        {showAssistiveText && (\n          <AssistiveText data-invalid={invalid === true} id={describedbyId}>\n            {assistiveText}\n          </AssistiveText>\n        )}\n      </div>\n    )\n  },\n)\n\nexport default TextField\n"],"mappings":";;;;;;;;;;;;;;AAgCA,MAAM,YAAY,QAAM,WACtB,SAAS,yBACP,EACE,eACA,WACA,WAAW,OACX,QAAQ,IACR,WACA,UACA,SAAS,MACT,UACA,cACA,YAAY,OACZ,YAAY,OACZ,UACA,SAAS,MACT,OAAO,QACP,SACA,OACA,WAAW,yBACX,GAAG,SAEL,YACA;CACA,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,EAAE,wBAAwB,kBAAkB;CAElD,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,SAAS,EAAE,CAAC;CAExD,MAAM,eAAe,aAClB,MAA2C;EAC1C,MAAM,QAAQ,EAAE,OAAO;EACvB,MAAM,QAAQ,SAAS,KAAK;EAC5B,IAAI,cAAc,UAAa,QAAQ,WACrC;EAEF,SAAS,KAAK;EACd,WAAW,KAAK;CAClB,GACA;EAAC;EAAU;EAAW;CAAQ,CAChC;CAEA,gBAAgB;EACd,SAAS,SAAS,SAAS,EAAE,CAAC;CAChC,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,MAAM,eAAe,OAAO,IAAI;CAEhC,kBAAkB,cAAc,QAAQ;CAExC,MAAM,UAAU,MAAM,MAAM,EAAE;CAC9B,MAAM,gBAAgB,MAAM;CAC5B,MAAM,eAAe,MAAM;CAE3B,MAAM,oBACJ,iBAAiB,QAAQ,cAAc,WAAW;CAIpD,OACE,qBAAC,OAAD;EAAK,WAHY,cAAc,4BAA4B,SAG3C;EAAY,iBAAe;YAA3C;GACE,oBAAC,YAAD;IACE,SAAS;IACT,IAAI;IACG;IACG;IACI;IACJ;IACV,GAAK,CAAC,YAAY,sBAAsB,CAAC;GAAG;GAE9C,qBAAC,OAAD;IACE,WAAU;IACV,iBAAe,aAAa,OAAO,OAAO;IAC1C,gBAAc,YAAY;IAC1B,KAAK;cAJP;KAMG,UAAU,oBAAC,OAAD;MAAK,WAAU;gBAA8B;KAAY;KACpE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,SAAD;OACE,WAAU;OACV,oBAAkB,oBAAoB,gBAAgB;OACtD,gBAAc;OACd,mBAAiB;OACjB,IAAI;OACJ,gBAAc,YAAY;OACf;OACX,UAAU;OACA;OACV,KAAK,UAAU,YAAY,QAAQ;OAC7B;OACC;OACP,GAAI;MAAM;KAET;MACH,UAAU,cACV,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,QACA,aACC,oBAAC,QAAD;OAAM,WAAU;iBACb,cAAc,SAAY,GAAG,MAAK,GAAI,cAAc;MACjD,EAEL;;IAEJ;;GACJ,qBACC,oBAAC,eAAD;IAAe,gBAAc,YAAY;IAAM,IAAI;cAChD;GACY;EAEd;;AAET,CACF"}