@moneyforward/mfui-components 2.48.2 → 3.1.0

package/dist/cjs/src/FileDropZone/utils/fileHelpers.js

@@ -1,126 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FILE_TYPES = void 0;
-exports.getFilesFromEvent = getFilesFromEvent;
-exports.formatFileSize = formatFileSize;
-exports.getFileExtension = getFileExtension;
-exports.matchesMimeType = matchesMimeType;
-exports.hasExtension = hasExtension;
-exports.getTotalFileSize = getTotalFileSize;
-exports.createValidationResult = createValidationResult;
-/**
- * Extract files from a file input change event
- *
- * @param event - The file input change event
- *
- * @returns The files from the event
- */
-function getFilesFromEvent(event) {
-    return event.target.files ? [...event.target.files] : [];
-}
-/**
- * Format file size in human-readable format
- *
- * @param bytes - The size in bytes
- *
- * @returns The formatted file size
- */
-function formatFileSize(bytes) {
-    if (bytes === 0)
-        return '0 B';
-    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-    const k = 1024;
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    const unitIndex = Math.min(i, units.length - 1);
-    const size = bytes / k ** unitIndex;
-    return `${size.toFixed(1)} ${units[unitIndex] || 'B'}`;
-}
-/**
- * Get file extension from filename
- *
- * @param filename - The name of the file
- *
- * @returns The file extension including the dot
- */
-function getFileExtension(filename) {
-    const lastDot = filename.lastIndexOf('.');
-    return lastDot !== -1 ? filename.slice(lastDot) : '';
-}
-/**
- * Check if file matches a MIME type pattern
- *
- * @param file - The file to check
- *
- * @param pattern - The MIME type pattern
- *
- * @returns True if the file matches the pattern
- */
-function matchesMimeType(file, pattern) {
-    if (!pattern || !file.type)
-        return false;
-    if (pattern === '*/*')
-        return true;
-    if (pattern.includes('*')) {
-        const [mainType, subType] = pattern.split('/');
-        if (subType === '*' && mainType) {
-            return file.type.startsWith(`${mainType}/`);
-        }
-    }
-    return file.type === pattern;
-}
-/**
- * Check if file has specific extension
- *
- * @param file - The file to check
- *
- * @param extension - The extension to check
- *
- * @returns True if the file has the extension
- */
-function hasExtension(file, extension) {
-    const normalizedExtension = extension.startsWith('.') ? extension : `.${extension}`;
-    return file.name.toLowerCase().endsWith(normalizedExtension.toLowerCase());
-}
-/**
- * Get total size of multiple files
- *
- * @param files - The files to get the total size of
- *
- * @returns The total size of the files
- */
-function getTotalFileSize(files) {
-    return files.reduce((total, file) => total + file.size, 0);
-}
-/**
- * Helper to create validation results
- *
- * @param isValid - Whether the file is valid
- *
- * @param error - The error message
- *
- * @returns The validation result
- */
-function createValidationResult(isValid, error) {
-    return { isValid, error };
-}
-/**
- * Common file type groups
- *
- * @property IMAGES - The image file types
- *
- * @property DOCUMENTS - The document file types
- *
- * @property ARCHIVES - The archive file types
- */
-exports.FILE_TYPES = {
-    IMAGES: ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'],
-    DOCUMENTS: [
-        'application/pdf',
-        'application/msword',
-        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-        'application/vnd.ms-excel',
-        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-        'text/plain',
-    ],
-    ARCHIVES: ['application/zip', 'application/x-rar-compressed', 'application/x-tar'],
-};

