@moneyforward/mfui-components 2.48.1 → 3.0.0

package/dist/cjs/src/utilities/react/isComponentOrWrapped.js

@@ -1,101 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isComponentOrWrapped = isComponentOrWrapped;
-const react_1 = require("react");
-/**
- * Checks if a React element is of a specific component type or wraps that component.
- *
- * This utility is useful when you need to identify components in `Children.map` or similar scenarios,
- * especially when components use composition patterns.
- *
- * **Detection Strategy (Hybrid Approach):**
- * 1. **Direct type matching** - Fast and reliable
- * 2. **displayName matching** - Recommended for wrapper components (avoids hooks violations)
- * 3. **Fallback rendering** - For backward compatibility with simple wrappers without displayName
- * 4. **Graceful failure** - If rendering throws (e.g., hooks error), returns false
- *
- * **Best Practice**: Set `displayName` on wrapper components to match the target component's `displayName`.
- * This is especially important for wrappers that use React hooks, as rendering them outside of
- * React's component lifecycle will cause errors.
- *
- * @param element - The React element to check
- *
- * @param targetComponent - The component type to check against
- *
- * @returns `true` if the element is the target component or wraps it, `false` otherwise
- *
- * @example
- *
- * ```tsx
- * // Direct usage
- * if (isComponentOrWrapped(child, MyComponent)) {
- *   // child is MyComponent or wraps MyComponent
- * }
- *
- * // In Children.map
- * Children.map(children, (child) => {
- *   if (!isValidElement(child)) return child;
- *   if (isComponentOrWrapped(child, DataGridCell)) {
- *     return cloneElement(child, { ...additionalProps });
- *   }
- *   return child;
- * });
- *
- * // Creating a wrapper component (recommended approach)
- * const WrappedDataGridCell = (props) => {
- *   return <DataGridCell {...props} customProp="value" />;
- * };
- * WrappedDataGridCell.displayName = 'DataGridCell'; // Recommended for detection
- *
- * // Wrapper with hooks (displayName is required)
- * const WrappedDataGridCellWithHooks = (props) => {
- *   const [state, setState] = useState(initialState);
- *   return <DataGridCell {...props} state={state} />;
- * };
- * WrappedDataGridCellWithHooks.displayName = 'DataGridCell'; // Required to avoid hooks error
- * ```
- */
-function isComponentOrWrapped(element, targetComponent) {
-    if (!(0, react_1.isValidElement)(element))
-        return false;
-    // 1. Direct type check - fastest path
-    if (element.type === targetComponent)
-        return true;
-    // 2. displayName check (primary method - safe, no hooks violations)
-    const targetDisplayName = targetComponent.displayName;
-    const elementDisplayName = typeof element.type === 'function' || typeof element.type === 'object'
-        ? element.type.displayName
-        : undefined;
-    if (targetDisplayName && elementDisplayName && elementDisplayName === targetDisplayName) {
-        return true;
-    }
-    // 3. Fallback: Try rendering (backward compatibility for simple wrappers without displayName)
-    // Only attempt this for function components (not class components)
-    if (typeof element.type === 'function') {
-        // Check if it's a class component by looking for prototype.isReactComponent
-        const isClassComponent = 'prototype' in element.type &&
-            element.type.prototype !== null &&
-            typeof element.type.prototype === 'object' &&
-            'isReactComponent' in element.type.prototype;
-        if (!isClassComponent) {
-            try {
-                const result = element.type(element.props);
-                if ((0, react_1.isValidElement)(result) && result.type === targetComponent) {
-                    // Warn in development about better practice
-                    if (process.env['NODE_ENV'] !== 'production' && targetDisplayName) {
-                        console.warn(`[MFUI] Wrapper component detected without displayName. ` +
-                            `This may cause issues if your wrapper uses React hooks. ` +
-                            `Please set displayName="${targetDisplayName}" on your wrapper component.`);
-                    }
-                    return true;
-                }
-            }
-            catch {
-                // Rendering failed (likely hooks error) - wrapper not detectable
-                // This is expected for wrappers with hooks that don't set displayName
-                return false;
-            }
-        }
-    }
-    return false;
-}

