@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 4.0.0

package/dist/components/Container/Container.mjs

@@ -1,15 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Container as Container$1 } from '@chakra-ui/react';
+import { polymorphic } from '../../types/polymorphic.mjs';
 import useContainerSize from './useContainerSize.mjs';
 
-const Container = ({ style, disableResponsive, ...rest }) => {
+const ContainerImpl = ({ style, disableResponsive, ...rest }) => {
     const containerSize = useContainerSize();
     return (jsx(Container$1, { style: {
             ...style,
             ...(disableResponsive ? {} : { minWidth: `${containerSize}px` }),
         }, ...rest }));
 };
+ContainerImpl.displayName = 'Container';
+/** Type-level polymorphism over the same runtime — see `polymorphic`. */
+const Container = polymorphic(ContainerImpl);
 
 export { Container };
 //# sourceMappingURL=Container.mjs.map

package/dist/components/Container/Container.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Container.mjs","sources":["../../../src/components/Container/Container.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraContainer"],"mappings":";;;;;AAKO,MAAM,SAAS,GAAG,CAAC,EACxB,KAAK,EACL,iBAAiB,EACjB,GAAG,IAAI,EAC0C,KAAI;AACrD,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;AACxC,IAAA,QACEA,GAAA,CAACC,WAAe,EAAA,EACd,KAAK,EAAE;AACL,YAAA,GAAG,KAAK;AACR,YAAA,IAAI,iBAAiB,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAA,EAAG,aAAa,CAAA,EAAA,CAAI,EAAE,CAAC;SACjE,EAAA,GACG,IAAI,EAAA,CACR;AAEN;;;;"}
+{"version":3,"file":"Container.mjs","sources":["../../../src/components/Container/Container.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraContainer"],"mappings":";;;;;;AAOA,MAAM,aAAa,GAAG,CAAC,EACrB,KAAK,EACL,iBAAiB,EACjB,GAAG,IAAI,EACW,KAAI;AACtB,IAAA,MAAM,aAAa,GAAG,gBAAgB,EAAE;AACxC,IAAA,QACEA,GAAA,CAACC,WAAe,EAAA,EACd,KAAK,EAAE;AACL,YAAA,GAAG,KAAK;AACR,YAAA,IAAI,iBAAiB,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAA,EAAG,aAAa,CAAA,EAAA,CAAI,EAAE,CAAC;SACjE,EAAA,GACG,IAAI,EAAA,CACR;AAEN,CAAC;AAED,aAAa,CAAC,WAAW,GAAG,WAAW;AAEvC;MACa,SAAS,GAAG,WAAW,CAA2B,aAAa;;;;"}

package/dist/components/Container/Container.types.d.ts

@@ -0,0 +1,16 @@
+import type { ElementType } from 'react';
+import { ContainerProps as ChakraContainerProps } from '@chakra-ui/react';
+import type { PolymorphicProps } from '../../types/polymorphic';
+export type ContainerOwnProps = Omit<ChakraContainerProps, 'as'> & {
+    /** Skip the responsive `minWidth` this component otherwise applies. */
+    disableResponsive?: boolean;
+};
+/**
+ * Props for `Container`, typed for whatever element `as` renders.
+ *
+ * Defaults to `'div'`, so the bare type is unchanged. A page container is
+ * often a landmark — `as="main"` / `as="section"` / `as="nav"` is how it says
+ * so, and KWCAG 반복 영역 건너뛰기 grades that structure.
+ */
+export type ContainerProps<TElement extends ElementType = 'div'> = PolymorphicProps<TElement, ContainerOwnProps>;
+//# sourceMappingURL=Container.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Container.types.d.ts","sourceRoot":"","sources":["../../../src/components/Container/Container.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,cAAc,IAAI,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAG1E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,GAAG;IACjE,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,CAAC,QAAQ,SAAS,WAAW,GAAG,KAAK,IAC7D,gBAAgB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC"}

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

@@ -1,3 +1,4 @@
 export { Container } from './Container';
+export type { ContainerOwnProps, ContainerProps } from './Container.types';
 export * from './useContainerSize';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3E,cAAc,oBAAoB,CAAC"}

package/dist/components/CopyableCode/CopyableCode.d.ts

@@ -2,6 +2,12 @@ import { CopyableCodeProps } from './CopyableCode.types';
 /**
  * Intended for a quick one-click copy of one-liner code snippets.
  *
+ * The button answers for itself: on click the copy icon crosses into a check and
+ * the label flips to "copied", then reverts. Copying is otherwise invisible —
+ * without a reply the member has no way to know it worked and clicks again — and
+ * a global toast is too much ceremony for something this small, so the control
+ * that was pressed is the thing that confirms.
+ *
  * @example
  * <CopyableCode onCopy={() => {}}>
  *   {`const example = 'This is a code example';

package/dist/components/CopyableCode/CopyableCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableCode.d.ts","sourceRoot":"","sources":["../../../src/components/CopyableCode/CopyableCode.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GAAI,uCAI1B,iBAAiB,4CAmCnB,CAAC"}
+{"version":3,"file":"CopyableCode.d.ts","sourceRoot":"","sources":["../../../src/components/CopyableCode/CopyableCode.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AA6DzD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,GAAI,uCAI1B,iBAAiB,4CA+DnB,CAAC"}

package/dist/components/CopyableCode/CopyableCode.js

@@ -2,15 +2,52 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var react = require('@chakra-ui/react');
 var useTranslate = require('../../hooks/useTranslate.js');
 var Button = require('../Button/Button.js');
 var Card = require('../Card/Card.js');
 var index = require('../Icon/index.js');
 
+/** How long the button stays in its confirmed state before reverting, in ms. */
+const CONFIRM_HOLD_MS = 1600;
+/** How far the label sits from the window when it is not the one showing. */
+const LABEL_OFFSET = '8px';
+/**
+ * The two clocks a label swap needs: the outgoing label clears fast so the
+ * incoming one is not read through it, while the travel is slow enough to read
+ * as one thing replacing another rather than a flicker.
+ */
+const LABEL_TRANSITION = [
+    'opacity var(--chakra-durations-fast) var(--chakra-easings-standard)',
+    'translate var(--chakra-durations-motion-base) var(--chakra-easings-emphasized)',
+].join(', ');
+/**
+ * One of the button's two labels, stacked in the same grid cell as the other.
+ *
+ * Both labels are always in the layout, so the button is as wide as the longer
+ * of them and stops resizing when the state flips. That is the whole point
+ * here: this button is absolutely positioned against the right edge, and
+ * "복사" → "복사 완료" is two characters wider, so growing walked the button
+ * leftwards over the code the moment it was clicked (measured: 59px → 87px).
+ *
+ * Sizing this way rather than with a hand-tuned `minW` means the lock survives
+ * translation, where the longest string is not the one you measured.
+ *
+ * `past` decides which way the label leaves: the idle label has already
+ * happened by the time the confirmation shows, so it leaves upward and the
+ * confirmation rises into its place.
+ */
+const SwapLabel = ({ show, past, children, }) => (jsxRuntime.jsx(react.Box, { gridArea: "1 / 1", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "1.5", whiteSpace: "nowrap", opacity: show ? 1 : 0, translate: show ? '0 0' : `0 ${past ? '-' : ''}${LABEL_OFFSET}`, pointerEvents: show ? undefined : 'none', "aria-hidden": !show || undefined, transition: LABEL_TRANSITION, animationStyle: "composite", children: children }));
 /**
  * Intended for a quick one-click copy of one-liner code snippets.
  *
+ * The button answers for itself: on click the copy icon crosses into a check and
+ * the label flips to "copied", then reverts. Copying is otherwise invisible —
+ * without a reply the member has no way to know it worked and clicks again — and
+ * a global toast is too much ceremony for something this small, so the control
+ * that was pressed is the thing that confirms.
+ *
  * @example
  * <CopyableCode onCopy={() => {}}>
  *   {`const example = 'This is a code example';
@@ -19,10 +56,21 @@ var index = require('../Icon/index.js');
  */
 const CopyableCode = ({ children, onCopy, containerProps, }) => {
     const translate = useTranslate.useTranslate();
+    const [copied, setCopied] = React.useState(false);
+    const timer = React.useRef(undefined);
+    // The revert fires 1.6s after the click; unmounting in between would leave it
+    // writing into a gone component.
+    React.useEffect(() => () => clearTimeout(timer.current), []);
+    const handleCopy = () => {
+        onCopy?.();
+        setCopied(true);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setCopied(false), CONFIRM_HOLD_MS);
+    };
     return (jsxRuntime.jsxs(react.Flex, { position: "relative", width: "100%", ...containerProps, children: [jsxRuntime.jsxs(Card.Card, { overflow: "hidden", maxW: "100%", p: 0, width: "100%", children: [jsxRuntime.jsx(react.Box, { as: "pre", whiteSpace: "nowrap", overflowX: "scroll", p: 4, pr: 20, children: children }), jsxRuntime.jsx(react.Box, { position: "absolute", right: 0, top: 0, bottom: 0, w: 24, 
                         // Fade matches the Card surface (bg.surface) so it flips with the
                         // mode instead of fading to white on dark.
-                        bg: "linear-gradient(to right, transparent, var(--chakra-colors-bg-surface) 15%)", pointerEvents: "none" })] }), jsxRuntime.jsxs(Button.Button, { colorPalette: "primary", variant: "solid", size: "xs", onClick: onCopy, position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)", zIndex: 1, children: [jsxRuntime.jsx(index.FaRegCopy, { boxSize: "xs" }), " ", translate('copy')] })] }));
+                        bg: "linear-gradient(to right, transparent, var(--chakra-colors-bg-surface) 15%)", pointerEvents: "none" })] }), jsxRuntime.jsx(Button.Button, { colorPalette: copied ? 'success' : 'primary', variant: "solid", size: "xs", onClick: handleCopy, position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)", zIndex: 1, children: jsxRuntime.jsxs(react.Box, { display: "inline-grid", placeItems: "center", overflow: "hidden", children: [jsxRuntime.jsxs(SwapLabel, { show: !copied, past: true, children: [jsxRuntime.jsx(index.FaRegCopy, { boxSize: "xs" }), translate('copy')] }), jsxRuntime.jsxs(SwapLabel, { show: copied, past: false, children: [jsxRuntime.jsx(index.FaCheck, { boxSize: "xs" }), translate('copied')] })] }) })] }));
 };
 
 exports.CopyableCode = CopyableCode;

package/dist/components/CopyableCode/CopyableCode.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableCode.js","sources":["../../../src/components/CopyableCode/CopyableCode.tsx"],"sourcesContent":[null],"names":["useTranslate","_jsxs","Flex","Card","_jsx","Box","Button","FaRegCopy"],"mappings":";;;;;;;;;;AAQA;;;;;;;;AAQG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,cAAc,GACI,KAAI;AACtB,IAAA,MAAM,SAAS,GAAGA,yBAAY,EAAE;AAChC,IAAA,QACEC,eAAA,CAACC,UAAI,EAAA,EAAC,QAAQ,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAA,GAAK,cAAc,aACvDD,eAAA,CAACE,SAAI,IAAC,QAAQ,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,EAAA,QAAA,EAAA,CACpDC,cAAA,CAACC,SAAG,EAAA,EAAC,EAAE,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAC,QAAQ,EAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,YAC9D,QAAQ,EAAA,CACL,EACND,cAAA,CAACC,SAAG,EAAA,EACF,QAAQ,EAAC,UAAU,EACnB,KAAK,EAAE,CAAC,EACR,GAAG,EAAE,CAAC,EACN,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,EAAE;;;AAGL,wBAAA,EAAE,EAAC,6EAA6E,EAChF,aAAa,EAAC,MAAM,EAAA,CACpB,CAAA,EAAA,CACG,EACPJ,eAAA,CAACK,aAAM,EAAA,EACL,YAAY,EAAC,SAAS,EACtB,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,EACf,QAAQ,EAAC,UAAU,EACnB,KAAK,EAAE,CAAC,EACR,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,kBAAkB,EAC5B,MAAM,EAAE,CAAC,EAAA,QAAA,EAAA,CAETF,cAAA,CAACG,eAAS,EAAA,EAAC,OAAO,EAAC,IAAI,EAAA,CAAG,EAAA,GAAA,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA,EAAA,CACtC,CAAA,EAAA,CACJ;AAEX;;;;"}
+{"version":3,"file":"CopyableCode.js","sources":["../../../src/components/CopyableCode/CopyableCode.tsx"],"sourcesContent":[null],"names":["_jsx","Box","useTranslate","useState","useRef","useEffect","_jsxs","Flex","Card","Button","FaRegCopy","FaCheck"],"mappings":"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"}

package/dist/components/CopyableCode/CopyableCode.mjs

@@ -1,14 +1,51 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
 import { Flex, Box } from '@chakra-ui/react';
 import { useTranslate } from '../../hooks/useTranslate.mjs';
 import { Button } from '../Button/Button.mjs';
 import { Card } from '../Card/Card.mjs';
-import { FaRegCopy } from '../Icon/index.mjs';
+import { FaRegCopy, FaCheck } from '../Icon/index.mjs';
 
+/** How long the button stays in its confirmed state before reverting, in ms. */
+const CONFIRM_HOLD_MS = 1600;
+/** How far the label sits from the window when it is not the one showing. */
+const LABEL_OFFSET = '8px';
+/**
+ * The two clocks a label swap needs: the outgoing label clears fast so the
+ * incoming one is not read through it, while the travel is slow enough to read
+ * as one thing replacing another rather than a flicker.
+ */
+const LABEL_TRANSITION = [
+    'opacity var(--chakra-durations-fast) var(--chakra-easings-standard)',
+    'translate var(--chakra-durations-motion-base) var(--chakra-easings-emphasized)',
+].join(', ');
+/**
+ * One of the button's two labels, stacked in the same grid cell as the other.
+ *
+ * Both labels are always in the layout, so the button is as wide as the longer
+ * of them and stops resizing when the state flips. That is the whole point
+ * here: this button is absolutely positioned against the right edge, and
+ * "복사" → "복사 완료" is two characters wider, so growing walked the button
+ * leftwards over the code the moment it was clicked (measured: 59px → 87px).
+ *
+ * Sizing this way rather than with a hand-tuned `minW` means the lock survives
+ * translation, where the longest string is not the one you measured.
+ *
+ * `past` decides which way the label leaves: the idle label has already
+ * happened by the time the confirmation shows, so it leaves upward and the
+ * confirmation rises into its place.
+ */
+const SwapLabel = ({ show, past, children, }) => (jsx(Box, { gridArea: "1 / 1", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "1.5", whiteSpace: "nowrap", opacity: show ? 1 : 0, translate: show ? '0 0' : `0 ${past ? '-' : ''}${LABEL_OFFSET}`, pointerEvents: show ? undefined : 'none', "aria-hidden": !show || undefined, transition: LABEL_TRANSITION, animationStyle: "composite", children: children }));
 /**
  * Intended for a quick one-click copy of one-liner code snippets.
  *
+ * The button answers for itself: on click the copy icon crosses into a check and
+ * the label flips to "copied", then reverts. Copying is otherwise invisible —
+ * without a reply the member has no way to know it worked and clicks again — and
+ * a global toast is too much ceremony for something this small, so the control
+ * that was pressed is the thing that confirms.
+ *
  * @example
  * <CopyableCode onCopy={() => {}}>
  *   {`const example = 'This is a code example';
@@ -17,10 +54,21 @@ import { FaRegCopy } from '../Icon/index.mjs';
  */
 const CopyableCode = ({ children, onCopy, containerProps, }) => {
     const translate = useTranslate();
+    const [copied, setCopied] = useState(false);
+    const timer = useRef(undefined);
+    // The revert fires 1.6s after the click; unmounting in between would leave it
+    // writing into a gone component.
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const handleCopy = () => {
+        onCopy?.();
+        setCopied(true);
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setCopied(false), CONFIRM_HOLD_MS);
+    };
     return (jsxs(Flex, { position: "relative", width: "100%", ...containerProps, children: [jsxs(Card, { overflow: "hidden", maxW: "100%", p: 0, width: "100%", children: [jsx(Box, { as: "pre", whiteSpace: "nowrap", overflowX: "scroll", p: 4, pr: 20, children: children }), jsx(Box, { position: "absolute", right: 0, top: 0, bottom: 0, w: 24, 
                         // Fade matches the Card surface (bg.surface) so it flips with the
                         // mode instead of fading to white on dark.
-                        bg: "linear-gradient(to right, transparent, var(--chakra-colors-bg-surface) 15%)", pointerEvents: "none" })] }), jsxs(Button, { colorPalette: "primary", variant: "solid", size: "xs", onClick: onCopy, position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)", zIndex: 1, children: [jsx(FaRegCopy, { boxSize: "xs" }), " ", translate('copy')] })] }));
+                        bg: "linear-gradient(to right, transparent, var(--chakra-colors-bg-surface) 15%)", pointerEvents: "none" })] }), jsx(Button, { colorPalette: copied ? 'success' : 'primary', variant: "solid", size: "xs", onClick: handleCopy, position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)", zIndex: 1, children: jsxs(Box, { display: "inline-grid", placeItems: "center", overflow: "hidden", children: [jsxs(SwapLabel, { show: !copied, past: true, children: [jsx(FaRegCopy, { boxSize: "xs" }), translate('copy')] }), jsxs(SwapLabel, { show: copied, past: false, children: [jsx(FaCheck, { boxSize: "xs" }), translate('copied')] })] }) })] }));
 };
 
 export { CopyableCode };

package/dist/components/CopyableCode/CopyableCode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CopyableCode.mjs","sources":["../../../src/components/CopyableCode/CopyableCode.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAQA;;;;;;;;AAQG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,cAAc,GACI,KAAI;AACtB,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,QAAQ,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAA,GAAK,cAAc,aACvDA,IAAA,CAAC,IAAI,IAAC,QAAQ,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,EAAA,QAAA,EAAA,CACpDC,GAAA,CAAC,GAAG,EAAA,EAAC,EAAE,EAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAC,QAAQ,EAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,YAC9D,QAAQ,EAAA,CACL,EACNA,GAAA,CAAC,GAAG,EAAA,EACF,QAAQ,EAAC,UAAU,EACnB,KAAK,EAAE,CAAC,EACR,GAAG,EAAE,CAAC,EACN,MAAM,EAAE,CAAC,EACT,CAAC,EAAE,EAAE;;;AAGL,wBAAA,EAAE,EAAC,6EAA6E,EAChF,aAAa,EAAC,MAAM,EAAA,CACpB,CAAA,EAAA,CACG,EACPD,IAAA,CAAC,MAAM,EAAA,EACL,YAAY,EAAC,SAAS,EACtB,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,EACf,QAAQ,EAAC,UAAU,EACnB,KAAK,EAAE,CAAC,EACR,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,kBAAkB,EAC5B,MAAM,EAAE,CAAC,EAAA,QAAA,EAAA,CAETC,GAAA,CAAC,SAAS,EAAA,EAAC,OAAO,EAAC,IAAI,EAAA,CAAG,EAAA,GAAA,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA,EAAA,CACtC,CAAA,EAAA,CACJ;AAEX;;;;"}
+{"version":3,"file":"CopyableCode.mjs","sources":["../../../src/components/CopyableCode/CopyableCode.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/components/CountUp/CountUp.d.ts

@@ -0,0 +1,30 @@
+import { CountUpProps } from './CountUp.types';
+/**
+ * Counts a number up to `to` — for a balance that just grew, a total that just
+ * settled, a KPI that just refreshed.
+ *
+ * The only thing in the motion layer that CSS cannot animate at all: a number
+ * is text, and text content is not an animatable property. So this interpolates
+ * in JavaScript — and then reads the *same* curve CSS would have used, through
+ * {@link cubicBezier}, rather than inventing an ease-out for the occasion.
+ *
+ * `motion.slower` is the default and is the top of the response scale on
+ * purpose. FactChat's purchase modal counts for 1500ms after a 1000ms delay,
+ * which is two and a half seconds of a modal that has already told the reader
+ * the answer in its heading. A count-up is a flourish on a number that is
+ * already known; past ~700ms it stops reading as earned and starts reading as
+ * something to wait out.
+ *
+ * Under reduced motion the final value renders immediately — the number is the
+ * information, and the count is the decoration.
+ *
+ * **Renders a single `<span>` and wraps nothing.** The other primitives here put
+ * a wrapper around their children; this one takes no children and *is* the
+ * element, so it drops into running text or a heading with nothing in between.
+ *
+ * ```tsx
+ * <CountUp from={previousBalance} to={balance} />
+ * ```
+ */
+export declare const CountUp: import("react").ForwardRefExoticComponent<CountUpProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=CountUp.d.ts.map

package/dist/components/CountUp/CountUp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountUp.d.ts","sourceRoot":"","sources":["../../../src/components/CountUp/CountUp.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAO/C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,OAAO,0GA+EnB,CAAC"}

package/dist/components/CountUp/CountUp.js

@@ -0,0 +1,95 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var react = require('@chakra-ui/react');
+var cubicBezier = require('../../utils/cubicBezier.js');
+var motion = require('../../theme/motion.js');
+
+/** Comma-grouped, which is what a balance is read as. */
+const groupDigits = (n) => Math.round(n).toLocaleString('en-US');
+const ease = cubicBezier.cubicBezier('emphasized');
+/**
+ * Counts a number up to `to` — for a balance that just grew, a total that just
+ * settled, a KPI that just refreshed.
+ *
+ * The only thing in the motion layer that CSS cannot animate at all: a number
+ * is text, and text content is not an animatable property. So this interpolates
+ * in JavaScript — and then reads the *same* curve CSS would have used, through
+ * {@link cubicBezier}, rather than inventing an ease-out for the occasion.
+ *
+ * `motion.slower` is the default and is the top of the response scale on
+ * purpose. FactChat's purchase modal counts for 1500ms after a 1000ms delay,
+ * which is two and a half seconds of a modal that has already told the reader
+ * the answer in its heading. A count-up is a flourish on a number that is
+ * already known; past ~700ms it stops reading as earned and starts reading as
+ * something to wait out.
+ *
+ * Under reduced motion the final value renders immediately — the number is the
+ * information, and the count is the decoration.
+ *
+ * **Renders a single `<span>` and wraps nothing.** The other primitives here put
+ * a wrapper around their children; this one takes no children and *is* the
+ * element, so it drops into running text or a heading with nothing in between.
+ *
+ * ```tsx
+ * <CountUp from={previousBalance} to={balance} />
+ * ```
+ */
+const CountUp = React.forwardRef(({ to, from, durationMs = motion.MOTION_DURATION_MS.slower, delayMs = 0, format = groupDigits, onEnd, ...rest }, ref) => {
+    // Chakra resolves this from the same media query the `_motionReduce`
+    // condition compiles to, so the JS branch and the CSS branch cannot drift.
+    const reduced = react.useBreakpointValue({ base: false, _motionReduce: true }, { ssr: false });
+    // The displayed value lives in a ref and paints through a forced render, so
+    // the ~60 frames of a count do not each rebuild the subtree. Only this node
+    // re-renders, and only its text changes.
+    const shown = React.useRef(from ?? to);
+    const [, repaint] = React.useReducer((n) => n + 1, 0);
+    // Read inside the effect rather than listed as dependencies: a caller that
+    // rebuilds `format` inline every render would otherwise restart the count
+    // on every parent render.
+    const latest = React.useRef({ format, onEnd, durationMs, delayMs });
+    latest.current = { format, onEnd, durationMs, delayMs };
+    React.useEffect(() => {
+        const start = shown.current;
+        if (reduced || start === to) {
+            shown.current = to;
+            repaint();
+            latest.current.onEnd?.();
+            return;
+        }
+        const { durationMs: ms, delayMs: delay } = latest.current;
+        let frame = 0;
+        let began = 0;
+        const step = (now) => {
+            if (!began)
+                began = now;
+            const elapsed = now - began - delay;
+            if (elapsed < 0) {
+                frame = requestAnimationFrame(step);
+                return;
+            }
+            if (elapsed >= ms) {
+                shown.current = to;
+                repaint();
+                latest.current.onEnd?.();
+                return;
+            }
+            shown.current = start + (to - start) * ease(elapsed / ms);
+            repaint();
+            frame = requestAnimationFrame(step);
+        };
+        frame = requestAnimationFrame(step);
+        return () => cancelAnimationFrame(frame);
+        // `from` is a starting value, not a target: changing it mid-count would
+        // restart from a number the reader never saw. Later counts pick up from
+        // wherever the last one landed, which is what makes a second reward read
+        // as adding to the first.
+    }, [to, reduced]);
+    return (jsxRuntime.jsx(react.chakra.span, { ref: ref, fontVariantNumeric: "tabular-nums", ...rest, children: format(shown.current) }));
+});
+CountUp.displayName = 'CountUp';
+
+exports.CountUp = CountUp;
+//# sourceMappingURL=CountUp.js.map

package/dist/components/CountUp/CountUp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountUp.js","sources":["../../../src/components/CountUp/CountUp.tsx"],"sourcesContent":[null],"names":["cubicBezier","forwardRef","MOTION_DURATION_MS","useBreakpointValue","useRef","useReducer","useEffect","_jsx","chakra"],"mappings":"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"}

package/dist/components/CountUp/CountUp.mjs

@@ -0,0 +1,93 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useReducer, useEffect } from 'react';
+import { useBreakpointValue, chakra } from '@chakra-ui/react';
+import { cubicBezier } from '../../utils/cubicBezier.mjs';
+import { MOTION_DURATION_MS } from '../../theme/motion.mjs';
+
+/** Comma-grouped, which is what a balance is read as. */
+const groupDigits = (n) => Math.round(n).toLocaleString('en-US');
+const ease = cubicBezier('emphasized');
+/**
+ * Counts a number up to `to` — for a balance that just grew, a total that just
+ * settled, a KPI that just refreshed.
+ *
+ * The only thing in the motion layer that CSS cannot animate at all: a number
+ * is text, and text content is not an animatable property. So this interpolates
+ * in JavaScript — and then reads the *same* curve CSS would have used, through
+ * {@link cubicBezier}, rather than inventing an ease-out for the occasion.
+ *
+ * `motion.slower` is the default and is the top of the response scale on
+ * purpose. FactChat's purchase modal counts for 1500ms after a 1000ms delay,
+ * which is two and a half seconds of a modal that has already told the reader
+ * the answer in its heading. A count-up is a flourish on a number that is
+ * already known; past ~700ms it stops reading as earned and starts reading as
+ * something to wait out.
+ *
+ * Under reduced motion the final value renders immediately — the number is the
+ * information, and the count is the decoration.
+ *
+ * **Renders a single `<span>` and wraps nothing.** The other primitives here put
+ * a wrapper around their children; this one takes no children and *is* the
+ * element, so it drops into running text or a heading with nothing in between.
+ *
+ * ```tsx
+ * <CountUp from={previousBalance} to={balance} />
+ * ```
+ */
+const CountUp = forwardRef(({ to, from, durationMs = MOTION_DURATION_MS.slower, delayMs = 0, format = groupDigits, onEnd, ...rest }, ref) => {
+    // Chakra resolves this from the same media query the `_motionReduce`
+    // condition compiles to, so the JS branch and the CSS branch cannot drift.
+    const reduced = useBreakpointValue({ base: false, _motionReduce: true }, { ssr: false });
+    // The displayed value lives in a ref and paints through a forced render, so
+    // the ~60 frames of a count do not each rebuild the subtree. Only this node
+    // re-renders, and only its text changes.
+    const shown = useRef(from ?? to);
+    const [, repaint] = useReducer((n) => n + 1, 0);
+    // Read inside the effect rather than listed as dependencies: a caller that
+    // rebuilds `format` inline every render would otherwise restart the count
+    // on every parent render.
+    const latest = useRef({ format, onEnd, durationMs, delayMs });
+    latest.current = { format, onEnd, durationMs, delayMs };
+    useEffect(() => {
+        const start = shown.current;
+        if (reduced || start === to) {
+            shown.current = to;
+            repaint();
+            latest.current.onEnd?.();
+            return;
+        }
+        const { durationMs: ms, delayMs: delay } = latest.current;
+        let frame = 0;
+        let began = 0;
+        const step = (now) => {
+            if (!began)
+                began = now;
+            const elapsed = now - began - delay;
+            if (elapsed < 0) {
+                frame = requestAnimationFrame(step);
+                return;
+            }
+            if (elapsed >= ms) {
+                shown.current = to;
+                repaint();
+                latest.current.onEnd?.();
+                return;
+            }
+            shown.current = start + (to - start) * ease(elapsed / ms);
+            repaint();
+            frame = requestAnimationFrame(step);
+        };
+        frame = requestAnimationFrame(step);
+        return () => cancelAnimationFrame(frame);
+        // `from` is a starting value, not a target: changing it mid-count would
+        // restart from a number the reader never saw. Later counts pick up from
+        // wherever the last one landed, which is what makes a second reward read
+        // as adding to the first.
+    }, [to, reduced]);
+    return (jsx(chakra.span, { ref: ref, fontVariantNumeric: "tabular-nums", ...rest, children: format(shown.current) }));
+});
+CountUp.displayName = 'CountUp';
+
+export { CountUp };
+//# sourceMappingURL=CountUp.mjs.map

package/dist/components/CountUp/CountUp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountUp.mjs","sources":["../../../src/components/CountUp/CountUp.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"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"}

package/dist/components/CountUp/CountUp.types.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLChakraProps } from '@chakra-ui/react';
+export interface CountUpProps extends HTMLChakraProps<'span'> {
+    /** The value to land on. */
+    to: number;
+    /**
+     * Where the first count starts. Omit to render `to` immediately and count
+     * only when it changes later.
+     */
+    from?: number;
+    /** Count duration. Defaults to `motion.slower` (700ms). */
+    durationMs?: number;
+    /** Delay before counting — e.g. to let a modal finish arriving. */
+    delayMs?: number;
+    /** Formats each intermediate value. Defaults to comma-grouped digits. */
+    format?: (n: number) => string;
+    /** Fires once a count settles, including under reduced motion. */
+    onEnd?: () => void;
+}
+//# sourceMappingURL=CountUp.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CountUp.types.d.ts","sourceRoot":"","sources":["../../../src/components/CountUp/CountUp.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,MAAM,WAAW,YAAa,SAAQ,eAAe,CAAC,MAAM,CAAC;IAC3D,4BAA4B;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB"}

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

