@moneyforward/mfui-components 2.48.1

package/dist/cjs/src/utilities/state/useInputHasValue.d.ts

@@ -0,0 +1,57 @@
+import { type ChangeEvent, type ChangeEventHandler, type ComponentPropsWithoutRef, type FormEventHandler } from 'react';
+/**
+ * Options for the useInputHasValue hook.
+ */
+export type UseInputHasValueOptions = {
+    /**
+     * The initial value of the input.
+     * This is used to determine the initial hasValue state.
+     * If both initialValue and value are provided, value takes precedence.
+     */
+    initialValue?: ComponentPropsWithoutRef<'input'>['value'];
+    /**
+     * The controlled value of the input.
+     * When this changes, the hasValue state will be updated accordingly.
+     * Takes precedence over initialValue.
+     */
+    value?: ComponentPropsWithoutRef<'input'>['value'];
+    /**
+     * Callback fired when the input's value changes.
+     * This is triggered by the onChange event of the input element.
+     *
+     * @param event - The change event from the input element
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Callback fired when the input event occurs.
+     * This is triggered by the onInput event of the input element.
+     *
+     * @param event - The input event from the input element
+     */
+    onInput?: FormEventHandler<HTMLInputElement>;
+};
+/**
+ * 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),
+ * });
+ * ```
+ */
+export declare const useInputHasValue: (options: UseInputHasValueOptions) => {
+    hasValue: boolean;
+    handleInput: (event: ChangeEvent<HTMLInputElement>) => void;
+    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+};

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

@@ -0,0 +1,48 @@
+"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.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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)
+ */
+export declare const useLatest: <T>(value: T) => {
+    readonly current: T;
+};

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

@@ -0,0 +1,23 @@
+"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.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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]
+ */
+export declare function useTransformedState<T>(initialValue: T, transform: (value: T) => T): [T, (value: T | ((previous: T) => T)) => void];

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

@@ -0,0 +1,26 @@
+"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.d.ts

@@ -0,0 +1,3 @@
+export function isCondition(value: any): boolean;
+export function finalizeConditions(paths: any): any;
+export function sortConditions(paths: any): any;

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

@@ -0,0 +1,36 @@
+"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.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import type { SystemStyleObject } from '../types/index';
+
+type Styles = SystemStyleObject | undefined | null | false
+
+interface CssRawFunction {
+  (styles: Styles): SystemStyleObject
+  (styles: Styles[]): SystemStyleObject
+  (...styles: Array<Styles | Styles[]>): SystemStyleObject
+  (styles: Styles): SystemStyleObject
+}
+
+interface CssFunction {
+  (styles: Styles): string
+  (styles: Styles[]): string
+  (...styles: Array<Styles | Styles[]>): string
+  (styles: Styles): string
+
+  raw: CssRawFunction
+}
+
+export declare const css: CssFunction;

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

@@ -0,0 +1,44 @@
+"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.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+import type { RecipeCreatorFn } from '../types/recipe';
+
+export declare const cva: RecipeCreatorFn
+
+export type { RecipeVariant, RecipeVariantProps } from '../types/recipe';

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

@@ -0,0 +1,77 @@
+"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.d.ts

@@ -0,0 +1,5 @@
+/* eslint-disable */
+type Argument = string | boolean | null | undefined
+
+/** Conditionally join classNames into a single string */
+export declare function cx(...args: Argument[]): string

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

@@ -0,0 +1,13 @@
+"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.d.ts

@@ -0,0 +1,5 @@
+/* eslint-disable */
+export * from './css';
+export * from './cx';
+export * from './cva';
+export * from './sva';

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

@@ -0,0 +1,20 @@
+"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.d.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import type { SlotRecipeCreatorFn } from '../types/recipe';
+
+export declare const sva: SlotRecipeCreatorFn

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

@@ -0,0 +1,40 @@
+"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,
+    });
+}

package/dist/cjs/styled-system/helpers.d.ts

@@ -0,0 +1,44 @@
+export function __spreadValues(a: any, b: any): any;
+export function __objRest(source: any, exclude: any): {
+    [k: string]: any;
+};
+export function compact(value: any): {
+    [k: string]: any;
+};
+export function createCss(context: any): (...args: any[]) => any;
+export function createMergeCss(context: any): {
+    mergeCss: (...args: any[]) => any;
+    assignCss: (...styles: any[]) => any;
+};
+export function filterBaseConditions(c: any): any;
+export function getPatternStyles(pattern: any, styles: any): any;
+export function getSlotCompoundVariant(compoundVariants: any, slotName: any): any;
+export function getSlotRecipes(recipe?: {}): {
+    [k: string]: any;
+};
+export function hypenateProperty(...args: any[]): any;
+export function isBaseCondition(v: any): boolean;
+export function isObject(value: any): boolean;
+export function mapObject(obj: any, fn: any): any;
+export function memo(fn: any): (...args: any[]) => any;
+export function mergeProps(...sources: any[]): any;
+export namespace patternFns {
+    export { mapObject as map };
+    export { isCssFunction };
+    export { isCssVar };
+    export { isCssUnit };
+}
+export function splitProps(props: any, ...keys: any[]): {}[];
+export function toHash(value: any): string;
+export function uniq(...items: any[]): any[];
+export function walkObject(target: any, predicate: any, options?: {}): any;
+export function withoutSpace(str: any): any;
+export function normalizeHTMLProps(props: any): any;
+export namespace normalizeHTMLProps {
+    export { htmlProps as keys };
+}
+declare function isCssFunction(v: any): boolean;
+declare function isCssVar(v: any): boolean;
+declare function isCssUnit(v: any): boolean;
+declare var htmlProps: string[];
+export {};