package/dist/cjs/src/FilterSelectBox/FilterSelectBox.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterSelectBox = FilterSelectBox;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const SelectBox_1 = require("../SelectBox");
-const recipes_1 = require("../../styled-system/recipes");
-const Typography_1 = require("../Typography");
-const css_1 = require("../../styled-system/css");
-/**
- * The FilterSelectBox component.
- * This component extends SelectBox with custom styling and display value formatting.
- * This component switches the variants of looks and behaviors depends on the props: size, disabled.
- */
-function FilterSelectBox({ label, onOpenStateChanged, className, enableClearButton, clearButtonProps, ...props }) {
-    const classes = (0, recipes_1.filterSelectBoxSlotRecipe)();
-    return ((0, jsx_runtime_1.jsx)(SelectBox_1.SelectBox, { ...props, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, triggerProps: {
-            className: (0, css_1.cx)(classes.trigger, 'mfui-FilterSelectBox__trigger', className),
-        }, renderDisplayValue: (selectedOption) => selectedOption ? ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, { variant: "strongBody", children: [(0, jsx_runtime_1.jsx)("span", { "data-mfui-content": "filter-select-box-label", children: `${label}：` }), (0, jsx_runtime_1.jsx)("span", { "data-mfui-content": "filter-select-display-values", children: selectedOption.label })] })) : ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: (0, jsx_runtime_1.jsx)("span", { "data-mfui-content": "filter-select-box-label", children: label }) })), onOpenStateChanged: onOpenStateChanged }));
-}

package/dist/cjs/src/FilterSelectBox/FilterSelectBox.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/FilterSelectBox/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterSelectBox = void 0;
-var FilterSelectBox_1 = require("./FilterSelectBox");
-Object.defineProperty(exports, "FilterSelectBox", { enumerable: true, get: function () { return FilterSelectBox_1.FilterSelectBox; } });

package/dist/cjs/src/FilterTrigger/FilterTrigger.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterTrigger = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const react_1 = require("react");
-const ClearButton_1 = require("../shared/ClearButton");
-const FocusIndicator_1 = require("../FocusIndicator");
-const Typography_1 = require("../Typography");
-const css_1 = require("../../styled-system/css");
-const recipes_1 = require("../../styled-system/recipes");
-/**
- * A trigger component that has the same visual style as FilterSelectBox's trigger.
- * It does not manage popover state internally and is intended to be used with the Popover component.
- */
-exports.FilterTrigger = (0, react_1.forwardRef)(({ label, value, inputProps, className, enableClearButton = false, clearButtonProps, ...props }, ref) => {
-    const classes = (0, recipes_1.filterTriggerSlotRecipe)();
-    const displayContent = value ? ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, { variant: "strongBody", children: [(0, jsx_runtime_1.jsx)("span", { "data-mfui-content": "filter-trigger-label", children: `${label}：` }), (0, jsx_runtime_1.jsx)("span", { "data-mfui-content": "filter-trigger-value", children: value })] })) : ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: (0, jsx_runtime_1.jsx)("span", { "data-mfui-content": "filter-trigger-label", children: label }) }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.wrapper, 'mfui-FilterTrigger__wrapper'), children: [(0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsxs)("button", { ref: ref, type: "button", className: (0, css_1.cx)(classes.trigger, 'mfui-FilterTrigger__trigger', className), "data-selected": !!value, "data-mfui-has-clear-button": enableClearButton ? !!value : false, ...props, children: [(0, jsx_runtime_1.jsx)("span", { className: (0, css_1.cx)(classes.content, 'mfui-FilterTrigger__content'), "data-mfui-content": "filter-trigger-display-value", children: displayContent }), (0, jsx_runtime_1.jsx)("span", { className: (0, css_1.cx)(classes.dropdownIcon, 'mfui-FilterTrigger__dropdownIcon'), children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Dropdown, {}) })] }) }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", ...inputProps, value: value }), enableClearButton && value ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.clearButtonWrapper, 'mfui-FilterTrigger__clearButtonWrapper'), children: (0, jsx_runtime_1.jsx)(ClearButton_1.ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-trigger-clear-button", onClick: clearButtonProps?.onClick }) })) : null] }));
-});
-exports.FilterTrigger.displayName = 'FilterTrigger';

package/dist/cjs/src/FilterTrigger/FilterTrigger.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/FilterTrigger/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterTrigger = void 0;
-var FilterTrigger_1 = require("./FilterTrigger");
-Object.defineProperty(exports, "FilterTrigger", { enumerable: true, get: function () { return FilterTrigger_1.FilterTrigger; } });