@@ -0,0 +1,3 @@
+export { CountUp } from './CountUp';
+export type { CountUpProps } from './CountUp.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CountUp/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/ErrorFallback/ErrorFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorFallback.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorFallback/ErrorFallback.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EACP,SAAS,EACT,aAAa,EACb,MAAM,EACN,YAAY,GACb,EAAE,kBAAkB,2CA6LpB"}
+{"version":3,"file":"ErrorFallback.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorFallback/ErrorFallback.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EACP,SAAS,EACT,aAAa,EACb,MAAM,EACN,YAAY,GACb,EAAE,kBAAkB,2CAyNpB"}

package/dist/components/ErrorFallback/ErrorFallback.js

@@ -2,15 +2,16 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var react = require('@chakra-ui/react');
 var useTranslate = require('../../hooks/useTranslate.js');
 var Button = require('../Button/Button.js');
 var Card = require('../Card/Card.js');
 var Container = require('../Container/Container.js');
-require('react');
 require('../../theme/index.js');
 var index = require('../Icon/index.js');
 var useToast = require('../Toast/useToast.js');
+require('../Typography/Caption.js');
 var H1 = require('../Typography/H1.js');
 require('../Typography/H2.js');
 require('../Typography/H3.js');
@@ -25,6 +26,8 @@ var Text = require('../Typography/Text.js');
 function ErrorFallback({ error, errorId, timestamp, componentName, userId, onErrorReset, }) {
     const translate = useTranslate.useTranslate();
     const showToast = useToast.useToast();
+    // Names the landmark below with the same words the card shows as its title.
+    const titleId = React.useId();
     const errorInfo = {
         errorId: errorId ??
             `ERR-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`.toUpperCase(),
@@ -60,7 +63,19 @@ User Agent: ${errorInfo.userAgent}`;
             });
         });
     };
-    return (jsxRuntime.jsx(react.Flex, { minH: "100vh", align: "center", justify: "center", p: 8, children: jsxRuntime.jsx(Container.Container, { disableResponsive: true, maxW: "container.sm", children: jsxRuntime.jsx(Card.Card, { p: 12, textAlign: "center", w: "full", bgColor: "bg.surface", boxShadow: "2xl", children: jsxRuntime.jsxs(react.VStack, { gap: 6, align: "center", w: "full", mx: "auto", children: [jsxRuntime.jsx(react.Box, { position: "relative", p: 4, bg: "danger.extralight", borderRadius: "full", children: jsxRuntime.jsx(index.MdError, { boxSize: "xl", color: "danger.main" }) }), jsxRuntime.jsxs(react.VStack, { gap: 3, align: "center", w: "full", children: [jsxRuntime.jsx(H1.H1, { color: "fg.default", textStyle: "h2", fontWeight: "bold", children: translate('error_boundary_title') }), jsxRuntime.jsx(Subtitle.Subtitle, { color: "fg.muted", textStyle: "h5", maxW: "md", children: translate('error_boundary_subtitle') })] }), jsxRuntime.jsx(Card.Card, { bg: "danger.extralight", border: "1px solid", borderColor: "danger.lighter", p: 4, w: "full", children: jsxRuntime.jsx(Text.Text, { color: "danger.dark", fontFamily: "mono", wordBreak: "break-word", children: error?.message || translate('error_boundary_default_message') }) }), jsxRuntime.jsxs(Card.Card, { bg: "primary.extralight", borderColor: "primary.lighter", p: 6, w: "full", children: [jsxRuntime.jsx(H4.H4, { color: "primary.dark", mb: 4, textAlign: "center", children: translate('support_information') }), jsxRuntime.jsxs(react.VStack, { gap: 2, align: "stretch", mb: 4, children: [jsxRuntime.jsxs(react.Flex, { justify: "space-between", children: [jsxRuntime.jsxs(Text.Text, { color: "primary.main", fontWeight: "semibold", children: [translate('error_id'), ":"] }), jsxRuntime.jsx(Text.Text, { fontFamily: "mono", children: errorInfo.errorId })] }), jsxRuntime.jsxs(react.Flex, { justify: "space-between", children: [jsxRuntime.jsxs(Text.Text, { color: "primary.main", fontWeight: "semibold", children: [translate('time'), ":"] }), jsxRuntime.jsx(Subtext.Subtext, { fontFamily: "mono", children: new Date().toLocaleString() })] }), jsxRuntime.jsxs(react.Flex, { justify: "space-between", children: [jsxRuntime.jsxs(Text.Text, { color: "primary.main", fontWeight: "semibold", children: [translate('component'), ":"] }), jsxRuntime.jsx(Text.Text, { fontFamily: "mono", children: componentName || translate('unknown') })] }), jsxRuntime.jsxs(react.Flex, { justify: "space-between", children: [jsxRuntime.jsxs(Text.Text, { color: "primary.main", fontWeight: "semibold", children: [translate('user_id'), ":"] }), jsxRuntime.jsx(Text.Text, { fontFamily: "mono", children: userId ?? translate('anonymous') })] }), typeof window !== 'undefined' && (jsxRuntime.jsxs(react.Flex, { justify: "space-between", children: [jsxRuntime.jsxs(Text.Text, { color: "primary.main", fontWeight: "semibold", children: [translate('page'), ":"] }), jsxRuntime.jsx(Subtext.Subtext, { fontFamily: "mono", children: window.location.pathname })] }))] }), jsxRuntime.jsxs(react.Flex, { justify: "space-between", align: "flex-end", gap: 4, children: [jsxRuntime.jsx(Text.Text, { textAlign: "left", children: translate('support_help_text') }), jsxRuntime.jsxs(Button.Button, { onClick: copyErrorInfo, size: "sm", minW: "fit-content", variant: "ghost", children: [jsxRuntime.jsx(index.FaRegCopy, { boxSize: "xs" }), " ", translate('copy_error_details')] })] })] }), jsxRuntime.jsxs(react.VStack, { gap: 3, w: "full", align: "center", children: [jsxRuntime.jsxs(Button.Button, { onClick: onErrorReset, size: "lg", variant: "solid", _hover: {
+    return (
+    // A landmark, and a named one. This card replaces whatever failed — often
+    // the whole page, so the host's `<main>` goes with it — and a screen-reader
+    // user then has nothing to navigate by: axe reports every node under
+    // `region`, and there is no landmark to jump to (KWCAG 2.1 5.2.4.1 반복
+    // 영역 건너뛰기). A `<section>` labelled by the error title is a region
+    // landmark wherever it renders, which `<main>` would not be — a segment-level
+    // boundary leaves the host's `<main>` in place, and two of those is its own
+    // failure.
+    jsxRuntime.jsx(react.Flex, { as: "section", "aria-labelledby": titleId, 
+        // `svh`: `100vh` is the largest mobile viewport and overflows under
+        // the URL bar.
+        minH: "100svh", align: "center", justify: "center", p: 8, children: jsxRuntime.jsx(Container.Container, { disableResponsive: true, maxW: "container.sm", children: jsxRuntime.jsx(Card.Card, { p: 12, textAlign: "center", w: "full", bgColor: "bg.surface", boxShadow: "2xl", children: jsxRuntime.jsxs(react.VStack, { gap: 6, align: "center", w: "full", mx: "auto", children: [jsxRuntime.jsx(react.Box, { position: "relative", p: 4, bg: "danger.extralight", borderRadius: "full", children: jsxRuntime.jsx(index.MdError, { boxSize: "xl", color: "danger.main" }) }), jsxRuntime.jsxs(react.VStack, { gap: 3, align: "center", w: "full", children: [jsxRuntime.jsx(H1.H1, { id: titleId, color: "fg.default", textStyle: "h2", fontWeight: "bold", children: translate('error_boundary_title') }), jsxRuntime.jsx(Subtitle.Subtitle, { color: "fg.muted", textStyle: "h5", maxW: "md", children: translate('error_boundary_subtitle') })] }), jsxRuntime.jsx(Card.Card, { bg: "danger.extralight", border: "1px solid", borderColor: "danger.lighter", p: 4, w: "full", children: jsxRuntime.jsx(Text.Text, { color: "danger.dark", fontFamily: "mono", wordBreak: "break-word", children: error?.message || translate('error_boundary_default_message') }) }), jsxRuntime.jsxs(Card.Card, { bg: "primary.extralight", borderColor: "primary.lighter", p: 6, w: "full", children: [jsxRuntime.jsx(H4.H4, { as: "h2", color: "primary.dark", mb: 4, textAlign: "center", children: translate('support_information') }), jsxRuntime.jsxs(react.VStack, { gap: 2, align: "stretch", mb: 4, children: [jsxRuntime.jsxs(react.Flex, { justify: "space-between", children: [jsxRuntime.jsxs(Text.Text, { color: "primary.main", fontWeight: "semibold", children: [translate('error_id'), ":"] }), jsxRuntime.jsx(Text.Text, { fontFamily: "mono", children: errorInfo.errorId })] }), jsxRuntime.jsxs(react.Flex, { justify: "space-between", children: [jsxRuntime.jsxs(Text.Text, { color: "primary.main", fontWeight: "semibold", children: [translate('time'), ":"] }), jsxRuntime.jsx(Subtext.Subtext, { fontFamily: "mono", children: new Date().toLocaleString() })] }), jsxRuntime.jsxs(react.Flex, { justify: "space-between", children: [jsxRuntime.jsxs(Text.Text, { color: "primary.main", fontWeight: "semibold", children: [translate('component'), ":"] }), jsxRuntime.jsx(Text.Text, { fontFamily: "mono", children: componentName || translate('unknown') })] }), jsxRuntime.jsxs(react.Flex, { justify: "space-between", children: [jsxRuntime.jsxs(Text.Text, { color: "primary.main", fontWeight: "semibold", children: [translate('user_id'), ":"] }), jsxRuntime.jsx(Text.Text, { fontFamily: "mono", children: userId ?? translate('anonymous') })] }), typeof window !== 'undefined' && (jsxRuntime.jsxs(react.Flex, { justify: "space-between", children: [jsxRuntime.jsxs(Text.Text, { color: "primary.main", fontWeight: "semibold", children: [translate('page'), ":"] }), jsxRuntime.jsx(Subtext.Subtext, { fontFamily: "mono", children: window.location.pathname })] }))] }), jsxRuntime.jsxs(react.Flex, { justify: "space-between", align: "flex-end", gap: 4, children: [jsxRuntime.jsx(Text.Text, { textAlign: "left", children: translate('support_help_text') }), jsxRuntime.jsxs(Button.Button, { onClick: copyErrorInfo, size: "sm", minW: "fit-content", variant: "ghost", children: [jsxRuntime.jsx(index.FaRegCopy, { boxSize: "xs" }), " ", translate('copy_error_details')] })] })] }), jsxRuntime.jsxs(react.VStack, { gap: 3, w: "full", align: "center", children: [jsxRuntime.jsxs(Button.Button, { onClick: onErrorReset, size: "lg", variant: "solid", _hover: {
                                         transform: 'translateY(-1px)',
                                         boxShadow: 'lg',
                                     }, w: "full", maxW: "300px", children: [jsxRuntime.jsx(index.HiRefresh, {}), " ", translate('try_again')] }), jsxRuntime.jsxs(Button.Button, { onClick: () => window.location.reload(), size: "sm", variant: "ghost", children: [jsxRuntime.jsx(index.HiRefresh, {}), " ", translate('refresh_page')] })] })] }) }) }) }));