package/dist/cjs/src/utilities/responsive/index.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isResponsiveSlot = void 0;
-/**
- * Generic type guard function to check if a value is a ResponsiveSlot-like object.
- * This function checks for the structural pattern of having 'base' and optionally 'narrowViewport' properties,
- * making it compatible with both ResponsiveSlot and other similar responsive slot types.
- *
- * @param value - The value to check
- *
- * @returns true if the value has the ResponsiveSlot structure, false otherwise
- */
-const isResponsiveSlot = (value) => {
-    if (value == null || typeof value !== 'object' || Array.isArray(value)) {
-        return false;
-    }
-    // Check if it's a React element (has $$typeof property)
-    if ('$$typeof' in value) {
-        return false;
-    }
-    // Check if it has the exact structure of ResponsiveSlot
-    const object = value;
-    return 'base' in object && Object.keys(object).every((key) => key === 'base' || key === 'narrowViewport');
-};
-exports.isResponsiveSlot = isResponsiveSlot;

package/dist/cjs/src/utilities/responsive/useIsNarrowViewport.js

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsNarrowViewport = void 0;
-const react_1 = require("react");
-/**
- * Hook to detect if the current viewport is narrow (below specified breakpoint).
- * Uses the same pattern as ToastContainer with window.innerWidth and resize event.
- *
- * According to MFUI Guidelines (Screen Layout and Patterns - Responsive and Breakpoints):
- * - Wide layout components (e.g., GlobalHeader): 1200px breakpoint
- * - Other mobile-responsive components: 600px breakpoint (sm breakpoint in panda.config.ts)
- *
- * @param breakpoint - The breakpoint width in pixels. Default is 600px (sm breakpoint).
- *                     Use 1200px for wide layout components like GlobalHeader.
- *
- * @returns true if the viewport width is less than the breakpoint, false otherwise
- *
- * @example
- * ```tsx
- * // Default 600px breakpoint (most mobile components)
- * function MyComponent() {
- *   const isNarrow = useIsNarrowViewport();
- *
- *   return (
- *     <div>
- *       {isNarrow ? 'Narrow Viewport' : 'Wide Viewport'}
- *     </div>
- *   );
- * }
- *
- * // 1200px breakpoint (GlobalHeader, wide layout components)
- * function WideLayoutComponent() {
- *   const isNarrow = useIsNarrowViewport(1200);
- *
- *   return (
- *     <div>
- *       {isNarrow ? 'Below 1200px' : 'Above 1200px'}
- *     </div>
- *   );
- * }
- * ```
- */
-const useIsNarrowViewport = (breakpoint = 600) => {
-    const [isNarrow, setIsNarrow] = (0, react_1.useState)(false);
-    (0, react_1.useLayoutEffect)(() => {
-        const checkViewportWidth = () => {
-            setIsNarrow(window.innerWidth < breakpoint);
-        };
-        // Check on mount
-        checkViewportWidth();
-        // Add resize listener
-        window.addEventListener('resize', checkViewportWidth);
-        return () => {
-            window.removeEventListener('resize', checkViewportWidth);
-        };
-    }, [breakpoint]);
-    return isNarrow;
-};
-exports.useIsNarrowViewport = useIsNarrowViewport;

