@moneyforward/mfui-components 2.48.1

package/dist/esm/src/FileDropZone/utils/fileHelpers.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Extract files from a file input change event
+ *
+ * @param event - The file input change event
+ *
+ * @returns The files from the event
+ */
+export declare function getFilesFromEvent(event: React.ChangeEvent<HTMLInputElement>): File[];
+/**
+ * Format file size in human-readable format
+ *
+ * @param bytes - The size in bytes
+ *
+ * @returns The formatted file size
+ */
+export declare function formatFileSize(bytes: number): string;
+/**
+ * Get file extension from filename
+ *
+ * @param filename - The name of the file
+ *
+ * @returns The file extension including the dot
+ */
+export declare function getFileExtension(filename: string): string;
+/**
+ * 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
+ */
+export declare function matchesMimeType(file: File, pattern: string): boolean;
+/**
+ * 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
+ */
+export declare function hasExtension(file: File, extension: string): boolean;
+/**
+ * Get total size of multiple files
+ *
+ * @param files - The files to get the total size of
+ *
+ * @returns The total size of the files
+ */
+export declare function getTotalFileSize(files: File[]): number;
+/**
+ * Simple validation result type
+ *
+ * @property isValid - Whether the file is valid
+ *
+ * @property error - The error message
+ */
+export type FileValidationResult = {
+    isValid: boolean;
+    error?: string;
+};
+/**
+ * Helper to create validation results
+ *
+ * @param isValid - Whether the file is valid
+ *
+ * @param error - The error message
+ *
+ * @returns The validation result
+ */
+export declare function createValidationResult(isValid: boolean, error?: string): FileValidationResult;
+/**
+ * Common file type groups
+ *
+ * @property IMAGES - The image file types
+ *
+ * @property DOCUMENTS - The document file types
+ *
+ * @property ARCHIVES - The archive file types
+ */
+export declare const FILE_TYPES: {
+    readonly IMAGES: readonly ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"];
+    readonly DOCUMENTS: readonly ["application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "text/plain"];
+    readonly ARCHIVES: readonly ["application/zip", "application/x-rar-compressed", "application/x-tar"];
+};

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

@@ -0,0 +1,116 @@
+/**
+ * Extract files from a file input change event
+ *
+ * @param event - The file input change event
+ *
+ * @returns The files from the event
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export const 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/esm/src/FilterSelectBox/FilterSelectBox.d.ts

@@ -0,0 +1,7 @@
+import { type FilterSelectBoxProps } from './FilterSelectBox.types';
+/**
+ * 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.
+ */
+export declare function FilterSelectBox({ label, onOpenStateChanged, className, enableClearButton, clearButtonProps, ...props }: FilterSelectBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/FilterSelectBox/FilterSelectBox.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectBox } from '../SelectBox';
+import { filterSelectBoxSlotRecipe } from '../../styled-system/recipes';
+import { Typography } from '../Typography';
+import { cx } from '../../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.
+ */
+export function FilterSelectBox({ label, onOpenStateChanged, className, enableClearButton, clearButtonProps, ...props }) {
+    const classes = filterSelectBoxSlotRecipe();
+    return (_jsx(SelectBox, { ...props, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, triggerProps: {
+            className: cx(classes.trigger, 'mfui-FilterSelectBox__trigger', className),
+        }, renderDisplayValue: (selectedOption) => selectedOption ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-select-box-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-select-display-values", children: selectedOption.label })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-select-box-label", children: label }) })), onOpenStateChanged: onOpenStateChanged }));
+}

package/dist/esm/src/FilterSelectBox/FilterSelectBox.types.d.ts

@@ -0,0 +1,17 @@
+import { type SelectBoxProps } from '../SelectBox';
+export type FilterSelectBoxProps = {
+    /**
+     * The label to display for the filter
+     */
+    label: string;
+    /**
+     * The class name to apply to the component
+     */
+    className?: string;
+    /**
+     * Callback fired when the open state of the FilterSelectBox changes.
+     *
+     * @param open - The new open state of the FilterSelectBox.
+     */
+    onOpenStateChanged?: (open: boolean) => void;
+} & Omit<SelectBoxProps, 'renderDisplayValue' | 'placeholder' | 'invalid' | 'triggerProps'>;

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/FilterSelectBox/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterSelectBox } from './FilterSelectBox';
+export type { FilterSelectBoxProps } from './FilterSelectBox.types';

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

@@ -0,0 +1 @@
+export { FilterSelectBox } from './FilterSelectBox';

