@moneyforward/mfui-components 3.33.0 → 3.35.0

package/dist/src/FileDropZone/FileDropZone.d.ts

@@ -33,7 +33,7 @@ export declare const FileDropZone: import("react").ForwardRefExoticComponent<{
     multiple?: import("react").ComponentPropsWithoutRef<'input'>['multiple'];
     accept?: import("react").ComponentPropsWithoutRef<'input'>['accept'];
     clearButtonProps?: Pick<import("..").IconButtonProps, 'aria-label'>;
-    errorMessage?: string;
+    errorMessage?: string | string[];
     helperMessage?: string;
     illustrationUrl?: string;
     extraElement?: React.ReactNode;

package/dist/src/FileDropZone/FileDropZone.js

@@ -70,6 +70,8 @@ fileSelectButtonLabel = 'ファイルを選択', instructionText, fileCountLabel
     const previousValueRef = useRef(value);
     const isUserInitiatedClearRef = useRef(false);
     const displayValues = isControlled ? value : internalValues;
+    const errorMessages = (Array.isArray(errorMessage) ? errorMessage : [errorMessage]).filter((message) => Boolean(message));
+    const fileBoxMaxWidthStyle = { maxWidth: fileBoxWidth };
     const isNarrowViewport = useIsNarrowViewport();
     const clearButtonWidth = isNarrowViewport ? 32 : 24;
     const truncatedSingleName = useMiddleTruncatedText(displayValues?.[0] ?? '', fileNameRef, clearButtonWidth);
@@ -206,9 +208,9 @@ fileSelectButtonLabel = 'ファイルを選択', instructionText, fileCountLabel
         }
         return '';
     }, [displayValues, truncatedSingleName, classes.span, getFileCountText]);
