@moneyforward/mfui-components 3.32.0 → 3.34.0

package/dist/src/DateTimeSelection/shared/CalendarGrid/CalendarGrid.js

@@ -99,8 +99,9 @@ export function CalendarGrid({ viewingValue, minDate, maxDate, checkDisabledDate
                 // All props are generated internally and guaranteed to have required fields
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
-                if (!dateItem)
-                    return _jsx("div", {}, `empty-date-${String(index)}`);
+                if (!dateItem) {
+                    return (_jsx("div", { className: cx(classes.emptyDateCell, 'mfui-CalendarGrid__emptyDateCell') }, `empty-date-${String(index)}`));
+                }
                 return renderDateCell ? (renderDateCell(dateItem)) : (_jsx(DateCell, { ...dateItem }, `date-${dateItem.date.toISOString()}`));
             })] }));
 }

package/dist/src/DateTimeSelection/shared/CalendarGrid/utilities/useDates.d.ts

@@ -12,7 +12,8 @@
  *  7, 8, 9, 10, 11, 12, 13,
  *  14, 15, 16, 17, 18, 19, 20,
  *  21, 22, 23, 24, 25, 26, 27,
- *  28, 29, 30, 31, null, null, null
+ *  28, 29, 30, 31, null, null, null,
+ *  null, null, null, null, null, null, null
  * ]
  */
 export declare function useDates(viewingValue: Date): (number | null)[];

package/dist/src/DateTimeSelection/shared/CalendarGrid/utilities/useDates.js

@@ -14,19 +14,20 @@ import { getTotalDaysInMonth } from './dateUtilities';
  *  7, 8, 9, 10, 11, 12, 13,
  *  14, 15, 16, 17, 18, 19, 20,
  *  21, 22, 23, 24, 25, 26, 27,
- *  28, 29, 30, 31, null, null, null
+ *  28, 29, 30, 31, null, null, null,
+ *  null, null, null, null, null, null, null
  * ]
  */
 export function useDates(viewingValue) {
     return useMemo(() => {
         // Count empty dates at start
         const emptyDatesStart = Array(viewingValue.getDay() === 0 ? 6 : viewingValue.getDay() - 1).fill(null);
-        // Count empty dates at the end
-        const emptyDatesEnd = Array(7 - ((viewingValue.getDay() + getTotalDaysInMonth(viewingValue.getMonth(), viewingValue.getFullYear())) % 7)).fill(null);
         // List up dates of viewing value
         const dates = Array(getTotalDaysInMonth(viewingValue.getMonth(), viewingValue.getFullYear()))
             .fill(0)
             .map((_, dateIndex) => dateIndex + 1);
+        // Keep the calendar at six weeks so its height does not change between months.
+        const emptyDatesEnd = Array(42 - emptyDatesStart.length - dates.length).fill(null);
         return [...emptyDatesStart, ...dates, ...emptyDatesEnd];
     }, [viewingValue]);
 }

package/dist/src/Dialog/Dialog.js

@@ -54,5 +54,5 @@ export const Dialog = compatibleForwardRef(({ open, title, onClose, className, a
     return (_jsx(TargetDomNodeProvider, { targetDomNode: dialogElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setDialogElement, ...dialogProps, className: cx(classes.root, 'mfui-Dialog__root', className), style: {
                     ...dialogProps.style,
                     ...(!enableAutoUnmount && !localOpen && { display: 'none' }),
-                }, onKeyDown: handleOnKeyDown, children: [_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-Dialog__backdrop'), onClick: handleBackdropClick }), _jsxs("div", { ref: setInsideElement, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": contentId, tabIndex: -1, "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-Dialog__inside'), onClick: handleStopCloseDialog, children: [_jsx("header", { className: cx(classes.header, 'mfui-Dialog__header'), children: _jsxs("div", { className: cx(classes.headerContent, 'mfui-Dialog__headerContent'), children: [_jsx(Heading, { id: titleId, variant: "pageHeading2", tag: "h2", className: cx(classes.title, 'mfui-Dialog__title'), children: title }), !hideCloseButton ? (_jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-Dialog__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: closeDialog, children: _jsx(Close, {}) }) })) : null] }) }), _jsx("main", { id: contentId, className: cx(classes.content, 'mfui-Dialog__content'), children: children }), _jsx("footer", { className: cx(classes.footer, 'mfui-Dialog__footer'), children: actionSlot })] })] }) })) : null }));
+                }, onKeyDown: handleOnKeyDown, children: [_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-Dialog__backdrop'), onClick: handleBackdropClick }), _jsxs("div", { ref: setInsideElement, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, "aria-describedby": contentId, tabIndex: -1, "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-Dialog__inside'), onClick: handleStopCloseDialog, children: [_jsx("div", { className: cx(classes.header, 'mfui-Dialog__header'), children: _jsxs("div", { className: cx(classes.headerContent, 'mfui-Dialog__headerContent'), children: [_jsx(Heading, { id: titleId, variant: "pageHeading2", tag: "h2", className: cx(classes.title, 'mfui-Dialog__title'), children: title }), !hideCloseButton ? (_jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-Dialog__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: closeDialog, children: _jsx(Close, {}) }) })) : null] }) }), _jsx("div", { id: contentId, className: cx(classes.content, 'mfui-Dialog__content'), children: children }), _jsx("div", { className: cx(classes.footer, 'mfui-Dialog__footer'), children: actionSlot })] })] }) })) : null }));
 });

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/FormFooter/FormFooter.js