package/dist/esm/src/FilterTrigger/FilterTrigger.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+export declare const FilterTrigger: import("react").ForwardRefExoticComponent<{
+    label: string;
+    value?: string;
+    inputProps?: Omit<import("react").ComponentPropsWithoutRef<"input">, "type">;
+    className?: string;
+    enableClearButton?: boolean;
+    clearButtonProps?: {
+        "aria-label"?: string;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/src/FilterTrigger/FilterTrigger.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown as DropdownIcon } from '@moneyforward/mfui-icons-react';
+import { forwardRef } from 'react';
+import { ClearButton } from '../shared/ClearButton';
+import { FocusIndicator } from '../FocusIndicator';
+import { Typography } from '../Typography';
+import { cx } from '../../styled-system/css';
+import { filterTriggerSlotRecipe } from '../../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.
+ */
+export const FilterTrigger = forwardRef(({ label, value, inputProps, className, enableClearButton = false, clearButtonProps, ...props }, ref) => {
+    const classes = filterTriggerSlotRecipe();
+    const displayContent = value ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-trigger-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-trigger-value", children: value })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-trigger-label", children: label }) }));
+    return (_jsxs("div", { className: cx(classes.wrapper, 'mfui-FilterTrigger__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: ref, type: "button", className: cx(classes.trigger, 'mfui-FilterTrigger__trigger', className), "data-selected": !!value, "data-mfui-has-clear-button": enableClearButton ? !!value : false, ...props, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterTrigger__content'), "data-mfui-content": "filter-trigger-display-value", children: displayContent }), _jsx("span", { className: cx(classes.dropdownIcon, 'mfui-FilterTrigger__dropdownIcon'), children: _jsx(DropdownIcon, {}) })] }) }), _jsx("input", { type: "hidden", ...inputProps, value: value }), enableClearButton && value ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterTrigger__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-trigger-clear-button", onClick: clearButtonProps?.onClick }) })) : null] }));
+});
+FilterTrigger.displayName = 'FilterTrigger';

package/dist/esm/src/FilterTrigger/FilterTrigger.types.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type FilterTriggerProps = {
+    /**
+     * The label to display for the filter.
+     */
+    label: string;
+    /**
+     * The selected value to display. If not provided, only the label will be shown.
+     */
+    value?: string;
+    /**
+     * Props for the hidden input element.
+     */
+    inputProps?: Omit<ComponentPropsWithoutRef<'input'>, 'type'>;
+    /**
+     * Additional class name for the trigger button.
+     */
+    className?: string;
+    /**
+     * Whether the clear button should be displayed.
+     *
+     * @default false
+     */
+    enableClearButton?: boolean;
+    /**
+     * Props for the clear button.
+     * If this prop is not passed, the clear button will not be displayed.
+     *
+     * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
+     *
+     * @property onClick - The callback function when the clear button is clicked.
+     */
+    clearButtonProps?: {
+        'aria-label'?: string;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+} & Omit<ComponentPropsWithoutRef<'button'>, 'children'>;

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/FilterTrigger/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterTrigger } from './FilterTrigger';
+export type { FilterTriggerProps } from './FilterTrigger.types';

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

@@ -0,0 +1 @@
+export { FilterTrigger } from './FilterTrigger';

package/dist/esm/src/FocusIndicator/FocusIndicator.d.ts

@@ -0,0 +1,27 @@
+import { type FocusIndicatorProps } from './FocusIndicator.types';
+/**
+ * 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>
+ * ```
+ */
+export declare const FocusIndicator: ({ position, hideWhiteBorder, disableNestedFocus, children, }: FocusIndicatorProps) => import("react").ReactElement<import("react").HTMLProps<HTMLElement>, string | import("react").JSXElementConstructor<any>>;

package/dist/esm/src/FocusIndicator/FocusIndicator.js