-    return (_jsxs("div", { className: cx(classes.root, 'mfui-FileDropZone__root'), children: [_jsx("input", { ref: mergeRefs(ref, inputRef), id: id, type: "file", disabled: disabled, multiple: multiple, accept: accept, className: cx(classes.input, 'mfui-FileDropZone__input'), tabIndex: -1, "aria-hidden": "true", onChange: handleChange, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, ...props }, key), _jsxs("div", { "data-mfui-content": "file-drop-zone-container", className: cx(classes.container, 'mfui-FileDropZone__container', className), style: style, onClick: handleContainerClick, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [illustrationUrl ? (_jsx("div", { "data-mfui-content": "file-drop-zone-illustration", className: cx(classes.illustration, 'mfui-FileDropZone__illustration'), children: _jsx("img", { src: illustrationUrl, alt: "illustration" }) })) : null, _jsxs("div", { "data-mfui-content": "file-drop-zone-main-container", className: cx(classes.mainContainer, 'mfui-FileDropZone__mainContainer'), style: { maxWidth: fileBoxWidth }, children: [_jsx("div", { "data-mfui-content": "file-drop-zone-instruction", className: cx(classes.instruction, 'mfui-FileDropZone__instruction'), children: _jsx("p", { className: cx(classes.phrase, 'mfui-FileDropZone__phrase'), children: normalizedInstructionText }) }), _jsxs("div", { "data-mfui-content": "file-drop-zone-button-container", className: cx(classes.buttonContainer, 'mfui-FileDropZone__buttonContainer'), children: [_jsx(Button, { ref: buttonRef, className: cx(classes.button, 'mfui-FileDropZone__button'), disabled: disabled, "aria-describedby": errorMessage || helperMessage || (displayValues && displayValues.length > 0)
+    return (_jsxs("div", { className: cx(classes.root, 'mfui-FileDropZone__root'), children: [_jsx("input", { ref: mergeRefs(ref, inputRef), id: id, type: "file", disabled: disabled, multiple: multiple, accept: accept, className: cx(classes.input, 'mfui-FileDropZone__input'), tabIndex: -1, "aria-hidden": "true", onChange: handleChange, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, ...props }, key), _jsxs("div", { "data-mfui-content": "file-drop-zone-container", className: cx(classes.container, 'mfui-FileDropZone__container', className), style: style, onClick: handleContainerClick, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [illustrationUrl ? (_jsx("div", { "data-mfui-content": "file-drop-zone-illustration", className: cx(classes.illustration, 'mfui-FileDropZone__illustration'), children: _jsx("img", { src: illustrationUrl, alt: "illustration" }) })) : null, _jsxs("div", { "data-mfui-content": "file-drop-zone-main-container", className: cx(classes.mainContainer, 'mfui-FileDropZone__mainContainer'), children: [_jsx("div", { "data-mfui-content": "file-drop-zone-instruction", className: cx(classes.instruction, 'mfui-FileDropZone__instruction'), style: fileBoxMaxWidthStyle, children: _jsx("p", { className: cx(classes.phrase, 'mfui-FileDropZone__phrase'), children: normalizedInstructionText }) }), _jsxs("div", { "data-mfui-content": "file-drop-zone-button-container", className: cx(classes.buttonContainer, 'mfui-FileDropZone__buttonContainer'), style: fileBoxMaxWidthStyle, children: [_jsx(Button, { ref: buttonRef, className: cx(classes.button, 'mfui-FileDropZone__button'), disabled: disabled, "aria-describedby": errorMessages.length > 0 || helperMessage || (displayValues && displayValues.length > 0)
                                             ? `${id ? `${id}-` : ''}file-drop-zone-messages`
-                                            : undefined, onClick: handleFileInputTrigger, children: fileSelectButtonLabel }), displayValues !== undefined && displayValues.length > 0 && (_jsxs("div", { "data-mfui-content": "file-drop-zone-file-info", className: cx(classes.fileInfo, 'mfui-FileDropZone__fileInfo'), style: { maxWidth: `${(fileInfoWidth || 147).toString()}px` }, children: [renderDisplayValues, _jsx(ClearButton, { ...clearButtonProps, "aria-label": clearButtonProps?.['aria-label'] ?? 'ファイルをクリアする', className: cx(classes.clearButton, 'mfui-FileDropZone__clearButton'), disabled: disabled, onClick: handleClear })] }))] }), _jsxs("div", { id: id ? `${id}-file-drop-zone-messages` : 'file-drop-zone-messages', "data-mfui-content": "file-drop-zone-help-message", className: cx(classes.helpMessage, 'mfui-FileDropZone__helpMessage'), children: [errorMessage ? (_jsx(HelpMessage, { messageType: "error", messageAlign: "center", children: errorMessage })) : null, helperMessage ? _jsx(HelpMessage, { messageAlign: "center", children: helperMessage }) : null, displayValues && displayValues.length > 0 ? (_jsx("div", { className: "sr-only", children: displayValues.length === 1
+                                            : undefined, onClick: handleFileInputTrigger, children: fileSelectButtonLabel }), displayValues !== undefined && displayValues.length > 0 && (_jsxs("div", { "data-mfui-content": "file-drop-zone-file-info", className: cx(classes.fileInfo, 'mfui-FileDropZone__fileInfo'), style: { maxWidth: `${(fileInfoWidth || 147).toString()}px` }, children: [renderDisplayValues, _jsx(ClearButton, { ...clearButtonProps, "aria-label": clearButtonProps?.['aria-label'] ?? 'ファイルをクリアする', className: cx(classes.clearButton, 'mfui-FileDropZone__clearButton'), disabled: disabled, onClick: handleClear })] }))] }), _jsxs("div", { id: id ? `${id}-file-drop-zone-messages` : 'file-drop-zone-messages', "data-mfui-content": "file-drop-zone-help-message", className: cx(classes.helpMessage, 'mfui-FileDropZone__helpMessage'), children: [errorMessages.length > 0 ? (_jsx("div", { role: "alert", "data-mfui-content": "file-drop-zone-error-messages", className: cx(classes.errorMessages, 'mfui-FileDropZone__errorMessages'), children: errorMessages.map((message, index) => (_jsx(HelpMessage, { role: undefined, messageType: "error", messageAlign: "center", children: message }, index))) })) : null, helperMessage ? _jsx(HelpMessage, { messageAlign: "center", children: helperMessage }) : null, displayValues && displayValues.length > 0 ? (_jsx("div", { className: "sr-only", children: displayValues.length === 1
                                             ? getScreenReaderText('single', displayValues[0] || '')
                                             : getScreenReaderText('multiple', displayValues.length) })) : null] })] }), extraElement ? (_jsx("div", { "data-mfui-content": "file-drop-zone-extra", className: cx(classes.extra, 'mfui-FileDropZone__extra'), children: extraElement })) : null] })] }));
 });

package/dist/src/FileDropZone/FileDropZone.types.d.ts

@@ -41,11 +41,12 @@ export type FileDropZoneProps = {
      */
     clearButtonProps?: Pick<IconButtonProps, 'aria-label'>;
     /**
-     * The error message for the file drop zone.
+     * The error message or messages for the file drop zone.
+     * Empty strings are not rendered.
      *
      * @default undefined
      */
-    errorMessage?: string;
+    errorMessage?: string | string[];
     /**
      * The helper message for the file drop zone.
      *
@@ -117,7 +118,8 @@ export type FileDropZoneProps = {
      */
     onValueCleared?: () => void;
     /**
-     * The width of the filebox element.
+     * The maximum width of the instruction text and button row.
+     * Error and helper messages are intentionally not constrained by this value.
      *
      * @default 280
      */

package/dist/src/IconButton/IconButton.d.ts

@@ -1,5 +1,6 @@
 export declare const InternalIconButton: import("react").ForwardRefExoticComponent<{
     outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['outlined'];
+    destructive?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['destructive'];
     children: React.ReactNode;
     disabled?: boolean;
     href?: string;
@@ -9,6 +10,7 @@ export declare const InternalIconButton: import("react").ForwardRefExoticCompone
 } & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export declare const IconButton: import("react").ForwardRefExoticComponent<{
     outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['outlined'];
+    destructive?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['destructive'];
     children: React.ReactNode;
     disabled?: boolean;
     href?: string;

package/dist/src/IconButton/IconButton.js

@@ -20,8 +20,8 @@ import { FocusIndicator } from '../FocusIndicator';
  *
  * @param ref - Forwarded ref for the rendered button or anchor element.
  */
-function IconButtonBase({ children, outlined, size = 'default', className, href, customLinkComponent, disabled = false, type = 'button', ...rest }, ref) {
-    const classes = iconButtonSlotRecipe({ outlined, size });
+function IconButtonBase({ children, outlined, destructive, size = 'default', className, href, customLinkComponent, disabled = false, type = 'button', ...rest }, ref) {
+    const classes = iconButtonSlotRecipe({ outlined, size, destructive });
     const isButton = disabled || href === undefined;
     const Tag = useMemo(() => {
         // If disabled, always render as a button since the link component doesn't support disabled prop

package/dist/src/IconButton/IconButton.types.d.ts

@@ -7,6 +7,13 @@ type IconButtonCommonProps = {
      * @default false
      */
     outlined?: IconButtonSlotRecipeVariant['outlined'];
+    /**
+     * Whether the button is destructive.
+     * The style of the button will be changed to indicate that the action is destructive.
+     *
+     * @default false
+     */
+    destructive?: IconButtonSlotRecipeVariant['destructive'];
     /**
      * Icon element to be rendered inside the button.
      * Only one element (typically an SVG icon) is expected.

package/dist/src/MultipleSelectBox/MultipleSelectBox.types.d.ts

@@ -446,6 +446,10 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
      * Handler executed when text is entered in the search box.
      * The handler is debounced by 300ms.
      *
+     * If the handler is provided after the user has already typed (e.g.
+     * `onSearchOptions={isReady ? handleSearch : undefined}`), it is called
+     * once with the current search text so that pending input is not lost.
+     *
      * When this prop is provided, client-side filtering is disabled as it's
      * assumed that filtering will be handled by the prop.
      */

package/dist/src/MultipleSelectBox/hooks/useSearchBox.js

@@ -1,5 +1,6 @@
 'use client';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { useLatest } from '../../utilities/state/useLatest';
 import { normalizeFullWidth } from '../../utilities/string/normalizeFullWidth';
 /**
  * Custom hook to handle search functionality within a SelectBox component.
@@ -18,6 +19,10 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
     const [searchText, setSearchText] = useState('');
     const debounceRef = useRef(null);
     const previousSearchTextRef = useRef('');
+    // Keep the latest handler in a ref so that a new handler identity (e.g. an
+    // inline function re-created on parent re-render) does not re-run the
+    // debounce effect and cancel a pending call.
+    const onSearchOptionsRef = useLatest(onSearchOptions);
     const filteredOptions = useMemo(() => {
         if (!enableSearchOptions || onSearchOptions) {
             return options;
@@ -29,8 +34,14 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
     const onSearchTextChange = (event) => {
         setSearchText(event.target.value);
     };
+    // Track only the presence of the handler (not its identity) so that an
+    // undefined → defined transition re-runs the effect and dispatches the
+    // pending search text, while identity changes do not cancel pending calls.
+    // This preserves the behavior of the previous implementation, where the
+    // handler itself was an effect dependency and the transition dispatched.
+    const hasSearchHandler = Boolean(onSearchOptions);
     useEffect(() => {
-        if (!enableSearchOptions || !onSearchOptions)
+        if (!enableSearchOptions || !hasSearchHandler)
             return;
         // Skip if searchText hasn't changed (prevents initial mount and unnecessary calls)
         if (searchText === previousSearchTextRef.current) {
@@ -41,14 +52,14 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
             clearTimeout(debounceRef.current);
         }
         debounceRef.current = setTimeout(() => {
-            onSearchOptions(searchText);
+            onSearchOptionsRef.current?.(searchText);
         }, 300);
         return () => {
             if (debounceRef.current) {
                 clearTimeout(debounceRef.current);
             }
         };
-    }, [searchText, onSearchOptions, enableSearchOptions]);
+    }, [searchText, enableSearchOptions, hasSearchHandler, onSearchOptionsRef]);
     return {
         onSearchTextChange,
         filteredOptions,

package/dist/src/SectionMessage/SectionMessage.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Error, Approval, Caution, Close, Pending } from '@moneyforward/mfui-icons-react';
+import { Error, Approval, Caution, Close, Info, Pending } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { sectionMessageSlotRecipe } from '../../styled-system/recipes';
 import { IconButton } from '../IconButton';
@@ -28,6 +28,7 @@ export const SectionMessage = forwardRef(({ messageType = 'neutral', region = 'i
     const statusIconA11yProps = statusIconLabel === undefined ? { 'aria-hidden': true } : { 'aria-label': statusIconLabel };
     const StatusIcon = {
         neutral: null,
+        info: _jsx(Info, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') }),
         success: (_jsx(Approval, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
         error: _jsx(Error, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') }),
         caution: (_jsx(Caution, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),

package/dist/src/SelectBox/SelectBox.js

@@ -53,7 +53,14 @@ export const SelectBox = forwardRef((props, ref) => {
             triggerRef.current?.focus();
         },
     });
-    const { searchText, onSearchTextChange, filteredOptions } = useSearchBox(options, enableSearchOptions, onSearchOptions);
+    const { searchText, onSearchTextChange, filteredOptions, resetSearchText } = useSearchBox(options, enableSearchOptions, onSearchOptions);
+    // Clear the search text whenever the option panel closes so that
+    // reopening always starts from an unfiltered option list.
+    useUpdateEffect(() => {
+        if (!isOptionPanelOpen) {
+            resetSearchText();
+        }
+    }, [isOptionPanelOpen, resetSearchText]);
     const selectedOption = useMemo(() => {
         if (value === undefined)
             return null;

package/dist/src/SelectBox/SelectBox.types.d.ts

@@ -361,6 +361,13 @@ export type SelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps
      * Handler executed when text is entered in the search box.
      * The handler is debounced by 300ms.
      *
+     * Also called with an empty string when the option panel closes, because the
+     * search text is reset on close so that reopening shows the full option list.
+     *
+     * If the handler is provided after the user has already typed (e.g.
+     * `onSearchOptions={isReady ? handleSearch : undefined}`), it is called
+     * once with the current search text so that pending input is not lost.
+     *
      * When this prop is provided, client-side filtering is disabled as it's
      * assumed that filtering will be handled by the prop.
      */

package/dist/src/SelectBox/hooks/useSearchBox.d.ts

@@ -10,7 +10,8 @@ import { type BasedAdditionalProps, type SelectBoxOption } from '../SelectBox.ty
  * provided, client-side filtering is disabled as it's assumed that the caller
  * will handle the filtering.
  *
- * @returns Object containing the filtered options, search text, and handler to update search text.
+ * @returns Object containing the filtered options, search text, handler to update search text,
+ * and a callback to reset the search text.
  */
 export declare const useSearchBox: <T extends string | number | undefined = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps>(options: (SelectBoxOption<T, AdditionalProps> | null | undefined)[], enableSearchOptions: boolean, onSearchOptions?: (text: string) => void) => {
     /**
@@ -25,4 +26,8 @@ export declare const useSearchBox: <T extends string | number | undefined = stri
      * Current search text value.
      */
     searchText: string;
+    /**
+     * Resets the search text to an empty string.
+     */
+    resetSearchText: () => void;
 };

package/dist/src/SelectBox/hooks/useSearchBox.js

@@ -1,5 +1,6 @@
 'use client';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useLatest } from '../../utilities/state/useLatest';
 import { normalizeFullWidth } from '../../utilities/string/normalizeFullWidth';
 /**
  * Custom hook to handle search functionality within a SelectBox component.
@@ -12,12 +13,17 @@ import { normalizeFullWidth } from '../../utilities/string/normalizeFullWidth';
  * provided, client-side filtering is disabled as it's assumed that the caller
  * will handle the filtering.
  *
- * @returns Object containing the filtered options, search text, and handler to update search text.
+ * @returns Object containing the filtered options, search text, handler to update search text,
+ * and a callback to reset the search text.
  */
 export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
     const [searchText, setSearchText] = useState('');
     const debounceRef = useRef(null);
     const previousSearchTextRef = useRef('');
+    // Keep the latest handler in a ref so that a new handler identity (e.g. an
+    // inline function re-created on parent re-render) does not re-run the
+    // debounce effect and cancel a pending call.
+    const onSearchOptionsRef = useLatest(onSearchOptions);
     const filteredOptions = useMemo(() => {
         // If not searchable or if onSearchOptions is provided, return all options without filtering
         if (!enableSearchOptions || onSearchOptions) {
@@ -49,8 +55,17 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
     const handleSearchTextChange = useCallback((event) => {
         setSearchText(event.target.value);
     }, []);
+    const resetSearchText = useCallback(() => {
+        setSearchText('');
+    }, []);
+    // Track only the presence of the handler (not its identity) so that an
+    // undefined → defined transition re-runs the effect and dispatches the
+    // pending search text, while identity changes do not cancel pending calls.
+    // This preserves the behavior of the previous implementation, where the
+    // handler itself was an effect dependency and the transition dispatched.
+    const hasSearchHandler = Boolean(onSearchOptions);
     useEffect(() => {
-        if (!enableSearchOptions || !onSearchOptions)
+        if (!enableSearchOptions || !hasSearchHandler)
             return;
         // Skip if searchText hasn't changed (prevents initial mount and unnecessary calls)
         if (searchText === previousSearchTextRef.current) {
@@ -61,14 +76,14 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
             clearTimeout(debounceRef.current);
         }
         debounceRef.current = setTimeout(() => {
-            onSearchOptions(searchText);
+            onSearchOptionsRef.current?.(searchText);
         }, 300);
         return () => {
             if (debounceRef.current) {
                 clearTimeout(debounceRef.current);
             }
         };
-    }, [searchText, onSearchOptions, enableSearchOptions]);
+    }, [searchText, enableSearchOptions, hasSearchHandler, onSearchOptionsRef]);
     return {
         /**
          * Handler for search input change events.
@@ -82,5 +97,9 @@ export const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
          * Current search text value.
          */
         searchText,
+        /**
+         * Resets the search text to an empty string.
+         */
+        resetSearchText,
     };
 };

package/dist/src/SplitView/SplitView.js

@@ -195,6 +195,20 @@ export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot,
         isDragging,
         dividerPropsStyle: dividerProps?.style,
     });
+    // `dividerProps` is spread after the built-in attributes so that consumers can override ARIA
+    // attributes (e.g. aria-label, aria-valuenow). These four entries must be excluded from that
+    // spread and re-applied afterwards, otherwise they would silently replace internal wiring:
+    // the styling classes/styles and the resize event handlers.
+    const { className: dividerClassName, style: _dividerPropsStyle, onPointerDown: dividerOnPointerDown, onKeyDown: dividerOnKeyDown, ...restDividerProps } = dividerProps ?? {};
+    // Run the internal resize handler first, then forward the event to the consumer's handler.
+    const handleDividerPointerDown = (event) => {
+        handleMouseDown(event);
+        dividerOnPointerDown?.(event);
+    };
+    const handleDividerKeyDown = (event) => {
+        handleKeyDown(event);
+        dividerOnKeyDown?.(event);
+    };
     // Apply controlled panel style to the correct panel based on targetPanel.
     // When a panel is the main panel (not controlled), flex: 1 ensures it fills remaining space.
     const computedLeftPanelStyle = resolvedTargetPanel === 'left' ? controlledPanelOuterStyle : leftPanelProps?.style;
@@ -209,7 +223,7 @@ export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot,
                 ref.current = node;
             }
             containerRef.current = node;
-        }, className: cx(classes.root, 'mfui-SplitView__root', className), ...props, children: [resolvedTargetPanel === 'left' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (leftPanelSlot ?? lastRightPanelRef.current) : leftPanelSlot }) })) : null) : (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: leftPanelSlot })), isRightPanelVisible || isSlideOutAnimating ? (_jsx("div", { className: cx(classes.divider, 'mfui-SplitView__divider', dividerProps?.className), role: "separator", "aria-orientation": "vertical", "aria-label": dividerProps?.['aria-label'] ?? '左右のパネルを調整', "aria-valuenow": currentControlledPanelSize ?? initialPanelSizeNumber, "aria-valuemin": minPanelSizeNumber, "aria-valuemax": maxPanelSizeNumber, 
+        }, className: cx(classes.root, 'mfui-SplitView__root', className), ...props, children: [resolvedTargetPanel === 'left' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (leftPanelSlot ?? lastRightPanelRef.current) : leftPanelSlot }) })) : null) : (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: leftPanelSlot })), isRightPanelVisible || isSlideOutAnimating ? (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": dividerProps?.['aria-label'] ?? '左右のパネルを調整', "aria-valuenow": currentControlledPanelSize ?? initialPanelSizeNumber, "aria-valuemin": minPanelSizeNumber, "aria-valuemax": maxPanelSizeNumber, 
                 // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                tabIndex: 0, style: dividerStyle, onPointerDown: handleMouseDown, onKeyDown: handleKeyDown, ...dividerProps })) : null, resolvedTargetPanel === 'right' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (rightPanelSlot ?? lastRightPanelRef.current) : rightPanelSlot }) })) : null) : (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: rightPanelSlot }))] }));
+                tabIndex: 0, ...restDividerProps, className: cx(classes.divider, 'mfui-SplitView__divider', dividerClassName), style: dividerStyle, onPointerDown: handleDividerPointerDown, onKeyDown: handleDividerKeyDown })) : null, resolvedTargetPanel === 'right' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (rightPanelSlot ?? lastRightPanelRef.current) : rightPanelSlot }) })) : null) : (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: rightPanelSlot }))] }));
 });

