@moneyforward/mfui-components 2.48.1

package/dist/esm/styled-system/helpers.js

@@ -0,0 +1,289 @@
+// src/assert.ts
+function isObject(value) {
+    return typeof value === "object" && value != null && !Array.isArray(value);
+}
+var isObjectOrArray = (obj) => typeof obj === "object" && obj !== null;
+// src/compact.ts
+function compact(value) {
+    return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0));
+}
+// src/condition.ts
+var isBaseCondition = (v) => v === "base";
+function filterBaseConditions(c) {
+    return c.slice().filter((v) => !isBaseCondition(v));
+}
+// src/hash.ts
+function toChar(code) {
+    return String.fromCharCode(code + (code > 25 ? 39 : 97));
+}
+function toName(code) {
+    let name = "";
+    let x;
+    for (x = Math.abs(code); x > 52; x = x / 52 | 0)
+        name = toChar(x % 52) + name;
+    return toChar(x % 52) + name;
+}
+function toPhash(h, x) {
+    let i = x.length;
+    while (i)
+        h = h * 33 ^ x.charCodeAt(--i);
+    return h;
+}
+function toHash(value) {
+    return toName(toPhash(5381, value) >>> 0);
+}
+// src/important.ts
+var importantRegex = /\s*!(important)?/i;
+function isImportant(value) {
+    return typeof value === "string" ? importantRegex.test(value) : false;
+}
+function withoutImportant(value) {
+    return typeof value === "string" ? value.replace(importantRegex, "").trim() : value;
+}
+function withoutSpace(str) {
+    return typeof str === "string" ? str.replaceAll(" ", "_") : str;
+}
+// src/memo.ts
+var memo = (fn) => {
+    const cache = /* @__PURE__ */ new Map();
+    const get = (...args) => {
+        const key = JSON.stringify(args);
+        if (cache.has(key)) {
+            return cache.get(key);
+        }
+        const result = fn(...args);
+        cache.set(key, result);
+        return result;
+    };
+    return get;
+};
+// src/merge-props.ts
+var MERGE_OMIT = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
+function mergeProps(...sources) {
+    return sources.reduce((prev, obj) => {
+        if (!obj)
+            return prev;
+        Object.keys(obj).forEach((key) => {
+            if (MERGE_OMIT.has(key))
+                return;
+            const prevValue = prev[key];
+            const value = obj[key];
+            if (isObject(prevValue) && isObject(value)) {
+                prev[key] = mergeProps(prevValue, value);
+            }
+            else {
+                prev[key] = value;
+            }
+        });
+        return prev;
+    }, {});
+}
+// src/walk-object.ts
+var isNotNullish = (element) => element != null;
+function walkObject(target, predicate, options = {}) {
+    const { stop, getKey } = options;
+    function inner(value, path = []) {
+        if (isObjectOrArray(value)) {
+            const result = {};
+            for (const [prop, child] of Object.entries(value)) {
+                const key = getKey?.(prop, child) ?? prop;
+                const childPath = [...path, key];
+                if (stop?.(value, childPath)) {
+                    return predicate(value, path);
+                }
+                const next = inner(child, childPath);
+                if (isNotNullish(next)) {
+                    result[key] = next;
+                }
+            }
+            return result;
+        }
+        return predicate(value, path);
+    }
+    return inner(target);
+}
+function mapObject(obj, fn) {
+    if (Array.isArray(obj))
+        return obj.map((value) => fn(value));
+    if (!isObject(obj))
+        return fn(obj);
+    return walkObject(obj, (value) => fn(value));
+}
+// src/normalize-style-object.ts
+function toResponsiveObject(values, breakpoints) {
+    return values.reduce((acc, current, index) => {
+        const key = breakpoints[index];
+        if (current != null) {
+            acc[key] = current;
+        }
+        return acc;
+    }, {});
+}
+function normalizeStyleObject(styles, context, shorthand = true) {
+    const { utility, conditions } = context;
+    const { hasShorthand, resolveShorthand } = utility;
+    return walkObject(styles, (value) => {
+        return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value;
+    }, {
+        stop: (value) => Array.isArray(value),
+        getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0
+    });
+}
+// src/classname.ts
+var fallbackCondition = {
+    shift: (v) => v,
+    finalize: (v) => v,
+    breakpoints: { keys: [] }
+};
+var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value;
+function createCss(context) {
+    const { utility, hash, conditions: conds = fallbackCondition } = context;
+    const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-");
+    const hashFn = (conditions, className) => {
+        let result;
+        if (hash) {
+            const baseArray = [...conds.finalize(conditions), className];
+            result = formatClassName(utility.toHash(baseArray, toHash));
+        }
+        else {
+            const baseArray = [...conds.finalize(conditions), formatClassName(className)];
+            result = baseArray.join(":");
+        }
+        return result;
+    };
+    return memo(({ base, ...styles } = {}) => {
+        const styleObject = Object.assign(styles, base);
+        const normalizedObject = normalizeStyleObject(styleObject, context);
+        const classNames = /* @__PURE__ */ new Set();
+        walkObject(normalizedObject, (value, paths) => {
+            if (value == null)
+                return;
+            const important = isImportant(value);
+            const [prop, ...allConditions] = conds.shift(paths);
+            const conditions = filterBaseConditions(allConditions);
+            const transformed = utility.transform(prop, withoutImportant(sanitize(value)));
+            let className = hashFn(conditions, transformed.className);
+            if (important)
+                className = `${className}!`;
+            classNames.add(className);
+        });
+        return Array.from(classNames).join(" ");
+    });
+}
+function compactStyles(...styles) {
+    return styles.flat().filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
+}
+function createMergeCss(context) {
+    function resolve(styles) {
+        const allStyles = compactStyles(...styles);
+        if (allStyles.length === 1)
+            return allStyles;
+        return allStyles.map((style) => normalizeStyleObject(style, context));
+    }
+    function mergeCss(...styles) {
+        return mergeProps(...resolve(styles));
+    }
+    function assignCss(...styles) {
+        return Object.assign({}, ...resolve(styles));
+    }
+    return { mergeCss: memo(mergeCss), assignCss };
+}
+// src/hypenate-property.ts
+var wordRegex = /([A-Z])/g;
+var msRegex = /^ms-/;
+var hypenateProperty = memo((property) => {
+    if (property.startsWith("--"))
+        return property;
+    return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();
+});
+// src/is-css-function.ts
+var fns = ["min", "max", "clamp", "calc"];
+var fnRegExp = new RegExp(`^(${fns.join("|")})\\(.*\\)`);
+var isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);
+// src/is-css-unit.ts
+var lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";
+var lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;
+var lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);
+var isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);
+// src/is-css-var.ts
+var isCssVar = (v) => typeof v === "string" && /^var\(--.+\)$/.test(v);
+// src/pattern-fns.ts
+var patternFns = {
+    map: mapObject,
+    isCssFunction,
+    isCssVar,
+    isCssUnit
+};
+var getPatternStyles = (pattern, styles) => {
+    if (!pattern?.defaultValues)
+        return styles;
+    const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;
+    return Object.assign({}, defaults, compact(styles));
+};
+// src/slot.ts
+var getSlotRecipes = (recipe = {}) => {
+    const init = (slot) => ({
+        className: [recipe.className, slot].filter(Boolean).join("__"),
+        base: recipe.base?.[slot] ?? {},
+        variants: {},
+        defaultVariants: recipe.defaultVariants ?? {},
+        compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : []
+    });
+    const slots = recipe.slots ?? [];
+    const recipeParts = slots.map((slot) => [slot, init(slot)]);
+    for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) {
+        for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) {
+            recipeParts.forEach(([slot, slotRecipe]) => {
+                slotRecipe.variants[variantsKey] ??= {};
+                slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {};
+            });
+        }
+    }
+    return Object.fromEntries(recipeParts);
+};
+var getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));
+// src/split-props.ts
+function splitProps(props, ...keys) {
+    const descriptors = Object.getOwnPropertyDescriptors(props);
+    const dKeys = Object.keys(descriptors);
+    const split = (k) => {
+        const clone = {};
+        for (let i = 0; i < k.length; i++) {
+            const key = k[i];
+            if (descriptors[key]) {
+                Object.defineProperty(clone, key, descriptors[key]);
+                delete descriptors[key];
+            }
+        }
+        return clone;
+    };
+    const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key));
+    return keys.map(fn).concat(split(dKeys));
+}
+// src/uniq.ts
+var uniq = (...items) => {
+    const set = items.reduce((acc, currItems) => {
+        if (currItems) {
+            currItems.forEach((item) => acc.add(item));
+        }
+        return acc;
+    }, /* @__PURE__ */ new Set([]));
+    return Array.from(set);
+};
+export { compact, createCss, createMergeCss, filterBaseConditions, getPatternStyles, getSlotCompoundVariant, getSlotRecipes, hypenateProperty, isBaseCondition, isObject, mapObject, memo, mergeProps, patternFns, splitProps, toHash, uniq, walkObject, withoutSpace };
+// src/normalize-html.ts
+var htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"];
+function convert(key) {
+    return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key;
+}
+function normalizeHTMLProps(props) {
+    return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]));
+}
+normalizeHTMLProps.keys = htmlProps;
+export { normalizeHTMLProps };
+export function __spreadValues(a, b) {
+    return { ...a, ...b };
+}
+export function __objRest(source, exclude) {
+    return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key)));
+}