package/dist/cjs/src/utilities/state/useDisclosure.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDisclosure = void 0;
-const react_1 = require("react");
-const useUpdateEffect_1 = require("../effect/useUpdateEffect");
-/**
- * Custom hook to manage the disclosure state.
- * Use this only inside the client component.
- *
- * @property isOpen - Indicates whether the option panel is open
- *
- * @property  toggle - Function to toggle the option panel open/closed state
- *
- * @property  open - Function to open the option panel
- *
- * @property  close - Function to close the option panel
- *
- * @returns  The list box state and control functions
- */
-const useDisclosure = ({ value = false, onOpen, onClose, onToggle } = {}) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(value);
-    (0, useUpdateEffect_1.useUpdateEffect)(() => {
-        setIsOpen(value);
-    }, [value]);
-    const toggle = (0, react_1.useCallback)(() => {
-        setIsOpen(!isOpen);
-        onToggle?.(!isOpen);
-    }, [onToggle, isOpen]);
-    const open = (0, react_1.useCallback)(() => {
-        setIsOpen(true);
-        onOpen?.();
-    }, [onOpen]);
-    const close = (0, react_1.useCallback)(() => {
-        setIsOpen(false);
-        onClose?.();
-    }, [onClose]);
-    return {
-        isOpen,
-        toggle,
-        open,
-        close,
-    };
-};
-exports.useDisclosure = useDisclosure;

package/dist/cjs/src/utilities/state/useInputHasValue.js

@@ -1,48 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInputHasValue = void 0;
-const react_1 = require("react");
-/**
- * A hook to check if the input has value or not.
- * Provides handlers for input and change events, and tracks the value state.
- *
- * @param options - Configuration options for the hook
- *
- * @returns Object containing:
- * - hasValue: Whether the input currently has a value
- * - handleInput: Handler for the input event
- * - handleChange: Handler for the change event
- *
- * @example
- * ```tsx
- * const { hasValue, handleChange, handleInput } = useInputHasValue({
- *   initialValue: defaultValue,
- *   value: controlledValue,
- *   onChange: (e) => console.log(e.target.value),
- * });
- * ```
- */
-const useInputHasValue = (options) => {
-    const [hasValue, setHasValue] = (0, react_1.useState)(() => !!options.initialValue);
-    const handleChange = (event) => {
-        setHasValue(!!event.target.value);
-        options.onChange?.(event);
-    };
-    const handleInput = (event) => {
-        setHasValue(!!event.target.value);
-        options.onInput?.(event);
-    };
-    // Will replace with useUpdateEffect after that hook is merged in other PR.
-    // If the value update, we will check `hasValue` based on `value`, not `initialValue`.
-    const updated = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        if (!updated.current) {
-            updated.current = true;
-            return;
-        }
-        setHasValue(!!options.value);
-    }, [options.value]);
-    return { hasValue, handleInput, handleChange };
-};
-exports.useInputHasValue = useInputHasValue;

package/dist/cjs/src/utilities/state/useLatest.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLatest = void 0;
-const react_1 = require("react");
-/**
- * React state hook that returns the latest state as described in the React hooks FAQ.
- *
- * This is mostly useful to get access to the latest value of some props or state inside an asynchronous callback, instead of that value at the time the callback was created from.
- *
- * @param value - Any value that you want to track
- *
- * @returns The React's RefObject of that value, which always the latest value.
- *
- * @see [React Hooks FAQ](https://legacy.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function)
- *
- * @see [react-use useLatest](https://github.com/streamich/react-use/blob/master/docs/useLatest.md)
- */
-const useLatest = (value) => {
-    const ref = (0, react_1.useRef)(value);
-    ref.current = value;
-    return ref;
-};
-exports.useLatest = useLatest;

package/dist/cjs/src/utilities/state/useTransformedState.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTransformedState = useTransformedState;
-const react_1 = require("react");
-const useLatest_1 = require("./useLatest");
-/**
- * useTransformedState is a useState-like hook that always applies a transform function to the value.
- * The transform is applied to the initial value and every time setState is called.
- *
- * @param initialValue - The initial value for the state
- *
- * @param transform - The function to transform the value before storing
- *
- * @returns [state, setState]
- */
-function useTransformedState(initialValue, transform) {
-    const [state, setState] = (0, react_1.useState)(() => transform(initialValue));
-    const latestTransform = (0, useLatest_1.useLatest)(transform);
-    const setTransformedState = (0, react_1.useCallback)((value) => {
-        setState((previous) => {
-            const next = typeof value === 'function' ? value(previous) : value;
-            return latestTransform.current(next);
-        });
-    }, [latestTransform]);
-    return [state, setTransformedState];
-}