package/dist/src/Tabs/TabList/TabList.d.ts

@@ -1,2 +1,2 @@
 import { type TabListProps } from './TabList.types';
-export declare function TabList({ children, scrollLeftButtonProps, scrollRightButtonProps, allTabsDropdownMenuProps, }: TabListProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabList({ children, scrollLeftButtonProps, scrollRightButtonProps, allTabsDropdownMenuProps, className, style, }: TabListProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Tabs/TabList/TabList.js

@@ -5,10 +5,10 @@ import { tabListSlotRecipe } from '../../../styled-system/recipes';
 import { TabMenu } from './TabMenu';
 import { useShouldShowMenuController } from './hooks/useShouldShowMenuController';
 import { cx } from '../../../styled-system/css';
-export function TabList({ children, scrollLeftButtonProps, scrollRightButtonProps, allTabsDropdownMenuProps, }) {
+export function TabList({ children, scrollLeftButtonProps, scrollRightButtonProps, allTabsDropdownMenuProps, className, style, }) {
     const classNames = tabListSlotRecipe({});
     const containerRef = useRef(null);
     const tabListRef = useRef(null);
     const isOverflowed = useShouldShowMenuController(tabListRef, containerRef);
-    return (_jsxs("div", { ref: containerRef, className: cx(classNames.root, 'mfui-TabList__root'), children: [_jsx("div", { ref: tabListRef, role: "tablist", className: cx(classNames.tabList, isOverflowed && classNames.isOverflowed, 'mfui-TabList__tabList'), children: children }), _jsx("div", { className: cx(classNames.blankSpace, 'mfui-TabList__blankSpace') }), isOverflowed ? (_jsx(TabMenu, { tabListRef: tabListRef, scrollLeftButtonProps: scrollLeftButtonProps, scrollRightButtonProps: scrollRightButtonProps, allTabsDropdownMenuProps: allTabsDropdownMenuProps })) : null] }));
+    return (_jsxs("div", { ref: containerRef, className: cx(classNames.root, 'mfui-TabList__root', className), style: style, children: [_jsx("div", { ref: tabListRef, role: "tablist", className: cx(classNames.tabList, isOverflowed && classNames.isOverflowed, 'mfui-TabList__tabList'), children: children }), _jsx("div", { className: cx(classNames.blankSpace, 'mfui-TabList__blankSpace') }), isOverflowed ? (_jsx(TabMenu, { tabListRef: tabListRef, scrollLeftButtonProps: scrollLeftButtonProps, scrollRightButtonProps: scrollRightButtonProps, allTabsDropdownMenuProps: allTabsDropdownMenuProps })) : null] }));
 }

package/dist/src/Tabs/TabPanel/TabPanel.d.ts

@@ -1,2 +1,2 @@
 import { type TabPanelProps } from './TabPanel.types';
-export declare function TabPanel({ forTabId, enableAutoUnmount, children, style, ...props }: TabPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function TabPanel({ forTabId, enableAutoUnmount, children, className, style, ...props }: TabPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/Tabs/TabPanel/TabPanel.js

@@ -4,7 +4,7 @@ import { useContext } from 'react';
 import { tabPanelSlotRecipe } from '../../../styled-system/recipes';
 import { TabContext } from '../TabContext';
 import { cx } from '../../../styled-system/css';
-export function TabPanel({ forTabId, enableAutoUnmount, children, style, ...props }) {
+export function TabPanel({ forTabId, enableAutoUnmount, children, className, style, ...props }) {
     const { selectedTabId, enableAutoUnmount: contextEnableAutoUnmount } = useContext(TabContext);
     // Use prop value if provided, otherwise fall back to context value
     const shouldAutoUnmount = enableAutoUnmount ?? contextEnableAutoUnmount;
@@ -12,7 +12,7 @@ export function TabPanel({ forTabId, enableAutoUnmount, children, style, ...prop
     if (shouldAutoUnmount && !isSelected)
         return null;
     const classNames = tabPanelSlotRecipe();
-    return (_jsx("div", { role: "tabpanel", id: `tabpanel-${forTabId}`, className: cx(classNames.root, 'mfui-TabPanel__root'), "aria-labelledby": forTabId, style: {
+    return (_jsx("div", { role: "tabpanel", id: `tabpanel-${forTabId}`, className: cx(classNames.root, 'mfui-TabPanel__root', className), "aria-labelledby": forTabId, style: {
             ...style,
             display: !shouldAutoUnmount && !isSelected ? 'none' : undefined,
         }, ...props, children: children }));

package/dist/src/Tabs/Tabs.d.ts

@@ -2,7 +2,7 @@ import { type TabsProps } from './Tabs.types';
 import { TabItem } from './TabItem';
 import { TabList } from './TabList';
 import { TabPanel } from './TabPanel';
-declare function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnmount, children }: TabsProps): import("react/jsx-runtime").JSX.Element;
+declare function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnmount, children, className, style, }: TabsProps): import("react/jsx-runtime").JSX.Element;
 /**
  * The Tabs component manages the tabs, tab lists, and tab panels within a tab section.
  * It provides the necessary context for handling tab selection and rendering the appropriate content.

package/dist/src/Tabs/Tabs.js

@@ -9,7 +9,7 @@ import { TabPanel } from './TabPanel';
 import { TabContext } from './TabContext';
 import { getTargetDomNode } from '../utilities/dom/getTargetDomNode';
 import { cx } from '../../styled-system/css';
-function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnmount = true, children }) {
+function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnmount = true, children, className, style, }) {
     const classNames = tabsSlotRecipe();
     const [shouldShowMenu, setShouldShowMenu] = useState(false);
     const wrapperRef = useRef(null);
@@ -59,7 +59,7 @@ function Base({ selectedTabId, onSelectedTabChange, targetDOMNode, enableAutoUnm
         unregisterTab,
         enableAutoUnmount,
     ]);
-    return (_jsx(TabContext.Provider, { value: contextValue, children: _jsx("div", { ref: wrapperRef, className: cx(classNames.root, 'mfui-Tabs__root'), children: children }) }));
+    return (_jsx(TabContext.Provider, { value: contextValue, children: _jsx("div", { ref: wrapperRef, className: cx(classNames.root, 'mfui-Tabs__root', className), style: style, children: children }) }));
 }
 /**
  * The Tabs component manages the tabs, tab lists, and tab panels within a tab section.

package/dist/styled-system/recipes/file-drop-zone-slot-recipe.d.ts

@@ -17,7 +17,7 @@ type FileDropZoneSlotRecipeVariantMap = {
   [key in keyof FileDropZoneSlotRecipeVariant]: Array<FileDropZoneSlotRecipeVariant[key]>
 }
 
-type FileDropZoneSlotRecipeSlot = "root" | "input" | "container" | "illustration" | "mainContainer" | "instruction" | "buttonContainer" | "button" | "fileInfo" | "span" | "clearButton" | "helpMessage" | "extra" | "phrase"
+type FileDropZoneSlotRecipeSlot = "root" | "input" | "container" | "illustration" | "mainContainer" | "instruction" | "buttonContainer" | "button" | "fileInfo" | "span" | "clearButton" | "helpMessage" | "errorMessages" | "extra" | "phrase"
 
 export type FileDropZoneSlotRecipeVariantProps = {
   [key in keyof FileDropZoneSlotRecipeVariant]?: FileDropZoneSlotRecipeVariant[key] | undefined

package/dist/styled-system/recipes/file-drop-zone-slot-recipe.js

@@ -64,6 +64,10 @@ const fileDropZoneSlotRecipeSlotNames = [
         "helpMessage",
         "file-drop-zone__helpMessage"
     ],
+    [
+        "errorMessages",
+        "file-drop-zone__errorMessages"
+    ],
     [
         "extra",
         "file-drop-zone__extra"

package/dist/styled-system/recipes/icon-button-slot-recipe.d.ts

@@ -8,6 +8,7 @@ interface IconButtonSlotRecipeVariant {
  */
 size: "small" | "default"
 outlined: boolean
+destructive: boolean
 }
 
 type IconButtonSlotRecipeVariantMap = {
@@ -17,7 +18,7 @@ type IconButtonSlotRecipeVariantMap = {
 type IconButtonSlotRecipeSlot = "root"
 
 export type IconButtonSlotRecipeVariantProps = {
-  [key in keyof IconButtonSlotRecipeVariant]?: ConditionalValue<IconButtonSlotRecipeVariant[key]> | undefined
+  [key in keyof IconButtonSlotRecipeVariant]?: IconButtonSlotRecipeVariant[key] | undefined
 }
 
 export interface IconButtonSlotRecipeRecipe {

package/dist/styled-system/recipes/icon-button-slot-recipe.js

@@ -3,7 +3,33 @@ import { createRecipe } from './create-recipe.js';
 const iconButtonSlotRecipeDefaultVariants = {
     "size": "default"
 };
-const iconButtonSlotRecipeCompoundVariants = [];
+const iconButtonSlotRecipeCompoundVariants = [
+    {
+        "destructive": true,
+        "outlined": true,
+        "css": {
+            "root": {
+                "borderColor": "mfui.color.signal-red.border.none",
+                "_hover": {
+                    "_notDisabled": {
+                        "borderColor": "mfui.color.signal-red.border.hovered"
+                    }
+                },
+                "_focusVisible": {
+                    "borderColor": "mfui.color.signal-red.border.hovered"
+                },
+                "_active": {
+                    "_notDisabled": {
+                        "borderColor": "mfui.color.signal-red.border.pressed"
+                    }
+                },
+                "_disabled": {
+                    "borderColor": "mfui.color.disabled.border"
+                }
+            }
+        }
+    }
+];
 const iconButtonSlotRecipeSlotNames = [
     [
         "root",
@@ -16,7 +42,8 @@ const iconButtonSlotRecipeFn = memo((props = {}) => {
 });
 const iconButtonSlotRecipeVariantKeys = [
     "size",
-    "outlined"
+    "outlined",
+    "destructive"
 ];
 const getVariantProps = (variants) => ({ ...iconButtonSlotRecipeDefaultVariants, ...compact(variants) });
 export const iconButtonSlotRecipe = /* @__PURE__ */ Object.assign(iconButtonSlotRecipeFn, {
@@ -32,6 +59,10 @@ export const iconButtonSlotRecipe = /* @__PURE__ */ Object.assign(iconButtonSlot
         ],
         "outlined": [
             "true"
+        ],
+        "destructive": [
+            "true",
+            "false"
         ]
     },
     splitVariantProps(props) {

package/dist/styled-system/recipes/section-message-slot-recipe.d.ts

@@ -3,7 +3,7 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface SectionMessageSlotRecipeVariant {
-  messageType: "neutral" | "success" | "error" | "caution" | "busy" | "progress"
+  messageType: "neutral" | "info" | "success" | "error" | "caution" | "busy" | "progress"
 region: "inline" | "page"
 disableResponsive: boolean
 }

package/dist/styled-system/recipes/section-message-slot-recipe.js

@@ -59,6 +59,7 @@ export const sectionMessageSlotRecipe = /* @__PURE__ */ Object.assign(sectionMes
     variantMap: {
         "messageType": [
             "neutral",
+            "info",
             "success",
             "error",
             "caution",

package/dist/styles.css

@@ -4685,8 +4685,6 @@
   background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.none);
   font-family: var(--mfui-fonts-mfui\.typography\.font-family\.label);
   font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.control-label);
-  width: 100%;
-  min-width: max-content;
   height: 100%;
 }
 
@@ -4695,6 +4693,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  width: 100%;
 }
 
 .mfui-fqNMeO {
@@ -4715,6 +4714,7 @@
   align-items: center;
   justify-content: center;
   width: 100%;
+  min-width: max-content;
 }
 
 .mfui-juYDJw {
@@ -4767,6 +4767,12 @@
   height: 1px;
 }
 
+.mfui-VkDTa {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .mfui-kakNKU {
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.main-content\.horizontal\.comfort);
   padding-block: var(--mfui-spacing-mfui\.size\.padding\.content\.vertical\.comfort);
@@ -6460,6 +6466,26 @@ li:last-child > .mfui-cXGJls {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
 }
 
+.mfui-cpUpeB {
+  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.none);
+}
+
+.mfui-cpUpeB:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) {
+  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.pressed);
+}
+
+.mfui-cpUpeB:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+  color: var(--mfui-colors-mfui\.color\.disabled\.content);
+}
+
+.mfui-cpUpeB:is(:focus-visible, [data-focus-visible]),.mfui-cpUpeB:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]) {
+  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.hovered);
+}
+
+.mfui-cpUpeB:is(:active, [data-active]):not(:disabled, [disabled], [data-disabled]) {
+  color: var(--mfui-colors-mfui\.color\.signal-red\.content\.pressed);
+}
+
 .mfui-bWjutw .mfui-FocusIndicator__root:is(:focus-visible, [data-focus-visible]),.mfui-bWjutw .mfui-FocusIndicator__root:has(input:focus-visible, input[data-focus-visible=true], textarea:focus-visible, textarea[data-focus-visible=true]) {
   box-shadow: none;
 }
@@ -6858,6 +6884,10 @@ li:last-child > .mfui-cXGJls {
   resize: horizontal;
 }
 
+.mfui-dpIccs {
+  color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+}
+
 .mfui-cFyzwg {
   background-color: var(--mfui-colors-mfui\.color\.signal-green\.sub-background\.none);
 }
@@ -8701,6 +8731,10 @@ li:last-child > .mfui-cXGJls {
   border: none;
 }
 
+.mfui-gpYLkO:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+  border-color: var(--mfui-colors-mfui\.color\.disabled\.border);
+}
+
 .mfui-kGMVVf:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
   background-color: var(--mfui-colors-mfui\.color\.disabled\.background);
 }
@@ -8717,14 +8751,14 @@ tr:last-child > .mfui-gtOHny::before {
   height: 100%;
 }
 
-.mfui-kSeSQV:is(:focus-visible, [data-focus-visible]),.mfui-dqyxbp:has(input:focus-visible, input[data-focus-visible=true], textarea:focus-visible, textarea[data-focus-visible=true]) {
-  outline: 2px solid var(--mfui-colors-mfui\.color\.primary\.border\.none);
-}
-
 .mfui-iHQAZp:is(:focus-visible, [data-focus-visible]) {
   border-color: var(--mfui-colors-mfui\.color\.signal-red\.border\.hovered);
 }
 
+.mfui-kSeSQV:is(:focus-visible, [data-focus-visible]),.mfui-dqyxbp:has(input:focus-visible, input[data-focus-visible=true], textarea:focus-visible, textarea[data-focus-visible=true]) {
+  outline: 2px solid var(--mfui-colors-mfui\.color\.primary\.border\.none);
+}
+
 .group:is(:focus-visible, [data-focus-visible]) .mfui-iYLcWF {
   border-color: var(--mfui-colors-mfui\.color\.base\.inverted-border\.hovered);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.33.0",
+  "version": "3.35.0",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",
@@ -63,8 +63,8 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@tanstack/react-virtual": "^3.13.18",
     "dayjs": "^1.11.13",
-    "@moneyforward/mfui-design-tokens": "^3.3.1",
-    "@moneyforward/mfui-icons-react": "^3.6.0"
+    "@moneyforward/mfui-icons-react": "^3.6.0",
+    "@moneyforward/mfui-design-tokens": "^3.3.1"
   },
   "scripts": {
     "prepare:panda": "panda codegen",