@@ -8,5 +8,5 @@ import { formFooterSlotRecipe } from '../../styled-system/recipes';
  */
 export function FormFooter({ className, position = 'stacking', sectionPosition = 'center', optionsSlot, actionsSlot, }) {
     const classes = formFooterSlotRecipe({ position, sectionPosition });
-    return (_jsx("footer", { className: cx(classes.root, 'mfui-FormFooter__root', className), children: _jsxs("div", { className: cx(classes.section, 'mfui-FormFooter__section'), children: [optionsSlot ? _jsx("div", { className: cx(classes.options, 'mfui-FormFooter__options'), children: optionsSlot }) : null, _jsx("div", { className: cx(classes.actions, 'mfui-FormFooter__actions'), children: actionsSlot })] }) }));
+    return (_jsx("div", { className: cx(classes.root, 'mfui-FormFooter__root', className), children: _jsxs("div", { className: cx(classes.section, 'mfui-FormFooter__section'), children: [optionsSlot ? _jsx("div", { className: cx(classes.options, 'mfui-FormFooter__options'), children: optionsSlot }) : null, _jsx("div", { className: cx(classes.actions, 'mfui-FormFooter__actions'), children: actionsSlot })] }) }));
 }

package/dist/src/GlobalHeader/ApplicationsExperimentalIcon.d.ts

@@ -0,0 +1,9 @@
+import { type SVGProps } from 'react';
+/**
+ * Experimental applications icon used inside the built-in applications menu button.
+ *
+ * This component is private to `GlobalHeader` and not exported from the package.
+ *
+ * @param props - SVG props forwarded to the root `<svg>`.
+ */
+export declare function ApplicationsExperimentalIcon(props: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/src/GlobalHeader/ApplicationsExperimentalIcon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Experimental applications icon used inside the built-in applications menu button.
+ *
+ * This component is private to `GlobalHeader` and not exported from the package.
+ *
+ * @param props - SVG props forwarded to the root `<svg>`.
+ */
+export function ApplicationsExperimentalIcon(props) {
+    return (_jsxs("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M4.5 2.75C4.5 3.7165 3.7165 4.5 2.75 4.5C1.7835 4.5 1 3.7165 1 2.75C1 1.7835 1.7835 1 2.75 1C3.7165 1 4.5 1.7835 4.5 2.75Z", fill: "currentColor" }), _jsx("path", { d: "M10.75 2.75C10.75 3.7165 9.9665 4.5 9 4.5C8.0335 4.5 7.25 3.7165 7.25 2.75C7.25 1.7835 8.0335 1 9 1C9.9665 1 10.75 1.7835 10.75 2.75Z", fill: "currentColor" }), _jsx("path", { d: "M17 2.75C17 3.7165 16.2165 4.5 15.25 4.5C14.2835 4.5 13.5 3.7165 13.5 2.75C13.5 1.7835 14.2835 1 15.25 1C16.2165 1 17 1.7835 17 2.75Z", fill: "currentColor" }), _jsx("path", { d: "M4.5 9C4.5 9.9665 3.7165 10.75 2.75 10.75C1.7835 10.75 1 9.9665 1 9C1 8.0335 1.7835 7.25 2.75 7.25C3.7165 7.25 4.5 8.0335 4.5 9Z", fill: "currentColor" }), _jsx("path", { d: "M10.75 9C10.75 9.9665 9.9665 10.75 9 10.75C8.0335 10.75 7.25 9.9665 7.25 9C7.25 8.0335 8.0335 7.25 9 7.25C9.9665 7.25 10.75 8.0335 10.75 9Z", fill: "currentColor" }), _jsx("path", { d: "M17 9C17 9.9665 16.2165 10.75 15.25 10.75C14.2835 10.75 13.5 9.9665 13.5 9C13.5 8.0335 14.2835 7.25 15.25 7.25C16.2165 7.25 17 8.0335 17 9Z", fill: "currentColor" }), _jsx("path", { d: "M4.5 15.25C4.5 16.2165 3.7165 17 2.75 17C1.7835 17 1 16.2165 1 15.25C1 14.2835 1.7835 13.5 2.75 13.5C3.7165 13.5 4.5 14.2835 4.5 15.25Z", fill: "currentColor" }), _jsx("path", { d: "M10.75 15.25C10.75 16.2165 9.9665 17 9 17C8.0335 17 7.25 16.2165 7.25 15.25C7.25 14.2835 8.0335 13.5 9 13.5C9.9665 13.5 10.75 14.2835 10.75 15.25Z", fill: "currentColor" }), _jsx("path", { d: "M17 15.25C17 16.2165 16.2165 17 15.25 17C14.2835 17 13.5 16.2165 13.5 15.25C13.5 14.2835 14.2835 13.5 15.25 13.5C16.2165 13.5 17 14.2835 17 15.25Z", fill: "currentColor" })] }));
+}

