import React, { forwardRef } from "react";
import { Slot } from "../utils/components/slot/Slot.js";
import { cl, createStrictContext } from "../utils/helpers/index.js";
const DEFAULT_COLOR = "accent";
const { Provider: ThemeProvider, useContext: useThemeInternal } = createStrictContext({
    name: "ThemeProvider",
    defaultValue: {
        color: DEFAULT_COLOR,
        isRoot: true,
    },
});
const Theme = forwardRef((props, ref) => {
    const context = useThemeInternal();
    const { children, className, asChild = false, theme = context === null || context === void 0 ? void 0 : context.theme, hasBackground: hasBackgroundProp, "data-color": color = context === null || context === void 0 ? void 0 : context.color, } = props;
    const isRoot = context === null || context === void 0 ? void 0 : context.isRoot;
    const hasBackground = hasBackgroundProp !== null && hasBackgroundProp !== void 0 ? hasBackgroundProp : (isRoot && props.theme !== undefined);
    const SlotElement = asChild ? Slot : "div";
    return (React.createElement(ThemeProvider, { theme: theme, color: color, isRoot: false },
        React.createElement(SlotElement, { ref: ref, className: cl("aksel-theme", className, theme), "data-background": hasBackground, "data-color": color !== null && color !== void 0 ? color : DEFAULT_COLOR }, children)));
});
export { Theme, useThemeInternal };
//# sourceMappingURL=Theme.js.map