package/dist/esm/styled-system/jsx/aspect-ratio.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { AspectRatioProperties } from '../patterns/aspect-ratio';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface AspectRatioProps extends AspectRatioProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof AspectRatioProperties | 'aspectRatio'> {}
+
+
+export declare const AspectRatio: FunctionComponent<AspectRatioProps>

package/dist/esm/styled-system/jsx/aspect-ratio.js

@@ -0,0 +1,10 @@
+import { createElement, forwardRef } from 'react';
+import { splitProps } from '../helpers.js';
+import { getAspectRatioStyle } from '../patterns/aspect-ratio.js';
+import { styled } from './factory.js';
+export const AspectRatio = /* @__PURE__ */ forwardRef(function AspectRatio(props, ref) {
+    const [patternProps, restProps] = splitProps(props, ["ratio"]);
+    const styleProps = getAspectRatioStyle(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return createElement(styled.div, mergedProps);
+});

package/dist/esm/styled-system/jsx/bleed.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { BleedProperties } from '../patterns/bleed';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface BleedProps extends BleedProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BleedProperties > {}
+
+
+export declare const Bleed: FunctionComponent<BleedProps>

package/dist/esm/styled-system/jsx/bleed.js

@@ -0,0 +1,10 @@
+import { createElement, forwardRef } from 'react';
+import { splitProps } from '../helpers.js';
+import { getBleedStyle } from '../patterns/bleed.js';
+import { styled } from './factory.js';
+export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) {
+    const [patternProps, restProps] = splitProps(props, ["inline", "block"]);
+    const styleProps = getBleedStyle(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return createElement(styled.div, mergedProps);
+});

