@moneyforward/mfui-components 3.18.0 → 3.20.0

package/dist/src/MultipleSelectBox/MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.js

@@ -48,8 +48,6 @@ placeholder, renderDisplayValue, updateSelectedValues, clearButtonProps, disable
         .map((option) => option.value)
         .filter((v) => v != null)
         .map(String);
-    return (
-    // use div element instead of button element to prevent the nested button element when the selected options are rendered as tag list
-    _jsx(FocusIndicator, { children: _jsxs("div", { ref: wrapperRef, className: cx(classes.wrapper, 'mfui-MultipleSelectBoxTrigger__wrapper', triggerWrapperProps?.className), children: [_jsx("button", { ref: mergeRefs(ref, triggerRef), type: "button", role: "combobox", "aria-controls": listBoxId, "aria-expanded": isOptionPanelOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, value: selectedValues, disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur, ...rest, ...triggerProps, className: cx(classes.trigger, 'mfui-MultipleSelectBoxTrigger__trigger', triggerProps?.className) }), _jsx("input", { type: "hidden", name: name, value: selectedValues }), _jsx("div", { className: cx(classes.displayValues, 'mfui-MultipleSelectBoxTrigger__displayValues'), "data-mfui-content": "multiple-select-box-trigger-display-values", children: renderer() }), selectedOptions.length > 0 && !disabled && !disableClearButton ? (_jsx("div", { className: cx(classes.clearButtonContainer, 'mfui-MultipleSelectBoxTrigger__clearButtonContainer'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', className: cx(classes.clearButton, 'mfui-MultipleSelectBoxTrigger__clearButton'), "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "multiple-select-box-clear-button", onClick: handleClearValue }) })) : null, _jsx("div", { className: cx(classes.dropdownIconContainer, 'mfui-MultipleSelectBoxTrigger__dropdownIconContainer'), children: _jsx(DropdownIcon, { className: cx(classes.dropdownIcon, 'mfui-MultipleSelectBoxTrigger__dropdownIcon') }) })] }) }));
+    return (_jsx(FocusIndicator, { children: _jsxs("div", { ref: wrapperRef, className: cx(classes.wrapper, 'mfui-MultipleSelectBoxTrigger__wrapper', triggerWrapperProps?.className), children: [_jsx("button", { ref: mergeRefs(ref, triggerRef), type: "button", role: "combobox", "aria-controls": listBoxId, "aria-expanded": isOptionPanelOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, value: selectedValues, disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur, ...rest, ...triggerProps, className: cx(classes.trigger, 'mfui-MultipleSelectBoxTrigger__trigger', triggerProps?.className) }), _jsx("input", { type: "hidden", name: name, value: selectedValues }), _jsx("div", { className: cx(classes.displayValues, 'mfui-MultipleSelectBoxTrigger__displayValues'), "data-mfui-content": "multiple-select-box-trigger-display-values", children: renderer() }), selectedOptions.length > 0 && !disabled && !disableClearButton ? (_jsx("div", { className: cx(classes.clearButtonContainer, 'mfui-MultipleSelectBoxTrigger__clearButtonContainer'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', className: cx(classes.clearButton, 'mfui-MultipleSelectBoxTrigger__clearButton'), "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "multiple-select-box-clear-button", onClick: handleClearValue }) })) : null, _jsx("div", { className: cx(classes.dropdownIconContainer, 'mfui-MultipleSelectBoxTrigger__dropdownIconContainer'), children: _jsx(DropdownIcon, { className: cx(classes.dropdownIcon, 'mfui-MultipleSelectBoxTrigger__dropdownIcon') }) })] }) }));
 }
 export const MultipleSelectBoxTrigger = forwardRef(MultipleSelectBoxTriggerInner);

package/dist/src/RadioButtonCard/RadioButtonCard.js

@@ -28,11 +28,5 @@ export const RadioButtonCard = forwardRef(({ label, layout = 'vertical', renderD
         disableResponsive,
         isResponsive: Boolean(responsiveSlot.narrowViewport),
     });
-    return (_jsxs("div", { className: cx(classes.root, 'mfui-RadioButtonCard__root', className), children: [_jsx(FocusIndicator, { disableNestedFocus: true, children: _jsxs(Typography, { variant: "label", className: cx(classes.inputWrapper, 'mfui-RadioButtonCard__inputWrapper'), as: "label", htmlFor: props.id, children: [_jsx(RadioButton, { ref: ref, ...props, className: cx(classes.input, 'mfui-RadioButtonCard__input') }), _jsx("span", { className: cx(classes.label, 'mfui-RadioButtonCard__label'), children: label })] }) }), responsiveSlot.narrowViewport && disableResponsive ? (
-            /* When responsive is disabled, render single element but with both contents using CSS for switching */
-            _jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : responsiveSlot.narrowViewport ? (
-            /* When responsive is enabled, render separate wide/narrow elements */
-            _jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : responsiveSlot.base ? (
-            /* For function-based renderDetailsSlot or ResponsiveSlot with only base, use single details element */
-            _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) })) : null] }));
+    return (_jsxs("div", { className: cx(classes.root, 'mfui-RadioButtonCard__root', className), children: [_jsx(FocusIndicator, { disableNestedFocus: true, children: _jsxs(Typography, { variant: "label", className: cx(classes.inputWrapper, 'mfui-RadioButtonCard__inputWrapper'), as: "label", htmlFor: props.id, children: [_jsx(RadioButton, { ref: ref, ...props, className: cx(classes.input, 'mfui-RadioButtonCard__input') }), _jsx("span", { className: cx(classes.label, 'mfui-RadioButtonCard__label'), children: label })] }) }), responsiveSlot.narrowViewport && disableResponsive ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : responsiveSlot.narrowViewport ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : responsiveSlot.base ? (_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) })) : null] }));
 });

package/dist/src/TextBox/TextBox.js

@@ -41,11 +41,7 @@ export const TextBox = forwardRef(({ enableClearButton = false, onClear, invalid
     }, [onClear, shouldUseTouchDeviceMode]);
     // Get the display value for touch device mode
     const displayValue = (inputProps.value ?? inputProps.defaultValue ?? '');
-    return shouldUseTouchDeviceMode ? (
-    // Touch device: wrapper + hidden input + display div
-    _jsxs("div", { ...wrapperProps, className: cx(classes.root, 'mfui-TextBox__root', wrapperProps.className), children: [_jsx("input", { type: "hidden", value: displayValue, name: inputProps.name }), prefixSlot ? _jsx("div", { className: cx(classes.prefix, 'mfui-TextBox__prefix'), children: prefixSlot }) : null, _jsx("div", { className: cx(classes.input, 'mfui-TextBox__input'), children: displayValue || inputProps.placeholder }), shouldShowClearButton ? (_jsx(ClearButton, { size: textBoxSize === 'small' ? 'small' : textBoxSize === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', className: cx(classes.clearButton, 'mfui-TextBox__clearButton'), disabled: disabled, onClick: (event) => {
+    return shouldUseTouchDeviceMode ? (_jsxs("div", { ...wrapperProps, className: cx(classes.root, 'mfui-TextBox__root', wrapperProps.className), children: [_jsx("input", { type: "hidden", value: displayValue, name: inputProps.name }), prefixSlot ? _jsx("div", { className: cx(classes.prefix, 'mfui-TextBox__prefix'), children: prefixSlot }) : null, _jsx("div", { className: cx(classes.input, 'mfui-TextBox__input'), children: displayValue || inputProps.placeholder }), shouldShowClearButton ? (_jsx(ClearButton, { size: textBoxSize === 'small' ? 'small' : textBoxSize === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', className: cx(classes.clearButton, 'mfui-TextBox__clearButton'), disabled: disabled, onClick: (event) => {
                     onClear?.(event);
-                } })) : null, suffixSlot ? _jsx("div", { className: cx(classes.suffix, 'mfui-TextBox__suffix'), children: suffixSlot }) : null] })) : (
-    // Desktop: Standard input with FocusIndicator
-    _jsx(FocusIndicator, { children: _jsxs("div", { ...wrapperProps, className: cx(classes.root, 'mfui-TextBox__root', wrapperProps.className), children: [prefixSlot ? _jsx("div", { className: cx(classes.prefix, 'mfui-TextBox__prefix'), children: prefixSlot }) : null, _jsx("input", { ref: mergedInputRef, disabled: disabled, ...inputProps, className: cx(classes.input, 'mfui-TextBox__input', inputProps.className), onChange: handleChange, onInput: handleInput }), shouldShowClearButton ? (_jsx(ClearButton, { size: textBoxSize === 'small' ? 'small' : textBoxSize === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', className: cx(classes.clearButton, 'mfui-TextBox__clearButton'), disabled: disabled, onClick: onClickClear })) : null, suffixSlot ? _jsx("div", { className: cx(classes.suffix, 'mfui-TextBox__suffix'), children: suffixSlot }) : null] }) }));
+                } })) : null, suffixSlot ? _jsx("div", { className: cx(classes.suffix, 'mfui-TextBox__suffix'), children: suffixSlot }) : null] })) : (_jsx(FocusIndicator, { children: _jsxs("div", { ...wrapperProps, className: cx(classes.root, 'mfui-TextBox__root', wrapperProps.className), children: [prefixSlot ? _jsx("div", { className: cx(classes.prefix, 'mfui-TextBox__prefix'), children: prefixSlot }) : null, _jsx("input", { ref: mergedInputRef, disabled: disabled, ...inputProps, className: cx(classes.input, 'mfui-TextBox__input', inputProps.className), onChange: handleChange, onInput: handleInput }), shouldShowClearButton ? (_jsx(ClearButton, { size: textBoxSize === 'small' ? 'small' : textBoxSize === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', className: cx(classes.clearButton, 'mfui-TextBox__clearButton'), disabled: disabled, onClick: onClickClear })) : null, suffixSlot ? _jsx("div", { className: cx(classes.suffix, 'mfui-TextBox__suffix'), children: suffixSlot }) : null] }) }));
 });

package/dist/src/{MultilineTextBox/MultilineTextBox.d.ts → Textarea/Textarea.d.ts}

@@ -1,12 +1,15 @@
 /**
- * The general-purpose TextBox component.
+ * The general-purpose Textarea component.
  * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
  *
  * Also extends the props of `<textarea>` element
  *
+ * > **Migration note**: `MultilineTextBox` has been renamed to `Textarea`.
+ * > Please migrate to `Textarea`. `MultilineTextBox` will be removed in a future major version (v5.0.0).
+ *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
  */
-export declare const MultilineTextBox: import("react").ForwardRefExoticComponent<{
+export declare const Textarea: import("react").ForwardRefExoticComponent<{
     invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["invalid"];
     size?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["size"];
     disabled?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["disabled"];

package/dist/src/{MultilineTextBox/MultilineTextBox.js → Textarea/Textarea.js}

@@ -1,22 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useCallback, useEffect } from 'react';
 import { cx } from '../../styled-system/css';
-import { multilineTextBoxSlotRecipe } from '../../styled-system/recipes';
+import { textareaSlotRecipe } from '../../styled-system/recipes';
 import { FocusIndicator } from '../FocusIndicator';
 import { mergeRefs } from '../utilities/dom/mergeRefs';
 /**
- * The general-purpose TextBox component.
+ * The general-purpose Textarea component.
  * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
  *
  * Also extends the props of `<textarea>` element
  *
+ * > **Migration note**: `MultilineTextBox` has been renamed to `Textarea`.
+ * > Please migrate to `Textarea`. `MultilineTextBox` will be removed in a future major version (v5.0.0).
+ *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
  */
-export const MultilineTextBox = forwardRef(({ invalid = false, size = 'medium', disabled = false, rows = 1, enableAutoResize = false, resize = 'both', onChange, ...props }, ref) => {
+export const Textarea = forwardRef(({ invalid = false, size = 'medium', disabled = false, rows = 1, enableAutoResize = false, resize = 'both', onChange, ...props }, ref) => {
     const localRef = useRef(null);
     // When enableAutoResize is true, force resize to 'none' to prevent conflicts
     const effectiveResize = enableAutoResize ? 'none' : resize;
-    const classes = multilineTextBoxSlotRecipe({ size, disabled, invalid, enableAutoResize, resize: effectiveResize });
+    const classes = textareaSlotRecipe({ size, disabled, invalid, enableAutoResize, resize: effectiveResize });
     const adjustHeight = useCallback(() => {
         if (!enableAutoResize || !localRef.current)
             return;
@@ -47,5 +50,6 @@ export const MultilineTextBox = forwardRef(({ invalid = false, size = 'medium',
             adjustHeight();
         }
     }, [enableAutoResize, adjustHeight]);
-    return (_jsx(FocusIndicator, { children: _jsx("textarea", { ref: mergeRefs(ref, localRef), ...props, rows: rows, className: cx(classes.root, 'mfui-MultilineTextBox__root', props.className), disabled: disabled, onChange: handleChange }) }));
+    return (_jsx(FocusIndicator, { children: _jsx("textarea", { ref: mergeRefs(ref, localRef), ...props, rows: rows, className: cx(classes.root, 'mfui-Textarea__root', 
+            /* TODO: Remove in v5.0.0 */ 'mfui-MultilineTextBox__root', props.className), disabled: disabled, onChange: handleChange }) }));
 });

package/dist/src/{MultilineTextBox/MultilineTextBox.types.d.ts → Textarea/Textarea.types.d.ts}

@@ -1,9 +1,9 @@
 import { type ComponentPropsWithoutRef } from 'react';
 import { type TextBoxSlotRecipeVariant } from '../../styled-system/recipes';
 /**
- * The props for the MultilineTextBox component.
+ * The props for the Textarea component.
  */
-export type MultilineTextBoxProps = {
+export type TextareaProps = {
     /**
      * Whether the textarea is invalid or not.
      * This will change the style of the text box.

package/dist/src/Textarea/Textarea.types.js

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

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

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

package/dist/src/Textarea/index.js

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

package/dist/src/Tooltip/Tooltip.js

@@ -79,7 +79,16 @@ export const Tooltip = forwardRef(({ children, open, onOpenStateChanged, content
     }, [calculatedOpen, closeImmediate]);
     const triggerRef = mergeRefs(setTriggerReference, rootRef, ref);
     const classes = tooltipSlotRecipe();
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, ...wrapperProps, className: cx(classes.root, 'mfui-Tooltip__root', className), ...rootAttributes, children: isValidElement(children) ? (cloneElement(children, calculatedOpen && !hideFromScreenReader
-                    ? { 'aria-describedby': tooltipId }
-                    : undefined)) : (_jsx("span", { ...(calculatedOpen && !hideFromScreenReader ? { 'aria-describedby': tooltipId } : undefined), children: children })) }), calculatedOpen ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setTooltipReference, className: cx(classes.tooltip, 'mfui-Tooltip__tooltip', contentProps?.className), role: "tooltip", id: tooltipId, "aria-hidden": hideFromScreenReader ? true : undefined, style: { maxWidth, ...tooltipStyles }, ...tooltipAttributes, children: [typeof content === 'string' ? _jsx(Typography, { variant: "helpMessage", children: content }) : content, _jsx(ArrowIcon, { ref: arrowRef, "aria-hidden": true, placement: calculatedPlacement, className: cx(classes.arrow, 'mfui-Tooltip__arrow'), style: arrowStyles })] }) })) : null] }));
+    const ariaDescribedBy = !hideFromScreenReader && content != null ? tooltipId : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, ...wrapperProps, className: cx(classes.root, 'mfui-Tooltip__root', className), ...rootAttributes, children: isValidElement(children) ? (cloneElement(children, ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : undefined)) : (_jsx("span", { ...(ariaDescribedBy ? { 'aria-describedby': ariaDescribedBy } : undefined), children: children })) }), !calculatedOpen && !hideFromScreenReader && content != null && (_jsx(Portal, { targetDOMNode: targetElement, children: _jsx("div", { "data-mfui-tooltip-hidden": true, id: tooltipId, style: {
+                        position: 'absolute',
+                        width: '1px',
+                        height: '1px',
+                        padding: 0,
+                        margin: '-1px',
+                        overflow: 'hidden',
+                        clip: 'rect(0, 0, 0, 0)',
+                        whiteSpace: 'nowrap',
+                        borderWidth: 0,
+                    }, children: content }) })), calculatedOpen ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setTooltipReference, className: cx(classes.tooltip, 'mfui-Tooltip__tooltip', contentProps?.className), role: "tooltip", id: tooltipId, "aria-hidden": hideFromScreenReader ? true : undefined, style: { maxWidth, ...tooltipStyles }, ...tooltipAttributes, children: [typeof content === 'string' ? _jsx(Typography, { variant: "helpMessage", children: content }) : content, _jsx(ArrowIcon, { ref: arrowRef, "aria-hidden": true, placement: calculatedPlacement, className: cx(classes.arrow, 'mfui-Tooltip__arrow'), style: arrowStyles })] }) })) : null] }));
 });

package/dist/src/Typography/Typography.js

@@ -21,9 +21,7 @@ function InternalTypography(props, ref) {
         return variant.startsWith('strong') ? 'strong' : 'span';
     }, [variant, tag, rest.href]);
     const classes = typographySlotRecipe({ variant });
-    return (
-    // @ts-expect-error Ignore the error for ref due to the complexion.
-    _jsx(Tag, { ref: ref, ...rest, className: cx(classes.root, 'mfui-Typography__root', className), children: children }));
+    return (_jsx(Tag, { ref: ref, ...rest, className: cx(classes.root, 'mfui-Typography__root', className), children: children }));
 }
 /**
  *

package/dist/src/index.d.ts

@@ -50,6 +50,7 @@ export * from './StatusLabel';
 export * from './SubNavigation';
 export * from './Tabs';
 export * from './Tag';
+export * from './Textarea';
 export * from './TextBox';
 export * from './TextLink';
 export * from './Toast';

package/dist/src/index.js

@@ -50,6 +50,7 @@ export * from './StatusLabel';
 export * from './SubNavigation';
 export * from './Tabs';
 export * from './Tag';
+export * from './Textarea';
 export * from './TextBox';
 export * from './TextLink';
 export * from './Toast';

package/dist/styled-system/recipes/filter-date-range-picker-slot-recipe.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface FilterDateRangePickerSlotRecipeVariant {
+  
+}
+
+type FilterDateRangePickerSlotRecipeVariantMap = {
+  [key in keyof FilterDateRangePickerSlotRecipeVariant]: Array<FilterDateRangePickerSlotRecipeVariant[key]>
+}
+
+type FilterDateRangePickerSlotRecipeSlot = "wrapper" | "trigger" | "content" | "calendarIcon" | "clearButtonWrapper" | "popoverWrapper"
+
+export type FilterDateRangePickerSlotRecipeVariantProps = {
+  [key in keyof FilterDateRangePickerSlotRecipeVariant]?: ConditionalValue<FilterDateRangePickerSlotRecipeVariant[key]> | undefined
+}
+
+export interface FilterDateRangePickerSlotRecipeRecipe {
+  __slot: FilterDateRangePickerSlotRecipeSlot
+  __type: FilterDateRangePickerSlotRecipeVariantProps
+  (props?: FilterDateRangePickerSlotRecipeVariantProps): Pretty<Record<FilterDateRangePickerSlotRecipeSlot, string>>
+  raw: (props?: FilterDateRangePickerSlotRecipeVariantProps) => FilterDateRangePickerSlotRecipeVariantProps
+  variantMap: FilterDateRangePickerSlotRecipeVariantMap
+  variantKeys: Array<keyof FilterDateRangePickerSlotRecipeVariant>
+  splitVariantProps<Props extends FilterDateRangePickerSlotRecipeVariantProps>(props: Props): [FilterDateRangePickerSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof FilterDateRangePickerSlotRecipeVariantProps>>]
+  getVariantProps: (props?: FilterDateRangePickerSlotRecipeVariantProps) => FilterDateRangePickerSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI FilterDateRangePicker component.
+ */
+export declare const filterDateRangePickerSlotRecipe: FilterDateRangePickerSlotRecipeRecipe

package/dist/styled-system/recipes/filter-date-range-picker-slot-recipe.js

@@ -0,0 +1,48 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const filterDateRangePickerSlotRecipeDefaultVariants = {};
+const filterDateRangePickerSlotRecipeCompoundVariants = [];
+const filterDateRangePickerSlotRecipeSlotNames = [
+    [
+        "wrapper",
+        "FilterDateRangePicker__wrapper"
+    ],
+    [
+        "trigger",
+        "FilterDateRangePicker__trigger"
+    ],
+    [
+        "content",
+        "FilterDateRangePicker__content"
+    ],
+    [
+        "calendarIcon",
+        "FilterDateRangePicker__calendarIcon"
+    ],
+    [
+        "clearButtonWrapper",
+        "FilterDateRangePicker__clearButtonWrapper"
+    ],
+    [
+        "popoverWrapper",
+        "FilterDateRangePicker__popoverWrapper"
+    ]
+];
+const filterDateRangePickerSlotRecipeSlotFns = /* @__PURE__ */ filterDateRangePickerSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, filterDateRangePickerSlotRecipeDefaultVariants, getSlotCompoundVariant(filterDateRangePickerSlotRecipeCompoundVariants, slotName))]);
+const filterDateRangePickerSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(filterDateRangePickerSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const filterDateRangePickerSlotRecipeVariantKeys = [];
+const getVariantProps = (variants) => ({ ...filterDateRangePickerSlotRecipeDefaultVariants, ...compact(variants) });
+export const filterDateRangePickerSlotRecipe = /* @__PURE__ */ Object.assign(filterDateRangePickerSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'filterDateRangePickerSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: filterDateRangePickerSlotRecipeVariantKeys,
+    variantMap: {},
+    splitVariantProps(props) {
+        return splitProps(props, filterDateRangePickerSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/filter-month-picker-slot-recipe.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface FilterMonthPickerSlotRecipeVariant {
+  
+}
+
+type FilterMonthPickerSlotRecipeVariantMap = {
+  [key in keyof FilterMonthPickerSlotRecipeVariant]: Array<FilterMonthPickerSlotRecipeVariant[key]>
+}
+
+type FilterMonthPickerSlotRecipeSlot = "wrapper" | "trigger" | "content" | "calendarIcon" | "clearButtonWrapper"
+
+export type FilterMonthPickerSlotRecipeVariantProps = {
+  [key in keyof FilterMonthPickerSlotRecipeVariant]?: ConditionalValue<FilterMonthPickerSlotRecipeVariant[key]> | undefined
+}
+
+export interface FilterMonthPickerSlotRecipeRecipe {
+  __slot: FilterMonthPickerSlotRecipeSlot
+  __type: FilterMonthPickerSlotRecipeVariantProps
+  (props?: FilterMonthPickerSlotRecipeVariantProps): Pretty<Record<FilterMonthPickerSlotRecipeSlot, string>>
+  raw: (props?: FilterMonthPickerSlotRecipeVariantProps) => FilterMonthPickerSlotRecipeVariantProps
+  variantMap: FilterMonthPickerSlotRecipeVariantMap
+  variantKeys: Array<keyof FilterMonthPickerSlotRecipeVariant>
+  splitVariantProps<Props extends FilterMonthPickerSlotRecipeVariantProps>(props: Props): [FilterMonthPickerSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof FilterMonthPickerSlotRecipeVariantProps>>]
+  getVariantProps: (props?: FilterMonthPickerSlotRecipeVariantProps) => FilterMonthPickerSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI FilterMonthPicker component.
+ */
+export declare const filterMonthPickerSlotRecipe: FilterMonthPickerSlotRecipeRecipe

package/dist/styled-system/recipes/filter-month-picker-slot-recipe.js

@@ -0,0 +1,44 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const filterMonthPickerSlotRecipeDefaultVariants = {};
+const filterMonthPickerSlotRecipeCompoundVariants = [];
+const filterMonthPickerSlotRecipeSlotNames = [
+    [
+        "wrapper",
+        "FilterMonthPicker__wrapper"
+    ],
+    [
+        "trigger",
+        "FilterMonthPicker__trigger"
+    ],
+    [
+        "content",
+        "FilterMonthPicker__content"
+    ],
+    [
+        "calendarIcon",
+        "FilterMonthPicker__calendarIcon"
+    ],
+    [
+        "clearButtonWrapper",
+        "FilterMonthPicker__clearButtonWrapper"
+    ]
+];
+const filterMonthPickerSlotRecipeSlotFns = /* @__PURE__ */ filterMonthPickerSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, filterMonthPickerSlotRecipeDefaultVariants, getSlotCompoundVariant(filterMonthPickerSlotRecipeCompoundVariants, slotName))]);
+const filterMonthPickerSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(filterMonthPickerSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const filterMonthPickerSlotRecipeVariantKeys = [];
+const getVariantProps = (variants) => ({ ...filterMonthPickerSlotRecipeDefaultVariants, ...compact(variants) });
+export const filterMonthPickerSlotRecipe = /* @__PURE__ */ Object.assign(filterMonthPickerSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'filterMonthPickerSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: filterMonthPickerSlotRecipeVariantKeys,
+    variantMap: {},
+    splitVariantProps(props) {
+        return splitProps(props, filterMonthPickerSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/filter-month-range-picker-slot-recipe.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface FilterMonthRangePickerSlotRecipeVariant {
+  
+}
+
+type FilterMonthRangePickerSlotRecipeVariantMap = {
+  [key in keyof FilterMonthRangePickerSlotRecipeVariant]: Array<FilterMonthRangePickerSlotRecipeVariant[key]>
+}
+
+type FilterMonthRangePickerSlotRecipeSlot = "wrapper" | "trigger" | "content" | "calendarIcon" | "clearButtonWrapper"
+
+export type FilterMonthRangePickerSlotRecipeVariantProps = {
+  [key in keyof FilterMonthRangePickerSlotRecipeVariant]?: ConditionalValue<FilterMonthRangePickerSlotRecipeVariant[key]> | undefined
+}
+
+export interface FilterMonthRangePickerSlotRecipeRecipe {
+  __slot: FilterMonthRangePickerSlotRecipeSlot
+  __type: FilterMonthRangePickerSlotRecipeVariantProps
+  (props?: FilterMonthRangePickerSlotRecipeVariantProps): Pretty<Record<FilterMonthRangePickerSlotRecipeSlot, string>>
+  raw: (props?: FilterMonthRangePickerSlotRecipeVariantProps) => FilterMonthRangePickerSlotRecipeVariantProps
+  variantMap: FilterMonthRangePickerSlotRecipeVariantMap
+  variantKeys: Array<keyof FilterMonthRangePickerSlotRecipeVariant>
+  splitVariantProps<Props extends FilterMonthRangePickerSlotRecipeVariantProps>(props: Props): [FilterMonthRangePickerSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof FilterMonthRangePickerSlotRecipeVariantProps>>]
+  getVariantProps: (props?: FilterMonthRangePickerSlotRecipeVariantProps) => FilterMonthRangePickerSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI FilterMonthRangePicker component.
+ */
+export declare const filterMonthRangePickerSlotRecipe: FilterMonthRangePickerSlotRecipeRecipe

package/dist/styled-system/recipes/filter-month-range-picker-slot-recipe.js

@@ -0,0 +1,44 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const filterMonthRangePickerSlotRecipeDefaultVariants = {};
+const filterMonthRangePickerSlotRecipeCompoundVariants = [];
+const filterMonthRangePickerSlotRecipeSlotNames = [
+    [
+        "wrapper",
+        "FilterMonthRangePicker__wrapper"
+    ],
+    [
+        "trigger",
+        "FilterMonthRangePicker__trigger"
+    ],
+    [
+        "content",
+        "FilterMonthRangePicker__content"
+    ],
+    [
+        "calendarIcon",
+        "FilterMonthRangePicker__calendarIcon"
+    ],
+    [
+        "clearButtonWrapper",
+        "FilterMonthRangePicker__clearButtonWrapper"
+    ]
+];
+const filterMonthRangePickerSlotRecipeSlotFns = /* @__PURE__ */ filterMonthRangePickerSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, filterMonthRangePickerSlotRecipeDefaultVariants, getSlotCompoundVariant(filterMonthRangePickerSlotRecipeCompoundVariants, slotName))]);
+const filterMonthRangePickerSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(filterMonthRangePickerSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const filterMonthRangePickerSlotRecipeVariantKeys = [];
+const getVariantProps = (variants) => ({ ...filterMonthRangePickerSlotRecipeDefaultVariants, ...compact(variants) });
+export const filterMonthRangePickerSlotRecipe = /* @__PURE__ */ Object.assign(filterMonthRangePickerSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'filterMonthRangePickerSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: filterMonthRangePickerSlotRecipeVariantKeys,
+    variantMap: {},
+    splitVariantProps(props) {
+        return splitProps(props, filterMonthRangePickerSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

package/dist/styled-system/recipes/index.d.ts

@@ -5,7 +5,7 @@ export * from './focus-indicator-slot-recipe';
 export * from './typography-slot-recipe';
 export * from './button-slot-recipe';
 export * from './text-link-slot-recipe';
-export * from './multiline-text-box-slot-recipe';
+export * from './textarea-slot-recipe';
 export * from './section-message-slot-recipe';
 export * from './dropdown-menu-slot-recipe';
 export * from './dropdown-menu-container-slot-recipe';
@@ -78,6 +78,9 @@ export * from './file-drop-zone-slot-recipe';
 export * from './embedded-side-pane-slot-recipe';
 export * from './filter-trigger-slot-recipe';
 export * from './filter-date-picker-slot-recipe';
+export * from './filter-date-range-picker-slot-recipe';
+export * from './filter-month-picker-slot-recipe';
+export * from './filter-month-range-picker-slot-recipe';
 export * from './display-table-body-slot-recipe';
 export * from './display-table-cell-slot-recipe';
 export * from './display-table-slot-recipe';

package/dist/styled-system/recipes/index.js

@@ -4,7 +4,7 @@ export * from './focus-indicator-slot-recipe.js';
 export * from './typography-slot-recipe.js';
 export * from './button-slot-recipe.js';
 export * from './text-link-slot-recipe.js';
-export * from './multiline-text-box-slot-recipe.js';
+export * from './textarea-slot-recipe.js';
 export * from './section-message-slot-recipe.js';
 export * from './dropdown-menu-slot-recipe.js';
 export * from './dropdown-menu-container-slot-recipe.js';
@@ -77,6 +77,9 @@ export * from './file-drop-zone-slot-recipe.js';
 export * from './embedded-side-pane-slot-recipe.js';
 export * from './filter-trigger-slot-recipe.js';
 export * from './filter-date-picker-slot-recipe.js';
+export * from './filter-date-range-picker-slot-recipe.js';
+export * from './filter-month-picker-slot-recipe.js';
+export * from './filter-month-range-picker-slot-recipe.js';
 export * from './display-table-body-slot-recipe.js';
 export * from './display-table-cell-slot-recipe.js';
 export * from './display-table-slot-recipe.js';

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

@@ -0,0 +1,52 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface TextareaSlotRecipeVariant {
+  /**
+ * @default "medium"
+ */
+size: "small" | "medium" | "large"
+/**
+ * @default false
+ */
+disabled: boolean
+/**
+ * @default false
+ */
+invalid: boolean
+/**
+ * @default false
+ */
+enableAutoResize: boolean
+/**
+ * @default "both"
+ */
+resize: "none" | "vertical" | "horizontal" | "both"
+}
+
+type TextareaSlotRecipeVariantMap = {
+  [key in keyof TextareaSlotRecipeVariant]: Array<TextareaSlotRecipeVariant[key]>
+}
+
+type TextareaSlotRecipeSlot = "root"
+
+export type TextareaSlotRecipeVariantProps = {
+  [key in keyof TextareaSlotRecipeVariant]?: ConditionalValue<TextareaSlotRecipeVariant[key]> | undefined
+}
+
+export interface TextareaSlotRecipeRecipe {
+  __slot: TextareaSlotRecipeSlot
+  __type: TextareaSlotRecipeVariantProps
+  (props?: TextareaSlotRecipeVariantProps): Pretty<Record<TextareaSlotRecipeSlot, string>>
+  raw: (props?: TextareaSlotRecipeVariantProps) => TextareaSlotRecipeVariantProps
+  variantMap: TextareaSlotRecipeVariantMap
+  variantKeys: Array<keyof TextareaSlotRecipeVariant>
+  splitVariantProps<Props extends TextareaSlotRecipeVariantProps>(props: Props): [TextareaSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof TextareaSlotRecipeVariantProps>>]
+  getVariantProps: (props?: TextareaSlotRecipeVariantProps) => TextareaSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI Textarea component.
+ */
+export declare const textareaSlotRecipe: TextareaSlotRecipeRecipe

package/dist/styled-system/recipes/textarea-slot-recipe.js

@@ -0,0 +1,64 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const textareaSlotRecipeDefaultVariants = {
+    "size": "medium",
+    "disabled": false,
+    "invalid": false,
+    "enableAutoResize": false,
+    "resize": "both"
+};
+const textareaSlotRecipeCompoundVariants = [];
+const textareaSlotRecipeSlotNames = [
+    [
+        "root",
+        "Textarea__root"
+    ]
+];
+const textareaSlotRecipeSlotFns = /* @__PURE__ */ textareaSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, textareaSlotRecipeDefaultVariants, getSlotCompoundVariant(textareaSlotRecipeCompoundVariants, slotName))]);
+const textareaSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(textareaSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const textareaSlotRecipeVariantKeys = [
+    "size",
+    "disabled",
+    "invalid",
+    "enableAutoResize",
+    "resize"
+];
+const getVariantProps = (variants) => ({ ...textareaSlotRecipeDefaultVariants, ...compact(variants) });
+export const textareaSlotRecipe = /* @__PURE__ */ Object.assign(textareaSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'textareaSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: textareaSlotRecipeVariantKeys,
+    variantMap: {
+        "size": [
+            "small",
+            "medium",
+            "large"
+        ],
+        "disabled": [
+            "true",
+            "false"
+        ],
+        "invalid": [
+            "true",
+            "false"
+        ],
+        "enableAutoResize": [
+            "true",
+            "false"
+        ],
+        "resize": [
+            "none",
+            "vertical",
+            "horizontal",
+            "both"
+        ]
+    },
+    splitVariantProps(props) {
+        return splitProps(props, textareaSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});