import type { ReactNode } from 'react';

import { css, cx } from '@/styled-system/css';
import type { SystemStyleObject } from '@/styled-system/types';

interface BoxProps {
  children?: ReactNode;
  css?: SystemStyleObject;
}

const Box = (props: BoxProps) => {
  const { css: cssProp, children } = props;
  return <div className={cx(css(cssProp))}>{children}</div>;
};

const styles = css.raw({
  color: 'white',
  backgroundColor: 'AntiqueWhite',
});

const spreadStyles = css.raw({
  color: 'white',
  backgroundColor: 'SteelBlue',
});

export const CustomComponent = () => {
  return (
    <>
      {/* Panda CAN extract from source, but CANNOT from dist */}
      <Box css={{ color: 'black', backgroundColor: 'RebeccaPurple' }}>Box</Box>

      {/* Panda CAN extract from source and dist */}
      <Box css={styles}>Box</Box>
      <Box css={{ ...spreadStyles }}>Box</Box>
    </>
  );
};

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { css, cx } from "@/styled-system/css";

const Box = (props)=>{
    const { css: cssProp, children } = props;
    return /*#__PURE__*/ jsx("div", {
        className: cx(css(cssProp)),
        children: children
    });
};
const styles = css.raw({
    color: 'white',
    backgroundColor: 'AntiqueWhite'
});
const spreadStyles = css.raw({
    color: 'white',
    backgroundColor: 'SteelBlue'
});
const CustomComponent = ()=>{
    return /*#__PURE__*/ jsxs(Fragment, {
        children: [
            /*#__PURE__*/ jsx(Box, {
                css: {
                    color: 'black',
                    backgroundColor: 'RebeccaPurple'
                },
                children: "Box"
            }),
            /*#__PURE__*/ jsx(Box, {
                css: styles,
                children: "Box"
            }),
            /*#__PURE__*/ jsx(Box, {
                css: {
                    ...spreadStyles
                },
                children: "Box"
            })
        ]
    });
};

export { CustomComponent };