package/dist/esm/styled-system/jsx/box.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { BoxProperties } from '../patterns/box';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface BoxProps extends BoxProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BoxProperties > {}
+
+
+export declare const Box: FunctionComponent<BoxProps>

package/dist/esm/styled-system/jsx/box.js

@@ -0,0 +1,10 @@
+import { createElement, forwardRef } from 'react';
+import { splitProps } from '../helpers.js';
+import { getBoxStyle } from '../patterns/box.js';
+import { styled } from './factory.js';
+export const Box = /* @__PURE__ */ forwardRef(function Box(props, ref) {
+    const [patternProps, restProps] = splitProps(props, []);
+    const styleProps = getBoxStyle(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return createElement(styled.div, mergedProps);
+});

package/dist/esm/styled-system/jsx/center.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { CenterProperties } from '../patterns/center';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface CenterProps extends CenterProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CenterProperties > {}
+
+
+export declare const Center: FunctionComponent<CenterProps>

package/dist/esm/styled-system/jsx/center.js

@@ -0,0 +1,10 @@
+import { createElement, forwardRef } from 'react';
+import { splitProps } from '../helpers.js';
+import { getCenterStyle } from '../patterns/center.js';
+import { styled } from './factory.js';
+export const Center = /* @__PURE__ */ forwardRef(function Center(props, ref) {
+    const [patternProps, restProps] = splitProps(props, ["inline"]);
+    const styleProps = getCenterStyle(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return createElement(styled.div, mergedProps);
+});

package/dist/esm/styled-system/jsx/circle.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { CircleProperties } from '../patterns/circle';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface CircleProps extends CircleProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CircleProperties > {}
+
+
+export declare const Circle: FunctionComponent<CircleProps>

package/dist/esm/styled-system/jsx/circle.js

@@ -0,0 +1,10 @@
+import { createElement, forwardRef } from 'react';
+import { splitProps } from '../helpers.js';
+import { getCircleStyle } from '../patterns/circle.js';
+import { styled } from './factory.js';
+export const Circle = /* @__PURE__ */ forwardRef(function Circle(props, ref) {
+    const [patternProps, restProps] = splitProps(props, ["size"]);
+    const styleProps = getCircleStyle(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return createElement(styled.div, mergedProps);
+});

package/dist/esm/styled-system/jsx/container.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { ContainerProperties } from '../patterns/container';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface ContainerProps extends ContainerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof ContainerProperties > {}
+
+
+export declare const Container: FunctionComponent<ContainerProps>

package/dist/esm/styled-system/jsx/container.js

@@ -0,0 +1,10 @@
+import { createElement, forwardRef } from 'react';
+import { splitProps } from '../helpers.js';
+import { getContainerStyle } from '../patterns/container.js';
+import { styled } from './factory.js';
+export const Container = /* @__PURE__ */ forwardRef(function Container(props, ref) {
+    const [patternProps, restProps] = splitProps(props, []);
+    const styleProps = getContainerStyle(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return createElement(styled.div, mergedProps);
+});

package/dist/esm/styled-system/jsx/cq.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { CqProperties } from '../patterns/cq';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface CqProps extends CqProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CqProperties > {}
+
+
+export declare const Cq: FunctionComponent<CqProps>

package/dist/esm/styled-system/jsx/cq.js

@@ -0,0 +1,10 @@
+import { createElement, forwardRef } from 'react';
+import { splitProps } from '../helpers.js';
+import { getCqStyle } from '../patterns/cq.js';
+import { styled } from './factory.js';
+export const Cq = /* @__PURE__ */ forwardRef(function Cq(props, ref) {
+    const [patternProps, restProps] = splitProps(props, ["name", "type"]);
+    const styleProps = getCqStyle(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return createElement(styled.div, mergedProps);
+});

package/dist/esm/styled-system/jsx/create-style-context.d.ts

@@ -0,0 +1,54 @@
+/* eslint-disable */
+import type { SlotRecipeRuntimeFn, RecipeVariantProps } from '../types/recipe';
+import type { JsxHTMLProps, JsxStyleProps, Assign } from '../types/system-types';
+import type { JsxFactoryOptions, ComponentProps, DataAttrs, AsProps } from '../types/jsx';
+import type { ComponentType, ElementType } from 'react'
+
+interface UnstyledProps {
+  unstyled?: boolean | undefined
+}
+
+type SvaFn<S extends string = any> = SlotRecipeRuntimeFn<S, any>
+interface SlotRecipeFn {
+  __type: any
+  __slot: string
+  (props?: any): any
+}
+type SlotRecipe = SvaFn | SlotRecipeFn
+
+type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
+
+interface WithProviderOptions<P = {}> {
+  defaultProps?: (Partial<P> & DataAttrs) | undefined
+}
+
+type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+>
+
+type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
+  ComponentProps<T> & UnstyledProps & RecipeVariantProps<R>
+>
+
+type StyleContextConsumer<T extends ElementType> = ComponentType<
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
+>
+
+export interface StyleContext<R extends SlotRecipe> {
+  withRootProvider: <T extends ElementType>(
+    Component: T,
+    options?: WithProviderOptions<ComponentProps<T>> | undefined
+  ) => StyleContextRootProvider<T, R>
+  withProvider: <T extends ElementType>(
+    Component: T,
+    slot: InferSlot<R>,
+    options?: JsxFactoryOptions<ComponentProps<T>> | undefined
+  ) => StyleContextProvider<T, R>
+  withContext: <T extends ElementType>(
+    Component: T,
+    slot: InferSlot<R>,
+    options?: JsxFactoryOptions<ComponentProps<T>> | undefined
+  ) => StyleContextConsumer<T>
+}
+
+export declare function createStyleContext<R extends SlotRecipe>(recipe: R): StyleContext<R>

package/dist/esm/styled-system/jsx/create-style-context.js

@@ -0,0 +1,93 @@
+'use client';
+import { cx, css, sva } from '../css/index.js';
+import { styled } from './factory.js';
+import { getDisplayName } from './factory-helper.js';
+import { createContext, useContext, createElement, forwardRef } from 'react';
+function createSafeContext(contextName) {
+    const Context = createContext(undefined);
+    const useStyleContext = (componentName, slot) => {
+        const context = useContext(Context);
+        if (context === undefined) {
+            const componentInfo = componentName ? `Component "${componentName}"` : 'A component';
+            const slotInfo = slot ? ` (slot: "${slot}")` : '';
+            throw new Error(`${componentInfo}${slotInfo} cannot access ${contextName} because it's missing its Provider.`);
+        }
+        return context;
+    };
+    return [Context, useStyleContext];
+}
+export function createStyleContext(recipe) {
+    const isConfigRecipe = '__recipe__' in recipe;
+    const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined;
+    const contextName = recipeName ? `createStyleContext("${recipeName}")` : 'createStyleContext';
+    const [StyleContext, useStyleContext] = createSafeContext(contextName);
+    const svaFn = isConfigRecipe ? recipe : sva(recipe.config);
+    const getResolvedProps = (props, slotStyles) => {
+        const { unstyled, ...restProps } = props;
+        if (unstyled)
+            return restProps;
+        if (isConfigRecipe) {
+            return { ...restProps, className: cx(slotStyles, restProps.className) };
+        }
+        return { ...slotStyles, ...restProps };
+    };
+    const withRootProvider = (Component, options) => {
+        const WithRootProvider = (props) => {
+            const [variantProps, otherProps] = svaFn.splitVariantProps(props);
+            const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps);
+            slotStyles._classNameMap = svaFn.classNameMap;
+            const mergedProps = options?.defaultProps
+                ? { ...options.defaultProps, ...otherProps }
+                : otherProps;
+            return createElement(StyleContext.Provider, {
+                value: slotStyles,
+                children: createElement(Component, mergedProps)
+            });
+        };
+        const componentName = getDisplayName(Component);
+        WithRootProvider.displayName = `withRootProvider(${componentName})`;
+        return WithRootProvider;
+    };
+    const withProvider = (Component, slot, options) => {
+        const StyledComponent = styled(Component, {}, options);
+        const WithProvider = forwardRef((props, ref) => {
+            const [variantProps, restProps] = svaFn.splitVariantProps(props);
+            const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps);
+            slotStyles._classNameMap = svaFn.classNameMap;
+            const propsWithClass = { ...restProps, className: restProps.className ?? options?.defaultProps?.className };
+            const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot]);
+            return createElement(StyleContext.Provider, {
+                value: slotStyles,
+                children: createElement(StyledComponent, {
+                    ...resolvedProps,
+                    className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
+                    ref,
+                })
+            });
+        });
+        const componentName = getDisplayName(Component);
+        WithProvider.displayName = `withProvider(${componentName})`;
+        return WithProvider;
+    };
+    const withContext = (Component, slot, options) => {
+        const StyledComponent = styled(Component, {}, options);
+        const componentName = getDisplayName(Component);
+        const WithContext = forwardRef((props, ref) => {
+            const slotStyles = useStyleContext(componentName, slot);
+            const propsWithClass = { ...props, className: props.className ?? options?.defaultProps?.className };
+            const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot]);
+            return createElement(StyledComponent, {
+                ...resolvedProps,
+                className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
+                ref,
+            });
+        });
+        WithContext.displayName = `withContext(${componentName})`;
+        return WithContext;
+    };
+    return {
+        withRootProvider,
+        withProvider,
+        withContext,
+    };
+}