package/dist/cjs/src/FocusIndicator/FocusIndicator.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FocusIndicator = void 0;
-const react_1 = require("react");
-const css_1 = require("../../styled-system/css");
-const recipes_1 = require("../../styled-system/recipes");
-/**
- * The component for display focus indicator.
- *
- * A focus indicator is displayed when the child component is focused.
- * This component can only wrap one child component that can be focused.
- *
- * @example
- * ```tsx
- * // Standard outline (default) - for most components
- * <FocusIndicator>
- *   <button>Click me</button>
- * </FocusIndicator>
- *
- * // Hide white border - for small elements like checkboxes
- * // Note: May not be visible in containers with overflow:hidden in some browsers
- * <FocusIndicator hideWhiteBorder>
- *   <input type="checkbox" />
- * </FocusIndicator>
- *
- * // Inside position - for adjacent elements like tabs
- * <FocusIndicator position="inside">
- *   <button role="tab">Tab Item</button>
- * </FocusIndicator>
- * ```
- */
-const FocusIndicator = ({ position = 'outside', hideWhiteBorder = false, disableNestedFocus = false, children, }) => {
-    const classes = (0, recipes_1.focusIndicatorSlotRecipe)({ position, hideWhiteBorder, disableNestedFocus });
-    const child = react_1.Children.only(children);
-    const childProps = child.props;
-    return (0, react_1.cloneElement)(children, {
-        ...childProps,
-        className: (0, css_1.cx)(childProps.className, classes.root, 'mfui-FocusIndicator__root'),
-    });
-};
-exports.FocusIndicator = FocusIndicator;

package/dist/cjs/src/FocusIndicator/FocusIndicator.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/FocusIndicator/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FocusIndicator = void 0;
-var FocusIndicator_1 = require("./FocusIndicator");
-Object.defineProperty(exports, "FocusIndicator", { enumerable: true, get: function () { return FocusIndicator_1.FocusIndicator; } });

package/dist/cjs/src/GlobalHeader/GlobalHeader.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GlobalHeader = GlobalHeader;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const css_1 = require("../../styled-system/css");
-const recipes_1 = require("../../styled-system/recipes");
-const IconButton_1 = require("../IconButton");
-const Tooltip_1 = require("../Tooltip");
-/**
- * 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.
- */
-function GlobalHeader({ className, mainNavigationButtonProps, applicationsMenuSlot, logoSlot, rightPaneSlot, disableResponsive = false, }) {
-    const responsive = !disableResponsive;
-    // If `disableResponsive` is true, the layout will not switch depending on the viewport width.
-    const classes = (0, recipes_1.globalHeaderSlotRecipe)({ switchLayout: responsive });
-    const handleClickMainNavigationButton = (event) => {
-        mainNavigationButtonProps?.onClick?.(event);
-    };
-    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, css_1.cx)(classes.root, 'mfui-GlobalHeader__root', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.leftPane, 'mfui-GlobalHeader__leftPane'), children: [responsive && mainNavigationButtonProps ? ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { className: (0, css_1.cx)(classes.mainNavigationButton, 'mfui-GlobalHeader__mainNavigationButton'), content: mainNavigationButtonProps['aria-label'], placement: "bottomStart", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": mainNavigationButtonProps['aria-label'], onClick: handleClickMainNavigationButton, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Menu, { "aria-hidden": true }) }) })) : null, applicationsMenuSlot ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.applicationsMenuSlot, 'mfui-GlobalHeader__applicationsMenuSlot'), children: applicationsMenuSlot })) : null, (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.logo, 'mfui-GlobalHeader__logo'), children: logoSlot.base }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.logoNarrowViewport, 'mfui-GlobalHeader__logoNarrowViewport'), children: logoSlot.narrowViewport ?? logoSlot.base })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.rightPane, 'mfui-GlobalHeader__rightPane'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.rightPaneSlot, 'mfui-GlobalHeader__rightPaneSlot'), children: rightPaneSlot.base }), responsive && rightPaneSlot.narrowViewport ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.rightPaneSlotNarrowViewport, 'mfui-GlobalHeader__rightPaneSlotNarrowViewport'), children: rightPaneSlot.narrowViewport })) : null] })] }));
-}

package/dist/cjs/src/GlobalHeader/GlobalHeader.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/GlobalHeader/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GlobalHeader = void 0;
-var GlobalHeader_1 = require("./GlobalHeader");
-Object.defineProperty(exports, "GlobalHeader", { enumerable: true, get: function () { return GlobalHeader_1.GlobalHeader; } });

package/dist/cjs/src/Heading/Heading.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Heading = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const css_1 = require("../../styled-system/css");
-const Typography_1 = require("../Typography");
-const recipes_1 = require("../../styled-system/recipes");
-/**
- * The wrapper component for the Typography component that renders as an HTML heading tag.
- * This component is used to create specific headings in the UI.
- * This component changes its appearance by means of a prop `variant`.
- * It is rendered as an HTML tag matching the names passed to `tag`, and can pass the HTML standard attributes of the
- * specified HTML heading tag as is.
- * h1, h2, h3, h4, h5, h6
- *
- * Also extends the props of heading elements.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
- */
-exports.Heading = (0, react_1.forwardRef)(({ children, tag, variant, className, ...rest }, ref) => {
-    const classes = (0, recipes_1.headingSlotRecipe)();
-    return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { ...rest, ref: ref, as: tag, variant: variant, className: (0, css_1.cx)(classes.root, 'mfui-Heading__root', className), children: children }));
-});

