How to use the @modulz/radix-system.margin.propNames function in @modulz/radix-system

import React from 'react';
import styled from 'styled-components';
import css from '@styled-system/css';
import omit from 'lodash.omit';
import pick from 'lodash.pick';
import { margin, MarginProps } from '@modulz/radix-system';

export type CheckboxButtonProps = MarginProps &
  React.ComponentPropsWithRef<'input'> & { children: React.ReactNode };

const marginPropNames = margin.propNames;

export const CheckboxButton = React.forwardRef(
  ({ children, ...props }, forwardedRef) => {
    const marginProps = pick(props, marginPropNames);
    const inputProps = omit(props, marginPropNames);

    return (
      
        <input type="checkbox">
        {children}
      
    );
  }
);

const CheckboxWrapper = styled('label')(

import React, { FC, ComponentProps } from 'react';
import styled from 'styled-components';
import css from '@styled-system/css';
import omit from 'lodash.omit';
import pick from 'lodash.pick';
import { margin, MarginProps } from '@modulz/radix-system';
import themeGet from '@styled-system/theme-get';

export type SwitchProps = MarginProps & ComponentProps<'input'>;

const marginPropNames = margin.propNames;

export const Switch: FC = ({ children, ...props }) => {
  const marginProps = pick(props, marginPropNames);
  const inputProps = omit(props, marginPropNames);

  return (
    
      <input type="checkbox">
      
    
  );
};

const SwitchWrapper = styled('label')(
  css({
    position: 'relative',

const isControlled = Boolean(value);

  return (
    <div>
      {React.Children.map(children, (radio: ReactElement) =&gt;
        React.cloneElement(radio, {
          name,
          onChange,
          ...(isControlled ? { checked: value === radio.props.value } : {}),
        })
      )}
    </div>
  );
};

const marginPropNames = margin.propNames;

type Ref = HTMLInputElement;
export type RadioProps = MarginProps &amp; ComponentPropsWithRef&lt;'input'&gt;;

export const Radio: FC = forwardRef((props, forwardedRef) =&gt; {
  const { children, ...otherProps } = props;
  const systemProps = pick(otherProps, marginPropNames);
  const inputProps = omit(otherProps, marginPropNames);

  return (
    
      <input type="radio">
      
      {children &amp;&amp; {children}}
    
  );

import React, { ComponentProps } from 'react';
import styled from 'styled-components';
import css from '@styled-system/css';
import omit from 'lodash.omit';
import pick from 'lodash.pick';
import { margin, MarginProps } from '@modulz/radix-system';

export type CheckboxProps = MarginProps & ComponentProps<'input'>;

const marginPropNames = margin.propNames;

export const Checkbox = React.forwardRef(
  ({ children, ...props }, forwaredRef) => {
    const marginProps = pick(props, marginPropNames);
    const inputProps = omit(props, marginPropNames);

    return (
      
        <input type="checkbox">