package/dist/esm/styled-system/jsx/divider.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { DividerProperties } from '../patterns/divider';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface DividerProps extends DividerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof DividerProperties > {}
+
+
+export declare const Divider: FunctionComponent<DividerProps>

package/dist/esm/styled-system/jsx/divider.js

@@ -0,0 +1,10 @@
+import { createElement, forwardRef } from 'react';
+import { splitProps } from '../helpers.js';
+import { getDividerStyle } from '../patterns/divider.js';
+import { styled } from './factory.js';
+export const Divider = /* @__PURE__ */ forwardRef(function Divider(props, ref) {
+    const [patternProps, restProps] = splitProps(props, ["orientation", "thickness", "color"]);
+    const styleProps = getDividerStyle(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return createElement(styled.div, mergedProps);
+});

package/dist/esm/styled-system/jsx/factory-helper.d.ts

@@ -0,0 +1,4 @@
+export function defaultShouldForwardProp(prop: any, variantKeys: any): boolean;
+export function composeShouldForwardProps(tag: any, shouldForwardProp: any): any;
+export function composeCvaFn(cvaA: any, cvaB: any): any;
+export function getDisplayName(Component: any): any;

package/dist/esm/styled-system/jsx/factory-helper.js

@@ -0,0 +1,21 @@
+import { isCssProperty } from './is-valid-prop.js';
+export const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop);
+export const composeShouldForwardProps = (tag, shouldForwardProp) => tag.__shouldForwardProps__ && shouldForwardProp
+    ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName)
+    : shouldForwardProp;
+export const composeCvaFn = (cvaA, cvaB) => {
+    if (cvaA && !cvaB)
+        return cvaA;
+    if (!cvaA && cvaB)
+        return cvaB;
+    if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__))
+        return cvaA.merge(cvaB);
+    const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.');
+    TypeError.captureStackTrace?.(error);
+    throw error;
+};
+export const getDisplayName = (Component) => {
+    if (typeof Component === 'string')
+        return Component;
+    return Component?.displayName || Component?.name || 'Component';
+};

package/dist/esm/styled-system/jsx/factory.d.ts

@@ -0,0 +1,3 @@
+/* eslint-disable */
+import type { Styled } from '../types/jsx';
+export declare const styled: Styled