@bioturing/components 0.14.1 → 0.15.0

package/dist/Toast.js

@@ -3,7 +3,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/j
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_config_provider_6a57beb3__ from "antd/es/config-provider";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_theme_useToken_e8911485__ from "antd/es/theme/useToken";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-import "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__ from "@bioturing/assets";
 import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__ from "@base-ui-components/react";
 import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
@@ -15,6 +15,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_components_NormalCancelBtn_5
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_components_NormalOkBtn_897b50c4__ from "antd/es/modal/components/NormalOkBtn";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_locale_f16c0933__ from "antd/es/modal/locale";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_locale_31079002__ from "antd/es/locale";
+import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_use_render_2fb9dc6d__ from "@base-ui-components/react/use-render";
+import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_merge_props_04b69945__ from "@base-ui-components/react/merge-props";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_segmented_6dbdbe23__ from "antd/es/segmented";
 import * as __WEBPACK_EXTERNAL_MODULE__ant_design_cssinjs_c619260f__ from "@ant-design/cssinjs";
 import * as __WEBPACK_EXTERNAL_MODULE_prism_react_renderer_be33806e__ from "prism-react-renderer";
@@ -32,6 +34,9 @@ function cx(...args) {
 function clsx(...args) {
     return cx(...args).join(" ");
 }
+function cn(...args) {
+    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(cx(...args));
+}
 "use client";
 const useAntdCssVarClassname = ()=>{
     var _token_;
@@ -147,9 +152,244 @@ var constants_ModalSize = /*#__PURE__*/ function(ModalSize) {
     ModalSize["fullscreen"] = "100%";
     return ModalSize;
 }({});
+const measureText = (container)=>{
+    const span = document.createElement("span");
+    span.style.opacity = "0";
+    span.style.position = "absolute";
+    span.style.top = "-1000px";
+    span.style.left = "-1000px";
+    span.style.whiteSpace = "nowrap";
+    span.style.pointerEvents = "none";
+    container.appendChild(span);
+    return {
+        measure: (text)=>{
+            span.innerText = text;
+            return span.clientWidth;
+        },
+        destroy: ()=>{
+            container.removeChild(span);
+        }
+    };
+};
+const getMiddleTruncatedString = (text, ellipsis, container)=>{
+    var _Object_values_reverse_find;
+    if (!text) return text;
+    const { measure: getTextWidth, destroy: destroyMeasure } = measureText(container);
+    const textWidth = getTextWidth(text);
+    const containerWidth = container.clientWidth;
+    const initialOffset = Math.floor(containerWidth / textWidth * text.length);
+    if (textWidth <= containerWidth) {
+        destroyMeasure();
+        return text;
+    }
+    let offset = initialOffset;
+    const attempts = {};
+    const maxAttempts = 20;
+    const buffer = 10;
+    while(Object.values(attempts).length <= maxAttempts){
+        if (attempts[offset]) break;
+        if (offset <= 1) {
+            attempts[0] = [
+                0,
+                ellipsis
+            ];
+            break;
+        }
+        const start = text.slice(0, Math.ceil((offset - ellipsis.length) / 2 - 1)).trimEnd();
+        const end = text.slice(Math.floor((offset - ellipsis.length) / 2) - offset).trimStart();
+        const truncatedStr = start + ellipsis + end;
+        const width = getTextWidth(truncatedStr);
+        attempts[offset] = [
+            width,
+            truncatedStr
+        ];
+        if (width >= containerWidth) offset -= 2;
+        else {
+            if (containerWidth - width < buffer) break;
+            offset += 2;
+        }
+    }
+    destroyMeasure();
+    return (null == (_Object_values_reverse_find = Object.values(attempts).reverse().find(([width])=>width < containerWidth)) ? void 0 : _Object_values_reverse_find[1]) ?? Object.values(attempts)[0][1];
+};
+"use client";
+const Truncate = ({ children, position = "end", lines = 1, className, style, ...rest })=>{
+    const cls = useCls();
+    const containerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [isTruncated, setIsTruncated] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [truncatedText, setTruncatedText] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(children);
+    const text = children;
+    const getContainerStyles = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
+        if ("auto" !== lines) return {
+            ...style,
+            ...lines > 1 ? {
+                "--ds-line-clamp": lines
+            } : {}
+        };
+        return {
+            ...style,
+            "--ds-line-clamp": 999
+        };
+    }, [
+        lines,
+        style
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+        const container = containerRef.current;
+        if (!container) return;
+        if ("auto" === lines) {
+            var _window_document_fonts_ready, _window_document_fonts;
+            setTruncatedText(text);
+            const calculateLines = ()=>{
+                const parent = container.parentElement;
+                if (!parent) return;
+                const styles = window.getComputedStyle(container);
+                const fontSize = parseFloat(styles.fontSize);
+                const lineHeight = "normal" === styles.lineHeight ? 1.2 * fontSize : parseFloat(styles.lineHeight);
+                const parentStyles = window.getComputedStyle(parent);
+                const paddingTop = parseFloat(parentStyles.paddingTop) || 0;
+                const paddingBottom = parseFloat(parentStyles.paddingBottom) || 0;
+                const borderTopWidth = parseFloat(parentStyles.borderTopWidth) || 0;
+                const borderBottomWidth = parseFloat(parentStyles.borderBottomWidth) || 0;
+                const parentHeight = parent.clientHeight;
+                const availableHeight = parentHeight - paddingTop - paddingBottom - borderTopWidth - borderBottomWidth;
+                const maxLines = Math.max(1, Math.floor(availableHeight / lineHeight));
+                if (container) container.style.setProperty("--ds-line-clamp", String(maxLines));
+                const clone = document.createElement("span");
+                clone.style.visibility = "hidden";
+                clone.style.position = "absolute";
+                clone.style.width = `${container.clientWidth}px`;
+                clone.style.fontSize = styles.fontSize;
+                clone.style.fontFamily = styles.fontFamily;
+                clone.style.lineHeight = styles.lineHeight;
+                clone.textContent = text;
+                document.body.appendChild(clone);
+                const isTruncated = clone.scrollHeight > availableHeight;
+                document.body.removeChild(clone);
+                setIsTruncated(isTruncated);
+            };
+            null == (_window_document_fonts = window.document.fonts) || null == (_window_document_fonts_ready = _window_document_fonts.ready) || _window_document_fonts_ready.then(calculateLines);
+            const observer = new ResizeObserver(()=>{
+                window.requestAnimationFrame(calculateLines);
+            });
+            observer.observe(container);
+            if (container.parentElement) observer.observe(container.parentElement);
+            return ()=>observer.disconnect();
+        }
+        if ("number" == typeof lines && lines > 1) {
+            var _window_document_fonts_ready1, _window_document_fonts1;
+            setTruncatedText(text);
+            const checkIfTruncated = ()=>{
+                const clone = document.createElement("span");
+                clone.style.visibility = "hidden";
+                clone.style.position = "absolute";
+                clone.style.width = `${container.clientWidth}px`;
+                clone.textContent = text;
+                document.body.appendChild(clone);
+                const isTruncated = clone.scrollHeight > (container.clientHeight || container.offsetHeight);
+                document.body.removeChild(clone);
+                setIsTruncated(isTruncated);
+            };
+            null == (_window_document_fonts1 = window.document.fonts) || null == (_window_document_fonts_ready1 = _window_document_fonts1.ready) || _window_document_fonts_ready1.then(checkIfTruncated);
+            const observer = new ResizeObserver(()=>{
+                window.requestAnimationFrame(checkIfTruncated);
+            });
+            observer.observe(container);
+            return ()=>observer.disconnect();
+        }
+        let cancellationToken = {
+            cancelled: false
+        };
+        const calculateTruncatedString = ()=>{
+            if (cancellationToken) cancellationToken.cancelled = true;
+            const requestCancellationToken = {
+                cancelled: false
+            };
+            cancellationToken = requestCancellationToken;
+            const truncated = getMiddleTruncatedString(text, "\u2026", container);
+            if (requestCancellationToken.cancelled) return;
+            setTruncatedText(truncated);
+        };
+        if ("middle" == position) {
+            var _window_document_fonts_ready2, _window_document_fonts2;
+            null == (_window_document_fonts2 = window.document.fonts) || null == (_window_document_fonts_ready2 = _window_document_fonts2.ready) || _window_document_fonts_ready2.then(calculateTruncatedString);
+        }
+        if ("end" == position) setTruncatedText(text);
+        const observer = new ResizeObserver(()=>{
+            if ("middle" == position) window.requestAnimationFrame(calculateTruncatedString);
+            if ("end" == position) {
+                const isOverflowing = container.scrollWidth > container.clientWidth;
+                if (isOverflowing) setIsTruncated(true);
+            }
+        });
+        observer.observe(container);
+        return ()=>{
+            cancellationToken.cancelled = true;
+            observer.disconnect();
+        };
+    }, [
+        text,
+        position,
+        lines
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+        ref: containerRef,
+        style: getContainerStyles(),
+        className: clsx(1 === lines ? cls("truncate") : cls("truncate-multiline"), "middle" === position ? cls("truncate-middle") : cls("truncate-end"), className),
+        title: isTruncated ? text : void 0,
+        ...rest,
+        children: text === truncatedText ? text : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+            children: truncatedText
+        })
+    });
+};
+const Stack = ({ hug = false, align = "flex-start", justify = "flex-start", vertical = false, gap = 0, wrap = false, className, children, ...rest })=>{
+    const cls = useCls();
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: cn(cls("stack"), hug ? cls("stack-hug") : cls("stack-fill"), cls(`stack-gap-${gap}`), vertical ? cls("stack-vertical") : cls("stack-horizontal"), wrap && cls("stack-wrap"), cls(`stack-align-${align}`), cls(`stack-justify-${justify}`), className),
+        ...rest,
+        children: children
+    });
+};
+const StackChild = ({ flex, grow = false, shrink = false, children, style, stack = false, hug = false, align = "flex-start", justify = "flex-start", vertical = false, gap = 0, wrap = false, className, ...rest })=>{
+    const cls = useCls();
+    const stackProps = {
+        hug,
+        align,
+        justify,
+        vertical,
+        gap,
+        wrap
+    };
+    let flexClass = "";
+    if ("boolean" == typeof flex) flexClass = flex ? cls("stack-child-flex-1") : cls("stack-child-flex-0");
+    const combinedClassName = cn(cls("stack-child"), grow && cls("stack-child-grow"), shrink && cls("stack-child-shrink"), flexClass, className);
+    const flexValue = "string" == typeof flex || "number" == typeof flex ? flex : void 0;
+    const { renderElement } = (0, __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_use_render_2fb9dc6d__.useRender)({
+        render: ()=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].isValidElement(children) ? children : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                children: children
+            }),
+        props: (0, __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_merge_props_04b69945__.mergeProps)({
+            className: combinedClassName,
+            style: {
+                ...style,
+                flex: flexValue
+            },
+            ...rest
+        })
+    });
+    return stack ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Stack, {
+        ...stackProps,
+        className: combinedClassName,
+        children: children
+    }) : renderElement();
+};
+const Stack_Stack = Object.assign(Stack, {
+    Child: StackChild
+});
 "use client";
 const Modal = ({ open: externalOpen, closeIcon, children, size: sizeProp, footer, width, style, styles, classNames, okButtonProps, cancelButtonProps, loading, onOk, onCancel, okText, okType = "primary", confirmLoading, cancelText = "Close", hideOkButton = false, hideCancelButton = false, contentPadding, title, afterTitle, beforeCloseButton, afterCloseButton, defaultFixedHeaderFooter = false, centered = true, type = "default", defaultOpen = true, background: backgroundProp, bodyScrollable = true, ...rest })=>{
-    const defaultCloseIcon = void 0 === closeIcon ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.X, {
+    const defaultCloseIcon = void 0 === closeIcon ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.XIcon, {
         size: 16,
         weight: "bold"
     }) : closeIcon;
@@ -232,17 +472,21 @@ const Modal = ({ open: externalOpen, closeIcon, children, size: sizeProp, footer
     });
     const renderTitle = ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
             children: [
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Flex, {
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Stack_Stack, {
                     align: "center",
                     gap: 8,
                     className: cls("modal-title-wrapper"),
                     children: [
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                            className: cls("grow", "truncate"),
-                            children: title
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Stack_Stack.Child, {
+                            grow: true,
+                            children: "string" == typeof title ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Truncate, {
+                                children: title
+                            }) : title
                         }),
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-                            className: "flex items-center gap-2",
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Stack_Stack.Child, {
+                            stack: true,
+                            hug: true,
+                            align: "center",
                             children: [
                                 beforeCloseButton,
                                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(IconButton, {
@@ -265,7 +509,7 @@ const Modal = ({ open: externalOpen, closeIcon, children, size: sizeProp, footer
         title: renderTitle(),
         classNames: {
             ...classNames,
-            wrapper: cls("modal-wrap", "fullscreen" == size && "modal-fullscreen", isContentOverflow && "modal-content-overflow", false === bodyScrollable && "modal-no-body-scroll", (defaultFixedHeaderFooter || isContentOverflow || "fullscreen" == size) && "modal-fixed")
+            wrapper: cls("modal-wrap", "fullscreen" == size && "modal-fullscreen", isContentOverflow && "modal-content-overflow", false === bodyScrollable && "modal-no-body-scroll", defaultFixedHeaderFooter || isContentOverflow || "fullscreen" == size ? "modal-fixed" : "")
         },
         styles: modalStyles,
         modalRender: (modal)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
@@ -478,24 +722,24 @@ const Modal_Modal = Object.assign(Modal, {
     useModal
 });
 "use client";
-const ScrollArea = ({ children, className, viewportClassName, thumbClassName, scrollbarClassName, orientation = "vertical" })=>{
+const ScrollArea = ({ children, className, classNames = {}, orientation = "vertical" })=>{
     const cls = useCls();
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Root, {
         className: clsx(cls("scroll-area"), className),
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Viewport, {
-                className: clsx(cls("scroll-area-viewport"), viewportClassName),
+                className: clsx(cls("scroll-area-viewport"), null == classNames ? void 0 : classNames.viewport),
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Content, {
                     className: clsx(cls("scroll-area-content")),
                     children: children
                 })
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Scrollbar, {
-                className: clsx(cls("scroll-area-scrollbar"), scrollbarClassName),
+                className: clsx(cls("scroll-area-scrollbar"), null == classNames ? void 0 : classNames.scrollbar),
                 orientation: orientation,
                 "data-orientation": orientation,
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Thumb, {
-                    className: clsx(cls("scroll-area-thumb", thumbClassName))
+                    className: clsx(cls("scroll-area-thumb"), null == classNames ? void 0 : classNames.thumb)
                 })
             })
         ]
@@ -931,7 +1175,7 @@ function reactNodeToString(node) {
     return "";
 }
 "use client";
-const CodeBlock = ({ code, children, lang: defaultLang = "tsx", className, options, activeOption: controlledActiveOption, defaultActiveOption = 0, onActiveOptionChange, copyText = "Copy", copySuccessText = "Copied", ...rest })=>{
+const CodeBlock = ({ code, children, lang: defaultLang = "tsx", className, options, activeOption: controlledActiveOption, defaultActiveOption = 0, onActiveOptionChange, copyText = "Copy", copySuccessText = "Copied", classNames, maxHeight, ...rest })=>{
     const [activeOption, setActiveOption] = useControlledState(controlledActiveOption, onActiveOptionChange, defaultActiveOption);
     const [currentCode, setCurrentCode] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(code || "");
     const [lang, setLang] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(defaultLang);
@@ -974,11 +1218,11 @@ const CodeBlock = ({ code, children, lang: defaultLang = "tsx", className, optio
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ThemeProvider, {
         theme: "dark",
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(WithAntdTokens, {
-            className: clsx(cls("code-block"), className),
+            className: clsx(cls("code-block"), className, null == classNames ? void 0 : classNames.root),
             ...rest,
             children: [
                 hasOptions && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                    className: cls("code-block-header"),
+                    className: cls("code-block-header", null == classNames ? void 0 : classNames.header),
                     children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Segmented, {
                         value: activeOption,
                         onChange: setActiveOption,
@@ -998,7 +1242,10 @@ const CodeBlock = ({ code, children, lang: defaultLang = "tsx", className, optio
                     })
                 }),
                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                    className: cls("code-block-content"),
+                    className: cls("code-block-content", null == classNames ? void 0 : classNames.content),
+                    style: {
+                        maxHeight: maxHeight && ("number" == typeof maxHeight ? `${maxHeight}px` : maxHeight)
+                    },
                     children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ScrollArea, {
                         children: currentCode ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_prism_react_renderer_be33806e__.Highlight, {
                             language: lang,

package/dist/Tooltip.css

@@ -0,0 +1,6 @@
+@layer components {
+  .ds-tooltip .ds-tooltip-inner {
+    min-height: auto;
+  }
+}
+

package/dist/Tour.css

@@ -0,0 +1,73 @@
+@layer components {
+  .ds-tour .ds-tour-header {
+    padding-top: 1rem;
+    padding-bottom: .75rem;
+  }
+
+  .ds-tour .ds-tour-title {
+    font-size: var(--text-ds-h5);
+    font-weight: var(--text-ds-h5--font-weight);
+    line-height: var(--text-ds-h5--line-height);
+  }
+
+  .ds-tour .ds-tour-description {
+    font-size: var(--text-ds-md);
+    font-weight: var(--text-ds-md--font-weight);
+    line-height: var(--text-ds-md--line-height);
+  }
+
+  :is(:is(.ds-tour .ds-tour-description) p, :is(.ds-tour .ds-tour-description) ul, :is(.ds-tour .ds-tour-description) ol):not(:first-child) {
+    margin-top: .875rem;
+  }
+
+  :is(.ds-tour .ds-tour-description) strong {
+    font-weight: 600;
+  }
+
+  :is(.ds-tour .ds-tour-description) ul {
+    padding-left: 1rem;
+    list-style: outside;
+  }
+
+  :is(.ds-tour .ds-tour-description) ol {
+    padding-left: 1rem;
+    list-style: decimal;
+  }
+
+  :is(.ds-tour .ds-tour-description) li {
+    padding-left: .5rem;
+  }
+
+  :is(.ds-tour .ds-tour-description) li:not(:first-child) {
+    margin-top: .5rem;
+  }
+
+  :is(.ds-tour .ds-tour-description) li svg {
+    margin-bottom: -.25rem;
+    font-size: 1.25rem;
+    display: inline-block;
+  }
+
+  .ds-tour .ds-tour-footer {
+    padding-top: 1rem;
+  }
+
+  .ds-tour .ds-tour-indicator-wrapper {
+    align-items: center;
+    gap: .5rem;
+    width: 100%;
+    height: 100%;
+    display: inline-flex;
+  }
+
+  .ds-tour .ds-tour-indicator-summary-text {
+    font-size: var(--text-ds-sm);
+    font-weight: var(--text-ds-sm--font-weight);
+    line-height: var(--text-ds-sm--line-height);
+    color: var(--ds-color-text-tertiary);
+    align-items: center;
+    padding-top: .25rem;
+    display: inline-flex;
+  }
+}
+

package/dist/Tour.js

@@ -33,7 +33,7 @@ const Tour = ({ indicatorsRender, ...rest })=>{
                     className: cls("tour-indicator-summary-text"),
                     children: [
                         current + 1,
-                        " / ",
+                        "/",
                         total
                     ]
                 }),

package/dist/Truncate.css

@@ -0,0 +1,31 @@
+@layer components {
+  .ds-truncate {
+    white-space: nowrap;
+    flex-grow: 1;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    display: block;
+    overflow: hidden;
+  }
+
+  .ds-truncate-end {
+    text-overflow: ellipsis;
+  }
+
+  .ds-truncate-middle {
+    text-overflow: clip;
+  }
+
+  .ds-truncate-multiline {
+    -webkit-line-clamp: var(--ds-line-clamp, 2);
+    line-clamp: var(--ds-line-clamp, 2);
+    white-space: normal;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+}
+

package/dist/Truncate.js

@@ -83,35 +83,90 @@ const getMiddleTruncatedString = (text, ellipsis, container)=>{
     return (null == (_Object_values_reverse_find = Object.values(attempts).reverse().find(([width])=>width < containerWidth)) ? void 0 : _Object_values_reverse_find[1]) ?? Object.values(attempts)[0][1];
 };
 "use client";
-const Truncate = ({ children, position = "end", className, style, ...rest })=>{
+const Truncate = ({ children, position = "end", lines = 1, className, style, ...rest })=>{
     const cls = useCls();
     const containerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const [isTruncated, setIsTruncated] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     const [truncatedText, setTruncatedText] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(children);
     const text = children;
     const getContainerStyles = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
-        const baseStyles = {
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            textOverflow: "clip",
-            flexGrow: 1,
-            minWidth: 0,
-            maxWidth: "100%",
-            display: "block",
-            ...style
+        if ("auto" !== lines) return {
+            ...style,
+            ...lines > 1 ? {
+                "--ds-line-clamp": lines
+            } : {}
         };
-        if ("end" === position) return {
-            ...baseStyles,
-            textOverflow: "ellipsis"
+        return {
+            ...style,
+            "--ds-line-clamp": 999
         };
-        return baseStyles;
     }, [
-        position,
+        lines,
         style
     ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
         const container = containerRef.current;
         if (!container) return;
+        if ("auto" === lines) {
+            var _window_document_fonts_ready, _window_document_fonts;
+            setTruncatedText(text);
+            const calculateLines = ()=>{
+                const parent = container.parentElement;
+                if (!parent) return;
+                const styles = window.getComputedStyle(container);
+                const fontSize = parseFloat(styles.fontSize);
+                const lineHeight = "normal" === styles.lineHeight ? 1.2 * fontSize : parseFloat(styles.lineHeight);
+                const parentStyles = window.getComputedStyle(parent);
+                const paddingTop = parseFloat(parentStyles.paddingTop) || 0;
+                const paddingBottom = parseFloat(parentStyles.paddingBottom) || 0;
+                const borderTopWidth = parseFloat(parentStyles.borderTopWidth) || 0;
+                const borderBottomWidth = parseFloat(parentStyles.borderBottomWidth) || 0;
+                const parentHeight = parent.clientHeight;
+                const availableHeight = parentHeight - paddingTop - paddingBottom - borderTopWidth - borderBottomWidth;
+                const maxLines = Math.max(1, Math.floor(availableHeight / lineHeight));
+                if (container) container.style.setProperty("--ds-line-clamp", String(maxLines));
+                const clone = document.createElement("span");
+                clone.style.visibility = "hidden";
+                clone.style.position = "absolute";
+                clone.style.width = `${container.clientWidth}px`;
+                clone.style.fontSize = styles.fontSize;
+                clone.style.fontFamily = styles.fontFamily;
+                clone.style.lineHeight = styles.lineHeight;
+                clone.textContent = text;
+                document.body.appendChild(clone);
+                const isTruncated = clone.scrollHeight > availableHeight;
+                document.body.removeChild(clone);
+                setIsTruncated(isTruncated);
+            };
+            null == (_window_document_fonts = window.document.fonts) || null == (_window_document_fonts_ready = _window_document_fonts.ready) || _window_document_fonts_ready.then(calculateLines);
+            const observer = new ResizeObserver(()=>{
+                window.requestAnimationFrame(calculateLines);
+            });
+            observer.observe(container);
+            if (container.parentElement) observer.observe(container.parentElement);
+            return ()=>observer.disconnect();
+        }
+        if ("number" == typeof lines && lines > 1) {
+            var _window_document_fonts_ready1, _window_document_fonts1;
+            setTruncatedText(text);
+            const checkIfTruncated = ()=>{
+                const clone = document.createElement("span");
+                clone.style.visibility = "hidden";
+                clone.style.position = "absolute";
+                clone.style.width = `${container.clientWidth}px`;
+                clone.textContent = text;
+                document.body.appendChild(clone);
+                const isTruncated = clone.scrollHeight > (container.clientHeight || container.offsetHeight);
+                document.body.removeChild(clone);
+                setIsTruncated(isTruncated);
+            };
+            null == (_window_document_fonts1 = window.document.fonts) || null == (_window_document_fonts_ready1 = _window_document_fonts1.ready) || _window_document_fonts_ready1.then(checkIfTruncated);
+            const observer = new ResizeObserver(()=>{
+                window.requestAnimationFrame(checkIfTruncated);
+            });
+            observer.observe(container);
+            return ()=>observer.disconnect();
+        }
         let cancellationToken = {
             cancelled: false
         };
@@ -126,8 +181,8 @@ const Truncate = ({ children, position = "end", className, style, ...rest })=>{
             setTruncatedText(truncated);
         };
         if ("middle" == position) {
-            var _window_document_fonts_ready, _window_document_fonts;
-            null == (_window_document_fonts = window.document.fonts) || null == (_window_document_fonts_ready = _window_document_fonts.ready) || _window_document_fonts_ready.then(calculateTruncatedString);
+            var _window_document_fonts_ready2, _window_document_fonts2;
+            null == (_window_document_fonts2 = window.document.fonts) || null == (_window_document_fonts_ready2 = _window_document_fonts2.ready) || _window_document_fonts_ready2.then(calculateTruncatedString);
         }
         if ("end" == position) setTruncatedText(text);
         const observer = new ResizeObserver(()=>{
@@ -144,12 +199,13 @@ const Truncate = ({ children, position = "end", className, style, ...rest })=>{
         };
     }, [
         text,
-        position
+        position,
+        lines
     ]);
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
         ref: containerRef,
         style: getContainerStyles(),
-        className: clsx(cls("truncate"), className),
+        className: clsx(1 === lines ? cls("truncate") : cls("truncate-multiline"), "middle" === position ? cls("truncate-middle") : cls("truncate-end"), className),
         title: isTruncated ? text : void 0,
         ...rest,
         children: text === truncatedText ? text : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {