@bioturing/components 0.14.0 → 0.15.0

package/dist/DSRoot.js

@@ -2,7 +2,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_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_theme_useToken_e8911485__ from "antd/es/theme/useToken";
-import "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE__ant_design_cssinjs_c619260f__ from "@ant-design/cssinjs";
 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";
@@ -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_prism_react_renderer_be33806e__ from "prism-react-renderer";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_app_App_698582f4__ from "antd/es/app/App";
@@ -375,6 +377,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_;
@@ -524,9 +529,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;
@@ -609,17 +849,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, {
@@ -642,7 +886,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", {
@@ -855,24 +1099,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/DropdownMenu.css

@@ -0,0 +1,95 @@
+@layer components {
+  .ds-dropdown-menu {
+    box-shadow: var(--ds-box-shadow-secondary);
+    border-radius: var(--ds-border-radius);
+    background: var(--ds-color-bg-elevated);
+    color: var(--ds-color-text);
+    font-size: var(--ds-font-size);
+    font-family: var(--ds-font-family);
+    transition-property: transform, scale, opacity;
+    transition-duration: .2s;
+    transition-timing-function: var(--ds-motion-ease-out);
+    transform-origin: var(--transform-origin);
+    padding: .25rem;
+    list-style: none;
+  }
+
+  .ds-dropdown-menu[data-ending-style], .ds-dropdown-menu[data-starting-style] {
+    opacity: 0;
+    transform: scale(.9);
+  }
+
+  .ds-dropdown-menu:focus {
+    outline: none;
+  }
+
+  .ds-dropdown-menu-item {
+    border-radius: var(--ds-border-radius-sm);
+    transition: all .3s var(--ds-motion-ease-out);
+    cursor: pointer;
+    align-items: center;
+    padding: .375rem .75rem;
+    display: flex;
+  }
+
+  .ds-dropdown-menu-item:focus {
+    outline: none;
+  }
+
+  .ds-dropdown-menu-item:hover {
+    background: var(--ds-control-item-bg-hover);
+  }
+
+  .ds-dropdown-menu-item:active, .ds-dropdown-menu-item:focus, .ds-dropdown-menu-item[data-focus] {
+    background: var(--ds-control-item-bg-active);
+  }
+
+  .ds-dropdown-menu-item[data-disabled] {
+    pointer-events: none;
+    color: var(--ds-color-text-disabled);
+  }
+
+  .ds-dropdown-menu-item[data-danger] {
+    color: var(--ds-color-error);
+  }
+
+  .ds-dropdown-menu-item[data-danger]:hover {
+    background: var(--ds-color-error-bg);
+  }
+
+  .ds-dropdown-menu-item[data-danger]:active, .ds-dropdown-menu-item[data-danger]:focus, .ds-dropdown-menu-item[data-danger][data-focus] {
+    background: var(--ds-color-error-bg-hover);
+  }
+
+  .ds-dropdown-menu-item-icon {
+    color: var(--ds-color-icon);
+    justify-content: center;
+    align-items: center;
+    margin-right: .5rem;
+    font-size: 1rem;
+    display: flex;
+  }
+
+  [data-danger] .ds-dropdown-menu-item-icon {
+    color: var(--ds-color-error);
+  }
+
+  .ds-dropdown-menu-divider {
+    border-bottom: 1px solid var(--ds-color-split);
+    margin: .25rem 0;
+  }
+
+  .ds-dropdown-menu-header {
+    text-transform: uppercase;
+    color: var(--ds-color-text-tertiary);
+    padding: .75rem .75rem .25rem;
+    font-size: .75rem;
+    font-weight: 500;
+    line-height: 1rem;
+  }
+
+  .ds-dropdown-menu-header:first-child {
+    padding-top: .5rem;
+  }
+}
+

package/dist/Empty.css

@@ -0,0 +1,19 @@
+@layer components {
+  .ds-empty .ds-empty-image {
+    height: auto;
+  }
+
+  .ds-empty-small .ds-empty-icon {
+    color: var(--ds-color-base-solid);
+    font-size: 2rem;
+  }
+
+  .ds-empty-medium .ds-empty-icon {
+    font-size: 3rem;
+  }
+
+  .ds-empty-large .ds-empty-icon {
+    font-size: 4rem;
+  }
+}
+

package/dist/Field.css

@@ -0,0 +1,14 @@
+@layer components {
+  .ds-field {
+    align-items: center;
+    gap: .5rem;
+    display: inline-flex;
+  }
+
+  .ds-field label {
+    color: var(--ds-color-text-secondary);
+    font-size: var(--ds-font-size);
+    line-height: var(--ds-line-height);
+  }
+}
+

package/dist/Form.css

@@ -0,0 +1,64 @@
+@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 {
+  .ds-form-item-label-inner {
+    align-items: center;
+    gap: .25rem;
+    display: inline-flex;
+  }
+
+  .ds-form-item-label-optional-mark {
+    color: var(--ds-color-text-tertiary);
+  }
+}
+

package/dist/IconButton.css

@@ -0,0 +1,52 @@
+@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;
+  }
+}
+