package/dist/cjs/styled-system/css/conditions.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isCondition = isCondition;
-exports.finalizeConditions = finalizeConditions;
-exports.sortConditions = sortConditions;
-const helpers_js_1 = require("../helpers.js");
-const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_notDisabled,_notFocused,_focusable,_focusInputInside,_hasCheckboxInside,_hasDisabledCheckboxInside,_hasFocusedCheckboxInside,_hasFocusedCheckedCheckboxInside,_hasCheckedCheckboxInside,_hasRadioButtonInside,_hasFocusedRadioButtonInside,_hasFocusedCheckedRadioButtonInside,_hasDisabledRadioButtonInside,_hasCheckedRadioButtonInside,sm,smOnly,smDown,lg,lgOnly,lgDown,smToLg,base";
-const conditions = new Set(conditionsStr.split(','));
-const conditionRegex = /^@|&|&$/;
-function isCondition(value) {
-    return conditions.has(value) || conditionRegex.test(value);
-}
-const underscoreRegex = /^_/;
-const conditionsSelectorRegex = /&|@/;
-function finalizeConditions(paths) {
-    return paths.map((path) => {
-        if (conditions.has(path)) {
-            return path.replace(underscoreRegex, '');
-        }
-        if (conditionsSelectorRegex.test(path)) {
-            return `[${(0, helpers_js_1.withoutSpace)(path.trim())}]`;
-        }
-        return path;
-    });
-}
-function sortConditions(paths) {
-    return paths.sort((a, b) => {
-        const aa = isCondition(a);
-        const bb = isCondition(b);
-        if (aa && !bb)
-            return 1;
-        if (!aa && bb)
-            return -1;
-        return 0;
-    });
-}

package/dist/cjs/styled-system/css/css.js

