diff --git a/packages/bento-design-system/src/BentoProvider.tsx b/packages/bento-design-system/src/BentoProvider.tsx index 0881d869b..3764975b7 100644 --- a/packages/bento-design-system/src/BentoProvider.tsx +++ b/packages/bento-design-system/src/BentoProvider.tsx @@ -49,10 +49,31 @@ type Props = { } & DefaultMessages; export function createBentoProvider( - config: PartialBentoConfig = {}, + config?: PartialBentoConfig, + sprinkles?: SprinklesFn +): (props: Props) => JSX.Element; + +export function createBentoProvider( + config?: PartialBentoConfig, theme?: BentoTheme, - sprinkles: SprinklesFn = bentoSprinkles + sprinkles?: SprinklesFn +): (props: Props) => JSX.Element; + +export function createBentoProvider( + config: PartialBentoConfig = {}, + themeOrSprinkles?: BentoTheme | SprinklesFn, + sprinkles_?: SprinklesFn ) { + let sprinkles: SprinklesFn = bentoSprinkles; + let theme: BentoTheme | undefined = undefined; + if (typeof themeOrSprinkles === "function") { + sprinkles = themeOrSprinkles; + } + if (typeof themeOrSprinkles === "object") { + theme = themeOrSprinkles; + sprinkles = sprinkles_ ?? bentoSprinkles; + } + function OptionalThemeWrapper(props: { children: Children; theme?: BentoTheme }) { if (!props.theme) return <>{props.children}; return {props.children}; diff --git a/packages/bento-design-system/stories/index.tsx b/packages/bento-design-system/stories/index.tsx index e34c29579..0a1a58646 100644 --- a/packages/bento-design-system/stories/index.tsx +++ b/packages/bento-design-system/stories/index.tsx @@ -19,7 +19,6 @@ export const BentoProvider = createBentoProvider( itemsPerPageOptions: [5, 10, 20, 50], }, }, - undefined, sprinkles );