@bioturing/components 0.14.0 → 0.15.0

package/dist/Upload.css

@@ -0,0 +1,144 @@
+@layer components {
+  .ds-upload-wrapper {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .ds-upload-list {
+    flex-direction: column;
+    flex-grow: 1;
+    display: flex;
+  }
+
+  .ds-upload-list-item-container {
+    margin-top: .5rem;
+  }
+
+  .ds-upload-item {
+    border-radius: var(--ds-border-radius);
+    border: 1px solid var(--ds-color-border);
+    flex-grow: 1;
+    padding: .5rem;
+  }
+
+  .ds-upload-item-icon {
+    color: var(--ds-color-text-tertiary);
+    font-size: 1.25rem;
+  }
+
+  .ds-upload-drag-icon {
+    color: var(--ds-color-primary);
+    justify-content: center;
+    align-items: center;
+    margin-bottom: .5rem;
+    font-size: 2.5rem;
+    display: flex;
+  }
+
+  .ds-upload-item-content {
+    justify-content: space-between;
+    align-items: center;
+    min-width: 0;
+    display: flex;
+  }
+
+  .ds-upload-item-name-progress {
+    flex-direction: column;
+    flex-grow: 1;
+    flex-shrink: 1;
+    gap: 0;
+    min-width: 0;
+    display: flex;
+  }
+}
+
+@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;
+  }
+}
+
+@layer components {
+  .ds-icon-button {
+    cursor: pointer;
+    color: var(--ds-color-icon);
+    background-color: #0000;
+    border: none;
+    border-radius: 999px;
+    justify-content: center;
+    align-items: center;
+    transition: all .2s;
+    display: inline-flex;
+  }
+
+  .ds-icon-button:hover {
+    background-color: var(--ds-color-fill-secondary);
+    color: var(--ds-color-icon-hover);
+  }
+
+  .ds-icon-button:active, .ds-icon-button.ds-popover-open {
+    background-color: var(--ds-color-primary-bg);
+    color: var(--ds-color-primary);
+  }
+
+  .ds-icon-button:focus {
+    outline: none;
+  }
+
+  .ds-icon-button:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    color: var(--ds-color-text-disabled);
+  }
+
+  .ds-icon-button.ds-icon-button-medium {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: .125rem;
+    font-size: 1.25rem;
+  }
+
+  .ds-icon-button.ds-icon-button-small {
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: .125rem;
+    font-size: 1rem;
+  }
+
+  .ds-icon-button.ds-icon-button-negative-margin {
+    margin: -.125rem;
+  }
+}
+
+@layer components {
+  span.ds-btn-icon {
+    align-items: center;
+    display: flex;
+  }
+}
+

package/dist/Upload.js

@@ -206,35 +206,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
         };
@@ -249,8 +304,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(()=>{
@@ -267,12 +322,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", {

package/dist/VerticalCollapsiblePanel.css

@@ -0,0 +1,193 @@
+@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;
+  }
+}
+
+@layer components {
+  .ds-collapsible-panel {
+    flex-basis: fit-content;
+    flex-direction: column;
+    flex-grow: 0;
+    flex-shrink: 0;
+    max-height: 100%;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .ds-collapsible-panel[data-closed] {
+    transition: all .2s ease-out;
+  }
+
+  .ds-collapsible-panel[data-open] {
+    flex-grow: 1;
+    transition: all .2s ease-in;
+  }
+
+  .ds-collapsible-panel-trigger {
+    cursor: pointer;
+    text-align: left;
+    background: none;
+    border: none;
+    padding: 0;
+  }
+
+  .ds-collapsible-panel-header {
+    border-bottom: 1px solid #0000;
+    flex-direction: column;
+    flex-grow: 0;
+    transition: all .2s ease-in-out;
+    display: flex;
+  }
+
+  .ds-collapsible-panel-header-inner {
+    align-items: center;
+    gap: .5rem;
+    padding: .75rem 1rem;
+    transition: width .2s;
+    display: flex;
+  }
+
+  .ds-collapsible-panel-header-after {
+    align-items: center;
+    gap: .5rem;
+    padding: 0 1rem .75rem;
+    display: flex;
+  }
+
+  .ds-collapsible-panel[data-open] .ds-collapsible-panel-header {
+    border-bottom: 1px solid var(--ds-color-split);
+  }
+
+  .ds-collapsible-panel[data-open] .ds-collapsible-panel-header-inner {
+    flex-grow: 1;
+    justify-content: flex-start;
+  }
+
+  .ds-collapsible-panel-trigger:hover .ds-collapsible-panel-header {
+    background-color: var(--ds-color-bg-hover);
+  }
+
+  .ds-collapsible-panel-header-actions {
+    flex-grow: 0;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    gap: .5rem;
+    display: flex;
+  }
+
+  .ds-collapsible-panel-header-text {
+    font-size: var(--text-ds-h5);
+    font-weight: var(--text-ds-h5--font-weight);
+    line-height: var(--text-ds-h5--line-height);
+    color: var(--ds-color-text);
+    flex-grow: 1;
+    display: inline-block;
+  }
+
+  .ds-collapsible-panel[data-closed] .ds-collapsible-panel-header-inner {
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+  }
+
+  .ds-collapsible-panel-content {
+    flex-direction: column;
+    flex-grow: 1;
+    flex-shrink: 1;
+    display: flex;
+    overflow-y: auto;
+  }
+
+  .ds-collapsible-panel-content[data-closed] {
+    display: none;
+  }
+
+  .ds-collapsible-panel-body {
+    padding: var(--ds-content-padding);
+    flex-grow: 1;
+    transition: opacity .2s ease-in-out;
+  }
+
+  .ds-collapsible-panel-body[data-starting], .ds-collapsible-panel-body[data-ending] {
+    opacity: 0;
+  }
+}
+
+@layer components {
+  .ds-icon-button {
+    cursor: pointer;
+    color: var(--ds-color-icon);
+    background-color: #0000;
+    border: none;
+    border-radius: 999px;
+    justify-content: center;
+    align-items: center;
+    transition: all .2s;
+    display: inline-flex;
+  }
+
+  .ds-icon-button:hover {
+    background-color: var(--ds-color-fill-secondary);
+    color: var(--ds-color-icon-hover);
+  }
+
+  .ds-icon-button:active, .ds-icon-button.ds-popover-open {
+    background-color: var(--ds-color-primary-bg);
+    color: var(--ds-color-primary);
+  }
+
+  .ds-icon-button:focus {
+    outline: none;
+  }
+
+  .ds-icon-button:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    color: var(--ds-color-text-disabled);
+  }
+
+  .ds-icon-button.ds-icon-button-medium {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: .125rem;
+    font-size: 1.25rem;
+  }
+
+  .ds-icon-button.ds-icon-button-small {
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: .125rem;
+    font-size: 1rem;
+  }
+
+  .ds-icon-button.ds-icon-button-negative-margin {
+    margin: -.125rem;
+  }
+}
+