@@ -1,44 +0,0 @@
-"use strict";
-var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.assignCss = exports.mergeCss = exports.css = void 0;
-const helpers_js_1 = require("../helpers.js");
-const conditions_js_1 = require("./conditions.js");
-const utilities = "aspectRatio:asp,boxDecorationBreak:bx-db,zIndex:z,boxSizing:bx-s,objectPosition:obj-p,objectFit:obj-f,overscrollBehavior:ovs-b,overscrollBehaviorX:ovs-bx,overscrollBehaviorY:ovs-by,position:pos/1,top:top,left:left,inset:inset,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,insetBlockEnd:inset-be,insetBlockStart:inset-bs,insetInlineEnd:inset-e/insetEnd/end,insetInlineStart:inset-s/insetStart/start,right:right,bottom:bottom,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:flex-b,flex:flex,flexDirection:flex-d/flexDir,flexGrow:flex-g,flexShrink:flex-sh,gridTemplateColumns:grid-tc,gridTemplateRows:grid-tr,gridColumn:grid-c,gridRow:grid-r,gridColumnStart:grid-cs,gridColumnEnd:grid-ce,gridAutoFlow:grid-af,gridAutoColumns:grid-ac,gridAutoRows:grid-ar,gap:gap,gridGap:grid-g,gridRowGap:grid-rg,gridColumnGap:grid-cg,rowGap:rg,columnGap:cg,justifyContent:jc,alignContent:ac,alignItems:ai,alignSelf:as,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pbe,paddingBlockStart:pbs,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mbe,marginBlockStart:mbs,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,spaceX:sx,spaceY:sy,outlineWidth:ring-w/ringWidth,outlineColor:ring-c/ringColor,outline:ring/1,outlineOffset:ring-o/ringOffset,focusRing:focus-ring,focusVisibleRing:focus-v-ring,focusRingColor:focus-ring-c,focusRingOffset:focus-ring-o,focusRingWidth:focus-ring-w,focusRingStyle:focus-ring-s,divideX:dvd-x,divideY:dvd-y,divideColor:dvd-c,divideStyle:dvd-s,width:w/1,inlineSize:w-is,minWidth:min-w/minW,minInlineSize:min-w-is,maxWidth:max-w/maxW,maxInlineSize:max-w-is,height:h/1,blockSize:h-bs,minHeight:min-h/minH,minBlockSize:min-h-bs,maxHeight:max-h/maxH,maxBlockSize:max-b,boxSize:size,color:c,fontFamily:ff,fontSize:fs,fontSizeAdjust:fs-a,fontPalette:fp,fontKerning:fk,fontFeatureSettings:ff-s,fontWeight:fw,fontSmoothing:fsmt,fontVariant:fv,fontVariantAlternates:fv-alt,fontVariantCaps:fv-caps,fontVariationSettings:fv-s,fontVariantNumeric:fv-num,letterSpacing:ls,lineHeight:lh,textAlign:ta,textDecoration:td,textDecorationColor:td-c,textEmphasisColor:te-c,textDecorationStyle:td-s,textDecorationThickness:td-t,textUnderlineOffset:tu-o,textTransform:tt,textIndent:ti,textShadow:tsh,textShadowColor:tsh-c/textShadowColor,WebkitTextFillColor:wktf-c,textOverflow:tov,verticalAlign:va,wordBreak:wb,textWrap:tw,truncate:trunc,lineClamp:lc,listStyleType:li-t,listStylePosition:li-pos,listStyleImage:li-img,listStyle:li-s,backgroundPosition:bg-p/bgPosition,backgroundPositionX:bg-p-x/bgPositionX,backgroundPositionY:bg-p-y/bgPositionY,backgroundAttachment:bg-a/bgAttachment,backgroundClip:bg-cp/bgClip,background:bg/1,backgroundColor:bg-c/bgColor,backgroundOrigin:bg-o/bgOrigin,backgroundImage:bg-i/bgImage,backgroundRepeat:bg-r/bgRepeat,backgroundBlendMode:bg-bm/bgBlendMode,backgroundSize:bg-s/bgSize,backgroundGradient:bg-grad/bgGradient,backgroundLinear:bg-linear/bgLinear,backgroundRadial:bg-radial/bgRadial,backgroundConic:bg-conic/bgConic,textGradient:txt-grad,gradientFromPosition:grad-from-pos,gradientToPosition:grad-to-pos,gradientFrom:grad-from,gradientTo:grad-to,gradientVia:grad-via,gradientViaPosition:grad-via-pos,borderRadius:bdr/rounded,borderTopLeftRadius:bdr-tl/roundedTopLeft,borderTopRightRadius:bdr-tr/roundedTopRight,borderBottomRightRadius:bdr-br/roundedBottomRight,borderBottomLeftRadius:bdr-bl/roundedBottomLeft,borderTopRadius:bdr-t/roundedTop,borderRightRadius:bdr-r/roundedRight,borderBottomRadius:bdr-b/roundedBottom,borderLeftRadius:bdr-l/roundedLeft,borderStartStartRadius:bdr-ss/roundedStartStart,borderStartEndRadius:bdr-se/roundedStartEnd,borderStartRadius:bdr-s/roundedStart,borderEndStartRadius:bdr-es/roundedEndStart,borderEndEndRadius:bdr-ee/roundedEndEnd,borderEndRadius:bdr-e/roundedEnd,border:bd,borderWidth:bd-w,borderTopWidth:bd-t-w,borderLeftWidth:bd-l-w,borderRightWidth:bd-r-w,borderBottomWidth:bd-b-w,borderBlockStartWidth:bd-bs-w,borderBlockEndWidth:bd-be-w,borderColor:bd-c,borderInline:bd-x/borderX,borderInlineWidth:bd-x-w/borderXWidth,borderInlineColor:bd-x-c/borderXColor,borderBlock:bd-y/borderY,borderBlockWidth:bd-y-w/borderYWidth,borderBlockColor:bd-y-c/borderYColor,borderLeft:bd-l,borderLeftColor:bd-l-c,borderInlineStart:bd-s/borderStart,borderInlineStartWidth:bd-s-w/borderStartWidth,borderInlineStartColor:bd-s-c/borderStartColor,borderRight:bd-r,borderRightColor:bd-r-c,borderInlineEnd:bd-e/borderEnd,borderInlineEndWidth:bd-e-w/borderEndWidth,borderInlineEndColor:bd-e-c/borderEndColor,borderTop:bd-t,borderTopColor:bd-t-c,borderBottom:bd-b,borderBottomColor:bd-b-c,borderBlockEnd:bd-be,borderBlockEndColor:bd-be-c,borderBlockStart:bd-bs,borderBlockStartColor:bd-bs-c,opacity:op,boxShadow:bx-sh/shadow,boxShadowColor:bx-sh-c/shadowColor,mixBlendMode:mix-bm,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:bkdp,backdropBlur:bkdp-blur,backdropBrightness:bkdp-brightness,backdropContrast:bkdp-contrast,backdropGrayscale:bkdp-grayscale,backdropHueRotate:bkdp-hue-rotate,backdropInvert:bkdp-invert,backdropOpacity:bkdp-opacity,backdropSaturate:bkdp-saturate,backdropSepia:bkdp-sepia,borderCollapse:bd-cl,borderSpacing:bd-sp,borderSpacingX:bd-sx,borderSpacingY:bd-sy,tableLayout:tbl,transitionTimingFunction:trs-tmf,transitionDelay:trs-dly,transitionDuration:trs-dur,transitionProperty:trs-prop,transition:trs,animation:anim,animationName:anim-n,animationTimingFunction:anim-tmf,animationDuration:anim-dur,animationDelay:anim-dly,animationPlayState:anim-ps,animationComposition:anim-comp,animationFillMode:anim-fm,animationDirection:anim-dir,animationIterationCount:anim-ic,animationRange:anim-r,animationState:anim-s,animationRangeStart:anim-rs,animationRangeEnd:anim-re,animationTimeline:anim-tl,transformOrigin:trf-o,transformBox:trf-b,transformStyle:trf-s,transform:trf,rotate:rotate,rotateX:rotate-x,rotateY:rotate-y,rotateZ:rotate-z,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,translateZ:translate-z/z,accentColor:ac-c,caretColor:ca-c,scrollBehavior:scr-bhv,scrollbar:scr-bar,scrollbarColor:scr-bar-c,scrollbarGutter:scr-bar-g,scrollbarWidth:scr-bar-w,scrollMargin:scr-m,scrollMarginLeft:scr-ml,scrollMarginRight:scr-mr,scrollMarginTop:scr-mt,scrollMarginBottom:scr-mb,scrollMarginBlock:scr-my/scrollMarginY,scrollMarginBlockEnd:scr-mbe,scrollMarginBlockStart:scr-mbt,scrollMarginInline:scr-mx/scrollMarginX,scrollMarginInlineEnd:scr-me,scrollMarginInlineStart:scr-ms,scrollPadding:scr-p,scrollPaddingBlock:scr-py/scrollPaddingY,scrollPaddingBlockStart:scr-pbs,scrollPaddingBlockEnd:scr-pbe,scrollPaddingInline:scr-px/scrollPaddingX,scrollPaddingInlineEnd:scr-pe,scrollPaddingInlineStart:scr-ps,scrollPaddingLeft:scr-pl,scrollPaddingRight:scr-pr,scrollPaddingTop:scr-pt,scrollPaddingBottom:scr-pb,scrollSnapAlign:scr-sa,scrollSnapStop:scrs-s,scrollSnapType:scrs-t,scrollSnapStrictness:scrs-strt,scrollSnapMargin:scrs-m,scrollSnapMarginTop:scrs-mt,scrollSnapMarginBottom:scrs-mb,scrollSnapMarginLeft:scrs-ml,scrollSnapMarginRight:scrs-mr,scrollSnapCoordinate:scrs-c,scrollSnapDestination:scrs-d,scrollSnapPointsX:scrs-px,scrollSnapPointsY:scrs-py,scrollSnapTypeX:scrs-tx,scrollSnapTypeY:scrs-ty,scrollTimeline:scrtl,scrollTimelineAxis:scrtl-a,scrollTimelineName:scrtl-n,touchAction:tch-a,userSelect:us,overflow:ov,overflowWrap:ov-wrap,overflowX:ov-x,overflowY:ov-y,overflowAnchor:ov-a,overflowBlock:ov-b,overflowInline:ov-i,overflowClipBox:ovcp-bx,overflowClipMargin:ovcp-m,overscrollBehaviorBlock:ovs-bb,overscrollBehaviorInline:ovs-bi,fill:fill,stroke:stk,strokeWidth:stk-w,strokeDasharray:stk-dsh,strokeDashoffset:stk-do,strokeLinecap:stk-lc,strokeLinejoin:stk-lj,strokeMiterlimit:stk-ml,strokeOpacity:stk-op,srOnly:sr,debug:debug,appearance:ap,backfaceVisibility:bfv,clipPath:cp-path,hyphens:hy,mask:msk,maskImage:msk-i,maskSize:msk-s,textSizeAdjust:txt-adj,container:cq,containerName:cq-n,containerType:cq-t,cursor:cursor";
-const classNameByProp = new Map();
-const shorthands = new Map();
-utilities.split(',').forEach((utility) => {
-    const [prop, meta] = utility.split(':');
-    const [className, ...shorthandList] = meta.split('/');
-    classNameByProp.set(prop, className);
-    if (shorthandList.length) {
-        shorthandList.forEach((shorthand) => {
-            shorthands.set(shorthand === '1' ? className : shorthand, prop);
-        });
-    }
-});
-const resolveShorthand = (prop) => shorthands.get(prop) || prop;
-const context = {
-    hash: true,
-    conditions: {
-        shift: conditions_js_1.sortConditions,
-        finalize: conditions_js_1.finalizeConditions,
-        breakpoints: { keys: ["base", "sm", "lg"] }
-    },
-    utility: {
-        prefix: "mfui-2-48-1",
-        transform: (prop, value) => {
-            const key = resolveShorthand(prop);
-            const propKey = classNameByProp.get(key) || (0, helpers_js_1.hypenateProperty)(key);
-            return { className: `${propKey}_${(0, helpers_js_1.withoutSpace)(value)}` };
-        },
-        hasShorthand: true,
-        toHash: (path, hashFn) => hashFn(path.join(":")),
-        resolveShorthand: resolveShorthand,
-    }
-};
-const cssFn = (0, helpers_js_1.createCss)(context);
-const css = (...styles) => cssFn((0, exports.mergeCss)(...styles));
-exports.css = css;
-exports.css.raw = (...styles) => (0, exports.mergeCss)(...styles);
-_a = (0, helpers_js_1.createMergeCss)(context), exports.mergeCss = _a.mergeCss, exports.assignCss = _a.assignCss;