package/dist/cjs/src/Heading/Heading.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/Heading/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Heading = void 0;
-var Heading_1 = require("./Heading");
-Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return Heading_1.Heading; } });

package/dist/cjs/src/HelpMessage/HelpMessage.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HelpMessage = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const css_1 = require("../../styled-system/css");
-const recipes_1 = require("../../styled-system/recipes");
-const Typography_1 = require("../Typography");
-/**
- * The HelpMessage component
- * This component switches the variants of looks depends on the props: messageType.
- *
- * Also extends the props of the `<div>` element.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
- */
-exports.HelpMessage = (0, react_1.forwardRef)(({ messageType = 'neutral', messageAlign = 'left', children, className, ...props }, ref) => {
-    const classes = (0, recipes_1.helpMessageRecipe)({ messageType, messageAlign });
-    const id = (0, react_1.useId)();
-    const ariaLabelledByContentId = `help-message-content-${id}`;
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, role: messageType === 'error' ? 'alert' : undefined, "aria-labelledby": ariaLabelledByContentId, ...props, className: (0, css_1.cx)(classes.root, 'mfui-HelpMessage__root', className), children: [messageType === 'error' ? (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Error, { "aria-hidden": true, className: (0, css_1.cx)(classes.icon, 'mfui-HelpMessage__icon') }) : null, (0, jsx_runtime_1.jsx)(Typography_1.Typography, { id: ariaLabelledByContentId, variant: "helpMessage", className: (0, css_1.cx)(classes.message, 'mfui-HelpMessage__message'), children: children })] }));
-});

package/dist/cjs/src/HelpMessage/HelpMessage.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/HelpMessage/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HelpMessage = void 0;
-var HelpMessage_1 = require("./HelpMessage");
-Object.defineProperty(exports, "HelpMessage", { enumerable: true, get: function () { return HelpMessage_1.HelpMessage; } });

package/dist/cjs/src/IconButton/IconButton.js