package/dist/VerticalCollapsiblePanel.js

@@ -252,35 +252,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
         };
@@ -295,8 +350,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(()=>{
@@ -313,12 +368,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", {

package/dist/components/Badge/component.d.ts

@@ -1,3 +1,4 @@
 import { type BadgeProps as AntdBadgeProps } from "antd/es/badge";
+import "./style.css";
 export type BadgeProps = AntdBadgeProps;
 export declare const Badge: ({ count, showZero, ...rest }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Breadcrumb/component.d.ts

@@ -1,4 +1,5 @@
 import { type BreadcrumbProps, type BreadcrumbItemProps } from "./types";
+import "./style.css";
 export declare const Breadcrumb: (({ className, items, noWrap, itemRender: outsideItemRender, ...rest }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element) & {
     Item: (props: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
     Separator: (props: React.HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/component.d.ts

@@ -1,4 +1,5 @@
 import { type ButtonProps as AntdButtonProps } from "antd/es/button";
+import "./style.css";
 export type ButtonProps = AntdButtonProps;
 declare const ButtonInner: ({ style, ...rest }: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>) => import("react/jsx-runtime").JSX.Element;
 export declare const Button: (props: ButtonProps & {

package/dist/components/Checkbox/component.d.ts

@@ -1,4 +1,5 @@
 import { Checkbox as AntCheckbox, type CheckboxProps as AntCheckboxProps } from "antd";
+import "./style.css";
 export interface CheckboxProps extends AntCheckboxProps {
 }
 declare const MainCheckboxInner: (props: CheckboxProps, ref: React.Ref<React.ComponentRef<typeof AntCheckbox>>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CodeBlock/component.d.ts

@@ -1,2 +1,3 @@
 import type { CodeBlockProps } from "./types";
-export declare const CodeBlock: ({ code, children, lang: defaultLang, className, options, activeOption: controlledActiveOption, defaultActiveOption, onActiveOptionChange, copyText, copySuccessText, ...rest }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
+import "./style.css";
+export declare const CodeBlock: ({ code, children, lang: defaultLang, className, options, activeOption: controlledActiveOption, defaultActiveOption, onActiveOptionChange, copyText, copySuccessText, classNames, maxHeight, ...rest }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -44,4 +44,16 @@ export interface CodeBlockProps extends React.ComponentPropsWithRef<"div"> {
      * Copy success text label
      */
     copySuccessText?: string;
+    /**
+     * Custom class names for each part of the code block
+     */
+    classNames?: {
+        root?: string;
+        content?: string;
+        header?: string;
+    };
+    /**
+     * Maximum height of the code block
+     */
+    maxHeight?: string | number;
 }

package/dist/components/Collapse/component.d.ts

@@ -1,5 +1,6 @@
 import { type CollapseProps as AntCollapseProps, type CollapsePanelProps as AntCollapsePanelProps } from "antd";
 import { type ForwardedRef } from "react";
+import "./style.css";
 export interface CollapseProps extends AntCollapseProps {
 }
 export interface CollapsePanelProps extends AntCollapsePanelProps {

package/dist/components/DSRoot/component.d.ts

@@ -1,4 +1,5 @@
 import { type ThemeProviderProps } from "../ThemeProvider/component";
+import "./style.css";
 export interface DSRootProps extends ThemeProviderProps {
     /**
      * Classname passed to App component

package/dist/components/DropdownMenu/component.d.ts

@@ -1,5 +1,6 @@
 import { Menu } from "@base-ui-components/react/menu";
 import { type PopoverProps } from "antd/es/popover";
+import "./style.css";
 export type DropdownMenuItemType = {
     type: "item";
     label?: React.ReactNode;

package/dist/components/Empty/component.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { type EmptyProps as AntEmptyProps } from "antd/es/empty";
+import "./style.css";
 export interface EmptyProps extends AntEmptyProps {
     /**
      * Empty icon size