@moneyforward/mfui-components 3.14.1 → 3.16.0

package/dist/src/SubNavigation/SubNavigation.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { DisclosureBasicCollapsed, Lock } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { subNavigationSlotRecipe } from '../../styled-system/recipes';
@@ -7,10 +7,10 @@ import { Typography } from '../Typography';
 /**
  * This component is for the navigation links under the main navigation.
  */
-export function SubNavigation({ orientation = 'vertical', navigationItems, customLinkComponent, className, }) {
+export function SubNavigation({ orientation = 'vertical', navigationItems, customLinkComponent, renderNavigationLabel, headerSlot, className, }) {
     const hasLabelIcon = navigationItems.some(({ labelIcon }) => !!labelIcon);
     const classes = subNavigationSlotRecipe({ orientation, hasLabelIcon });
-    return (_jsx("nav", { className: cx(classes.root, 'mfui-SubNavigation__root', className), children: _jsx("ul", { className: cx(classes.list, 'mfui-SubNavigation__list'), children: navigationItems.map((navigationItem, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-SubNavigation__listItem'), children: renderNavigationItem(navigationItem, customLinkComponent, classes, 0) }, index))) }) }));
+    return (_jsxs("nav", { className: cx(classes.root, 'mfui-SubNavigation__root', className), children: [headerSlot ? (_jsx("div", { className: cx(classes.subNavigationHeader, 'mfui-SubNavigation__subNavigationHeader'), children: headerSlot })) : null, _jsx("ul", { className: cx(classes.list, 'mfui-SubNavigation__list'), children: navigationItems.map((navigationItem, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-SubNavigation__listItem'), children: renderNavigationItem(navigationItem, customLinkComponent, classes, 0, renderNavigationLabel) }, index))) })] }));
 }
 /**
  * Render a navigation item based on the following conditions:
@@ -28,25 +28,27 @@ export function SubNavigation({ orientation = 'vertical', navigationItems, custo
  *
  * @param nestLevel - The nest level of the navigation item.
  *
+ * @param renderNavigationLabel - Custom render function for each navigation item's label.
+ *
  * @returns The rendered navigation item.
  */
-const renderNavigationItem = (navigationItem, customLinkComponent, classes, nestLevel) => {
+const renderNavigationItem = (navigationItem, customLinkComponent, classes, nestLevel, renderNavigationLabel) => {
     const { label, href, labelIcon, statusSlot, locked, lockIconProps, children } = navigationItem;
     if (children === undefined) {
-        return (_jsx(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes }));
+        return (_jsx(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes, renderNavigationLabel: renderNavigationLabel }));
     }
     if (href) {
         // The the parent item will be rendered as a link with separated disclosure icon button.
-        return (_jsxs(_Fragment, { children: [_jsx(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes }), _jsx(NestedNavigationList, { summarySlot: _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-label": label }) }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1 })] }));
+        return (_jsxs(_Fragment, { children: [_jsx(NavigationLink, { navigationItem: navigationItem, customLinkComponent: customLinkComponent, classes: classes, renderNavigationLabel: renderNavigationLabel }), _jsx(NestedNavigationList, { summarySlot: _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-label": label }) }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1, renderNavigationLabel: renderNavigationLabel })] }));
     }
     // The the parent item will be rendered as a disclosure button with an icon.
-    return (_jsx(NestedNavigationList, { summarySlot: _jsxs(_Fragment, { children: [_jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }), _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-label": "" }) })] }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1 }));
+    return (_jsx(NestedNavigationList, { summarySlot: _jsxs(_Fragment, { children: [_jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes, renderNavigationLabel }), _jsx("div", { "data-mfui-content": "sub-navigation-disclosure-icon", className: cx(classes.disclosureIcon, 'mfui-SubNavigation__disclosureIcon'), children: _jsx(DisclosureBasicCollapsed, { "aria-label": "" }) })] }), nestedNavigationItems: children, customLinkComponent: customLinkComponent, classes: classes, nestLevel: nestLevel + 1, renderNavigationLabel: renderNavigationLabel }));
 };
 /**
  * This is a group of a text label, an optional icon, and a status.
  * This is used for all navigation links and parent items for disclosure buttons in SubNavigation.
  */
-function NavigationLabelGroup({ label, labelIcon, locked, lockIconProps, statusSlot, classes, }) {
+function NavigationLabelGroup({ label, labelIcon, locked, lockIconProps, statusSlot, classes, renderNavigationLabel, }) {
     // If locked=true, display <Lock /> icon in preference to any other status of the statusSlot option.
     const renderStatus = () => {
         if (locked) {
@@ -57,31 +59,31 @@ function NavigationLabelGroup({ label, labelIcon, locked, lockIconProps, statusS
         }
         return null;
     };
-    return (_jsxs(_Fragment, { children: [labelIcon ? _jsx("div", { className: cx(classes.labelIcon, 'mfui-SubNavigation__labelIcon'), children: labelIcon }) : null, _jsx(Typography, { variant: "strongControlLabel", className: cx(classes.label, 'mfui-SubNavigation__label'), children: label }), renderStatus()] }));
+    return (_jsxs(_Fragment, { children: [labelIcon ? _jsx("div", { className: cx(classes.labelIcon, 'mfui-SubNavigation__labelIcon'), children: labelIcon }) : null, renderNavigationLabel ? (renderNavigationLabel(label)) : (_jsx(Typography, { variant: "strongControlLabel", className: cx(classes.label, 'mfui-SubNavigation__label'), children: label })), renderStatus()] }));
 }
 /**
  * This is a link that has NavigationLabelGroup.
  * This is used for all navigation links in SubNavigation.
  */
-function NavigationLink({ navigationItem, customLinkComponent, classes, }) {
+function NavigationLink({ navigationItem, customLinkComponent, classes, renderNavigationLabel, }) {
     const { label, href, isCurrent, isExternal, labelIcon, statusSlot, locked, lockIconProps } = navigationItem;
     if (navigationItem.children === undefined && navigationItem.onClick) {
         const { onClick } = navigationItem;
         return (_jsx(FocusIndicator, { children: _jsx("button", { type: "button", className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, onClick: () => {
                     onClick(navigationItem.href);
-                }, children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }) }) }));
+                }, children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes, renderNavigationLabel }) }) }));
     }
     if (customLinkComponent && !isExternal) {
         const Tag = customLinkComponent;
-        return (_jsx(FocusIndicator, { children: _jsx(Tag, { href: href, className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }) }) }));
+        return (_jsx(FocusIndicator, { children: _jsx(Tag, { href: href, className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes, renderNavigationLabel }) }) }));
     }
-    return (_jsx(FocusIndicator, { children: _jsx("a", { href: href, target: isExternal ? '_blank' : undefined, className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, rel: "noreferrer", children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }) }) }));
+    return (_jsx(FocusIndicator, { children: _jsx("a", { href: href, target: isExternal ? '_blank' : undefined, className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, rel: "noreferrer", children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes, renderNavigationLabel }) }) }));
 }
 /**
  * This is a details element that contains a list of nested navigation links.
  */
-function NestedNavigationList({ summarySlot, nestedNavigationItems, customLinkComponent, classes, nestLevel, }) {
+function NestedNavigationList({ summarySlot, nestedNavigationItems, customLinkComponent, classes, nestLevel, renderNavigationLabel, }) {
     // Check whether all descendants have isCurrent=true by calling itself recursively.
     const isCurrentPathInChildren = (children) => children?.some(({ isCurrent, children }) => isCurrent || (children && isCurrentPathInChildren(children))) || false;
-    return (_jsxs("details", { open: isCurrentPathInChildren(nestedNavigationItems), className: cx(classes.details, 'mfui-SubNavigation__details'), children: [_jsx(FocusIndicator, { children: _jsx("summary", { className: cx(classes.summary, 'mfui-SubNavigation__summary'), children: summarySlot }) }), _jsx("ul", { className: cx(classes.list, 'mfui-SubNavigation__list'), children: nestedNavigationItems.map((nestedNavigationItem, index) => (_jsx("li", { className: cx(classes.nestedListItem, 'mfui-SubNavigation__nestedListItem'), "data-mfui-nest-level": nestLevel, children: nestedNavigationItem.children === undefined ? (_jsx(NavigationLink, { navigationItem: nestedNavigationItem, customLinkComponent: customLinkComponent, classes: classes })) : (renderNavigationItem(nestedNavigationItem, customLinkComponent, classes, nestLevel + 1)) }, index))) })] }));
+    return (_jsxs("details", { open: isCurrentPathInChildren(nestedNavigationItems), className: cx(classes.details, 'mfui-SubNavigation__details'), children: [_jsx(FocusIndicator, { children: _jsx("summary", { className: cx(classes.summary, 'mfui-SubNavigation__summary'), children: summarySlot }) }), _jsx("ul", { className: cx(classes.list, 'mfui-SubNavigation__list'), children: nestedNavigationItems.map((nestedNavigationItem, index) => (_jsx("li", { className: cx(classes.nestedListItem, 'mfui-SubNavigation__nestedListItem'), "data-mfui-nest-level": nestLevel, children: nestedNavigationItem.children === undefined ? (_jsx(NavigationLink, { navigationItem: nestedNavigationItem, customLinkComponent: customLinkComponent, classes: classes, renderNavigationLabel: renderNavigationLabel })) : (renderNavigationItem(nestedNavigationItem, customLinkComponent, classes, nestLevel + 1, renderNavigationLabel)) }, index))) })] }));
 }

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

@@ -1,4 +1,5 @@
 import { type ReactNode, type ElementType, type ComponentPropsWithoutRef } from 'react';
+export type SubNavigationRenderLabelFunction = (label: string) => ReactNode;
 export type SubNavigationProps = VerticalSubNavigationProps | HorizontalSubNavigationProps;
 type VerticalSubNavigationProps = BaseSubNavigationProps & {
     /**
@@ -47,6 +48,63 @@ type BaseSubNavigationProps = {
      * e.g. next/link
      */
     customLinkComponent?: ElementType;
+    /**
+     * Custom render function for each navigation item's label.
+     * Receives the item's raw `label` string and returns a ReactNode rendered inside
+     * the default `<Typography variant="strongControlLabel">` wrapper.
+     * When omitted, the label string is rendered directly (default behavior).
+     *
+     * Use this to truncate long labels or otherwise customize how labels are displayed
+     * without losing the built-in semantic markup.
+     *
+     * To show a tooltip on both hover and focus, wrap the entire link with a `Tooltip`
+     * via `customLinkComponent` instead — placing a `Tooltip` inside `renderNavigationLabel`
+     * only works for hover because the tooltip trigger ends up inside the focusable `<a>`,
+     * and focus events do not propagate inward to child elements.
+     *
+     * @param label - The label string of the navigation item.
+     *
+     * @returns ReactNode - Custom content rendered inside the label wrapper.
+     *
+     * @example
+     * ```tsx
+     * // Truncate labels that exceed 2 lines
+     * <SubNavigation
+     *   navigationItems={items}
+     *   renderNavigationLabel={(label) => (
+     *     <span
+     *       style={{
+     *         display: '-webkit-box',
+     *         WebkitLineClamp: 2,
+     *         WebkitBoxOrient: 'vertical',
+     *         overflow: 'hidden',
+     *       }}
+     *     >
+     *       {label}
+     *     </span>
+     *   )}
+     * />
+     * ```
+     */
+    renderNavigationLabel?: SubNavigationRenderLabelFunction;
+    /**
+     * Content displayed above the navigation list, rendered inside a padded wrapper.
+     * Use this to add a feature shortcut, promotional content, or other header-level
+     * UI at the top of the navigation.
+     *
+     * @example
+     * ```tsx
+     * <SubNavigation
+     *   navigationItems={items}
+     *   headerSlot={
+     *     <Button priority="primary" href="/upgrade">
+     *       Upgrade plan
+     *     </Button>
+     *   }
+     * />
+     * ```
+     */
+    headerSlot?: ReactNode;
     /**
      * For overriding styles if you need.
      */

package/dist/src/SubNavigation/index.d.ts

@@ -1,2 +1,2 @@
 export { SubNavigation } from './SubNavigation';
-export type { SubNavigationProps } from './SubNavigation.types';
+export type { SubNavigationProps, SubNavigationRenderLabelFunction } from './SubNavigation.types';

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

@@ -54,7 +54,23 @@ export type TagProps = {
      */
     onClick?: undefined;
     /**
-     * This prop is not available when "onClick" is not provided.
+     * Optional flag to disable the close button. This option is only available when "onClose" is provided.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The handler to close the tag. When this prop is provided, the close button will be shown.
+     * Required in this variant to allow the disabled prop.
+     */
+    onClose: (event: MouseEvent<HTMLButtonElement>) => void;
+} | {
+    /**
+     * Optional click event handler. If provided, the Tag will be rendered as a button element.
+     */
+    onClick?: undefined;
+    /**
+     * This prop is not available when neither "onClick" nor "onClose" is provided.
      *
      * @default false
      */

package/dist/styled-system/recipes/form-footer-slot-recipe.d.ts

@@ -3,7 +3,7 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface FormFooterSlotRecipeVariant {
-  position: "stacking" | "fixed"
+  position: "stacking" | "fixed" | "sticky"
 sectionPosition: "center" | "fill"
 }
 

package/dist/styled-system/recipes/form-footer-slot-recipe.js

@@ -38,7 +38,8 @@ export const formFooterSlotRecipe = /* @__PURE__ */ Object.assign(formFooterSlot
     variantMap: {
         "position": [
             "stacking",
-            "fixed"
+            "fixed",
+            "sticky"
         ],
         "sectionPosition": [
             "center",

package/dist/styled-system/recipes/multiple-select-box-slot-recipe.d.ts

@@ -10,7 +10,7 @@ type MultipleSelectBoxSlotRecipeVariantMap = {
   [key in keyof MultipleSelectBoxSlotRecipeVariant]: Array<MultipleSelectBoxSlotRecipeVariant[key]>
 }
 
-type MultipleSelectBoxSlotRecipeSlot = "popover" | "menuHeader" | "optionPanel" | "listBox" | "listItem" | "skeletonItem" | "emptyMessage" | "menuFooter" | "scrollWrapper" | "infiniteScrollError" | "infiniteScrollErrorMessage" | "infiniteScrollErrorButton" | "infiniteScrollErrorIcon" | "infiniteScrollLoading"
+type MultipleSelectBoxSlotRecipeSlot = "popover" | "menuHeader" | "optionPanel" | "listBox" | "listItem" | "skeletonItem" | "emptyMessage" | "menuFooter" | "scrollWrapper" | "infiniteScrollError" | "infiniteScrollErrorMessage" | "infiniteScrollErrorButton" | "infiniteScrollErrorIcon" | "infiniteScrollLoading" | "createOptionArea" | "createOptionButton" | "createOptionErrorMessage"
 
 export type MultipleSelectBoxSlotRecipeVariantProps = {
   [key in keyof MultipleSelectBoxSlotRecipeVariant]?: ConditionalValue<MultipleSelectBoxSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/multiple-select-box-slot-recipe.js

@@ -58,6 +58,18 @@ const multipleSelectBoxSlotRecipeSlotNames = [
     [
         "infiniteScrollLoading",
         "MultipleSelectBox__infiniteScrollLoading"
+    ],
+    [
+        "createOptionArea",
+        "MultipleSelectBox__createOptionArea"
+    ],
+    [
+        "createOptionButton",
+        "MultipleSelectBox__createOptionButton"
+    ],
+    [
+        "createOptionErrorMessage",
+        "MultipleSelectBox__createOptionErrorMessage"
     ]
 ];
 const multipleSelectBoxSlotRecipeSlotFns = /* @__PURE__ */ multipleSelectBoxSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, multipleSelectBoxSlotRecipeDefaultVariants, getSlotCompoundVariant(multipleSelectBoxSlotRecipeCompoundVariants, slotName))]);

package/dist/styled-system/recipes/side-pane-slot-recipe.d.ts

@@ -11,7 +11,7 @@ type SidePaneSlotRecipeVariantMap = {
   [key in keyof SidePaneSlotRecipeVariant]: Array<SidePaneSlotRecipeVariant[key]>
 }
 
-type SidePaneSlotRecipeSlot = "root" | "backdrop" | "inside" | "header" | "title" | "actionSlotWrapper" | "actionSlot" | "closeButtonWrapper" | "content"
+type SidePaneSlotRecipeSlot = "root" | "backdrop" | "inside" | "header" | "title" | "actionSlotWrapper" | "actionSlot" | "closeButtonWrapper" | "content" | "contentBody" | "footer"
 
 export type SidePaneSlotRecipeVariantProps = {
   [key in keyof SidePaneSlotRecipeVariant]?: ConditionalValue<SidePaneSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/side-pane-slot-recipe.js

@@ -38,6 +38,14 @@ const sidePaneSlotRecipeSlotNames = [
     [
         "content",
         "SidePane__content"
+    ],
+    [
+        "contentBody",
+        "SidePane__contentBody"
+    ],
+    [
+        "footer",
+        "SidePane__footer"
     ]
 ];
 const sidePaneSlotRecipeSlotFns = /* @__PURE__ */ sidePaneSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, sidePaneSlotRecipeDefaultVariants, getSlotCompoundVariant(sidePaneSlotRecipeCompoundVariants, slotName))]);

package/dist/styled-system/recipes/sub-navigation-slot-recipe.d.ts

@@ -11,7 +11,7 @@ type SubNavigationSlotRecipeVariantMap = {
   [key in keyof SubNavigationSlotRecipeVariant]: Array<SubNavigationSlotRecipeVariant[key]>
 }
 
-type SubNavigationSlotRecipeSlot = "root" | "list" | "listItem" | "link" | "labelIcon" | "label" | "statusSlot" | "details" | "summary" | "disclosureIcon" | "nestedListItem"
+type SubNavigationSlotRecipeSlot = "root" | "subNavigationHeader" | "list" | "listItem" | "link" | "labelIcon" | "label" | "statusSlot" | "details" | "summary" | "disclosureIcon" | "nestedListItem"
 
 export type SubNavigationSlotRecipeVariantProps = {
   [key in keyof SubNavigationSlotRecipeVariant]?: ConditionalValue<SubNavigationSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/sub-navigation-slot-recipe.js

@@ -7,6 +7,10 @@ const subNavigationSlotRecipeSlotNames = [
         "root",
         "SubNavigation__root"
     ],
+    [
+        "subNavigationHeader",
+        "SubNavigation__subNavigationHeader"
+    ],
     [
         "list",
         "SubNavigation__list"

package/dist/styles.css

@@ -2366,16 +2366,25 @@
 .mfui-hERVbP {
   flex: 1 1 0%;
   overflow: auto;
-  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.main-content\.horizontal\.comfort);
   flex-shrink: 0;
-  padding-block-start: var(--mfui-spacing-mfui\.size\.padding\.main-content\.top\.comfort);
-  padding-block-end: var(--mfui-spacing-mfui\.size\.padding\.main-content\.bottom\.comfort);
+  display: flex;
+  flex-direction: column;
   font-family: var(--mfui-fonts-mfui\.typography\.font-family\.body);
   font-weight: var(--mfui-font-weights-mfui\.typography\.font-weight\.body);
   font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.body);
   line-height: var(--mfui-line-heights-mfui\.typography\.line-height\.body);
 }
 
+.mfui-jVWTKD {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.main-content\.horizontal\.comfort);
+  padding-block-start: var(--mfui-spacing-mfui\.size\.padding\.main-content\.top\.comfort);
+  padding-block-end: var(--mfui-spacing-mfui\.size\.padding\.main-content\.bottom\.comfort);
+}
+
+.mfui-iAowQz {
+  flex-shrink: 0;
+}
+
 .mfui-lbCmDn {
   border-style: solid;
   border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.none);
@@ -2964,6 +2973,13 @@
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
 }
 
+.mfui-XFuwI {
+  padding-block: var(--mfui-spacing-mfui\.size\.padding\.control-container\.vertical\.comfort);
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.horizontal\.comfort);
+  display: flex;
+  flex-direction: column;
+}
+
 .mfui-erQjxT {
   list-style: none;
 }
@@ -3348,6 +3364,56 @@
   height: 16px;
 }
 
+.mfui-bTuopm {
+  gap: 4px;
+  padding-inline: 0px;
+  flex-direction: column;
+  padding-top: calc(var(--mfui-spacing-mfui\.size\.padding\.container\.vertical\.comfort) - 1px);
+  padding-bottom: var(--mfui-spacing-mfui\.size\.padding\.container\.vertical\.comfort);
+  border-top-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-top-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+  border-top-style: solid;
+}
+
+.mfui-bTuopm,.mfui-fBfmXL {
+  display: flex;
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
+}
+
+.mfui-fBfmXL {
+  border: none;
+  gap: var(--mfui-spacing-mfui\.size\.spacing\.icon-and-text\.horizontal\.comfort);
+  padding-block: 4px;
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.control\.horizontal\.comfort);
+  align-items: flex-start;
+  cursor: pointer;
+  width: 100%;
+  min-height: var(--mfui-sizes-mfui\.size\.dimension\.control-component\.height\.comfort);
+}
+
+.mfui-fBfmXL > svg {
+  margin-block: 3px;
+  flex-shrink: 0;
+  color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
+  width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  height: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+}
+
+.mfui-fBfmXL:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.mfui-fBfmXL:is(:hover, [data-hover]) {
+  color: var(--mfui-colors-mfui\.color\.base\.content\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.base\.background\.hovered);
+  cursor: pointer;
+}
+
+.mfui-kQVryS {
+  padding-inline: var(--mfui-spacing-mfui\.size\.padding\.control\.horizontal\.comfort);
+}
+
 .mfui-frSlYl {
   border: 1px solid;
   gap: var(--mfui-spacing-mfui\.size\.spacing\.inline\.horizontal\.comfort);
@@ -5097,8 +5163,10 @@ li:last-child > .mfui-cXGJls {
 .mfui-iEbmF {
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.main-content\.horizontal\.comfort);
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
   align-items: flex-start;
+  column-gap: var(--mfui-spacing-mfui\.size\.spacing\.paragraph\.horizontal\.comfort);
 }
 
 .mfui-fpqRil {
@@ -5107,10 +5175,9 @@ li:last-child > .mfui-cXGJls {
 }
 
 .mfui-fpqRil,.mfui-eTbFbc {
-  flex: none;
+  flex: 1 0 auto;
   display: flex;
   align-items: center;
-  width: 100%;
   height: var(--mfui-sizes-mfui\.size\.dimension\.control-container\.height\.comfort);
 }
 
@@ -5127,15 +5194,6 @@ li:last-child > .mfui-cXGJls {
 }
   .mfui-jDhUBB,.mfui-ggXIiJ,.mfui-clKroC {
     display: none;
-}
-  .mfui-iEbmF {
-    gap: var(--mfui-spacing-mfui\.size\.spacing\.paragraph\.horizontal\.comfort);
-    flex-direction: row;
-}
-  .mfui-fpqRil,.mfui-eTbFbc {
-    flex: 1 0 0;
-    width: auto;
-    min-width: 0;
 }
 }
 
@@ -7074,16 +7132,23 @@ li:last-child > .mfui-cXGJls {
 
 .mfui-jAKHYi {
   position: fixed;
+  left: 0;
+  right: 0;
+}
+
+.mfui-jAKHYi,.mfui-erGtCj {
   z-index: 1;
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
   bottom: 0;
-  left: 0;
-  right: 0;
   border-top-width: var(--mfui-border-widths-mfui\.size\.border\.fixed-cell\.horizontal\.comfort);
   border-top-style: solid;
   border-top-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
 }
 
+.mfui-erGtCj {
+  position: sticky;
+}
+
 .mfui-hhFgaB {
   max-width: var(--mfui-sizes-mfui\.layout\.area\.horizontal\.fixed);
   width: 100%;