@@ -1,58 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = exports.InternalIconButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const css_1 = require("../../styled-system/css");
-const recipes_1 = require("../../styled-system/recipes");
-const FocusIndicator_1 = require("../FocusIndicator");
-/**
- * The general-purpose IconButton component.
- * This component switches the variants of looks depends on the props are `outlined`.
- *
- * Also extends the props of `<button>` element or `<a>` element depending on whether the href prop is provided.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
- */
-/**
- * Base implementation for both public and internal IconButton exports.
- *
- * @param props - IconButton props including internal-only size variant.
- *
- * @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 = (0, recipes_1.iconButtonSlotRecipe)({ outlined, size });
-    const isButton = disabled || href === undefined;
-    const Tag = (0, react_1.useMemo)(() => {
-        // If disabled, always render as a button since the link component doesn't support disabled prop
-        if (isButton) {
-            return 'button';
-        }
-        return customLinkComponent ?? 'a';
-    }, [isButton, customLinkComponent]);
-    const tagProps = (0, react_1.useMemo)(() => {
-        if (isButton) {
-            // props for button component
-            return {
-                ref,
-                className: (0, css_1.cx)(classes.root, 'mfui-IconButton__root', className),
-                disabled,
-                type,
-                ...rest,
-            };
-        }
-        // props for link component
-        return {
-            ref,
-            className: (0, css_1.cx)(classes.root, 'mfui-IconButton__root', className),
-            href,
-            ...rest,
-        };
-    }, [isButton, ref, classes.root, className, href, rest, disabled, type]);
-    return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsx)(Tag, { ...tagProps, children: children }) }));
-}
-exports.InternalIconButton = (0, react_1.forwardRef)(IconButtonBase);
-exports.IconButton = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.InternalIconButton, { ...props, ref: ref })));

package/dist/cjs/src/IconButton/IconButton.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/IconButton/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = void 0;
-var IconButton_1 = require("./IconButton");
-Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return IconButton_1.IconButton; } });

package/dist/cjs/src/KeyValue/KeyValue.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyValue = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const css_1 = require("../../styled-system/css");
-const recipes_1 = require("../../styled-system/recipes");
-/**
- * A component for key-value pairs.
- * Both the key and value areas accept any elements and are rendered with predefined layout styles.
- */
-exports.KeyValue = (0, react_1.forwardRef)(({ size = 'medium', keyItem, valueItem, className, gridTemplateColumns = '1fr 1fr', ...props }, ref) => {
-    const classes = (0, recipes_1.keyValueSlotRecipe)({ size });
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, css_1.cx)(classes.root, 'mfui-KeyValue__root', className), ...props, style: { gridTemplateColumns }, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.keyItem, 'mfui-KeyValue__keyItem'), children: keyItem }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.valueItem, 'mfui-KeyValue__valueItem'), children: valueItem })] }));
-});
-exports.KeyValue.displayName = 'KeyValue';

package/dist/cjs/src/KeyValue/KeyValue.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/KeyValue/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyValue = void 0;
-var KeyValue_1 = require("./KeyValue");
-Object.defineProperty(exports, "KeyValue", { enumerable: true, get: function () { return KeyValue_1.KeyValue; } });

package/dist/cjs/src/MainNavigation/BaseMainNavigation.js