package/dist/src/GlobalHeader/GlobalHeader.d.ts

@@ -3,4 +3,4 @@ import { type GlobalHeaderProps } from './GlobalHeader.types';
  * The global header component.
  * The global header component is a top-level navigation component that is used to display the application's logo and navigation elements.
  */
-export declare function GlobalHeader({ className, mainNavigationButtonProps, applicationsMenuSlot, logoSlot, rightPaneSlot, disableResponsive, }: GlobalHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function GlobalHeader({ className, mainNavigationButtonProps, applicationsMenuSlot, experimentalApplicationsMenuButtonProps, logoSlot, rightPaneSlot, disableResponsive, }: GlobalHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/GlobalHeader/GlobalHeader.js

@@ -4,16 +4,20 @@ import { cx } from '../../styled-system/css';
 import { globalHeaderSlotRecipe } from '../../styled-system/recipes';
 import { IconButton } from '../IconButton';
 import { Tooltip } from '../Tooltip';
+import { ApplicationsExperimentalIcon } from './ApplicationsExperimentalIcon';
 /**
  * The global header component.
  * The global header component is a top-level navigation component that is used to display the application's logo and navigation elements.
  */
-export function GlobalHeader({ className, mainNavigationButtonProps, applicationsMenuSlot, logoSlot, rightPaneSlot, disableResponsive = false, }) {
+export function GlobalHeader({ className, mainNavigationButtonProps, applicationsMenuSlot, experimentalApplicationsMenuButtonProps, logoSlot, rightPaneSlot, disableResponsive = false, }) {
     const responsive = !disableResponsive;
     // If `disableResponsive` is true, the layout will not switch depending on the viewport width.
     const classes = globalHeaderSlotRecipe({ switchLayout: responsive });
     const handleClickMainNavigationButton = (event) => {
         mainNavigationButtonProps?.onClick?.(event);
     };
-    return (_jsxs("header", { className: cx(classes.root, 'mfui-GlobalHeader__root', className), children: [_jsxs("div", { className: cx(classes.leftPane, 'mfui-GlobalHeader__leftPane'), children: [responsive && mainNavigationButtonProps ? (_jsx(Tooltip, { className: cx(classes.mainNavigationButton, 'mfui-GlobalHeader__mainNavigationButton'), content: mainNavigationButtonProps['aria-label'], placement: "bottomStart", children: _jsx(IconButton, { "aria-label": mainNavigationButtonProps['aria-label'], onClick: handleClickMainNavigationButton, children: _jsx(Menu, { "aria-hidden": true }) }) })) : null, applicationsMenuSlot ? (_jsx("div", { className: cx(classes.applicationsMenuSlot, 'mfui-GlobalHeader__applicationsMenuSlot'), children: applicationsMenuSlot })) : null, _jsx("div", { className: cx(classes.logo, 'mfui-GlobalHeader__logo'), children: logoSlot.base }), _jsx("div", { className: cx(classes.logoNarrowViewport, 'mfui-GlobalHeader__logoNarrowViewport'), children: logoSlot.narrowViewport ?? logoSlot.base })] }), _jsxs("div", { className: cx(classes.rightPane, 'mfui-GlobalHeader__rightPane'), children: [_jsx("div", { className: cx(classes.rightPaneSlot, 'mfui-GlobalHeader__rightPaneSlot'), children: rightPaneSlot.base }), responsive && rightPaneSlot.narrowViewport ? (_jsx("div", { className: cx(classes.rightPaneSlotNarrowViewport, 'mfui-GlobalHeader__rightPaneSlotNarrowViewport'), children: rightPaneSlot.narrowViewport })) : null] })] }));
+    const handleClickExperimentalApplicationsMenuButton = (event) => {
+        experimentalApplicationsMenuButtonProps?.onClick?.(event);
+    };
+    return (_jsxs("header", { className: cx(classes.root, 'mfui-GlobalHeader__root', className), children: [_jsxs("div", { className: cx(classes.leftPane, 'mfui-GlobalHeader__leftPane'), children: [responsive && mainNavigationButtonProps ? (_jsx(Tooltip, { className: cx(classes.mainNavigationButton, 'mfui-GlobalHeader__mainNavigationButton'), content: mainNavigationButtonProps['aria-label'], placement: "bottomStart", children: _jsx(IconButton, { "aria-label": mainNavigationButtonProps['aria-label'], onClick: handleClickMainNavigationButton, children: _jsx(Menu, { "aria-hidden": true }) }) })) : null, experimentalApplicationsMenuButtonProps ? (_jsx("div", { className: cx(classes.applicationsMenuSlot, 'mfui-GlobalHeader__applicationsMenuSlot'), children: _jsx(Tooltip, { content: experimentalApplicationsMenuButtonProps['aria-label'], placement: "bottomStart", children: _jsx(IconButton, { className: cx(classes.experimentalApplicationsMenuButton, 'mfui-GlobalHeader__experimentalApplicationsMenuButton'), "aria-label": experimentalApplicationsMenuButtonProps['aria-label'], onClick: handleClickExperimentalApplicationsMenuButton, children: _jsx(ApplicationsExperimentalIcon, { "aria-hidden": true }) }) }) })) : applicationsMenuSlot ? (_jsx("div", { className: cx(classes.applicationsMenuSlot, 'mfui-GlobalHeader__applicationsMenuSlot'), children: applicationsMenuSlot })) : null, _jsx("div", { className: cx(classes.logo, 'mfui-GlobalHeader__logo'), children: logoSlot.base }), _jsx("div", { className: cx(classes.logoNarrowViewport, 'mfui-GlobalHeader__logoNarrowViewport'), children: logoSlot.narrowViewport ?? logoSlot.base })] }), _jsxs("div", { className: cx(classes.rightPane, 'mfui-GlobalHeader__rightPane'), children: [_jsx("div", { className: cx(classes.rightPaneSlot, 'mfui-GlobalHeader__rightPaneSlot'), children: rightPaneSlot.base }), responsive && rightPaneSlot.narrowViewport ? (_jsx("div", { className: cx(classes.rightPaneSlotNarrowViewport, 'mfui-GlobalHeader__rightPaneSlotNarrowViewport'), children: rightPaneSlot.narrowViewport })) : null] })] }));
 }

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

@@ -21,6 +21,36 @@ type MainNavigationButtonProps = {
      */
     'aria-label': IconButtonProps['aria-label'];
 };
+/**
+ * The properties of the built-in applications menu button.
+ *
+ * **EXPERIMENTAL**: This feature is experimental and may be changed or removed in the future.
+ */
+type ExperimentalApplicationsMenuButtonProps = {
+    /**
+     * The handler to be called when the applications menu button is clicked.
+     */
+    onClick: IconButtonProps['onClick'];
+    /**
+     * The accessible label to specify how you want the applications menu button to be recognized and read by screen readers.
+     * This prop is required.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
+     *
+     * @example
+     * ```jsx
+     * <GlobalHeader
+     *   experimentalApplicationsMenuButtonProps={{
+     *     onClick,
+     *     'aria-label': 'アプリケーションメニュー',
+     *   }}
+     * />
+     *
+     * // The button will be described as "アプリケーションメニュー" by screen readers.
+     * ```
+     */
+    'aria-label': IconButtonProps['aria-label'];
+};
 export type GlobalHeaderProps = {
     /**
      * The class name of the global header.
@@ -39,6 +69,15 @@ export type GlobalHeaderProps = {
      * This element must be an applications dropdown menu as defined in Figma.
      */
     applicationsMenuSlot?: ReactNode;
+    /**
+     * The properties of the built-in applications menu button with the new experimental design and border.
+     *
+     * When provided, the button is rendered in the applications menu area and takes precedence over `applicationsMenuSlot`.
+     * When omitted, `applicationsMenuSlot` is rendered as before.
+     *
+     * **EXPERIMENTAL**: This property is experimental and may be changed or removed in the future.
+     */
+    experimentalApplicationsMenuButtonProps?: ExperimentalApplicationsMenuButtonProps;
     /**
      * Elements to be displayed on the logo area where the left side of the global header.
      *

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

@@ -188,7 +188,7 @@ export type MainNavigationProps = {
      * Whether the navigation is collapsible.
      *
      * If this property is set to `true`, the toggle button is displayed at the bottom of the navigation.
-     * Cannot be used with feature shortcut or nested navigation.
+     * Cannot be used with feature shortcut.
      *
      * @default false
      */

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/SidePane/SidePane.js

@@ -63,5 +63,5 @@ export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onCl
     return (_jsx(TargetDomNodeProvider, { targetDomNode: sidePaneElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setSidePaneElement, ...props, className: cx(classes.root, 'mfui-SidePane__root', className), style: {
                     ...props.style,
                     ...(!enableAutoUnmount && !localOpen && { display: 'none' }),
-                }, onKeyDown: handleOnKeyDown, children: [enableModal ? (_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, _jsxs("div", { ref: setInsideElement, role: "dialog", "aria-modal": enableModal ? 'true' : undefined, tabIndex: -1, "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("header", { className: cx(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : (_jsx("div", { className: cx(classes.title, 'mfui-SidePane__title'), children: headingNode })), _jsxs("div", { className: cx(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && (_jsx("div", { className: cx(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), _jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), _jsxs("main", { className: cx(classes.content, 'mfui-SidePane__content'), children: [_jsx("div", { className: cx(classes.contentBody, 'mfui-SidePane__contentBody'), children: children }), resolvedFormFooterPosition === 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] }), formFooterProps && resolvedFormFooterPosition !== 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] })] }) })) : null }));
+                }, onKeyDown: handleOnKeyDown, children: [enableModal ? (_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, _jsxs("div", { ref: setInsideElement, role: "dialog", "aria-modal": enableModal ? 'true' : undefined, tabIndex: -1, "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("div", { className: cx(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : (_jsx("div", { className: cx(classes.title, 'mfui-SidePane__title'), children: headingNode })), _jsxs("div", { className: cx(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && (_jsx("div", { className: cx(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), _jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), _jsxs("div", { className: cx(classes.content, 'mfui-SidePane__content'), children: [_jsx("div", { className: cx(classes.contentBody, 'mfui-SidePane__contentBody'), children: children }), resolvedFormFooterPosition === 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] }), formFooterProps && resolvedFormFooterPosition !== 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] })] }) })) : null }));
 });

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/jsx/create-style-context.js

@@ -52,6 +52,10 @@ export function createStyleContext(recipe) {
         const StyledComponent = styled(Component, {}, options);
         const WithProvider = forwardRef((props, ref) => {
             const [variantProps, restProps] = svaFn.splitVariantProps(props);
+            options?.forwardProps?.forEach((key) => {
+                if (key in variantProps)
+                    restProps[key] = variantProps[key];
+            });
             const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps);
             slotStyles._classNameMap = svaFn.classNameMap;
             const propsWithClass = { ...restProps, className: restProps.className ?? options?.defaultProps?.className };

package/dist/styled-system/jsx/is-valid-prop.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import type { DistributiveOmit, HTMLPandaProps, JsxStyleProps, Pretty } from '../types';
+import type { DistributiveOmit, JsxStyleProps, Pretty } from '../types';
 
 declare const isCssProperty: (value: string) => boolean;
 

package/dist/styled-system/recipes/calendar-grid-slot-recipe.d.ts

@@ -10,7 +10,7 @@ type CalendarGridSlotRecipeVariantMap = {
   [key in keyof CalendarGridSlotRecipeVariant]: Array<CalendarGridSlotRecipeVariant[key]>
 }
 
-type CalendarGridSlotRecipeSlot = "calendarGrid"
+type CalendarGridSlotRecipeSlot = "calendarGrid" | "emptyDateCell"
 
 export type CalendarGridSlotRecipeVariantProps = {
   [key in keyof CalendarGridSlotRecipeVariant]?: ConditionalValue<CalendarGridSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/calendar-grid-slot-recipe.js

@@ -6,6 +6,10 @@ const calendarGridSlotRecipeSlotNames = [
     [
         "calendarGrid",
         "CalendarGrid__calendarGrid"
+    ],
+    [
+        "emptyDateCell",
+        "CalendarGrid__emptyDateCell"
     ]
 ];
 const calendarGridSlotRecipeSlotFns = /* @__PURE__ */ calendarGridSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, calendarGridSlotRecipeDefaultVariants, getSlotCompoundVariant(calendarGridSlotRecipeCompoundVariants, slotName))]);

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/global-header-slot-recipe.d.ts

@@ -10,7 +10,7 @@ type GlobalHeaderSlotRecipeVariantMap = {
   [key in keyof GlobalHeaderSlotRecipeVariant]: Array<GlobalHeaderSlotRecipeVariant[key]>
 }
 
-type GlobalHeaderSlotRecipeSlot = "root" | "leftPane" | "mainNavigationButton" | "applicationsMenuSlot" | "logo" | "logoNarrowViewport" | "rightPane" | "rightPaneSlot" | "rightPaneSlotNarrowViewport"
+type GlobalHeaderSlotRecipeSlot = "root" | "leftPane" | "mainNavigationButton" | "applicationsMenuSlot" | "experimentalApplicationsMenuButton" | "logo" | "logoNarrowViewport" | "rightPane" | "rightPaneSlot" | "rightPaneSlotNarrowViewport"
 
 export type GlobalHeaderSlotRecipeVariantProps = {
   [key in keyof GlobalHeaderSlotRecipeVariant]?: ConditionalValue<GlobalHeaderSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/global-header-slot-recipe.js

@@ -19,6 +19,10 @@ const globalHeaderSlotRecipeSlotNames = [
         "applicationsMenuSlot",
         "GlobalHeader__applicationsMenuSlot"
     ],
+    [
+        "experimentalApplicationsMenuButton",
+        "GlobalHeader__experimentalApplicationsMenuButton"
+    ],
     [
         "logo",
         "GlobalHeader__logo"

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

@@ -1223,9 +1223,25 @@
 
 .mfui-iYzsiq {
   gap: var(--mfui-spacing-mfui\.size\.spacing\.paragraph\.horizontal\.comfort);
+  display: inline-flex;
+  align-items: center;
+}
+
+.mfui-foTsqX.mfui-IconButton__root {
+  border: 1px solid;
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+  border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
 }
 
-.mfui-iYzsiq,.mfui-fvFlLM {
+.mfui-foTsqX.mfui-IconButton__root:is(:focus-visible, [data-focus-visible]),.mfui-foTsqX.mfui-IconButton__root:is(:hover, [data-hover]):not(:disabled, [disabled], [data-disabled]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.hovered);
+}
+
+.mfui-foTsqX.mfui-IconButton__root:is(:active, [data-active]):not(:disabled, [disabled], [data-disabled]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.pressed);
+}
+
+.mfui-fvFlLM {
   display: inline-flex;
   align-items: center;
 }
@@ -2526,6 +2542,11 @@
   grid-template-columns: repeat(7, 1fr);
 }
 
+.mfui-kmzIbu {
+  width: var(--mfui-sizes-mfui\.size\.dimension\.calendar-cell\.width\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.calendar-cell\.height\.comfort);
+}
+
 .mfui-gPptzF {
   width: min-content;
 }
@@ -4664,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%;
 }
 
@@ -4674,6 +4693,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  width: 100%;
 }
 
 .mfui-fqNMeO {
@@ -4694,6 +4714,7 @@
   align-items: center;
   justify-content: center;
   width: 100%;
+  min-width: max-content;
 }
 
 .mfui-juYDJw {
@@ -4746,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);
@@ -6000,7 +6027,6 @@ li:last-child > .mfui-cXGJls {
 }
 
 .mfui-iaZfLW {
-  overflow: hidden;
   flex-shrink: 0;
 }
 
@@ -6838,6 +6864,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);
 }