@moneyforward/mfui-components 2.48.1

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

@@ -0,0 +1,312 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uniq = exports.patternFns = exports.memo = exports.isBaseCondition = exports.hypenateProperty = exports.getSlotRecipes = exports.getSlotCompoundVariant = exports.getPatternStyles = void 0;
+exports.compact = compact;
+exports.createCss = createCss;
+exports.createMergeCss = createMergeCss;
+exports.filterBaseConditions = filterBaseConditions;
+exports.isObject = isObject;
+exports.mapObject = mapObject;
+exports.mergeProps = mergeProps;
+exports.splitProps = splitProps;
+exports.toHash = toHash;
+exports.walkObject = walkObject;
+exports.withoutSpace = withoutSpace;
+exports.normalizeHTMLProps = normalizeHTMLProps;
+exports.__spreadValues = __spreadValues;
+exports.__objRest = __objRest;
+// 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";
+exports.isBaseCondition = isBaseCondition;
+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;
+};
+exports.memo = memo;
+// 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();
+});
+exports.hypenateProperty = hypenateProperty;
+// 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
+};
+exports.patternFns = patternFns;
+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));
+};
+exports.getPatternStyles = getPatternStyles;
+// 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);
+};
+exports.getSlotRecipes = getSlotRecipes;
+var getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }));
+exports.getSlotCompoundVariant = getSlotCompoundVariant;
+// 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);
+};
+exports.uniq = uniq;
+// 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;
+function __spreadValues(a, b) {
+    return { ...a, ...b };
+}
+function __objRest(source, exclude) {
+    return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key)));
+}