@@ -1,76 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseMainNavigation = BaseMainNavigation;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const react_1 = require("react");
-const css_1 = require("../../styled-system/css");
-const FocusIndicator_1 = require("../FocusIndicator");
-const Typography_1 = require("../Typography");
-const NavigationLink_1 = require("./NavigationLink");
-const recipes_1 = require("../../styled-system/recipes");
-const Tooltip_1 = require("../Tooltip");
-const Popover_1 = require("../Popover");
-/**
- * The component for the main navigation on the normal viewport.
- * This component must only be used in MainNavigation.tsx, do not export it.
- */
-function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible = false, width = 'normal', customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, }) {
-    const [localIsCollapsed, setLocalIsCollapsed] = (0, react_1.useState)(controlledIsCollapsed ?? false);
-    const [openPopoverIndex, setOpenPopoverIndex] = (0, react_1.useState)(null);
-    const isControlled = controlledIsCollapsed !== undefined;
-    const isCollapsed = isControlled ? controlledIsCollapsed : localIsCollapsed;
-    const navId = (0, react_1.useId)();
-    const handleClickToggleButton = () => {
-        const newState = !isCollapsed;
-        if (!isControlled) {
-            setLocalIsCollapsed(newState);
-        }
-        onCollapsedChange?.(newState);
-    };
-    const classes = (0, recipes_1.baseMainNavigationSlotRecipe)({ width, disableResponsive });
-    const InternalLinkTag = customLinkComponent ?? 'a';
-    const hasCurrentNavigationInChildren = (children) => children?.some((child) => child.isCurrent);
-    const toggleButtonLabel = isCollapsed ? 'ナビゲーションを拡げる' : 'ナビゲーションを折りたたむ';
-    return ((0, jsx_runtime_1.jsxs)("div", { "data-mfui-collapsed": isCollapsed, className: (0, css_1.cx)(classes.root, 'mfui-BaseMainNavigation__root', className), children: [featureShortcut ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.featureShortcut, 'mfui-BaseMainNavigation__featureShortcut'), children: (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsx)(NavigationLink_1.NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: (0, css_1.cx)(classes.featureShortcutAnchor, 'mfui-BaseMainNavigation__featureShortcutAnchor'), children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, (0, jsx_runtime_1.jsx)("nav", { id: navId, className: (0, css_1.cx)(classes.nav, 'mfui-BaseMainNavigation__nav'), children: (0, jsx_runtime_1.jsx)("ul", { className: (0, css_1.cx)(classes.list, 'mfui-BaseMainNavigation__list'), children: navigationItems.map((navigation, index) => ((0, jsx_runtime_1.jsx)("li", { className: (0, css_1.cx)(classes.listItem, 'mfui-BaseMainNavigation__listItem'), "data-mfui-popover-portal-target-id": `nested-popover-portal-target-${String(index)}`, children: navigation.children ? (isCollapsed ? ((0, jsx_runtime_1.jsx)(CollapsedNestedNavigationItem, { navigation: navigation, classes: classes, InternalLinkTag: InternalLinkTag, hasCurrentChildren: hasCurrentNavigationInChildren(navigation.children) || false, popoverPortalTargetId: `nested-popover-portal-target-${String(index)}`, isOpen: openPopoverIndex === index, onOpenChange: (isOpen) => {
-                                if (isOpen) {
-                                    setOpenPopoverIndex(index);
-                                }
-                                else {
-                                    setOpenPopoverIndex(null);
-                                }
-                            } })) : ((0, jsx_runtime_1.jsxs)("details", { open: hasCurrentNavigationInChildren(navigation.children), className: (0, css_1.cx)(classes.parentDetails, 'mfui-BaseMainNavigation__parentDetails'), children: [(0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsxs)("summary", { className: (0, css_1.cx)(classes.parentSummary, 'mfui-BaseMainNavigation__parentSummary'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.parentSummaryIcon, 'mfui-BaseMainNavigation__parentSummaryIcon'), children: navigation.icon }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: navigation.label }), (0, jsx_runtime_1.jsx)(mfui_icons_react_1.DisclosureBasicCollapsed, { className: "mfui-BaseMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), (0, jsx_runtime_1.jsx)(mfui_icons_react_1.DisclosureBasicExpanded, { className: "mfui-BaseMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), (0, jsx_runtime_1.jsx)("ul", { className: (0, css_1.cx)(classes.childrenList, 'mfui-BaseMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => ((0, jsx_runtime_1.jsx)("li", { className: (0, css_1.cx)(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)(NavigationLink_1.NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: (0, css_1.cx)(classes.childrenListItemAnchor, 'mfui-BaseMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] }))) : ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { className: (0, css_1.cx)(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: !isCollapsed, placement: "right", children: (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)(NavigationLink_1.NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: (0, css_1.cx)(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-label": isCollapsed ? navigation.label : undefined, "aria-current": navigation.isCurrent ? 'page' : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }), isCollapsed ? null : (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? ((0, jsx_runtime_1.jsx)(mfui_icons_react_1.Lock, { className: (0, css_1.cx)(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, !isCollapsed && navigation.statusSlot && navigation.locked !== true
-                                                ? navigation.statusSlot
-                                                : null] }) }) }) })) }, index))) }) }), enableCollapsible ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.footer, 'mfui-BaseMainNavigation__footer'), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: toggleButtonLabel, placement: "right", children: (0, jsx_runtime_1.jsx)(ToggleButton, { className: (0, css_1.cx)(classes.toggleButton, 'mfui-BaseMainNavigation__toggleButton'), iconClassName: (0, css_1.cx)(classes.toggleButtonIcon, 'mfui-BaseMainNavigation__toggleButtonIcon'), isCollapsed: isCollapsed, "aria-label": toggleButtonLabel, targetId: navId, handleClickToggleButton: handleClickToggleButton }) }) })) : null] }));
-}
-/**
- * The component for displaying nested navigation in collapsed state with popover.
- * This component must only be used in BaseMainNavigation.tsx, do not export it.
- */
-function CollapsedNestedNavigationItem({ navigation, classes, InternalLinkTag, hasCurrentChildren, popoverPortalTargetId, isOpen, onOpenChange, }) {
-    const popoverContentRef = (0, react_1.useRef)(null);
-    const handleKeyDown = (event) => {
-        if (event.key === 'Enter' || event.key === ' ') {
-            // Open popover when Enter or Space key is pressed
-            event.preventDefault();
-            event.stopPropagation();
-            onOpenChange(!isOpen);
-        }
-    };
-    const handleClick = () => {
-        onOpenChange(!isOpen);
-    };
-    return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { enableAutoFocusOnPopover: false, enableAutoFocusOnTrigger: false, open: isOpen, targetDOMNode: document.querySelector(`[data-mfui-popover-portal-target-id="${popoverPortalTargetId}"]`), allowedPlacements: ['right-start', 'right', 'right-end'], contentProps: {
-            tabIndex: -1,
-        }, renderTrigger: ({ setTriggerRef }) => ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { className: (0, css_1.cx)(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: isOpen, placement: "right", children: (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)("button", { ref: setTriggerRef, type: "button", className: (0, css_1.cx)(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "data-mfui-current": hasCurrentChildren ? 'page' : undefined, "aria-current": hasCurrentChildren ? true : undefined, "aria-label": navigation.label, onClick: handleClick, onKeyDown: handleKeyDown, children: (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }) }) }) }) }) })), renderContent: () => ((0, jsx_runtime_1.jsx)("div", { ref: popoverContentRef, className: (0, css_1.cx)(classes.popoverChildrenList, 'mfui-BaseMainNavigation__popoverChildrenList'), tabIndex: -1, children: navigation.children.map((child, childIndex) => ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)(NavigationLink_1.NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: (0, css_1.cx)(classes.childrenListItemAnchor, 'mfui-BaseMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: () => {
-                            onOpenChange(false);
-                        }, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })), onOpenStateChanged: onOpenChange }));
-}
-/**
- * The component for the toggle button.
- * This component must only be used in MainNavigation.tsx, do not export it.
- */
-function ToggleButton({ className, iconClassName, isCollapsed, targetId, handleClickToggleButton, ...rest }) {
-    return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsx)("button", { "aria-expanded": !isCollapsed, "aria-controls": targetId, type: "button", className: (0, css_1.cx)(className, 'mfui-BaseMainNavigation__toggleButton'), onClick: handleClickToggleButton, ...rest, children: isCollapsed ? ((0, jsx_runtime_1.jsx)(mfui_icons_react_1.PaneExpansionToRight, { "aria-hidden": true, className: (0, css_1.cx)(iconClassName, 'mfui-BaseMainNavigation__toggleButtonIcon') })) : ((0, jsx_runtime_1.jsx)(mfui_icons_react_1.PaneExpansionToLeft, { "aria-hidden": true, className: (0, css_1.cx)(iconClassName, 'mfui-BaseMainNavigation__toggleButtonIcon') })) }) }));
-}

