Gracefully ignore invalid props in calls to sprinklesFn

[liam-jones-lucout]

Currently, if making a <Box> style component and allowing sprinkles props to be passed in as component props, passing in a prop not found within the Sprinkle properties causes a crash.

I think that there's an argument to be made for it to gracefully ignore missing properties. That would allow users to change the definition of an atomically styled Box from this:

export const Box = forwardRef(
  (
    {
      children,
      component = "div",
      className,
      style,
      padding,
      px,
      py,
      pt,
      height,
      pl,
      pr,
      paddingTop,
      paddingBottom,
      paddingLeft,
      paddingRight,
      m,
      mx,
      my,
      mt,
      marginTop,
      marginBottom,
      marginLeft,
      marginRight,
      display,
      alignItems,
      justifyContent,
      flexDirection,
      flexWrap,
      flexGrow,
      flexShrink,
      borderRadius,
      position,
      top,
      bottom,
      left,
      right,
      backgroundColor,
      bg,
      color,
      width,
      p,
      zIndex,
      pointerEvents,
      cursor,
      textAlign,
      border,
      pb,
      boxShadow,
      borderStyle,
      borderWidth,
      borderColor,
      focus,
      mb,
      maxWidth,
      gap,
      mr,
      ml,
      alignSelf,
      overflow,
      ...rest
    }: BoxProps,
    ref,
  ) => {
    const atomClasses = clsx(
      sprinkles({
        gap,
        maxWidth,
        height,
        pl,
        pr,
        pb,
        pt,
        p,
        borderColor,
        borderWidth,
        borderStyle,
        boxShadow,
        padding,
        mt,
        px,
        py,
        border,
        paddingTop,
        paddingBottom,
        paddingLeft,
        paddingRight,
        m,
        mx,
        my,
        mb,
        marginTop,
        marginBottom,
        marginLeft,
        marginRight,
        display,
        alignItems,
        justifyContent,
        flexDirection,
        flexWrap,
        flexGrow,
        flexShrink,
        borderRadius,
        position,
        top,
        bottom,
        left,
        right,
        backgroundColor,
        color,
        width,
        zIndex,
        pointerEvents,
        cursor,
        textAlign,
        bg,
        mr,
        ml,
        alignSelf,
        overflow,
      }),
      focus && focusStyles,
      className,
    );
    return createElement(component, {
      className: atomClasses,
      style,
      children,
      ref,
      ...rest,
    });
  },
);

to this:

export const Box = forwardRef(
  (
    { children, component = "div", className, style, focus, ...rest }: BoxProps,
    ref,
  ) => {
    const atomClasses = clsx(
      sprinkles({
        ...rest,
      }),
      focus && focusStyles,
      className,
    );
    return createElement(component, {
      className: atomClasses,
      style,
      children,
      ref,
      ...rest,
    });
  },
);

I think currently the only way to implement what I'm asking is to wrap the SprinklesFN in my own function that calls properties.has on each property, which would add an additional loop over the properties that the library is doing anyway. If there is another solution, please let me know.