package/dist/cjs/styled-system/css/cva.js

@@ -1,77 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cva = cva;
-exports.getCompoundVariantCss = getCompoundVariantCss;
-exports.assertCompoundVariant = assertCompoundVariant;
-const helpers_js_1 = require("../helpers.js");
-const css_js_1 = require("./css.js");
-const defaults = (conf) => ({
-    base: {},
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
-    ...conf,
-});
-function cva(config) {
-    const { base, variants, defaultVariants, compoundVariants } = defaults(config);
-    const getVariantProps = (variants) => ({ ...defaultVariants, ...(0, helpers_js_1.compact)(variants) });
-    function resolve(props = {}) {
-        const computedVariants = getVariantProps(props);
-        let variantCss = { ...base };
-        for (const [key, value] of Object.entries(computedVariants)) {
-            if (variants[key]?.[value]) {
-                variantCss = (0, css_js_1.mergeCss)(variantCss, variants[key][value]);
-            }
-        }
-        const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants);
-        return (0, css_js_1.mergeCss)(variantCss, compoundVariantCss);
-    }
-    function merge(__cva) {
-        const override = defaults(__cva.config);
-        const variantKeys = (0, helpers_js_1.uniq)(__cva.variantKeys, Object.keys(variants));
-        return cva({
-            base: (0, css_js_1.mergeCss)(base, override.base),
-            variants: Object.fromEntries(variantKeys.map((key) => [key, (0, css_js_1.mergeCss)(variants[key], override.variants[key])])),
-            defaultVariants: (0, helpers_js_1.mergeProps)(defaultVariants, override.defaultVariants),
-            compoundVariants: [...compoundVariants, ...override.compoundVariants],
-        });
-    }
-    function cvaFn(props) {
-        return (0, css_js_1.css)(resolve(props));
-    }
-    const variantKeys = Object.keys(variants);
-    function splitVariantProps(props) {
-        return (0, helpers_js_1.splitProps)(props, variantKeys);
-    }
-    const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]));
-    return Object.assign((0, helpers_js_1.memo)(cvaFn), {
-        __cva__: true,
-        variantMap,
-        variantKeys,
-        raw: resolve,
-        config,
-        merge,
-        splitVariantProps,
-        getVariantProps
-    });
-}
-function getCompoundVariantCss(compoundVariants, variantMap) {
-    let result = {};
-    compoundVariants.forEach((compoundVariant) => {
-        const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
-            if (key === 'css')
-                return true;
-            const values = Array.isArray(value) ? value : [value];
-            return values.some((value) => variantMap[key] === value);
-        });
-        if (isMatching) {
-            result = (0, css_js_1.mergeCss)(result, compoundVariant.css);
-        }
-    });
-    return result;
-}
-function assertCompoundVariant(name, compoundVariants, variants, prop) {
-    if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') {
-        throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`);
-    }
-}

package/dist/cjs/styled-system/css/cx.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cx = cx;
-function cx() {
-    let str = '', i = 0, arg;
-    for (; i < arguments.length;) {
-        if ((arg = arguments[i++]) && typeof arg === 'string') {
-            str && (str += ' ');
-            str += arg;
-        }
-    }
-    return str;
-}

package/dist/cjs/styled-system/css/index.js

@@ -1,20 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./css.js"), exports);
-__exportStar(require("./cx.js"), exports);
-__exportStar(require("./cva.js"), exports);
-__exportStar(require("./sva.js"), exports);

package/dist/cjs/styled-system/css/sva.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sva = sva;
-const helpers_js_1 = require("../helpers.js");
-const cva_js_1 = require("./cva.js");
-const cx_js_1 = require("./cx.js");
-function sva(config) {
-    const slots = Object.entries((0, helpers_js_1.getSlotRecipes)(config)).map(([slot, slotCva]) => [slot, (0, cva_js_1.cva)(slotCva)]);
-    const defaultVariants = config.defaultVariants ?? {};
-    const classNameMap = slots.reduce((acc, [slot, cvaFn]) => {
-        if (config.className)
-            acc[slot] = cvaFn.config.className;
-        return acc;
-    }, {});
-    function svaFn(props) {
-        const result = slots.map(([slot, cvaFn]) => [slot, (0, cx_js_1.cx)(cvaFn(props), classNameMap[slot])]);
-        return Object.fromEntries(result);
-    }
-    function raw(props) {
-        const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)]);
-        return Object.fromEntries(result);
-    }
-    const variants = config.variants ?? {};
-    const variantKeys = Object.keys(variants);
-    function splitVariantProps(props) {
-        return (0, helpers_js_1.splitProps)(props, variantKeys);
-    }
-    const getVariantProps = (variants) => ({ ...defaultVariants, ...(0, helpers_js_1.compact)(variants) });
-    const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]));
-    return Object.assign((0, helpers_js_1.memo)(svaFn), {
-        __cva__: false,
-        raw,
-        config,
-        variantMap,
-        variantKeys,
-        classNameMap,
-        splitVariantProps,
-        getVariantProps,
-    });
-}