marginTop: spacing()

in public/src/components/channelManagement/MultiSelectCountryEditor.tsx [14:55]


      marginTop: spacing(3),
    },
    borderColor: `2px solid ${{ color: grey[700] }}`,
    borderRadius: '2px',
    padding: spacing(2),
  },
}));

interface Option {
  label: string;
  value: string;
}

const options: Option[] = Object.entries(countries).map(([value, label]) => ({ value, label }));

interface MultiselectAutocompleteProps {
  disabled: boolean;
  regionTargeting: RegionTargeting;
  onRegionTargetingUpdate: (regionTargeting: RegionTargeting) => void;
}

const MultiselectAutocomplete: React.FC<MultiselectAutocompleteProps> = ({
  disabled,
  regionTargeting,
  onRegionTargetingUpdate,
}: MultiselectAutocompleteProps) => {
  const classes = useStyles();

  const [inputValue, setInputValue] = React.useState<string>('');

  return (
    <div className={classes.container}>
      <span style={{ fontSize: '1rem', fontWeight: 'normal' }}>
        Additionally if you want to target by countries select from the list
      </span>
      <Autocomplete
        id={'multi-select-country'}
        multiple
        disabled={disabled}
        options={options}
        getOptionLabel={option => option.label}
        value={regionTargeting.targetedCountryCodes?.map(country => {