Spacing type doesn't apply styled-components with props

[rahXephonz]

Hello, all

I want to ask my spacing type with design system doesn't work with styled system

I've components Box you can see in here

const space = {
  /** Equal to 2px */
  xxxs: 2,
  /** Equal to 4px */
  xxs: 4,
  /** Equal to 8px */
  xs: 8,
  /** Equal to 12px */
  sm: 12,
  /** Equal to 16px */
  md: 16,
  /** Equal to 24px */
  lg: 24,
  /** Equal to 32px */
  xl: 32,
  /** Equal to 48px */
  xxl: 48,
};

export type Space = typeof space;

export default space;

export const theme = {
 ...space
}

Components

import React from "react";
import CSS from "csstype";

import { theme } from "libs/space";
import { Box, BoxProps } from "layout/Box";

type Space = keyof typeof theme["space"];

export interface StackProps extends Omit<BoxProps, "color"> {
  id: string;
  className: string;
  style: React.CSSProperties;
  color: string;
  direction: "horizontal" | "vertical";
  spacing: Space | CSS.Property.Margin; // indicate "sm" | "xs" | "lg" | "xxs"| etc
  children: React.ReactNode;
}

const Stack = React.forwardRef<HTMLDivElement, Partial<StackProps>>(
  ({ children, spacing, direction = "vertical", ...rest }, ref) => {
    const validChildrenArray = React.Children.toArray(children).filter(React.isValidElement);

    return (
      <Box
        ref={ref}
        sx={{
          display: "flex",
          flexDirection: direction === "horizontal" ? "row" : "column",
          "> :not([hidden]) ~ :not([hidden])": {
            ...(direction === "horizontal" ? { ml: spacing } : { mt: spacing }),
          },
        }}
        {...rest}
      >
        {validChildrenArray.map((child, i) => {
          if (typeof child === "string" || child.type === React.Fragment) {
            /* eslint-disable react/no-array-index-key */
            return <Box key={`stack-child-${i}`}>{child}</Box>;
          }

          return React.cloneElement(child);
        })}
      </Box>
    );
  }
);

Stack.displayName = "Stack";

export default Stack;

When using it. It doesn't generate with what i want for ex if i use

<Stack spacing="lg" direction="vertical" />

then it would be on browser :

Please help me.

[soroushm]

i couldnt find the styled system usage on your code but here is an example for you sandbox: https://codesandbox.io/s/agitated-sea-j2kxzv

const spacing = [0, 4, 8, 16, 32, 64, 128, 256];

spacing.xss = spacing[2];
spacing.xs = spacing[1];
spacing.md = spacing[2];
spacing.lg = spacing[3];
spacing.xl = spacing[4];
spacing.xxl = spacing[5];

const theme = {
  fontSizes: [12, 14, 16, 24, 32, 48, 64, 96, 128],
  space: spacing,
  colors: {
    blue: "#07c",
    red: "#e10"
  }
};


const Box = styled.div`
  ${space}
  ${width}
  ${fontSize}
  ${color}
`;

[rahXephonz]

Thanks