package/dist/cjs/src/MainNavigation/MainNavigation.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MainNavigation = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const BaseMainNavigation_1 = require("./BaseMainNavigation");
-const NarrowViewportMainNavigation_1 = require("./NarrowViewportMainNavigation");
-/**
- * The item component for the navigation.
- * This component should be used when the viewport is not narrow.
- *
- * When the viewport is narrow, the navigation will be displayed as a drawer.
- * When the viewport is not narrow, the navigation will be displayed as a sidebar.
- *
- * **⚠️ EXPERIMENTAL FEATURE**: The functionality, *nested navigation items appear in a popover on click when collapsed*, is experimental and may be changed or removed in the future.
- */
-exports.MainNavigation = (0, react_1.forwardRef)(({ className, featureShortcut, navigationItems, disableResponsive = false, width = 'normal', customLinkComponent, enableCollapsible, isCollapsed, onCollapsedChange, }, ref) => {
-    const commonProps = {
-        className,
-        featureShortcut,
-        navigationItems,
-        width,
-        customLinkComponent,
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BaseMainNavigation_1.BaseMainNavigation, { ...commonProps, enableCollapsible: enableCollapsible, disableResponsive: disableResponsive, isCollapsed: isCollapsed, onCollapsedChange: onCollapsedChange }), !disableResponsive && (0, jsx_runtime_1.jsx)(NarrowViewportMainNavigation_1.NarrowViewportMainNavigation, { ...commonProps, ref: ref })] }));
-});