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

package/dist/components/ExpandableText/ExpandableText.mjs

@@ -1,5 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box } from '@chakra-ui/react';
+import '../Typography/Caption.mjs';
 import { H1 } from '../Typography/H1.mjs';
 import { H2 } from '../Typography/H2.mjs';
 import { H3 } from '../Typography/H3.mjs';
@@ -24,11 +26,28 @@ const TEXT_COMPONENTS = {
     H4,
     H5,
 };
-const ExpandableText = ({ charLimit = 100, component = 'Text', children, ...rest }) => {
+/**
+ * Text clipped to a few lines, with a link that opens it.
+ *
+ * Opening animates the height rather than swapping the text, so the content
+ * below slides down instead of jumping — this is text someone is part-way
+ * through reading, and a jump costs them their place.
+ *
+ * @example
+ * ```tsx
+ * <ExpandableText lineClamp={2}>{longDescription}</ExpandableText>
+ * ```
+ */
+const ExpandableText = ({ lineClamp = 3, charLimit: _charLimit, component = 'Text', children, ...rest }) => {
     const translate = useTranslate();
-    const { displayText, isLong, isExpanded, handleToggle } = useExpandableText(children, charLimit);
+    const { contentRef, isExpanded, isOverflowing, maxHeight, handleToggle } = useExpandableText(lineClamp);
     const Component = TEXT_COMPONENTS[component];
-    return (jsxs(Component, { ...rest, children: [displayText, isLong && (jsx(Link, { as: "button", textDecor: "none", _hover: { color: 'primary.dark' }, onClick: handleToggle, "aria-expanded": isExpanded, children: isExpanded ? translate('see_less') : translate('see_more') }))] }));
+    return (jsxs(Component, { ...rest, children: [jsx(Box, { ref: contentRef, overflow: "hidden", 
+                // `lh` is the line box, so the resting height is a whole number of lines
+                // and the cut always lands between them. Where `lh` is unsupported the
+                // declaration is dropped and the text simply shows in full — degraded,
+                // not broken.
+                maxHeight: maxHeight ?? `${lineClamp}lh`, animationStyle: "travel", transitionProperty: "max-height", children: children }), (isOverflowing || isExpanded) && (jsx(Link, { as: "button", textDecor: "none", _hover: { color: 'fg.default' }, onClick: handleToggle, "aria-expanded": isExpanded, children: isExpanded ? translate('see_less') : translate('see_more') }))] }));
 };
 
 export { ExpandableText };

package/dist/components/ExpandableText/ExpandableText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableText.mjs","sources":["../../../src/components/ExpandableText/ExpandableText.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;AAkBA;AACA,MAAM,eAAe,GAAG;IACtB,IAAI;IACJ,QAAQ;IACR,OAAO;IACP,EAAE;IACF,EAAE;IACF,EAAE;IACF,EAAE;IACF,EAAE;CACM;MASG,cAAc,GAAG,CAAC,EAC7B,SAAS,GAAG,GAAG,EACf,SAAS,GAAG,MAAM,EAClB,QAAQ,EACR,GAAG,IAAI,EACa,KAAI;AACxB,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,iBAAiB,CACzE,QAAQ,EACR,SAAS,CACV;AAED,IAAA,MAAM,SAAS,GAAG,eAAe,CAAC,SAAS,CAAC;IAE5C,QACEA,IAAA,CAAC,SAAS,EAAA,EAAA,GAAK,IAAI,aAChB,WAAW,EACX,MAAM,KACLC,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAC,QAAQ,EACX,SAAS,EAAC,MAAM,EAChB,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EACjC,OAAO,EAAE,YAAY,EAAA,eAAA,EACN,UAAU,EAAA,QAAA,EAExB,UAAU,GAAG,SAAS,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC,UAAU,CAAC,EAAA,CACtD,CACR,CAAA,EAAA,CACS;AAEhB;;;;"}
+{"version":3,"file":"ExpandableText.mjs","sources":["../../../src/components/ExpandableText/ExpandableText.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;AAmBA;AACA,MAAM,eAAe,GAAG;IACtB,IAAI;IACJ,QAAQ;IACR,OAAO;IACP,EAAE;IACF,EAAE;IACF,EAAE;IACF,EAAE;IACF,EAAE;CACM;AAmBV;;;;;;;;;;;AAWG;AACI,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,GAAG,CAAC,EACb,SAAS,EAAE,UAAU,EACrB,SAAS,GAAG,MAAM,EAClB,QAAQ,EACR,GAAG,IAAI,EACa,KAAI;AACxB,IAAA,MAAM,SAAS,GAAG,YAAY,EAAE;AAChC,IAAA,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,YAAY,EAAE,GACtE,iBAAiB,CAAC,SAAS,CAAC;AAE9B,IAAA,MAAM,SAAS,GAAG,eAAe,CAAC,SAAS,CAAC;AAE5C,IAAA,QACEA,IAAA,CAAC,SAAS,EAAA,EAAA,GAAK,IAAI,EAAA,QAAA,EAAA,CACjBC,GAAA,CAAC,GAAG,EAAA,EACF,GAAG,EAAE,UAAU,EACf,QAAQ,EAAC,QAAQ;;;;;AAKjB,gBAAA,SAAS,EAAE,SAAS,IAAI,CAAA,EAAG,SAAS,CAAA,EAAA,CAAI,EACxC,cAAc,EAAC,QAAQ,EACvB,kBAAkB,EAAC,YAAY,EAAA,QAAA,EAE9B,QAAQ,EAAA,CACL,EACL,CAAC,aAAa,IAAI,UAAU,MAC3BA,GAAA,CAAC,IAAI,EAAA,EACH,EAAE,EAAC,QAAQ,EACX,SAAS,EAAC,MAAM,EAChB,MAAM,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,EAC/B,OAAO,EAAE,YAAY,EAAA,eAAA,EACN,UAAU,YAExB,UAAU,GAAG,SAAS,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC,UAAU,CAAC,EAAA,CACtD,CACR,CAAA,EAAA,CACS;AAEhB;;;;"}

package/dist/components/ExpandableText/useExpandableText.d.ts

@@ -1,7 +1,32 @@
-export declare const useExpandableText: (children: React.ReactNode, charLimit?: number) => {
+/**
+ * Collapsed/expanded state for text clipped to a number of lines.
+ *
+ * Both states render the same children and the clipping is a `max-height`, which
+ * is what makes the change animatable at all — the previous character-count
+ * version swapped one node tree for another, so there was never anything on the
+ * page for a transition to reveal.
+ *
+ * ## Why not `-webkit-line-clamp`
+ *
+ * The clamp would give the cut line an ellipsis, but it takes the height with
+ * it: under a clamp `scrollHeight` collapses to the clipped height, so there is
+ * no way left to ask whether anything is hidden, and the link that opens the
+ * text can never appear. A `max-height` of whole `lh` units cuts on the same
+ * line boundary, keeps `scrollHeight` honest, and is the thing being animated
+ * anyway.
+ *
+ * ## Why two commits per direction
+ *
+ * `max-height` only animates between two lengths, and each direction begins on a
+ * value that is not one. Opening ends at `none` so a later reflow — a resize, a
+ * font swap — is not trapped under a stale pixel count; closing therefore has to
+ * pin the height it is leaving for one frame before releasing it.
+ */
+export declare const useExpandableText: (lineClamp: number) => {
+    contentRef: import("react").MutableRefObject<HTMLDivElement>;
     isExpanded: boolean;
-    isLong: boolean;
-    displayText: import("react").ReactNode;
+    isOverflowing: boolean;
+    maxHeight: string;
     handleToggle: (event: React.MouseEvent) => void;
 };
 //# sourceMappingURL=useExpandableText.d.ts.map

package/dist/components/ExpandableText/useExpandableText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useExpandableText.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableText/useExpandableText.ts"],"names":[],"mappings":"AA0FA,eAAO,MAAM,iBAAiB,GAC5B,UAAU,KAAK,CAAC,SAAS,EACzB,kBAAe;;;;0BAc0B,KAAK,CAAC,UAAU;CAO1D,CAAC"}
+{"version":3,"file":"useExpandableText.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableText/useExpandableText.ts"],"names":[],"mappings":"AAuBA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM;;;;;0BA6BR,KAAK,CAAC,UAAU;CAwB1D,CAAC"}

package/dist/components/ExpandableText/useExpandableText.js

@@ -2,84 +2,86 @@
 'use strict';
 
 var React = require('react');
+var motion = require('../../theme/motion.js');
 
-// Utility function to extract text content from ReactNode
-const getTextContent = (node) => {
-    if (typeof node === 'string' || typeof node === 'number') {
-        return String(node);
-    }
-    if (Array.isArray(node)) {
-        return node.map(getTextContent).join('');
-    }
-    if (React.isValidElement(node)) {
-        return getTextContent(node.props.children);
-    }
-    return '';
-};
-// Utility function to truncate ReactNode content while preserving structure
-const truncateReactNode = (node, charLimit, currentLength = 0) => {
-    if (currentLength >= charLimit) {
-        return { truncated: null, length: currentLength };
-    }
-    if (typeof node === 'string' || typeof node === 'number') {
-        const text = String(node);
-        const remainingChars = charLimit - currentLength;
-        if (text.length <= remainingChars) {
-            return { truncated: node, length: currentLength + text.length };
-        }
-        return {
-            truncated: text.slice(0, remainingChars) + '…',
-            length: charLimit,
-        };
-    }
-    if (Array.isArray(node)) {
-        const truncatedChildren = [];
-        let totalLength = currentLength;
-        for (const child of node) {
-            if (totalLength >= charLimit)
-                break;
-            const { truncated, length } = truncateReactNode(child, charLimit, totalLength);
-            if (truncated !== null) {
-                truncatedChildren.push(truncated);
-            }
-            totalLength = length;
-        }
-        return { truncated: truncatedChildren, length: totalLength };
-    }
-    if (React.isValidElement(node)) {
-        const { truncated: truncatedChildren, length } = truncateReactNode(node.props.children, charLimit, currentLength);
-        if (truncatedChildren === null) {
-            return { truncated: null, length };
-        }
-        return {
-            truncated: {
-                ...node,
-                props: {
-                    ...node.props,
-                    children: truncatedChildren,
-                },
-            },
-            length,
-        };
-    }
-    return { truncated: node, length: currentLength };
-};
-const useExpandableText = (children, charLimit = 100) => {
+/**
+ * Whether the OS is asking for less movement, read when it matters rather than
+ * subscribed to — this only decides how long to wait before tidying up, and a
+ * member who flips the setting mid-click is not a case worth a listener for.
+ */
+const prefersReducedMotion = () => typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+/** Two frames, so React has committed the first value before the second lands. */
+const afterPaint = (fn) => requestAnimationFrame(() => requestAnimationFrame(fn));
+/**
+ * Collapsed/expanded state for text clipped to a number of lines.
+ *
+ * Both states render the same children and the clipping is a `max-height`, which
+ * is what makes the change animatable at all — the previous character-count
+ * version swapped one node tree for another, so there was never anything on the
+ * page for a transition to reveal.
+ *
+ * ## Why not `-webkit-line-clamp`
+ *
+ * The clamp would give the cut line an ellipsis, but it takes the height with
+ * it: under a clamp `scrollHeight` collapses to the clipped height, so there is
+ * no way left to ask whether anything is hidden, and the link that opens the
+ * text can never appear. A `max-height` of whole `lh` units cuts on the same
+ * line boundary, keeps `scrollHeight` honest, and is the thing being animated
+ * anyway.
+ *
+ * ## Why two commits per direction
+ *
+ * `max-height` only animates between two lengths, and each direction begins on a
+ * value that is not one. Opening ends at `none` so a later reflow — a resize, a
+ * font swap — is not trapped under a stale pixel count; closing therefore has to
+ * pin the height it is leaving for one frame before releasing it.
+ */
+const useExpandableText = (lineClamp) => {
+    const contentRef = React.useRef(null);
+    const settleTimer = React.useRef(undefined);
     const [isExpanded, setIsExpanded] = React.useState(false);
-    const textContent = React.useMemo(() => getTextContent(children), [children]);
-    const isLong = textContent.length > charLimit;
-    const displayText = React.useMemo(() => {
-        if (isExpanded || !isLong)
-            return children;
-        const { truncated } = truncateReactNode(children, charLimit);
-        return truncated;
-    }, [isExpanded, isLong, children, charLimit]);
+    /** `undefined` means "rest at the line multiple" — see the component. */
+    const [maxHeight, setMaxHeight] = React.useState();
+    /** Until we know something is hidden, no link is offered. */
+    const [isOverflowing, setIsOverflowing] = React.useState(false);
+    React.useLayoutEffect(() => {
+        const el = contentRef.current;
+        if (!el)
+            return;
+        // Only meaningful while collapsed; open, the two heights are equal.
+        const check = () => {
+            if (!isExpanded)
+                setIsOverflowing(el.scrollHeight > el.clientHeight + 1);
+        };
+        check();
+        // How many lines the text takes depends on width, so a resize can create or
+        // remove the overflow entirely.
+        const observer = new ResizeObserver(check);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [lineClamp, isExpanded]);
+    React.useEffect(() => () => clearTimeout(settleTimer.current), []);
     const handleToggle = React.useCallback((event) => {
         event.preventDefault();
         event.stopPropagation();
-        setIsExpanded((prev) => !prev);
+        const el = contentRef.current;
+        if (!el)
+            return;
+        clearTimeout(settleTimer.current);
+        const settle = prefersReducedMotion() ? 0 : motion.MOTION_DURATION_MS.base;
+        setIsExpanded((wasExpanded) => {
+            if (wasExpanded) {
+                setMaxHeight(`${el.scrollHeight}px`); // pin the height being left
+                afterPaint(() => setMaxHeight(undefined)); // → line multiple; animates
+                return false;
+            }
+            setMaxHeight(`${el.scrollHeight}px`); // full height; animates open
+            settleTimer.current = setTimeout(() => setMaxHeight('none'), settle);
+            return true;
+        });
     }, []);
-    return { isExpanded, isLong, displayText, handleToggle };
+    return { contentRef, isExpanded, isOverflowing, maxHeight, handleToggle };
 };
 
 exports.useExpandableText = useExpandableText;

package/dist/components/ExpandableText/useExpandableText.js.map

@@ -1 +1 @@
-{"version":3,"file":"useExpandableText.js","sources":["../../../src/components/ExpandableText/useExpandableText.ts"],"sourcesContent":[null],"names":["isValidElement","useState","useMemo","useCallback"],"mappings":"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"}
+{"version":3,"file":"useExpandableText.js","sources":["../../../src/components/ExpandableText/useExpandableText.ts"],"sourcesContent":[null],"names":["useRef","useState","useLayoutEffect","useEffect","useCallback","MOTION_DURATION_MS"],"mappings":";;;;;;AAUA;;;;AAIG;AACH,MAAM,oBAAoB,GAAG,MAC3B,OAAO,MAAM,KAAK,WAAW;IAC7B,MAAM,CAAC,UAAU,GAAG,kCAAkC,CAAC,CAAC,OAAO;AAEjE;AACA,MAAM,UAAU,GAAG,CAAC,EAAc,KAChC,qBAAqB,CAAC,MAAM,qBAAqB,CAAC,EAAE,CAAC,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACI,MAAM,iBAAiB,GAAG,CAAC,SAAiB,KAAI;AACrD,IAAA,MAAM,UAAU,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAC/C,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAgC,SAAS,CAAC;IAEpE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;;IAEnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,EAAU;;IAEpD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAEzDC,qBAAe,CAAC,MAAK;AACnB,QAAA,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO;AAC7B,QAAA,IAAI,CAAC,EAAE;YAAE;;QAGT,MAAM,KAAK,GAAG,MAAK;AACjB,YAAA,IAAI,CAAC,UAAU;gBAAE,gBAAgB,CAAC,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,GAAG,CAAC,CAAC;AAC1E,QAAA,CAAC;AACD,QAAA,KAAK,EAAE;;;AAIP,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,KAAK,CAAC;AAC1C,QAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;AACpB,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACpC,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AAE3B,IAAAC,eAAS,CAAC,MAAM,MAAM,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC;AAE5D,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAAC,CAAC,KAAuB,KAAI;QAC3D,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO;AAC7B,QAAA,IAAI,CAAC,EAAE;YAAE;AACT,QAAA,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC;AAEjC,QAAA,MAAM,MAAM,GAAG,oBAAoB,EAAE,GAAG,CAAC,GAAGC,yBAAkB,CAAC,IAAI;AAEnE,QAAA,aAAa,CAAC,CAAC,WAAW,KAAI;YAC5B,IAAI,WAAW,EAAE;gBACf,YAAY,CAAC,GAAG,EAAE,CAAC,YAAY,CAAA,EAAA,CAAI,CAAC,CAAC;gBACrC,UAAU,CAAC,MAAM,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;AAC1C,gBAAA,OAAO,KAAK;YACd;YAEA,YAAY,CAAC,GAAG,EAAE,CAAC,YAAY,CAAA,EAAA,CAAI,CAAC,CAAC;AACrC,YAAA,WAAW,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,YAAY,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;AACpE,YAAA,OAAO,IAAI;AACb,QAAA,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,YAAY,EAAE;AAC3E;;;;"}

package/dist/components/ExpandableText/useExpandableText.mjs

@@ -1,83 +1,85 @@
 "use client";
-import { useState, useMemo, useCallback, isValidElement } from 'react';
+import { useRef, useState, useLayoutEffect, useEffect, useCallback } from 'react';
+import { MOTION_DURATION_MS } from '../../theme/motion.mjs';
 
-// Utility function to extract text content from ReactNode
-const getTextContent = (node) => {
-    if (typeof node === 'string' || typeof node === 'number') {
-        return String(node);
-    }
-    if (Array.isArray(node)) {
-        return node.map(getTextContent).join('');
-    }
-    if (isValidElement(node)) {
-        return getTextContent(node.props.children);
-    }
-    return '';
-};
-// Utility function to truncate ReactNode content while preserving structure
-const truncateReactNode = (node, charLimit, currentLength = 0) => {
-    if (currentLength >= charLimit) {
-        return { truncated: null, length: currentLength };
-    }
-    if (typeof node === 'string' || typeof node === 'number') {
-        const text = String(node);
-        const remainingChars = charLimit - currentLength;
-        if (text.length <= remainingChars) {
-            return { truncated: node, length: currentLength + text.length };
-        }
-        return {
-            truncated: text.slice(0, remainingChars) + '…',
-            length: charLimit,
-        };
-    }
-    if (Array.isArray(node)) {
-        const truncatedChildren = [];
-        let totalLength = currentLength;
-        for (const child of node) {
-            if (totalLength >= charLimit)
-                break;
-            const { truncated, length } = truncateReactNode(child, charLimit, totalLength);
-            if (truncated !== null) {
-                truncatedChildren.push(truncated);
-            }
-            totalLength = length;
-        }
-        return { truncated: truncatedChildren, length: totalLength };
-    }
-    if (isValidElement(node)) {
-        const { truncated: truncatedChildren, length } = truncateReactNode(node.props.children, charLimit, currentLength);
-        if (truncatedChildren === null) {
-            return { truncated: null, length };
-        }
-        return {
-            truncated: {
-                ...node,
-                props: {
-                    ...node.props,
-                    children: truncatedChildren,
-                },
-            },
-            length,
-        };
-    }
-    return { truncated: node, length: currentLength };
-};
-const useExpandableText = (children, charLimit = 100) => {
+/**
+ * Whether the OS is asking for less movement, read when it matters rather than
+ * subscribed to — this only decides how long to wait before tidying up, and a
+ * member who flips the setting mid-click is not a case worth a listener for.
+ */
+const prefersReducedMotion = () => typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+/** Two frames, so React has committed the first value before the second lands. */
+const afterPaint = (fn) => requestAnimationFrame(() => requestAnimationFrame(fn));
+/**
+ * Collapsed/expanded state for text clipped to a number of lines.
+ *
+ * Both states render the same children and the clipping is a `max-height`, which
+ * is what makes the change animatable at all — the previous character-count
+ * version swapped one node tree for another, so there was never anything on the
+ * page for a transition to reveal.
+ *
+ * ## Why not `-webkit-line-clamp`
+ *
+ * The clamp would give the cut line an ellipsis, but it takes the height with
+ * it: under a clamp `scrollHeight` collapses to the clipped height, so there is
+ * no way left to ask whether anything is hidden, and the link that opens the
+ * text can never appear. A `max-height` of whole `lh` units cuts on the same
+ * line boundary, keeps `scrollHeight` honest, and is the thing being animated
+ * anyway.
+ *
+ * ## Why two commits per direction
+ *
+ * `max-height` only animates between two lengths, and each direction begins on a
+ * value that is not one. Opening ends at `none` so a later reflow — a resize, a
+ * font swap — is not trapped under a stale pixel count; closing therefore has to
+ * pin the height it is leaving for one frame before releasing it.
+ */
+const useExpandableText = (lineClamp) => {
+    const contentRef = useRef(null);
+    const settleTimer = useRef(undefined);
     const [isExpanded, setIsExpanded] = useState(false);
-    const textContent = useMemo(() => getTextContent(children), [children]);
-    const isLong = textContent.length > charLimit;
-    const displayText = useMemo(() => {
-        if (isExpanded || !isLong)
-            return children;
-        const { truncated } = truncateReactNode(children, charLimit);
-        return truncated;
-    }, [isExpanded, isLong, children, charLimit]);
+    /** `undefined` means "rest at the line multiple" — see the component. */
+    const [maxHeight, setMaxHeight] = useState();
+    /** Until we know something is hidden, no link is offered. */
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    useLayoutEffect(() => {
+        const el = contentRef.current;
+        if (!el)
+            return;
+        // Only meaningful while collapsed; open, the two heights are equal.
+        const check = () => {
+            if (!isExpanded)
+                setIsOverflowing(el.scrollHeight > el.clientHeight + 1);
+        };
+        check();
+        // How many lines the text takes depends on width, so a resize can create or
+        // remove the overflow entirely.
+        const observer = new ResizeObserver(check);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [lineClamp, isExpanded]);
+    useEffect(() => () => clearTimeout(settleTimer.current), []);
     const handleToggle = useCallback((event) => {
         event.preventDefault();
         event.stopPropagation();
-        setIsExpanded((prev) => !prev);
+        const el = contentRef.current;
+        if (!el)
+            return;
+        clearTimeout(settleTimer.current);
+        const settle = prefersReducedMotion() ? 0 : MOTION_DURATION_MS.base;
+        setIsExpanded((wasExpanded) => {
+            if (wasExpanded) {
+                setMaxHeight(`${el.scrollHeight}px`); // pin the height being left
+                afterPaint(() => setMaxHeight(undefined)); // → line multiple; animates
+                return false;
+            }
+            setMaxHeight(`${el.scrollHeight}px`); // full height; animates open
+            settleTimer.current = setTimeout(() => setMaxHeight('none'), settle);
+            return true;
+        });
     }, []);
-    return { isExpanded, isLong, displayText, handleToggle };
+    return { contentRef, isExpanded, isOverflowing, maxHeight, handleToggle };
 };
 
 export { useExpandableText };

package/dist/components/ExpandableText/useExpandableText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useExpandableText.mjs","sources":["../../../src/components/ExpandableText/useExpandableText.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}
+{"version":3,"file":"useExpandableText.mjs","sources":["../../../src/components/ExpandableText/useExpandableText.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAUA;;;;AAIG;AACH,MAAM,oBAAoB,GAAG,MAC3B,OAAO,MAAM,KAAK,WAAW;IAC7B,MAAM,CAAC,UAAU,GAAG,kCAAkC,CAAC,CAAC,OAAO;AAEjE;AACA,MAAM,UAAU,GAAG,CAAC,EAAc,KAChC,qBAAqB,CAAC,MAAM,qBAAqB,CAAC,EAAE,CAAC,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AACI,MAAM,iBAAiB,GAAG,CAAC,SAAiB,KAAI;AACrD,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC/C,IAAA,MAAM,WAAW,GAAG,MAAM,CAAgC,SAAS,CAAC;IAEpE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;;IAEnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAU;;IAEpD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEzD,eAAe,CAAC,MAAK;AACnB,QAAA,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO;AAC7B,QAAA,IAAI,CAAC,EAAE;YAAE;;QAGT,MAAM,KAAK,GAAG,MAAK;AACjB,YAAA,IAAI,CAAC,UAAU;gBAAE,gBAAgB,CAAC,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,GAAG,CAAC,CAAC;AAC1E,QAAA,CAAC;AACD,QAAA,KAAK,EAAE;;;AAIP,QAAA,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,KAAK,CAAC;AAC1C,QAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;AACpB,QAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACpC,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AAE3B,IAAA,SAAS,CAAC,MAAM,MAAM,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC;AAE5D,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,KAAuB,KAAI;QAC3D,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO;AAC7B,QAAA,IAAI,CAAC,EAAE;YAAE;AACT,QAAA,YAAY,CAAC,WAAW,CAAC,OAAO,CAAC;AAEjC,QAAA,MAAM,MAAM,GAAG,oBAAoB,EAAE,GAAG,CAAC,GAAG,kBAAkB,CAAC,IAAI;AAEnE,QAAA,aAAa,CAAC,CAAC,WAAW,KAAI;YAC5B,IAAI,WAAW,EAAE;gBACf,YAAY,CAAC,GAAG,EAAE,CAAC,YAAY,CAAA,EAAA,CAAI,CAAC,CAAC;gBACrC,UAAU,CAAC,MAAM,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC;AAC1C,gBAAA,OAAO,KAAK;YACd;YAEA,YAAY,CAAC,GAAG,EAAE,CAAC,YAAY,CAAA,EAAA,CAAI,CAAC,CAAC;AACrC,YAAA,WAAW,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,YAAY,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;AACpE,YAAA,OAAO,IAAI;AACb,QAAA,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,YAAY,EAAE;AAC3E;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/FileInput/FileInput.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,SAAS;;;;;;oDA8FrB,CAAC"}
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/FileInput/FileInput.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,SAAS;;;;;;oDA0GrB,CAAC"}

package/dist/components/FileInput/FileInput.js

@@ -6,6 +6,7 @@ var React = require('react');
 var react = require('@chakra-ui/react');
 var index = require('../Icon/index.js');
 var Spinner = require('../Spinner/Spinner.js');
+require('../Typography/Caption.js');
 require('../Typography/H1.js');
 require('../Typography/H2.js');
 require('../Typography/H3.js');
@@ -23,7 +24,16 @@ const FileInput = React.forwardRef(({ fileInputLabel, containerStyle = {}, bgIma
     const handleChange = (event) => {
         onChange(event.currentTarget.files);
     };
-    return (jsxRuntime.jsx(react.Flex, { role: "button", w: "100%", h: "100%", maxH: 32, flexDir: "column", align: "center", justify: "center", border: "1px dashed", borderColor: "border.default", position: "relative", overflow: "hidden", borderRadius: "md", ...containerStyle, children: jsxRuntime.jsxs("label", { role: "group", style: { width: '100%', height: '100%', cursor: 'pointer' }, children: [bgImage && (jsxRuntime.jsx(react.Box, { position: "absolute", top: "0", left: "0", right: "0", bottom: "0", backgroundImage: bgImage, backgroundSize: "cover", backgroundPosition: "center", filter: "grayscale(50%) brightness(80%)", zIndex: "-1" })), jsxRuntime.jsx(react.Input, { type: "file", hidden: true, ref: ref, onChange: handleChange, ...rest }), jsxRuntime.jsx(react.Flex, { w: "100%", h: "100%", p: 7, flexDir: "column", justify: "center", align: "center", bgColor: "color-mix(in srgb, var(--chakra-colors-bg-surface) 85%, transparent)", opacity: bgImage ? 0 : 1, transition: "ease-in", _groupHover: { opacity: 1 }, children: isLoading ? (jsxRuntime.jsx(Spinner.Spinner, {})) : (jsxRuntime.jsxs(react.Flex, { w: "100%", flexDir: "column", align: "center", justify: "center", children: [jsxRuntime.jsx(react.Box, { borderRadius: "lg", bgColor: bgImage ? 'transparent' : 'bg.muted', p: 3, mb: 2, w: "fit-content", children: jsxRuntime.jsx(index.LuUpload, { color: bgImage ? 'fg.default' : 'fg.subtle' }) }), jsxRuntime.jsx(Text.Text, { color: bgImage ? 'fg.default' : 'fg.subtle', children: fileInputLabel || translate('upload_your_file') })] })) })] }) }));
+    return (
+    // No `role="button"` on this wrapper. It is not a button — the `<label>`
+    // inside is what activates the file input — and claiming the role put an
+    // interactive element inside another (axe `nested-interactive`), which is
+    // a state screen readers have no sensible way to announce
+    // (KWCAG 2.1 5.4.2.1 웹 애플리케이션 접근성 준수).
+    jsxRuntime.jsx(react.Flex, { w: "100%", h: "100%", maxH: 32, flexDir: "column", align: "center", justify: "center", border: "1px dashed", borderColor: "border.default", position: "relative", overflow: "hidden", borderRadius: "md", ...containerStyle, children: jsxRuntime.jsxs("label", { className: "group", style: { width: '100%', height: '100%', cursor: 'pointer' }, children: [bgImage && (jsxRuntime.jsx(react.Box, { position: "absolute", top: "0", left: "0", right: "0", bottom: "0", backgroundImage: bgImage, backgroundSize: "cover", backgroundPosition: "center", filter: "grayscale(50%) brightness(80%)", zIndex: "-1" })), jsxRuntime.jsx(react.Input, { type: "file", hidden: true, ref: ref, onChange: handleChange, ...rest }), jsxRuntime.jsx(react.Flex, { w: "100%", h: "100%", p: 7, flexDir: "column", justify: "center", align: "center", bgColor: "color-mix(in srgb, var(--chakra-colors-bg-surface) 85%, transparent)", opacity: bgImage ? 0 : 1, 
+                    // Was `transition="ease-in"` — a shorthand with only a timing
+                    // function resolves to 0s, so the hover fade snapped in one frame.
+                    animationStyle: "feedback", transitionProperty: "opacity", _groupHover: { opacity: 1 }, children: isLoading ? (jsxRuntime.jsx(Spinner.Spinner, {})) : (jsxRuntime.jsxs(react.Flex, { w: "100%", flexDir: "column", align: "center", justify: "center", children: [jsxRuntime.jsx(react.Box, { borderRadius: "lg", bgColor: bgImage ? 'transparent' : 'bg.muted', p: 3, mb: 2, w: "fit-content", children: jsxRuntime.jsx(index.UploadIcon, { color: bgImage ? 'fg.default' : 'fg.subtle' }) }), jsxRuntime.jsx(Text.Text, { color: bgImage ? 'fg.default' : 'fg.subtle', children: fileInputLabel || translate('upload_your_file') })] })) })] }) }));
 });
 FileInput.displayName = 'FileInput';
 

package/dist/components/FileInput/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","sources":["../../../src/components/FileInput/FileInput.tsx"],"sourcesContent":[null],"names":["forwardRef","useTranslate","_jsx","Flex","_jsxs","Box","Input","Spinner","LuUpload","Text"],"mappings":"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"}
+{"version":3,"file":"FileInput.js","sources":["../../../src/components/FileInput/FileInput.tsx"],"sourcesContent":[null],"names":["forwardRef","useTranslate","_jsx","Flex","_jsxs","Box","Input","Spinner","UploadIcon","Text"],"mappings":"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"}

package/dist/components/FileInput/FileInput.mjs

@@ -2,8 +2,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Flex, Box, Input } from '@chakra-ui/react';
-import { LuUpload } from '../Icon/index.mjs';
+import { UploadIcon } from '../Icon/index.mjs';
 import { Spinner } from '../Spinner/Spinner.mjs';
+import '../Typography/Caption.mjs';
 import '../Typography/H1.mjs';
 import '../Typography/H2.mjs';
 import '../Typography/H3.mjs';
@@ -21,7 +22,16 @@ const FileInput = forwardRef(({ fileInputLabel, containerStyle = {}, bgImage, on
     const handleChange = (event) => {
         onChange(event.currentTarget.files);
     };
-    return (jsx(Flex, { role: "button", w: "100%", h: "100%", maxH: 32, flexDir: "column", align: "center", justify: "center", border: "1px dashed", borderColor: "border.default", position: "relative", overflow: "hidden", borderRadius: "md", ...containerStyle, children: jsxs("label", { role: "group", style: { width: '100%', height: '100%', cursor: 'pointer' }, children: [bgImage && (jsx(Box, { position: "absolute", top: "0", left: "0", right: "0", bottom: "0", backgroundImage: bgImage, backgroundSize: "cover", backgroundPosition: "center", filter: "grayscale(50%) brightness(80%)", zIndex: "-1" })), jsx(Input, { type: "file", hidden: true, ref: ref, onChange: handleChange, ...rest }), jsx(Flex, { w: "100%", h: "100%", p: 7, flexDir: "column", justify: "center", align: "center", bgColor: "color-mix(in srgb, var(--chakra-colors-bg-surface) 85%, transparent)", opacity: bgImage ? 0 : 1, transition: "ease-in", _groupHover: { opacity: 1 }, children: isLoading ? (jsx(Spinner, {})) : (jsxs(Flex, { w: "100%", flexDir: "column", align: "center", justify: "center", children: [jsx(Box, { borderRadius: "lg", bgColor: bgImage ? 'transparent' : 'bg.muted', p: 3, mb: 2, w: "fit-content", children: jsx(LuUpload, { color: bgImage ? 'fg.default' : 'fg.subtle' }) }), jsx(Text, { color: bgImage ? 'fg.default' : 'fg.subtle', children: fileInputLabel || translate('upload_your_file') })] })) })] }) }));
+    return (
+    // No `role="button"` on this wrapper. It is not a button — the `<label>`
+    // inside is what activates the file input — and claiming the role put an
+    // interactive element inside another (axe `nested-interactive`), which is
+    // a state screen readers have no sensible way to announce
+    // (KWCAG 2.1 5.4.2.1 웹 애플리케이션 접근성 준수).
+    jsx(Flex, { w: "100%", h: "100%", maxH: 32, flexDir: "column", align: "center", justify: "center", border: "1px dashed", borderColor: "border.default", position: "relative", overflow: "hidden", borderRadius: "md", ...containerStyle, children: jsxs("label", { className: "group", style: { width: '100%', height: '100%', cursor: 'pointer' }, children: [bgImage && (jsx(Box, { position: "absolute", top: "0", left: "0", right: "0", bottom: "0", backgroundImage: bgImage, backgroundSize: "cover", backgroundPosition: "center", filter: "grayscale(50%) brightness(80%)", zIndex: "-1" })), jsx(Input, { type: "file", hidden: true, ref: ref, onChange: handleChange, ...rest }), jsx(Flex, { w: "100%", h: "100%", p: 7, flexDir: "column", justify: "center", align: "center", bgColor: "color-mix(in srgb, var(--chakra-colors-bg-surface) 85%, transparent)", opacity: bgImage ? 0 : 1, 
+                    // Was `transition="ease-in"` — a shorthand with only a timing
+                    // function resolves to 0s, so the hover fade snapped in one frame.
+                    animationStyle: "feedback", transitionProperty: "opacity", _groupHover: { opacity: 1 }, children: isLoading ? (jsx(Spinner, {})) : (jsxs(Flex, { w: "100%", flexDir: "column", align: "center", justify: "center", children: [jsx(Box, { borderRadius: "lg", bgColor: bgImage ? 'transparent' : 'bg.muted', p: 3, mb: 2, w: "fit-content", children: jsx(UploadIcon, { color: bgImage ? 'fg.default' : 'fg.subtle' }) }), jsx(Text, { color: bgImage ? 'fg.default' : 'fg.subtle', children: fileInputLabel || translate('upload_your_file') })] })) })] }) }));
 });
 FileInput.displayName = 'FileInput';
 

package/dist/components/FileInput/FileInput.mjs.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/FileItem/FileItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAiBrE,eAAO,MAAM,QAAQ;gHAUlB,aAAa;;CAqHf,CAAC"}
+{"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/FileItem/FileItem.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAiBrE,eAAO,MAAM,QAAQ;gHAUlB,aAAa;;CAkHf,CAAC"}

package/dist/components/FileItem/FileItem.js

@@ -8,6 +8,7 @@ var index = require('../Icon/index.js');
 var IconButton = require('../IconButton/IconButton.js');
 require('../IconButton/IconButton.styles.js');
 var ProgressBar = require('../ProgressBar/ProgressBar.js');
+require('../Typography/Caption.js');
 require('../Typography/H1.js');
 require('../Typography/H2.js');
 require('../Typography/H3.js');
@@ -25,7 +26,7 @@ var Tooltip = require('../Tooltip/Tooltip.js');
 
 const FileItem = ({ fileName, error, onFileDownload, onFileDelete, progress, fileSize, isDeleting = false, isDownloading = false, ...rest }) => {
     const translate = useTranslate.useTranslate();
-    const errorColor = 'danger.main';
+    const errorColor = 'danger.fg';
     const isUploadingFile = !error && typeof progress === 'number' && progress >= 0 && progress < 100;
     const isFileUploadComplete = !progress || error || progress === 100;
     return (jsxRuntime.jsxs(react.Flex, { px: 3, py: 2, gap: 2, justifyContent: "space-between", alignItems: "center", border: "1px solid", borderColor: "border.subtle", w: "100%", position: "relative", _before: {
@@ -36,7 +37,7 @@ const FileItem = ({ fileName, error, onFileDownload, onFileDelete, progress, fil
             left: 0,
             width: '3px',
             backgroundColor: error ? errorColor : 'transparent',
-        }, ...rest, children: [jsxRuntime.jsxs(react.Flex, { w: "60%", alignItems: "center", gap: 2, children: [jsxRuntime.jsx(react.Box, { minW: 5, children: jsxRuntime.jsx(index.CiFileOn, { color: error ? errorColor : 'fg.muted' }) }), jsxRuntime.jsx(Text.Text, { truncate: true, color: error ? errorColor : undefined, children: fileName })] }), jsxRuntime.jsxs(react.Flex, { align: "center", gap: 2, flex: 1, children: [error ? (jsxRuntime.jsx(react.Flex, { w: "100%", justify: "flex-end", align: "center", gap: 2, children: jsxRuntime.jsx(Tooltip.Tooltip, { content: error, placement: "top", children: jsxRuntime.jsx(index.MdError, { color: errorColor }) }) })) : (jsxRuntime.jsx(react.Box, { w: "100%", children: isUploadingFile && (jsxRuntime.jsxs(react.Flex, { align: "center", justify: "flex-end", gap: 2, children: [jsxRuntime.jsxs(Subtext.Subtext, { children: [progress, "%"] }), jsxRuntime.jsx(ProgressBar.ProgressBar, { w: "100%", minW: 3, maxW: 20, value: progress }), jsxRuntime.jsx(Spinner.Spinner, { size: "xs" }), jsxRuntime.jsx(IconButton.IconButton, { "aria-label": 'remove uploading file button', onClick: onFileDelete, size: "2xs", disabled: isDeleting, colorPalette: "neutral", variant: "ghost", children: jsxRuntime.jsx(index.IoClose, { color: "fg.subtle", boxSize: "md" }) })] })) })), !isUploadingFile && isFileUploadComplete && (jsxRuntime.jsxs(React.Fragment, { children: [fileSize && jsxRuntime.jsx(Subtitle.Subtitle, { mr: 4, children: formatFileSize.formatFileSize(fileSize) }), onFileDownload && !error && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isDownloading ? (jsxRuntime.jsx(Tooltip.Tooltip, { content: translate('downloading'), placement: "top", children: jsxRuntime.jsx(Spinner.Spinner, { size: "xs" }) })) : (jsxRuntime.jsx(Tooltip.Tooltip, { content: translate('download'), placement: "top", children: jsxRuntime.jsx(IconButton.IconButton, { "aria-label": translate('download'), onClick: onFileDownload, size: "2xs", colorPalette: "neutral", variant: "ghost", children: jsxRuntime.jsx(index.LuDownload, { color: "fg.muted" }) }) })) })), onFileDelete && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isDeleting ? (jsxRuntime.jsx(Tooltip.Tooltip, { content: translate('deleting'), placement: "top", children: jsxRuntime.jsx(Spinner.Spinner, { size: "xs" }) })) : (jsxRuntime.jsx(Tooltip.Tooltip, { content: translate('delete'), placement: "top", children: jsxRuntime.jsx(IconButton.IconButton, { "aria-label": translate('delete'), onClick: onFileDelete, size: "2xs", colorPalette: "neutral", variant: "ghost", children: jsxRuntime.jsx(index.FaRegTrashAlt, { boxSize: "sm", color: "fg.muted" }) }) })) }))] }))] })] }));
+        }, ...rest, children: [jsxRuntime.jsxs(react.Flex, { w: "60%", alignItems: "center", gap: 2, children: [jsxRuntime.jsx(react.Box, { minW: 5, children: jsxRuntime.jsx(index.FileIcon, { color: error ? errorColor : 'fg.muted' }) }), jsxRuntime.jsx(Text.Text, { truncate: true, color: error ? errorColor : undefined, children: fileName })] }), jsxRuntime.jsxs(react.Flex, { align: "center", gap: 2, flex: 1, children: [error ? (jsxRuntime.jsx(react.Flex, { w: "100%", justify: "flex-end", align: "center", gap: 2, children: jsxRuntime.jsx(Tooltip.Tooltip, { content: error, placement: "top", children: jsxRuntime.jsx(index.AlertCircleFilledIcon, { color: errorColor }) }) })) : (jsxRuntime.jsx(react.Box, { w: "100%", children: isUploadingFile && (jsxRuntime.jsxs(react.Flex, { align: "center", justify: "flex-end", gap: 2, children: [jsxRuntime.jsxs(Subtext.Subtext, { children: [progress, "%"] }), jsxRuntime.jsx(ProgressBar.ProgressBar, { w: "100%", minW: 3, maxW: 20, value: progress }), jsxRuntime.jsx(Spinner.Spinner, { size: "xs" }), jsxRuntime.jsx(IconButton.IconButton, { "aria-label": 'remove uploading file button', onClick: onFileDelete, size: "2xs", disabled: isDeleting, variant: "ghost", children: jsxRuntime.jsx(index.CloseIcon, { color: "fg.subtle", boxSize: "md" }) })] })) })), !isUploadingFile && isFileUploadComplete && (jsxRuntime.jsxs(React.Fragment, { children: [fileSize && jsxRuntime.jsx(Subtitle.Subtitle, { mr: 4, children: formatFileSize.formatFileSize(fileSize) }), onFileDownload && !error && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isDownloading ? (jsxRuntime.jsx(Tooltip.Tooltip, { content: translate('downloading'), placement: "top", children: jsxRuntime.jsx(Spinner.Spinner, { size: "xs" }) })) : (jsxRuntime.jsx(Tooltip.Tooltip, { content: translate('download'), placement: "top", children: jsxRuntime.jsx(IconButton.IconButton, { "aria-label": translate('download'), onClick: onFileDownload, size: "2xs", variant: "ghost", children: jsxRuntime.jsx(index.DownloadIcon, { color: "fg.muted" }) }) })) })), onFileDelete && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isDeleting ? (jsxRuntime.jsx(Tooltip.Tooltip, { content: translate('deleting'), placement: "top", children: jsxRuntime.jsx(Spinner.Spinner, { size: "xs" }) })) : (jsxRuntime.jsx(Tooltip.Tooltip, { content: translate('delete'), placement: "top", children: jsxRuntime.jsx(IconButton.IconButton, { "aria-label": translate('delete'), onClick: onFileDelete, size: "2xs", variant: "ghost", children: jsxRuntime.jsx(index.TrashIcon, { boxSize: "sm", color: "fg.muted" }) }) })) }))] }))] })] }));
 };
 FileItem.displayName = 'FileItem';