@@ -0,0 +1,37 @@
+import { Children, cloneElement } from 'react';
+import { cx } from '../../styled-system/css';
+import { focusIndicatorSlotRecipe } from '../../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>
+ * ```
+ */
+export const FocusIndicator = ({ position = 'outside', hideWhiteBorder = false, disableNestedFocus = false, children, }) => {
+    const classes = focusIndicatorSlotRecipe({ position, hideWhiteBorder, disableNestedFocus });
+    const child = Children.only(children);
+    const childProps = child.props;
+    return cloneElement(children, {
+        ...childProps,
+        className: cx(childProps.className, classes.root, 'mfui-FocusIndicator__root'),
+    });
+};

package/dist/esm/src/FocusIndicator/FocusIndicator.types.d.ts

@@ -0,0 +1,36 @@
+import { type HTMLProps, type ReactElement } from 'react';
+import { type FocusIndicatorSlotRecipeVariant } from '../../styled-system/recipes';
+type FocusableChildProps = HTMLProps<HTMLElement>;
+export type FocusIndicatorProps = {
+    /**
+     * The position of the FocusIndicator.
+     * This prop changes the focus indicator style between 'outside' and 'inside'.
+     *
+     * When the focusable element is adjacent to other elements, set position to 'inside'
+     * to prevent the focus indicator from overlapping with neighboring elements.
+     *
+     * @default 'outside'
+     */
+    position?: FocusIndicatorSlotRecipeVariant['position'];
+    /**
+     * Hide the white border from the focus outline.
+     *
+     * When true, uses a seamless outline without white border, suitable for small elements like checkboxes.
+     * When false (default), uses standard outline with white border for better contrast.
+     *
+     * @default false
+     */
+    hideWhiteBorder?: boolean;
+    /**
+     * Disables the nested focus indicator.
+     *
+     * @default false
+     */
+    disableNestedFocus?: boolean;
+    /**
+     * The children to be wrapped by the FocusIndicator.
+     * Must be able to receive `onFocus` and `onBlur` props.
+     */
+    children: ReactElement<FocusableChildProps>;
+};
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/FocusIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { FocusIndicator } from './FocusIndicator';
+export type { FocusIndicatorProps } from './FocusIndicator.types';

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

@@ -0,0 +1 @@
+export { FocusIndicator } from './FocusIndicator';

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

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

package/dist/esm/src/GlobalHeader/GlobalHeader.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu } from '@moneyforward/mfui-icons-react';
+import { cx } from '../../styled-system/css';
+import { globalHeaderSlotRecipe } from '../../styled-system/recipes';
+import { IconButton } from '../IconButton';
+import { Tooltip } from '../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.
+ */
+export 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 = 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] })] }));
+}

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

@@ -0,0 +1,64 @@
+import { type ReactNode } from 'react';
+import { type IconButtonProps } from '../IconButton';
+import { type ResponsiveSlot } from '../types/responsive';
+type MainNavigationButtonProps = {
+    /**
+     * The handler to be called when the main navigation button is clicked.
+     */
+    onClick: IconButtonProps['onClick'];
+    /**
+     * The accessible label to specify how you want the main navigation 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 mainNavigationButtonProps={{ 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.
+     */
+    className?: string;
+    /**
+     * The properties of the main navigation button.
+     *
+     * If this value is provided, the main navigation button is displayed on the left side of the global header.
+     */
+    mainNavigationButtonProps?: MainNavigationButtonProps;
+    /**
+     * Elements to be displayed on the applications menu slot area where the left side of the global header.
+     * This slot is displayed when the viewport width is the breakpoint or larger.
+     *
+     * This element must be an applications dropdown menu as defined in Figma.
+     */
+    applicationsMenuSlot?: ReactNode;
+    /**
+     * Elements to be displayed on the logo area where the left side of the global header.
+     *
+     * If the viewport width is smaller than the breakpoint, the narrowViewport value is displayed, otherwise the base value is displayed.
+     */
+    logoSlot: ResponsiveSlot;
+    /**
+     * Elements to be displayed on the right side of the global header.
+     *
+     * If the viewport width is smaller than the breakpoint, the narrowViewport value is displayed, otherwise the base value is displayed.
+     */
+    rightPaneSlot: ResponsiveSlot;
+    /**
+     * Whether to disable the responsive behavior.
+     *
+     * If this property is set to `true`, the main navigation button and the
+     * narrow viewport layout will not be displayed.
+     *
+     * @default false
+     */
+    disableResponsive?: boolean;
+};
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { GlobalHeader } from './GlobalHeader';
+export type { GlobalHeaderProps } from './GlobalHeader.types';

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

@@ -0,0 +1 @@
+export { GlobalHeader } from './GlobalHeader';

package/dist/esm/src/Heading/Heading.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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
+ */
+export declare const Heading: import("react").ForwardRefExoticComponent<{
+    variant: "pageHeading1" | "pageHeading2" | "sectionHeading1" | "sectionHeading2" | "contentHeading";
+    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/esm/src/Heading/Heading.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cx } from '../../styled-system/css';
+import { Typography } from '../Typography';
+import { headingSlotRecipe } from '../../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
+ */
+export const Heading = forwardRef(({ children, tag, variant, className, ...rest }, ref) => {
+    const classes = headingSlotRecipe();
+    return (_jsx(Typography, { ...rest, ref: ref, as: tag, variant: variant, className: cx(classes.root, 'mfui-Heading__root', className), children: children }));
+});

package/dist/esm/src/Heading/Heading.types.d.ts

@@ -0,0 +1,11 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type HeadingProps = {
+    /**
+     * Specify the variant of heading from pageHeading1, pageHeading2, sectionHeading1, sectionHeading2 and contentHeading.
+     */
+    variant: 'pageHeading1' | 'pageHeading2' | 'sectionHeading1' | 'sectionHeading2' | 'contentHeading';
+    /**
+     * Specify the tag of heading component.
+     */
+    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+} & ComponentPropsWithoutRef<'h1'>;

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/Heading/index.d.ts

@@ -0,0 +1,2 @@
+export { Heading } from './Heading';
+export type { HeadingProps } from './Heading.types';

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

@@ -0,0 +1 @@
+export { Heading } from './Heading';

package/dist/esm/src/HelpMessage/HelpMessage.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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
+ */
+export declare const HelpMessage: import("react").ForwardRefExoticComponent<{
+    messageType?: import("../../styled-system/recipes").HelpMessageRecipeVariant["messageType"];
+    messageAlign?: "left" | "center";
+    children?: import("../Typography").TypographyProps["children"];
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;