package/dist/cjs/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/cjs/styled-system/jsx/aspect-ratio.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AspectRatio = void 0;
+const react_1 = require("react");
+const helpers_js_1 = require("../helpers.js");
+const aspect_ratio_js_1 = require("../patterns/aspect-ratio.js");
+const factory_js_1 = require("./factory.js");
+exports.AspectRatio = (0, react_1.forwardRef)(function AspectRatio(props, ref) {
+    const [patternProps, restProps] = (0, helpers_js_1.splitProps)(props, ["ratio"]);
+    const styleProps = (0, aspect_ratio_js_1.getAspectRatioStyle)(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return (0, react_1.createElement)(factory_js_1.styled.div, mergedProps);
+});

package/dist/cjs/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/cjs/styled-system/jsx/bleed.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Bleed = void 0;
+const react_1 = require("react");
+const helpers_js_1 = require("../helpers.js");
+const bleed_js_1 = require("../patterns/bleed.js");
+const factory_js_1 = require("./factory.js");
+exports.Bleed = (0, react_1.forwardRef)(function Bleed(props, ref) {
+    const [patternProps, restProps] = (0, helpers_js_1.splitProps)(props, ["inline", "block"]);
+    const styleProps = (0, bleed_js_1.getBleedStyle)(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return (0, react_1.createElement)(factory_js_1.styled.div, mergedProps);
+});

package/dist/cjs/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/cjs/styled-system/jsx/box.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = void 0;
+const react_1 = require("react");
+const helpers_js_1 = require("../helpers.js");
+const box_js_1 = require("../patterns/box.js");
+const factory_js_1 = require("./factory.js");
+exports.Box = (0, react_1.forwardRef)(function Box(props, ref) {
+    const [patternProps, restProps] = (0, helpers_js_1.splitProps)(props, []);
+    const styleProps = (0, box_js_1.getBoxStyle)(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return (0, react_1.createElement)(factory_js_1.styled.div, mergedProps);
+});

package/dist/cjs/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/cjs/styled-system/jsx/center.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Center = void 0;
+const react_1 = require("react");
+const helpers_js_1 = require("../helpers.js");
+const center_js_1 = require("../patterns/center.js");
+const factory_js_1 = require("./factory.js");
+exports.Center = (0, react_1.forwardRef)(function Center(props, ref) {
+    const [patternProps, restProps] = (0, helpers_js_1.splitProps)(props, ["inline"]);
+    const styleProps = (0, center_js_1.getCenterStyle)(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return (0, react_1.createElement)(factory_js_1.styled.div, mergedProps);
+});

package/dist/cjs/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/cjs/styled-system/jsx/circle.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Circle = void 0;
+const react_1 = require("react");
+const helpers_js_1 = require("../helpers.js");
+const circle_js_1 = require("../patterns/circle.js");
+const factory_js_1 = require("./factory.js");
+exports.Circle = (0, react_1.forwardRef)(function Circle(props, ref) {
+    const [patternProps, restProps] = (0, helpers_js_1.splitProps)(props, ["size"]);
+    const styleProps = (0, circle_js_1.getCircleStyle)(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return (0, react_1.createElement)(factory_js_1.styled.div, mergedProps);
+});

package/dist/cjs/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/cjs/styled-system/jsx/container.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+const react_1 = require("react");
+const helpers_js_1 = require("../helpers.js");
+const container_js_1 = require("../patterns/container.js");
+const factory_js_1 = require("./factory.js");
+exports.Container = (0, react_1.forwardRef)(function Container(props, ref) {
+    const [patternProps, restProps] = (0, helpers_js_1.splitProps)(props, []);
+    const styleProps = (0, container_js_1.getContainerStyle)(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return (0, react_1.createElement)(factory_js_1.styled.div, mergedProps);
+});

package/dist/cjs/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/cjs/styled-system/jsx/cq.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cq = void 0;
+const react_1 = require("react");
+const helpers_js_1 = require("../helpers.js");
+const cq_js_1 = require("../patterns/cq.js");
+const factory_js_1 = require("./factory.js");
+exports.Cq = (0, react_1.forwardRef)(function Cq(props, ref) {
+    const [patternProps, restProps] = (0, helpers_js_1.splitProps)(props, ["name", "type"]);
+    const styleProps = (0, cq_js_1.getCqStyle)(patternProps);
+    const mergedProps = { ref, ...styleProps, ...restProps };
+    return (0, react_1.createElement)(factory_js_1.styled.div, mergedProps);
+});

package/dist/cjs/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/cjs/styled-system/jsx/create-style-context.js

@@ -0,0 +1,96 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createStyleContext = createStyleContext;
+const index_js_1 = require("../css/index.js");
+const factory_js_1 = require("./factory.js");
+const factory_helper_js_1 = require("./factory-helper.js");
+const react_1 = require("react");
+function createSafeContext(contextName) {
+    const Context = (0, react_1.createContext)(undefined);
+    const useStyleContext = (componentName, slot) => {
+        const context = (0, react_1.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];
+}
+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 : (0, index_js_1.sva)(recipe.config);
+    const getResolvedProps = (props, slotStyles) => {
+        const { unstyled, ...restProps } = props;
+        if (unstyled)
+            return restProps;
+        if (isConfigRecipe) {
+            return { ...restProps, className: (0, index_js_1.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 (0, react_1.createElement)(StyleContext.Provider, {
+                value: slotStyles,
+                children: (0, react_1.createElement)(Component, mergedProps)
+            });
+        };
+        const componentName = (0, factory_helper_js_1.getDisplayName)(Component);
+        WithRootProvider.displayName = `withRootProvider(${componentName})`;
+        return WithRootProvider;
+    };
+    const withProvider = (Component, slot, options) => {
+        const StyledComponent = (0, factory_js_1.styled)(Component, {}, options);
+        const WithProvider = (0, react_1.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 (0, react_1.createElement)(StyleContext.Provider, {
+                value: slotStyles,
+                children: (0, react_1.createElement)(StyledComponent, {
+                    ...resolvedProps,
+                    className: (0, index_js_1.cx)(resolvedProps.className, slotStyles._classNameMap[slot]),
+                    ref,
+                })
+            });
+        });
+        const componentName = (0, factory_helper_js_1.getDisplayName)(Component);
+        WithProvider.displayName = `withProvider(${componentName})`;
+        return WithProvider;
+    };
+    const withContext = (Component, slot, options) => {
+        const StyledComponent = (0, factory_js_1.styled)(Component, {}, options);
+        const componentName = (0, factory_helper_js_1.getDisplayName)(Component);
+        const WithContext = (0, react_1.forwardRef)((props, ref) => {
+            const slotStyles = useStyleContext(componentName, slot);
+            const propsWithClass = { ...props, className: props.className ?? options?.defaultProps?.className };
+            const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot]);
+            return (0, react_1.createElement)(StyledComponent, {
+                ...resolvedProps,
+                className: (0, index_js_1.cx)(resolvedProps.className, slotStyles._classNameMap[slot]),
+                ref,
+            });
+        });
+        WithContext.displayName = `withContext(${componentName})`;
+        return WithContext;
+    };
+    return {
+        withRootProvider,
+        withProvider,
+        withContext,
+    };
+}

package/dist/cjs/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>