fix: __context not passed to some components (#345)

* fix: `__context` not passed to some components

While some components are "rest..."ing props to children, some don't,
and those that don't, don't have the `__context` passed in the `rest`
parameter, which falls back to using default vars.

Issue originally popped up when I tried using `Text` component with
custom colors which ultimately didn't work out.

This change ensures that in components where `...rest` is not passed,
components pass `__context` to `Box` explicitly.

* chore: changesets

* chore: up changeset

.changeset/lazy-kiwis-vanish.md

@@ -0,0 +1,5 @@
+---
+"frog": patch
+---
+
+Fixed an issue where user defined vars were not passed to `Text`, `Spacer`, `Divider` and `Image` components.

src/ui/Divider.tsx

@@ -27,6 +27,7 @@ export function Divider<vars extends Vars = DefaultVars>(
     resolvedDirection === 'horizontal' ? horizontalProps : verticalProps
   return (
     <Box
+      __context={__context}
       backgroundColor={color ?? { custom: 'rgba(255,255,255,0.5)' }}
       {...resolvedProps}
     />

src/ui/Image.tsx

@@ -24,6 +24,8 @@ export type ImageProps<vars extends Vars = DefaultVars> = {
 
 export function Image<vars extends Vars>(props: ImageProps<vars>) {
   const {
+    // @ts-ignore - private
+    __context,
     borderRadius,
     borderBottomLeftRadius,
     borderBottomRightRadius,
@@ -36,6 +38,7 @@ export function Image<vars extends Vars>(props: ImageProps<vars>) {
   } = props
   return (
     <Box
+      __context={__context}
       borderRadius={borderRadius}
       borderBottomLeftRadius={borderBottomLeftRadius}
       borderBottomRightRadius={borderBottomRightRadius}

src/ui/Spacer.tsx

@@ -6,6 +6,17 @@ export type SpacerProps<vars extends Vars = DefaultVars> = {
   size?: VariableValue<'width', keyof vars['units']>
 }
 
-export function Spacer<vars extends Vars>({ size }: SpacerProps<vars>) {
-  return <Box grow={size ? undefined : true} height={size} width={size} />
+export function Spacer<vars extends Vars>({
+  // @ts-ignore - private
+  __context,
+  size,
+}: SpacerProps<vars>) {
+  return (
+    <Box
+      __context={__context}
+      grow={size ? undefined : true}
+      height={size}
+      width={size}
+    />
+  )
 }

src/ui/Text.tsx

@@ -38,6 +38,8 @@ const alignToAlignItems = {
 } as const
 
 export function Text<vars extends Vars>({
+  // @ts-ignore - private
+  __context,
   align,
   children,
   color,
@@ -54,6 +56,7 @@ export function Text<vars extends Vars>({
 }: TextProps<vars>) {
   return (
     <Box
+      __context={__context}
       alignItems={align ? (alignToAlignItems as any)[align] : undefined}
       color={color}
       fontFamily={font}